Tutsing Dw-Wolu PDF
Tutsing Dw-Wolu PDF
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
===============================
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).
: tokobuku
: tbl_buku
Tipe Data
Panjang Karakter
int
judul_buku
varchar
200
nama_pengarang
varchar
60
jumlah_halaman
int
harga_buku
int
20
sinopsis
text
id_buku
2
Oke..., pada Address anda ketik http://localhost/phpmyadmin/ tanpa tanda
petik, lalu tekan enter. Lebih jelasnya silahkan ikuti gambar dibawah ini:
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:
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:
5
4
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.
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.
10
Ya sampai disini pembuatan database telah berhasil, dan kita sudah dapat
menyimpan informasi sebagai berikut:
Nama Server
Nama User
Password User
Nama database
Nama Tabel dalam Database
: localhost
: root
:: tokobuku
: tbl_buku
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).
6
Setelah folder sudah dibuat kembali ke tampilan Dreamweaver 8.0 dan ikuti
langkah berikut untuk mendefinisikan 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.
2
4
3
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.
10
Setelah anda klik tombol OK, hasilnya akan terlihat seperti gambar dibawah ini.
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
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.
Setelah diisi lengkap seperti gambar diatas klik tombol test untuk menguji
koneksinya. Pastikan akan muncul pesan sukses. Setelah itu klik OK
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.
11
2. Selanjutnya pada Insert Bar aktifkan Aplication dan lihat pada gambar!
2
3
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)
13
OK untuk melanjutkan. Kita juga bisa menekan tombol Test untuk
memastikan semua sudah benar.
7
1
2
6
3
4
5. Dari menubar Application, Pilih icon Dynamic Data dan pilih Dynamic
Table.
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.
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
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.
16
7
8
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
18
10. Klik OK
12
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.
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.
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.
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
3
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