SIM Proyek 4
Download as PPTX, PDF1 like431 views
Dokumen ini menjelaskan cara membuat formulir survei berbasis web menggunakan HTML, mencakup teknik input seperti teks, tombol radio, dan kotak cek. Proyek ini bertujuan untuk membantu pengguna memahami pemrograman HTML dan cara menangkap informasi dari konsumen. Selain itu, dokumen juga memberikan langkah-langkah untuk menyimpan dan melihat halaman web yang telah dibuat.
SIM Proyek 4
- 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.
- 8. TAHAP-TAHAP PEMBUATAN FORMULIR SURVEI WEB/HTML SISWA
- 9. Contoh jadi (Figur P4.1)
- 10. Kode HTML Untuk contoh ( Figur P4.2)
- 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”.
- 38. Setelah klik open maka muncullah formulir yang telah selesai.
- 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.
- 40. Thanks for attention !!!