Cara Membuat Halaman Web Dinamis Menggunakan XML

Dengan memanfaatkan XML, pengembang dapat dengan cepat memperbarui konten situs tanpa harus memodifikasi halaman web secara manual. Situs berbasis XML memerlukan bahasa skrip seperti Perl, ASP, atau PHP agar dapat menampilkan konten secara dinamis. Kelebihan utama penggunaan XML adalah halaman web hanya perlu dibuat sekali; seluruh situs bisa diperbarui setiap hari dengan mengunggah satu berkas XML. Artikel ini akan memandu Anda membuat halaman web sederhana bernama Matt’s News menggunakan XML, lalu memperbarui konten dengan menunggah berkas XML baru.

Langkah 1

Buat berkas XML. Contoh berkas ini berisi tiga tag: satu tag akar <doc> dan dua tag anak <item> serta <pic> yang memuat berita harian dan gambar. Salin kode berikut ke editor teks kosong dan simpan sebagai news.xml:

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

Attribut status="publish" memberitahu skrip bahwa elemen tersebut harus diproses. Simpan berkas tersebut sebagai news.xml.

Langkah 2

Buat skrip Perl CGI. Skrip ini membuka berkas news.xml di server, mengekstrak teks antara tag <item> dan nama file gambar antara tag <pic>, lalu menampilkan hasilnya sebagai halaman HTML. Simpan skrip sebagai xml_site.cgi:

#!/usr/bin/perl -w
print "Content-type: text/html\n\n";
open my $fh, '<', 'news.xml' or die $!;
my $xml = do { local $/; <$fh> };
my ($item) = $xml =~ /(.*?)/is;
my ($pic)  = $xml =~ /(.*?)/is;
print "
Matt's News
\n
\n";
print "$item
\n";
print "\n";

Pastikan skrip ini berada di direktori cgi-bin dan memiliki hak eksekusi.

Langkah 3

Unggah semua berkas ke server: news.xml dan xml_site.cgi ke folder cgi-bin, serta gambar img1.jpg ke folder dokumen HTML.

Langkah 4

Uji halaman web. Buka URL berikut di browser: https://www.domainanda.com/~root/cgi-bin/xml_site.cgi. Anda akan melihat judul Matt's News diikuti garis horizontal, gambar kuda, dan teks berita.

Langkah 5

Tambahkan entri baru ke news.xml. Salin entri pertama, ubah atribut status entri pertama menjadi null, ganti nama gambar menjadi img2.jpg, dan tulis berita baru. Pastikan kedua atribut status entri kedua tetap publish. Simpan berkas.

Unggah ulang news.xml dan muat ulang xml_site.cgi di browser. Halaman akan menampilkan berita dan gambar terbaru.

Tips

• Contoh ini sangat sederhana, namun kode dasar dapat diperluas menjadi aplikasi lebih kompleks dengan menambahkan lebih banyak field XML, CSS, dan JavaScript.
• Jika Anda berencana menampilkan ribuan entri XML, pertimbangkan membuat aplikasi yang menghasilkan berkas XML secara dinamis, misalnya dengan Perl menggunakan file merge.

Perhatian

• Pastikan sintaks XML dan Perl benar; satu titik koma yang salah dapat menyebabkan skrip gagal dieksekusi.