How to Make a Web Page With XML
- 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.
