Jak stworzyć stronę internetową przy użyciu XML

Wykorzystanie XML do tworzenia stron internetowych pozwala na łatwe aktualizowanie treści bez konieczności ręcznej edycji plików HTML. Aby strona była dynamiczna, potrzebny jest język skryptowy (np. Perl, ASP, PHP), który odczyta dane z pliku XML i wygeneruje HTML w czasie rzeczywistym.

Krok 1 – Utwórz plik XML

Plik news.xml będzie zawierał jedną główną etykietę oraz dwa elementy: wiadomość oraz obraz. Skopiuj poniższy kod do pustego pliku tekstowego i zapisz jako news.xml:

<doc>
    <item status="publish">Hiszpańskie konie przyjechały dziś rano na plac Santo Domingo. Było pięknie, przybyło wielu ludzi. Przyjechałem z dziewczyną i jej kuzynem – świetna zabawa.</item>
    <pic status="publish">img1.jpg</pic>
</doc>

Atrybut status="publish" informuje skrypt, które elementy mają zostać wyświetlone.

Krok 2 – Stwórz skrypt Perl CGI

Poniższy skrypt otwiera news.xml, odczytuje zawartość tagów <item> i <pic>, a następnie generuje prostą stronę HTML.

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

open my $fh, '<', 'news.xml' or die "Nie można otworzyć news.xml: $!";
my $xml = do { local $/; <$fh> };
close $fh;

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

print "<h2>Matt'sNews</h2><hr>";
print "<div style='display:flex; align-items:center;'>";
print "<img src='$pic' alt='News image' style='margin-right:10px;'>";
print "<p>$item</p>";
print "</div>";

Zapisz kod jako xml_site.cgi i umieść go w katalogu cgi-bin na serwerze.

Krok 3 – Prześlij pliki na serwer

• Plik news.xml i skrypt xml_site.cgi wrzuć do katalogu cgi-bin.
• Obraz img1.jpg umieść w katalogu, z którego serwer może go serwować (np. folder html).

Krok 4 – Przetestuj stronę

Otwórz w przeglądarce adres:

https://www.twoja-domena.pl/~twoj_uzytkownik/cgi-bin/xml_site.cgi

Powinien pojawić się nagłówek „Matt's News”, pozioma linia oraz po lewej stronie zdjęcie koni, a po prawej krótki opis.

Krok 5 – Dodaj kolejny wpis

Aby dodać nową wiadomość, otwórz news.xml i skopiuj istniejący blok <item>…</item> oraz <pic>…</pic>. Zmieniaj atrybut status na publish oraz podaj nową nazwę obrazu (np. img2.jpg) i nowy tekst.

Po zapisaniu pliku przeładuj xml_site.cgi – strona automatycznie wyświetli nową treść i nowy obraz.

Wskazówki

• To bardzo prosty przykład, ale stanowi bazę do rozbudowy o dodatkowe pola XML, CSS, JavaScript itp.
• Przy dużej liczbie rekordów warto zautomatyzować generowanie plików XML (np. w Perlu przy użyciu łączenia plików).

Ostrzeżenie

• Upewnij się, że składnia XML i Perl jest poprawna – nawet jeden brakujący średnik może uniemożliwić działanie skryptu.