Bab 4 proyek
-
Upload
elsa-mayasari -
Category
Documents
-
view
219 -
download
3
description
Transcript of Bab 4 proyek
![Page 1: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/1.jpg)
Nama KelompokLisa Andriyani ( 021111143 )Alsani Lestari ( 021111148 )
DosenDr. Wonny A.R., MM., SE
Fakultas Ekonomi Universitas Pakuan
SISTEM INFORMASI MANAJEMENPROYEK 4
FORMULIR SURVEI WEB/HTML PRODUK PASTA GIGI
![Page 2: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/2.jpg)
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.
![Page 3: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/3.jpg)
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.
![Page 4: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/4.jpg)
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.
![Page 5: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/5.jpg)
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.
![Page 6: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/6.jpg)
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 ).
![Page 7: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/7.jpg)
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.
![Page 8: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/8.jpg)
TAHAP-TAHAP PEMBUATAN FORMULIR
SURVEI WEB/HTML SISWA
![Page 9: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/9.jpg)
Contoh jadi (Figur
P4.1)
![Page 10: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/10.jpg)
Kode HTML Untuk contoh ( Figur P4.2)
![Page 11: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/11.jpg)
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.
![Page 12: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/12.jpg)
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.
![Page 13: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/13.jpg)
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>.
![Page 14: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/14.jpg)
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.
![Page 15: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/15.jpg)
Pada baris 1 sampai 8 ini merupakan bagian pertama untuk menghubungkan konsumen mengisi Formulir Survei Produk Pasta Gigi yang konsumen konsumsi
![Page 16: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/16.jpg)
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.
![Page 17: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/17.jpg)
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.
![Page 18: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/18.jpg)
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.
![Page 19: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/19.jpg)
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.
![Page 20: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/20.jpg)
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.
![Page 21: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/21.jpg)
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” .
![Page 22: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/22.jpg)
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.
![Page 23: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/23.jpg)
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”.
![Page 24: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/24.jpg)
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.
![Page 25: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/25.jpg)
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.
![Page 26: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/26.jpg)
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.
![Page 27: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/27.jpg)
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.
![Page 28: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/28.jpg)
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”.
![Page 29: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/29.jpg)
Kebanyakan formulir, sebuah tindakan akan ditentukan pada perintah “form” (baris 6), dari browser Web akan melakukan tindakan yang ditentukan tersebut ketika tombol “submit” diklik.
![Page 30: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/30.jpg)
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.
![Page 31: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/31.jpg)
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.
TAHAP-TAHAP UNTUK MENYIMPAN CONTOH
![Page 32: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/32.jpg)
Untuk dapat menyimpan
dokumen sebagai file HTML
yaitu dengan memilih “file”
dan pilih “Save As” .
![Page 33: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/33.jpg)
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.
![Page 34: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/34.jpg)
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.
CARA MELIHAT HALAMAN WEB
![Page 35: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/35.jpg)
Bukalah browser Web dan pilihlah perintah “file” diikuti sub perintah
“Open”.
![Page 36: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/36.jpg)
Ketikkan nama file (formulirsurvei) atau
“Browse” untuk mencarinya dan kliklah
tombol “OK” lalu pilihlah “Open”
![Page 37: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/37.jpg)
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”.
![Page 38: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/38.jpg)
Setelah klik open maka muncullah
formulir yang telah selesai.
![Page 39: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/39.jpg)
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.
KESIMPULAN & UCAPAN TERIMAKASIH
![Page 40: Bab 4 proyek](https://reader030.fdocuments.net/reader030/viewer/2022012906/5560dd03d8b42a086e8b462c/html5/thumbnails/40.jpg)
Thanks for attention !!!