Presentasi proyek 4 formulir survei web/html siswa
Anggota Kelompok Dwini Andriani 021110029 Hendra Muda Nasution 021110019 Riza Yanuar 021110013
Tujuan Pembelajaran Memahami bagaimana formulir menangkap informasi dari para pengguna halaman web. Memahami penggunaan kotak teks dan area teks untuk mendapatkan input ketikan dari pengguna. Mengetahui bagaimana membuat tombol radio dan kotak cek untuk mendapatkan input dari pengguna melalui klik mouse. Mengetahui bagaimana membuat sederet pilihan dari menu drop down.
Pendahuluan Proyek ini mengasumsikan bahwa anda memiliki beberapa pengetahuan mengenai hypertext markup languange (HTML) dan bagaimana menggunakan Notepad sebagai editor teks, dimana proyek ini akan mempelajari konsep-konsep Web/HTML, proyek ini pun menampilkan contoh tahap demi tahap yang menggambarkan berbagai teknik dan konsep yang dibutuhkan untuk membuat halaman Web di Notepad.
Pembahasan Proyek ini ditujukan untuk membuat formulir, tetapi tidak menyediakan intruksi kepada browser (penjelajah) Web untuk memproses hasil dari formulir. Informasi dari sebuah formulir biasanya dikirimkan melalui e-mail atau dimasukkan ke dalam basis datanya. Tidak terlalu sulit untuk membuat respons untuk formulir e-mail. Dan anda pun dapat menggunakan jasa gratis yang mengirimkan jawaban formulir ke e-mail anda. Response-O-matic (WWW.RESPONSE-O-MATIC.COM) adalah layanan terkenal yang gratis dan mudah digunakan.
Contoh Pada contoh ini kita dituntun untuk membuat dokumen Notepad berupa formulir survei yang akan disimpan dalam bentuk Hypertext Markup Languange (HTML) sehingga dapat digunakan sebagai halaman web. Pembuatan formulir ini mewakili lima teknik yang paling umum untuk mencatat informasi dari sebuah situs web. (contoh terlampir pada slide tahap pembuatan formulir).
Teknik Teknik yang pertama adalah field teks (misalnya untuk field “Name”) di mana pengguna mengetikkan sebaris data. Teknik yang kedua adalah tombol radio (misalnya “Year in School”). Tombol radio digunakkan ketika jawaban-jawaban yang memungkinkan saling melengkapi. Kotak cek (“Live on campus?” dan “Do you own a car?”) serupa dengan tombol radio, tetapi pengguna dapat memilih satu atau lebih pilihan.
Tahap pembuatan formulir Penjelasan Tahap pembuatan formulir
Penjelasan Area teks memungkinkan beberapa barisan ketikan; sedangkan field teks hanya memungkinkan satu baris saja. Sebuah area teks dapat menampung sederet alamat e-mail, tetapi perusahaan dapat memecah-mecah alamat menjadi beberapa bagian menggunakan field teks. Pilihan jenis field harus ditentukan oleh bagaimana perusahaan tersebut ingin menampilkan formulir tersebut dan menggunakn informasi yang dikumpulkan. Page 1 of 2
Penjelasan Masing-masing field input memiliki paling tidak dua karakter: sebuah nama field dan sebuah nilai. Field dapat dinamai ’’SchoolYear”; nilainya bisa jadi “FR”, “SO”, “JR”, atau “SR”. Pengguna dapat melihat informasi yang ditampilkan di layar komputer, tetapi komputer mengenali nama field dan nilai yang dialokasikan untuk field tersebut. Page 2 of 2
Tahap Pembuatan/Bagian-bagiannya Mulailah dengan menuliskan ini <HTML> </HTML> Masing-masing baris di atas disebut tag (sekali lagi kita pakai istilah aslinya). Ada tag pembuka dan ada tag penutup. Untuk menuliskan tag penutup cukup tambahkan / di depan tag pembuka. Sebagian besar, tapi tidak semua, tag memiliki tag penutup. Anggaplah tag ini sebagai cara kita berbicara dengan browser, atau lebih tepat memberikan perintah. Yang baru saja anda katakan pada browser adalah "ini adalah awal dokumen HTML" (<HTML>) dan "ini adalah akhir dokumen HTML" (</HTML>).
LINE06 <form> LINE……. LINE47 </form> Formulir ini tidak jauh berbeda dengan proyek-proyek sebelumnya, perbedaan yang paling signifikan adalah pada baris 6 dan 47 dari kode HTML yang digunakan untuk membuat formulir tersebut
LINE06 <form> LINE……. LINE47 </form> Ingatlah bahwa baris bernomor pada figur ini hanyalah berfungsi sebagai titik referensi; bagian tersebut tidak akan muncul dalam file kode HTML untuk halaman Web. Perintah “<form> dan “</form> memberitahu browser Web akan mencatat informasi dari pengguna. Tanpa perintah ini untuk memulai dan mengakhiri formulir, halaman Web tidak mencatat informasi dari pengguna.
Figur P4.3 Field Kontak Informasi adalah Bagian dari Sebuah Tabel LINE14 <td><input type="text" name="Name“ size=30></td> LINE……. LINE18 <td><input type="text" name="Email" size=30></td> Name E-mail Name E-mail Dari Figur P4.3, anda dapat melihat bahwa kontak informasi berada dalam sebuah tabel. Kolom yang pertama memberikan label untuk formulir tersebut. Baris 14 dan 18 adalah perintah yang menangkap input untuk field “Name” dan E-mail”.
LINE23 <input type="radio" name="SchoolYear" value="FR“ checked>Freshman<br> LINE24 <input type="radio" name="SchoolYear" value="SO">Sophmore<br> LINE25 <input type="radio" name="SchoolYear" value="JR">Junior<br> LINE26 <input type="radio" name="SchoolYear" value="SR">Senior<br> Baris 23 hingga 26 menampilkan pilihan untuk tingkatan kelas. Field “Name” haruslah sama untuk tombol radio; pada contoh ini, nama yang dicantumkan selalu “SchoolYear”. Satu-satunya yang dilihat dari baris 23 adalah sebuah tombol radio dan kata “Freshman”.
LINE23 <input type="radio" name="SchoolYear" value="FR“ checked>Freshman<br> LINE24 <input type="radio" name="SchoolYear" value="SO">Sophmore<br> LINE25 <input type="radio" name="SchoolYear" value="JR">Junior<br> LINE26 <input type="radio" name="SchoolYear" value="SR">Senior<br> Perhatikan empat fitur penting mengenai baris 23; jenis field, nama field, nilai field, dan fakta bahwa pilihan ini sudah memiliki tanda cek dari awal. Jenis field “radio” menyebabkan browser Web memberi lingkaran yang dapat dimasukkan dengan sebuah klik mouse.
LINE23 <input type="radio" name="SchoolYear" value="FR“ checked>Freshman<br> LINE24 <input type="radio" name="SchoolYear" value="SO">Sophmore<br> LINE25 <input type="radio" name="SchoolYear" value="JR">Junior<br> LINE26 <input type="radio" name="SchoolYear" value="SR">Senior<br> Perhatikan field “value” pada baris ke 23. ketika lingkaran sebelum frase “freshman” dipilih, komputer tersebut memasukkan nilai “FR” pada field “SchoolYear”. Pengguna halaman web melihat frase “freshman” tetapi browser melihat nilai “FR” ketika lingkaran tersebut dipilih.
Bagian-bagian formulir contoh Tombol radio harus digunakan untuk pilihan eksklusif di mana jumlah pilihan yang tersedia terbatas. Jika terdapat banyak pilihan, pilihan-pilihan ini dapat memakan tempat yang amat banyak pada halaman Web. Jika seorang pengguna dapat memilih lebih dari satu pilihan, kotak cek harus digunakan. Figur P4.1 menampilkan kotak cek untuk menangkap informasi dimana seorang siswa tinggal dan apakah siswa tersebut memiliki sebuah mobil. Baris 29 dan 30 pada figur P4.2 membuat kotak cek yang nampak pada contoh. Perhatikan bahwa nama field berbeda pada baris 29 dan 30 sehingga masing masing baris membuat fieldnya dan banyak kotak cek dapat dipilih. Jika kotak “live on campus?” dipilih dengan klik mouse, maka field on akan memiliki nilai “yes”.
Figur P4.1 Contoh jadi.
Menu drop down (disebut juga kotak pilihan) memberikan pengguna daftar pilihan yang bersifat saling eksklusif ketika pengguna tersebut mengklik ikon drop down. Perhatikan bahwa terdapat perintah awal dan akhir untuk pilihan tersebut (baris 33 dan 38), dan masing masing pilihan dari daftar pilihan ini memiliki awal dan akhir nya masing masing (lihat baris 34). Nama field pilihan ini ada pada perintah pilihan (“rate”). Tetapi nilai yang ditunjukan oleh field ini dihasilkan oleh perintah “ option”. Field ini memiliki respon sebagai berikut : “no response”, “excelent”, ”average”, dan “poor”. Pada umumnya, pilihan yang pertama pada daftar adalah nilai yang ditampilkan di halaman web. Perhatikan bahwa “no response“ ditampilkan pada fitur P4.1, dan ini adalah pilihan pertama dalam perintah pilihan. Tetapi , jika <option values = average selected> rata rata dibandingkan dengan para pembicara lain </option>”menggantikan baris 36, kata “select” akan menyebabkan pilihan “average” ditampilkan sebagai pilihan awal pada halaman web.
Figur P4.2 Kode HTML untuk contoh
Seperti halnya perintah yang lain, apa yang dilihat pengguna pada layar komputer bisa jadi bukanlah yang direkam oleh komputer. Jika pengguna memilih “no response” maka field pelayanan ini akan berisikan nilai “no response”. Baris 42 terletak diantar perintah awal dan akhir area teks. dua jenis input khusus dibutuh kan untuk membuat browser web menindak informasi yang dikumpulkan oleh sebuah formulir.: submit dan reset. Pada kebanyakan formulir , sebuah tindakan akanditentukan pada perintah “form” dan browser web akan melakukan tindakan yang ditentukan tersebut ketika tombol “submit” di klik. Perintah “reset pada baris 6 menampilkan frase “reset from values to their defaullt” pada tombol. Ini akan mereset ulang semua pilihan kepada isian awal.
Menyimpan Contoh Anda harus menyimpan dokumen sebagai file HTML. Jenis setelan dokumen awal di Notepad adalah dokumen teks, dan ekstensi file.txt secara otomatis akan ditambahkan ke nama file jika file tersebut disimpan dalam bentuk “teks.” Browser Web tidak dapat menerjemahkan jenis dokumen teks.
Melihat Halaman Web Setelah halaman Web disimpan, Anda dapat memeriksanya apakah halaman tersebut bekerja dengan baik anda tidak harus menutup program Notepad; program ini dapat tetap terbuka ketika anda melihat file anda dengan browser web dan pilihlah perintah “File” diikuti subperintah “Open”. Ketikkan nama file atau “Browse” untuk mencarinya dan ketiklah tonbol “OK”. Halaman ‘Web anda akan muncul di browser.
Kesimpulan Itulah form html secara garis besar. Dengan ini anda siap membuat form untuk web site anda. Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan.
Penutup Terima Kasih atas perhatian teman-teman, dan mohon maaf jika ada kesalahan selama penyampaian materi ini berlangsung.