Anda di halaman 1dari 19

BAB 1 WIRELESS APPLICATION PROTOCOL DASAR WAP dan WML

TUJUAN 1. 2. 3. 4. TEORI Tentang WAP Wireless Application Protocol merupakan suatu spesifikasi global yang mengijinkan user yang mengggunakan perangkat nirkabel (seperti PDA atau ponsel) untuk mengakses dan saling berhubungan dengan layanan aplikasi internet, intranet atau extranet. WAP digambarkan sebagai suatu arsitektur standar dan protokol untuk menerapkan pengaksesan internet secara wireless. WAP bukanlah sebuah entitas tunggal, namun merupakan sekumpulan protokol. Elemen-elemen penting dari spesifikasi WAP meliputi: WAP client WAP gateway WAP server. Komponen yang terdapat dalam sebuah WAP server berupa: o Web server o Database o Php o WML Memahami konsep WAP Memahami lingkungan WAP IDE/WAP Emulator Memahami pemrograman WML Memahami penanganan Event dan Timer

Ilustrasi Kerja WAP

Model Pemrograman WAP

Sistem Jaringan WAP Pengembangan aplikasi WAP pada sisi client dilakukan dengan menggunakan pemrograman WML dan WMLScript. WML merupakan suatu bahasa XML based yang dikembangana oleh WAP Forum. WML didesain untuk memenuhi kebutuhan standard markup language untuk peralatan mobile. Versi WML yang ada, antara lain: WML 1.3 Mobile Browser, WAP edisi 5.0 ke atas WML 1.1 Mobile Browser 4.1 Mobile Browser 3.2 WML 1.0 Mobile Browser 4.0 Ukuran halaman WML dibatasi tidak melebihi 1024 byte dalam bentuk binary WMLC (WML compiled; WML yang telah diencode). Sehingga kadang-kadang kode-kode WML berukuran besar dapat berjalan baik pada emulator, akan tetapi tidak pada sebagian perangkat WAP. Contoh WAP IDE OpenWave (http://www.openwave.com)

Contoh WAP Emulator Winwap (http://www.winwap.org) Klondike (http://www.apachesoftware.com) M3Gate (http://www.mywap.to) Openwave Simulator Struktur Dasar WML WML dan WMLScript merupakan format standar untuk membuat dokumentasi/aplikasi berbasis WAP. WML dan WMLScript didesain untuk menampilkan content dan antarmuka serta interasinya pada perangkat wireless.

Perbandingan HTML dengan WML Sebuah halaman WML terdiri dari bagian header dan body. Deklarasi header WML <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Syntax WML <wml> <head> access control and meta information </head> <template> deck-level event bindings </template> <card> card-level event bindings

</card> </wml> Pasangan tag <wml> dan </wml> disebut deck. Deck merupakan unit terkecil dalam WML yang akan dikirimkan ke mobile browser. <card> dan </card> disebut dengan card. Card berisi definisi dari action dan user interface dari suatu deck. Dalam satu deck bisa terdapat satu atau lebih card yang dapat diakses oleh user. WML mendefinisikan elemen-elemen dan attribute yang digunakan untuk mengunjukkan komponen user interface dalam suatu card. Sebuah card dapat mengandung satu atau lebih dari komponen-komponen berikut. Formatted text, bisa berupa teks, gambar atau link. Elemen input, untuk input user Elemen select, pilihan bagi user Elemen fieldset, container untuk elemen-elemen lain Syntax card <card id="name"> <do type="type" label="label"> <go href="url"/> </do> <p> text </p> </card> Elemen-elemen penting
Elemen <wml> <head> Keterangan Elemen ini harus ada. Elemen ini menentukan sebuah deck Elemen ini untuk menyatakan informasi keseluruhan dari sebuah deck, termasuk metadata dan kontrol akses Mendefiniskan kumpulan even pada level deck. Karakteristik dari semua card pada deck. Karakteristik ini dapat ditimpa untuk suatu card dengan membuat event yang sama di dalam card. Dibutuhkan. Satu atau lebih <card> menentukan action dan user interface untuk deck

<template> <card>

Atribut-atribut yang dimiliki oleh <card>


Atribut id <do> <go> title text newcontext onenterforward onenterbackward ontimer Keterangan Nama dari card Definisi action Action untu meminta suatu alamat Judul card yang ditampilkan browser Teks yang akan ditampilkan di browser Menyatakan apakah konteks browser perlu diperbarui Menentukan URL yang dibuka jika anda masuk dalam card Menentukan URL yang dibuka jika anda keluar dari card Menentukan URL yang dibuka jika waktu habis

Action dalam card


Elemen do <go> Keterangan Menentukan action yang dilakukan jika anda menekan function key sesuai atribut pada tipe. Atribut label adalah nama bagi tombol fungsi yang ditampilkan Berpindah ke URL yang dituju, jika action pada <do> dilakukan

Atribut dalam elemen <do>


Atribut type Keterangan Berisi string yang menunjukkan trigger dari action yang akan dilakukan. Nilai (value)-nya antara lain : Accept Prev Help Reset Options Delete unknown Optional text label untuk suatu elemen Memberi nama untuk elemen tersebut Menunjukkan bahwa <do> bisa diabaikan, jika bernilai true

label name optional

Atribut dalam elemen <img>


Atribut <src> <align> <height> <width> <vspace> <hspace> Keterangan alamat url dari gambar posisi gambar dalam baris ukuran vertical gambar ukuran horizontal gambar ruang kosong diatas dan dibawah gambar ruang kosong di sebelah kanan dan kiri gambar

Untuk mendeklarasikan/membuat tabel dalam WML digunakan elemen <table> bersama-sama dengan <tr> dan <td> Elemen-elemen Table
Elemen <table> <tr> <td> Keterangan Merupakan elemen atau tag yang utama. Digunakan untuk memberi tahu browser bahwa anda membuat suatu table dalam WML Digunakan untuk mendefinisikan suatu baris dalam table. Baris ini terdiri dari satu atau lebih data tabel (cell) Digunakan untuk menempatkan data pada satu baris. Data dalam elemen ini bisa saja tidak ada, alias kosong.

Atribut-atribut yang dimiliki oleh elemen <table>


Atribut title align columns Keterangan Digunakan sebagai identitas table left | center | right. Digunakan untuk menentukan rataan teks dalam kolom. Jika anda tidak menentukan nilai atribut ini, maka secara otomatis, teks rata kiri. Harus ada. Untuk menentukan jumlah kolom untuk tiap baris. Nilai nol tidak diperbolehkan.

LATIHAN 1. Hello World helloworld.wml <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="satu" title="First Card"> <p>Hello, World!</p> </card> </wml> 2. Navigasi dalam card banyakcard.wml <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="satu" title="card satu"> <p> ini card yang pertama</p> </card> <card id="dua" title="card dua"> <p> ini card yang kedua</p> </card> <card id="tiga" title="card ketiga"> <p> ini card yang ketiga</p> </card> </wml> Untuk dapat berpindah-pindah antarcard dalam deck, gunakan perintah berikut : 1. Ketikkan di URL : http://localhost/filewml/multiplecard.wml , bila disimpan di folder filewml. 2. Untuk menampilkan suatu card tertentu, tentukan URL dengan sintaks : Alamat_URL_deck#card_id Misal : Untuk navigasi ke card yang ketiga, ketik : http://localhost/filewml/multiplecard.wml#dua 3. Menentukan action pada banyak card actioncard2.wml <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <template> <do type="accept" label="Pick"> <prev/>

</do> </template> <card id="card1"> <do type="accept" label="Black"> <go href="# card2"/> </do> <do type="options" label="White"> <go href="# card3"/> </do> <p> Pick a color: </p> </card> <card id="card2"> <p> You picked black. </p> </card> <card id="card3"> <p> You picked white. </p> </card> </wml> 4. Menggunakan gambar <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Memakai Gambar"> <p align="center"> ini gambar lagu <img alt="nice" src="sound2.wbmp"></img> keren<br/><br/> ini gambar sound <img alt="funky" src="sound1.wbmp" align="middle"></img> Selamat menikmati </p> </card> </wml> 5. Menggunakan teks dan gambar <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml>

<card> <do type="accept"> <go href="# outlook"/> </do> <p> Perkiraan cuaca hari ini!<br/> Click OK. </p> </card> <card id="outlook"> <p> <img alt="Cerah" src="cerah.wbmp" /> <img alt="Berawan" src="berawan.wbmp" /> <img alt="Hujan" src="hujan.wbmp" /> </p> </card> </wml>

6. Menggunakan link info_or.wml <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/ wml_1.1.xml"> <wml> <card title="Berita Lagi.."> <p> Tentang Olahraga:<br/> <a href="spkbola.wml" title="link1">Sepak Bola</a> <br/> <a href="basket.wml" title="link2">Bola Basket</a> </p> </card> </wml> sepakbola.wml <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAP FORUM//DTD WML 1.1//EN" "http:// www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Sepak Bola"> <p> Madrid kalah 2-6 di Bernabeu,<br/> di tangan Barcelona<br/>

</p> </card> </wml> 7. Menggunakan timer <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Welcome" ontimer="# main"> <!-- Timer menuggu 1 detik. --> <timer value="10"/> <p><img src="logo.wbmp"/></p> <do type="accept"><go href="# main"/></do> </card> <card title="Main" id="main"> <p>Welcome to the main page!</p> </card> </wml> 8. Menggunakan Timer dan banyak gambar <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Three Images"> <onevent type="onenterforward"> <refresh> <setvar name="img0" value="first.wbmp"/> <setvar name="img1" value="second.wbmp"/> <setvar name="img2" value="third.wbmp"/> <setvar name="time0" value="5"/> <setvar name="time1" value="10"/> <setvar name="time2" value="10"/> </refresh> </onevent> <onevent type="ontimer"> <refresh> <setvar name="img0" value="$(img1)"/> <setvar name="img1" value="$(img2)"/> <setvar name="img2" value="$(img0)"/> <setvar name="time0" value="$(time1)"/> <setvar name="time1" value="$(time2)"/>

<setvar name="time2" value="$(time0)"/> </refresh> </onevent> <timer value="$(time0)"/> <p><img src="$(img0)" alt="[image]"/></p> </card> </wml> 9. Menggunakan Timer dengan nama <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="First card" id="one" ontimer="# three"> <timer name="timeout" value="600"/> <p>The timer is running...</p> <do type="" label="Check"><go href="# two"/></do> </card> <card title="Second card" id="two"> <p>Time remaining: $(timeout) tenths of a second</p> <do type="prev" label="Back"><prev/></do> </card> <card title="Third card" id="three"> <p>Timer expired!</p> </card> </wml> 10. Menggunakan Event dan Timer <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="splash" title="Welcome!"> <onevent type="ontimer">

<go href="# main" /> </onevent> <timer name="delay" value="50"/> <p mode="wrap"> Welcome </p> </card>

<card id="main" title="Main Menu"> <p>Main menu here...</p> </card> </wml>

TUGAS

BAB 2 WIRELESS APPLICATION PROTOCOL PENANGANAN INPUT

TUJUAN 1. Memahami cara penanganan input dari user 2. Memahami pembuatan tabel dan penanganannya TEORI WML mendukung 2 macam input, yaitu: Teks, penanganannya menggunakan elemen <input> Pilihan bagi user, menggunakan select list Syntax <input> text <input name="variable" title="label" format="specifier" maxlength="n" emptyok="boolean"/> Atribut-atribut dalam elemen <input>
Atribut title type name format value maxlength emptyok Keterangan Digunakan sebagai teks atau label untuk input Tipe input yang dimasukkan. Ada dua pilihan: text atau password Harus ada. Nama variabel untuk menyimpan teks yang dimasukkan Format teks dari input Teks default yang akan dimunculkan jika user akan mengisi input. Panjang teks maksimum yang dapat dimasukkan. Bernilai true jika user dapat tidak mengisi apa-apa. Sebaliknya, gunakan false agar input harus diisi.

Syntax optionlist <select> text <select title="label" name="variable" ivalue="default"> <option value="value">content</option> <option value="value">content</option> ... </select> Atribut-atribut elemen <select>
Atribut title multiple name value iname ivalue Keterangan Sebagai label untuk <select> True untuk multiple list dan False untuk single list. Defaultnya False Nama variabel untuk menyimpan hasil pilihan Nilai default untuk variabel yang telah ditentukan oleh atribut name Sama dengan name hanya yang disimpan sebagai nama variabel adalah indeks pilihan dalam menu Sama dengan value hanya yang disimpan adalah indeks pilihan

<option>

Pilihan individual. Content menunjukkan label item, <onevent> menunjukkan

task, value menunjukkan nilai yang ditambahkan ke name variabel yang dipilih user
Atribut-atribut elemen <option> Kode Format Keterangan Title Sebagai label untuk <option> Nilai yang disimpan dalam variabel dengan nama yang telah ditentukan oleh Value atribut name pad <select> onpick URL yang dibuka jika user memilih pilihan ini

Text Entry Format Format input teks


Kode Format A a N X x M m *f nf \c Keterangan Sembarang karakter alfabetik (bukan angka) dalam huruf besar Sembarang karakter alfabetik (bukan angka) dalam huruf kecil Sembarang karakter numerik (bukan huruf) Sembarang karakter numerik atau alfabetik dalam huruf besar Sembarang karakter numerik atau alfabetik dalam huruf kecil Sembarang karakter numerik atau alfabetik dalam huruf besar atau kecil. Default huruf pertama huruf besar. Sembarang karakter numerik atau alfabetik dalam huruf besar atau kecil. Default huruf pertama huruf kecil. Karakteristik dengan format f dengan jumlah karakter tergantung pada input user. Karakter dengan format f dengan jumlah karakter sebanyak n karakter. Menampilkan karakter c pada kolom masukan

LATIHAN 1. Input nama <wml> <card> <do type="accept"> <go href="# disp"/> </do> <p> Enter your name: <br/> <input name="username"/> </p> </card> <card id="disp"> <p> Hi $username! </p> </card> </wml>

2. Input text dengan format tertentu

<wml> <card> <do type="accept"> <go href="# disp"/> </do> <p> Enter the code: <br/> <input name="code" format="aN"/> </p> </card> <card id="disp"> <p> The code is $code. <br/> </p> </card> </wml> 3. Input text dengan variabel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Atribut Name"> <p> Nama anda : <br/> <input type="text" title="Nama" name="name"/> </p> <p> Alamat anda : <br/> <input type="text" title="Alamat" name="address"/></p> <p> <a href="proses.wml">Proses</a></p> </card> </wml> Proses.wml <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Data Diri"> <p> Nama anda : $name </p> <p> Alamat anda : $address </p> </card>

</wml> 4. Input dengan karakter default <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="satu" title="Buku Tamu"> <p> Data diri Anda: Nama :<input type="text" title="Nama : " value="Nama anda" name="nama"/> Alamat :<input type="text" title="Alamat : " value="kota,kodepos" name="alamat"/> </p> </card> </wml> 5. Format input teks (2) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="satu" title="Buku Tamu"> <do type="accept" label="Next"> <go href="# dua"/> </do> <p> Data Anda: <br/> Nama :<input type="text" title="Nama : " name="nama" format="*A"/> Alamat :<input type="text" title="Alamat : " name="alamat" format="*M"/> Telepon :<input type="text" title="Phone : " name="phone" format="NNN8N"/> </p> </card> <card id="dua" title="Konfirmasi"> <p> Data anda : <br/> $nama<br/> $alamat<br/> $phone<br/> </p> </card> </wml> 6. Menerima parameter dari card lain <?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="satu" title="Login" newcontext="true"> <do type="accept" label="Next"> <go href="# dua"/> </do> <p> user name:<input type="text" name="name" /> password:<input type="password" name="pass" /> </p> </card> <card id="dua" title="Echo"> <p> Nama anda : $name password : $pass </p> </card> </wml> 7. Pemilihan dengan single list <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Zodiakamu"> <do type="accept" label="Next"> <go href="# fortune"/> </do> <p> Apa zodiak Anda ? <select name="zodiak" ivalue="2"> <option value="Dana yang Anda butuhkan mulai mengucur">Scorpio</option> <option value="Anda tampaknya terlalu boros">Pisces</option> <option value="Lakukan apa yang harus Anda lakukan">Cancer</option> </select> </p> </card> <card id="fortune" title="Zodiakamu"> <p> <br/> <b>$zodiak</b> </p> </card> </wml> 8. Multiple select

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="muka" title="Subscribe" newcontext="true"> <do type="accept" label="Submit"> <go href="# konfirm"/> </do> <p> Nama :<input type="text" name="nama"/> Lahir :<input type="text" name="lahir"/> Gender : <select name="gender" value="Pria"> <option value="Pria">Pria</option> <option value="Wanita">Wanita</option> </select> Newsletter yg diinginkan: <select multiple="true" name="news"> <option value="Elektronika">Elektronika</option> <option value="Kesehatan">Kesehatan</option> <option value="Hiburan">Hiburan</option> <option value="Komputer">Komputer</option> </select> </p> </card> <card id="konfirm" title="Message"> <p> Terima kasih, $nama !<br/> $lahir<br/> $gender <br/> $news <br/> Data anda telah disimpan </p> </card> </wml> 9. Tabel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Simple Table"> <p> <table title="table 2" columns="1"> <tr> <td>Ini isi table</td> </tr>

</table> </p> </card> </wml> 10. Tabel dengan banyak baris dan kolom <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="contoh Tabel"> <p> <table title="Judul" columns="2"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </p> </card> </wml> 11. Implementasi tabel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="muka" title="Berita"> <p align="center"> <b>Info Cuaca</b> <br/> Senin Jumat <br/> <a href="# cuaca">[Enter]</a> </p> </card> <card id="cuaca" title="Info Cuaca"> <p> <table columns="2" align="center"> <tr> <td>Hari</td> <td>Senin</td> </tr> <tr>

<td>Cuaca</td> <td>Cerah</td> </tr> <tr> <td>Suhu</td> <td>22-31 C </td> </tr> </table> </p> </card> </wml> 12. Link dalam tabel <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="cuaca" title="Info Cuaca"> <p align="center"> <table columns="2"> <tr> <td><b>Hari</b></td> <td><b>Cuaca</b></td> </tr> <tr> <td>Senin</td> <td><a href="# senin" title="senin">Cerah</a></td> </tr> <tr> <td>Selasa</td> <td><a href ="# selasa">Berawan</a></td> </tr> </table> </p> </card> <card id="senin" title="Senin"> <p> Cuaca cerah. Suhu berkisar 20-32 C. </p> </card> <card id="selasa" title="Selasa"> <p> Cuaca Berawan. Suhu berkisar 22-31 C. </p> </card> </wml>

TUGAS