Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 7)

Posting ini adalah lanjutan dari Posting sebelumnya. Oleh karena itu sebelum membaca posting ini, pastikan Anda telah membaca dan mengikuti artikel-artikel sebelumnya:

1. Membuat Site Definition di Dreamweaver CS5 , dan2. Membuat koneksi database PHP MySQL dengan Dreamweaver CS5 3. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 1) 4. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 2) 5. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 3) 6. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 4) 7. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 5) 8. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 6) 9. Mendownload Source Code Part 6.   Silakan di download di link ini.

Pada tutorial Part 7 ini, Anda akan belajar bagaimana:

Membuat recordset edit berita Membuat recordset kategori Membuat form edit berita Binding data ke dalam form yang telah dibuah Mengaktifkan form edit berita

Membuat Recordset (rsEdit) ==> Untuk BERITA

Ketika Anda ingin mengedit data Anda melalui form, maka data lama Anda harus bisa tertampil dalam form tersebut. Maka untuk menampilkan data tersebut Anda membutuhkan query PHP yang memungkinkan untuk menampilkan data tersebut.

Anda masih ingat, link edit kita akan menghasilkan link seperti ini: http://localhost/cms_blog/admin/edit-news.php?edit=10, ini artinya query/recordset yang akan kita buat harus menggunakan URL Parameter sebagai filternya.

Untuk membuat query/recordset tersebut, maka berikut langkah-langkahnya:

1. Klik Insert > Data Objects > Recordset2. Name: rEdit  (ubahlah defaultnya yang semula Recordset1 menjadi rsEdit)3. Connection: cms_blog4. Table: post5. Columns: All6. Filter: ID, URL Parameter7. Ubah tulisan ID yang ada di kolom sampingnya menjadi edit8. Sort: updated, Descending9. Klik OK untuk menyelesaikannya.10. Simpan kembali hasil pekerjaan Anda.

Membuat Recordset (rsCategory) ==> Untuk KATEGORI BERITA

Berikut adalah langkah-langkahnya:

1. Klik Insert > Data Objects > Recordset2. Name: rsCategory (ubahlah defaultnya yang semula Recordset1 menjadi rsCategory)3. Connection: cms_blog4. Table: category

5. Columns: All6. Filter: None7. Sort: category, Ascending8. Klik OK untuk menyelesaikannya.9. Simpan kembali hasil pekerjaan Anda.

Membuat form edit berita (edit-berita.php)

Langkah membuat form edit berita sebenarnya sama dengan langkah membuat form update berita. Perbedaannya adalah pada penambahan input hidden field sebagai tempat menyimpan primary key dari tabel berita.

Terkait langkah lebih detail yang dilengkapi dengan Gambar, silakan baca tutorial Part 4:   Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 4).

Berikut adalah langkah-langkahnya:

1. Buka kembali file add-news.php. Anda akan bekerja dalam mode Design View, jadi ubah workspace Anda menjadi Design View

2. Seleksi tulisan “Form edit news goes here”. Hapus tulisan tersebut3. Klik Insert > Form > Form4. Klik Insert > Spry > Spry Validation Text Field. Spry berfungsi untuk validasi input.

Jendela Input Tag akan keluar.5. ID: title6. Label: Judul berita:7. Klik OK. Form text field akan muncul di Design View Anda. Letakkan kursor Anda

setelah text field tersebut lalu tekan ENTER.8. Klik Insert > Spry > Spry Validation Select. Jendela Input Tag akan keluar9. ID: category10. Label: Kategori berita:11. Klik OK. Form select akan keluar. Letakkan kursor Anda setelah form select tersebut

lalu tekan ENTER12. Klik Insert > Spry > Spry Validation Text Area13. ID: content14. Label: Isi berita:15. Klik OK untuk menyelesaikannya. Form text area akan muncul, letakkan kursor

sesudahnya lalu tekan ENTER.16. Klik Insert > Form > Button 17. ID: submit. ==> Label tidak perlu Anda isi. 18. Klik OK 19. Seleksi tombol Submit tersebut, lalu copy dan paste di sampingnya. 20. Seleksi tombol Submit yang baru saja Anda paste tadi, lalu melalui panel Properties

rubah menjadi Reset Form.21. Seleksi form input title yang Anda buat pada langkah ke-4 sampai ke-7,  lalu melalui

panel Properties, ubah Char width: 50. Ini untuk memperlebar ukuran text field yang telah Anda buat (secara default Dreamweaver tidak mendefinisikan lebar karakter textfield, jadi kira-kira hanya 30 karakter).

22. Lakukan hal yang sama pada form input content. Ubah Char width: 60 (semula 45) dan Num lines: 10 (semula 5)

23. Letakkan kursor Anda di samping tombol Reset 24. Klik Insert > Form > Hidden Field25. Melalui panel Properties (terletak di sebelah bawah Workspace Anda), ubah Hidden

Field tersebut yang semula bernilai: hiddenField menjadi ID. Lihat gambar di atas untuk lebih detailnya.

26. Letakkan kursor Anda di samping tombol Reset lalu simpan kembali hasil pekerjaan Anda.

Binding data ke dalam form yang telah dibuah

Binding data adalah menempelkan data lama yang telah kita buat query-nya tadi (Recordset(rsEdit) dan Recordset(rsCategory) ke dalam form yang telah dibuat.

Berikut adalah langkah-langkahnya:

1. Buka kembali file add-news.php. Anda akan bekerja dalam mode Design View, jadi ubah workspace Anda menjadi Design View

2. Pada langkah ini, ketelitian pada area yang diklik sangat diperlukan (lihat ilustrasi gambar area yang nantinya harus diklik). Akan ada 4 (empat) form input yang harus Anda klik dan kemudian dibinding dengan data dari recordset, yaitu input: ID, title, category,  dan content.