Sim 4 Proyek [PDF]

Citation preview

SISTEM INFORMASI MANAJEMEN PROYEK 4 FORMULIR SURVEI WEB/HTML Nama kelompok : Dede solihin Irfan kholiq ibrahim



(0211 11 092) (0211 11 110)



Dosen Dr. Wonny A.R., MM., SE Fakultas Ekonomi Universitas Pakuan



TUJUAN PEMBELAJARAN  Memahami bagaimana formulir



menangkap informasi dari para konsumen dari jenis kucing yang berbentuk halaman Web.



 Memahami penggunaan kotak teks dan area teks untuk mendapatkan input ketikan dari pengguna.



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.



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.



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 email. Dan anda pun dapat menggunakan jasa gratis yang mengirimkan jawaban formulir ke email anda. Response-O-matic ( WWW.RESPONSE-O-MATIC.COM ) adalah layanan terkenal yang gratis dan mudah digunakan.



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 ).



TEKNIK



Teknik yang pertama adalah field teks (misalnya untuk field “Name” di mana pengguna mengetikan sebaris data. Teknik yang kedua adalah tombol radio (misalnya“jenis kucing”) . Tombol radio digunakan ketika jawaban-jawaban yang memungkinkan saling menghargai. Kotak cek (“lucu?” dan “hobi”) serupa dengan tombol radio, tetapi pengguna dapat memilih satu atau lebih pilihan.



Figur 4.1 Contoh jadi



Figur P4.2 Kode HTML Untuk contoh



 Area teks memungkinkan beberapa baris ketikan: sedangkan field teks hanya



memungkinkan satu baris saja. Sebuah area teks dapat menampung sederet alamat email, tetapi perusahaan dapat memecahmecah 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.



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.



BAGIAN-BAGIAN FORMULIR CONTOH



HTML mengharuskan perintah awal dan akhir – misalnya „‟‟‟ dan „‟‟‟. Jika anda mengetikan sebagian dari contoh dan mencoba melihatnya sebagian halaman Web, browser tersebut tidak akan menemukan perintah akhir misalnya „‟.



Perintah ““ dan “” 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.



 Pada baris 1 sampai 8 ini merupakan



bagian pertama untuk menghubungkan konsumen mengisi Formulir jenis kucing yang anda sukai



 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.



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: “Produk Anda”. Satu-satunya yang dilihat pengguna dari baris 23 adalah sebuah tombol radio dan kata “Persia”. 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.



 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 (“Jenis”) 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.



 Perhatikan field “value” pada baris 23. ketika lingkaran sebelum frase “Persia” dipilih, komputer tersebut memasukan



nilai “Pe” pada field “Produ kanda”. Pengguna halaman Web melihat frase “Persia” tetapi browser melihat “Pe” ketika lingkaran tersebut di pilih.



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 lucu “?” dipilih dengan klik mouse, maka field on memiliki nilai yes jika field ini tidak dipilih maka tidak ada nilai.



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” .



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



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”.



FIGUR P4.1



Perhatikan bahwa “Tidak ada respon” di tampilkan pada figur P4.1 ini adalah pilihan pertama dalam perintah pilihan. Tetapi jika “ Buruk dibandingkan jenis kucing yang lain” menggantikan baris 36, kata “selected menyebabkan pilihan “sangat bagus” ditampilkan pilihan awal pada Web.



Field terakhir ini merupakan dari contoh meminta komentar tambahan kepada para pemelihara atas jenis kucing yang mereka pilih. Formulir ini mengansumsikan bahwa konsumen mungkin memerlukan lebih dari satu baris teks yang memberikan komentar. Area teks digunakan untuk komentarkomentar semacam ini



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



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.



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”.



Kebanyakan formulir, sebuah tindakan akan ditentukan pada perintah “form” (baris 6), dari browser Web akan melakukan tindakan yang ditentukan tersebut ketika tombol “submit” diklik



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.



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.



 Untuk dapat menyimpan dokumen



sebagai file HTML yaitu dengan memilih “file” dan pilih “Save As”



 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.



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