Tutorial Singkat Aplikasi Database

Berbasis Web (PHP/MySQL)

Menggunakan Editor Dreamweaver 8.0

Jl. Kartini Rt.08 Ds. Fajar Baru (K2) Kec. Ketahun

Kab. Bengkulu Utara 38361

Tutorial ini merupakan tutorial gratis yang dapat dipakai oleh setiap
orang, mulau dari presiden hingga rakyat kecil. Bebas dipublikasikan
dan dimodifikasi dengan tetap mencantumkan nama penulis.

There is no Guarantee....!!
Dreamweaver 8.0 – tentunya pembaca sekalian tidak asing lagi dengan kata
tersebut. Dreamweaver 8.0 adalah Versi terakhir dari Editor web yang diproduksi
oleh Macromedia, sedangkan versi selanjutnya ditangani atau diproduksi oleh
Adobe, dan versi terbarunya adalah Adobe Dreamweaver CS5 (April 2011) ketika
saya membuat tutorial ini.

Macromedia Dreamweaver 8 is a professional HTML editor for designing, coding,

and developing websites, web pages, and web applications. Whether you enjoy the
control of hand-coding HTML, or prefer to work in a visual editing environment,
Dreamweaver provides you with helpful tools to enhance your web creation
experience.

Dalam tutorial ini, saya akan mencoba memberikan pengetahuan kepada anda
bagaimana memanfaatkan Dreamweaver 8.0 untuk membuat aplikasi web dengan
bahasa pemrograman PHP dan Database MySQL. Dimana Dreamweaver 8.0 telah
menyediakan tools untuk membuatnya tanpa harus mengetikkan banyak kode
program.

Syarat Menggunakan Tutorial Ini :

1. Saya anggap di komputer anda telah terpasang Program Macromedia

Dreamweaver 8.0.
2. Komputer anda telah terpasang Server Apache, PHP dan MySQL atau salah
satu web server (XAMPP, WAMP, AppServ)
3. Jika belum ada program-program tersebut, silahkan tutup tutorial ini dan
segera install program yang saya rekomendasikan diatas.
4. Saya anggap anda sudah pernah belajar tentang Dasar Dreamweaver dan
database MySQL

Selamat mencoba, mudah-mudahan bermanfaat.

Bengklulu, 16 April 2011,

Penulis,

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 ===============================

1. Merancang Database dan Tabel MySQL ........................................................... 1

2. Pembuatan Database dan Tabel Menggunakan phpMyAdmin ....................... 1

3. Menggunakan Macromedia Dreamweaver 8.0 .................................................. 5

4. Mendefinisikan Site ............................................................................................ 5

5. Membuat Koneksi ke MySQL ............................................................................. 8

6. Membuat Form Input Buku pada halaman input_buku.php .......................... 10

7. Membuat Halaman Untuk Menampilkan data Buku ....................................... 12

8. Membuat Halaman Untu Edit/Update Data Buku ........................................... 15

9. Membuat Halaman Hapus Data Buku.............................................................. 21

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 1

Sebelum menggunakan Macromedia Dreamweaver terlebih dahulu silahkan

anda buat database dan tabel mysql-nya. Dan tentunya sudah ada rancangan
database yang anda punya atau dapat mengikuti rancangan pada contoh tutorial
ini.

Sekarang saya akan memberikan contoh kasus pembuatan web toko buku, tapi
yang akan saya bahas hanya pengolahan data buku saja (input, edit, tampil, dan
hapus data buku).

Berikut contoh database tokobuku dengan rancangan tabel sebagai berikut:

Nama Database : tokobuku

Nama Tabel : tbl_buku

Nama Field Tipe Data Panjang Karakter

id_buku int 5
judul_buku varchar 200
nama_pengarang varchar 60
jumlah_halaman int 5
harga_buku int 20
sinopsis text

Setelah pada nomor 1. Kita membahas merancanga database dan tabel,

sekarang anda akan saya ajak untuk membuat atau mengimplementasikan
rancangan database dan tabel kedalam MySQL.

Baik.., sekarang anda jalankan Web Browser pada komputer anda, pada tutorial
ini saya menggunakan Mozilla Firefox, anda juga bisa menggunakan Internet
Explorer, Opera, atau GoogleChrome.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 2
Oke..., pada Address anda ketik “http://localhost/phpmyadmin/ “ tanpa tanda
petik, lalu tekan enter. Lebih jelasnya silahkan ikuti gambar dibawah ini:

Ya selanjutnya kita akan langsung memulai membuat database dengan nama

tokobuku, perhatikan gambar dibawah ini dan pastikan anda mengikutinya
dengan benar.

1
2

Dari gambar diatas anda dapat melihat tampilan pada layar anda, dan langsung
mengetikkan tokobuku pada kotak isian Create new database, dan
melanjutkan meng-Klik tombol Create.

Hasil dari langkah diatas akan menghasilkan database baru seperti gambar
dibawah ini:

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 3
Database anda sudah jadi, terlihat pada gambar diatas, dengan nomor 3
tokobuku(0). Nol (0) menunjukkan bahwa di dalam database tokobuku belum
terdapat tabel.

Dari rancangan database yang kita buat kita akan membuat tabel dengan nama
tbl_buku dengan cara sebagai berikut:

4
6
Nomor 4. Menunjukkan nama tabel yang dibuat yaitu tbl_buku, nomor 5 jumlah
field sesuai dengan rancangan tabel yaitu 6 field, selanjutnya klik tombol Go.

Selanjutnya anda akan dibawa ke tampilan desain tabel, ikuti petinjuk pada
gambar dibawah ini.

Pada form desain tabel anda scroll ke kanan sehingga terlihat seperti gambar
dibawah ini.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 4
Anda cukup fokus pada gambar yang saya beri kotak merah, abaikan yang
lainnya. Pada field id_buku, Index diisi PRIMARY maksudnya adalah id_buku
adalah primary key. Selanjutnya anda klik tombol Save yang ada pada sudut
kanan bawah.

Sekarang lihat hasilnya dikolom sebelah kiri. Terlihat tokobuku(1) dan

dibawahnya terdapat nama tbl_buku.

10

Ya sampai disini pembuatan database telah berhasil, dan kita sudah dapat
menyimpan informasi sebagai berikut:

Nama Server : localhost

Nama User : root
Password User :-
Nama database : tokobuku
Nama Tabel dalam Database : tbl_buku

Ini informasi penting yang nanti akan digunakan pada Dreamweaver.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 5

Apa yang kita lakukan dengan dreamweaver 8.0 :

1. Mendefinisikan Site (tujuannya untuk mengelompokkan file-file web kedalam
folder yang anda letakkan di server local anda).
2. Membuat file PHP untuk mengolah database (input, edit, tampil dan hapus).

Sebelum anda berlanjut menggunakan Dreamweaver 8.0, sekarang anda buat

folder di server lokal anda.

Ikuti langkah berikut:

- Buka Windows Explorer [SHIFT] + [E]
- Buka folder C:/xampp/htdocs/
- Buat folder dengan nama toko_buku dan didalamnya anda buat lagi folder
dengan nama images.

- Baik.., folder saya anggap sudah anda buat..

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 6
Setelah folder sudah dibuat kembali ke tampilan Dreamweaver 8.0 dan ikuti
langkah berikut untuk mendefinisikan site.

- Klik Site  New Site

- Klik tab Advanced, Pilih Category Local Info dan sesuaikan informasi Local
Info seperti gambar dibawah ini.
Untuk mengisi local root folder dengan cara meng-klik gambar folder
disebelah kanan dan mencari folder yang talah anda buat sebelumnya.

- Lanjutkan dengan mengatur Remote Info seperti gambar dibawah ini.

5 6

- Dan yang terakhir anda akan mengatur Testing Server, dengan menentukan
server model (PHP MySQL) Access (Local/Network), Testing Server Folder
(c:\xampp\htdocs\toko_buku) dan url prefix (http://localhost/toko_buku/).
Lebih jelasnya lihat pada gambar dibawah ini.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 7

7 8

10

Setelah anda klik tombol OK, hasilnya akan terlihat seperti gambar dibawah ini.

Dan sampai tahap ini proses mendefinisikan site selesai...!!!!

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 8

Membuat koneksi MySQL sangat tergantung dengan pendefinisian site, jadi

pastikan langkah sebelumnya (mendefinisikan site) sudah anda lakukan dengan
benar.

Ya..., sekarang kita mulai.... Fokus da Dreamweaver anda.

1. Buat file php dengan nama input_buku.php

Lanjutkan dengan menyimpan halaman anda dengan nama input_buku.php.

Beri nama file anda.

5 6

Akan terlihat seperti ini...

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 9
2. Membuat Koneksi
1. Aktifkan (buka) panel Application yang berada di sebelah sisi window
utama Dreamweaver (lihat gambar)
2. Buka tab Databases pada panel Application tersebut.
3. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menu
MySQL Connection.
4. Akan ditampilkan kotak dialog isian MySQL Connection (Lihat gambar).
Isi nama koneksi, host mysql, username, dan password MySQL dengan
benar, lalu klik tombol Select… untuk memilih database yang akan
digunakan dan klik tombol OK untuk menyimpan konfigurasi koneksi
MySQL.
5. Jika koneksi berhasil maka pada panel Application tab Databases akan
ditampilkan informasi database berikut tabel-tabel yang terdapat dalam
database tersebut.

Akan muncul kotak dialog isian MySQL Connection

Setelah diisi lengkap seperti gambar diatas klik tombol test untuk menguji
koneksinya. Pastikan akan muncul pesan sukses. Setelah itu klik OK

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 10
Jika berhasil akan tampil seperti gambar dibawah ini..

Anda Telah berhasil membuat koneksi dan mari kita lanjutkan dengan
membuat halaman input data pada dreamweaver.

Langsung saja ikuti langkah berikut :

1. Ketik INPUT DATA BUKU pada Halaman anda, lalu tekan ENTER dan
tambahkan garis horizontal dengan mengklik Insert  HTML  Horizontal
Rule

Sehingga hasilnya akan seperti berikut :

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 11
2. Selanjutnya pada Insert Bar aktifkan Aplication dan lihat pada gambar!

1 2
3

3. Selanjutnya lakukan pengaturan seperti gambar dibawah ini.

- Untuk merubah label setiap field, lakukan dengan mengklik setiap field
dan melakukan perubahan pada Label, dan Display as.

4 6

4. Setelah anda klik OK akan terlihat hasilnya seperti ini

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 12
5. Lihat hasilnya di Mozilla Firefox atau Internet Explorer.
Hasilnya seperti ini:

6. Silahkan anda coba mengisinya dan mengklik tombol Insert Record.., dan
cek pada database anda.
Maka pada tabel database anda akan terlihat seperti ini. (sudah ada i record
buku sesuai yang anda isikan)

7. Oke sampai disini pembuatan halaman input buku selesai.....!!!!

1. Buatlah file dengan nama tampil_buku.php untuk menampilkan data buku

dari database.
2. Buka bagian Application, lalu pilih menu Recordset (Lihat gambar)

3. Akan tampil Kotak dialog Recordset. Tentukan nama Recordsetnya (1),

koneksi yang digunakan (2), tabel yang akan ditampilkan (3), field yang akan
ditampilkan (4) serta filter dan pengurutan yang diinginkan (5). Tekan tombol

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 13
OK untuk melanjutkan. Kita juga bisa menekan tombol Test untuk
memastikan semua sudah benar.

7
1
2
6
3

4. Selanjutnya akan ditampilkan kotak dialog informasi jika Recordset berhasil

ditambahkan. Klik OK untuk melanjutkan.
Dan hasilnya seperti gambar berikut:

5. Dari menubar Application, Pilih icon Dynamic Data dan pilih Dynamic
Table.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 14
6. Akan muncul kotak dialog Dynamic Table. Pilih nama Recordset yang akan
ditampilkan, jumlah record yang akan ditampilkan dan beberapa setting tabel.
Klik OK untuk melanjutkan.

7. Di halaman web anda akan ditampilkan sebuah tabel, baris pertama adalah
header, baris kedua adalah data (record) dari database.

8. Tekan F12 (Preview in Browser) untuk mencoba halaman tampil data buku.

9. Sampai disini pembuatan halaman tampil data selesai..!

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 15

Langsung saja ikuti langkah dibawah ini:

1. Pertama kita buat dulu halaman “edit_buku.php”.

2. Pertama kita tambahkan kolom baru di tabel data buku dan buat link edit.
Untuk membuat kolom baru di tabel, dapat dengan menge-blok kolom terakhir
tabel dan pilih menu Modify  Table  Insert Rows or Columns…

1
4

3. Lalu pada kotak dialog yang ditampilkan pilih Column, jumlah kolom yang
akan ditampilkan dan posisi kolom yang baru.

4. Pilih (select) text edit pada kolom yang baru saja dibuat dan buat hyperlink
dengan menu Insert > Hyperlink. Selanjutnya akan muncul window
Hyperlink. Pilih tombol Browse.
2

3 1

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 16

5. Pada Select File yang ditampilkan, pilih halaman edit_buku.php yang

sebelumnya telah dibuat sebagai halaman edit data buku. Selanjutnya klik
tombol Parameters.. dan akan ditampilkan kotak dialog Parameters...

6. Pada window Parameters.. isi nama parameter yang akan dikirimkan

(id_buku) di bagian name dan selanjutnya di bagian value klik tombol
Dynamic Data (gambar petir).

7
8

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 17
7. Akan ditampilkan Dynamic Data. Pilih field yang akan menjadi value
parameter (kita akan gunakan id_buku). Klik OK untuk melanjutkan.

8. Klik OK,
10

9. Klik OK

11

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 18
10. Klik OK
12

11. Simpan Halaman yang talh anda buat...!

12. Buka halaman edit_buku.php yang sudah dibuat di langkah 1.

13. Karena dalam form edit data, kita akan menampilkan terlebih dahulu data
yang lama yang akan diedit, maka kita harus membuat Recordset. Pilih menu
Insert  Application Objects  Recordset.
14. Pada kotak dialog Recordset, atur nama recordset, koneksi, tabel dan field
yang akan diambil. Kita akan mengambil data buku berdasarkan nilai
parameter id_buku yang dikirimkan dari halaman tampil_buku.php. Atur
Filter pada window Recordset dimana kolom pertama adalah nama field yang
akan difilter, kolom kedua adalah operator pembanding yang digunakan,
kolom ketiga adalah jenis (metode) pengambilan value, kita pilih URL
Parameter, dan pada kolom keempat dituliskan nama parameter atau form.
Ketikkan id_buku pada bagian ini karena pada langkah sebelumnya (lihat
langkah 5) kita mengatur nama parameternya adalah id_buku. Klik OK untuk
menyimpan pengaturan dan Recordset akan terbentuk.

2
1

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 19
15. Kemudian dari menu Application, pilih Record Update Form Wizard.

16. Akan ditampilkan Record Update Form. Atur koneksi, tabel yang digunakan,
nama recordset untuk data yang akan diedit. Pilih halaman yang akan
ditampilkan setelah proses update berhasil, atur jenis inputan dan label. Jika
sudah diatur dengan benar, klik OK untuk melanjutkan.

Sesuaikan dengan
contoh ini, kerjakan
berurutan dari atas
(Connection)

17. Akan ditampilkan form edit data di Dreamweaver. Untuk mencoba proses
edit, buka halaman tampil_buku.php di browser (F12) dan klik tombol edit.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 20
18. Tampilan di Browser (Mozilla Firefox)
Halaman tampil_buku.php menampilkan kolom edit di sebelah kanan, klik
Edit untuk mengedit data.

Ketika di-Klik edit maka akan tampil halaman edit data dan menampilkan data
sesuai pilihan yang akan di edit.

19. Tes dengan merubah isi dari data buku Pemrograman Web Ecek-Ecek
menjadi Pemrograman Web Beneran. Klik tombol Update Record. Jika
benar hasilnya seperti berikut.

20. Selesai Sudah... silahkan coba untuk membuat modifikasi pada halaman
anda....!
Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]
 21

1. Buatlah halaman baru dengan nama hapus_buku.php.

2. Ikuti langkah membuat link Edit pada bagian edit data diatas, hanya saja
disesuaikan alamat link-nya ke halaman hapus_buku.php.

3. Jika link hapus di halaman tampil_buku.php sudah dibuat, maka selanjutnya

kita buka halaman hapus_buku.php.
4. Selanjutnya dari menu Application, pilih Delete Record.

5. Akan ditampilkan kotak dialog Delete Record (lihat gambar). Pada kotak
dialog tersebut, aturlah jenis variabel yang akan dijadikan penentu proses
hapus dieksekusi atau tidak, koneksi dan nama tabel yang digunakan,
kolom yang dijadikan primary key di database beserta nilainya, halaman
yang ditampilkan jika proses hapus buku berhasil.

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 22

6. Klik tombol OK untuk menutup kotak dialog dan menyimpan pengaturan.

7. Untuk mencoba proses hapus, buka halaman tampil_buku.php di browser
(F12) dan klik tombol hapus.

8. OK. Anda sekarang sudah punya Halaman Web yang berhubungan dengan
database MySQL. Kita Juga dapat membuat halaman Khusus untuk
mengendalikan link supaya teratur....!!!
Atau bisa nyontek seperti ini:

9. Selamat Mencoba......................!

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]

 23

==================================

Nama : Hari Aspriyono

TTL : Fajar Baru, 06 Mei 1987
Jenis K elamin : Laki-Laki
Agama : Islam
Alamat : Jl. Kartini Rt. 08 Ds. Fajar Baru (K2)
Kec. Ketahun Kab. Bengkulu Utara
Prov. Bengkulu 38361 - Indonesia
Telp/Hp : 081373297985
Email : hari.aspriyono@gmail.com
kru.well@yahoo.co.uk
Blog : http://tetes-pena.blogspot.com
http://teknik-membuat.blogspot.com

Dreamweaver 8.0 – PHP – MySQL [Hari Aspriyono]