Dosen: Zakki Falani, S.Kom Fakultas Ilmu Komputer Universitas Narotama Modul Mobile Programming part.I Dosen: Zakki Falani, S.Kom Fakultas Ilmu Komputer Universitas Narotama NEXT

Dasar Aplikasi Pemrograman W@P 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. BACK NEXT

Dasar Aplikasi Pemrograman W@P 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). BACK NEXT

Dasar Aplikasi Pemrograman W@P 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. BACK NEXT

Dasar Aplikasi Pemrograman W@P 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: startTag endTag Keterangan <b> </b> Mencetak karakter menjadi tebal <i> </i> Mencetak karakter menjadi miring <u> </u> Mencetak karakter menjadi bergaris bawah BACK NEXT

Pengenalan W@P Pendahuluan Untuk 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). BACK NEXT

Pengenalan W@P (Konfigurasi Web Server) I Buka file http.conf, arahkan pada bagian <IfModule mod_dir.c>, Ubah/tambahkan deskripsi berikut: <IfModule mod_dir.c> DirectoryIndex index.html DirectoryIndex index.php DirectoryIndex default.php DirectoryIndex main.php DirectoryIndex index.wml </IfModule> Tujuan:guna direktori pada root web server tersimpan file dengan nama diatas,maka file tersebut akan dijalankan. BACK NEXT

Pengenalan W@P (Konfigurasi Web Server) II Buka file http.conf, Ubah/tambahkan deskripsi berikut: AddType application/x-httpd-php .wml AddType text/vnd.wap.wml .wml AddType image/vnd.wap.wbmp .wbmp AddType text/vnd.wap.wmlscript .wmlsc AddType text/vnd.wap.wmlscript .wmls AddType application/vnd.wap.wmlc .wmlc AddType application/vnd.wap .wmlscriptc AddType text/vnd.wap .wmlscript Tujuan:menambahkan beberapa parameter dukungan untuk beberapa ekstensi file yang terkait dengan program WAP. BACK NEXT

Pengenalan W@P (Konfigurasi Web Server) III Restart Web Server, maka Web Server telah mendukung program WML BACK NEXT

Pengenalan W@P (Install Emulator) Mengenal M3Gate M3Gate 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. BACK NEXT

Dasar Aplikasi Pemrograman W@P Menyimpan File WML Secara 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 BACK NEXT

Dasar Aplikasi Pemrograman W@P Cara Penulisan WML Struktur 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> BACK NEXT

Dasar Aplikasi Pemrograman W@P Cara Penulisan WML Program 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”?> BACK NEXT

Dasar Aplikasi Pemrograman W@P Cara Penulisan WML Selanjutnya, 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”> BACK NEXT

Dasar Aplikasi Pemrograman W@P Membuat Judul WAP Untuk membuat judul pada halaman WAP, WML memiliki tag yang bernama <card>, berikut adalah cara penulisannya. <card title=“Judul WAP”> </card> BACK NEXT

Dasar Aplikasi Pemrograman W@P Membuat Judul WAP Contoh: <?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> title.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Menghilangkan Fungsi Back Tambahkan 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> hilangback.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P 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>. BACK NEXT

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”> <p align=“left”> Ini adalah program pertama saya, saat ini saya sedang belajar pemrograman WML dan PHP </p> </card> </wml> isiprogram.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Tag Ganti Baris (Break Lines) Pada tag HTML untuk berganti baris adalah <br>. Berbeda dengan WML, Anda tidak dapat menggunakan tag <br> untuk berganti baris. Di dalam WML Anda dapat membuat Break Lines dengan cara menuliskan tag <br/>. BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Tag Ganti Baris (Break Lines) <?xml version=“1.0” encoding=“iso-8859-1” ?> <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”> <wml> <card title=“Belajar WAP”> <p align=“left”> Ini adalah program pertama saya, saat ini saya sedang belajar pemrograman WML dan PHP bersama Mahasiswa FASILKOM.<br/><br/> Semoga saya dapat mengambil ilmunya.<br/> </p> </card> </wml> gantibaris.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P 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. BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Teks Tebal, Miring dan Bergaris Bawah <?xml version=“1.0” encoding=“iso-8859-1” ?> <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”> <wml> <card title=“Belajar WAP”> <p align=“left”> <b>Ini adalah program pertama saya,</b> <i>saat ini saya sedang belajar pemrograman WML dan PHP bersama Mahasiswa FASILKOM.</i><br/><br/> <u>Semoga saya dapat mengambil ilmunya.</u><br/> </p> </card> </wml> styleteks.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Membuat Huruf Berkarakter Besar Pada 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>. BACK NEXT

Dasar Aplikasi Pemrograman W@P 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”> <p align=“center”> <big>Universitas Narotama Surabaya</big> </p> </card> </wml> big.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Membuat Huruf Berkarakter Kecil Pada 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 <small>. BACK NEXT

Dasar Aplikasi Pemrograman W@P 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”> <p align=“center”> <small>Universitas Narotama Surabaya</small> </p> </card> </wml> small.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Gambar Dalam WAP untuk menggunakan gambar harus dikonversi dulu kedalam bentuk warna monochrom. Untuk mengkonversi, gambar tersebut sebaiknya disimpan dalam bentuk file *.wbmp BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Gambar Berbeda dengan tag HTML, pada WAP sintaks untuk menggunakan gambar terdapat tag penutup. <img src=“……….*.wbmp……….”> </img> BACK NEXT

Dasar Aplikasi Pemrograman W@P 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 ::."> <p align="left"> <big><b>Ini Pesawat</b></big> <br/> <img src="pesawat.wbmp" alt="Pesawat"></img> </p> </card> </wml> gambar.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Hyperlink Untuk membuat hyperlink, WML memiliki tag yang sama dengan HTML. <a href=“……path/namafile…..”>……….</a> BACK NEXT

Dasar Aplikasi Pemrograman W@P Hyperlink <?xml version=“1.0” encoding=“iso-8859-1” ?> <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”> <wml> <card title=“Belajar WAP”> <p align=“center”> + <a href=“styleteks.wml”>Link1</a><br/> + <a href=“gantibaris.wml”>Link2</a> </p> </card> </wml> hyperlink.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Membuat Splash Window Splash window merupakan salah satu teknik pemrograman WAP yang digunakan membuat loading halaman. Untuk membuat program loading, WML telah menyediakan atribut yang berguna untuk melakukan pengaturan waktu panggil, atribut tersebut dapat dipasangkan dengan tag <card>. BACK NEXT

Dasar Aplikasi Pemrograman W@P Membuat Splash Window <?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"/> <p align="center"> <b><big>[Loading Pages]</big><br/> <br/> <small> :: CENTRANET TEAM ::<br/> Software - Web Developer </small></b> <br/> <br/> </p> </card> <card id="halaman2" title=".:: LOADING ::. " ontimer="hyperlink.wml" newcontext="true"> <timer value="5"/> <p align="center"> <small> <br/> Tunggu sebentar ya om.. </small> </p> </card> </wml> splashwindow.wml BACK NEXT

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

Dasar Aplikasi Pemrograman W@P Form Caranya, 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> BACK NEXT

Dasar Aplikasi Pemrograman W@P Form Selanjutnya, didalam tag <do> dapat dimasukkan tag <go> yang di dalam pemrograman HTML hampir sama fungsinya dengan tag <form…>. Tag <go> memiliki fungsi untuk mendefinisikan pengalamatan transfer data. Penulisannya: <do type=“accept” label=“Simpan”> <go method=“post” href=“eksekusi.php”> ……… </go> </do> BACK NEXT

Dasar Aplikasi Pemrograman W@P Form Untuk 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”> BACK NEXT

Dasar Aplikasi Pemrograman W@P Form <?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 ::."> <p align="left"> <do type="accept" label="Simpan"> <go method="post" href="#"> <postfield name="judul" value="$(in_judul)"/> <postfield name="berita" value="$(in_berita)"/> </go> </do> <b>Form Masukkan Berita</b><br/> Judul   : <input type="text" name="in_judul" maxlength="25"/> Berita   : <input type="text" name="in_berita" maxlength="100"/> </p> </card> </wml> formteks.wml BACK NEXT

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”> BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Teks Password <?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 ::."> <p align="left"> <do type="accept" label="Simpan"> <go method="post" href=“#"> <postfield name="username" value="$(in_user)"/> <postfield name="password" value="$(in_pass)"/> </go> </do> <b>Form Login Anggota</b><br/> Username   : <input type="text" name="in_user" maxlength="25"> Password   : <input type="password" name="in_pass" maxlength="25"> </p> </card> </wml> formpassword.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan List Box Listbox digunakan untuk menampilkan pilihan-pilihan yang sifatnya pasti dan tetap, misalnya jenis kelamin, golongan darah, dll. Struktur tag-nya sebagai berikut: <select name=“variabel”> <option value=“nilai1”>Pilihan 1</option> <option value=“nilai2”>Pilihan 2</option> </select> BACK NEXT

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 ::."> <p align="left"> <do type="accept" label="Simpan"> <go method="post" href="#"> <postfield name="jurusan" value="$(in_jurusan)"/> </go> </do> Jurusan   : <select name="in_jurusan"> <option value=“SK">Sistem Komputer</option> <option value="SI">Sistem Informasi</option> </select></p> </card></wml> formlistbox.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan Check Box Untuk dapat menggunakan Kontrol Check Box, Anda dapat menambahkan properti Multiple dengan nilai TRUE pada tag select. <select name=“…….” multiple=“true”> <option>…….</option> </select> BACK NEXT

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 ::."> <p align="left"> <do type="accept" label="Simpan"> <go method="post" href="#"> <postfield name="hobbi" value="$(in_hobbi)"/> </go> </do> 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 </select> </p> </card> </wml> formlistbox2.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Script PHP di dalam WML Untuk 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“>’); BACK NEXT

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 "<p> Menggunakan PHP </p>"; echo "</card>"; echo "</wml>"; ?> embeded.wml BACK NEXT

Dasar Aplikasi Pemrograman W@P Menampilkan Data <?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"> <p align="center"> <big> $tanggal=date('d-m-Y'); echo "<b><br/>Selamat datang PHP dan WML </b><br/>"; echo "Sekarang tanggal $tanggal"; </big></p></card></wml> tampildata.wml BACK NEXT

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"> <p align="center"> <?php $gaji=30000; if ($gaji <= 350000) { echo "<br/><big><b>"; echo "Gaji Rp.$gaji,- tidak memenuhi UMR Surabaya"; echo " </b></big>"; } ?></p></card></wml> logikaif.php BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan For <?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"> <p align="center"> echo "<b>Menampilkan bulan 1-12 </b><br/>"; for ($bulan=1; $bulan <= 12; $bulan++) {echo "Bulan $bulan <br/>";} </p></card></wml> looping-for.php BACK NEXT

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. BACK NEXT

Dasar Aplikasi Pemrograman W@P Menggunakan While <?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"> <p align="center"> echo "<b>Menampilkan tanggal 1-31 </b><br/>"; while ($tanggal <= 31) { $tanggal++; echo "Tanggal $tanggal <br/>";} </p></card></wml> looping-while.php BACK NEXT

Duet Maut W@P & PHP Studi Kasus, Membuat Portal Berita: CREATE DATABASE & TABLE CREATE FILE INDEX CREATE FILE DETAIL HALAMAN BERITA berita_tampil.php & berita_detailtampil.php BACK NEXT

Duet Maut W@P & PHP Studi Kasus, Membuat Buku Tamu: CREATE DATABASE & TABLE CREATE FILE INDEX CREATE FILE INSERT KE TABLE CRETAE FILE VIEW TABLE buku_tamu.wml & buku_simtamu.php & buku_tampiltamu.php BACK NEXT

Sekian Materi Pengembangan Web. Untuk Pengembangan Selanjutnya, Finish Sekian Materi Pengembangan Web. Untuk Pengembangan Selanjutnya, Terserah Anda… Kritik & Saran: ym:zakki_falani@yahoo.com END