Formulir survei produk pasta gigi dibuat menggunakan HTML untuk menangkap informasi konsumen melalui halaman web. Formulir ini menggunakan teknik input teks, tombol radio, kotak centang, dan dropdown untuk mengumpulkan tanggapan konsumen tentang produk pasta gigi.
1. SISTEM INFORMASI MANAJEMEN
PROYEK 4
FORMULIR SURVEI WEB/HTML
PRODUK PASTA GIGI
Nama Kelompok
Lisa Andriyani ( 021111143 )
Alsani Lestari ( 021111148 )
Dosen
Dr. Wonny A.R., MM., SE
Fakultas Ekonomi Universitas
Pakuan
2. TUJUAN PEMBELAJARAN
Memahami bagaimana formulir
menangkap informasi dari para konsumen
dari produk pasta gigi yang berbentuk
halaman Web.
Memahami penggunaan kotak teks dan
area teks untuk mendapatkan input
ketikan dari pengguna.
3. TUJUAN PEMBELAJARAN
Mengetahui bagaimana membuat tombol
radio dan kotak cek untuk mendapatkan
input dan pengguna melalui klik mouse.
Mengetahui bagaimana membuat sederet
pilihan dari menu drop down.
4. PENDAHULUAN
Proyek ini mengasumsikan bahwa anda memiliki
beberapa pengetahuan mengenai hypertext
markup language (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 tekhnik dan konsep yang dibutuhkan
untuk membuat halaman Web di Notepad.
5. 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 telalu 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.
6. CONTOH
Pada contoh ini kita di tuntun untuk
membuat dokumen Notepad berupa
formulir survei yang akan disimpan dalam
bentuk Hypertext Markup Language
(HTML) sehingga dapat digunakan sebagai
halaman Web. Pembuatan formulir ini
mewakili lima tekhnik yang paling umum
untuk mencatat informasi dari sebuah
situs web. ( contoh terlampir pada slide
tahap pembuatan formulir ).
7. TEKNIK
Teknik yang pertama adalah field teks (misalnya
untuk field “Name” di mana
pengguna mengetikan sebaris data. Teknik yang
kedua adalah tombol radio
(misalnya“ProdukAnda”) . Tombol
radio digunakan ketika jawaban-jawaban yang
memungkinkan saling menghargai. Kotak cek
(“harga yang murah?” dan “kualitas produk yang
baik?”)
serupa dengan tombol radio, tetapi pengguna
dapat memilih satu atau lebih pilihan.
11. Area teks memungkinkan beberapa baris 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
menggunakan informasi yang dikumpulkan.
12. Masing-masing field input memiliki paling
tidak dua karakter: sebuah nama field dan
sebuah nilai. Field dapat dinamai “Produk
anda”; nilainya bisa jadi “PE,” “CI”, “FO”,
atau “SE”. Pengguna dapat melihat
informasi yang ditampilkan di layar
komputer, tetapi komputer mengenali field
dan nilai yang dialokasikan untuk field
tersebut.
13. BAGIAN-BAGIAN FORMULIR CONTOH
HTML mengharuskan perintah awal dan akhir –
misalnya „‟<html>‟‟ dan „‟</html>‟‟. Jika anda
mengetikan sebagian dari contoh dan mencoba
melihatnya sebagian halaman Web, browser
tersebut tidak akan menemukan perintah akhir
misalnya „‟</html>.
14. Perintah “<from>“ dan “</from>” memberi
tahu browser Web bahwa halaman Web akan
mencatat informasi dari pengguna. Tanpa
perintah ini untUk memulai dan mengakhiri
formulir, halaman Web tidak dapat mencatat
informasi dari pengguna.
15. Pada baris 1 sampai 8 ini
merupakan bagian pertama untuk
menghubungkan konsumen mengisi
Formulir Survei Produk Pasta Gigi
yang konsumen konsumsi
16. Dari pigur P4.3, anda dapat melihat bahwa
kontak informasi berada dalam satu tabel.
Baris 14 dan 18 ini adalah perintah yang
menangkap input untuk field “Name” dan
“e-mail”. Perhatikan bahwa tipe input disini
adalah “teks,” yang memberi tahu browser
Web bahwa pengguna akan mengetikan
sebaris teks ke dalam field input.
17. Baris 23 hingga 26 ini menampilkan pilihan untuk
tingkatan kelas. Filed “Name” haruslah sama untuk
tombol radio: pada contoh ini, nama yang dicantum
kan selalu: “ProdukAnda”. Satu-satunya yang dilihat
pengguna dari baris 23 adalah sebuah tombol radio
dan kata “Pepsodent”. Dari halaman Web ini
menanyakan tingkatan kelas pengguna. Empat
angka ditampilkan di sini, dan pengguna dapat
memilih hanya satu pilihan. Tombol radio berguna
untuk digunakan jika pilihan bersifat eksklusif satu
sama lain.
18. Empat penting pada 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 memberikan lingkaran
yang dapat dimasukan dengan sebuah klik mouse.
Penggunaan nama field yang sama (“ProdukAnda”)
menyebabkan pilihan antar tombol-tombol radio
bersifat saling eksklusif. Nama field hanya memiliki
satu nilai-nilai yang ditentukan ketika lingkaran
tersebut dipilih oleh klik mouse.
19. Perhatikan field “value” pada baris 23. ketika
lingkaran sebelum frase “Pepsodent” dipilih,
komputer tersebut memasukan nilai “Pe” pada
field “ProdukAnda”. Pengguna halaman Web
melihat frase “Pepsodent” tetapi browser
melihat “Pe” ketika lingkaran tersebut di pilih.
20. Pada baris 29 dan 30 ini pada figur P42
membuat kotak cek yang nampak pada contoh
cek perhatikan bahwa nama field berbeda pada
baris 29 dan 30 hingga masing-masing baris
membuat fieldnya dan banyak kotak cek yang
dipilih. Jika kotak harga “?” dipilih dengan klik
mouse, maka field on memiliki nilai yes jika field
ini tidak dipilih maka tidak ada nilai.
21. Pada Baris 33 dan 38 ini pada
P4.2 memberikan daftar perintah
yang menghasilkan menu drop-
down pada contoh. Ikon ini di
tampilkan dalam figur P4.1 di
sebelah kanan frase “no
response” .
22. Perhatikan bahwa terdapat perintah
awal dan akhir untuk pilihan baris 33
dan 38, masing-masing pilihan dari
daftar pilihan ini memiliki awal dan
akhirnya masing-masing.
23. Pada nama field pilihan ini ada pada baris 33
dan 34 pada perintah (“Rate”), tetapi nilai
yang ditunjukan untuk field ini dihasilkan
“option”. Field ini memiliki respon seperti “No
Response”, “Excelent”, “Average”, dan “Poor”.
24. Figur P4.1
Perhatikan bahwa “Tidak ada respon” di
tampilkan pada figur P4.1 ini adalah
pilihan pertama dalam perintah pilihan.
Tetapi jika “<option values=„Buruk‟
selected> Buruk dibandingkan produk
pasta gigi yang lain</option>”
menggantikan baris 36, kata “selected
menyebabkan pilihan “Buruk” ditampilkan
pilihan awal pada Web.
25. Field terakhir ini merupakan dari contoh
meminta komentar tambahan kepada
para konsumen atas produk yang mereka
pilih. Formulir ini mengansumsikan bahwa
konsumen mungkin memerlukan lebih
dari satu baris teks yang memberikan
komentar. Area teks digunakan untuk
komentar-komentar semacam ini.
26. Nama dari area teks ini ditentukan sebagai
“Comments”, dan pengguna diberikan 5 baris
berisikan 45 karakter untuk membuat komentar.
Terdapat “Wrap” yang nilainya dipatok ke “Yes”.
Browser Web secara otomatis akan memasukan
baris selanjutnya ketika komentar diketikkan.
27. Baris 42 berada di antara awal dan akhir
area teks. Frase “Enter comments here”
ditampilkan pada layar komputer. Apabila
baris 42 dihilangkan maka tidak akan ada
teks awalan pada area teks. Dan “
masukkam komentar disini” merupakan
bagian dari areatext.
28. Perintah “submit” ditampilkan pada baris 45 ini
pada figur P4.2 ini nilai yang ditampilkan pada
tombol yang dihasilkan oleh perintah ini adalah
“Kirim Respon”.
29. Kebanyakan formulir, sebuah tindakan
akan ditentukan pada perintah “form”
(baris 6), dari browser Web akan
melakukan tindakan yang ditentukan
tersebut ketika tombol “submit” diklik.
30. Perintah “reset” pada baris 46
menampilkan frase “Kirim ulang apabila
gagal” pada tombol. Mengeklik tombol ini
akan mengeset ulang semua pilihan
kepada isian awal. Ini serupa dengan
ketika seorang pengguna menghapus
semua respons dari sebuah formulir
kertas.
31. TAHAP-TAHAP UNTUK
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.
32. Untuk dapat
menyimpan
dokumen sebagai
file HTML yaitu
dengan memilih
“file” dan pilih
“Save As” .
33. Masukkan nama file seperti
“formulirsurvei.htm”. Jenis file yang dipilih
yaitu “save as type” harus lah “All Files”,
pengodean harus diset ke ANSI. Jika tidak
memilih “All Files” sebagai jenis file, maka
halaman Web tidak akan bekerja dan lebih
buruk lagi, ekstensi .txt akan ditambahkan
pada akhir nama file anda.
34. CARA MELIHAT HALAMAN WEB
Setelah melihat halaman Web disimpan, anda
dapat memeriksanya apakah halaman tersebut
dengan baik. Anda tidak harus menutup
Notepad program ini dapat tetap terbuka ketika
melihat file anda dengan browser Web.
35. Bukalah browser Web dan pilihlah
perintah “file” diikuti sub perintah “Open”.
36. Ketikkan nama file
(formulirsurvei) atau
“Browse” untuk
mencarinya dan kliklah
tombol “OK” lalu pilihlah
“Open”
37. Jika perlu beberapa koreksi, pilihlah
editor Notepad lagi. Editlah kode HTML
dan simpan. Setiap menyimpan file
HTML amat penting untuk memilih “All
Files”. Bukalah ulang browser Web
dengan “View” diikuti “Refresh”.
39. KESIMPULAN & UCAPAN
TERIMAKASIH
Itulah form HTML secara garis besar. Dengan
ini dapat membuat form untuk Web yang
anda miliki dan anda buat.
Hanya untuk mengingatkan bahwa apabila
ingin membuat dokumen HTML yang baik,
maka anda harus menyediakan waktu untuk
mempelajari tag-tag yang akan dipakai dalam
pembuatan Formulir Web tersebut.
