MODUL PRAKTIKUM PEMROGRAMAN INTERNET

Transkripsi

1 MODUL PRAKTIKUM PEMROGRAMAN INTERNET PENANGANAN FORM DALAM HTML DAN STYLE SHEET (CSS) DISUSUN OLEH : Astrid Lestari Tungadi, S.Kom FAKULTAS TEKNOLOGI INFORMASI UNIVERSITAS ATMA JAYA MAKASSAR 2014

2 FORM (FORMULIR) Bila Anda suatu ketika ingin memasukkan informasi ke suatu situs web, maka anda memerlukan fasiiltas khusus untuk keperluan tersebut. Dalam HTML Anda dapat membuat tampilan halaman untuk menerima masukan dari pengunjung situs, kemudian menyimpannya di situs Anda atau langsung dimunculkan kembali sebagai suatu halaman. Disinilah perlunya menggunakan form. Elemen form yang ditulis dalam bentuk tag digunakan untuk menangani pemasukan data dalam aplikasi web. HTML5 mendukung elemen-elemen form yang tersedia pada versi sebelumnya dan sekaligus dilengkapi dengan fitur-fitur baru. Selain itu, HTML5 juga menambahkan berbagai kontrol baru. Tabel 1 memperlihatkan seluruh kontrol dalam form dan Tabel 2 menunjukkan browser-browser yang mendukung fitur baru HTML5. Tabel 1. Daftar Kontrol pada Form Kontrol Deskripsi Keterangan button tombol checkbox kotak cek (pilihan bisa lebih dari satu) color roda warna NEW date tanggal tanpa zona waktu NEW datetime tanggal dan waktu (beserta zona waktu) NEW datetime-local tanggal dan waktu (tanpa zona waktu) NEW alamat NEW file pemilih file hidden tidak terlihat image gambar month kontrol bulan (berisi bulan dan tahun, tanpa NEW zona waktu) number memasukkan data dalam bentuk spinner NEW password pemasukan data password radio tombol radio (pilihan hanya satu) range kontrol slider NEW reset tombol reset (mengosongkan form) search field pencari NEW submit tombol pengirim form tel field nomor telepon NEW text field teks time kontrol waktu tanpa zona waktu NEW url field pemasukan URL NEW week kontrol tanggal yang berisi bilangan minggutahun dan bilangan minggu NEW

3 Tabel 2. Browser dan Fitur Baru Kontrol Form yang Didukung Kontrol Chrome Internet Firefox Opera Safari 11 Explorer color x x x x date x x x datetime x x x datetime-local x x x x x month x x x number x x x range x x search x x x time x x x url x x week x x x Disini Anda akan berlatih membuat form dengan segala obyeknya, tetapi hanya sekedar form untuk mengumpulkan data secara interaktif, tanpa memproses data tersebut. Di bagian ini belum akan dibicarakan tentang pemrosesan data, oleh karena itu silakan mencoba-coba setiap objek dalam form saja, dengan berbagai cara penempatannya yang memungkinkan. 1. Field Teks dan Password Nama depan: <input type="text" name="namadepan"> Nama belakang: <input type="text" name="namabelakang"> Password: <input type="password" name="password"> Perhatikan bahwa ketika Anda mengetikkan karakterkarakter dalam suatu field password, browser akan menampilkan asterisk atau bullet saja, bukannya karakter yang diketikkan. 2. Checkbox dan Tombol Radio

4 Saya memiliki sebuah sepeda: <input type="checkbox" name="sepeda"> Saya memiliki sebuah mobil: <input type="checkbox" name="mobil" value="on"> Jenis kelamin Anda? Pria: <input type="radio" name="sex" value="pria"> Wanita: <input type="radio" name="sex" value="wanita" checked> Ketika seorang pengguna memberikan klik mouse pada sebuah tombol radio, tombol tersebut terlihat diberi tanda cek, dan semua tombol lain yang berada dalam nama yang sama akan kehilangan tanda cek-nya 3. Option (Kotak Pilihan Drop Down) Mobil : <select name="mobil"> <option value="volvo">volvo <option value="peugeot">peugeot <option value="fiat" selected>fiat <option value="jaguar">jaguar </select> 4. Tombol dan Fieldset <legend> Informasi kesehatan: </legend> Tinggi : <input type="text" size="3"> Berat : <input type="text" size="3">

5 <input type="button" value="ada tombol disini"> Bila tidak terlihat adanya border di sekeliling form input, browser Anda sudah terlalu lama. 5. Field Input dan Tombol Submit <form name="input" action=" method="get"> Masukkan nama depan Anda: <input type="text" name="namadepan"> Masukkan nama belakang Anda: <input type="text" name="namabelakang" value="mouse"> <input type="submit" value="submit"> Bila Anda meng-klik tombol "Submit", Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c. Lihat pula perbandingan pada input typenya yang ada value dan tidak 6. dan Date <form name="input" action=" method="get"> <legend>kontrol dan Date dalam Form</legend> Nama : <input type="text" name="nama"> <input type=" " name=" "> Tanggal Lahir : <input type="date" name="tgl_lahir">

6 <input type="submit" value="simpan"> Bila Anda meng-klik tombol "Simpan", Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c. Jika Anda tidak divalidasi dan tampilan date Anda secara kalender tidak jalan, Anda harus menjalankannya pada browser Chrome terbaru 7. Range dan Number <form name="input" action=" method="get" oninput="x.value=parseint(a.value)"> <legend>kontrol Range dan Number dalam Form</legend> Bilangan : <input type="number" name="bilangan"> Nilai : 0 <input type="range" id="a">100 = <output name="x" for="a"></output> Points: 0<input type="range" name="points" min="1" max="10">10 <input type="submit" value="simpan"> Bila Anda meng-klik tombol "Simpan", Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c. Jika bilangan, nilai, dan points tampak seperti inputan text saja, Anda harus menjalankannya pada browser Chrome terbaru 8. Tanggal dan Waktu

7 <form name="input" action=" method="get"> <legend>kontrol Tanggal dan Waktu dalam Form</legend> Date : <input type="date" name="tipe_date"> DateTime : <input type="datetime" name="tipe_datetime"> DateTime Local : <input type="datetime-local" name="tipe_datetime_local"> Time : <input type="time" name="tipe_time"> Month : <input type="month" name="tipe_month"> Week : <input type="week" name="tipe_week"> <input type="submit" value="simpan"> Bila Anda meng-klik tombol "Simpan", Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c. Jika semuanya tampak seperti inputan text saja, Anda harus menjalankannya pada browser Chrome terbaru Khusus tipe datetime, hanya bisa jalan pada browser opera dan safari 9. Color <legend>kontrol Warna dalam Form</legend> Warna : <input type="color" name="warna"> <input type="submit" value="simpan">

8 Bila Anda meng-klik tombol "Simpan", Anda akan mengirim input yang dimasukkan lewat form di atas ke pemroses yang bernama form_action.asp di situs w3c. Jika warna tampak seperti inputan text saja, Anda harus menjalankannya pada browser Chrome terbaru 10. Atribut Placeholder <legend>menggunakan Placeholder</legend> Nama : <input type="text" name="nama" placeholder="diisi yaa"> <input type="submit" value="simpan"> Jika nama tampak seperti inputan text saja, Anda harus menjalankannya pada browser Chrome terbaru 11. URL dan Datalist <legend>kontrol URL dan Datalist</legend> Add your homepage : <input type="url" name="homepage"> Jenis Browsers : <input list="browsers" name="browser"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist> <input type="submit">

9 Jika homepage Anda tidak divalidasi dan jenis browsers Anda tampak seperti biasa saja, Anda harus menjalankannya pada browser Chrome terbaru

10 STYLE SHEET (CSS) Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan tersebut, Anda dapat menggunakan style sheet atau CSS. CSS tidak hanya dapat membuat tampilan nampak lebih baik, tetapi dapat membuat pengembangan halaman web menjadi jauh lebih efisien karena menghilangkan semua kesulitan yang muncul pada halaman web biasa tanpa style. CSS (Cascading Style Sheet) merupakan fitur yang penting dalam pembuatan Dynamic HTML (DHTML). Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan feature yang digunakan untuk memformat & membuat layout halaman web. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakannya. Cascading Style Sheets (CSS) dapat diinterpretasikan melalui 4 cara, yaitu sebagai berikut : 1. Secara Inline Style Jika suatu perintah CSS diinterpretasikan secara inline maka akan tampak sebagai berikut : <head><title>my Personal Website</title></head> <p style="text-align:center; letter-spacing:5em; font:normal 20pt 'arial'">welcome To My Website 2. Secara Eksternal Jika suatu perintah CSS akan direpresentasikan secara eksternal maka akan terlihat sebagai berikut : File style.css h1 { text-align : center; letter-spacing : 5em; background : green; color : yellow; font : normal 20pt Arial ; } File index.html <head><title>my Personal Website</title></head> <link rel= stylesheet type= text/css href= style.css >

11 <h1>welcome to My Website</h1> 3. Secara Embedding Jika suatu perintah CSS akan direpresentasikan secara embeded maka akan terlihat sebagai berikut : <head> <title>my Personal Website</title> <style type= text/css > p { text-align : left; letter-spacing : 5em; } </style> </head> Welcome to My Website Jika anda ingin menggunakan perintah CSS dalam file HTML anda, maka perintah CSS selalu diawali dan diakhiri dengan tag <style> </style>. 4. Secara Import Jika suatu perintah CSS akan direpresentasikan secara import maka akan terlihat sebagai berikut : File style.css h1 { text-align : center; letter-spacing : 5em; background : green; color : yellow; font : normal 20pt Arial ; } File index.html <head> <title>my Personal Website</title> <style type= text/css url( style.css ); </style> </head> <h1>welcome to My Website</h1>

12 1. Buatlah kesimpulan dari video yang Anda pelajari tadi dalam bentuk softcopy 2. Buatlah sebuah template sederhana dengan menggunakan HTML dan CSS dengan bentuk tampilan dasar seperti di bawah ini dimana 4 menu tersebut terlink yang berisi atribut, elemen, tag terbaru yang dimiliki oleh HTML dan CSS (Penggunaan warna tidak terikat)