The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3 Dan Pemrograman PHP Dan MYSQL

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by Perpus Kota Semarang, 2018-10-30 09:04:06

Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3 Dan Pemrograman PHP Dan MYSQL

Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3 Dan Pemrograman PHP Dan MYSQL

Aplikasi Web Database

Adobe Dreamweaver (S3

Cflrri)

Pemroeraman PHP &MySQl



Aplikasi Web Database

• '~ lJ; &m /I j 6f!t 1; •

Adobe Dreamweaver £S3

C[fm

Pemrottraman PDP &MySQL

Diterbitkan Atas Ke1jasama

PENERBIT ANDI ®

Aplikasi web Database Menggunakan Adobe Dreamweaver CS3 &
Pemrograman PHP dan MySQL

Hak Cipta <0 2008 pada MADCOMS.

Jl. Letjend. Haryono 63 Madiun 63139 Telp. (0351) 453286, Fax. (0351) 492026
e-mail: [email protected] Website: http:/www.madcoms.com

Editor : Oktaviani HS
Setting : Sri Sulistiyani
Desain Cover : Bowo
Korektor : Suci Nurasih / Aktor Sadewa

Diterbitkan atas kerjasama Penerbit ANDI Yogyakarta
dengan MADCOMS

Hak Cipta dilindungi undang-undang.
Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku ini dalam
bentuk apapun, baik secara elektronis maupun mekanis, termasuk memfotocopy,
merekam atau dengan sistem penyimpanan lainnya, tanpa izin tertulis dari Penulis.

Penerbit: C.V ANDI OFFSET (Penerbit ANDI)
Jl. Beo 38-40, Telp. (027 4) 561881 (Hunting), Fax. (027 4) 588282
Yogyakarta 55281

Percetakan: ANDI OFFSET
Jl. Beo 38-40, Telp. (027 4) 561881 (Hunting), Fax. (027 4) 588282
Yogyakarta 55281

Perpustakaan Nasional: Katalog dalam Terbitan (KDT)

Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3 &

Pemrograman PHP dan MySOL/
- Ed. I. - Yogyakarta: ANDI; Madiun: MADCOMS
17 16 15 14 13 12 11 10 09 08

xiv + 226 him.; 16 x 23 Cm.

10 9 8 7 6 5 4 3 2
ISBN: 978 - 979 - 29 - 038Q- 5
I. Web Programming
1. MADCOMS

DDC'21 : 005.304

Kata Pengantar

Puji syukur kami panjatkan kepada Tuhan YME atas rahmat dan karunia-
Nya buku "Aplikasi Web Database Menggunakan Adobe Dreamweaver
CS3: Pemrograman PHP dan MySQL" dapat terselesaikan dengan baik.
Tak lupa kami ucapkan banyak terima kasih atas kepercayaan para
pembaca yang telah menggunakan buku ini sebagai panduan dan
referensi dalam belajar membuat website.
Buku ini sangat cocok bagi Anda yang ingin membuat aplikasi
pemrograman PHP dan MySQL sebagai sebuah sarana untuk mem-
bangun database berbasis web. Bahasan dalam buku ini memberikan
pula contoh aplikasi lengkap dengan listing script dan penjelasannya.
Materi dalam buku ini ditujukan bagi pemula dan menengah yang ingin
membuat aplikasi web yang interaktif dengan menggunakan bahasa
yang singkat dan sistematis. Dengan demikian, Anda dapat lebih mudah
memahami tiap-tiap bagian script dalam buku ini. Setiap kelompok
bagian fungsi yang ada dalam proyek ini dimasukkan ke dalam bab-bab
yang terpisah, sehingga Anda akan lebih mudah mempelajarinya.
Akhir kata, Tim Litbang MADCOMS Madiun mengucapkan terima kasih
kepada Penerbit ANDI Yogyakarta yang telah membantu proses
penerbitan buku ini. Harapan kami, semoga buku ini dapat bermanfaat
untuk menambah wawasan serta pengetahuan pembaca, khususnya
dalam bidang komputer.

Madiun, Januari 2008
Tim Divisi Penelitian dan Pengembangan

MADCOMS- MADIUN

iv Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Daftar lsi

Kata Pengantar ................................................................................. iii
Daftar lsi ............................................................................................ v

BAB 1 1
MENGINTIP VERSI ANYAR DREAMWEAVER CS3 .....
2
1.1 Welcome to Adobe Dreamweaver CS3 .................................. 4
1.2 Elemen Dreamweaver CS3 .................................................... 5
5
• Mengenallnsert Bar........................................................ 7
• Mengenal Status Bar....................................................... 8
• Mengenal Toolbar Document.......................................... 8
• Mengenal Toolbar Coding ............................................... 10
• Mengenal Tool bar Style Rendering .................................
1.3 Mengenal Panel Properties ....................................................
1.4 Kelebihan Dreamweaver CS3 ................................................

BAB 2 11
MEMBUAT TABEL DAN FORM.....................................
11
2.1 Mendesain Halaman Web dengan Tabel ..... .......................... 11
• Membuat Tabel........................................ ........................ 15
• Menambah Baris dan Kolom ........................................... 17
• Mengubah Properti Sel Tabel.......................................... 19
19
2.2 Membuat Form........................................................................ 21
• Menyisipkan Form ...........................................................

2.3 Menyisipkan Text Field...........................................................

vi Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

• Mengatur Properti Text Field Tipe Single Line................ 22
• Mengatur Properti Text Field Tipe Multi Line ... ... .......... .. 24
• Mengatur Properti Text Field Tipe Password.................. 25
2.4 Menyisipkan Hidden Field....................................................... 25
2.5 Menyisipkan Text Area .. ...... ........ .. .. ...... .. ..... .. ......... .. ... .. ... .. ... 26
2.6 Menyisipkan Checkbox........................................................... 26
2.7 Menyisipkan Radio Button...................................................... 27
2.8 Menyisipkan Radio Group...................................................... 28
2.9 Menyisipkan List/Menu ...... .... ............. .......... ..... .. ..... .... .......... 29
• Menggunakan List sebagai Pilihan.................................. 30
• Menggunakan Menu sebagai Pilihan .. .......... .................. 31
2.10 Menyisipkan File Field ............ ....... .. ............... ........... .......... ... 32
2.11 Menyisipkan Button................................................................. 33

BAB 3 35

MENGINSTAL APACHE, PHP, dan MySQL..... 35
39
3.1 Menginstal Apache .. ....... .............. .. .... .... .. .. ..... ..... ......... ....... .. 41
3.2 Menginstal Modul PHP ........................................................... 43
3.3 Mengatur Konfigurasi PHP. .... .. .. ......... ...... .. ... ....... ... ... ..... ...... 43
3.4 Mengatur Konfigurasi Apache ........ .. .. ............. .. ... .... ..... .. ....... 45
3.5 Menginstal MySQL..............................:.. ·································
3.6 Mengatur Konfigurasi Database MySQL ............ ....................

BAB 4 49
MENGENAL ADOBE PHOTOSHQP. CS3 ......................
49
4.1 Memulai Adobe Photoshop CS3............................................. 49
4.2 Elemen Adobe Photoshop CS3 ..... .. ........ ..... ................ ..... ..... 51

• Mengenal Toolbox...........................................................

Daftar lsi vii

• Menggunakan Gradient Tool........................................... 55
• Mengenal Palet................................................................ 59
4.3 Membuat Lembar Kerja Baru .. .. .. .. .... .. .. .. .. .. ... ........ ...... .. ..... .... 64
4.4 Bekerja dengan Palet Layers.................................................. 65
• Membuat Layer Baru ....... .. ...... .. ...... .. .. .. ... ...... .. ... ... .. .. ... .. 65
• Mengatur Urutan Layer.................................................... 65
• Mengelompokkan Layer.................................................. 66
• Mengunci Layer ............................................................... 67
• Menghapus Layer............................................................ 67
• Mengatur Transparansi Layer ... ..... ... .. .. ..... .. .... ... .. ... .. .. ... 68
4.5 Membuat Point Type............................................................... 69
• Mengedit Teks ................................ .................. .......... ..... 70
• Menggunakan Warped Text............................................ 70
4.6 Mengenal Shape..................................................................... 71
• Membuat Shape.............................................................. 71
• Membuat Custom Shape................................................. 72
• Membuat Style Shape ........ .... .. .... .. .. .. .. .. .. ................ ...... . 72

BAB 5 75
Mengenal HTML dan PHP .............................................
75
5.1 Mengenal HTML dan PHP ...................................................... 76
5.2 Mengenal Tag Dalam HTML................................................... 78
78
• Membuat Paragraf dengan Tag HTML............................ 78
• Tag HTML untuk Membuat Line Break............................ 78
• Membuat Heading dengan Tag HTML...... ... ...... ... .... ...... 79
• Mengatur Perataan dengan Tag HTML........................... 79
• Tag HTM untuk Membuat Garis Horizontal..................... 79
• Menyisipkan Keterangan Dalam Script HTML .... .. .. ........
• Memformat Teks..............................................................

viii Aplikasi Web Database Menggunakan Adobe Dreamweaver C53

• Menggunakan Tag Abbr dan Acronym............................ 80
• Membuat Link................................................................. 81
5.3 Mengenal Script PHP.............................................................. 81
5.4 Mengenal Beberapa Fungsi Dalam PHP ................................ 81
• Fungsi Date ..................................................................... 81
• Fungsi Mktime ..................... ................................ ............ 83
• Fungsi Include ..... ........ .... .. ..... .. ........ ..... .. ..... ................. .. 84
5.5 Membuat Variabel di PHP ...................................................... 85
5.6 Mengenal Tipe Data di PHP .. .. ..... ................. ......................... 85
5.7 Mengenal Operator di PHP..................................................... 85
• Operator Aritmatika.......................................................... 86
• Operator Assignment....................................................... 86
• Operator Pembanding ..................................................... 87
• Operator Logika. ....... .. ...... .. .. .. .. ... ..... ........ .. .............. ....... 88
5.8 Mengenal Struktur Kendali Program PHP ...... ..................... ... 89
• Fungsi If........................................................................... 89
• Pernyataan Switch........................................................... 91
• Pernyataan While ......... .... .. .. ... .......... .... .............. ............ 92
• Pernyataan For................................................................ 93
5.9 Mengenal Array....................................................................... 95
5.10 Mengenal Operasi File............................................................ 96
• Memeriksa Keberadaan File............................................ 96
• Mengakses File................................................................ 97
• Membaca lsi File.............................................................. 97
5.11 Apa Session ltu....................................................................... 97
• Membuat Session............................................................ 97
• Membuat Session dengan Session_Register() .......... ..... 98
• Mengecek Hasil Registrasi .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. 98

Daftar lsi ix

BAB 6
MEMBUAT LAYOUT HALAMAN WEB .......................... 101

6.1 Mendefinisikan Situs............................................................... 101
6.2 Membuat Header Website...................................................... 104
6.3 Mengoptimasi Halaman Web.................................................. 114
6.4 Menyimpan Desain Header.................................................... 115
6.5 Membuat Halaman Pertama And a ............. ..... ...... ...... .. ... .. .... 117
6.6 Membuat Tampilan Penuh Gaya ... .. ............... ......... ............... 120

BAB 7
MEMPERSIAPKAN DATABASE SERVER .................... 123

7.1 Mem buat Database................................................................. 123
7.2 Membuat Tabel....................................................................... 125

BAB 8
MEMBUAT PEMROGRAMAN WEB DENGAN
DREAMWEAVER CS3 ................................................... 131

8.1 Koneksi ke Database.............................................................. 131
8.2 Membuat Halaman Admin ...... .. .. .. .................... ...... ... ..... ... .. ... 133

• Membuat Bagian Login.................................................... 133
• Membuat Bagian Log Out.. ............................... :.............. 135
• Membuat Bagian Admin ............ ............. ..... .... ... .. ........... 135
8.3 Membuat Halam an Kategori .. .. .... .. ............... ............ ..... .. ....... 138
• Menampilkan Kategori ..................................................... 138
• Membuat Halam an untuk Memasukkan Kategori ..... ...... 143
• Membuat Halaman untuk Memperbarui Kategori........ .... 146
• Membuat Halam an untuk Menghapus Kategori ........... ... 149
8.4 Membuat Halaman Berita ....................................................... 151

x Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

• Menampilkan Berita......................................................... 151
• Membuat Halaman untuk Memasukkan Berita .. ............. 153
• Membuat Halaman untuk Memperbarui Berita................ 156
• Membuat Halaman untuk Menghapus Berita ............... ... 164
8.5 Membuat Halaman Management User................................... 168
• Menampilkan User........................................................... 168
• Membuat Halaman untuk Update User........................... 175
• Membuat Halaman untuk Hapus User ..... ..... .... ....... ....... 176
8.6 Membuat Halaman untuk User............................................... 179
• Membuat Halaman Pendaftaran ... ... .. .. .. ... ..... ................ .. 179
• Membuat Halaman untuk Berita User............................. 179
8.7 Membuat Fasilitas untuk Area Publik ..................................... 180
• Menampilkan Berita Terbaru ... .... ... ..... .. .. ... .. ................... 180
• Menampilkan Kategori .......... .. .. .. ... .. ... .. .. ..... .... .......... ...... 182
• Menghitung Jumlah Pengunjung. .. .. .. .. .. ... .. ... ...... ............ 188

BAB 9
MENGGABUNG DESAIN DAN PEMROGRAMAN WEB 189

9.1 Mempersiapkan Halaman Web ... ............ ..... ........... ............... 189
9.2 Membuat Bagian Header........................................................ 190
9.3 Membuat Menu Bag ian Kiri .. .. .. .. .. .. ...... .... ..... .. ..... .... ............ .. 191
9.4 Membuat Bagian Footer......................................................... 192
9.5 Memasang Script Berita Baru .... .. .. .. ........ .. .. ....................... .... 193

• Membuat Halaman lndex/Home.PHP ........ ................ ..... 193
• Membuat Halaman Kategori Berita ......... ....... ................. 194
• Membuat Halaman Profil. ........... ... .. ..... .. ....... ......... ......... 195
9.6 Menguji Hasil Penggabungan Desain dan Pemrograman...... 196
9.7 Web Saya yang Pertama........................................................ 197

Daftar lsi xi

BAB 10
PUBLIKASI WEBSITE KE INTERNET ........................... 201

10.1 Upload Data............................................................................ 201
10.2 Web Hosting Gratis................................................................. 207
10.3 Web Hosting Komersial .......................................................... 213
10.4 Proses Upload ........................................................................ 213
10.5 Meng-upload Database........................................................... 220

xii Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Bab 1

Mengintip Versi Anyar
Drea111~eaver CS3

Drean1weaver merupakan salah satu software dari kelompok Adobe
yang banyak digunakan untuk 1nendesain situs web. Adapun Adobe
Dreamweaver sendiri adalah sebuah HTML editor profesional yang
berfungsi 1nendesain secara visual dan mengelola situs web maupun
halaman web.

1.1 Welcome to Adobe Dreamweaver CS3

Drean1weaver 1nerupakan tool terbaik untuk n1embuat situs n1enarik,
bahkan mungkin menakjubkan. Men1ang tidak semudah menlbalik-
kan telapak tangan, tapi tidak sulit untuk berlatih dan kemudian
mengoperasikan Dremnweaver.
Dreamweaver CS3 n1erupakan versi terbaru yang memiliki performa
lebih baik dan memiliki tan1pilan yang Inemudahkan Anda untuk
membuat halaman web, baik saat Anda sedang bekerja dalan1 jendela
desain maupun dalam jendela kode run1us.
Untuk memulai penggunaan Drean1weaver CS3, kliklah ton1bol Start
> All Programs > Adobe Design Premium CS3 > Adobe
Dreamweaver CS3.

2 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Saat pertama kali Anda menjalankan Dreamweaver CS3, Welcome
Screen akan tampil. Apabila tidak mendapati Welcome Screen, Anda
dapat menampilkannya dengan klik menu Edit > Preferences,
ken1udian akan n1uncul kotak dialog Preferences. Pilihlah
Kategory - General, lalu aktifkan kotak dan periksa Show
Welcome Screen.

Welcome Screen memberi kemudahan dalam mengakses tutorial
Dreamweaver, n1emilih file yang sudah terbuka, membuat halaman
baru, n1en1buat halan1an dari contoh dan Dreamweaver Exchange,
serta masih banyak lagi.

Open ' ' HTML C~:s '~tyle Sheet
ColdFu::::1on Frame set
, .., Getting Started " PHP
New Feattlres » ASP VBScript rL,I1ote

Re~.ource:::.: '3- '" XSL T (Entwe page}

~ css

.lavaScnpt
- XML

Dr e.-:urr·Neaver Site
More

Gambar 1. 1 Welcome Screen

1.2 Elemen Dreamweaver CS3

Dalan1 ruang kerja Dreamweaver CS3, ada beberapa elemen utama
yang membentuk suatu ruang kerja yang merupakan satu kesatuan
tan1pilan antara menu utama, panel, property inspector, serta
toolbar. Perhatikan ruang kerja Drean1weaver pada gambar berikut:

Bab 1 Mengintip Versi Anyar Dreamweaver CS3 3

A Bc D

r~·ly Computer

+ "";; r'lY Network Places
~.lil FTP 2:. PDS Servers

+ _,__J Desktop items

Default Font v St::,::le None
v 2_ize ~

E FG

Gambar 1.2. Ruang Kerja Dreamweaver CS3.

A. Insert bar berisi to~boi-tombol untuk menyisipkan berbagai
macam objek, seperti: lll}age, tabel, dan frame, ke dalam
dokumen.

B. Document toolbar berisi tombol-tombol menu pop-up yang
n1enyediakan tampilan berbeda Document Window, n1isalnya
Code, Split, atau Design. ·

C. Document window berfungsi menmnpilkan dokumen di mana
Anda bekerja sekarang-.

D. Panel groups adalali kllmpulan panel yang saling berkaitan

.satu san1a lainnya yang dikelon1pokkan di bawah satu judul.

4 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

E. Tag selector berfungsi menampilkan hierarki tag di sekitar
pilihan yang aktif pada Design View.

F. Property inspector berfungsi melihat dan mengubah berbagai
properti objek yang terpilih.

G. Files panel berfungsi n1engatur file-file dan folder-folder yang
membentuk situs web Anda.

Mengenal Insert Bar

' T Insert Common Layout • Forms Data Spry Text Favorites

Gambar 1.3 Insert bar

• Common berisi tombol untuk membuat dan n1emasukkan
data yang sering digunakan, misalnya gan1bar dan tabel.

• Layout berisi tombol untuk memasukkan tabel, div tags,
dan Spry widgets. Anda dapat pula men1ilih tan1pilan tabel,
yaitu Standard (default) dan Expanded. Fungsinya untuk
memudahkan pengaturan tabel dalan1 hala1nan web Anda.

• Forms berisi tombol untuk men1buat form dan elemen-
elemen forn1 yang lain, tern1asuk elemen Spry.

• Data untuk men1udahkan penggunaan Spry seperti
recordset, repeated regions, serta record insertion dan forn1
untuk update data.

• Spry terdiri atas tombol-tombol untuk n1e1nbuat halan1an
web dengan Spry, termasuk pengolahan data dengan Spry
dan Widgets.

• Text untuk menambahkan teks dan men1odifikasi teks
agar terlihat lebih n1enarik seperti b, en1, p, hl, dan ul.

• Favorites berfungsi mengelompokkan elen1en Insert bar
yang sering Anda gunakan dalan1 satu tempat.

• Server-code hanya terdapat pada halaman web yang
menggunakan bahasa pemrograman seperti ASP,

Bab 1 Mengintip Versi Anyar Dreamweaver CS3 5

ASP.NET, CFML Basic, CFML Flow, CFML Advanced,
JSP, dan PHP.

Mengenal Status Bar

Gambar 1.4 Status Bar

A. Tag selector menunjukkan tag (bagian HTML) yang
sedang dipilih. Kliklah <body> untuk n1en1ilih bagian body
seluruh halan1an.

B. Select tool untuk n1engaktifkan dan menon-aktifkan Hand
tool.

C. Hand tool untuk n1emilih halaman yang sedang kita buat
dan n1enggeser atau 1nengatur posisi tampilan halan1an.

D. Zoom tool untuk 1nengatur ukuran tmnpilan halaman.

E. Set magnification untuk mengatur ukuran tampilan
halan1an.

F. Window Size merupakan menu yang hanya muncul pada
tan1pilan Design View. Ukuran halaman web Anda
ditampilkan di sini.

G. Document size and estimated download time
menunjukkan besar halan1an web dalam ukuran byte dan
lan1a untuk n1en-download halamannya, termasuk sen1ua
elemen halaman seperti gambar atau file lain.

Mengenal Toolbar Document

( D E F (, H
L.Urotitl~d ~1!.Title: :
Doctmerot ,L Check Page

Gam bar 1. 5 Toolbar Document

6 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

A. Show Code View untuk menampilkan baris kode dalam
halan1an web Anda.

B. Show Code and Design Views untuk men1bagi dua
halaman Dreamweaver dan Ihenampilkan bagian Code
dan Design View. Ketika memilih kombinasi demikian,
pilihan Design View di atas akan tidak aktif pada menu
View Option.

C. Show Design View untuk menampilkan Design View
pada halaman web Anda.

D. Document Title untuk memberi nama halaman web Anda
yang akan muncul pada title bar halaman browser sebelah
kiri atas. Jika halaman web Anda sudah diberi nama maka
namanya akan muncul pada bagian ini.

E. File Management untuk inenampilkan daftar n1enu File
Management.

F. Preview/Debug in Browser untuk melihat hasil
tampilan halaman web yang Anda buat di dalam browser.
Pilihlah browser yang Anda inginkan dalam menu.

G. Refresh Design View untuk n1e-refresh halaman web
yang Anda buat ketika Anda sudah membuat perubahan
pada bagian kode. Perubahan demikian tidak secara
otomatis muncul pada tan1pilan Design sampai Anda
melakukan aksi lain, seperti menyimpan halaman tersebut
atau mengklik ton1bolnya.

H. View Options untuk membantu Anda mengatur tan1pilan
pada Code View, Design ,Vjew, n1aupun keduanya.
Contohnya dalam Code View adalah memberikan angka
pada setiap baris program dengan mengklik menu View
Options > Line Numbers. Fungsinya untuk memper-
mudah pencarian kesalahan pada baris program.

I. Visual Aids untuk membantu Anda n1elihat desain yang
Anda buat dalam berbagai tan1pilan. Contohnya, pilihlah
Visual Aids > Frame Borders, lalu akan tan1pak pada
Design View garis tepi atau border pada desain Anda.

J. Validate Markup untuk m~n1validasi program HTML
yang sedang Anda kerjakan.

Bab 1 Mengintip Versi Anyar Dreamweaver CS3 7

K. Check Browser Compatibility untuk mengetahui
apakah CSS yang Anda buat dapat berjalan semestinya
pada browser yang berbeda.

Mengenal Tool bar Coding

Toolbar Coding terdiri atas tombol-tombol yang membantu
Anda 1nelakukan banyak operasi pengkodean. Toolbar Coding
hanya akan muncul pada saat Anda bekerja dengan tampilan
Code View dan muncul secara vertikal pada bagian kiri
halan1an web yang sedang dibuat.

++

~:::;

Gambar 1.6 Toolbar Coding

Anda tidak bisa memindahkan toolbar Coding, tetapi bisa
menyembunyikannya. Anda bisa pula menambahkan tombol
lain (misalnya Word Wrap, Show Hidden Characters, dan Auto
Indent) atau menyen1bunyikan tombol yang jarang Anda
gunakan.

8 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Mengenal Toolbar Style Rendering

Toolbar Style Rendering terdiri atas ton1bol yang dapat Anda
gunakan untuk melihat tampilan desain halaman web yang
Anda buat pada berbagai media. Toolbar meliputi pula tombol
yang dapat memunculkan atau menghilangkan style CSS.
Untuk menampilkannya, pilihlah View> Toolbars > Style
Rendering.

[)

Gam bar 1. 7 Toolbar Style Rendering

Secara default, Dreamweaver menan1pilkan desain Anda pada
tampilan layar kon1puter. Anda dapat pula mmnilih tampilan
pada halaman yang lain, di antaranya:
• Render Screen Media Type untuk menan1pilkan

halaman yang ditampilkan pada layar komputer.
• Render Print Media Type untuk n1enampilkan halaman

sebelu1n dicetak pada kertas (print preview).
• Render Handheld Media Type untuk menunjukkan

tan1pilan halaman web Anda pada perangkat elektronik,
seperti telepon selular atau Blackberry.
• Render Projection Media Type untuk n1enunjukkan
tampilan halaman Anda pada layar LCD.
• Render TTY Media Type untuk menunjukkan tampilan
halaman Anda pada teletype.
• Render TV Media Type untuk n1enunjukkan halaman
yang ditampilkan pada layar televisi.
• Toggle Displaying of CSS Styles untuk men1bantu Anda
dalam menggunakan style CSS.

1.3 Mengenal Panel Properties

Panel Properties digunakan untuk melihat dan mengubah berbagai
properti objek dan teks yang terpilih. Setiap objek n1emiliki properti

Bab 1 Mengintip Versi Anyar Dreamweaver CS3 9

yang berbeda-beda. Misalnya, gambar memiliki properti-properti
seperti yang tampak pada Gambar 1.8. Pada Panel Properties,
Anda dapat mengetahui nama gambar, ukuran gambar, atribut fisik
gambar seperti lebar dan tinggi, dan sebagainya.

.U ll~oJ.: jmogL9KDEF G H

& "' L,,.,j~,,,. ·~
h Link .e_to•i.·nse·lo.::ncex.l'trl tJ. _:_]

Target v Borc::er -- -
(;} __) AhgP
LO',\' Src QI 'V
f'"' R
I 0
p
~·J

Gambar 1.8 Panel Properties

A. Ketika Anda mengklik suatu gan1bar dalam Design View, n1aka
thun1bnail kecil akan ditan1pilkan pada kotak ini.

B. N an1a gambar memungkinkan Anda menelusuri apa pun yang
ada dalam halaman.

C. Ukuran gambar menunjukkan besar gambar dalam byte yang
akan Anda gunakan dalam n1erancang halan1an web.

D. Ukuran gambar secara fisik yang menunjukkan lebar dan tinggi
ukuran piksel.

E. Lokasi gambar di dalam situs yang terletak di sini.

F. Isikan alamat URL di sini jika gambar digunakan sebagai link.

G. Jelajahi harddisk untuk mencari file yang Anda inginkan atau
ingin disertakan pada halaman.

H. Tag Alt men1ungkinkan Anda n1elampirkan informasi teks pada
suatu gan1bar.

I. Klik logo Fireworks untuk mengoptimalkan gan1bar dalam
aplikasi atau melakukan perubahan dengan tombol-tombol
editing gambar baru.

J. Jika Anda menggunakan image map pada halaman Anda maka
gambar yang sedang dipilih akan tampil di sini.

10 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

K. Dengan menggunakan tombol ini, Anda dapat membuat hotspot
berbentuk lonjong.

L. Anda dapat menggunakan hotspot polygonal untuk gambar yang
lebih presisi.

M. Area halaman yang dicakup hotspot disajikan di sini dalam
format lebar dan tinggi standar.

N. Semua hotspot harus dihubungkan (link) ke tujuan tertentu dan
bagian ini memungkinkan Anda menentukan bagaimana link
akan dibuka.

0. Anda dapat mendefinisikan link dengan mengisikannya di sini.
P. Berikan tepi untuk potongan gambar Anda dengan menggunakan

setelan ini.
Q. Tentukan perataan gambar secara vertikal dalam wadahnya

dengan menggunakan menu drop down yang termuat di sini.
R. Ratakan gan1bar secara horizontal dengan bantuan tombol-

ton1bol peralatan yang ada di sini.

1.4 Kelebihan Dreamweaver CS3

Banyak kelebihan dalmn Dreamweaver CS3, di antaranya adalah:
• Dapat digunakan pada dua sistem operasi, yaitu Macintosh atau

Windows.
• Dapat dilihat tampilan website preview pada komputer, ponscl

atau PDA, dan printer.
• Membangun web dengan CSS dengan menggunakan CSS layout,

CSS panel, dan CSS visualization.
• Fasilitas lengkap pendukung CSS.
• Kemudahan pengelolaan data dengan forn1 maupun Spry data

object.
Agar lebih mengetahui apa kelebihan Dreamweaver CS3, mari kita
melanjutkan ke bah berikutnya.

Bab2

Mernbuat Tabel dan Form

2.1 Mendesain Halaman Web dengan Tabel

Tabel merupakan salah satu fasilitas untuk mendesain halaman web.
Dengan menggunakan tabel, Anda akan lebih mudah memodifikasi
situs web yang Anda buat. Dalam Dreamweaver, tabel yang
digunakan ada dua jenis, yaitu tabel biasa dan layout tabel.

Membuat Tabel

Untuk membuat tabel, Anda dapat melakukan beberapa
langkah berikut:

1. Siapkan file baru, lalu letakkan kursor pada jendela
dokumen.

2. Pilih salah satu perintah pembuatan tabel berikut:

• Pilih perintah menu Insert > Table.

• Klik tombol Insert Table yang terletak pada

tabulasi Table di dalam Insert Bar.

3. Selanjutnya akan tampil kotak dialog Table seperti pada
Gambar 2.1. Kemudian, tentukan jumlah kolom dan baris
dengan memasukkan angka pada beberapa kotak teks yang
sudah disediakan.

12 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Cell padding: ........ ,.
Cell spacing:
·-····',iIISIII J.·.·.··.···.·.·•.··.···
Caption:
Align caption: Top Both

Summary:)

Help

Gambar 2.1 Kotak dialog Table

Mengatur nilai properti tabel:
• Rows untuk menentukan jumlah baris tabel.
• Columns untuk menentukan jumlah kolom tabel.
• Width untuk menentukan ukuran lebar tabel dan satuan

ukuran yang akan dipakai, piksel atau persentase.
• Border untuk mengatur ketebalan border atau garis

bingkai tabel.
• Cell Padding untuk mengatur jarak antara isi sel dengan

batas tepi sel atau penampang sel.
• Cell Spacing untuk menentukan jarak antarsel dalam

tabel.

Bab 2 Membuat Tabel dan Form 13

Bagian Header

Fungsinya men1berikan keterangan teks pada bagian tabel
sesuai dengan pilihan yang tersedia.

None, tanpa menggunakan keterangan teks.

Left untuk menampilkan keterangan teks pada kolom
pertama atau pada bagian sebelah kiri.

Top untuk menampilkan keterangan teks pada baris
pertama atau pada bagian sebelah atas.

Both untuk menampilkan keterangan teks pada kolom
dan baris pertama.

Bagian Accessbility

Anda dapat men1berikan keterangan judul tabel pada kotak
teks Caption. Se1nentara untuk perataan teksnya, Anda dapat
n1en1ilih dari daftar yang sudah disediakan pada kotak daftar
Align Caption.

Anda dapat mengatur dan memodifikasi border dan sebagainya
pada bagian properti tabel di Property Inspector yang
terletak pada bagian bawah jendela dokumen. Perhatikan

Gambar 2.2.

ILJ Tableld R.ows 3 'oN 750 pi:x:els v CeiiPad Align Default v

Cols 4 H 25 pixels v CeiiSpace Border 0

1:::;1 1;:1 ~~;:1 Bg color Brdr color

l<:.> l" l''; Bg Irnage

Gambar 2.2 Property Inspector Tabel

Jika properti di atas tidak telihat pada bagian bawah jendela
dokumen, Anda dapat menampilkannya dengan menggunakan
salah satu perintah berikut:

• Pilih perintah menu Window > Properties.

• Tekan tombol Ctrl + F3.

14 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Untuk melakukan pengaturan dengan menggunakan properti
tabel, Anda harus memilih tabel. Hal ini karena properti tabel
pada bagian Property Inspector akan ditampilkan apabila
tabel dalam keadaan terpilih atau terseleksi.

Berikut adalah penjelasan properti-properti yang dapat
digunakan untuk mengatur dan memodifikasi bingkai tabel:

Properti Keterangan

Table Id Memberi nama tabel untuk keperluan
penulisan bahasa script.
y

8_0VY5 3 pixels v Menentukan jumlah baris tabel.
t;;_ols 4
Menentukan j umlah kolom tabel.
Yi 471
Menentukan Iebar tabel dengan
t:i pixels v menggunakan satuan persentase atau
piksel yang dapat Anda pilih pada
Cell~ace bagian kanan kotak Width. Jika Anda
memilih dengan satuan persentase
CeliE',ad maka ukuran Iebar tabel pada jendela
dokumen akan disesuaikan dengan
61h;,~n ·Def.~ult v ukuran lebar browser.

Menentukan tinggi tabel dengan
menggunakan satuan persentase atau
piksel yang dapat Anda pilih pada
bagian kanan kotak Height. Pada
saat Anda menyisipkan tabel, kotak
teks Height masih dalam keadaan
kosong karena satuan yang ditam-
pilkan berbeda dengan satuan pada
Iebar tabel.

Memberikan jarak antarsel pada
tabel.

Mengatur jarak antara isi sel dengan
batas tepi sel.

Mengatur perataan tabel terhadap
jendela dokumen. Anda dapat memilih
perataannya dengan mengklik tombol

Bab 2 Membuat Tabel dan Form 15

Properti Keterangan

~order 1 Align, kemudian 1nemilih salah satu
perataan yang disediakan.
B_gColor
Menentukan ketebalan garis bingkai
tabel.

Memberi warna latar belakang pada
tabel dengan mengisikan kode warna
pada bagian kotak teks atau dengan
rnengklik kotak warna untuk memilih
warna pada kotak palet.

Memasang gambar sebagai latar
belakang. Anda dapat langsung meng-
isikan lokasi file gan1bar jika sudah
tahu lokasi gambarnya. Namun, Anda

,·T"_!o

dapat pula menggunakan tombol ~-.i.Y

!Point to File J untuk n1enghubungkan ke
file gambar dengan mengklik dan
mengarahkan tombol pada file
gambar yang berada di panel Files.
Sementara untuk memberikan gam-
bar latar belakang, Anda dapat pula
mengambil dari folder yang Anda

inginkan dengan mengklik ton1bol -=J

IBroi,.\ISe for File 1. Kemudian, pilihlah
folder yang berisi file gambar, pilih
salah satu file gambar, dan akhiri
dengan mengklik OK.

Mengatur warna garis bingkai tabel.
Adapun cara memberi warna garis
bingkai tabel sama dengan cara
memberi warna pada bagian latar
belakang.

Menambah Baris dan Kolom

Jika ingin menan1bahkan beberapa baris atau kolom sekaligus,
Anda dapat menmnbahkannya dengan menggunakan perintah

16 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

yang sudah disediakan. Langkah menambahkan beberapa
baris atau kolom adalah:

1. Pilihlah salah satu sel.

2. Pilih menu Modify > Table > Insert Row or Column,
sehingga tampil kotak dialog Insert Rows or Columns.

Insert: (:::[?,~j~) OK
()~olumns tJ.elp

[:!umber of rows: 1

vVhere: ('> B_bove the Selection

·:::::. §.elow the Selection

Gambar 2.3 Kotak dialog Insert Rows or Columns

3. Pada bagian Insert, pilihlah Rows untuk menambahkan
baris atau pilih Columns untuk n1enambahkan kolom.

4. Pada Number of Row atau Column, masukkan jumlah
baris atau kolom yang ingin ditambahkan.

5. Pada bagian Where, pilih tempat untuk menambahkan
baris atau kolom. Anda dapat memilih Above untuk
menambahkan baris di atas sel aktif atau Below untuk
menambahkan baris di bawah sel aktif.

6. Jika Anda menambahkan kolom, pada bagian Where akan
menampilkan Before untuk menambahkan kolom di
sebelah kiri sel aktif dan Mter untuk menambahkan kolom
di sebelah kanan sel aktif.

Selain menambahkan baris atau kolom, Anda dapat meng-
hapus baris atau kolom. Untuk menghapus baris atau kolom,
lakukan langkah berikut:

1. Aktifkan pada sel yang akan dihapus.

2. Pilihlah menu Modify > Table > Delete Row untuk
menghapus baris atau pilih Delete Column untuk
menghapus kolom.

Bab 2 Membuat Tabel dan Form 17

Mengubah Properti Sel Tabel

Pada saat melakukan seleksi pada sel yang ingin Anda
modifikasi, properti tabel akan n1enampilkan sebuah properti
sel tabel seperti pada Gambar 2.4.

ffiH Row Horz Default v w DNo wrap Bg
'
0 Vert Default v H 0Header Bg Brdr

Gambar 2.4 Properti sel tabel

Keterangan properti sel tabel:

I ICJ rvlerges selected cells usin•;;,J spans

Untuk menggabungkan dua sel atau lebih yang pos1s1nya
bersebelahan. Sebagai contoh, pilih beberapa sel, baik secara
mendatar maupun vertikal, kemudian klik tombol Merges
Selected Cells.

I I~:~ Splits cell into rows or columns

Untuk memecah sel menjadi beberapa baris atau kolom. Cara:
aktifkan salah satu sel yang ingin dipecah, kemudian tekan
tombolnya. Dreamweaver akan menampilkan kotak dialog
Split Cell.

Split cell into: (~) [9,~Y,~] OK
Cancel
~olumns

[.iumber of rows: 2

t:J.elp

Gam bar 2. 5 Kotak dialog Split Cell

Anda dapat memilih baris atau kolom yang akan dipecah pada
pilihan Split Cell Into, kemudian tentukan jumlah baris atau
kolom hasil pecahan yang ingin Anda bentuk pada kotak teks
Number of Rows.

I IHorz 0.;-f.ault •v Horizontal Alignment of the cell contents

18 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Untuk merigatur perataan horizontal pada isi sel, baris, atau
kolom. Anda dapat mengatur tata letak teks pada posisi di
sebelah kiri, kanan, atau tengah dalam sebuah sel.

IVe-rt De-fault v !vertical Alignment of the cell contents

Untuk mengatur perataan vertikal pada isi sel, baris, atau
kolom. Anda dapat mengatur letak teks di bagian atas, tengah,
bawah, atau pada bagian baseline sel.

I I'oJ ' Width of cell in pixels or percent

Untuk mengatur lebar sel, baik dalam satuan piksel maupun
persen.

I l· •H Hei1;;1ht of cell in pixels or percent

Untuk mengatur tinggi sel, baik dalam satuan piksel maupun
persen.

D I INo wrap Do not wrap the contents of the cell

Untuk mencegah agar teks yang Anda 1nasukkan tidak terlipat
atau berpindah baris, sehingga teks akan berada pada satu
baris yang sama. Fasilitas akan berfungsi jika Anda
mengaktifkan kotak centang No Wrap.

D I IHe-.ade-r Makes the cell a header cell

Untuk mengubah sel yang terpilih sebagai header atau judul
tabel. lsi sel header ditampilkan dalan1 cetak tebal dan
menggunakan perataan tengah. Perhatikan perbedaan antara
sel yang tidak menggunakan · fasilitas header dan yang
menggunakannya.

Bg IBach;;~round Color I

Untuk memberi warna latar belakang, tetapi yang diberi warna
latar belakang adalah bagian sel, kolon1, atau baris. Untuk
memberi warna latar belakang, Anda dapat mengisikan kode
warna pada kotak teks Bg atau mengklik kotak warna Bg
untuk memilih warna yang diinginkan.

IBg l ]Background URL of cell

Untuk n1emasang gambar pada bagian Iatar belakang. Anda
dapat langsung mengisikan lokasi file gambar jika sudah tahu

Bab 2 Membuat Tabel dan Form 19

ambarnya. Anda dapat pula menggunakan tombol ti}

.--------"'"---,

untuk menghubungkan ke file gambar dengan
mengklik tombol, kemudian mengarahkan tombol pada file
gambar yang berada di panel Files. Lebih lanjut, Anda dapat
pula n1en ambil gambar dari folder dengan mengklik ton1bol

Bro1Nse for File, kemudian memilih folder yang berisi file
gambar. Pilihlah salah satu file gambar dan klik OK.

I IBrdr Border Color of cell

Untuk n1emberi warna pada bagian garis bingkai sel. Caranya
sama seperti memberi warna latar belakang.

2.2 Membuat Form

Dreamweaver menyediakan fasilitas form yang memudahkan Anda
berkon1unikasi di dalan1 dunia web. Dengan menggunakan forn1,
Anda dapat mengumpulkan inforn1asi dari pengunjung situs Anda
dan melakukan beberapa interaksi dengan n1ereka. Form dapat
terdiri atas beberapa objek yang disusun menjadi sebuah model
pengisian atau dapat pula disebut formulir online.

Beberapa objek yang terdapat pada form antara lain adalah text field,
list box, check box, menu pop-up, field password, image field, button
dan radio button.

r~.; v' ;··

Gambar 2.6 Insert Form dalam insert bar

Menyisipkan Form

Untuk n1enempatkan objek form yang ingin disisipkan, terlebih
dahulu Anda harus menyiapkan sebuah wadah untuk
n1enampung objek-objek form. Wadah yang dimaksud adalah
form itu sendiri. Jika Anda n1enyisipkan objek tanpa
menempatkannya ke dalan1 wadah n1aka informasi yang Anda
masukkan di dalam form tidak dapat terkirim.

20 Aplikasi Web Database Menggunakan Adobe Dreamweaver C53

Langkah membuat sebuah form adalah:
1. Pastikan Anda aktif pada jendela dokumen.
2. Aktifkan tabulasi Form pada Insert Bar.
3. Klik tombol IForml atau Anda dapat pula menyisipkan

form dengan perintah menu Insert> Form.
4. Jendela dokumen akan menampilkan sebuah objek form

dengan tampilan garis putus-putus berwarna merah.

Gambar 2. 7 Tampilan objek form

5. Bagian Property Inspector akan menampilkan properti
form, seperti pada Gambar 2.8.

Gambar 2.8 Properti form pada Property Inspector

Berikut adalah penjelasan masing-masing bagian properti
form:

Form name

Untuk memberi nama form. Pemberian nama form digunakan
untuk memberikan identitas pada form.

Action

Untuk menentukan lokasi atau path file yang akan digunakan
untuk memproses form.

Untuk menentukan metode penginman data form. Di dalam
properti Method, ada beberapa pilihan, yaitu:

Bab 2 Membuat Tabel dan Form 21

Default. Jika Anda memilih default maka metode
pengiriman data form akan disesuaikan dengan seting
default browser.

GET. Untuk pilihan GET, metode pengiriman data forn1
akan ditan1bahkan pada URL request.

POST. Pada metode pengirin1an POST, data form Anda
akan disisipkan pada HTTP request.

Target

Untuk menentukan frame atau window yang menjadi tempat
menampilkan target hyperlink.

Enctype v

Untuk menentukan tipe MIME encoding yang diinginkan.
Properti umumnya digunakan untuk file upload.

Jika menginginkan tampilan form yang rapi, ada baiknya Anda
menambahkan tabel di dalam form sebagai tempat meletakkan
objek form.

2.3 Menyisipkan Text Field

Text Field merupakan sarana untuk memasukkan teks ke dalam
form. Text Field berfungsi menampung informasi-informasi yang
dimasukkan ke dalamnya berupa teks atau karakter lainnya, seperti
nama seseorang, alamat, e-mail, dan sebagainya.

Langkah menyisipkan Text Field adalah:

1. Aktifkan pointer mouse di dalam form yang sudah disediakan.

2. Lakukan salah satu langkah berikut:

• Pilih menu Insert> Form> Text Field.

• Klik tombol D pada tab Form.

Selanjutnya, akan tampil dialog Input Tag seperti Gambar 2.9.
Ketik nama field pada kota isian ID, ketik keterangan untuk field
pada kotak isian Label, pilih salah satu style pada bagian Style, dan

22 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

pilih posisi keterangan field pada bagian Position. Jika Anda
memilih Before form itern maka keterangan label akan diletakkan
sebelum field, sedangkan jika Mter form item maka keterangan
field diletakkan setelah field. Access key digunakan jika Anda
memilih field dengan keyboard, yaitu dengan menekan Alt + huruf
yang dijadikan Access key, misalnya Alt + N. Tab indeks mengatur
urutan indeks saat Anda menekan tombol Tab, kemudian tekanlah
OK.

ID: OK
Help
Label:

Style: Wrap with label tag

(1 Attach label tag using 'for' attribute

() No label tao

Position: (~:; Before form item

C· After form item

Access key: Tab Index:

If you don't want to enter this information when
inserting objects, change the Accessibility preferences.

Gam bar 2. 9 Kotak dialog Input Tag

3. Kemudian, Property Inspector menampilkan properti Text
Field seperti pada Gambar 2.10.

Char ~idth ; Type (;~;. aingle line C f:1ulti line (} r_assword (;lass None v
Max chars lnit val

Gambar 2.10 Properti Text Field pada property inspector

Di dalam Text Field, ada tiga tipe yang perlu diketahui.

Mengatur Properti Text Field Tipe Single Line

Single Line merupakan tipe pertama dari sebuah Text Field.
Secara default, saat Anda menyisipkan Text Field, tampilan
awalnya adalah tipe pertama. Tipe demikian berupa kotak teks

Bab 2 Membuat Tabel dan Form 23

satu baris untuk menampung nama, alamat, e-mail, dan
sebagainya.

Untuk properti Text Field, tipe Single Line dan Password
mempunyai properti yang sama, yaitu:

TextField

t_nama

Untuk mengisikan nama Text Field. Jika Anda
mengisikan ID pada kotak Dialog Input Tag maka secara
otomatis akan diberi nama. Kotak teks ini berfungsi
menghubungkan dengan data apabila Anda menggunakan
aplikasi dengan database.

Char width 50

Untuk menentukan jumlah karakter maksimum yang
dapat ditampilkan pada kotak teks.

rvlax Chars 500

Untuk menentukan panjang maksimum karakter yang
dapat ditampung kotak teks. Untuk mengganti panjang
karakter, Anda dapat mengisi di kotak teks yang tersedia
dengan nilai yang diinginkan.

Type Single line Multi line Password

Saat Anda menampilkan Text Field, pada properti tipe
Text Field secara default akan terpilih Single Line. Jika
Anda ingin menampilkan dalam tipe Password, kliklah
tombol pilihan Password.

lnit val

Untuk mengisikan nilai default pada kotak teks. Dengan
demikian, saat Anda menjalankannya di browser, akan
terisi nilai yang Anda isikan di kotak teksnya.

24 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Mengatur Properti Text Field Tipe Multi Line

Tipe Text Field menyediakan kotak teks dengan beberapa
baris di dalamnya. Anda dapat memasukkan keterangan yang
panjang pada bagian kotak teks, misalkan memasukkan
keterangan, komentar, saran-saran, dan lain sebagainya.
Properti pada Multi Line memiliki tambahan yang berbeda
dengan yang ada pada properti Single Line, yaitu:

Num Lines 5

Untuk menentukan jumlah baris pada kotak teks.
Semakin banyak nilai yang Anda isikan, semakin melebar
kotak teks ke bawah.

Wrap :Default v

Untuk menentukan tipe pelipatan teks. Tipe pelipatan
teks dibagi menjadi tiga, yaitu:
• Off. Jika bagian properti Wrap terpilih Off maka teks

yang Anda isikan ke dalam kotak teks tidak akan
berpindah pada baris berikutnya. Untuk berpindah ke
baris berikutnya, tekanlah Enter.

• Default dan Virtual Jika Anda mengisikan teks ke
dalam kotak teks pada pilihan ini maka teks yang
sudah sampai pada sisi kanan kotak teks secara
otomatis akan turun ke baris berikutnya.

• Physical. Pilihan ini sama seperti pilihan virtual,
tetapi data yang ada pada kotak teks saat dikirimkan
ke server akan terlihat sama persis.

Tampilannya sangat berbeda dengan Single Line dan
Password. Pada kotak teks Multi Line, bagian kanan
dan bawah akan ditambahkan batang penggulung untuk
teks yang panjang.

Bab 2 Membuat Tabel dan Form 25

Mengatur Properti Text Field Tipe Password

Tipe Text Field digunakan untuk mengisikan password pada
kotak teks yang tersedia. Pada umumnya, tipe Text Field
demikian dipakai pada suatu halaman web yang memerlukan
suatu pengaman agar hanya orang tertentu yang dapat
mengaksesnya.

Properti yang terdapat pada tipe Password sama seperti pada
tipe Single Line. Namun, pada saat Anda mengisikan data ke
dalam kotak teks, teks yang ditampilkan akan berbentuk
bintang agar password yang diisikan tidak diketahui orang
lain.

2.4 Menyisipkan Hidden Field

Jika Anda menggunakan script-script program dalam halaman web,
fasilitas Hidden Field sangat membantu Anda untuk mengetikkan
script yang Anda buat.

Jika Anda perhatikan, saat Anda membuat sebuah Hidden Field
n1aka akan ditampilkan sebuah tanda ~ yang menyatakan adanya
sebuah Hidden Field. Namun, saat Anda menjalankannya di
browser, maka Hidden Field tidak akan ditampilkan.

Langkah menyisipkan Hidden Field ke dalam form adalah:

1. Tempatkan form ke dalam jendela dokumen.

2. Pilih salah satu langkah berikut:
• Pilih menu Insert >Form > Hidden Field.

• Dari Tab Form, pilih tombol t!SJ. untuk menampilkan
Hidden Field.

3. Property Inspector akan menampilkan properti Hidden Field.

4. lsikan nama untuk Hidden Field, kemudian isikan pula nilai
pada bagian Properti Value.

26 Aplikasi Web Database Menggunakan Adobe Dreamweaver C53

I~ Hiddenfield
............. --·Ten=d······-·~alue ···I·.......
A'

Tempat untuk mengisikan lsi nilai pada
nama HiddenField kotak ini.

Gambar 2.11 Properti Hidden Field pada property inspector

2.5 Menyisipkan Text Area

Jika Anda perhatikan dengan seksama, bentuk tampilan Text Area
sama persis dengan Text Field tipe Multi Line. Dengan kata lain,
Text Area merupakan nama lain Text Field tipe Multi Line.

Untuk n1enyisipkan Text Area, pilihlah menu Insert > Form

Objects > Textarea atau tekanlah pada kategori Form di

Insert Bar, maka akan tampil dialog Input Tag seperti Gambar 2.9.

Atur properti Text Area dan tekan OK.

2.6 Menyisipkan Checkbox

Checkbox adalah sebuah kotak pilihan yang berfungsi untuk
membuat satu pilihan atau lebih bagi pengunjung dari informasi
yang disediakan.

Adapun cara menyisipkan Checkbox adalah:

1. Pilihlah tombol :y.: pada kategori Form di dalam Insert Bar

atau Anda dapat memilihnya pada n1enu Insert > Form >

Check Box, maka akan tan1pil dialog Input Tag. Atur properti

Checkbox dan tekan OK. Sebuah kotak kecil akan ditampilkan

pada jendela dokumen, di n1ana Anda dapat n1enempatkan

pointer mouse Anda.

2. Anda dapat menyisipkan beberapa Checkbox kembali sesuai
kebutuhan. Jika Anda ingin n1enggunakan beberapa Checkbox

Bab 2 Membuat Tabel dan Form 27

sebagai pilihan, sebaiknya tempatkan ke dalam sebuah tabel
agar tersusun rapi pada saat dijalankan di browser.

3. Property inspector akan menan1pilkan properti Checkbox yang
dapat Anda atur sesuai dengan kebutuhan. Perhatikan tampilan
properti Checkbox.

T Properties Initial state () Checked
{~) Unchecked
19 :::::n""' Checked value checkbox

Gambar 2.12 Properti Checkbox

CheckBox name untuk men1beri nan1a field Checkbox.
Jika Anda memasukkan beberapa Checkbox, pemberian
nama cukup hanya satu karena nama pada masing-
masing Checkbox akan disamakan.

Checked value untuk memberi sebuah nilai pada
Checkbox saat Checkbox terpilih. Pemberian nilai
disesuaikan dengan informasi yang Anda buat,
misalnya: Rafting.

Initial state untuk menentukan apakah Checkbox
secara default sudah terpilih atau belum. Pada saat
Anda sisipkan sebuah Checkbox, Initial State yang
terpasang adalah Unchecked. Jika Anda menghendaki
agar saat dijalankan Checkbox sudah dalam keadaan
terpilih maka pilihlah tombol pilihan Checked. Jika
tidak, Anda dapat mengaktifkan tombol pilihan
Unchecked.

2.7 Menyisipkan Radio Button

Radio Button mempunyai fungsi yang sama seperti Checkbox, yaitu
membuat daftar pilihan. Namun, Radio Button hanya dapat
digunakan untuk memilih satu pilihan, tidak seperti Checkbox yang
dapat digunakan untuk memilih lebih dari satu pilihan.

Langkah menyisipkan Radio Button adalah:

1. Tempatkan pointer mouse pada form yang sudah Anda siapkan.

28 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

2. Pilih menu Insert > Form > Radio Button. Anda dapat ·pula

n1emilih tombol rif! pada Insert Bar kategori Form, maka akan
tampil dialog Input Tag.

3. Atur properti Radion Button dan tekan OK, sehingga akan tampil
sebuah lingkaran kecil pada bagian form.

4. Anda dapat menyisipkan kembali beberapa Radio Button sesuai
keinginan.

Properti Radio Button dapat diatur pada Property Inspector.
Tampilan properti Radio Button sama seperti properti Checkbox.
Anda dapat n1emasukkan nama untuk field Radio Button pada
bagian kotak teks Radio Button, kemudian ketik nilai Radio Button
pada bagian Checked value dan tentukan pilihan untuk Initial
state, Checked atau Unchecked.

• Properties "T"' '"Ch,6.d "'"' Initial state Checked
, ::: Unchecked
I_ j Rad1o Button

rdiobutton

Nama field Nilai Radio Button

Gambar 2.13 Properti Radio Button

2.8 Menyisipkan Radio Group

Radio Group merupakan kumpulan beberapa Radio Button. Dalan1
proses pembuatannya, Anda tidak perlu n1enyisipkan Radio Button
satu per satu ke dalam jendela dokumen. Anda cukup memasukkan
label dan nilai Radio Button-nya pada hagan yang sudah disediakan.

Langkah menyisipkan Radio Group adalah:

Pilih perintah menu Insert > Form > Radio Group atau klik

tombol pada Insert Bar kategori Form. Selanjutnya, sebuah

kotak dialog akan tampil untuk n1engisikan parameter yang Anda

inginkan. Lihat Gambar 2.14.

Bab 2 Membuat Tabel dan Form 29

Name: webh~sti~,.{~-- Nama Radio Group OK

Radio buttons: ·+J:=.1 Cancel

~-----------------------------. Help

Label Value Daftar radio
button
~~ratis gratis
bayar
Sayar

Lay out using: ·.:;.•~·!··r·.·!··~·.·.·b·.··.·r·.·~··.·~·-··~·:·s··.·J·.·:··:·:·!··?·r·.··.·?·.··.··t···.···~···9··.J Pilihan tampilan radio button

Table

Gambar 2.14 Kotak dialog Radio Group

Langkah mengisi parameter pada kotak dialog Radio Group adalah:

1. Pertama yang harus Anda isi adalah nama untuk Radio Group
pada bagian Name.

2. Selanjutnya, isikan label dan value pada tempat yang sudah
disediakan. Klik pada bagian Radio, lalu ketikkan sebuah kata di
dalamnya.

3. Jika ingin n1enambahkan Radio Button kembali, Anda dapat
menggunakan ton1bol + yang terletak pada bagian atas daftar
parameter. Apabila Anda ingin menghapus daftar yang tidak
terpakai, gunakan tombol -.

4. Pada bagian Lay out using, pilihlah Line Break [<hr> Tags]
untuk menempatkan Radio Button pada baris baru di setiap
Radio Button. Cara lainnya, pilihlah Table untuk menempatkan
Radio Button pada sebuah tabel.

2.9 Menyisipkan List/Menu

Selain n1enampilkan pilihan dalam bentuk tombol, seperti Checkbox
atau Radio Button, Anda dapat pula n1enampilkan pilihan dalam
bentuk list atau menu.

30 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

Menggunakan List sebagai Pili han

List digunakan untuk menampilkan banyak pilihan, baik
pilihan tunggal maupun ganda. Dengan menggunakan List,
Anda dapat memilih beberapa pilihan sekaligus seperti halnya
pada Checkbox.

Langkah n1enyisipkan List adalah:

1. Pilih menu Insert > Form > List/Menu atau Anda dapat

pula memilihnya dengan menggunakan tombol pada

Insert Bar kategori Form. Selanjutnya, akan tampil

dialog Input Tag seperti Gmnbar 2.9. Atur properti List

dan tekanlah OK.

2. Pada properti List/Menu, pastikan pilihan Type berada
pada pilihan List.

lType (.)Menu
Height 2
.':.0InitiallySesleelcetciotend$ DipAlollomwa.·. m..ul·t·i.p.Ie.· ··.·.:.

Reguler

Privat

Tempat untuk Tinggi baris
mengisikan nama List

Gambar 2. 15 Tampilan Properti List

3. Isikan nama untuk List pada kotak teks List/Menu.
Pemberian nama tidak boleh sama dengan nama objek
lainnya. Dengan kata lain, nama harus bersifat unik.

4. Kemudian, tentukan jumlah baris yang akan ditampilkan
pada kotak teks Height. Jika Anda memberikan nilai lebih
kecil dari jumlah item yang Anda masukkan, bagian
sebelah kiri List akan menampilkan sebuah penggulung
untuk menggulung List ke atas atau bawah.

5. Jika ingin pada saat dijalankan nanti pengunjung dapat
memilih pilihan lebih dari satu, Anda dapat mengaktifkan
kotak centang Selections. Jika kotak centang ini tidak
aktif maka pilihan hanya berlaku untuk satu pilihan.

Bab 2 Membuat Tabel dan Form 31

6. Untuk menambahkan atau mengurangi isi List, Anda
dapat menampilkan kotak dialog List Values dengan
mengklik tomboll listValues... J.

L±Jf3 ~~c:J L~

I Cancel J

t!.elp

Gambar 2.16 Tampilan kotak dialog List Values

7. Anda dapat mengisikan item yang ingin dimasukkan ke
dalam pilihan pada bagian kolon1 Item Label dan isikan
nilai pada bagian Value. Untuk menambahkan item

kembali, Anda dapat mengklik tombol l+l pada bagian atas

Bdaftar, sedangkan tanda untuk menghapus item.

8. Item yang Anda masukkan akan ditampilkan pada bagian
Initially Selected. Jika ingin terdapat item yang
terseleksi pada saat dijalankan maka Anda dapat mengklik
salah satu item.

Menggunakan Menu sebagai Pilihan

Sarna halnya dengan List, Menu merupakan sebuah objek yang
digunakan untuk menampung beberapa pilihan dalam bentuk
drop down. Namun, untuk Menu Anda hanya dapat memilih
satu pilihan. Menu mempunyai fungsi yang san1a seperti Radio
Button yang hanya dapat dipilih satu dalam sebuah group.
Anda dapat menyisipkan Menu dengan langkah:

1. Pilihlah menu Insert > Form > List/Menu. Anda dapat

pula mengklik tombol pada Insert Bar kategori Form.

2. Pada properti List/Menu, pastikan pilihan Type berada
pada option button Menu.

32 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

rzJ Us.t/Menu 0Type Menu tJ.eight I

I tgl (;) !:_ist DSelections Allow my_ltiple

Initially selected 1
2
3

Nama dari Tipe pilihan
List/Menu tampilan

Gambar 2.17 Tampilan Properti Menu

3. Anda dapat mengisikan nama Menu pada kotak teks
List/Menu. Pemberian nama tidak boleh sama dengan
nama objek lainnya, sehingga nama harus bersifat unik.

4. Untuk menambahkan atau mengurangi isi list, Anda dapat
menampilkan kotak dialog List Values dengan mengklik

Itombol List Values... ]

5. Anda dapat mengisikan item yang ingin dimasukkan ke
dalam pilihan pada bagian kolom Item Label dan ketik
nilai pada bagian Value. Untuk menambahkan item
kembali, kliklah tombol + pada bagian atas daftar,
sedangkan tanda- untuk menghapus item.

6. Item yang Anda masukkan akan ditampilkan pada bagian
Initially Selected. Jika ingin ada item yang terseleksi
pada saat dijalankan, Anda dapat mengklik salah satu
item.

2.10 Menyisipkan File Field

File Field digunakan untuk meng-upload suatu file ke server. File-file
yang dapat di-upload melalui File Field antara lain adalah file
dokumen, file gambar, dan file-file lainnya.

Jika Anda perhatikan, tampilan File Field terlihat sama seperti Text
Field. Hanya di sebelah kanan objek File Field terdapat sebuah
tombol bernama Browse untuk mencari file yang akan di-upload.
Anda dapat pula mengisikan nama sebuah file langsung pada kotak

Bab 2 Membuat Tabel dan Form 33

teks tanpa harus mencari ke lokasi file yang ingin Anda upload
dengan tombol Browse.

_JBrowse ... _I ~

Gambar 2.18 Tampilan File Field

Untuk n1enyisipkan objek File Field, ikutilah langkah-langkah
berikut:
1. Tempatkan mouse pointer dalan1 form yang sudah Anda sisipkan.

2. Pilihlah menu Insert > Form > File Field atau dengan

mengklik tombol pada Insert Bar kategori Form, sehingga
akan ditampilkan sebuah objek File Field di dalam form.
Kemudian, aturlah propertinya.
3. Isikan nama File Field pada kotak teks FileFieldName.
4. Tentukan jumlah karakter yang dapat ditampilkan dala1n kotak
teks Char Width.
5. Tentukan pula jumlah karakter yang dapat dimasukkan ke
dalam kotak teks Max Chars.

2.11 Menyisipkan Button

Button merupakan sebuah tombol yang dapat digunakan untuk
melakukan proses tertentu, misalkan untuk submit atau reset.
Seringkali kedua tombol digunakan untuk sebuah proses di dalam
form. Tombol Submit digunakan untuk mengirimkan data yang
dimasukkan ke dalam form selanjutnya dan diolah di dalam server.
Sementara itu, tombol Reset digunakan untuk me-reset atau
mengosongkan data yang ada di dalam form ke nilai default atau
nilai semula.
Untuk menyisipkan sebuah Button ke dalam form, lakukan langkah
berikut:

1. Pilih perintah menu Insert > Form > Button atau klik to1nbol

yang terdapat di Insert Bar kategori Form.

34 Aplikasi Web Database Menggunakan Adobe Dreamweaver CS3

2. Kemudian, ketiklah nama Button pada bagian Button Name.
3. Untuk memberi nan1a keterangan pada Button, Anda dapat

isikan pada kotak teks Label Nama akan ditampilkan pada
Button-nya.
4. Tentukan pula action yang diberikan, lalu pilih pilihan Submit
atau Reset.


Click to View FlipBook Version
Previous Book
KHFP Core Moderate - Sep 2018 Final
Next Book
latihan 1