Wireless Application

Elfan Nofiari

IF-ITB/EN/Apr-05 Page 1
IF3292 – Wireless Application
 Aplikasi nirkabel
• Aplikasi yang diakses menggunakan medium dan perangkat nirkabel
Æ mobile
• Perangkat nirkabel : mempunyai sejumlah keterbatasan dibandingkan
komputer biasa
– layar kecil
– CPU & memori terbatas
– bandwidth kecil
– tombol interaksi terbatas
• Beberapa strategi :
– Aplikasi dijalankan secara online (model web) menggunakan
WAP browser
– Aplikasi didownload lengkap, dijalankan secara lokal (java midlet, aplikasi
sistem Symbian)
– s.d.a, dengan komunikasi data secara online bila diperlukan (konsep
"smart client" dari Microsoft)
– Aplikasi berbasis web biasa dijalankan secara online menggunakan HTML
browser

IF-ITB/EN/Apr-05 Page 2
IF3292 – Wireless Application
 Teknologi aplikasi berbasis WAP
• WAP Å HTTP
• WML, HDML Å HTML
• WMLscript Å Javascript

IF-ITB/EN/Apr-05 Page 3
IF3292 – Wireless Application
 Tentang WAP, WML, & HDML
• WAP
– Wireless Application Protocol (versi 1.1)
– Protokol transmisi aplikasi nirkabel
• WML & WMLscript
– Wireless Markup Language (versi 1.1)
– format standar untuk membuat dokumen/aplikasi berbasis WAP
– bahasa bertanda yang didasarkan pada XML
– didesain untuk menampilkan content dan antarmuka interaksinya pada
perangkat nirkabel
• Dikembangkan oleh WAP Forum
– Organisasi industri-industri yang mengembangkan standar terbuka untuk
komunikasi nirkabel
– http://www.wapforum.org/
• HDML
– Handheld Device Markup Language (versi 3.0)
– Sebagai dasar bagi terciptanya WML
– Dirancang oleh phone.com (yang juga merupakan anggota WAP Forum)

IF-ITB/EN/Apr-05 Page 4
IF3292 – Wireless Application
Cara WAP bekerja

IF-ITB/EN/Apr-05 Page 5
IF3292 – Wireless Application
 Software Development Kit
• SDK : kit untuk mempermudah pengembangan aplikasi berbasis WAP
• Openwave Software Development Kit (UP.SDK) versi 4.1
• Dikembangkan oleh Openwave (http://www.openwave.com),
gabungan phone.com & software.com
• Beberapa istilah :
– UP.Browser (software browser)
– UP.Phone (phone hardware + UP.Browser software)
– UP.Link Server (berfungsi seperti gateway/HTTP proxy)
– UP.Simulator (software yang berfungsi sebagai UP.Phone)

IF-ITB/EN/Apr-05 Page 6
IF3292 – Wireless Application
 Karakteristik perangkat nirkabel
• Display lebar 12 karakter, tinggi 4 baris, 1 baris untuk
label tombol fungsi
• Dapat menampilkan ASCII
• Masukan berupa alfabet & numerik
• Pilihan menggunakan tombol panah/numerik
• Ada dua tombol yang fungsinya bisa diprogram (ACCEPT
& OPTION)
• Ada tombol PREV untuk navigasi balik
• Scroll vertikal & horizontal

IF-ITB/EN/Apr-05 Page 7
IF3292 – Wireless Application
 Aturan Sintaks WML
• WML case-sensitive, wajib menggunakan huruf kecil
• Penanganan whitespace seperti pada HTML
• Nilai atribut tag harus diapit tanda kutip (tunggal atau ganda)
• Tidak boleh ada jarak (white space) antara nama atribut, tanda sama
dengan, dan nilai atribut
• Tag tunggal ditulis menggunakan ketentuan XML, misal : <br />
• Pada header harus dinyatakan jenis dokumen WML
Content-type: text/vnd.wap.wml
• Prolog dokumen (XML DTD)
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

• Prolog dokumen bila menggunakan ekstensi Openwave

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"http://www.phone.com/dtd/wml11.dtd">
IF-ITB/EN/Apr-05 Page 8
IF3292 – Wireless Application
 Konsep "halaman"
• Unit terkecil yang dikirim dari deck
UP.Link Server ke UP.Phone <wml>
<wml>
disebut deck <card>
<card>
• Setiap deck dapat terdiri dari card …content…
…content…
satu atau sejumlah card </card>
</card>
• Setiap card menspesifikasikan <card>
<card>
suatu interaksi tunggal antara …content…
…content…
user dan perangkat card
</card>
</card>
• Perangkat hanya dapat
<card>
menampilkan satu card pada <card>
suatu saat (di-scroll bila perlu) …content…
…content…
• Ukuran deck maksimal 20kb, card
</card>
</card>
sebaiknya sekitar 5kb </wml>
</wml>

IF-ITB/EN/Apr-05 Page 9
IF3292 – Wireless Application
 Contoh isi dokumen WML
<?
<?
header("Content-type:
header("Content-type: text/vnd.wap.wml");
text/vnd.wap.wml");
?>
?>
<wml>
<wml>
<card>
<card>
Hello
Hello World
World
</card>
</card>
</wml>
</wml>

IF-ITB/EN/Apr-05 Page 10
IF3292 – Wireless Application
 Daftar Tag
• Layout & text formatting
– <p>
– <b>,<i>,<u>
– <big>
– <small>
– <br>
• Table & image
– <table>,<tr>,<td
– <img>
• Link
– <a>,<anchor>,<go>,<prev>,<refresh>
• Data input
– <input>,<select>,<option>,<postfield>

IF-ITB/EN/Apr-05 Page 11
IF3292 – Wireless Application
 Layout & text formatting
<?
<?
header("Content-type:
header("Content-type: text/vnd.wap.wml");
text/vnd.wap.wml");
?>
?>
<wml>
<wml>
<card>
<card>
<big>Hello
<big>Hello World</big>
World</big>
<p>Normal,
<p>Normal, <b>Bold</b>,
<b>Bold</b>, <i>Italic</i>,
<i>Italic</i>, <u>Underline</u></p>
<u>Underline</u></p>
<br
<br />
/>
<p><small>This
<p><small>This is
is small
small text</small></p>
text</small></p>
</card>
</card>
</wml>
</wml>

IF-ITB/EN/Apr-05 Page 12
IF3292 – Wireless Application
 Table & Image
<?
<?
header("Content-type:
header("Content-type: text/vnd.wap.wml");
text/vnd.wap.wml");
?>
?>
<wml>
<wml>
<card>
<card>
<table
<table columns="3">
columns="3">
<tr>
<tr>
<td><b>Barang</b></td>
<td><b>Barang</b></td>
<td><b>HargaMin</b></td>
<td><b>HargaMin</b></td>
<td><b>Harga</b></td>
<td><b>Harga</b></td>
</tr>
</tr>
<tr><td>Buku</td><td>30000</td><td>35000</td></tr>
<tr><td>Buku</td><td>30000</td><td>35000</td></tr>
<tr><td>Pensil</td><td>2000</td><td>2200</td></tr>
<tr><td>Pensil</td><td>2000</td><td>2200</td></tr>
</table>
</table>
<img
<img src='mickey.bmp'
src='mickey.bmp' alt='Mickey'
alt='Mickey' />
/>
</card>
</card>
</wml>
</wml>

IF-ITB/EN/Apr-05 Page 13
IF3292 – Wireless Application
 Link
<?
<?
header("Content-type:
header("Content-type: text/vnd.wap.wml");
text/vnd.wap.wml");
?>
?>
<wml>
<wml>
<card
<card id='step1'
id='step1' title='Langkah
title='Langkah 1'>
1'>
Maju
Maju ke <a href='#step2' title='Maju'>langkah 2</a>
ke <a href='#step2' title='Maju'>langkah 2</a>
</card>
</card>
<card
<card id='step2'
id='step2' title='Langkah
title='Langkah 2'>
2'>
Ini langkah 2<br
Ini langkah 2<br />/>
Maju
Maju ke
ke <anchor
<anchor title='maju'><go
title='maju'><go href='#step3'
href='#step3' />langkah
/>langkah 3</anchor><br
3</anchor><br />
/>
<anchor title='kembali'><prev></prev>Kembali ke langkah sebelumnya</anchor>
<anchor title='kembali'><prev></prev>Kembali ke langkah sebelumnya</anchor>
</card>
</card>
<card
<card id='step3'
id='step3' title='Langkah
title='Langkah 3'>
3'>
Ini langkah
Ini langkah 33
<anchor
<anchor title='refresh'><refresh></refresh>Refresh</anchor>
title='refresh'><refresh></refresh>Refresh</anchor>
</card>
</card>
</wml>
</wml>

IF-ITB/EN/Apr-05 Page 14
IF3292 – Wireless Application
 Data input (entry)
<?
<?
header("Content-type:
header("Content-type: text/vnd.wap.wml");
text/vnd.wap.wml");
?>
?>
<wml>
<wml>
<card
<card id='step1'
id='step1' title='Langkah
title='Langkah 1'>
1'>
Nama
Nama Anda : <input type='text' title='Nama'
Anda : <input type='text' title='Nama' name='nama'
name='nama' maxlength='10'
maxlength='10' /><br
/><br />
/>
Password
Password Anda : <input type='password' title='Passwd' name='pass' maxlength='5' />
Anda : <input type='password' title='Passwd' name='pass' maxlength='5' />
<br />
<br />
<select
<select title='Kota'
title='Kota' multiple='false'
multiple='false' name='kota'>
name='kota'>
<option value='1'>Bandung</option>
<option value='1'>Bandung</option>
<option
<option value='2'>Jakarta</option>
value='2'>Jakarta</option>
<option value='3'>Semarang</option>
<option value='3'>Semarang</option>
</select>
</select>
<do
<do type='accept'
type='accept' label='Submit'><go
label='Submit'><go href='#step2'
href='#step2' /></do>
/></do>
</card>
</card>
...
...

IF-ITB/EN/Apr-05 Page 15
IF3292 – Wireless Application
 Data input (submit)
...
...
<card
<card id='step2'
id='step2' title='Langkah
title='Langkah 2'>2'>
Nama : $(nama)<br
Nama : $(nama)<br /> />
Pass
Pass :: $(pass)<br
$(pass)<br />/>
Kota : $(kota)<br
Kota : $(kota)<br /> />
<do
<do type='accept'
type='accept' label='Submit'>
label='Submit'>
<go
<go href='server.php' method='post'>
href='server.php' method='post'>
<postfield
<postfield name='pnama' value='$(nama)'
name='pnama' value='$(nama)' />/>
<postfield name='ppass' value='$(pass)'
<postfield name='ppass' value='$(pass)' /> />
<postfield
<postfield name='pkota'
name='pkota' value='$(kota)'
value='$(kota)' />/>
</go>
</go>
</do>
</do>
</card>
</card> <?
<?
</wml>
</wml> header("Content-type:
header("Content-type: text/vnd.wap.wml");
text/vnd.wap.wml");
?>
?>
<wml>
<wml>
<card>
<card>
Terima
Terima Nama
Nama :: <?echo
<?echo $_POST["pnama"]?><br
$_POST["pnama"]?><br />
/>
Terima Pass : <?echo $_POST["ppass"]?><br
Terima Pass : <?echo $_POST["ppass"]?><br /> />
Terima
Terima Kota
Kota :: <?echo
<?echo $_POST["pkota"]?><br
$_POST["pkota"]?><br />
/>
</card>
</card>
server.php
</wml>
</wml>

IF-ITB/EN/Apr-05 Page 16
IF3292 – Wireless Application