Skapa en webbsida med XML

Skapa en webbsida med XML

Att använda XML för att bygga en webbsida gör det möjligt för utvecklare att snabbt uppdatera innehåll utan att behöva ändra HTML-koden. XML-baserade sajter kräver ett dynamiskt språk som Perl, ASP eller PHP för att kunna läsa och visa data. Fördelen är att hela sidan kan uppdateras varje dag genom att ladda upp en enda XML-fil.

Steg 1 – Skapa XML-filen

Skapa en tom textfil och klistra in följande exempel. Filen innehåller tre taggar och två attribut: en rot doc, en item för nyhetstext och en pic för bildfilen.

<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>

Spara filen som news.xml. Attributet status="publish" signalerar att sidan ska visa innehållet.

Steg 2 – Skapa Perl CGI-skriptet

Det här skriptet öppnar news.xml, hämtar texten mellan <item> och namnet på bilden mellan <pic>, och skriver ut en enkel HTML-sida.

#!/usr/bin/perl -w
print "Content-type: text/html\n\n";

open my $xml_fh, '<', 'news.xml' or die "Kan inte öppna news.xml: $!";
my $xml = do { local $/; <$xml_fh> };
close $xml_fh;

my ($item) = $xml =~ /<item status=\"publish\">(.*?)<\/item>/is;
my ($pic)  = $xml =~ /<pic status=\"publish\">(.*?)<\/pic>/is;

print "<h2>Matt's News</h2>\n";
print "<hr>\n";
print "<p>$item</p>\n";
print "<img src=\"$pic\" alt=\"News image\"\n";

Spara skriptet som xml_site.cgi och se till att filen har körbehörighet.

Steg 3 – Ladda upp filerna

Placera news.xml och xml_site.cgi i din cgi-bin-katalog och ladda upp bilden img1.jpg till din webbplats huvudkatalog.

Steg 4 – Testa sidan

Öppna webbläsaren och gå till https://www.dittdomän.com/~ditt_root/cgi-bin/xml_site.cgi. Du bör se rubriken "Matt's News", en horisontell linje, bilden och nyhetstexten.

Steg 5 – Lägg till fler nyheter

Öppna news.xml i en textredigerare. Kopiera den första posten och klistra in den under den. Ändra attributet status för den gamla posten till "null". Skapa en ny bildfil (t.ex. img2.jpg) och skriv ny nyhetstext. Se till att både status-attributen är "publish". Spara filen och ladda om CGI-skriptet i webbläsaren för att se uppdateringen.

Tips

• Detta är ett grundläggande exempel. Du kan utöka det med fler XML-fält, CSS, JavaScript och mer komplex logik.
• Om du planerar att hantera tusentals XML-poster, överväg att automatisera XML-skapandet med ett skript eller ett databassystem.

Varning

• Kontrollera alltid syntaxen. Ett felställt semikolon eller ett slitet citattecken kan stoppa skriptet från att köras.