Jurusan Teknik Informatika – FTI UPN “Veteran” Jawa Timur

Presentasi berjudul: "Jurusan Teknik Informatika – FTI UPN “Veteran” Jawa Timur"— Transcript presentasi:

1 Jurusan Teknik Informatika – FTI UPN “Veteran” Jawa Timur
PEMROGRAMAN NIRKABEL WML 1 Pendahuluan Jurusan Teknik Informatika – FTI UPN “Veteran” Jawa Timur 2008

2 Pengantar WML WML (Wireless Markup Language) : Standar bahasa markup pertama yang digunakan untuk peprograman perangkat nirkabel. WML banyak di dukung oleh hampir semua produsen Mobile Devices. Dasar-dasar WML meliputi konsep Deck dan Card, struktur dan sintaksis dokumen WML. Formating obyek : Font style, image, table, anchor links dan softkeys. Penanganan data : event, input element, variabel, dan pengiriman data pada form ke server. Modul 1 Pendahuluan

3 WML Deck dan Card Perbedaan utama antara HTML dan WML adalah unit dasar navigasi. Unit Navigasi didalam HTML adalah sebuah halaman (page). Unit Navigasi didalam WML adalah sebuah kartu (Card). File WML dapat berisi berbagai macam Card didalam sebuah Deck. Link, text, image, input field, option box dan banyak lagi elemen dapat di letakkan didalam sebuat kartu (card). Modul 1 Pendahuluan

4 Proses Transaksi WML Ketika user pergi ke situs WAP, mobile browser mengambil file WML yang berisi sebuah deck-card dari Server. Hanya satu card yang akan muncul di layar Mobile Devices setiap waktu. Jika user pergi ke card yang lain didalam deck yang sama, mobile browser tidak perlu mengirimkan permintaan lagi ke server semenjak file yang berisi deck sudah tersimpan didalam Mobile Browser. WML di rancang dengan cara seperti ini karena perangkat nirkabel mempunya latensi yang tinggi untuk koneksi ke server. Modul 1 Pendahuluan

5 Struktur Dokumen WML <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml>   <card id="Kartu1" title="WML Kartu1">     <p>Apa kata dunia!</p>   </card>   <card id="Kartu2" title="WML Kartu2">     <p>Selamat datang didunia WML</p> </card> </wml> Modul 1 Pendahuluan

6 PROLOG Prolog merujuk pada dua baris pertama dari contoh WML “Apa kata dunia!” <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " Setiap dokumen WML dimulai dengan prolog. Baris pertama dan kedua adalah deklarasi XML dan deklarasi DOCTYPE. Komponen prolog bukan elemen WML dan tidak harus diakhiri dengan tag penutup atau dengan />. Modul 1 Pendahuluan

7 Deklarasi XML & Karakter Encoding
Semua dokumen WML merupkan dokumen XML, Sehingga terdapat deklarasi XML di awal. Deklarasi XML menspesifikasikan versi XML dari dokumen. Karakter encoding dari dokumen dapat juga di spesifikasikan disini, seperti : <?xml version="1.0" encoding="UTF-8"?> Versi XML dari dokumen WML adalah 1.0 Karakter encodingnya adalah UTF-8. Jika karakter encoding dari dokumen WML adalah UTF-8 atau UTF-16, maka tidak diperlukan untuk mendeklarasikan karakter encondingnya, karena dapat di deteksi secara otomatis. Modul 1 Pendahuluan

8 Lanjutan Jika karakter encoding dari dokumen WML adalah UTF-8 atau UTF-16, maka tidak diperlukan untuk mendeklarasikan karakter encondingnya, karena dapat di deteksi secara otomatis. Catatan : tidak boleh ada whitespace sebelum deklarasi XML, jika tidak maka beberapa browser WAP atau WAP Gateway tidak dapat memproses file WML. Modul 1 Pendahuluan

9 Deklarasi DOCTYPE Semua dokumen harus memiliki deklarasi DOCTYPE.
Diletakkan antara deklarasi XML dan elemen <wml>. Deklarasi DOCTYPE untuk WML 1.3. ini dapat dengan mudah di kopi dan paste kedalam file WML. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " Deklarasi DOCTYPE menspesifikasikan nama dari DTD (Document Type Definition) dan URL ke DTD. DTD berisi informasi tentang sintax dari bahasa markup. DTD mendefinisikan elemen-elemen, atribut-atribut, aturan-aturan yang dapat digunakan didalam WML. Modul 1 Pendahuluan

10 Lanjutan Sebagai contoh, DTD dari WML menspesifikasikan elemen <card> harus berada didalam pasangan tag <wml></wml>. Jika tidak mengikuti aturan ini, dokumen WML akan mengatakan invalid dan WAP browser akan memberitahu jika user mencoba menampilkan dokumen WML yang salah. Informasi lebih lanjut untuk DTD dari WML 1.3 : Modul 1 Pendahuluan

11 Lanjutan Jika kode WML memberitahu ke versi yang lama dari standar WAP, DTD dapat dirubah sesuai kebutuhan. Dibawah ini deklarasi DTD untuk WML versi 1.2 : <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" " Perangkat validasi dapat digunakan untuk mengecek apakah dokumen WML dapat memberitahu ke aturan bahasa WML dengan membandingkan dokumen WML dengan DTD yang di spesifikasikan didalam deklarasi DOCTYPE. Beberapa perangkat validasi terintegrasi didalam beberap IDE. Modul 1 Pendahuluan

12 Elemen <wml> <wml> adalah elemen utama dari WML.
Semua elemen yang lain berada didalam tag <wml></wml>. Modul 1 Pendahuluan

13 Elemen <card> Elemen <card> menspesifikasikan konten dari sebuah kartu. Terdapat dua kartu didalam contoh WML “apa kata dunia!”. Seperti yang terlihat didalam screenshot yang lalu, hanya satu kartu yang ditampilkan dalam setiap waktu. Modul 1 Pendahuluan

14 Elemen <card> / Lanjutan
Dalam contoh WML “Apa kata dunia!”, terdapat dua atribut id dan title, yang telah di spesifikasikan pada tag <card>. Attribut id untuk mendefinisikan ID unik untuk sebuah kartu. ID kartu dibutuhkan untuk navigasi diantara kartu. attribut id belum memiliki fungsi didalam contoh WML “apa kata dunia!” dan tidak apa-apa untuk tidak disertakan didalam tag <card>. Atribut title digunakan untuk memasang judul sebuah kartu. Sebuah judul ditampilkan dibagian atas dari layar Mobile Devices. Kebanyakan browser WAP menampilkan judul sebuah kartu, meskipun beberapa perangkat bergerak yang lama tidak menampilkannya. Jika judul terlalu panjang, browser WAP akan memotong judul sesuai dengan ukuran title bar. Modul 1 Pendahuluan

15 Elemen <card> / Lanjutan
Tidak seperti transisional HTML 4.01, teks tidak dapat diletakkan secara langsung didalam pasangan tag <card></card>. Sebagai contoh, kode markup berikut ini tidak benar tidalam WML : <card id="card1" title="WML Tutorial">   Hello world. Welcome to our WML tutorial. </card> Untuk memperbaiki kode markup WML diatas, letakkan teks didalam tag <p></p>. kode markup berikut ini bersi yang benar dari kode sebelumnya : <card id="card1" title="WML Tutorial">   <p>Hello world. Welcome to our WML tutorial.</p> </card> Modul 1 Pendahuluan

16 Elemen <p> Elemen <p> mendifinisikan sebuah paragraf dari suatu teks. Selain teks, sesuatu seperti anchor link dan image dapat di sertakan didalam elemen <p>. browser WAP selalu memandang sebuah paragraf sebagai baris baru. Elemen <p> mendukung dua atribut : align dan mode. Atribut align digunakan untuk merubah perataan horizontal pada sebuah paragraf. Nilai yang di dukung adalah left, center dan right. Contoh WML berikut ini mengilustrasikan bagaimana perataan sebuah paragraf ke tengah dengan menggunakan atribut align : Modul 1 Pendahuluan

17 Elemen <p> / Lanjutan
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml>   <card id="card1" title="WML Tutorial">     <p align="center">Hello world. Welcome to our WML tutorial.</p>   </card> </wml> Modul 1 Pendahuluan

18 Elemen <p> / Lanjutan
Atribut mode digunakan untuk memasang mode text-wrapping. Dua nilai yang didukung, wrap dan nowrap. Jika wrap dijadikan sebagai atribut mode, teks yang lebih panjang dari lebar layar akan menjadi rusak terpisah dan ditampilkan pada baris yang lain. Jika nowrap dijadikan atribut mode, teks dari suatu paragraf akan di tampilkan pada sebuah baris tunggal dan bagaimana panjang baris ditampilkan tergangung pada browser WAP yang digunakan. Sebagai contoh : - Nokia Mobile Browser 4.0 : mendukung scrolling horizontal. Teks yang tidak keliahatan dapat ditampilkan dengan menekan tombol “left” dan “Right”. - Sony Ericsson T610 dan T68i – emulator : baris teks yang lebih panjang dari lebar layar dibagi kedalam bagianyang lebih kecil dan ditampilkan pada layar secara berurutan. - Openwave Mobile Browser : baris teks yang lebih panjang dari lebar layar ditampilkan menggunakan animasi bergerak (marquee). Modul 1 Pendahuluan

19 Elemen <p> / Lanjutan
Contoh WML berikut ini mengilustrasikan efek dari mode “nowrap” dan “wrap” pada beberapa mobile browser : <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml>   <card id="card1" title="WML Tutorial">     <p mode="nowrap">Hello world. Welcome to our WML tutorial.</p>     <p mode="wrap">You can learn how to build your own WML site in this tutorial.</p>   </card> </wml> Modul 1 Pendahuluan