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: [email protected]

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

2. METODE PENULISAN

XML (eXtensible Markup Language) digunakan dalam banyak aspek pengembangan web, sering dipakai untuk menyederhanakan penyimpanan dan pertukaran data.

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 : 14108518 (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.

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.

JURNAL TEKNIK INFORMATIKA,

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 dokumen XML : a. Extensible

untuk

meningkatkan

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

JULI 2015

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 :

Mozilla

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 : Cetak Tebal 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 : dress maka pada browser akan menampilkan

JURNAL TEKNIK INFORMATIKA,

"dress" sebagai sebuah hyperlink yang menuju url http://berrybenka.com/ 4.) Elemen Widget yang membuat objek-objek lain seperti tombol , list

, dan garis horizontal

---

, 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

JULI 2015

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: 19074093/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,

apotek pusat cabang/outlet.

JULI 2015

maupun

cabang/outlet yang ditujukan ke apotik pusat.

3. Pengiriman Barang Operasi pengiriman barang berfungsi untuk melakukan pengiriman sejumlah stok barang pada jenis produk tertentu ke salah satu apotek cabang/outlet.

4.2 Implementasi XML Signature pada Dokumen XML untuk Transkrip Nilai Online

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

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

Transformasi

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,

c. Implementasi Dokumen XML

JULI 2015

Transformasi

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 XSLFO. 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,

buku untuk ditampilkan pada halaman web, yang nantinya akan berisi katalog buku yang masingmasing judul bvukunya memiliki link ke halaman detail buku.

Selanjutnya buka .xml dan .xsl pada browser, maka akan tampil halaman katalog buku.



JULI 2015

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

Afahrurroji, http://afahrurroji.net/kegunaan-dan-caramenggunakan-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/jurnalinformatika/article/view/.../pdf Widodo, Aris Puji. Transformasi Dokumen XML.2003.