modul_wap-1-2

5/13/2018 modul_wap-1-2 - slidepdf.com

http://slidepdf.com/reader/full/modulwap-1-2-55a752126c485 1/19

BAB 1

WIRELESS APPLICATION PROTOCOL

DASAR WAP dan WML

TUJUAN

1. Memahami konsep WAP

2. Memahami lingkungan WAP IDE/WAP Emulator

3. Memahami pemrograman WML

4. Memahami penanganan Event dan Timer

TEORI

Tentang WAP

Wireless Application Protocol merupakan suatu spesifikasi global yang mengijinkan user yangmengggunakan 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

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 IDEOpenWave (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 Keterangan

<wml> Elemen ini harus ada. Elemen ini menentukan sebuah deck

<head>Elemen ini untuk menyatakan informasi keseluruhan dari sebuah deck,termasuk metadata dan kontrol akses

<template>

Mendefiniskan kumpulan even pada level deck. Karakteristik dari semua cardpada deck. Karakteristik ini dapat ditimpa untuk suatu card dengan membuatevent yang sama di dalam card.

<card>Dibutuhkan. Satu atau lebih <card> menentukan action dan user interfaceuntuk deck

Atribut-atribut yang dimiliki oleh <card>

Atribut Keterangan

id Nama dari card

<do> Definisi action

<go> Action untu meminta suatu alamat

title Judul card yang ditampilkan browser

text Teks yang akan ditampilkan di browser

newcontext Menyatakan apakah konteks browser perlu diperbarui

onenterforward Menentukan URL yang dibuka jika anda masuk dalam card

onenterbackward Menentukan URL yang dibuka jika anda keluar dari card

ontimer Menentukan URL yang dibuka jika waktu habis



Action dalam card

Elemen Keterangan

doMenentukan action yang dilakukan jika anda menekan function key sesuaiatribut pada tipe. Atribut label adalah nama bagi tombol fungsi yang ditampilkan

<go> Berpindah ke URL yang dituju, jika action pada <do> dilakukan

Atribut dalam elemen <do>

Atribut Keterangan

type Berisi string yang menunjukkan trigger dari action yang akan dilakukan. Nilai(value)-nya antara lain :

• Accept

• Prev

• Help

• Reset

• Options

• Delete

• unknown

label Optional text label untuk suatu elemenname Memberi nama untuk elemen tersebutoptional Menunjukkan bahwa <do> bisa diabaikan, jika bernilai true

Atribut dalam elemen <img>

Atribut Keterangan

<src> alamat url dari gambar

<align> posisi gambar dalam baris

<height> ukuran vertical gambar

<width> ukuran horizontal gambar

<vspace> ruang kosong diatas dan dibawah gambar

<hspace> 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 Keterangan

<table>Merupakan elemen atau tag yang utama. Digunakan untuk memberi tahubrowser bahwa anda membuat suatu table dalam WML

<tr>Digunakan untuk mendefinisikan suatu baris dalam table. Baris ini terdiri darisatu atau lebih data tabel (cell)

<td>Digunakan untuk menempatkan data pada satu baris. Data dalam elemen inibisa saja tidak ada, alias kosong.

Atribut-atribut yang dimiliki oleh elemen <table>

Atribut Keterangan

title Digunakan sebagai identitas table

alignleft | center | right. Digunakan untuk menentukan rataan teks dalam kolom. Jikaanda tidak menentukan nilai atribut ini, maka secara otomatis, teks rata kiri.

columnsHarus ada. Untuk menentukan jumlah kolom untuk tiap baris. Nilai nol tidakdiperbolehkan.



LATIHAN

1. “Hello World”

helloworld.wml

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.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 WML1.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//DTDWML 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 "-//WAPFORUM//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 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


<!DOCTYPE wml PUBLIC

"-//WAPFORUM//DTD WML 1.1//EN"


<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


<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"


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

title Digunakan sebagai teks atau label untuk input

type Tipe input yang dimasukkan. Ada dua pilihan: text atau password

name Harus ada. Nama variabel untuk menyimpan teks yang dimasukkan

format Format teks dari input

value Teks default yang akan dimunculkan jika user akan mengisi input.

maxlength Panjang teks maksimum yang dapat dimasukkan.

emptyokBernilai true jika user dapat tidak mengisi apa-apa. Sebaliknya, gunakan falseagar 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 Keterangan

title Sebagai label untuk <select>

multiple True untuk multiple list dan False untuk single list. Defaultnya False

name Nama variabel untuk menyimpan hasil pilihan

value Nilai default untuk variabel yang telah ditentukan oleh atribut name

inameSama dengan name hanya yang disimpan sebagai nama variabel adalahindeks pilihan dalam menu

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

ValueNilai yang disimpan dalam variabel dengan nama yang telah ditentukan olehatribut name pad <select>

onpick URL yang dibuka jika user memilih pilihan ini

Text Entry Format

Format input teks

Kode Format Keterangan

A Sembarang karakter alfabetik (bukan angka) dalam huruf besar

a Sembarang karakter alfabetik (bukan angka) dalam huruf kecil

N Sembarang karakter numerik (bukan huruf)

X Sembarang karakter numerik atau alfabetik dalam huruf besarx Sembarang karakter numerik atau alfabetik dalam huruf kecil

MSembarang karakter numerik atau alfabetik dalam huruf besar atau kecil.Default huruf pertama huruf besar.

mSembarang karakter numerik atau alfabetik dalam huruf besar atau kecil.Default huruf pertama huruf kecil.

*fKarakteristik dengan format f dengan jumlah karakter tergantung pada inputuser.

nf Karakter dengan format f dengan jumlah karakter sebanyak n karakter.

\c 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


<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.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


<!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)


<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




<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.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 : $namepassword : $pass

</p></card>

</wml>

7. Pemilihan dengan single list


<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




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


<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


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


<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

modul_wap-1-2

Documents