Proyek 4 sistem informasi manajamen
Transcript of Proyek 4 sistem informasi manajamen
![Page 1: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/1.jpg)
Nama Kelompok Lisa Andriyani ( 021111143 ) Alsani Lestari ( 021111148 )
Dosen
Dr. Wonny A.R., MM., SE
Fakultas Ekonomi Universitas Pakuan
SISTEM INFORMASI MANAJEMEN PROYEK 4
FORMULIR SURVEI WEB/HTML PRODUK PASTA GIGI
![Page 2: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/8.jpg)
TAHAP-TAHAP PEMBUATAN FORMULIR
SURVEI WEB/HTML SISWA
![Page 9: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/9.jpg)
Contoh jadi (Figur P4.1)
![Page 10: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/10.jpg)
Kode HTML Untuk
contoh ( Figur P4.2)
![Page 11: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/32.jpg)
Untuk dapat menyimpan
dokumen sebagai file HTML yaitu dengan memilih “file” dan pilih
“Save As” .
![Page 33: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/35.jpg)
Bukalah browser Web dan pilihlah perintah “file” diikuti sub perintah “Open”.
![Page 36: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/36.jpg)
Ketikkan nama file (formulirsurvei) atau
“Browse” untuk mencarinya dan kliklah
tombol “OK” lalu pilihlah “Open”
![Page 37: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/38.jpg)
Setelah klik open maka muncullah
formulir yang telah selesai.
![Page 39: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/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: Proyek 4 sistem informasi manajamen](https://reader034.fdocument.pub/reader034/viewer/2022052507/558585f6d8b42ab2148b4e44/html5/thumbnails/40.jpg)
Thanks for attention !!!