tutsing dw-wolu

8/7/2019 TUTSING DW-WOLU

1/26

Tutorial Singkat Aplikasi DatabaseBerbasis Web (PHP/MySQL)Menggunakan Editor Dreamweaver 8.0

Jl. Kartini Rt.08 Ds. Fajar Baru (K2) Kec. KetahunKab. Bengkulu Utara 38361

Tutorial ini merupakan tutorial gratis yang dapat dipakai oleh setiaporang, mulau dari presiden hingga rakyat kecil. Bebas dipublikasikan

dan dimodifikasi dengan tetap mencantumkan nama penulis.There is no Guarantee....!!


2/26


3/26

Dreamweaver 8.0 PHP MySQL [Hari Aspriyono]

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

1. Merancang Database dan Tabel MySQL ........................................................... 12. Pembuatan Database dan Tabel Menggunakan phpMyAdmin ....................... 13. Menggunakan Macromedia Dreamweaver 8.0 .................................................. 54. Mendefinisikan Site ............................................................................................ 55. Membuat Koneksi ke MySQL ............................................................................. 86. Membuat Form Input Buku pada halaman input_buku.php .......................... 107. Membuat Halaman Untuk Menampilkan data Buku ....................................... 128. Membuat Halaman Untu Edit/Update Data Buku ........................................... 159. Membuat Halaman Hapus Data Buku.............................................................. 21


4/26


1

Sebelum menggunakan Macromedia Dreamweaver terlebih dahulu silahkananda buat database dan tabel mysql-nya. Dan tentunya sudah ada rancangandatabase yang anda punya atau dapat mengikuti rancangan pada contoh tutorialini.

Sekarang saya akan memberikan contoh kasus pembuatan web toko buku, tapiyang akan saya bahas hanya pengolahan data buku saja (input, edit, tampil, danhapus data buku).

Berikut contoh database tokobuku dengan rancangan tabel sebagai berikut:

Nama Database : tokobukuNama Tabel : tbl_buku

Nama Field Tipe Data Panjang Karakterid_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 mengimplementasikanrancangan database dan tabel kedalam MySQL.

Baik.., sekarang anda jalankan Web Browser pada komputer anda, pada tutorialini saya menggunakan Mozilla Firefox, anda juga bisa menggunakan InternetExplorer, Opera, atau GoogleChrome.


5/26


2

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

Ya selanjutnya kita akan langsung memulai membuat database dengan namatokobuku, perhatikan gambar dibawah ini dan pastikan anda mengikutinyadengan benar.

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

Hasil dari langkah diatas akan menghasilkan database baru seperti gambardibawah ini:

12


6/26


3

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

Dari rancangan database yang kita buat kita akan membuat tabel dengan namatbl_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 padagambar dibawah ini.

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


7/26


4

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

Sekarang lihat hasilnya dikolom sebelah kiri. Terlihat tokobuku(1) dandibawahnya terdapat nama tbl_buku.

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

Nama Server : localhostNama User : rootPassword User : -Nama database : tokobukuNama Tabel dalam Database : tbl_buku

Ini informasi penting yang nanti akan digunakan pada Dreamweaver.

10


8/26


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


9/26


6

Setelah folder sudah dibuat kembali ke tampilan Dreamweaver 8.0 dan ikutilangkah berikut untuk mendefinisikan site.

- Klik Site New Site

- Klik tab Advanced, Pilih Category Local Info dan sesuaikan informasi LocalInfo seperti gambar dibawah ini.

Untuk mengisi local root folder dengan cara meng-klik gambar folderdisebelah 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 menentukanserver 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
http://localhost/toko_buku/http://localhost/toko_buku/http://localhost/toko_buku/http://localhost/toko_buku/


10/26


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


11/26


8

Membuat koneksi MySQL sangat tergantung dengan pendefinisian site, jadipastikan langkah sebelumnya (mendefinisikan site) sudah anda lakukan denganbenar.

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


12/26


9

2. Membuat Koneksi1. Aktifkan (buka) panel Application yang berada di sebelah sisi window

utama Dreamweaver (lihat gambar)

2. Buka tab Databases pada panel Applicationtersebut.

3. Klik tombol [+] yang terdapat di dalam tab Databases dan pilih sub-menuMySQL Connection.

4. Akan ditampilkan kotak dialog isian MySQL Connection (Lihat gambar).Isi nama koneksi, host mysql, username, dan password MySQL denganbenar, lalu klik tombol Select untuk memilih database yang akandigunakan dan klik tombol OK untuk menyimpan konfigurasi koneksiMySQL.

5. Jika koneksi berhasil maka pada panel Application tab Databases akanditampilkan informasi database berikut tabel-tabel yang terdapat dalamdatabase tersebut.

Akan muncul kotak dialog isian MySQL Connection

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


13/26


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 HorizontalRule

Sehingga hasilnya akan seperti berikut :


14/26


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


15/26


12

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

6. Silahkan anda coba mengisinya dan mengklik tombol Insert Record.., dancek pada database anda.Maka pada tabel database anda akan terlihat seperti ini. (sudah ada i recordbuku 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 akanditampilkan (4) serta filter dan pengurutan yang diinginkan (5). Tekan tombol


16/26


13

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

4. Selanjutnya akan ditampilkan kotak dialog informasi jika Recordset berhasilditambahkan. Klik OK untuk melanjutkan.

Dan hasilnya seperti gambar berikut:

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

1 2

3

4

5

7

6

8


17/26


14

6. Akan muncul kotak dialog Dynamic Table. Pilih nama Recordset yang akanditampilkan, 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..!


18/26


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 TableInsert Rows or Columns

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

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

1

2

3

4

1

2

3


19/26


16

5. Pada Select File yang ditampilkan, pilih halaman edit_buku.php yangsebelumnya telah dibuat sebagai halaman edit data buku. Selanjutnya kliktombol 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 tombolDynamic Data (gambar petir).

4

5

6

7

8


20/26


17

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

8. Klik OK,

9. Klik OK

9

10

11


21/26


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 datayang lama yang akan diedit, maka kita harus membuat Recordset. Pilih menuInsert Application Objects Recordset.

14. Pada kotak dialog Recordset, atur nama recordset, koneksi, tabel dan fieldyang akan diambil. Kita akan mengambil data buku berdasarkan nilaiparameter id_buku yang dikirimkan dari halaman tampil_buku.php. AturFilter pada window Recordset dimana kolom pertama adalah nama field yangakan difilter, kolom kedua adalah operator pembanding yang digunakan,kolom ketiga adalah jenis (metode) pengambilan value, kita pilih URLParameter, dan pada kolom keempat dituliskan nama parameter atau form.

Ketikkan id_buku pada bagian ini karena pada langkah sebelumnya (lihatlangkah 5) kita mengatur nama parameternya adalah id_buku. Klik OK untukmenyimpan pengaturan dan Recordset akan terbentuk.

12

1

2


22/26


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 akanditampilkan setelah proses update berhasil, atur jenis inputan dan label. Jikasudah diatur dengan benar, klik OK untuk melanjutkan.

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

Sesuaikan dengancontoh ini, kerjakan

berurutan dari atas(Connection)


23/26


20

18. Tampilan di Browser (Mozilla Firefox)Halaman tampil_buku.php menampilkan kolom edit di sebelah kanan, klikEdit 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-Ecekmenjadi Pemrograman Web Beneran. Klik tombol Update Record. Jikabenar hasilnya seperti berikut.

20. Selesai Sudah... silahkan coba untuk membuat modifikasi pada halamananda....!


24/26


21

1. Buatlah halaman baru dengan nama hapus_buku.php.

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

3. Jika link hapus di halaman tampil_buku.php sudah dibuat, maka selanjutnyakita buka halaman hapus_buku.php.

4. Selanjutnya dari menu Application, pilih Delete Record.

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

1


25/26


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 untukmengendalikan link supaya teratur....!!!Atau bisa nyontek seperti ini:

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

2

3

4


26/26

23

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

Nama : Hari Aspriyono TTL : Fajar Baru, 06 Mei 1987Jenis K elamin : Laki-LakiAgama : IslamAlamat : Jl. Kartini Rt. 08 Ds. Fajar Baru (K2)

Kec. Ketahun Kab. Bengkulu UtaraProv. Bengkulu 38361 - Indonesia

Telp/Hp : 081373297985Email : [email protected]

[email protected] : http://tetes-pena.blogspot.com

http://teknik-membuat.blogspot.com
mailto:[email protected]://tetes-pena.blogspot.com/http://teknik-membuat.blogspot.com/http://teknik-membuat.blogspot.com/http://tetes-pena.blogspot.com/mailto:[email protected]

tutsing dw-wolu

Documents