Wireless Markup Language (WML)

Transkripsi

1 Wireless Markup Language (WML) WML (Wireless Markup Language) adalah standar bahasa markup pertama yang digunakan untuk perangkat nirkabel. WML ini di dukung oleh hampir semua produsen pembuat telephone bergerak. Di awal tutorial WML ini, akan dipelajari tentang dasar-dasar WML, seperti konsep Deck dan Card, struktur dan sintak dokumen WML. Kemudian dilanjutkan dengan topik seperti font style, image, table, anchor links dan softkeys juga akan dibahas disini. Setelah itu akan melangkah ke topik yang lebih lanjut dari WML seperti event, input element, variabel, dan pengiriman dara pada form ke server. Banyak contoh-contoh kode yang di berikan dalam tutorial WML ini membantu anda memahami konsep dan teknik pemrograman dengan menggunakan WML. Pendahuluan WML versi 1.x adalah bahasa markup yang didefinisikan didalam spesifikasi WAP versi 1.x. WAP adalah standar yang diciptakan oleh WAP Forum ( Sekarang Open Mobile Alliance-OMA) yang membawa konten internet-word Wide Web ke perangkat Nirkabel. WAP ini menspesifikasikan lapisan protokol dan lingkungan aplikasi dari aplikasi browsing pada mobile internet. Peranan WML didalam aplikasi internet bergerak adalah sama seperti yang digunakan HTML didalam aplikasi Web. Situs WAP ditulis dengan WML, sedangkan situs web ditulis dengan HTML. WML versi 1.x sangat mirip dengan HTML,keduanya menggunakan tag dan ditulis didalam format plaintext. Beberapa tag didalam WML versi 1.x secara langsung mengambil dari HTML. Jika anda memiliki pengalaman didalam menggunakan HTML, anda seharusnya bisa belajar WML 1.x dengan cepat. Beberapa fitur WML versi 1.x lebih spesifik ke perangkat nirkabel. Sebagai contoh, WML versi 1.x menyediakan cara untuk membangun program softkey yang berkaitan langsung dengan Perangkat Bergerak. Fitur ini tidak didukung didalam HTML sejak komputer tidak memiliki beberap softkey. Versi yang lebih baru dari spesifikasi WAP 1.x adalah WAP 1.2.1, yang mendefinisikan WML 1.3.

2 WML files memiliki ekstensi.wml. tipe MIME dari WML adalah text/vnd.wap.wml. WML mendukung skrip client-side. Bahasa skrip yand didukung disebut WMLScript. Sintaknya berbasis JavaScript. WAP versi 2.0 WAP versi 1.x adalah versi awal dari standar WAP. Versi yang paling banyak digunakan adalah WAP 2.0. Bahasa markup yang didefinisikan didalam WAP 2.0 adalah XHTML MP(XHTML Mobile Profile). XHTML MP merupakan bagian dari XHTML yang digunakan didalam aplikasi web. XHTML MP mendukung CSS (Cascading Style Sheet) versi nirkabel yang disebut WCSS (WAP CSS), yang merupakan bagian dari CSS2 yang digunakan aplikasi web ditambah beberapa perluasan dari spesifikasi WAP yang ada. Kebanyakan model perangkat bergerak yang ada saat ini sudah mendukung WAP 2.0. WAP versi 2.0 masih kompatibel dengan versi yang lama yaitu WAP versi 1.x. Perangkat Bergerak yang mendukung WAP 2.0 dapat menampilkan kedua dokumen XHTML MP dan WML. WML 1.x adalah teknologi awal/lama. Bagaimanapun tidak berarti hal ini tidak digunakan, sejak masih banyak perangkat nirkabel yang hanya mendukung WML 1.x, maka sejak saat itu juga WML 1.x masih banyak digunakan. Disamping itu, beberapa fitur yang berguna dari WML tidak tersedian didalam XHTML MP. Sebagai contoh, XHTML MP tidak mendukung event, variabel dan skrip client-side. Sebagian besar fitur WML tidak ada didalam HTML MP. Jika anda menulis markup dari situs intermet mobile didalam WML, keduanya baik yang lama maupun yang baru dari dukungan WAP pada perangkat nirkabel masih dapat digunakan untuk menampilkan situs internet mobile. User yang berbasis aplikasi WAP adalah maksimum. WML 2.0 Kebutuhan pengembangan situs WAP tidak perlu mengkhawatirkan masalah WML 2.0. WML 2.0 diciptakan dengan tujuan untuk mendukung kompatibilitas teknologi sebelumnya dan tidak untuk digunakan oleh pengembangan situs WAP. Untuk mengembangkan situs dengan standar WAP 2.0, gunakan XHTML Mobile Profile.

3 WML Deck dan Card Perbedaan utama antara HTML dan WML adalah unit dasar navigasi didalam HTML adalah sebuah halaman, sedangkan didalam WML adalah sebuah kartu (Card). File WML dapat berisi berbagai macam Card didalam sebuah Deck. 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 perangkat bergerak 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 perangkat nirkabel. WML di rancang dengan cara seperti ini karena perangkat nirkabel mempunya latensi yang tinggi untuk koneksi ke server. Mengambil sebuah deck-card setiap saat dapat menurunkan banyaknya permintaan-jawaban ke server. Link, text, image, input field, option box dan banyak lagi elemen dapat di letakkan didalam sebuat kartu (card). Struktur Dokumen WML Contoh WML Hello World Marilah melihat contoh pertama WML yang menunjukkan struktur umum dari 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>

4 Hasil dari contoh WML apa kata dunia! didalam emulator telepon bergerak adalah sebagai berikut :

5 Pada bagian selanjutnya, akan digambarkan elemen-elemen yang digunakan didalam contoh WML diatas. 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 deklarasi XML dan baris kedua deklarasi DOCTYPE. Komponen prolog bukan elemen WML dan tidak harus diakhiri dengan tag penutup atau dengan />. Deklarasi XML dan Karakter Encoding Semua dokumen WML merupkan dokumen XML. Shingga terdapat deklarasi XML di awal. Deklarasi XML menspesifikasikan versi XML dari dokumen. Karakter encoding dari dokumen dapat juga di spesifikasikan disini, sperti : <?xml version="1.0" encoding="utf-8"?> Status baris diatas menunjukkan bahwa versi XML dari dokumen WML adalah 1.0 dan 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. Catatan : tidak boleh ada whitespace sebelum deklarasi XML, jika tidak maka beberapa browser WAP atau WAP Gateway tidak dapat memproses file WML. Deklarasi DOCTYPE Semua dokumen harus memiliki deklarasi DOCTYPE. Harus diletakkan antara deklarasi XML dan elemen <wml>. Dibawah ini deklarasi

6 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 apasaja dan atributatribut yang dapat digunakan didalam markup dan aturan-aturan yang harus digunakan. 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. WAP browser akan memberitahu jika anda mencoba menampilkan dokumen WML yang salah. Jika anda tertarik didalam DTD dari WML 1.3, dapat didownload pada Jika anda ingin kode WML anda memberitahu ke versi yang lama dari standar WAP, anda dapat merubah DTDnya. 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. Elemen <wml> <wml> adalah elemen utama dari WML. Semua elemen yang lain berada didalam tag <wml></wml>. Elemen <card> Elemen <card> menspesifikasikan konten dari sebuah kartu. Terdapat dua kardu didalam contoh WML apa kata dunia!. Seperti yang terlihat

7 didalam screenshot yang lalu, hanya satu kartu yang ditampilkan dalam setiap waktu. Kita akan mendiskusikan bagaimana navigasi dari satu kartu ke kartu lainnya ketika kita membahas tentang anchor link nanti pada tutorial ini. Dalam contoh WML Apa kata dunia!, terdapat dua atribut id dan title, yang telah di spesifikasikan pada tag <card>. Kita menggunakan atribut id untuk mendefinisikan ID unik untuk sebuah kartu. ID kartu dibutuhkan untuk navigasi diantara kartu. Bagaimanapun, atribut id belum memiliki fungsi didalam contoh WML apa kata dunia! dan hal ini tidak apa-apa untuk tidak disertakan didalam tag <card>. Atribut title digunakan untuk memasang judul sebuah kartu. Biasanya, sebuah judul ditampilkan dibagian atas dari layar perangkat berangkat. 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. 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> 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.

8 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 : <?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>

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

10 Openwave Mobile Browser : baris teks yang lebih panjang dari lebar layar ditampilkan menggunakan animasi bergerak (marquee). Contoh WML berikut ini mengilustrasikan efek dari mode nowrap dan wrap pada beberap 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>

11 Catatan : jika atribut mode dari sebuah paragraf tidak dispesifikasikan dan bukan paragraf pertama dari kartu saat ini, mode text-wrapping dari paragraf sebelumnya akan di aplikasikan kepadanya. Sebagai contoh, jika kita merubah markup dari contoh WML sebelumnya seperti baris dibawah ini, kedua paragraf didalam kartu akan di tampilkan dengan mode nowrap.

12 ... <card id="card1" title="wml Tutorial"> <p mode="nowrap">hello world. Welcome to our WML tutorial.</p> <p>you can learn how to build your own WML site in this tutorial.</p> </card>... XML adalah bahasa markup yang lebih kuat daripada HTML. Semenjak dokumen WML adalah dokumen XML, aturan sintax dari WML adalah lebih ketat dibandingkan dengan HTML. Sebagai contoh, tag dan atribut didalam WML adalah case-sensitive dan harus menggunakan huruf kecil, sementara didalam HTML adalah case-insensitive. Berikut ini adalah kode markup yang salah didalam WML tetapi tidak didalam HTML : <P>WML tutorial paragraph 1</P> <p>wml tutorial paragraph 2</P> <p ALIGN="right">WML tutorial paragraph 3</P> Contoh yang lain adalah anda harus menutup semua tag didalam WML, sementara itu anda dapat mengabaikan bebera tag penutup didalam HTML. Sebagai contoh, berikut ini adalah kode markup yang salah didalam WML tetapi benar di dalam HTML : <p>wml tutorial paragraph 1 <p>wml tutorial paragraph 2 <p>wml tutorial paragraph 3 Kode markup diatas menjadi valid didalam HTML dan WML jika anda menutup semua tag <p> yang sesuai, sperti ini : <p>wml tutorial paragraph 1</p> <p>wml tutorial paragraph 2</p> <p>wml tutorial paragraph 3</p> Beberapa tag tidak memiliki konten untuk disertakan didalamnya, jadi tag tersebut tidak memiliki pasangan. Sebagai contoh tag <br>, yang mana

13 digunakan untuk mengatakan kepada browser untuk membuat baris baru. Untuk menutup tag seperti itu, gunakan / sebelum >, seperti <br/>. Anda perlu menggunakan <br/> sebagai pengganti dari <br> didalam WML. Web browser lebih toleran terhadap kesalahan daripada browser WML. Jika halaman HTML berisi markup yang tidak memberitahukan ke sepesifikasi, web browser akan masih mencoba memahami halaman HTML dan menampilkan yang terbaik sesuai dengan yang ia dapatkan. WML browser tidak akan melakukan hal ini. Jika dokumen WML berisi markup yang salah, WML browser akan mengeluarkan pesan error secara langsung. WML Generic Metadata: <meta> Anda dapat menetapkan metadata umum didalam file WML anda menggunakan tag <meta/>. Metadata ditempatkan pada header dokumen. Tag <head> dan </head> menandai awal dan akhir dari header dokumen yang bersangkutan. Browser WAP akan mengabaikan metadata jika tidak dikenali arti dari metadata tersebut. Anda dapat menetapkan beberapa jenis metadata didalam file WML tanpa memepengaruhi hasil tampilan dari kartu. Sebagai contoh, anda mungkin menginginkan status nama pengarang didalam file WML anda tanpa menampilkannya di layar. Congoh berikut ini mengambarkan bagaimana cara melakukannya : <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml> <head> <meta name="pengarang" content="abdullah Fadil"/> </head> <card id="kartu5" title="pengarang"> <p>apa kata dunia!</p> </card> </wml>

14 WML Cache Control : menentukan periode expired dari file WML Salah satu kegunaan dari tag <meta/> adalah untuk menentukan waktu kadarluarsa dari file WML didalam cache. Cache adalah beberapa ruang memori didalam sebuah perangkat nirkabel untuk menyimpan file WML yang didownload dari server secara sementara. Jika browser WAP menemukan bahwa file WML yang diminta oleh anda teletak di dalam cache dan belum kadarluarsa, browser WAP akan menampilkan file

15 didalam cache tersebut tanpa menghubungi server sehinga dapat memperkecil waktu tundanya. Jika Card WML anda mempunyai isi yang sensitif terhadap waktu seperti data keuangan, anda mungkin menginginkan mendefinisikan nilai yang kecil atau bahkan nol untuk periode kadarluarsanya, shingga user tidak akan dapat menjumpai card WML yang kadarluarsa. Conoth WML berikut ini menunjukkan bagaimana menggunakan tag <meta/> untuk menentukan waktu kadarluarsa dari file WML dengan nilai nol : <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml> <head> <meta http-equiv="cache-control" content="no-cache"/> </head> <card id="card1" title="wml Tutorial"> <p>apa kabar dunia. selamat datang di dunia WML.</p> </card> </wml>

16 Dibawah ini adalah contoh lain yang menggambarkan bagaimana menetapkan periode kadarluarsa dari suatu file WML selama 300 detik : <?xml version="1.0"?>

17 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml> <head> <meta http-equiv="cache-control" content="max-age=300"/> </head> <card id="card1" title="wml Tutorial"> <p>apa kata dunia. selamat datang di dunia WML.</p> </card> </wml>

18 Baris : <meta http-equiv="cache-control" content="max-age=0"/> Memiliki efect yang sama dengan :

19 <meta http-equiv="cache-control" content="no-cache"/> Catatan : bahwa efek nyata dari kode WML diatas adalah tergantung dari perangkat bergeraknya. Beberapa browser WAP tidak dapat menggunakan cara diatas untuk mengontrol Cache. Disamping itu, beberapa browser WAP tidak memiliki cache. Bagaimanapun, sperti di nyatakan diawal, jika browser WAP tidak mengenali arti dari suatu metadata, hal itu akan secara sederhana di abaikannya. Cata lainnya adalah bahwa meskipun browser WAP tidak mendukung penggunaan tag <meta/> untuk mengontrol cache, mereka mengenali baris header HTTP Cache-Control: no-cache. Solusi untuk kasus seperti itu adalah menetapkan header HTTP Cache-Control didalam respon HTTP di sisi server. Teknologi disisi server seperti ASP, JSP, PHP, Perl dan lain-lain, dapat digunakan untuk melakukan hali itu. Metode ini dapat juga digunakan untuk mengontrol cache suatu image. Komentar didalam WML Didalam WML, Komentar ditempatkan didalam tag <!- ->. Ini sama halnya didalam HTML. Sebagai contoh, baris berikut ini adalah komentar. Browser WAP akan mengabaikan semua komentar : <!-- This is a comment in WML --> <!-- This is a multi-line comment --> Ganti Baris didalam WML Tag <br/> adalah tag ganti baris didalam WML, yang mana sama dengan didalam HTML. Contoh WML berikut ini mengambarkan kegunaan dari ganti baris : <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " <wml>

20 <card id="card1" title="line Break"> <p> seblum ganti baris<br/>setelah ganti baris </p> </card> </wml> Screenshot dibawah ini menunjukkan hasil dari contoh WML diatas didalam browser telepon bergerak. Seperti yang anda liha, teks setelah tag <br/> dimulai pada baris yang baru.

21

22