Materi Pemrograman Mobile

Dasar Aplikasi Pemrograman W@P

NEXTBACK

Setelah Anda mengenal dengan WEB, yaitu sebuah aplikasi berteknologi internet yang dijalankan pada halaman browser (IE,Mozilla,Netscape,dll).

Pada teknologi WEB, program dasar yang digunakan untuk membuat halaman WEB menggunakan tags HTML.


NEXTBACK

WAP (Wireless Aplication Protocol) merupakan teknologi yang mirip web, akan tetapi halaman WAP tidak dijalankan pada Browser seperti pada WEB, melainkan akan diaplikasikan pada HandPhone (Telephone Cellular).

Teknologi WAP (Wireless Application Protocol) merupakan sebuah metode untuk menghadirkan halaman web ke dalam layar ponsel (handphone). Dengan begitu, maka bentuk informasi dari sebuah instansi tidak harus ditampilkan dengan metode web yang hanya dapat diakses melalui browserakan tetapi dapat ditampilkan dalam bentuk WAP.


NEXTBACK

Sejarah WAP, Awal kemunculan WAP dimulai oleh riset yang dilakukan Ericson pada tahun 1995 dengan mengembangkan protokol umum yang disebut Intelligent Terminal Transfer Protocol (ITTP) yang memungkinkan adanya nilai tambah pada handphone.

Selama tahun 1996 dan 1997, Motorola, Nokia, dan Planet Unwired(sekarang Phone.Com) meluncurkan konsep serupa. Planet Unwiredmemperkenalkan Device Markup Language (HDML) dan Handheld Device Transport Protocol (HDTP) sama halnya dengan HTML yang digunakan pada www.

HDML digunakan untuk memperlihatkan isi website atau sebagai user

interface dan sangat sesuai digunakan untuk aplikasi wireless internet access dengan limit transfer data yang sangat kecil.

Bulan Maret tahun 1997 Nokia memperkenalkan Konsep SmartMessaging yang khusus dirancang untuk GSM. Dimana komunikasi antarahandphone dengan internet dilakukan melalui SMS dan pemrograman bahasa yang disebut Tagged Text Markup Language (TTML) sama dengan HDML. Untuk membuat protokol yang sama, maka pada keempat perusahan tersebut sepakat membetuk forum WAP yang dilaksanakan pada tanggal 26 Juni 1997, dimana tanggal tersebut dianggap sebagai awal kelahiran dari Protokol Wireless Aplication Protocol (WAP).


NEXTBACK


Tujuan dari spesifikasi WAP adalah untuk memberikan suatu standarisasi yang sederhana untuk telepon seluler untuk mengakses internet. Agar dapat mengakses internet dalam ponsel terdapat micro-browser.

Micro-browser untuk saat ini tidak sebaik browser untuk website. WAP belum bisa menampung bentuk-bentuk informasi seperti yang bisa dilakukan oleh website.

NEXTBACK


Terdapat tiga bagian utama dalam akses WAP yaitu: perangkat wireless yang mendukung

WAP, WAP Gateway sebagai perantara, dan Web server sebagai sumber dokumen.

NEXTBACK


Dokumen yang berada dalam web server dapat berupa dokumen

html ataupun WML (Wireless Markup Language). Dokumen

WML sebelum dibaca melalui browser WAP, diterjemahkan

terlebih dahulu oleh gateway agar content yang ada dapat

disesuaikan dengan perangkat WAP. NEXTBACK


NEXTBACK

Untuk memenuhi kebutuhan, WAP menetapkan lingkungan pengembangan aplikasi dan arsitektur sistem, yang meliputi hal-hal seperti berikut : Menyediakan suatu arsitektur layered, scaleable, dan extensible Mengoptimalkan tranmisi wireless Mempengaruhi yang ada dan mengembangkan standar-standar internet Menyediakan model aplikasi Web-centric :

Pemetaan antarmuka user WAP yang baik berdasarkan pada antarmuka web yang ada dan telepon mobile

WAP menggunakan Web Servers – WAP mempengaruhi semua teknologi pengembangan server side web yang ada (seperti ASP.NET, PHP, dan JSP)

Menggunakan XML sebagai dasar penyajian dan pengolahan: Memungkinkan personalisasi device, isi, dan presentasi Komunikasi dan aplikasi interoperable menjadi mungkin


NEXTBACK

WAP Gateway digunakan untuk encoding dan decoding data yang dikirim dari dan ke client. Tujuan encoding ke client adalah untuk meminimalkan ukuran data yang dikirim melalui air-interface, sama halnya dengan memperkecil energi untuk pemrosesan data yang dibutuhkan oleh client.

Dasar Aplikasi Pemrograman W@P WAP mempunyai MIME Type yang khusus dan harus ditambahkan

dalam konfigurasi MIME agar ponsel dapat mengakses dokumen WAP Server. MIME Typeyang digunakan oleh WAP adalah sebagai berikut:

NEXTBACK


NEXTBACK

Kesimpulan: Jika WEB -> HTML,

sedangkan WAP -> WML (Wireless Markup Language)

WEB dijalankan pada halaman browser Inter/Intra-net,sedangkan WAP membutuhkan browser khusus untuk dapat dijalankan pada Handphone.

Dilihat dari namanya, jenis pemrograman WML memiliki tags yang mirip dengan HTML.Tentunya Anda masih ingat, bahwa semua pemrograman yang tekniknya MARKUP akan memiliki struktur yang dimulai dengan startTag dan diakhiri dengan endTag.Misal:

NEXTBACK

startTag endTag Keterangan

 Mencetak karakter menjadi tebal

 Mencetak karakter menjadi miring

 Mencetak karakter menjadi bergaris bawah

Pengenalan W@P

NEXTBACK

PendahuluanUntuk dapat menggunakan w@p, setting terlebih dahulu file http.conf(Supaya web server yg Anda gunakan dapat mendukung script wap atau file yg berekstensi .wml dan program PHP dengan kode wml).

Pengenalan W@P (Konfigurasi Web Server) I

NEXTBACK

Buka file http.conf, arahkan pada bagian<IfModule mod_dir.c>, Ubah/tambahkan deskripsi berikut:

<IfModule mod_dir.c>DirectoryIndex index.htmlDirectoryIndex index.phpDirectoryIndex default.phpDirectoryIndex main.phpDirectoryIndex index.wml

</IfModule>

Tujuan:guna direktori pada root web server tersimpan file dengan nama diatas,maka file tersebut akan dijalankan.

Pengenalan W@P (Konfigurasi Web Server) II

NEXTBACK

Buka file http.conf, Ubah/tambahkan deskripsi berikut:

AddType application/x-httpd-php .wmlAddType text/vnd.wap.wml .wmlAddType image/vnd.wap.wbmp .wbmpAddType text/vnd.wap.wmlscript .wmlscAddType text/vnd.wap.wmlscript .wmlsAddType application/vnd.wap.wmlc .wmlcAddType application/vnd.wap .wmlscriptcAddType text/vnd.wap .wmlscript

Tujuan:menambahkan beberapa parameter dukungan untuk beberapa ekstensi file yang terkait dengan program WAP.

Pengenalan W@P (Konfigurasi Web Server) III

NEXTBACK

Restart Web Server, maka Web Server telah mendukung program WML

Pengenalan W@P (Install Emulator)

NEXTBACK

Mengenal M3GateM3Gate merupakan salah satu emulator sederhana yang sering digunakan sebagai browser script WML.Secara standart, Anda dapat mensetting ke dalam bentuk layar PDA (Personal Data Asisten) atau interface handphone.


Menyimpan File WMLSecara standart, pemrograman WAP akan disimpan dengan menggunakan ekstensi .wml Akan tetapi apabila Anda hendak membuat program WAP dinamis, misalnya menggunakan pemrograman PHP, maka program dapat disimpan dengan menggunakan ekstensi .php

NEXTBACK


Referensi:http://www.w3schools.com/wap/wap_intro.asp

NEXTBACK

Cara Penulisan WMLStruktur penulisan program WAP seperti berikut:

<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”><wml><card title=“……Title Program WAP…… ”>………………….isi program WAP……………………..</card></wml>

NEXTBACK

Cara Penulisan WMLProgram WML ditulis ke dalam teknik XML (eXtensible Markup Language). Sehingga untuk menuliskan program WML harus didahului dengan tag berikut:

<?xml version=“1.0” encoding=“iso-8859-1”?>

NEXTBACK

Cara Penulisan WMLSelanjutnya, setelah pengenal XML di atas harus dikenalkan dengan konsorsiumnya, yaitu menggunakan tag berikut:

<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”“http://www.wapforum.org/DTD/wml13.dtd”>

Atau dapat disederhanakan seperti,

<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”>

NEXTBACK

Membuat Judul WAPUntuk membuat judul pada halaman WAP, WML memiliki tag yang bernama <card>, berikut adalah cara penulisannya.

<card title=“Judul WAP”>

</card>

NEXTBACK

Membuat Judul WAPContoh:<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”“http://www.wapforum.org/DTD/wml13.dtd”><wml><card title=“Belajar WAP”>

</card></wml>

NEXTBACKtitle.wml

Dasar Aplikasi Pemrograman W@P Menghilangkan Fungsi BackTambahkan parameter newcontext pada tag <card>

Contoh:<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”><wml><card title=“Belajar WAP” newcontext=“true”>

</card></wml>

NEXTBACKhilangback.wml

Menuliskan Isi Program

Didalam pemrograman WML, untuk dapat menampilkan semua isi program ke dalam halaman browser dengan cara meletakkannya pada kolom diantara tag <card>….</card>.

NEXTBACK

Dasar Aplikasi Pemrograman W@P Menuliskan Isi Program

<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”><wml><card title=“Belajar WAP”>

Ini adalah program pertama saya,saat ini saya sedang belajar pemrograman WML dan PHP

</card></wml>

NEXTBACKisiprogram.wml

Menggunakan Tag Ganti Baris (Break Lines)Pada tag HTML untuk berganti baris adalah . Berbeda dengan WML, Anda tidak dapat menggunakan tag untuk berganti baris.Di dalam WML Anda dapat membuat Break Lines dengan cara menuliskan tag .

NEXTBACK

Menggunakan Tag Ganti Baris (Break Lines)


Ini adalah program pertama saya,saat ini saya sedang belajar pemrograman WML dan PHP bersama Mahasiswa FASILKOM. Semoga saya dapat mengambil ilmunya. 

</card></wml>

NEXTBACKgantibaris.wml


Menggunakan Teks Tebal, Miring dan Bergaris Bawah

Untuk membuat isi WAP dengan teks yang dicetak tebal, miring serta bergaris bawah sama atau mirip dengan HTML.

NEXTBACK

Dasar Aplikasi Pemrograman W@P Menggunakan Teks Tebal, Miring

dan Bergaris Bawah


Ini adalah program pertama saya,saat ini saya sedang belajar pemrograman WML dan PHP bersama Mahasiswa FASILKOM. Semoga saya dapat mengambil ilmunya. 

</card></wml>

NEXTBACKstyleteks.wml

Membuat Huruf Berkarakter BesarPada pemrograman WAP sering menggunakan dua bentuk teks yang ditampilkan, yaitu teks dengan bentuk besar dan kecil. Untuk membuat teks dengan karakter besar, WML memiliki tag bernama <big>.

NEXTBACK

Membuat Huruf Berkarakter Besar

<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”><wml><card title=“Belajar WAP”><big>Sekolah Tinggi Teknik Ibnu Sina Batam</big></card></wml>

NEXTBACKbig.wml

Membuat Huruf Berkarakter KecilPada pemrograman WAP sering menggunakan dua bentuk teks yang ditampilkan, yaitu teks dengan bentuk besar dan kecil. Untuk membuat teks dengan karakter kecil, WML memiliki tag bernama .

NEXTBACK

Membuat Huruf Berkarakter Besar

<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”><wml><card title=“Belajar WAP”>Sekolah Tinggi Teknik Ibnu Sina Batam</card></wml>

NEXTBACKsmall.wml


Menggunakan GambarDalam WAP untuk menggunakan gambar harus dikonversi dulu kedalam bentuk warna monochrom.Untuk mengkonversi, gambar tersebut sebaiknya disimpan dalam bentuk file *.wbmp

NEXTBACK

Menggunakan GambarBerbeda dengan tag HTML, pada WAP sintaks untukmenggunakan gambar terdapat tag penutup.

<img src=“……….*.wbmp……….”> </img>

NEXTBACK

Menggunakan Gambar

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"

"http://www.wapforum.org/DTD/wml13.dtd" ><wml><card title=".:: Belajar WAP ::."> <big>Ini Pesawat</big> <img src="pesawat.wbmp" alt="Pesawat"></img></card></wml>

NEXTBACKgambar.wml

HyperlinkUntuk membuat hyperlink, WML memiliki tag yang sama dengan HTML.

<a href=“……path/namafile…..”>……….</a>

NEXTBACK

Hyperlink

<?xml version=“1.0” encoding=“iso-8859-1” ?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”><wml><card title=“Belajar WAP”>+ <a href=“styleteks.wml”>Link1</a> + <a href=“gantibaris.wml”>Link2</a></card></wml>

NEXTBACKhyperlink.wml

Membuat Splash WindowSplash window merupakan salah satu teknik pemrograman WAP yang digunakan membuat loading halaman.Untuk membuat program loading, WML telah menyediakan atribut yang berguna untuk melakukanpengaturan waktu panggil, atribut tersebut dapat dipasangkan dengan tag <card>.

NEXTBACK

Membuat Splash Window

NEXTBACKsplashwindow.wml

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN“ http://www.wapforum.org/DTD/wml13.dtd" ><wml><card id="halaman1" ontimer="#halaman2"><timer value="10"/> <big>[Loading Pages]</big> :: CENTRANET TEAM :: Software - Web Developer </card>

<card id="halaman2" title=".:: LOADING ::. " ontimer="hyperlink.wml" newcontext="true"> <timer value="5"/> Tunggu sebentar ya om.. </card></wml>

Dasar Aplikasi Pemrograman W@P FormBerbeda dengan aplikasi web, pada pemrograman HTMLkita dapat langsung membuat media input secara langsung. Akan tetapi pada aplikasi WAP kita harus mendefinisikan terlebih dahulu supaya dapat dibaca Sebagai data WAP.

NEXTBACK

Dasar Aplikasi Pemrograman W@P FormCaranya, pertama kali membuat deklarasi form dengan

menggunakan tag <do> dan <go>.

Tag <do> digunakan sebagai alamat dari form tersebut.

Pada HTML tag <do> sama fungsinya dengan tag masukan

berbentuk tombol.

Penulisannya:

<do type=“accept” label=“Simpan”>

………

</do>

NEXTBACK

Dasar Aplikasi Pemrograman W@P FormSelanjutnya, didalam tag <do> dapat dimasukkan tag <go>yang di dalam pemrograman HTML hampir sama fungsinya dengan tag <form…>.Tag <go> memiliki fungsi untuk mendefinisikan pengalamatantransfer data. Penulisannya:<do type=“accept” label=“Simpan”>

<go method=“post” href=“eksekusi.php”>………</go>

</do>

NEXTBACK

Dasar Aplikasi Pemrograman W@P FormUntuk menyimpan data teks yang berasal dari media masukan,WML memiliki tag yang bernama postfield.Penulisannya:<postfield name=“variabel” value=“$(variabel_input)”/>

Sedangkan perintah untuk menggunakan tag masukan:

<input type=“text” name=“variabel” maxlength=“nilai_maksimal”>

NEXTBACK

Dasar Aplikasi Pemrograman W@P Form

NEXTBACKformteks.wml

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd" > <wml> <card title=".:: Belajar WAP ::."> <do type="accept" label="Simpan"> <go method="post" href="#"> <postfield name="judul" value="$(in_judul)"/> <postfield name="berita" value="$(in_berita)"/> </go> </do>

Form Masukkan Berita Judul : <input type="text" name="in_judul" maxlength="25"/>Berita : <input type="text" name="in_berita" maxlength="100"/></card></wml>

Dasar Aplikasi Pemrograman W@P Menggunakan Teks Password

Dalam membuat form login dengan menggunakan media

masukan bertipe password, teknik membuatnya sama dengan

cara sebelumnya, akan tetapi tag input yang digunakan

bertipe=“password”.

<input type=“password” name=“variabel” maxlength=“panjang_teks”>

NEXTBACK

Dasar Aplikasi Pemrograman W@P Menggunakan Teks Password

NEXTBACKformpassword.wml

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd" > <wml> <card title=".:: Belajar WAP ::."> <do type="accept" label="Simpan"> <go method="post" href=“#"> <postfield name="username" value="$(in_user)"/> <postfield name="password" value="$(in_pass)"/> </go> </do>

Form Login Anggota Username : <input type="text" name="in_user" maxlength="25">Password : <input type="password" name="in_pass" maxlength="25"></card></wml>

Dasar Aplikasi Pemrograman W@P Menggunakan List BoxListbox digunakan untuk menampilkan pilihan-pilihan yangsifatnya pasti dan tetap, misalnya jenis kelamin, golongandarah, dll.Struktur tag-nya sebagai berikut:

<select name=“variabel”><option value=“nilai1”>Pilihan 1</option><option value=“nilai2”>Pilihan 2</option>

</select>

NEXTBACK

Dasar Aplikasi Pemrograman W@P Menggunakan List Box<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd" > <wml> <card title=".:: Belajar WAP ::."> <do type="accept" label="Simpan"> <go method="post" href="#"> <postfield name="jurusan" value="$(in_jurusan)"/> </go> </do> Jurusan : <select name="in_jurusan"> <option value=“TI">Teknologi Informasi</option> <option value="SI">Sistem Informasi</option></select> </card></wml>

NEXTBACKformlistbox.wml

Dasar Aplikasi Pemrograman W@P Menggunakan Check Box

Untuk dapat menggunakan Kontrol Check Box, Andadapat menambahkan properti Multiple dengan nilai TRUE pada tag select.

<select name=“…….” multiple=“true”><option>…….</option><option>…….</option>

</select>

NEXTBACK

Dasar Aplikasi Pemrograman W@P Menggunakan Check Box<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN“ "http://www.wapforum.org/DTD/wml13.dtd" ><wml><card title=".:: Belajar WAP ::."> <do type="accept" label="Simpan"><go method="post" href="#"><postfield name="hobbi" value="$(in_hobbi)"/></go></do>

NEXTBACKformlistbox2.wml

Hobi Anda :<select name="in_hobbi" multiple="true"><option value="Makan">Makan</option><option value="Tidur">Tidur</option><option value="Jalan-jalan">Jalan-jalan</option><option value="Bersepeda">Bersepeda</option></select></card></wml>

Dasar Aplikasi Pemrograman W@P Script PHP di dalam WMLUntuk membuat program WAP berbasis PHP, maka pada setiap halaman harus Anda kenalkan bahwa program tersebut adalah script WAP. Caranya:

header(‘Content-type:text/vnd.wap.wml’);

Selain itu, Anda juga harus menampilkan pengenal script WML ke dalam versi PHP, Caranya:

echo (‘<?xml version=“1.0”?>’);echo (‘<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN“>’);

NEXTBACK

Dasar Aplikasi Pemrograman W@P Listing Program Embeded PHP

<?php

header('Content-type:text/vnd.wap.wml');

echo('<?xml version="1.0"?>');

echo('<!DOCTYPE wml PUBLIC "-//WAPFORUM//

DTD WML 1.1/EN">');

echo "<wml>";

echo "<card title=\".:: Dasar PHP WML ::.\"

newcontext=\"true\">";

echo " Menggunakan PHP ";

echo "</card>";

echo "</wml>";

?>

NEXTBACKembeded.wml

Dasar Aplikasi Pemrograman W@P Menampilkan Data<?phpheader('Content-type:text/vnd.wap.wml');echo('<?xml version="1.0"?>');echo('<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1/EN">');?><wml><card title=".:: Dasar PHP WML ::." newcontext="true"><big><?php$tanggal=date('d-m-Y');echo " Selamat datang PHP dan WML ";echo "Sekarang tanggal $tanggal";?>

</big></card></wml>

NEXTBACKtampildata.wml

Dasar Aplikasi Pemrograman W@P Logika If<?php

header('Content-type:text/vnd.wap.wml');

echo('<?xml version="1.0"?>');

echo('<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD

WML 1.1/EN">'); ?>

<wml>

<card title=".:: Dasar PHP WML ::." newcontext="true">



<?php $gaji=30000;

if ($gaji <= 350000)

{

echo " <big>";

echo "Gaji Rp.$gaji,- tidak memenuhi UMR Surabaya";

echo " </big>";

}

?></card></wml>

NEXTBACKlogikaif.php

Dasar Aplikasi Pemrograman W@P Menggunakan For<?phpheader('Content-type:text/vnd.wap.wml');echo('<?xml version="1.0"?>');echo('<!DOCTYPE wml PUBLIC "-//WAPFORUM// DTD WML 1.1/EN">');?><wml><card title=".:: Dasar PHP WML ::." newcontext="true"><?phpecho "Menampilkan bulan 1-12 ";for ($bulan=1; $bulan <= 12; $bulan++){echo "Bulan $bulan ";}?></card></wml>

NEXTBACKlooping-for.php

Dasar Aplikasi Pemrograman W@P Menggunakan For pada PHP

Sintaks perulangan for dapat dijelaskan sebagai berikut: $var1 : variabel yg memiliki nilai awal perulangan $var2 : variabel yg memiliki nilai pembatas dalam perulangan $var3 : variabel yg digunakan untuk membuat operasi, baik penambahan maupun pengurangan angka.

NEXTBACK

Dasar Aplikasi Pemrograman W@P Menggunakan While<?phpheader('Content-type:text/vnd.wap.wml');echo('<?xml version="1.0"?>');echo('<!DOCTYPE wml PUBLIC "-//WAPFORUM //DTD WML 1.1/EN">');?><wml><card title=".:: Dasar PHP WML ::." newcontext="true"><?phpecho "Menampilkan tanggal 1-31 ";while ($tanggal <= 31){ $tanggal++; echo "Tanggal $tanggal ";}?></card></wml>

NEXTBACKlooping-while.php

Finish

Sekian Materi Pemrograman Mobile.

Untuk Pengembangan Selanjutnya,

Terserah Anda…

Kritik & Saran:e-mail : [email protected]

END

Materi Pemrograman Mobile

Documents

Transcript of Materi Pemrograman Mobile