TUTSING DW-WOLU.pdf

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 PHP MySQL [Hari Aspriyono]

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,


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

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


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.


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.

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:

1 2

3


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:

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

5

6

7

8


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.

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.

9

10


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..


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.

- 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.

1

2

3

4

5 6


7

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

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

7 8

9

10


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.

Akan terlihat seperti ini...

1

2

3

4

5 6


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


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 :


11

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

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. Setelah anda klik OK akan terlihat hasilnya seperti ini

1 2

3

4

5

6


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


13

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

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.

1

2

3

4

5

7

6

8


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..!


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.

1

2

3

4

1

2

3


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).

4

5

6

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,

9. Klik OK

9

10

11


18

10. Klik OK

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.

12

1

2


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.

17. Akan ditampilkan form edit data di Dreamweaver. Untuk mencoba proses

edit, buka halaman tampil_buku.php di browser (F12) dan klik tombol edit.

Sesuaikan dengan contoh ini, kerjakan berurutan dari atas

(Connection)


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....!


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.

1


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......................!

2

3

4


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 : [email protected] [email protected] Blog : http://tetes-pena.blogspot.com http://teknik-membuat.blogspot.com

Documents

TUTSING DW-WOLU.pdf