Your SlideShare is downloading. ×
Proyek 4 sistem informasi manajamen
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Proyek 4 sistem informasi manajamen

533
views

Published on

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
533
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. PENDAHULUANProyek ini mengasumsikan bahwa anda memilikibeberapa pengetahuan mengenai hypertextmarkup 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.
  • 5. PEMBAHASANProyek ini ditujukan untuk membuat formulir, tetapitidak 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.
  • 6. CONTOHPada 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 slidetahap pembuatan formulir ).
  • 7. TEKNIKTeknik yang pertama adalah field teks (misalnyauntuk field “Name” di manapengguna mengetikan sebaris data. Teknik yangkedua adalah tombol radio(misalnya“ProdukAnda”) . Tombolradio digunakan ketika jawaban-jawaban yangmemungkinkan saling menghargai. Kotak cek(“harga yang murah?” dan “kualitas produk yangbaik?”)serupa dengan tombol radio, tetapi penggunadapat memilih satu atau lebih pilihan.
  • 8. TAHAP-TAHAPPEMBUATAN 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 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.
  • 12. Masing-masing field input memiliki palingtidak 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.
  • 13. BAGIAN-BAGIAN FORMULIR CONTOHHTML mengharuskan perintah awal dan akhir –misalnya „‟<html>‟‟ dan „‟</html>‟‟. Jika andamengetikan sebagian dari contoh dan mencobamelihatnya sebagian halaman Web, browsertersebut tidak akan menemukan perintah akhirmisalnya „‟</html>.
  • 14. 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.
  • 15. Pada baris 1 sampai 8 inimerupakan bagian pertama untukmenghubungkan konsumen mengisiFormulir Survei Produk Pasta Gigiyang konsumen konsumsi
  • 16. Dari pigur P4.3, anda dapat melihat bahwakontak informasi berada dalam satu tabel.Baris 14 dan 18 ini adalah perintah yangmenangkap input untuk field “Name” dan“e-mail”. Perhatikan bahwa tipe input disiniadalah “teks,” yang memberi tahu browserWeb bahwa pengguna akan mengetikansebaris teks ke dalam field input.
  • 17. 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 radiodan 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.
  • 18. Empat penting pada baris 23: jenis field namafield, nilai field, dan fakta bahwa pilihan ini sudahmemiliki tanda cek dari awal. Jenis field: radiomenyebabkan browser Web memberikan lingkaranyang dapat dimasukan dengan sebuah klik mouse.Penggunaan nama field yang sama (“ProdukAnda”)menyebabkan pilihan antar tombol-tombol radiobersifat saling eksklusif. Nama field hanya memilikisatu nilai-nilai yang ditentukan ketika lingkarantersebut 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 browsermelihat “Pe” ketika lingkaran tersebut di pilih.
  • 20. Pada baris 29 dan 30 ini pada figur P42membuat kotak cek yang nampak pada contohcek perhatikan bahwa nama field berbeda padabaris 29 dan 30 hingga masing-masing barismembuat fieldnya dan banyak kotak cek yangdipilih. Jika kotak harga “?” dipilih dengan klikmouse, maka field on memiliki nilai yes jika fieldini tidak dipilih maka tidak ada nilai.
  • 21. 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 “noresponse” .
  • 22. Perhatikan bahwa terdapat perintahawal dan akhir untuk pilihan baris 33dan 38, masing-masing pilihan daridaftar pilihan ini memiliki awal danakhirnya masing-masing.
  • 23. Pada nama field pilihan ini ada pada baris 33dan 34 pada perintah (“Rate”), tetapi nilaiyang ditunjukan untuk field ini dihasilkan“option”. Field ini memiliki respon seperti “NoResponse”, “Excelent”, “Average”, dan “Poor”.
  • 24. Figur P4.1Perhatikan 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 “selectedmenyebabkan pilihan “Buruk” ditampilkanpilihan awal pada Web.
  • 25. 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.
  • 26. 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.
  • 27. 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.
  • 28. Perintah “submit” ditampilkan pada baris 45 ini pada figur P4.2 ini nilai yang ditampilkan padatombol yang dihasilkan oleh perintah ini adalah “Kirim Respon”.
  • 29. Kebanyakan formulir, sebuah tindakanakan ditentukan pada perintah “form”(baris 6), dari browser Web akanmelakukan tindakan yang ditentukantersebut ketika tombol “submit” diklik.
  • 30. Perintah “reset” pada baris 46menampilkan 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.
  • 31. TAHAP-TAHAP UNTUK MENYIMPAN CONTOHAnda harus menyimpan dokumen sebagai fileHTML. Jenis setelan dokumen awal di Notepadadalah dokumen teks, dan ekstensi file .txtsecara otomatis akan ditambahkan ke nama filejika file tersebut disimpan dalam bentuk “teks”.Browser Web tidak dapat menerjemahkan jenisdokumen teks.
  • 32. Untuk dapat menyimpandokumen 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 tidakmemilih “All Files” sebagai jenis file, makahalaman Web tidak akan bekerja dan lebihburuk lagi, ekstensi .txt akan ditambahkan pada akhir nama file anda.
  • 34. CARA MELIHAT HALAMAN WEBSetelah melihat halaman Web disimpan, andadapat memeriksanya apakah halaman tersebutdengan baik. Anda tidak harus menutupNotepad program ini dapat tetap terbuka ketikamelihat file anda dengan browser Web.
  • 35. Bukalah browser Web dan pilihlahperintah “file” diikuti sub perintah “Open”.
  • 36. Ketikkan nama file (formulirsurvei) atau “Browse” untuk mencarinya dan kliklahtombol “OK” lalu pilihlah “Open”
  • 37. Jika perlu beberapa koreksi, pilihlaheditor Notepad lagi. Editlah kode HTML dan simpan. Setiap menyimpan fileHTML amat penting untuk memilih “All Files”. Bukalah ulang browser Web dengan “View” diikuti “Refresh”.
  • 38. Setelah klik open maka muncullahformulir yang telah selesai.
  • 39. KESIMPULAN & UCAPAN TERIMAKASIHItulah form HTML secara garis besar. Denganini dapat membuat form untuk Web yanganda 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.
  • 40. Thanks for attention !!!