1 / 65

Modul Pengembangan Sistem Informasi

Modul Pengembangan Sistem Informasi. Dosen: Zakki Falani, S.Kom Fakultas Ilmu Komputer Universitas Narotama. NEXT. Mobile Programming. Kehadiran : 10 % Tugas : 30 % UTS : 30 % UAS : 30 %.

bina
Download Presentation

Modul Pengembangan Sistem Informasi

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ModulPengembangan Sistem Informasi Dosen:Zakki Falani, S.KomFakultas Ilmu KomputerUniversitas Narotama NEXT

  2. Mobile Programming • Kehadiran : 10 % • Tugas : 30 % • UTS : 30 % • UAS : 30 %

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

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

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

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

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

  8. Dasar Aplikasi Pemrograman W@P Terdapat tiga bagian utama dalam akses WAP yaitu: • perangkat wireless yang mendukung WAP, • WAP Gateway sebagai perantara, dan • Webserver sebagai sumber dokumen. BACK NEXT

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

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

  11. WAP Gateway digunakan untuk encoding dan decoding data yang dikirim dari dan ke client. Tujuan encoding ke clientadalah 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 BACK NEXT

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

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

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

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

  16. 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. Pengenalan W@P (Konfigurasi Web Server) I BACK NEXT

  17. 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. Pengenalan W@P (Konfigurasi Web Server) II BACK NEXT

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

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

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

  21. Dasar Aplikasi Pemrograman W@P • Referensi: http://www.w3schools.com/wap/wap_intro.asp BACK NEXT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  49. 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 &nbsp;&nbsp;: <input type="text" name="in_judul" maxlength="25"/> Berita &nbsp;&nbsp;: <input type="text" name="in_berita" maxlength="100"/> </p> </card> </wml> formteks.wml BACK NEXT

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

More Related