MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester

Kelas PKKP

Dosen Jefri Rahmadian S.Kom

Pertemuan : 10 (sepuluh) Waktu : Minggu,....... 2011

Modul 10 (sepuluh)

Topik Merancang Form

Sub Topik Membuat Form dengan Dreamwaver

Materi  Form
 Text Field, Text Area
 List Menu, Jump Menu
 Button, Label,
Tujuan Mahasiswa memahami dan mengetahui cara merancang form
untuk aplikasi berbasis web dengan menggunakan Dreamwaver.
Membuat Form dengan Dreamwaver

Penggunaan Tetxt Field dan Text Area

Text Field dan Text Area merupakan tempat yang digunakan untuk memasukan atau
menginputkan text. Berikut contoh penggunaan Text Field dan Text Area yang akan dibuat
dengan menggunakan dreamwaver beserta langkah-langkahnya.

1. Tambahkan form melalui menu Insert Form  Form atau klik simbol pada
toolbar. Maka akan tampak seperti gambar
dibawah

2. Tambahkan Table sesuai jumlah field serta button yang akan digunakan agar
tampilan form lebih rapi. Pilih menu Insert  Table. Untuk contoh kasus kali ini, kita
akan menambahkan tabel dengan pengaturan sebagai berikut :
3. Kemudian isikan tabel sehingga berbentuk seperti gambar dibawah

4. Selanjutnya adalah memberikan isian (input) form.

a. Tempatkan kursor di cell sebelah kanan Nama, kemudian pilih Insert 
Form Textfield.

b. Tempatkan kursor di cell sebelah kanan Email, kemudian pilih Insert 

Form Textfield.
c. Untuk pesan tempatkan kursor di cell sebelah kanan Pesan, kemudian pilih
Insert  Form Textarea
 .
5. Selanjutnya akan ditambahkan Button (tombol). Caranya dengan memilih
Insert  Form  Button dan ditempatkan pada tabel yang terakhir,
 dan pada panel properties isi nama pada Value dengan Daftar

6. Hasil akhirnya dapat dilihat pada gambar dibawah (hasil yang dilihat pada
dreamwaver)

7. Hasil akhir yang dapat dilihat pada browser adalah seperti gambar dibawah

Penggunaan Tetxt Field untuk halaman Login

Berikut contoh penggunaan Text Field untuk halaman login dengan menggunakan
dreamwaver beserta langkah-langkahnya.
1. Tambahkan form melalui menu Insert Form  Form atau klik simbol pada
toolbar. Maka akan tampak seperti gambar
dibawah

2. Tambahkan Table sesuai jumlah field serta button yang akan digunakan agar
tampilan form lebih rapi. Pilih menu Insert  Table. Untuk contoh kasus kali ini, kita
akan menambahkan tabel dengan pengaturan sebagai berikut :

3. Kemudian isikan tabel sehingga berbentuk seperti gambar dibawah

4. Selanjutnya adalah memberikan isian (input) form.
a. Tempatkan kursor di cell sebelah kanan User Id, kemudian pilih Insert 
Form Textfield.

Isi Max Chars = 30 (Panjang User Id), Char widht = 50 (panjang textfield)
dan pilih Type = Single Line

b. Tempatkan kursor di cell sebelah kanan Password, kemudian pilih Insert 

Form Textfield.
 Isi Max Chars = 15 (Panjang password), Char widht = 30 (panjang textfield)
dan pilih Type = Password

5. Selanjutnya akan ditambahkan Button (tombol). Caranya dengan memilih

Insert  Form  Button dan ditempatkan pada tabel yang terakhir dan pada panel
properties isi nama pada Value dengan Daftar

6. asil akhirnya dapat dilihat pada gambar dibawah (hasil yang dilihat pada dreamwaver)

Penggunaan Jump Menu

Jump menu memberikan fungsi menu untuk diarahkan pada alamat yang akan dituju.Berikut
contoh penggunaan Jump Menu menggunakan dreamwaver beserta langkah-langkahnya.
1. Tambahkan form melalui menu Insert Form  Form atau klik simbol pada
toolbar. Maka akan tampak seperti gambar dibawah

2. Tempatkan kursor di form, kemudian pilih Insert  Form Jump Menu.

3. Setealah di pilih Jump Menu akan muncul window option untuk Jump Menu.
Kemudian lakukan setingan untuk jamp menu pada window option Jump Menu
seperti gambar dibawah.
4. Untuk mengganti Link setiap menu yang sudah dibuat pilih List Value yang ada pada
panel properties

Kemudian ganti Value dengan alamat dari link yang akan dibuka
Penggunaan File Field Input Berita
File Field digunakan untuk memilih file yang akan diupload. Berikut contoh penggunaan File
Field untuk halaman Postingan berita dengan menggunakan dreamwaver beserta
langkah-langkahnya.

1. Tambahkan form melalui menu Insert Form  Form atau klik simbol pada
toolbar. Maka akan tampak seperti gambar dibawah

2. Tambahkan Table sesuai jumlah field serta button yang akan digunakan agar
tampilan form lebih rapi. Pilih menu Insert  Table. Untuk contoh kasus kali ini, kita
akan menambahkan tabel dengan pengaturan sebagai berikut :

3. Kemudian isikan tabel sehingga membentuk seperti gambar dibawah

4. Selanjutnya adalah memberikan isian (input) form.

a. Tempatkan kursor di cell sebelah kanan Judul, kemudian pilih Insert 
Form Textfield.
b. Tempatkan kursor di cell sebelah kanan Ketikan Berita, kemudian pilih
Insert  Form File Field.
c. Untuk Berita tempatkan kursor di cell sebelah bawah Ketikan Berita,
kemudian pilih Insert  Form Textarea
5. Selanjutnya akan ditambahkan Button (tombol). Caranya dengan memilih
Insert  Form  Button dan ditempatkan pada tabel yang terakhir,
Dan pada panel properties nama dapat diganti dengan mengisi nama pada Value
sesuai keinginan