Displaying Content From A Text File

I’ve recently been working on a website for The Stoops. It’s a one page site with a fairly simple layout; The main thing was that they wanted to be able to have the option to update the gig listings themselves (otherwise they’re having to constantly go through the web developer.) Normally I’d jump into using databases along with PHP for dynamic content, but this felt a little bit like overkill. So I did some research for different ways of getting text to appear from a separate file onto the web page. Here is what I found:

Method 1
I created a basic text file containing a list of gigs:

Date – Location,
Date – Location,
Date – Location,
Date – Location

I then used the following code to display its contents within the HTML page:

<?php include ‘gigs.txt’ ?>

method1

Method 2
Using the same text file from method1 but this time using the PHP function ‘file_get_contents,’ which returns the file as a string. The string can then be put directly to the screen like in method1 or you could try using string functions to format it:

<!DOCTYPE HTML>

<html lang=”en”>

<head>

<meta charset=utf-8 />

<title>Gig Listings</title>

<style type=”text/css”>

dl dt

{

font-weight: bold;

float: left;

clear: left;

margin-right: 5px;

}

dl dt:after

{

content: “-“;

}

</style>

</head>

<body>

<?php

$fileName = “gigs.txt”;

if (file_exists($fileName))

{

$gigListings = file_get_contents($fileName);

$gigListings = explode(‘,’, $gigListings);

if (!empty($gigListings))

{

$gigData = array();

echo ‘<dl>’;

foreach ($gigListings AS $value)

{

$gigData = explode(“-“, $value);

echo ‘<dt>’.$gigData[0].'</dt><dd>’.$gigData[1].'</dd>’;

}

echo ‘</dl>’;

}

}

?>

</body>

</html>

method2

Method 3
My final solution was to use an XML file. XML stands for ‘extensible markup language’ and is a way of storing data separate from its visual formatting. It’s fairly easy to learn by following the tutorials on W3schools. The contents of the file can then be loaded into the page using Javascript.

I created the XML file:

<?xml version=”1.0″ encoding=”UTF-8″?>

<list>

<gigs>

<date>Date</date>

<location>Location</location>

</gigs>

<gigs>

<date>Date</date>

<location>Location</location>

</gigs>

<gigs>

<date>Date</date>

<location>Location</location>

</gigs>

</list>

I then wrote the html page including the javascript to get and display the contents on screen:

<!DOCTYPE HTML>

<html>

<head lang=”en”>

<meta charset=utf-8 />

<title>Gig Listings</title>

<style type=”text/css”>

body

{

background: black;

color: #cccccc;

}

b

{

color: #e90d8b;

}

h1

{

color: #ffffff;

}

</style>

</head>

<body>

<h1>Upcoming Gigs</h1>

<div id=”gigs”>

</div>

<script type=”text/javascript” >

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

xmlhttp.open(“GET”,”gigs.xml”, false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

var gigs = xmlDoc.getElementsByTagName(“gigs”);

var display = document.getElementById(“gigs”);

for (i=0;i<gigs.length; ++i)

{

display.innerHTML += “<p><b>” + gigs[i].getElementsByTagName(“date”)[0].childNodes[0].nodeValue + “</b> – ” + gigs[i].getElementsByTagName(“location”)[0].childNodes[0].nodeValue + “</p>”;

}

</script>

</body>

</html>

method3

On the final version I separated everything into neat files and used a callback function for ‘onReadyStateChange.’ This allows me to test if the file has been found and opened successfully. I also created a new function to contain the code for creating a XMLHttpRequest object.

xmlhttp=getXMLHttpRequestObject();

xmlhttp.open(“GET”,”gigs.xml”);

xmlhttp.onreadystatechange = function()

{

handleData(xmlhttp);

}

xmlhttp.send();

function handleData(xmlhttp)

{

if (xmlhttp.readyState==4)

{

if ((xmlhttp.status == 200) || (xmlhttp.status == 304))

{

var xmlDoc=xmlhttp.responseXML;

// more code

}

}

}

the_stoops_website

Bare in mind that these examples will need to be on a server to work. I use WampServer myself for running and testing my web pages – http://www.wampserver.com/en/. If you have any web development solutions or tips feel free to share them in the comments. If you like upbeat synth-pop music then please check out http://www.thestoopsmusic.co.uk/; they have some pretty awesome songs.

(Sorry about the terrible formatting. First time sharing my code online and WordPress doesn’t seem to make formatting easy.)

Related Post:

Advertisements

Tags: , , , , , , , ,

About wallcat

I have a strong passion for computing. In particular programming for which I am able to use a variety of languages including C++, Visual C#, Blitz Basic, Actionscript 2.0, Python and Lua. I also enjoy web-design and have some knowledge of HTML/CSS, PHP/SQL and Javascript. As well as programming I have a strong background in art and enjoy drawing in my spare time. When I’m not sat at my computer I like to keep fit by going to the gym or using my exercise ball.

4 responses to “Displaying Content From A Text File”

  1. Atomic Mutant says :

    Any specific reason for not using jQuery? Would make the page bigger but probably remove the version-checking from your code…

    • wallcat says :

      I’m still in the process of teaching myself jQuery, but I’ve mostly only needed to implement simple functionality so far so I assumed that using Javascript would be better than having a bigger page. Thanks for the comment, I’ll definitely consider updating to jQuery in the future.

  2. artes del viento (Arturo Marroquin) says :

    Nice tips, I am learning some HTML. I am still newbie but this is very helpful

    • wallcat says :

      Thanks. I’ve never really considered sharing any of my code online before because I’m still learning all the time, but every so often I struggle to find the solution for something and I wondered whether I should start to post some of my own findings. Good luck with the HTML.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: