8. Membuat Program Dinamic Dengan Dreamweaver

8.1. Membuat Database dan tabel

Pada database penjualan, buatlah tabel barang pada mysql seperti di bawah ini

menggunakan phpMyadmin, kemudian pada tabel tersebut akan dibuat program untuk

menampilkan, merubah, dan menghapus data menggunakan dreamweaver.

Kode Barang Nama Barang Jenis Jumlah Harga

B001 Komputer Hp i3 Desktop 3 1200000

B002 Komputer Lenovo i3 Desktop 4 2200000

B003 Komputer Vaio i3 Desktop 2 3200000

B004 Komputer Dell i5 Desktop 5 4200000

B005 Komputer Wearnes i5 Desktop 3 3200000

B006 Dell i3 Laptop 10 2000000

8.2. Membuat Definisi Website

Sebelum membuat halaman web, terlebih dahulu mendefinisikan website dengan menggunakan Site Definition Wizard melalui kotak dialog Manage Sites. Untuk menampilkan kotak dialog Manage Sites dapat dilakukan dengan salah satu cara berikut: 1. Pada Menu Bar, Klik Site > Manage Sites.

2. Pada Files Panel, klik tombol anak panah ke bawah , maka akan muncul menu ke bawah (drop down menu), pilih Manage Sites.

3. Setelah Manage Sites dipilih, maka akan tampil kotak dialog Manage Sites seperti berikut:

4. Pilih New, akan tampil kotak dialog Site Definition. Isikan nama site misalkan:

Site Name : TokoOnline

Local Site Folder : C:\xampp\htdocs\dream\ 5. kemudian save done untuk menutup kotak dialog.

6. Klik pada tab Servers, maka tampilannya seperti di bawah ini:

7. Klik tombol plus (+) untuk membuat koneksi database baru, kemudian isilah parameternya seperti

berikut:

Server Name: Penjualan.

Connect using : Local/ Network

Server Folder: C:\xampp\htdocs\dream

Web URL: http://localhost/dream/

8. Kemudian klik tab Advanced, kemudian pilihlah pada Server Model : PHP Mysql, kemudian Save.

9. Hilangkan cek pada Remote, kemudian cek pada Testing.

10. Klik Save, kemudian Pada manage Sites klik Done.

11. Setelah done, maka pada panel Files akan tampil local files site kita pada File di bawah kanan.

8.3. Membuat Halaman Web

1. Buatlah halaman baru dengan jenis PHP. Create New, kemudian pilih PHP.

2. Buatlah halaman web seperti di bawah ini kemudian save dengan nama index.php dan disimpan pada folder Admin.

3. Buatlah halaman php baru dengan nama formtambahbrg.php dan save pada folder admin. Pada

halaman tersebut buatlah :

ubahlah Title dengan teks : Tambah Data Barang seperti gambar berikut:

Buatlah Teks : Form Tambah Data Barang dengan format H3

Buatlah Teks Menu Admin dibawahnya sebagai link ke menu Admin pada file index.php

Untuk form input data diperlukan form dari menu Insert > Form > Form.

Klik enter dua kali kemudian pindahkan kursor ke atas kemudian masukkan text field dari menu Insert > Form > Text Field, kemudian isilah

- ID : Kodebrg, dan - Label : Kode barang :

Kemudian klik Ok

Klik pada Text Field kemudian pada Properties isilah Max chars : 5

Kemudian buatlah text field untuk menambah data seperti berikut: ID : Namabrg Label : Nama Barang : Max chars : 30 ID : Jenis Label : Jenis : Max chars : 15 ID : Jumlah Label : Jumlah : Max chars : 11 ID : Harga Label : Harga : Max chars : 11

Tambahkan tombol button pada bagian bawah dengan menu Insert > Form > Button. ID : Simpan Label : dikosongkan value pada properties : Simpan

Tampilan untuk formtambahbrg.php adalah sebagai berikut:

4. Buatlah halaman updatebrg.php dengan tampilan sama dengan formtambahbrg.php, langkahnya a

pada file formtambahbrg.php di save As dengan nama file: updatebrg.php. 5. Kemudian ubahlah teks yang paling atas dengan : Update Data Barang 6. Ubahlah Value pada properties button dengan: Update, kemudian save.

7. Buatlah halaman Hapus pada menu File> New> pilih PHP kemudian Create. 8. Biarkan halamannya kosong, kemudian simpanlah halaman Hapus dengan nama hapusbrg.php

9. Buatlah halaman pengelolaanbrg.php kemudian save pada folder admin. 10. Masukkan tabel dan isi tampilan halamannya seperti berikut:

8.4. Membuat Koneksi Mysql

1. Bukalah panel Database, kemudian klik tombol (+), kemudian klik MySQL Connection seperti gambar

berikut:

2. Kemudian isilah kotak dialog Mysql Connection seperti berikut:

Connection Name : Penjualan

MYSQL Server : localhost

User Name : root

DataBase : Penjualan

3. Untuk cek koneksi tekan tombol Test, apabila sudah terkoneksi dengan database Mysql maka

tampilan test adalah sebagai berikut:

4. Kemudian klik OK, maka pada panel DATABASES akan terlihat seperti berikut:

5. Bukalah halaman pengelolaanbrg.php, kemudian membuat recordset pada koneksi database. 6. Bukalah Panel Server Behaviors dengan klik tab, atau pilih Window > Server Behaviors. 7. Klik tombol tanda (+) pada panel Server Behaviors, dan pilih Recordset untuk buka kotak dialog

Recordset. Kemudian isilah seperti berikut:

Name : Barang

Connection : Penjualan

Table : barang

Sort : Kode_brg 8. Tampilannya seperti gambar berikut:

9. Untuk melihat hasil koneksi dapat dilihat dengan menekan tombol Test, maka hasilnya seperti

berikut:

10. Klik OK, kemudian klik OK pada recordset maka hasilnya seperti berikut:

11. Save halaman pengelolaanbrg.php, kemudian bukalah tab BINDINGS, maka tampilannya seperti

berikut:

12. Pada halaman pengelolaanbrg.php, pindahkan kursor ke kolom dibawah Kode barang kemudian

pada panel BINDINGS, klik kode_brg, kemudian klik tombol Insert. 13. Pindahkan kursor ke kolom dibawah Nama barang kemudian pada panel BINDINGS, klik nama_brg,

kemudian klik tombol Insert. 14. Pindahkan kursor ke kolom dibawah Jenis kemudian pada panel BINDINGS, klik jenis, kemudian klik

tombol Insert.

15. Hasil tampilannya menjadi seperti berikut:

16. Save halaman di atas kemudian untuk melihat hasilnya dapat klik Live View atau Preview.

17. Untuk menampilkan seluruh record, maka diperlukan perintah repeat recordnya dengan langkah

seperti berikut: 18. Klik tag di bawah, kemudian pada panel Server Behaviors klik tombol (+), dan pilih Repeat

Region untuk membuka kotak dialog Repeat Region.

19. Pada kotak dialog Repeat Region terdapat 2 pilihan yaitu Show 10 record atau All record. Pilih 10 record kemudian klik OK.

20. Save halaman di atas kemudian klik Live View atau Preview untuk melihat hasilnya.

21. Isilah pada tabel barang di atas menjadi lebih dari 10, kemudian untuk menambahkan navigasi langkahnya sebagai berikut:

22. Pilihlah pada menu Insert > Data Objects > Recordset Paging > Recordset Navigation Bar, maka akan membuka kotak dialog Recordset Navigation Bar, dimana hanya ada 2 pilihan

23. Pilihlah Text, maka akan secara otomatis menambahkan button teks navigasi di bawah tabel

24. Maka hasil tampilannya menjadi seperti gambar berikut:

.

8.5. Membuat Form Tambah Data

1. Untuk menambahkan data pada tabel, bukalah halaman formtambahbrg.php 2. Pada panel Server Behaviors, klik button tanda (+) pada atas panel, dan pilih Insert Record.

3. Maka akan muncul kotak dialog Insert Record berikut:

4. Pada Insert Record pastikan record pada Columns (misalkan kode_brg) sama dengan pada Value

(kode_brg). 5. Pada After inserting, go to, merupakan halaman yang akan dibuka setelah insert tabel. Isilah

dengan menekan tombol browse kemudian pilihlah ke file pengelolaanbrg.php.

6. Klik Ok untuk memilik file tersebut dan klik Ok untuk menutup kotak dialog Insert Record server behavior, kemudian save halaman formtambahbrg.php

7. Lihatlah hasilnya pada Preview Internet Explorer.

8.6. Membuat Link Halaman Update

1. Untuk membuat halaman Update, bukalah file pengelolaanbrg.php

2. Pada propertis HTML, klik link kemudian pilih file updatebrg.php

3. Klik tombol Parameter, maka akan muncul kotak dialog Parameter.

4. Pada Name isilah dengan kode_brg, kemudian pada Value klik tombol lightning, maka akan muncul

kotal dialog berikut:

5. Pilih kode_brg, kemudian klik tombol OK, maka hasilnya menjadi berikut:

6. Kemudian klik OK. Bukalah pada tampilan kode dan pastikan kode yang terbentuk sebagai berikut:

8.7. Membuat Link Halaman Delete

1. Dengan cara yang sama pada link Update, maka pada halaman pengelolaanbrg.php, blok teks DELETE, kemudian buat link ke halaman hapusbrg.php

2. Tampilannya sebagai berikut:

3. Klik tombol Parameter, maka akan muncul kotak dialog Parameter.

4. Pada Name isilah dengan kode_brg, kemudian pada Value klik tombol lightning, maka akan muncul

kotal dialog berikut:

5. Pilih kode_brg, kemudian klik tombol OK, maka hasilnya menjadi berikut:

6. Kemudian klik OK. Bukalah pada tampilan kode dan pastikan kode yang terbentuk sebagai berikut:

8.8. Membuat Update Record

1. Bukalah halaman updatebrg.php, kemudian pada panel Server Behaviors kli tombol (+) dan pilih Recordset.

2. Setelah dipilih Recordset maka akan muncul kotak dialog Recordset seperti berikut:

3. Isilah pada kotak Recordset di atas seperti berikut:

Name: Barang

Connection: Penjualan

Table: barang

Columns: Pilih all.

Filter: kode_brg

4. Kemudian klik OK

5. Klik Text field Kode barang, kemudian pada panel Bindings, pilihlah kode_brg, kemudian klik tombol Bind.

6. Dengan cara yang sama klik text field Nama Barang, Jenis, Jumlah, Harga dengan record yang sesuai, kemudian klik tombol bind pada masing-masing record.

7. Klik kursor pada sebelah kanan tombol Update, kemudian masukkan button Hidden Field dari Forms pada Insert panel/bar, atau menu Insert > Form > Hidden Field.

8. Klik tombol hidden button tersebut kemudian pada properties klik hightlight Value

9. kemudian pada properties klik hightlight pada Value

10. Pilihlah kode_brg, kemudian klik OK. Save halaman tersebut dan cobalah dengan menggunakan

Preview.

8.9. Membuat Update Record pada server behavior

1. Bukalah halaman updatebrg.php, kemudian pada panel Server Behaviors klik button (+), dan pilih

Update Record.

2. Pada After updating, go to, klik browse dan pilih ke halaman pengelolaanbrg.php.

3. Tampilan halaman updatebrg.php adalah sebagai berikut:

4. Pilihlah Text field kode barang kemudian pada panel Binding, pilih record kode_brg kemudian klik

tombol Bind, kemudian dengan cara yang sama pada text field Nama barang, Jenis, Jumlah, dan Harga.

5. Save halaman updatebrg.php, kemudian cobalah hasilnya dengan Preview.

8.10. Membuat Hapus Record pada server behavior

1. Bukalah halaman hapusbrg.php pada Design view. 2. Pada panel Server Behaviors klik button (+) pada sebelah kiri atas panel, dan pilih Delete Record.

3. Pada kota dialog Delete Record pastikan bahwa Primary key column dan Primary key value : kode_brg, kemudian pada After deleting, go to : pengelolaanbrg.php.

4. Kemudian klik OK dan save halaman hapusbrg.php tersebut. 5. Cobalah dengan membuka halaman pengelolaanbrg.php kemudian klik link DELETE.