1 MODUL 2 Form dan JSP TUJUAN PRAKTIKUM : 1. Praktikan mampu mendeskripsikan cara pengiriman data ke server melalui form 2. Praktikan mengetahui eleme...
MODUL 2 Form dan JSP TUJUAN PRAKTIKUM : 1. Praktikan mampu mendeskripsikan cara pengiriman data ke server melalui form 2. Praktikan mengetahui elemen-elemen dari form 3. Praktikan mengetahui Control Text dan penggunaannya pada form 4. Praktikan mengetahui Push Button dan penggunaannya pada form 5. Mengetahui Check Button dan Radio Button, serta penggunaannya pada form 6. Mengetahui Combo Box dan List Box, serta penggunaannya pda form
PERLENGKAPAN PRAKTIKUM 1. Modul Praktikum 2. Eclipse Indigo atau Helios 3. Apache Tomcat Server 7.0 4. Browser (Chrome atau Mozilla Firefox)
LANDASAN TEORI HTML Forms menyediakan bentuk interface atau antarmuka pengguna yang sederhana dan dapat diandalkan dalam mengumpulkan data dari user dan mengirimkan data ke servlet atau jenis server lain untuk diproses lebih lanjut. Dalam modul ini, akan diberikan beberpa contoh bentuk standard control pada form yang didefinisikan dengan HTML 4.0. Selain itu, akan dijelaskan juga bagaimana data form dikirim ke server dengan menggunakan request GET atau POST. Server yang digunakan untuk mengakses form ke web server adalah Apache Tomcat 7.0. 1. Pengiriman Data dan HTML Form HTML form merupakan salah satu variasi user interface yang mengumpulkan input pada halaman web. Setiap kontrol biasanya memiliki nama dan nilai, di
mana nama ditentukan oleh HTML dan nilai berasal dari input (masukan) pengguna atau default nilai dalam HTML. Seluruh formulir akan dikaitkan dengan URL dari program yang akan memproses data, dan ketika pengguna melakukan submit (dengan menggunakan tombol), nama-nama dan nilai-nilai dari tombol-tombol control dikirim ke URL yang digunakan sebagai bentuk string. name1=value1&name2=value2...nameN=valueN Bentuk String ini dapat dikirim ke pengguna melalui 2 cara yaitu dengan GET atau POST. Metode pertama, HTTP GET request, menambahkan data pada formulir sampai akhir URL yang ditandai dengan tanda tanya. Metode kedua HTTP POST request mengirimkan data setelah header HTTP request dan baris kosong. Dalam modul ini akan ditunjukkan bagaimana data dikirim ke server melalui GET dan POST. Pertama, akan dijelaskan terlebih dahulu bagaimana method HTTP Get Request. Selain itu, akan diberikan contoh HTML code form sederhana dengan dua textfield seperti di bawah ini.
Hasil outputnya
Jika tombol Submit diklik, maka akan muncul
Ada beberapa hal yang diperhatikan dalam HTML code di atas. Pertama, amati bahwa satu textfield memiliki nama namaPraktikan dan textfield yang lain memiliki nama nim. Kedua, perhatikan bahwa GUI control merupakan elemen level teks (inline), sehingga perlu menggunakan format HTML secara eksplisit untuk memastikan bahwa controls muncul berupa textfield. Terakhir, perhatikan bahwa elemen FORM menunjuk pada alamat http://localhost:8081/PraktikumModul2/GetForm.html sebagai URL data yang akan dikirim. Ketika formulir dikirimkan dengan value LabProdase di textfield pertama dan value URL
116090053
di
textfield
kedua,
browser
meminta
http://localhost:8080/modul2WebPro?namaPraktikan=Lab+Prodase&nim=116090 053. Selanjutnya akan ditunjukkan HTML code dengan menggunakan method HTTP POST request. Seperti sebelumnya pada HTTP GET request akan mengirimkan value Joe di textfield pertama dan value Hacker di textfield kedua ke browser. Perbedaannya dengan HTTP GET request adalah value tersebut dikirim ke browser pada baris terpisah setelah header HTTP request dan baris kosong, bukan pada URL data yang akan dikirim. GUI control mengumpulkan data dari pengguna, kontrol masing-masing memiliki nama dan nilai, dan string yang berisi semua nama/nilai yang akan dikirim ke server. Sehingga browser meminta URL http://localhost:8080/modul2WebPro.
Kode program
Hasil output
2. Elemen Form HTML Form memungkinkan kita untuk membuat satu set elemen input data yang terhubung dengan URL tertentu. Masing-masing elemen ini biasanya diberi nama dalam HTML source code, dan masing-masing memiliki value. Semua nama dan nilai yang terdapat pada form akan dikumpulkan menjadi string yang berpasangan antara nama dan nilai yang diteruskan ke URL yang ditunjuk oleh elemen form. Penambahan string ke URL bisa ditambahkan setelah tanda tanya atau dikirim
pada baris terpisah setelah Header HTTP Request dan baris kosong, tergantung menggunakan method GET atau POST. Dalam bagian ini akan dijelaskan elemen-elemen pada FORM yang digunakan untuk menunjuk URL dan memilih metode pengiriman. HTML Element : Atribut : ACTION, METHOD, ENCYPTE, TARGET, ONSUBMIT, ONRESET, ACCEPT, ACCEPT-CHARSET Unsur form menciptakan area untuk elemen input data dan menunjuk URL dimana setiap data dikumpulkan dan dikirm. Sebagai contoh : Berikut akan dijelaskan elemen-elemen dari form seperti yang telah disebutkan sebelumnya. A. ACTION Atribut Action berfungsi untuk menentukan URL dari program server-side yang akan memproses data form. Jika program server-side terletak pada server yang sama dengan HTML, maka lebih baik menggunakan URL yang relatif. Perbedaan server ini akan memungkinkan servlet dapat mengakses host yang berbeda tanpa perlu mengedit URL terlebih dahulu. Disinilah letak kegunaan dari Action, yaitu untuk menentukan URL yang beda antara data form dengan form itu sendiri. B. METHOD Atribut Method menentukan bagaimana data akan ditransmisikan ke HTTP server. Ketika Method GET digunakan, maka data akan ditambahkan ke URL yang ditunjuk setelah tanda tanya. Penambahan ini dilakukan secara default pada URL di address bar. Sedangkan ketika Method POST digunakan, data dikirim pada baris terpisah. Penggunaan kedua method ini disesuaikan dengan kebutuhan dan situasi user. Berikut keuntungan penggunaan method GET adalah 1. menyimpan hasil dari form yang dikirm,
2. kemudahan dalam pengujian servlets atau halaman JSP hanya dengan memasukkan URL. Sedangkan beberapa keuntungan dari method POST adalah 1. memungkinkan user mengirimkan data dalam jumlah besar, 2. dapat mengirimkan data biner, seperti spasi, enter, tab, dsb, dan 3. menjauhkan dari kemungkinan pengguna dapat melihat data pribadi pengguna lain. C. ENCTYPE Atribut ini menentukan cara di mana data akan dikodekan sebelum ditransmisikan atau dikirimkan. Untuk dapat menggunakan enctype ini, maka method POST yang digunakan. Pengkodean ini biasanya mempermudah program dalam menangani data yang kompleks, dan digunakan untuk mengupload sebuah file atau dokumen ke dalam sebuah form. D. TARGET Atribut ini digunakan untuk membatasi kemampuan browser hanya untuk melakukan hal tertentu seperti menampilkan hasil servlet, halaman JSP, atau pengiriman form. Default yang biasa digunakan adalah hanya menampilkan form beserta hasilnya. E. ONSUBMIT atau ONRESET Atribut ini digunakan oleh JavaSript untuk melaporkan kode yang harus dievaluasi atau diatur ulang ketika form dikirimkan. Untuk ONSUBMIT, jika ekspresi bernilai salah (false), maka form tersebut tidak akan disampaikan. Dalam hal ini memungkinkan user menjalankan kode JavaScript untuk memeriksa nilai isian formulir agar sesuai format, sehingga isian atau entri hilang atau ilegal. F. ACCEPT atau ACCEPT-CHARSET Atribut ini merupakan atribut baru dalam HTML 4.0 untuk menentukan jenis dan karakter pengkodean yang dapat diterima oleh servlet, maupun program lain yang memproses data form. Selain itu, juga digunakan untuk membatasi jenis file yang akan ditampilkan ke pengguna atau user.
3. Control Text A. Kontrol Text Kontrol Text digunakan untuk memberikan input atau masukan berupa kota kisian. Sintaksnya: Property dari control text : Contoh control
Contoh control text: <metahttp-equiv="Content-Type"content="text/html; charset=ISO_8859-1"> Contoh control text Contohpenggunaankontrol text
Hasilny
B. Control Password Contoh control password: <metahttp-equiv="Content-Type"content="text/html; charset=ISO8859-1"> Insert title here Contohkontrol password Hasilnya :
C. Control area Kontrol text area merupakan kontrol text yang dapat menuliskan text lebih banyak karena memiliki ruang / kapasitas lebih besar dibandingkan dengan kontrol text. Sintaksnya adalah sebagai berikut : Propertinya adalah:
Contoh control text: <metahttp-equiv="Content-Type"content="text/html; charset=ISO8859-1"> Contoh text Area Contoh Text Area
Hasilnya
D. Kontrol Image Kontrol image digunakan untuk mengelola/mengolah gambar. Sintaksnya adalah sebagai berikut : Properti dari control image adalah :
4. Push Button Kontrol button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur/event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu button, submit, reset. •
Button digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari vb script.
•
Submit digunakan untuk mengirim data-data ke server, serta
•
Reset digunakan untuk menghapus data-data yang ada pada suatu form.
Sintaksnya dari masing-masing tipe di atas adalah sebagai berikut :
Contoh 2 : <metahttp-equiv="Content-Type"content="text/html; charset=ISO-8859-1"> Insert title here
Click the Button to have the servlet send an HTML Document
Hasilnya
5. Check Button dan Radio Button Radio Button dan Check Button merupakan komponen dalam form. Check Button dan Radio Button digunakan sebagai inputan untuk disimpan dalam sebuah data base. Namun keduanya memiliki fungsi yang berbeda. Checkbox digunakan apabila dalam menu pilihan tersebut, user dapat memilih lebih dari satu pilihan. Misalkan dalam sebuah formulir user diharuskan mengisi hobi, maka disana terdapat checkbox karena kita tidak hanya mempunyai satu hobi. Sedangkan radio button digunakan apabila dalam menu yang boleh dipilih hanya satu. Contoh dari radio button adalah pemilihan jenis kelamin, pada jenis kelamin hanya bisa dipilih pria atau wanita. Contoh kode program Radio Button dan Check Button
Output program
6. Combo Box dan List Box A. Combo Box Combo box merupakan komponen form yang memungkinkan pengguna untuk memilih item dari sebuah kelompok. Pengguna dapat memilih pilihan ataupun melakukan pengetikkan pilihan. Sebuah combo box memiliki bentuk sebagai kotak teks dan memiliki panah di sisi kanan sebagai control.Kontrol panah memungkinkan pengguna untuk menampilkan daftar item yang disembunyikan oleh sisi teks dari Combo box. Ketika daftar pilihan ditampilkan, pengguna hanya dapat memilih salah satu item dari daftar. Tag yang digunakan untuk membuat Combo box adalah tag <select> dan diakhiri dengan tag . Di dalam tag <select>, terdapat item pilihan. Item pilihan ditulis menggunakan tag . Contoh Kode program Combo Box
Output kode program
B. List Box Digunakan untuk menampilkan daftar pilihan yang dapat bergeser. Suatu listbox digunakan jika jumlah pilihan cukup banyak, sehingga menjadi tidak efektif jika menggunakan Option maupun Check box. List Box mengandung sejumlah item dan user dapat memilih lebih dari satu (bergantung pada property multi select). Contoh kode program list box Scrollable Select Option. Pada listbox ini, telah ditentukan ukuran dari banyaknya pilihan pada listbox. Penentuan ukuran ini menggunakan command “size” di dalam tag <select>, contohnya Contoh
Contoh kode program list box (multiple option). Pada listbox ini, telah ditentukan ukuran dari banyaknya pilihan pada listbox. User dapat memilih lebih dari 1 pilihan pada listbox dengan menggunakan command “multiple” di dalam tag <select>. User memilih lebih dari 1 pilihan dengan menggunakan shift+click.
Output kode program List Box
Perbedaan dari Combo Box dan List Box adalah Dalam Combo Box: -
User dapat mengisi nilai yang baru
-
User dapat mengisi nilai pada bagian atas kotak
-
User bisa memasukkan pilihan melalui daftar/menuliskannya
-
User dapat memilih lewat daftar drop-down
User hanya dapat memilih 1 pilihan Dalam List Box: -
Pencarian data pada item
-
Menampilkan daftar pilihan yang bisa di drop down
-
Menampilkan daftar item yang dapat dipilih salah satu oleh user
-
User dapat memilih lebih dari 1 pilihan
Jurnal Modul 2 Buatlah suatu form reservasi tiket pesawat sederhana pada website pesawat dengan method get, kemudian coba rubah menggunakan method post. Jelaskan perbedaan dari kedua method tersebut kepada asisten!
LANGKAH-LANGKAH PENGERJAAN
1. Import template yang sudah ada. Caranya: Klik “File”, kemudian pilih “Import”.
Pilih “Existing Projects into Workspace”.
Browse pada “Select root directory”. Pilih folder template tersebut dan Klik “OK”.
Kemudian klik “Finish”.
2. Setelah meng-import template, buatlah file JSP baru di dalam template tersebut.
Isikan nama file JSP tersebut. Misalkan reservasi_kereta.jsp
3. Buka reservasi_kereta.jsp, kemudian isikan halaman JSP tersebut seperti yang dibawah.
4. Buat lagi file pesan_kereta.jsp dan isikan halaman JSP tersebut seperti yang dibawah.
5. Buat lagi file hasil_kereta.jsp dan isikan halaman JSP tersebut seperti yang dibawah.
6. Kemudian jika di Run maka hasilnya adalah seperti di bawah ini: reservasi_kereta.jsp
