Pengenalan XML Bagian-bagian XML Root node Element node Attribute note Text node Comment node Processing Instruction node NameSpace Node

dokumen-dokumen yang mirip
XML. Minggu 11 Sumber : Materi Pengantar XML, Moh Junaedi, Pemrograman Web/TI/ AK /2 sks

Moh Junaedi

Penggunaan Struktur Data Pohon Berakar dalam XML

XML extensible Markup Language. Oleh: Nisa Miftachurohmah, S. Kom

HTML (HYPERTEXT MARKUP LANGUAGE)

XPath E X T E N S I B L E P A T H L A N G U A G E

XML extensible Markup Language

XML (extensible Markup Language) PRODI TEKNIK TELEKOMUNIKASI POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

BAB II LANDASAN TEORI

PEMBUATAN PROGRAM UNTUK MENGUBAH FILE DATABASE MENJADI XML

BAB I PENDAHULUAN I.1. Latar Belakang

Pemrograman Basis Data Berbasis Web

PEMROGRAMAN WEB. 11 XML, XHTML dan JSON. Andi WRE

PEMROGRAMAN CLIENT SERVER XML FUNDAMENTAL Dosen Pengampu : Fandy Setyo Utomo, S.Kom

Pemrograman Basis Data Berbasis Web

Pemrograman Berbasis Web Pertemuan 5 XML & DTD. Program Diploma IPB - Aditya Wicaksono, S.Komp 1

HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom

Pengenalan Script. Definisi HTML

BELAJAR HTML DASAR CARA MEMBUAT TABEL

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML

Pertemuan IV. Semester 1

BAB I PERKENALAN HTML

BAB I PERKENALAN HTML

XML vs JSON. by: Ahmad Syauqi Ahsan

MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form

HTML (HyperText Markup Language)

DOM (Document Object Model) dan Event

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

TUTORIAL BELAJAR HTML

Aplikasi Pengolah Bahasa Alami untuk Query Basisdata Akademik dengan Format Data Xml

TEKNIK DOCUMENT OBJECT MODEL (DOM) UNTUK MANIPULASI DOKUMEN XML. Kusnawi ABSTRACT

PEMROGRAMAN BERBASIS WEB. Part 1,2 HTML. By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018

HTML. Hypertext Markup Language. Pemrograman Web 1. Genap

RENCANA PEMBELAJARAN SEMESTER (RPS)

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata

Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency

Materi 1 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com

Bahasa Pemrograman Untuk Pembuatan Web

Review Pemrograman Web I

BAB III Validasi HTML5

KBKF53110 WEB PROGRAMMING

Bab 5. Cascading Style Sheet (CSS)

HTML DOM. Pemrograman Web 1. Genap

DESAIN WEB STATIS DAN HTML. Dahlan Abdullah Website :

1. Pengenalan HTML. 2. Tag Dasar HTML

Pemrograman Web Week 2. Team Teaching

Materi 5 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya

MEMANFAATKAN CASCADING STYLE SHEET UNTUK MEMPERINDAH TAMPILAN WEB

CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa

A. Tujuan B. Dasar Teori 1. Pemrosesan Form 2. Konsep Penggunaan Tag <form> pada HTML

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata

Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak

QUERY BAHASA INDONESIA PADA BASISDATA SOAL UJIAN DI FAKULTAS TEKNOLOGI INFORMASI UNIVERSITAS STIKUBANK DENGAN FORMAT DATA XML

1. Mahasiswa mampu membuat form pada dokumen HTML. 2. Mahasiswa memahami cara penggunaan dari fasilitas Form pada halaman dokumen HTML

Interactive Broadcasting

APLIKASI WEB PENGUJIAN KESERUPAAN XML DENGAN METODA EDIT DISTANCE

Xpath Dokumen Xml untuk Perolehan Data pada Basisdata Perundangan Pemerintah Kota Semarang

HTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa

Struktur Umum File Dengan Bahasa HTML

Pengenalan Dasar HTML 5. Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG

CARA MEMBUAT CSS DENGAN DREAMWEAVER

STMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA.

Membuat Button Dengan CSS

Tag HTML Container. Nuryani Sofia Dewi / / Kelas A

Pengenalan Perancangan Web 2017

Chapter 2. Tipe Data dan Variabel

FERNANDYA RISKI HARTANTRI / F DASAR-DASAR HTML

Sistem Manajemen Basis Data Web 2 :

PEMROGRAMAN WEB 1 JavaScript Rio Andriyat Krisdiawan, M.Kom

Extensible Markup Language (XML)

Cara mudah belajar HTML

Pengenalan PHP Contoh penulisan file PHP :

Materi 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com

Modul Praktikum Desain Web 2015

Pemrograman Web. Javascript. Indrato, S.Kom Introduction. Penyisipan JS dalam HTML. PemrogramanWeb.2009

Pengenalan Perancangan Web 2017

Materi Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com

PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 5

XML. Apakah XML XML vs HTML XML Struktur DTD XLST

SISTEM PERTUKARAN DATA ANTAR BASIS DATA DENGAN XML

Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form.

Pengenalan JavaScript

Mengenal dan Mengedit HTML

SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER JAKARTA STI&K SATUAN ACARA PERKULIAHAN

BAB IV HASIL PENELITIAN

SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :

Pemrograman Web Week 4. Team Teaching

Nama : Yohandes Efindo NIM : Kelas : F. Terjemahan halaman 4-5. Tag HTML

BAB IV HASIL DAN UJI COBA

Pengenalan HTML dan CSS

DAFTAR ISI. Abstrak Kata Pengantar Daftar Isi... Daftar Tabel.. Daftar Singkatan...

Transkripsi:

BELAJAR XML Pengenalan XML XML kependekan dari extensible Markup Language, dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998. Seperti halnya HTML, XML juga menggunakan elemen yang ditandai dengan tag pembuka (diawali dengan < dan diakhiri dengan > ), tag penutup(diawali dengan </ diakhiri > ) dan atribut elemen(parameter yang dinyatakan dalam tag pembuka misal <form name= isidata >). Hanya bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut sesuai kehendak kita. Bagian-bagian XML Sebuah dokumen XML terdiri dari bagian bagian yang disebut dengan node. Node-node itu adalah: Root node yaitu node yang melingkupi keseluruhan dokumen. Dalam satu dokumen XML hanya ada satu root node. Node-node yang lainnya berada di dalam root node. Element node yaitu bagian dari dokumen XML yang ditandai dengan tag pembuka dan tag penutup, atau bisa juga sebuah tag tunggal elemen kosong seperti <anggota nama= budi />. Root node biasa juga disebut root element Attribute note termasuk nama dan nilai atribut ditulis pada tag awal sebuah elemen atau pada tag tunggal. Text node, adalah text yang merupakan isi dari sebuah elemen, ditulis diantara tag pembuka dan tag penutup Comment node adalah baris yang tidak dieksekusi oleh parser Processing Instruction node, adalah perintah pengolahan dalam dokumen XML. Node ini ditandai awali dengan karakter <? Dan diakhiri dengan?>. Tapi perlu diingat bahwa header standard XML <?xml version= 1.0 encoding= iso-8859-1?> bukanlah processing instruction node. Header standard bukanlah bagian dari hirarki pohon dokumen XML. NameSpace Node, node ini mewakili deklarasi namespace Processing Instruction Standard Header <?xml version= 1.0 encoding= iso-8859-1?> <?xml-stylesheet type="text/xsl" href="belajar.xsl"?> <!-Dokumen ini menjelaskan tentang isi buku--> <Buku Judul= Manajemen Data dan Informasi dengan XML/XSLT Penulis= Moh Junaedi > <pengantar/> <Bab No= 1 >Berkenalan dengan XML/XSLT</Bab> <Bab No= 2 >Lebih dekat dengan XML</Bab> <Bab No= 3 >Elemen-elemen XSLT</Bab>... </Buku> Attribute Element kosong Rootnode Comment

Dokumen XML Case Sensitif XML membedakan huruf besar dan huruf kecil. Contoh yang salah : <Nama>Buku Tulis</NAma> <NAMA>Buku Tulis</nama> Contoh yang benar : <nama>buku Tulis</nama> <nama>buku Tulis</naMa> Contoh Sederhana <pesan> <dari>mis Manager</dari> <buat>hrd Manager</buat> <buat>bagian rekrut</buat> <buat>computer Suport team</buat> <subyek>permohonan Tenaga kerja baru</subyek> <isi>mohon diberikan tenaga kerja baru untuk mengisi lowongan di Departemen MIS</isi> </pesan> Maka tampilan jika dibuka dibrowser Program Pertama XML Buatlah program dengan kode di bawah ini kemudian simpan dengan nama book.xml

Maka tampilan yang akan terjadi seperti di bawah ini: Mengaitkan XML dan HTML Pengikatan data adalah teknik pertama yang akan Anda pelajarai untuk menampilakn sebuah dokumen XML dari dalam sebuah halaman HTML. Konvensioanl. Menampilkan XML dari dalam HTML memberikan Anda yang terbaik: penyimpanan data dalam sebuah dokumen XML, dengan keluwesan sintaks untuk mmebangun data dan penamaan masingmasing potongan informasi, plus kekayaan format yang mapan dan kekuatan pemrograman HTML yang dinamis. Percobaan 1 Buatlah sebuah dokumen XML seperti dibawah ini (tak samakan sama yang diatas biar cepat selesai). Simpan dengan nama book.xml(nama lain juga tidak apa-apa terserah kamukamu aja) Tapi maaf kalau ga bisa dikopi, Emang sengaja tak jadikan image biar gak bisa dikopi. Agar terbiasa Coding. He... Setelah dibuat, tinggal buat dokumen HTMl-nya untuk melihat hasilnya. Ini dia codingnya: Jangan lupa simpan dengan nama book.html

<XML ID="dsoBook" SRC="book.xml" /> Digunakan unuk mengambil lokasi dokumen XML yang dikehendaki. <SPAN STYLE="font-weight:bold" DATASRC="#dsoBook" DATAFLD="TITLE"></SPAN> Ini gabungan dengan CSS yang internal(ingat ga????). DATAFLD mengambil elemen yang ada pada dokumen XMl. Begini caranya mengikat atau memanggil dokumen XML. Udah paham belum??? Kalau belum tanya sama asisten masing-masing(hahahahahaha...) Kalau sukses tampilan seperti di bawah ini: Setelah selesai kita lanjut ke percobaan kedua

Percobaan 2 (Menampilkan dalam bentuk tabel) Tulis program dibawah ini. Sebenarnya gak jauh beda sama yang tadi cuma data-data aja ditambah lebih banyak. Untuk data yang akan dimasukkan sesuai selera dan kemampuan Anda. (dokumen ini disimpan dengan nama Inventory.xml) Kalau selesai buat dokumen HTML-nya, disimpan dengan nama Inventory Table.html

<TABLE DATASRC="#dsoINVENTORY" BORDER="1" CELLPADDING="5"> Seperti biasa mengambil lokasi dsoinventory yaitu Inventory.xml Dan ini hasil tampilannya Agar tampilan menarik kita modifikasi dengan menambahkan pagging. Coba bayangkan kalau datanya sampe ribuan? Pasti akan banyak sampe ke bawah. Pertama-tama, kita isi dulu datanya dengan cukup banyak(sekitar 10 aja). Kemudian disimpan dengan nama sesuai keinginan Anda(jangan lupa nanti src/lokasi pengambilan data xml-nya diganti juga). Dokumen kami disimpan dengan nama Inventory Big.xml. Setelah dirasa cukup datanya kita buat dokumen HTML-nya seperti di bawah ini disimpan dengan nama Inventory Big Table.html

Maka hasil tampilannya seperti dibawah ini Sebenarnya tida ada yang berbeda dengan pemanggilan XML sebelumnya hanya ditambah dengan kode-kode program ini: <BUTTON ONCLICK="bukutable.firstPage()">First Page</BUTTON> <BUTTON ONCLICK="bukutable.previousPage()">Previous Page</BUTTON> <BUTTON ONCLICK="bukutable.nextPage()">Next Page</BUTTON> <BUTTON ONCLICK="bukutable.lastPage()">Last Page</BUTTON> Baris ini yang membuat paging, semuanya sudah masuk disana jadi tidak butuh lai kode-kode untuk membuat paging <TABLE ID="bukutable" DATAPAGESIZE="2" DATASRC="#dsobuku" BORDER="1" CELLPADDING="5"> DATAPAGESIZE="2" -> menunjukkan data yang akan tampil(disini Cuma 2 data saja. Bisa ditambah kok) Gimana? Mudah bukan membuat sebuah program dengan xml. Jadi jangan ragu untuk belajar XML Percobaan 3 Sebelum lanjut, bisa lihat-lihat hp dulu takut ada sms+mc, atau mau buang air kecil. Atau mau teriak boleh-boleh aja asal nggak menggangu teman dan asistennya aja. Kalau udah siap kita mulai dengan program terakhir(aduh senangnya udah yang terakhir bisa cepat pulang dech...). kita akan membuat program pencarian seakan-akan lengkap saja proram kita, setelah mulai buat isi data, pemanggilan data samapi program pencariannya juga ada. Pertama, kita siapkan dokumen XML(pakai yang lama aja, yang tadi udah dibuat paging, OK?) Kalau dokumennya hilang yang buat lagi donk...

Begini kode programnya, jangan lupa disimpan dengan nama Inventory Find.html

Maka tampilan hasilnya adalah sebagai berikut <BUTTON ONCLICK='FindBooks()'>Search</BUTTON> Jika kita menekan tombol Search maka akan memanggil fungsi FindBooks yang ada pada kode JavaScript(jangan sampai lupa, baru 1 minggu kan?) Gampang bukan belajar XML-nya, atau masih bingung???? Jangakan yang baru belajar yang nulis aja awal-awal juga bingung. Kalau masih bingung juga bisa tanya sama teman asisten atau yang lain. Selesai sudah kita belajar XML-nya. Mohon dikembangkan lagi, aplikasi-aplikasi di atas masih sederhana dan udah banyak buku-buku yang membahas masalah ini. Penulis mohon maaf kalau ada kata-kata atau kalimat yang tida enak di hati. Refrensi Simpson, John E.2002.Just XML.Yogyakarta:Penerbit Andi Young, Michael J.2001.Step by Step XML.Jakarta:PT Elex Media Komputindo www.ilmukomputer.com