Post on 06-Jul-2015
Nama KelompokLisa Andriyani ( 021111143 )Alsani Lestari ( 021111148 )
DosenDr. Wonny A.R., MM., SE
Fakultas Ekonomi UniversitasPakuan
SISTEM INFORMASI MANAJEMENPROYEK 4
FORMULIR SURVEI WEB/HTML PRODUK PASTA GIGI
TUJUAN PEMBELAJARAN
Memahami bagaimana formulir
menangkap informasi dari para konsumendari produk pasta gigi yang berbentukhalaman Web.
Memahami penggunaan kotak teks danarea teks untuk mendapatkan input ketikan dari pengguna.
TUJUAN PEMBELAJARAN
Mengetahui bagaimana membuat tombol
radio dan kotak cek untuk mendapatkaninput dan pengguna melalui klik mouse.
Mengetahui bagaimana membuat sederetpilihan dari menu drop down.
PENDAHULUAN
Proyek ini mengasumsikan bahwa anda memiliki
beberapa pengetahuan mengenai hypertext markup language (HTML) dan bagaimanamenggunakan Notepad sebagai editor teks, dimana proyek ini akan mempelajari konsep-konsep Web/HTML, proyek ini pun menampilkancontoh tahap demi tahap yang menggambarkanberbagai tekhnik dan konsep yang dibutuhkanuntuk membuat halaman Web di Notepad.
PEMBAHASAN
Proyek ini ditujukan untuk membuat formulir, tetapi
tidak menyediakan intruksi kepada browser (penjelajah) Web untuk memproses hasil dariformulir. Informasi dari sebuah formulir biasanyadikirimkan melalui e-mail atau dimasukkan ke dalambasis datanya. Tidak telalu sulit untuk membuatrespons untuk formulir e-mail. Dan anda pun dapatmenggunakan jasa gratis yang mengirimkanjawaban formulir ke e-mail anda. Response-O-matic( WWW.RESPONSE-O-MATIC.COM ) adalah layananterkenal yang gratis dan mudah digunakan.
CONTOH
Pada contoh ini kita di tuntun untukmembuat dokumen Notepad berupaformulir survei yang akan disimpan dalambentuk Hypertext Markup Language(HTML) sehingga dapat digunakan sebagaihalaman Web. Pembuatan formulir inimewakili lima tekhnik yang paling umumuntuk mencatat informasi dari sebuahsitus web. ( contoh terlampir pada slide tahap pembuatan formulir ).
TEKNIK
Teknik yang pertama adalah field teks (misalnyauntuk field “Name” di manapengguna mengetikan sebaris data. Teknik yang kedua adalah tombol radio (misalnya“ProdukAnda”) . Tombolradio digunakan ketika jawaban-jawaban yang memungkinkan saling menghargai. Kotak cek(“harga yang murah?” dan “kualitas produk yang baik?”)
serupa dengan tombol radio, tetapi penggunadapat memilih satu atau lebih pilihan.
TAHAP-TAHAP PEMBUATAN FORMULIR
SURVEI WEB/HTML SISWA
Contoh jadi(FigurP4.1)
Kode HTML Untuk
contoh ( Figur P4.2)
Area teks memungkinkan beberapa baris ketikan: sedangkan field teks hanya memungkinkan satubaris saja. Sebuah area teks dapat menampungsederet alamat e-mail, tetapi perusahaan dapatmemecah-mecah alamat menjadi beberapa bagianmenggunakan field teks. Pilihan jenis field harusditentukan oleh bagaimana perusahaan tersebutingin menampilkan formulir tersebut danmenggunakan informasi yang dikumpulkan.
Masing-masing field input memiliki paling
tidak dua karakter: sebuah nama field dansebuah nilai. Field dapat dinamai “Produkanda”; nilainya bisa jadi “PE,” “CI”, “FO”, atau “SE”. Pengguna dapat melihatinformasi yang ditampilkan di layarkomputer, tetapi komputer mengenali fielddan nilai yang dialokasikan untuk fieldtersebut.
BAGIAN-BAGIAN FORMULIR CONTOH
HTML mengharuskan perintah awal dan akhir –misalnya „‟<html>‟‟ dan „‟</html>‟‟. Jika andamengetikan sebagian dari contoh dan mencobamelihatnya sebagian halaman Web, browser tersebut tidak akan menemukan perintah akhirmisalnya „‟</html>.
Perintah “<from>“ dan “</from>” memberitahu browser Web bahwa halaman Web akanmencatat informasi dari pengguna. Tanpaperintah ini untUk memulai dan mengakhiriformulir, halaman Web tidak dapat mencatatinformasi dari pengguna.
Pada baris 1 sampai 8 inimerupakan bagian pertama untukmenghubungkan konsumen mengisiFormulir Survei Produk Pasta Gigiyang konsumen konsumsi
Dari pigur P4.3, anda dapat melihat bahwakontak 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 disiniadalah “teks,” yang memberi tahu browser Web bahwa pengguna akan mengetikansebaris teks ke dalam field input.
Baris 23 hingga 26 ini menampilkan pilihan untuktingkatan kelas. Filed “Name” haruslah sama untuktombol radio: pada contoh ini, nama yang dicantumkan selalu: “ProdukAnda”. Satu-satunya yang dilihatpengguna dari baris 23 adalah sebuah tombol radio dan kata “Pepsodent”. Dari halaman Web inimenanyakan tingkatan kelas pengguna. Empatangka ditampilkan di sini, dan pengguna dapatmemilih hanya satu pilihan. Tombol radio bergunauntuk digunakan jika pilihan bersifat eksklusif satusama lain.
Empat penting pada baris 23: jenis field namafield, nilai field, dan fakta bahwa pilihan ini sudahmemiliki tanda cek dari awal. Jenis field: radio menyebabkan browser Web memberikan lingkaranyang dapat dimasukan dengan sebuah klik mouse. Penggunaan nama field yang sama (“ProdukAnda”) menyebabkan pilihan antar tombol-tombol radio bersifat saling eksklusif. Nama field hanya memilikisatu nilai-nilai yang ditentukan ketika lingkarantersebut dipilih oleh klik mouse.
Perhatikan field “value” pada baris 23. ketikalingkaran sebelum frase “Pepsodent” dipilih,
komputer tersebut memasukan nilai “Pe” padafield “ProdukAnda”. Pengguna halaman Web
melihat frase “Pepsodent” tetapi browser melihat “Pe” ketika lingkaran tersebut di pilih.
Pada baris 29 dan 30 ini pada figur P42 membuat kotak cek yang nampak pada contohcek perhatikan bahwa nama field berbeda padabaris 29 dan 30 hingga masing-masing barismembuat fieldnya dan banyak kotak cek yang dipilih. Jika kotak harga “?” dipilih dengan klikmouse, maka field on memiliki nilai yes jika field ini tidak dipilih maka tidak ada nilai.
Pada Baris 33 dan 38 ini padaP4.2 memberikan daftar perintahyang menghasilkan menu drop-down pada contoh. Ikon ini ditampilkan dalam figur P4.1 disebelah kanan frase “no response” .
Perhatikan bahwa terdapat perintahawal dan akhir untuk pilihan baris 33 dan 38, masing-masing pilihan daridaftar pilihan ini memiliki awal danakhirnya masing-masing.
Pada nama field pilihan ini ada pada baris 33 dan 34 pada perintah (“Rate”), tetapi nilaiyang ditunjukan untuk field ini dihasilkan“option”. Field ini memiliki respon seperti “No Response”, “Excelent”, “Average”, dan “Poor”.
Figur P4.1
Perhatikan bahwa “Tidak ada respon” ditampilkan pada figur P4.1 ini adalahpilihan pertama dalam perintah pilihan. Tetapi jika “<option values=„Buruk‟ selected> Buruk dibandingkan produkpasta gigi yang lain</option>” menggantikan baris 36, kata “selected menyebabkan pilihan “Buruk” ditampilkanpilihan awal pada Web.
Field terakhir ini merupakan dari contohmeminta komentar tambahan kepadapara konsumen atas produk yang merekapilih. Formulir ini mengansumsikan bahwakonsumen mungkin memerlukan lebihdari satu baris teks yang memberikankomentar. Area teks digunakan untukkomentar-komentar semacam ini.
Nama dari area teks ini ditentukan sebagai“Comments”, dan pengguna diberikan 5 barisberisikan 45 karakter untuk membuat komentar. Terdapat “Wrap” yang nilainya dipatok ke “Yes”. Browser Web secara otomatis akan memasukanbaris selanjutnya ketika komentar diketikkan.
Baris 42 berada di antara awal dan akhirarea teks. Frase “Enter comments here”ditampilkan pada layar komputer. Apabilabaris 42 dihilangkan maka tidak akan adateks awalan pada area teks. Dan “masukkam komentar disini” merupakanbagian dari areatext.
Perintah “submit” ditampilkan pada baris 45 inipada figur P4.2 ini nilai yang ditampilkan padatombol yang dihasilkan oleh perintah ini adalah
“Kirim Respon”.
Kebanyakan formulir, sebuah tindakanakan ditentukan pada perintah “form” (baris 6), dari browser Web akanmelakukan tindakan yang ditentukantersebut ketika tombol “submit” diklik.
Perintah “reset” pada baris 46 menampilkan frase “Kirim ulang apabilagagal” pada tombol. Mengeklik tombol iniakan mengeset ulang semua pilihankepada isian awal. Ini serupa denganketika seorang pengguna menghapussemua respons dari sebuah formulirkertas.
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 jenisdokumen teks.
TAHAP-TAHAP UNTUK MENYIMPAN CONTOH
Untuk dapatmenyimpan
dokumen sebagaifile HTML yaitudengan memilih“file” dan pilih
“Save As” .
Masukkan nama file seperti“formulirsurvei.htm”. Jenis file yang dipilihyaitu “save as type” harus lah “All Files”,
pengodean harus diset ke ANSI. Jika tidakmemilih “All Files” sebagai jenis file, makahalaman Web tidak akan bekerja dan lebihburuk lagi, ekstensi .txt akan ditambahkan
pada akhir nama file anda.
Setelah melihat halaman Web disimpan, anda
dapat memeriksanya apakah halaman tersebutdengan baik. Anda tidak harus menutupNotepad program ini dapat tetap terbuka ketikamelihat file anda dengan browser Web.
CARA MELIHAT HALAMAN WEB
Bukalah browser Web dan pilihlahperintah “file” diikuti sub perintah “Open”.
Ketikkan nama file (formulirsurvei) atau
“Browse” untukmencarinya dan kliklah
tombol “OK” lalu pilihlah“Open”
Jika perlu beberapa koreksi, pilihlaheditor 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”.
Setelah klik open maka muncullah
formulir yang telahselesai.
Itulah form HTML secara garis besar. Denganini dapat membuat form untuk Web yang anda miliki dan anda buat.
Hanya untuk mengingatkan bahwa apabilaingin membuat dokumen HTML yang baik, maka anda harus menyediakan waktu untukmempelajari tag-tag yang akan dipakai dalampembuatan Formulir Web tersebut.
KESIMPULAN & UCAPAN TERIMAKASIH
Thanks for attention !!!