Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
KELOMPOK 10 PROYEK 5 Formulir Pembelian Buku Web / HTML
2
Nama Kelompok : Aditiya Apriadi. (021110006) Dimas Aditya. P
Nama Kelompok : Aditiya Apriadi ( ) Dimas Aditya. P ( ) Kelas 3-A Manajemen
3
TUJUAN PEMBELAJARAN : Memahami bagaimana formulir menyimpan informasi dari para pengguna Web. Memahami pengguna kotak teks dan area teks untuk mendapatkan input ketikan dari pengguna. Mengetahui bagaimana membuat tombol radio dan kotak cek untuk mendapatkan input pengguna melalui klik mouse. Mengetahui bagaimana membuat sederet pilihan dari menu drop down.
4
Pendahuluan Proyek ini mengasumsikan bahwa Anda memiliki pengetahuan mengenai HTML (hypertext markup language) dan bagaimana menggunakan notepad sebagai editor teks. Formulir menyediakan sebuah mekanisme untuk mengumpulkan informasi dari para pengguna Web. Tanpa formulir komunikasi di Web akan bersifat satu arah.
5
dari halaman Web ke pengguna
dari halaman Web ke pengguna. Kebanyakan organisasi harus menyimpan informasi dari para pengunjung halaman Web agar situs Web mereka bersifat interaktif. Proyek ini melibatkan pembuatan formulir untuk digunakan dalam pembelian buku. Proyek ini ditujukan untuk membuat formulir, tetapi tidak menyediakan instruksi kepada browser Web untuk memproses hasil formulir. Informasi dari formulir biasanya dikirim melalui atau dimasukan ke dalam basis datanya.
6
HyperText Markup Language adalah bahasa yang digunakan untuk menulis halaman Web. Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu halaman (HEAD) yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list(daftar), tabel dan lain-lain.
7
Sedangkan tag dinyatakan dengan tanda lebih kecil “< “ ( tag awal ) dan tanda lebih besar “>“ (tag akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak diantara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda”/”).
8
Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML yaitu HTML, HEAD dan BODY. Tag HTML berfungsi untuk menyatakan suatu dokumen HTML. Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML.
9
FORMULIR YANG TELAH SELESAI
CLICK ME
10
CONTOH FORMULIR PEMBELIAN BUKU WEB / HTML
Contoh ini membuat formulir untuk membeli buku mata kuliah sistem informasi. Formulir ini mewakili lima teknik yang paling umum untuk mencatat informasi dari sebuah situs web. Teknik yang pertama adalah field teks, di mana pengguna mengetikan sebaris data. BRING ME BACK
11
Menu drop-down, mengombinasi jawaban yang akan ditanyakan dalam tempat kecil di halaman Web tetapi masih memungkinkan sejumlah pilihan yang bersifat saling eksklusif lainnya. Teknik tombol radio, sesuai jika beberapa pilihan yang saling ekslusif ditampilkan. Kotak cek, serupa dengan tombol radio,tetapi pengguna dapat memilih satu atau lebih pilihan. Teknik input yang terakhir pada contoh ini adalah kotak teks untuk mengisi komentar. BRING ME BACK
12
Masing-masing teknik ini memiliki kelebihan masing-masing
Masing-masing teknik ini memiliki kelebihan masing-masing. Menu drop-down menawarkan jawaban yang saling eksklusif, sama halnya dengan tombol radio, tetapi memakan tempat yang lebih sedikit pada layar komputer. Jika terdapat 50 atau lebih pilihan, ( misalnya negara bagian untuk alamat surat), menu drop-down lebih baik dibandingkan tombol radio. Tetapi, tombol radio memiliki kelebihan dapat menampilkan semua pilihan kepada pengguna dengan satu tayangan.
13
Area teks memungkinkan beberapa baris ketikan; sedangkan field teks hanya memungkinkan satu baris saja. Sebuah area teks dapat menampung sederet alamat , tetapi perusahaan dapat memecah-mecah alamat menjadi beberapa bagian- kota, negara bagian, dan seterusnya. Pilihan jenis field harus ditentukan oleh bagaimana perusahaan tersebut ingin menampilkan formulir tersebut dan menggunakan informasi yang di kumpulkan.
14
Masing-masing field input memiliki paling tidak dua karakter: sebuah nama field dan sebuah nilai. Suatu field dapat dinamai “Color”, dan nilainya bisa jadi “red”, “white”, “blue”, atau beberapa warna lainnya. Pengguna dapat melihat informasi yang ditampilkan dilayar komputer, tetapi komputer mengenali nama field dan nilai yang dialokasikan untuk field tersebut.
15
KODE HTML UNTUK CONTOH
16
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-jenis dokumen teks.
17
Masukan nama file seperti “Book
Masukan nama file seperti “Book.htm” untuk proyek Anda, tetapi tanpa tanda kutip. Jenis file yang dipilih (yaitu,” Save as type”) haruslah “All files”, dan pengodean harus diset ke “ANSI”. Jika Anda tidak memilih “All files” sebagai jenis file, maka halaman Web bisa jadi tidak akan bekerja, dan lebih buruk lagi, ekstensi “txt” akan ditambahkan pada nama file Anda.
18
MELIHAT HALAMAN WEB Setelah halaman Web telah disimpan, Anda dapat melihatnya untuk memeriksa apakah halaman tersebut bekerja dengan baik. Anda tidak harus menutup program notepad; program ini dapat tetap tebuka ketika Anda dengan browser Web. Bukalah browser Web dan pilihlah perintah “File” diikuti subperintah “Open”. Ketikan nama file atau “Browse” untuk mencarikannya dan klik-lah “OK”. Halaman Web Anda akan muncul.
19
Jika Anda perlu membuat beberapa koreksi, pilihlah editor Notepad lagi
Jika Anda perlu membuat beberapa koreksi, pilihlah editor Notepad lagi. Editlah kode HTML dan simpanlah dokumen tersebut lagi. Setiap kali Anda menyimpan file HTML menggunakan Notepad, amat penting untuk memastikan bahwa jenis file adalah “All Files.” Bukalah ulang browser Web tersebut dan pilihlah perintah “View” diikuti subperintah “Refresh.” Ulangi proses ini hingga Anda merasa puas dengan halaman Web yang dihasilkan.
20
TUGAS UNTUK FORMULIR PEMESANAN Hi-Tech
Presentasi serupa
