JURNAL TEKNIK INFORMATIKA, JULI 2015

PENGEMBANGAN HALAMAN WEB MENGGUNAKAN XML

DALAM PERKEMBANGAN WEB 2.0

Winda Febriani Kusuma

S1 Program Studi Teknik Informatika

Fakultas Teknologi Industri, Universitas Gunadarma

Jalan Margonda Raya No. 100 Depok, Telp. (021)78881112

Email: rains.winda@gmail.com

ABSTRAKSI

Web 2.0 merupakan teknologi web yang menyatukan teknologi-teknologi yang dimiliki dalam

membangun web. Penyatuan tersebut merupakan gabungan dari HTML, CSS, JavaScript, XML. XML

hanya berisi sintaks kerangka-polos dan saat membuat sebuah dokumen XML, elemen dapat dibuat

dan dinamai sesuai keinginan (extensible). Sintaks XML memudahkan seseorang membaca dokumen

XML dan untuk para programmer untuk menulis browser, script, dan halaman Web yang mengakses

dan menampilkan informasi. Dalam penulisan ini akan disusun sebuah studi kasus untuk membuat

suatu halaman Web dalam pengembangannya menggunakan XML, yang isinya menampilkan

informasi katalog buku.

Keyword: XML, HTML, CSS, JavaScript.

1. PENDAHULUAN

XML (eXtensible Markup Language)

digunakan dalam banyak aspek

pengembangan web, sering dipakai untuk

menyederhanakan penyimpanan dan

pertukaran data.

XML saat ini dipakai bersama-sama

HTML dan sangat memperluas kapabilitas

halaman Web. Anda dapat membuat

dokumen web dari XML menggunakan

XSLT untuk mengubah dokumen Anda ke

dalam HTML. Kemudian dapat mengirim

XML untuk prosesor XSLT pada server

web dan melayani hasil yang ke browser

web. Hal ini membuat dokumentasi Anda

tersedia dalam format apapun yang Anda

butuhkan untuk menjadi di dalamnya.

2. METODE PENULISAN

Penulis melakukan metode dengan

mencari literature review menggunakan

media internet. Referensi tersebut

diperoleh dari jurnal-jurnal, sebagai

berikut a) Implementasi XML Signature

pada Dokumen XML untuk Transkrip

Nilai Online, sebagai contoh dalam

membuat katalog buku, b) Jurnam

Matematika dan Komputer Vol. 6. No. 3,

128 - 136, Desember 2003, ISSN : 1410-

8518 (Transformasi Dokumen XML),

penerapan dalam XML, c) Jurnal Generic,

Vol. 6, No. 2, Juli 2011, pp. 61~70 ISSN:

1907-4093 (Penerapan XML Web service

Pada Sistem Distribusi Barang), metode

pembahasan mengenai implementasi

perancangan system XML.

JURNAL TEKNIK INFORMATIKA, JULI 2015

3. TINJAUAN PUSTAKA

3.1 XML

merupakan bahasa web turunan

dari SGML (Standart Generalized Markup

Language) yang ada sebelumnya. XML

hampir sama dengan HTML, dimana

keduanya sama-sama turunan dari SGML.

Secara sederhana XML adalah

suatu bahasa yang digunakan untuk

mendeskripsikan dan memanipulasi

dokumen secara terstruktur. Secara teknis

XML didefinisikan sebagai suatu bahasa

meta-markup yang menyediakan format

tertentu untuk dokumen-dokumen yang

mempunyai data terstruktur. Bahasa

markup adalah mekanisme untuk

mengenal secara terstruktur di dokumen.

XML adalah suatu aplikasi profil dari

SGML.

Aplikasi XML untuk meningkatkan

dokumen XML :

a. Extensible Stylesheet Language

(XSLT) memungkinkan untuk

membuat style sheet dokumen yang

canggih menggunkan sintaks XML.

b. Xml Schema memungkinkan untuk

menulis skema yang rinci untuk

dokumen XML menggunkan sintaks

XML standar.

c. XML Linking Language (XLink)

mengizinkan untuk mengaitkan

dokumen XML. Memungkinkan target

multilink dan sejumlah fitur lainnya,

dan dianggap lebih mampu ketimbang

mekanisme pengaitan HTML.

d. XML Pointer Language (XPointer)

untuk mendefinisikan target link yang

luwes.

3.2 HTML

HTML (Hyper Text Markup

Language) merupakan bahasa asli dari

www, yang telah menjadi bahasa standar

untuk menampilkan data di internet.

Perkembangan html sangatlah pesat, saat

ini versi terakhir dari html telah mencapai

html 5.

Secara garis besar terdapat 4 jenis

elemen dari HTML yaitu :

1.) Structural

adalah kode program yang

menentukan level atau tingkatan dari

sebuah tulisan.

Contoh : <h1>Mozilla</h1> akan

memerintahkan browser untuk

menampilkan "Mozilla" sebagai tulisan

tebal besar yang menunjukkan sebagai

Heading 1.

2.) Presentational

adalah kode yang menentukan

tampilan dari sebuah tulisan, tidak peduli

dengan level dari tulisan tersebut.

Contoh : <b>Cetak Tebal</b> maka pada

browser akan menampilkan "Cetak Tebal".

Namun kode-kode presentational saat ini

sudah mulai digantikan dengan

penggunaan CSS (Cascading Style Sheets)

dan tidak direkomendasikan lagi untuk

mengatur tampilan tulisan.

3.) HyperText

kode program HTML yang

menunjukkan hubungan (link) ke bagian

lain dari dokumen tersebut atau link ke

dokumen lain.

contoh :

<ahref="http://berrybenka.com/">dress</a

> maka pada browser akan menampilkan

JURNAL TEKNIK INFORMATIKA, JULI 2015

"dress" sebagai sebuah hyperlink yang

menuju url http://berrybenka.com/

4.) Elemen

Widget yang membuat objek-objek

lain seperti tombol <button>, list <li>, dan

garis horizontal <hr>, Konsep hypertext

pada HTML memungkinkan kita untuk

membuat link pada suatu kelompok kata

atau frase untuk menuju ke bagian

manapun dalam World Wide Web

(WWW).

3.3 CSS

Cascading Style Sheets (CSS)

adalah suatu bahasa stylesheet yang

digunakan untuk mengatur tampilan suatu

dokumen yang ditulis dalam bahasa

markup. Penggunaan yang paling umum

dari CSS adalah untuk memformat

halaman web yang ditulis dengan HTML,

XML, dan XHTML.

CSS digunakan oleh penulis

maupun pembaca halaman web untuk

menentukan warna, jenis huruf, tata letak,

dan berbagai aspek tampilan dokumen.

CSS digunakan terutama untuk

memisahkan antara isi dokumen dengan

presentasi dokumen (yang ditulis dengan

CSS). Memungkinkan juga untuk halaman

yang sama untuk ditampilkan dengan cara

yang berbeda untuk metode presentasi

yang berbeda, seperti melalui layar, cetak,

suara (sewaktu dibacakan oleh browser

basis-suara atau pembaca layar), dan juga

alat pembaca braille. Halaman HTML atau

XML yang sama juga dapat ditampilkan

secara berbeda, baik dari segi gaya

tampilan atau skema warna dengan

menggunakan CSS.

3.4 JavaScript

JavaScript seringkali disertakan

dalam file HTML atau link dari file HTML

dan dijalankan secara lokal oleh web

browser. Ini berarti bahwa server bebas

untuk mengerjakan sesuatu yang lain

daripada pemrosesan instruksi untuk setiap

klien. Hal ini telah membuat JavaScript

pilihan yang lebih populer daripada bahasa

yang memerlukan server untuk melakukan

pengolahan.

Berbagai animasi untuk

mempercantik halaman web, fitur chatting,

efek-efek modern, games, semuanya bisa

dibuat menggunakan JavaScript.

4. PEMBAHASAN

4.1 Jurnal Generic, Vol. 6, No. 2, Juli

2011, pp. 61~70 ISSN: 1907-

4093/Penerapan XML Web

service Pada Sistem Distribusi

Barang

Beberapa operasi/proses yang

melibatkan web service baik aplikasi pada

server apotek pusat maupun aplikasi pada

server apotek cabang/outlet di antaranya

adalah:

a. Aplikasi pada server apotek pusat

1. Monitor Stok Barang

Operasi monitor stok barang

pada apotek pusat berfungsi

untuk melakukan memantau

dan memeriksa jumlah stok

yang tersedia pada semua

produk yang terdaftar pada

tiap-tiap apotek cabang/outlet.

2. Laporan Transaksi

Laporan transaksi berfungsi

untuk mencetak laporan seluruh

transaksi yang terjadi baik di

JURNAL TEKNIK INFORMATIKA, JULI 2015

apotek pusat maupun

cabang/outlet.

3. Pengiriman Barang

Operasi pengiriman barang

berfungsi untuk melakukan

pengiriman sejumlah stok

barang pada jenis produk

tertentu ke salah satu apotek

cabang/outlet.

b. Aplikasi pada server apotik

cabang/outlet

1. Download Mater Produk

Operasi download master

produk pada apotik

cabang/outlet berfungsi untuk

meng-update data seluruh

produk yang terdaftar dan

menyetarakannya dengan data

yang terbaru pada apotik pusat

serta memonitor stok barang

yang tersedia pada semua

produk yang terdaftar pada

apotek pusat dan apotek

cabang/outlet.

2. Penerimaan Barang

Operasi penerimaan barang

berfungsi untuk menerima

sejumlah tertentu suatu produk

dan meng-update data stok

produk tersebut sesuai dengan

jumlah/kuantitas barang yang

diterima.

3. Pemesanan (Order) Pengiriman

Barang

Operasi pemesanan pengiriman

barang pada beberapa jenis

produk tertentu dengan

jumlah/kuantitas tertentu

dilakukan oleh apotik

cabang/outlet yang ditujukan ke

apotik pusat.

4.2 Implementasi XML Signature

pada Dokumen XML untuk

Transkrip Nilai Online

Proses yang paling inti dalam sistem ini

adalah proses memperoleh transkrip nilai.

Untuk memperoleh transkrip yang

memiliki type format XML yang terdapat

digital signaturenya maka pada tampilan

halaman transkrip dapat dipilih algoritma

NoSignature, DSAwithSHA1 atau

RSAwithSHA1 untuk message digest yang

akan diberikan pada elemen Reference

nantinya serta algoritma signature-nya,

pilihan tersebut berdasarkan pada standar

rekomendasi dari W3C. Selanjutnya

penentuan type penyajian signature-nya

(tipe dari XML Digital Signaturenya),

pilihannya adalah Enveloped atau

Enveloping. Hasil dari transkrip yang

bertipekan XML Digital Signature ini

dapat disimpan untuk kemudian dapat

digunakan sebagai transkrip nilai digital.

Jika terjadi modifikasi dokumen

Transkrip XML tersebut baik data maupun

Signaturenya maka integritas dokumen

XML tidak terjaga, hal ini dapat diketahui

karena proses verifikasi akan memberikan

kembalian nilai false.

4.3 JURNAL MATEMATIKA DAN

KOMPUTER Vol. 6. No. 3, 128 -

136, Desember 2003, ISSN :

1410-8518/Transformasi

Dokumen XML

a. Pemrosesan XSL

XSL adalah bahasa yang digunakan

untuk mengekpresikan suatu stylesheet.

JURNAL TEKNIK INFORMATIKA, JULI 2015

XSL terdiri dari XSL Transformations

(XSLT) dan XSL Formating Objects

(XSL-FO) (Holzner & Steven, 2002).

XSLT kebanyakan digunakan untuk

mentransformasikan dokumen XML ke

HTML, sedangkan XSL-FO digunakan

untuk melakukan konversi dokumen XML

ke format PDF.

Stylesheets diproses

menggunakan XSL stylesheet

prosesor, yang dapat menerima

dokumen atau data dalam bentuk XML

dan XSL stylesheet akan menghasilkan

presentasi isi dokumen XML sumber

yang dirancang dalam stylesheet.

Terdapat 2 aspek dalam proses

pembentukan presentasi (Adler et. al.

2002 ), (Clark & James, 2002) yaitu :

1. Mengkonstruksikan hasil berupa

tree dari tree dokumen XML

sumber.

2. Menginterprestasikan hasil yang

berupa tree untuk menghasilkan

suatu format hasil yang sesuai

dengan presentasi pada display atau

media yang akan digunakan untuk

menampilkan dokumen hasil

transformasi.

Untuk aspek yang pertama disebut

tree transformation, sedangkan aspek

yang kedua disebut formatting yang

dijalankan oleh formatter. Untuk detail

model konseptual pemrosesan terhadap

XSL diberikan pada gambar 1 sebagai

berikut :

b. Mekanisme Transformasi

Dokumen XML

Untuk melakukan transformasi

dokumen XML digunakan Cocoon

framework yang merupakan open

source project dikembangkan oleh

(Mazzocchi, 2002). Cocoon framework

adalah framework XML publish untuk

meningkatkan penggunaan teknologi

XML dan XSLT pada server

application. Adapun untuk mekanisme

dasar cocoon dalam melakukan

pemrosesan dokumen XML diberikan

pada gambar 2.

Dokumen XML dibangkitkan

melalui Generator, kemudian dokumen

XML ditransformasikan ke dokumen

lainnya melalui Transformer dengan

menggunakan stylesheet. Dokumen XML

dikumpulkan pada Aggregator dan

selanjutnya dilakukan rendering terhadap

dokumen XML melalui serializer untuk

menghasilkan format dokumen yang lain.

Pemrosesan yang dilakukan bersifat

pipeline processing, dengan menggunakan

konfigurasi sitemap yang dapat dilakukan

setting secara dinamik terhadap pipeline

processing yang terdiri dari generator,

multiple transformer dan serializer.

JURNAL TEKNIK INFORMATIKA, JULI 2015

c. Implementasi Transformasi

Dokumen XML

Untuk contoh implementasi

dilakukan transformasi dokumen XML

ke format dokumen HTML dan PDF.

Informasi dokumen distrukturkan

menggunakan XML sebagai dokumen

sumber yang akan ditransformasikan

ke format dokumen HTML dan PDF.

Struktur dokumen XML sumber

menggunakan dokumen XML pada

kode 1.

Kemudian dibuat stylesheet untuk

masing-masing format hasil

transformasi ke dokumen HTML dan

PDF. Untuk transformasi ke format

dokumen HTML digunakan XSLT,

sedangkan untuk transformasi ke

format dokumen PDF digunakan XSL-

FO. yang diberikan pada kode 2 dan 3.

Kemudian untuk pemrosesan secara

pipeline processing dilakukan dengan

membuat sitemap, yang diberikan pada

kode 4. Untuk melakukan transformasi ke

format dokumen HTML digunakan

prosesor XSL JTidy, sedangkan untuk

format PDF digunakan prosesor XSL FOP.

Sitemap dapat memilih pipeline tertentu

berdasarkan pada request yang terjadi

melalui browser.

Untuk hasil transformasi dokumen

XML ke format dokumen HTML dan PDF

yang dijalankan pada browser diberikan

pada gambar 3 dan 4. Informasi yang

terdapat pada masing-masing hasil

JURNAL TEKNIK INFORMATIKA, JULI 2015

transformasi menggunakan dokumen

sumber pada kode 1, dimana dengan satu

format dokumen sumber dapat ditampilkan

pada persentasi yang berbeda.

4.4 Contoh Kasus Halaman Web

Untuk memahami pengembangan

WebSite dengan XML, maka diberikan

sebuah contoh kasus untuk membuat

halaman Web yang sisinya menampilkan

katalog buku.

a. Buat sebuah dokumen XML

dengan isi data dari tebel berikut :

b. Buat dokumen XML baru berisi

daftar dokumen XML yang telah

dibuat sebelumnya, contoh :

c. Buat file XSLT untuk memproses

dokumen XML yang berisi daftar

JURNAL TEKNIK INFORMATIKA, JULI 2015

buku untuk ditampilkan pada

halaman web, yang nantinya akan

berisi katalog buku yang masing-

masing judul bvukunya memiliki

link ke halaman detail buku.

Selanjutnya buka .xml dan .xsl pada

browser, maka akan tampil halaman

katalog buku.

5. PENUTUP

Kesimpulan

Perkembangan web 2.0 lebih

menekankan pada perubahan cara berpikir

dalam menyajikan konten dan tampilan di

dalam sebuah website. XML (Extensible

Markup Language), salah satu bahasa yang

menjanjikan penyimpanan dan pengiriman

informasi pada World Wide Web (www).

XML bersama HTML sangat

memperluas kapabilitas halaman Web

untuk : Menyampaikan secara virtual

berbagai macam dokumen, Mengurutkan,

menyaring, memanipulasi informasi

dengan cara yang lain, menghadirkan

informasi yang sangat terstruktur.

Dengan adanya CSS dan XSLT

membuat tampilan website menajdi lebih

menarik dan memprmbudah dalam

penginstruksian melalui XSLT.

Saran

Kebanyakan situs-situs yang

menggunakan XML, para desainer web

dan pengembang konten mungkin bahkan

tidak tahu bahwa XML ada di sana. Hal ini

karena umumnya ada CMS atau sistem

manajemen konten yang berada di depan

XML untuk membuatnya lebih mudah

bagi penulis konten untuk menulis konten

web mereka tanpa perlu khawatir

bagaimana menulis HTML atau mendesain

halaman web. Oleh karena itu, diharapkan

XML terus berkembang dan meningkatkan

language-nya untuk performa lebih bailk

lagi dalam membuat halaman Web, serta

meningkatkan ilmu pengetahuan bagi

pendesain website.

6. DAFTAR PUSTAKA

Afahrurroji,

http://afahrurroji.net/kegunaan-dan-cara-

menggunakan-xml/

Deviana Hartati. Penerapan XML Web

service Pada Sistem Distribusi Barang.

Juli 2011.

LPAPK-LEPKOM 2003. Introduction to

XML. Universitas Gunadarma.

Suteja,BR.

majour.maranatha.edu/index.php/jurnal-

informatika/article/view/.../pdf

Widodo, Aris Puji. Transformasi Dokumen

XML.2003.