This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Overview
Download & View Pg78 Gregorius Desain Web Dengan Adobe Golive 5 as PDF for free.
SUMBER ILMU PENGETAHUAN TANPA BATAS www.pustaka78.com Inilah situs yang selalu dicari. Akan menjadi sumber download buku digital terbesar di Indonesia. Menyediakan ribuan ebook, audio, movie, foto, dan software bermutu dalam berbagai kategori. Dijamin dapat didownload GRATIS 100%. Kunjungi sekarang juga www.pustaka78.com
Website dalam dunia bisnis tidak semata-mata hanya dimanfaatkan untuk menampilkan profil-profil, misi-visi, atau daftar jasa serta produk yang dimiliki oleh sebuah perusahaan pemiliki web itu. Jika web hanya dimanfaatkan sebatas itu saja maka pendayagunaan web itu menjadi kurang maksimal. Sebuah web akan lebih mengundang keuntungan jika web itu dijadikan lahan untuk berkomunikasi antara calon klien atau konsumen dan dengan pemilik web tersebut. Dengan demikian, web memiliki kelebihan tersendiri dibandingkan dengan brosur-brosur atau pamflet-pamflet yang disebarkan orang atau ditempelkan di dinding-dinding. Ketika seseorang mengunjungi sebuah web, ia tidak hanya berharap agar mendapat informasi tentang sebuah perusahaan sebanyak mungkin, tapi juga ingin agar ia bisa berinteraksi dengan orang-orang yang ada di balik web tersebut. Hal ini wajar saja terjadi mengingat belum tentu apa yang diinginkan seorang konsumen telah dapat dipenuhi oleh tampilan-tampilan halaman-halaman web yang tersaji. Mengingat kebutuhan konsumen mungkin akan begitu kompleks, kita harus menyediakan cara agar mereka dapat bertanya atau berinteraksi dengan kita lewat cara yang mudah dan cepat. Pada kesempatan kali ini, kita akan belajar bagaimana menyusun form. Form sendiri terdiri dari komponen-komponen yang bertugas untuk mengumpulkan informasi dari para pengunjung. Dan oleh form, informasi tersebut dikirim kepada kita dengan bantuan script tertentu. Form merupakan jawaban yang mungkin akan kita pilih jika kita ingin menciptakan interaktivitas antara pengunjung dan pemilik web.
2
8.1. Form dalam Dunia Website Form dalam dunia website pada dasarnya memiliki tugas untuk mengumpulkan data-data atau informasi lainnya dari para pengunjung. Sebut saja data tentang nama, alamat, nomor telepon, alamat e-mail, hobi, pekerjaan, penghasilan, dan sebagainya. Dalam prakteknya, form ini memiliki jasa yang besar terutama dalam bidang bisnis lewat internet. Sebuah web bisa dikatakan bagus jika ia memiliki form beserta komponen-komponen di dalamnya. Form dapat menjadi tempat bertanya bagi para pengunjung. Dan dari pihak pemilik web, form dapat diandalkan dalam pengumpulan data-data penting yang ada di dalam diri para pengunjung, seperti data demografi (usia, pendapatan, suku bangsa, jenis kelamin, dan sebagainya) serta data-data psikografi seperti hobi, cita-cita yang berkaitan dengan pekerjaan, moto hidup, dan sebagainya.
Gambar 8-1 Form Pendaftaran pada Sebuah Website
Data-data yang terkumpul itu sangat penting artinya. Pemilik web yang ingin menang dalam persaingan yang semakin ketat dewasa ini harus mengantongi data-data semacam itu. Lewat data-data itu pemilik web bisa merancang sebuah strategi untuk menggaet para pelanggan, yang biasanya berasal dari para pengunjung itu sendiri. Data-data itu harus disimpan dalam sebuah 3
sistem yang disebut Database dan keberadaannya harus benar-benar dijaga agar tidak dicuri pihak lain.
8.1.1. Mengenal Komponen-Komponen Form Dalam mengemban tugasnya untuk mengumpulkan data-data dari para pengunjung, form dibantu oleh komponen-komponen yang ada di dalamnya. Ada banyak komponen yang ada di dalam form. Standarnya, komponen form terdiri dari text-box, password field, radio button, check box, text-area, tombol submit, tombol reset, pop-up menu, hidden, dan list. Dalam beberapa kasus nama-nama komponen form di atas mungkin akan ditulis secara berbeda. Text-box juga sering dinamai text-field, pop-up menu sering disebut menu drop-down, dan lain sebagainya. Namun pada dasarnya sama saja.
Gambar 8-2 Komponen-Komponen Form
8.1.2. Cara Kerja Form Form bertugas mengumpulkan data-data dan informasi dari para pengunjung. Pertanyaan selanjutnya adalah bagaimana data-data dan informasi itu bisa sampai ke tempat kita sebagai pemilik web? Atau bagaimana data-data dan informasi itu bisa diolah dan ditampilkan lagi ke dalam website (contohnya dalam pembuatan guest book dimana data-data akhirnya ditampilkan lagi ke
4
dalam web itu)? Dalam dunia web programming, data-data dan informasi yang berhasil dikumpulkan oleh form dikirim dan diolah oleh server kepada kita dengan bantuan sebuah script server-side. Script server-side yang biasa dimanfaatkan adalah Active Server Pages (ASP), PHP, ColdFusion (CFML), Perl, dan C dengan bantuan CGI. Script-script di atas bertugas untuk mengambil informasi-informasi serta data lainnya yang dikirim oleh form. Selanjutnya script tersebut akan memutuskan apakah data-data itu akan diteruskan kepada kita dengan cara mengirimnya via e-mail, menampilkannya kembali ke dalam website, atau diolah dengan cara lain. Jika form dipakai untuk membuat guest book maka data-data serta informasi tersebut diolah oleh script agar bisa dimunculkan kembali ke dalam halaman web. Sedangkan jika digunakan untuk menampung pertanyaanpertanyaan maka script akan meneruskan data serta informasi tadi ke kita sebagai pemilik web lewat bantuan e-mail. Dalam kenyataannya, membuat script server-side yang bertugas mengolah data-data dari form semacam itu tidaklah mudah. Anda harus terjun ke dalam dunia web programming. Beberapa piranti lunak justru menyediakan jalan keluar agar data form bisa diolah tanpa bantuan script server-side, seperti MS Frontpage 2000 dengan fasilitas webbot-nya. Namun untuk pemakaian yang lebih profesional lagi, webbot tampaknya kurang memadai.
8.2. Meletakkan Form Dalam dunia HTML, form dibentuk oleh pasangan tag . Semua komponen form yang telah disebutkan di atas harus diletakkan di antara tag ini. Jika tidak, maka komponen form itu tidak bisa dipakai untuk mengumpulkan informasi dari para pengunjung, terlebih untuk mengirim informasi itu ke script server-side. Mengapa demikian? Hal ini terjadi karena tag
Atribut name dipakai untuk menamai form tersebut sedangkan action dipakai untuk menentukan script server-side mana yang akan bertugas untuk 5
mengolah data yang nanti akan dikirim form ini. Proses pengiriman data dari form menuju ke script diatur oleh atribut method yang bisa berisi dua nilai, Post dan Get. Untuk meletakkan form ke dalam halaman web Anda, ikuti langkah-langkah berikut ini :
6
1.
Bukalah jendela Object Pallete Anda.
2.
Pilihlah tab Form Elements Pallete yang memiliki tampilan seperti di bawah ini.
3.
Klik-lah icon Form yang ada di tab Form Elements Pallete di atas sebanyak dua kali. Atau, klik-lah sekali dan seretlah ia (click and drag) ke dalam halaman web Anda. Baik cara pertama maupun kedua akan mendorong sistem untuk meletakkan form ke dalam halaman web Anda.
Gambar 8-3 Meletakkan Form dengan Cara Click and Drag
4.
Sesudah Anda melakukan langkah ke-3 maka di dalam halaman web akan Anda jumpai kotak dengan tulisan “F” di sisi kiri-atasnya.
5.
Di dalam kotak itulah Anda letakkan komponen-komponen form nantinya.
7
Gambar 8-4 Kotak dengan Tulisan “F” Menandai Adanya Form di dalam Web Kita
8.2.1. Menamai Form Di dalam web Anda mungkin terdapat beberapa halaman yang sama-sama menggunakan form untuk tujuan yang berbeda-beda. Form di halaman A untuk mengisi data-data guest book sementara form di halaman B untuk mengumpulkan data-data pertanyaan, dan form di halaman C untuk keperluan lain yang lebih penting lagi. Agar Anda tidak salah mengenali satu form dengan form lainnya, ada baiknya Anda memberi nama pada tiap-tiap form. Dengan demikian Anda tahu form tersebut berfungsi untuk apa. Untuk menamai form Anda, ikutilah langkah-langkah berikut ini :
8
1.
Munculkan jendela Inspector.
2.
Klik-lah tulisan “F” yang ada di kotak form tersebut.
3.
Jendela Inspector berubah menjadi Form Inspector seperti gambar di bawah ini.
Gambar 8-5 Form Inspector
4.
Di dalam text-box Name Anda masukkan teks untuk menamai form yang bersangkutan seperti “Pertanyaan”, “Buku Tamu”, atau lainnya.
5.
Form Anda telah diberi nama.
8.2.2. Mengatur Action Atribut Action dipakai untuk menentukan script server-side mana yang akan bertugas untuk mengolah data-data dan informasi lainnya yang dikirim oleh form. Di sini Anda harus tentukan nama file yang berisi script tersebut. Untuk memasukkan nama file script server-side ke dalam form, ikuti langkah-langkah berikut ini : 1.
Pastikan Anda telah memilih form yang bersangkutan dan Form Inspector seperti gambar 8-5 di atas muncul di layar monitor.
2.
Pada bagian Action, klik-lah check-box Action di sana.
3.
Sedangkan di kotak yang ada di sebelah kanannya (bertuliskan (empty reference)) masukkan nama file script server-side yang dimaksud. Sebagai contoh, jika file yang dimaksud adalah form.asp , maka tulislah ia ke dalam kotak tersebut. Anda bisa memasukkan nama itu secara langsung, dengan cara 9
browse file, atau dengan cara point-to-file. Semua cara ini telah berulang kali kita bahas baik saat kita melakukan peletakan gambar, link, dan sebagainya. 4.
Nama file script server-side sudah berhasil didefinisikan.
8.2.3. Memilih Method Pengiriman data dan informasi dari form menuju script server-side melibatkan salah satu dari dua metode yang telah disediakan HTML, yaitu POST dan GET. Kedua metode ini bekerja dengan cara yang saling berbeda. Jika menggunakan metode POST maka data akan dikirim bersama-sama dengan HTTP Header. Kelebihan dari metode POST ini antara lain, data dan informasi yang dikirim tak bisa kita lihat sehingga aman bilamana data atau informasi tersebut mengandung sesuatu yang amat rahasia, seperti password, nomor kartu kredit, atau nama pacar. Sedangkan jika metode GET yang dipilih maka data akan dikirim menyatu dengan URL, seperti contoh di bawah ini : http://www.gilelu.com/form.asp?nama=juminten&password=minten
Pada URL di atas tampak bahwa ia membawa dua buah informasi dari form, yaitu nama yang berisi nilai “Juminten” dan password yang berisi “minten”. Kekurangan dari metode GET antara lain, jumlah data yang dikirim amat terbatas; berbeda dengan POST yang tidak terbatas. Selain itu, data yang dikirim dengan metode GET bisa diintip oleh orang lain karena muncul di jendela URL browser kita. Namun, GET memiliki kelebihan lain dibanding POST, contohnya ia bisa dipakai untuk memasukkan data yang dikirim oleh form ke dalam atribut sebuah tag secara langsung sehingga data itu menjadi nilai dari atribut yang bersangkutan. Untuk memilih metode yang telah disediakan, ikutilah langkah-langkah berikut ini : 1.
Pada jendela Form Inspector terdapat drop-down menu Method.
2.
Pilihlah salah satu metode yang ada di sana, Get atau Post .
3.
10
Action telah didefinisikan.
8.3. Memasukkan Text Field Sekarang saatnya untuk memasukkan komponen form satu per satu ke dalam halaman web kita. Komponen form pertama yang akan kita bahas kali ini adalah text-field (dimana ia sering juga disebut dengan istilah text-box). Textfield ini dalam form memegang peranan yang cukup penting. Oleh karena itu ia sering kali dipakai dan bahkan dalam pembuatan form, text-field ini selalu dilibatkan sehingga tak pernah absen dari halaman web yang mengandung form. Hal ini dapat dimaklumi mengingat text-field dipakai untuk menampung data-data dan informasi dari para pengunjung dalam wujud teks. Teks di sini sangatlah luas, ia tidak hanya dipandang sebagai huruf saja, namun juga angka dan karakter lainnya. Ia dipakai untuk mengumpulkan data-data atau informasi yang bersifat pendek dari para pengunjung seperti nama, alamat email, nomor telepon, kode pos, dan data-data pendek lainnya. Ia tidak dirancang untuk menampung data dan informasi yang panjang. Ia hanya mampu menerima satu baris data saja, dan oleh sebab itu beberapa piranti lunak menyebutnya dengan istilah one-line text-box. Untuk memasukkan text-box ke dalam halaman web, ikuti langkah-langkah berikut ini : 1.
Letakkan kursor di dalam kotak Form.
2.
Klik-lah icon Text Field yang ada di Object Pallete tab Form Elements Pallete sebanyak dua kali. Atau alternatif lainnya, klik-lah icon itu dan seretlah ia ke dalam kotak Form.
3.
Di halaman web Anda akan muncul kotak text-field tempat mengisi data-data pendek.
4.
Di depan text-field tersebut (sebelah kiri text-field) bisa Anda beri keterangan secukupnya agar orang lain tahu data apa yang mesti dimasukkan ke dalamnya. Sebagai contoh, tulislah “Nama”, “nomor telepon”, atau apa saja sesuai kebutuhan.
11
Gambar 8-6 Text-Field Nama di Halaman Web
8.3.1. Mengatur Text-Field Lewat Text-Field Inspector Dalam prakteknya, text-field yang tadi telah Anda letakkan belum bisa bekerja secara maksimal sebelum Anda melakukan modifikasi pada text-field di atas. Untuk melakukan modifikasi, akan lebih mudah bagi Anda jika Anda dibantu oleh Text-Field Inspector. Inspector ini akan muncul begitu Anda mengklik sekali pada text-field yang ada di halaman web Anda sebagai pertanda ia akan Anda pilih. Adapun bentuk text-field inspector adalah semacam ini :
12
Gambar 8-7 Text-Field Inspector
Dengan Text-Field Inspector di atas Anda bisa atur atribut-atribut text-field. Atribut-atribut text-field yang patut diperhatikan dan membawa pengaruh yang cukup penting antara lain : x Name : atribut ini dipakai untuk memberi nama pada text-field di atas. Pemberian nama ini sangat penting mengingat script server-side akan menangkap informasi dan data dari text-field berdasarkan nama-nama mereka. Untuk memasukkan nama ke dalam text-field, tinggal ketikkan teks ke dalam kotak Name
.
x Value : atribut ini dipakai apabila Anda ingin memasukkan teks secara langsung ke dalam text-field tanpa harus menunggu orang lain memasukkannya ke sana. Jika Anda menulis teks ke dalam Value ini maka teks itu akan tampak secara otomatis pada text-field Anda. Tulislah teks yang hendak Anda masukkan ke dalam text-field di kotak Value .
13
Gambar 8-8 Teks yang Anda Masukkan ke dalam Kotak Value Berpindah ke Text-Field
x Visible : Atribut ini dipakai untuk mengatur panjang text-field secara visual. Dikatakan secara visual karena panjang pendeknya text-field tidak berpengaruh terhadap seberapa banyak teks yang bisa dimasukkan ke dalamnya. Text-field yang pendek tetap bisa menampung teks dengan ukuran yang melebihi panjang text-field itu sendiri. Masukkan ukuran panjang text-field dengan memasukkan angka ke dalam kotak Visible . x Max : Atribut ini dipakai untuk membatasi panjang teks. Jika Anda memasukkan nilai dalam wujud angka di sini maka teks hanya bisa mengandung karakter sebanyak angka yang tadi Anda masukkan. Jika Anda memasukkan “6” maka teks hanya bisa sepanjang 6 karakter saja. Dan begitu seterusnya. Untuk membatasi panjang teks gunakan kotak Max
dan masukkan angkanya di sana.
x ReadOnly : Atribut ini dipakai untuk mengatur agar seorang pengunjung tidak bisa memasukkan datanya ke dalam text-field tersebut. Atribut ini bisa bekerja sama dengan atribut Value. Anda masukkan teks secara otomatis lewat atribut Value dan dengan atribut ReadOnly ini text-field yang telah terisi teks lewat atribut Value itu tidak bisa diganti, hanya bisa
14
dibaca saja. Klik-lah check-box ReadOnly text-field tersebut hanya bisa dibaca saja.
jika Anda ingin
8.4. Memasukkan Password Field Password field ini sama dengan text-field hanya saja ia berbeda dalam hal bagaimana ia menampilkan teks yang dimasukkan oleh pengunjung ke dalamnya. Sesuai namanya, password field ini bertugas untuk mengumpulkan data-data atau informasi lainnya yang bersifat rahasia, seperti password misalnya. Karena bersifat rahasia maka password field ini dirancang agar setiap teks yang dimasukkan ke dalamnya tak bisa dibaca orang lain dan bahkan oleh si pengisi password field tersebut. Hal ini untuk mencegah agar apa yang ditulis oleh si pengisi tidak bisa dibaca orang lain. Semua teks yang diletakkan di dalamnya akan dirubah secara visual dengan karakter asterisk (*). Untuk meletakkan password field ke dalam halaman web, Anda bisa menggunakan dua cara yang saling berbeda. Cara I, Anda menggunakan Object Pallete sedangkan cara II dengan memodifikasi text-field yang tadi telah Anda masukkan sebelumnya.
8.4.1. Memasukkan Password Field Cara I Cara I ini memungkinkan Anda memasukkan password field lewat Object Pallete. Langkah-langkah yang bisa Anda tempuh untuk memasukkan password field lewat cara ini adalah sebagai berikut : 1.
Letakkan kursor di dalam kotak Form.
2.
Klik-lah icon Password sebanyak dua kali atau klik-lah sekali kemudian seretlah ia ke dalam kotak form halaman web Anda.
3.
Di dalam halaman web Anda akan muncul password-field yang sekilas mirip text-field.
4.
Beri keterangan di depan password field itu, seperti tulisan “Password” atau lainnya.
15
Gambar 8-9 Password Field di Halaman Web Anda
8.4.2. Memasukkan Password Field Cara II Bila Anda menggunakan cara II ini pastikan bahwa Anda sudah meletakkan text-field yang akan dimodifikasi menjadi password terlebih dulu. Selanjutnya, pada Text-Field Inspector, klik-lah checkbox Is Password Field sehingga dalam keadaan tercentang. Sesudah itu, text-field tadi telah menjadi password field. Setiap teks yang ada di dalamnya akan berganti wujud secara visual menjadi karakter bintang.
16
Gambar 8-10 Text-Field yang Telah Berubah Menjadi Password Field Akan Merubah Semua Teks Secara Visual Menjadi Tanda Asterisk (Bintang)
8.4.3. Mengenal Atribut-Atribut Password Field Atribut-atribut password field diatur oleh Password Field Inspector. Tidak ada hal yang istimewa di dalam atribut-atribut password field karena semuanya mirip dengan atribut-atribut text-field terkecuali pada tipenya dimana text-field tidak akan mengganti teks menjadi asterisk secara visual. Anda bisa lihat bahwa di dalam Password Field Inspector, bagian Is Password Field dalam keadaan tercentang.
17
Gambar 8-11 Password Field Inspector
8.5. Memasukkan Text-Area Text-area ini hampir sama dengan text-field. Hanya saja ia bisa menampung teks lebih banyak lagi. Ia sangat ideal untuk mengumpulkan informasi dari para pengunjung yang diduga akan memakan tempat luas karena ditulis secara panjang dan lebar, seperti misalnya komentar, kata-kata mutiara, pesan, dan kritikan. Karena tugasnya yang demikian itu maka text-area ini memiliki ukuran fisik lebih panjang dan lebar dibanding text-field. Untuk memasukkan text-area ke dalam halaman web Anda, lakukan langkahlangkah berikut ini :
18
1.
Letakkan kursor di dalam kotak form.
2.
Klik-lah icon Text-Area yang ada di Object Pallete bagian Form Elements Pallete sebanyak dua kali. Atau, klik-lah sekali dan seretlah ia ke dalam kotak form halaman web Anda.
3.
Di dalam halaman web Anda akan muncul text-area yang besar.
4.
Tulislah keterangan di depannya seperti “Komentar” atau apa saja sesuai kebutuhan.
Gambar 8-12 Text-Area Sangat Ideal Untuk Menampung Teks yang Panjang dan Lebar
8.5.1. Mengatur Atribut-Atribut Text-Area Agar kerja text-area bisa lebih maksimal lagi, Anda wajib mengatur atributatribut yang ada di dalamnya. Untuk mengatur atribut text-area ini akan lebih mudah jika Anda menggunakan Tex-Area Inspector. Caranya adalah dengan mengklik text-area tersebut sehingga jendela Inspector akan menjadi jendela Text-Area Inspector seperti gambar di bawah ini :
Gambar 8-13 Tampilan Jendela Text-Area Inspector
19
Ada beberapa atribut yang patut Anda perhatikan, yaitu : x Name : Atribut ini sangat penting karena script server-side akan mengolah data dan informasi dari text-area berdasarkan nama ini. Masukkan nama yang Anda inginkan untuk menamai text-area ini ke dalam kotak Name
.
x Rows : Atribut ini dipakai untuk mengatur berapa lebar text-area tersebut. Lebar text-area ditentukan oleh berapa banyak baris teks yang bisa dimunculkan di sana. Lebar text-area ini tidak berpengaruh terhadap banyak tidaknya teks yang bisa ditampung. Ia hanya akan mengatur lebar text-area secara visual. Masukkan lebar text-area ke dalam kotak Row .
dengan satuan jumlah baris
x Columns : Atribut ini dipakai untuk mengatur berapa panjang text-area tersebut. Panjang pendeknya text-area ditentukan oleh berapa banyak karakter yang bisa ditampilan oleh text-area tersebut. Satu karakter akan menghabiskan satu kolom sehingga jika Anda isi dengan nilai 40 kolom maka panjang text-area itu sama dengan empat puluh karakter. Masukkan .
panjangnya ke dalam kotak Columns
x Wrap : Atribut ini dipakai untuk memotong teks menjadi beberapa baris jika teks itu lebih panjang daripada text-area. Ada beberapa pilihan yang bisa Anda ambil. Jika Anda memilih Off maka teks tidak akan terpotong meski telah melampaui panjang text-area. Sebagai gantinya text-area akan memunculkan tombol scrolling horizontal. Jika Anda memilih Virtual maka teks akan dipotong secara virtual jika lebih panjang daripada textarea. Arti dipotong secara virtual adalah teks itu hanya terlihat terpotong di layar monitor namun sebenarnya ia tidak terpotong. Sedangkan apabila Anda memilih Physical maka teks itu akan benar-benar terpotong. Pilihlah nilai yang ada di atribut Wrap ini pada menu drop-down Wrap . x Content : Atribut ini berfungsi sama dengan atribut Value yang ada di text-area, yaitu meletakkan teks secara otomatis ke dalam text-area. Masukkan teks yang ingin Anda masukkan ke dalam text-area lewat kotak
Content ini 20
.
Gambar 8-14 Apa yang Tertulis di Atribut Content Muncul di Text-Area
x ReadOnly : Atribut ini berfungsi sama dengan atribut ReadOnly yang ada di text-field, yaitu membuat agar text-area hanya bisa dibaca saja tanpa bisa ditulisi. Klik-lah checkbox ReadOnly jika Anda ingin menggunakannya.
8.6. Meletakkan Check Box Check box merupakan salah satu komponen form yang telah sering kita sebut di dalam buku ini. Ia berbentuk kotak kecil dan jika kita klik tombol kiri mouse kita ke dalam kotak tersebut, tanda centang akan mengisi kotak kecil itu. Dalam prakteknya, check box sering dipakai untuk mengumpulkan data dan informasi dari para pengunjung dalam wujud pilihan. Berbeda dengan text-field, password field, dan text-area dimana para pengunjung wajib mengisi informasi dalam wujud teks ke dalamnya, dalam check box pengunjung hanya perlu memilih pilihan yang tersedia secara tepat. Model check box mirip dengan multiple choice dalam ujian ebtanas atau lainnya. Hanya saja para pengunjung bisa mengambil lebih dari satu pilihan. Jika check box itu dalam keadaan tercentang maka ia dalam keadaan terpilih. Bilamana check box berada dalam keadaan terpilih maka form akan mengirim data atau informasi yang ada di dalamnya ke script server-side.
21
Untuk meletakkan check box ke dalam form, lakukan langkah-langkah berikut ini : 1.
Letakkan kursor di dalam kotak form
2.
yang ada di Object Pallete bagian Klik-lah icon Check Box Form Elements Pallete sebanyak dua kali. Atau, klik-lah ia dan seretlah ke dalam kotak form halaman web Anda.
3.
Jika Anda menginginkan lebih dari satu check box maka lakukan langkah ke-2 berulang kali sampai didapat jumlah check box yang sesuai.
4.
Berilah keterangan pada masing-masing check box. Setiap check box yang Anda letakkan akan mewakili satu pilihan bagi para pengunjung.
5.
Check box telah terpasang di dalam halaman web Anda.
Gambar 8-15 Tiga Buah Check Box Diletakkan ke dalam Form
8.6.1. Mengatur Atribut Check Box Atribut-atribut yang ada di dalam check box yang telah kita letakkan tadi harus kita modifikasi lebih lanjut agar setiap check box mengirim data atau informasi yang ada di dalamnya begitu ia dipilih oleh pengunjung. Untuk 22
mengatur atribut check box Anda wajib menggunakan jendela Check Box Inspector yang akan muncul jika Anda mengklik salah satu check box yang ada di halaman web Anda.
Gambar 8-16 Check Box Inspector
Atribut-atribut yang penting dalam check box antara lain : x Name : Nama ini wajib diisikan. Script server-side akan menerima data dari check box berdasarkan nama ini. Jika Anda meletakkan check box dalam jumlah banyak namun semuanya masih dalam satu kategori maka Anda wajib menamai semua check box dengan nama yang sama. Sebagai misal, check box yang telah kita buat tadi memiliki satu kategori yang sama, yaitu kendaran maka Anda wajib menamai semua check box itu .
dengan nama “Kendaraan”
x Value : Mengingat pengunjung tidak memasukkan data atau informasi ke dalam check box ini maka sebagai gantinya data atau informasi itu diletakkan di dalam atribut value. Jika check box yang bersangkutan dipilih maka data atau informasi yang ada di dalam atribut value check box yang bersangkutanlah yang akan dikirim ke script server-side. Masukkan data atau informasi tersebut ke kotak Value . x Selected : Atribut ini dipakai untuk mengatur apakah check box akan diset dalam keadaan terpilih secara otomatis atau tidak. Jika Anda
23
mengklik Selected ini maka check box yang bersangkutan akan ikut terpilih secara otomatis
.
Gambar 8-17 Check Box Pertama Tercentang Secara Otomatis
8.7. Meletakkan Radio Button Radio button mirip dengan check box. Ia berbentuk lingkaran dan di dalamnya terdapat lingkaran yang lebih kecil lagi dengan warna hitam jika ia Anda pilih. Radio button ini memiliki fungsi berbeda dengan check box. Jika check box dirancang untuk menawarkan banyak pilihan dimana para pengunjung bisa mengambil lebih dari satu pilihan maka radio button ideal untuk menyajikan pilihan dimana para pengunjung hanya bisa mengambil salah satu pilihan yang ada. Oleh karena itu, jika satu pilihan diambil maka pilihan lain akan ditinggalkan, dan seterusnya. Radio button ini bekerja dengan cara yang sama dengan check box. Ia akan mengirim data atau informasi yang tersimpan di dalam atribut value jika radio button ini dipilih. Untuk meletakkan radio button, lakukan langkah-langkah berikut ini : 1.
24
Letakkan kursor di dalam kotak form
2.
Klik-lah icon Radio Button yang ada di Object Pallete bagian Form Elements Pallete sebanyak dua kali. Atau, klik-lah ia dan seretlah ke dalam kotak form halaman web Anda.
3.
Jika Anda menginginkan lebih dari satu radio button maka lakukan langkah ke-2 berulang kali sampai didapat jumlah radio button yang sesuai.
4.
Berilah keterangan pada masing-masing radio button. Setiap radio button yang Anda letakkan akan mewakili satu pilihan bagi para pengunjung.
5.
Radio Button telah terpasang di dalam halaman web Anda.
Gambar 8-18 Tiga Buah Radio Button Diletakkan Di Halaman Web
8.7.1. Mengatur Atribut Radio Button Sama halnya dengan check box, radio button juga memiliki atribut-atribut yang harus disetting terlebih dulu sebelum ia bisa bekerja secara maksimal. Untuk menset atribut yang ada di radio button, Anda akan mendapat kemudahan jika menggunakan Radio Button Inspector. Klik-lah salah satu radio button dan Radio Button Inspector seperti gambar di bawah ini akan muncul di layar monitor Anda.
25
Gambar 8-19 Radio Button Inspector
Atribut-atribut yang bisa Anda atur antara lain adalah sebagai berikut : x Group : Semua radio button yang masih dalam satu kategori wajib dinamai dengan nama yang sama. Anda bisa memasukkan nama tersebut . Sebagai contoh, ke dalam kotak Group radio button di atas memiliki kategori yang sama, yaitu jumlah roda maka Anda bisa menamai semua radio button di atas dengan nama “Roda”. Jika Anda memasukkan nama ke dalam kotak Group ini maka ia akan tersimpan ke dalam Group. x Value : Mengingat radio button tidak menerima masukan data atau informasi dalam wujud teks seperti text-field maka data atau informasi yang nanti akan dikirim ke script server-side wajib diletakkan di dalam atribut value ini. Anda bisa memasukkan data atau informasi masingmasing radio button ke kotak Value
.
x Selected : Atribut ini dipakai untuk mengatur apakah sebuah radio button akan dibuat dalam keadaan terpilih secara otomatis atau tidak. Jika semua radio button masih dalam satu nama (group) maka hanya ada satu radio button yang bisa dipilih dalam sekali waktu.
8.8. List dan Pop-Up Menu Teknik list dan pop-up menu hampir sama dengan radio button dan check box. Di sini pengunjung akan ditawari daftar pilihan yang bisa diambil salah 26
satunya oleh pengunjung. Pilihan-pilihan itu disajikan kepada pengunjung dalam wujud menu. List dan Pop-Up Menu sendiri memiliki kemiripan. Bedanya, List memungkinkan seorang pengunjung mengambil lebih dari satu pilihan sementara Pop-up menu tidak memungkinkan. Namun di antara keduanya pada dasarnya memiliki bentuk yang sama. Untuk meletakkan pop-up menu dan list ke dalam halaman web Anda, ikuti langkah-langkah berikut ini : 1.
Letakkan kursor di dalam kotak form
2.
Jika Anda ingin meletakkan pop-up menu, klik icon Pop Up sebanyak dua kali. Dan jika Anda ingin meletakkan list, klik icon sebanyak dua kali. Keduanya bisa juga Anda letakkan List dengan cara click and drag seperti komponen-komponen form lainnya.
3.
Berilah keterangan di dekat pop up menu atau list tersebut supaya pengunjung tahu apa yang seharusnya ia pilih.
4.
Pop up dan list telah dimasukkan ke dalam halaman web Anda.
Gambar 8-20 Pop-Up (Atas) dan List (Bawah) dalam Halaman Web
27
8.8.1. Mengatur Atribut-Atribut Pop-Up Menu dan List Pop-up menu dan list berisi sederet pilihan-pilihan yang bisa diambil salah satunya, beberapa diantaranya, atau justru semuanya (dua yang terakhir hanya bisa dijalankan jika Anda menggunakan list). Untuk meletakkan pilihan-pilihan itu dan untuk mengatur atribut-atribut lainnya yang ada pada pop-up menu serta list, Anda wajib menggunakan PopUp Menu Inspector dan List Inspector. Tampilan keduanya sama, yaitu seperti gambar di bawah ini.
Gambar 8-21 Pop-Up dan List Inspector
Adapun atribut-atribut yang perlu diperhatikan di sini adalah : x Name : Atribut ini dipakai untuk menamai pop-up dan list menu yang tadi Anda letakkan. Wajib diisi mengingat script server-side akan menerima data yang dikirim pop-up dan list menu berdasarkan nama ini. x Rows : Atribut ini berguna untuk mengatur berapa lebar pop-up dan list menu. Jika Anda mengisinya dengan nilai 1 maka hanya pilihan nomor satu saja yang tampak di dalam halaman web. Sisanya baru bisa Anda lihat jika Anda menekan tombol anak panah kecil dimana semua pilihan akan dikeluarkan. Isilah nilai yang Anda inginkan ke dalam kotak Rows . x Multiple Selection : Atribut ini dipakai untuk merubah pop-up menu menjadi list dan sebaliknya. Jika Anda mengklik check box multiple selection maka pop-up menu menjadi list dan begitu juga sebaliknya. List 28
bisa menerima pengambilan lebih dari satu pilihan sementara pop-up menu tidak
.
8.8.2. Memasukkan Pilihan ke dalam Pop-Up dan List Menu Jika atribut-atribut di atas telah Anda set dengan baik maka sekarang saatnya untuk memasukkan pilihan-pilihan ke dalam pop-up dan list menu. Di dalam HTML, pilihan-pilihan yang ada di dalam pop-up dan list menu diatur oleh tag