How to Make a Web Page With XML

by Contributor

Utilizing XML to create a web page allows developers to frequently supply fresh content for the site without having to spend time modifying web pages. XML based sites cannot be used with static html pages but must incorporate a level of dynamism through the use of a scripting language such as Perl, ASP or PHP. The advantage of using XML for web development is that the page only has to be created once. Essentially, an entire site can be updated on a daily basis by simply uploading an XML file. This article demonstrates how to use XML to create a very basic web page called Matt's News. Once the dynamic web page is constructed, the site's content can be updated by uploading an XML file.

1

Create the XML file. The XML file for the example will contain three tags and two attributes; a root tag, and two child tags for Matt's daily news items, and the daily picture. Copy the following into a blank text document. <doc> <item status="publish">The Spanish horses were brought to Santo Domindo square this morning. It was a lovely sight and so many people came out to see them. I brought my girlfriend and her cousin. We had a blast.</item> <pic status="publish">img1.jpg</pic> </doc> The "status" attributes will tell the web page that it should extract particular information from the XML document. Save the text as "news.xml."

2

Create the Perl CGI. This script opens the "news.xml" document on the server and searches for two items of information; the text between the <item> tags and the image file name between the <pic> tags; #!/usr/bin/perl -w print "Content-type: text/html\n\n"; open(XML,"<news.xml"); #opens the xml doc $/ = "</doc>"; #indexes the XML file at </doc> $count = 0; while (<XML>){ if (/<item status=\"publish\">(.*?)<\/item>/is){ $item=$1; #finds the saying with publish attribute } if (/<pic status=\"publish\">(.*?)<\/pic>/is){ $pic =$1; #finds the pic name with publish attribute } } print "<h2>Matt's News</h2><hr> <table width=450><tr><td><img src=\"/~your_root/$pic\" width=150 height=120 align=left/> </td><td>$item</td></tr></table><hr>"; #This snippet find the image and prints out the web page. Make sure to fill in with your directory root information. Save the code as "xml_site.cgi."

3

Upload your files to the server. Upload "news.xml" and "xml_site.cgi" to your cgi-bin. Upload an image named "img1.jpg" to your html doc folder.

4

Test the web page. Load the web page by opening the xml_site.cgi" page in your browser. You will do this by typing the following; "http://www.your_domain.com/~your_root/cgi-bin/xml_site.cgi." In this example, a heading in bold faced font appears that reads "Matt's News" followed by a horizontal rule. Under the horizontal rule, a picture of two horses opens to the left and a brief commentary to the right of the picture.

5

Add another entry to the XML file. To add another entry, open the "news.xml" file in a text editor. Make a copy of the first entry by cutting and pasting below it. Change the attributes of the first entry to "null." In the second entry change the image file to "img2.jpg" and write a new item of news. The second image for this article is of a female Fox Terrier names "La Nina," and the news is about her trip to the vet. Make sure that both attributes of the new item are set to "publish." Save the file.

6

Load the page again. This time, upload the "news.xml" file, reload the "xml_site.cgi" file in the browser and the content will automatically change to a new item of news and a new picture.

Tips

  • This is a very rudimentary example of what you can achieve with XML. However, the coding is sufficient to serve as a base for a larger more complex application using more XML fields, CSS, Javascript etc.
  • If you are planning to incorporate 1000s of XML records, it is a good idea to look into developing an application that creates XML documents on the fly, rather than copying and pasting. These can be created in Perl by incorporating file merging.

Warning

  • Make sure the syntax is correct. If one semicolon is out of place the program will fail to execute correctly if at all.

References

More Articles

Photo Credits