Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, 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:

Java Web Media: Web Design and Web Programming Course Depok

  1. Membuat Site Definition di Dreamweaver CS5, dan
  2. 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:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Klik Insert > Data Objects > Recordset
  2. Name: rEdit  (ubahlah defaultnya yang semula Recordset1 menjadi rsEdit)
  3. Connection: cms_blog
  4. Table: post
  5. Columns: All
  6. Filter: ID, URL Parameter
  7. Ubah tulisan ID yang ada di kolom sampingnya menjadi edit
  8. Sort: updated, Descending
  9. Klik OK untuk menyelesaikannya.
  10. Simpan kembali hasil pekerjaan Anda.

Membuat Recordset (rsCategory) ==> Untuk KATEGORI BERITA

Berikut adalah langkah-langkahnya:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Klik Insert > Data Objects > Recordset
  2. Name: rsCategory (ubahlah defaultnya yang semula Recordset1 menjadi rsCategory)
  3. Connection: cms_blog
  4. Table: category
  5. Columns: All
  6. Filter: None
  7. Sort: category, Ascending
  8. 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 edit-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 tersebut
  3. Klik Insert > Form > Form
  4. Klik Insert > Spry > Spry Validation Text Field. Spry berfungsi untuk validasi input. Jendela Input Tag akan keluar.
  5. ID: title
  6. 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 keluar
  9. ID: category
  10. Label: Kategori berita:
  11. Klik OK. Form select akan keluar. Letakkan kursor Anda setelah form select tersebut lalu tekan ENTER
  12. Klik Insert > Spry > Spry Validation Text Area
  13. ID: content
  14. Label: Isi berita:
  15. Klik OK untuk menyelesaikannya. Form text area akan muncul, letakkan kursor
    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok

    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 Propertiesubah menjadi Reset
    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok

    Form.

  21. Seleksi form input title yang Anda buat pada langkah ke-4 sampai ke-7lalu 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 Field
  25. 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:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  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.
    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok

     

  3. Klik form input textfield title pada bagian judul berita. Pada menu Properties akan muncul menu Init val dengan gambar petir.
  4. Klik icon petir tersebut, maka akan muncul jendela Dynamic Data.
  5. Expand jendela Recordset (rsEdit) dengan mengklik
    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok

    tanda plus (+). Lalu pilih/klik kolom tabel title. Klik OK untuk menyelesaikannya.

  6. Klik form input select category, lalu pada menu Properties akan muncul menu Dynamic … (dengan gambar petir).
  7. Klik menu Dynamic… tersebut, maka jendela Dynamic List/Menu akan keluar.
  8. Anda langsung saja menuju ke pilihan Option from recordset: rsCategory (klik dropdown menu yang semula bernilai None menjadi rsCategory)
    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok

     

    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok
  9. Lalu pada pilihan Values dan Labels yang semula bernilai ID ubah menjadi category.
  10. Lalu pada menu Select value equal to: (disana Anda akan melihat gambar petir). Klik gambar petir tersebut, maka jendela Dynamic Data akan keluar.
  11. Lalu dari Recordset (rsEdit) pilih kolom category
  12. Klik OK sebanyak dua kali untuk menyelesaikan.
  13. Klik form input textarea content, menu Properties akan muncul pilihan Init val dengan tanda petir. Klik gambar petir tersebut. Jendela Dynamic Data akan muncul.
  14. Lalu pada Recordset (rsEdit) pilih kolom content

    Java Web Media: Web Design and Web Programming Course Depok
    Java Web Media: Web Design and Web Programming Course Depok
  15. Klik OK untuk menyelesaikannya.
  16. Klik pada form input hidden field ID. Pada menu Properties akan muncul menu Value dengan tanda petir.
  17. Klik tanda petir tersebut. Jendela Dynamic Data akan muncul.
  18. Klik kolom ID pada Recordset (rsEdit).
  19. Klik OK untuk menyelesaikannya.
  20. Simpan kembali hasil pekerjaan Anda.

Mengaktifkan form edit berita 

Anda telah berhasil melakukan binding data pada form edit berita yang telah Anda buat. Langkah selanjutnya adalah mengaktifkan form edit tersebut.

Berikut adalah langkah-langkahnya:

Java Web Media: Web Design and Web Programming Course Depok
Java Web Media: Web Design and Web Programming Course Depok
  1. Klik Insert > Data Objects > Update Record > Update Record. Jendela Update Record akan keluar.
  2. Submit values from form: form1
  3. Connection: cms_blog
  4. Update Table: post
  5. Pada menu Columns, pastikan hanya kolom updated yang bernilai Does Not get a Value.
  6. After updating, go to: index.php. 
  7. Klik OK untuk menyelesaikannya.
  8. Simpan kembali file edit-news.php.

Uji coba mengedit/update berita

Untuk melakukan uji coba update/edit berita, silakan buka halaman admin Anda (http://localhost/cms_blog/admin/index.php) kemudian klik link Edit (dalam contoh ini linknya bernilai http://localhost/cms_blog/admin/edit-news.php?edit=10.

Silakan coba untuk mengedit berita tersebut, lalu klik tombol Submit.

BERSAMBUNG

Note: Tema yang lebih Advanced terkait dengan proses membuat CMS ini diajarkan dalam Kursus yang diselenggarakan oleh Java Web Media. Segeralah mendaftar untuk membuat CMS sendiri dengan lebih baik.

 

 

Java Web Media: Web Design di Kota Depok

Java Web Media adalah perusahaan yang bergerak di bidang web design, web programming, web application, web education, graphic design dan graphic education yang berbasis di kota depok.

49 thoughts to “Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 7)”

  1. part 7 sudah dicoba dan sukses. Trims Suhu.
    Tabel post dan cateogry kan saling terkait. Bagaimana caranya ktika menhapus satu kategory semua post yang menggunakan kategory tsb juga ikut terhapus. Jika tidak kategory dilarang dihapus karena sedang digunakan oleh tabel lain. trims

  2. bagus mas tutornya….
    lgi menunggu update.nya nih ?kapan ya? hehehe…..
    walaupun ane udah tau cara bikin cms tapi ane lagi nunggu kejutan2 yang mungkin ane belum taw nih ? kali ajja ada….
    kaya cara memasukan gambar, Searching, ato yang ada transaksinya kaya penjualan ??…
    wkwkwkw…
    banyak maunya nih…..
    tapi ane sangat berharap
    lanjut bang …… sukses buat ngajarnya….

  3. Mas, untuk melakukan “Membuat Recordset (rsEdit)” pada bagian part pertama ini dilakukan di page mana?

    benar bukan kalau di “add-news.php” ?

  4. maaf nanya lagi, itu yg bagian pertama bagian namenya diganti dengan “rsEdit” atau “rsCategory”.

    soalnya gambar dengan penjelasan dibawahnya berbeda.

  5. mas mau nanya, yang step update news saya g sukses.
    di page link nya masih kayak gini mas “edit-news.php?3=”
    harus nya “=3” kan?
    jadi si artikel yang harus nya bisa di update jadi g bisa mas.
    boleh minta saran mas apa permasalahannya?
    saya sudah mengikuti step2 nya dengan seksama mas. trims

  6. sudah selesai mas! ternyata pada step lima nya di index.php ketika pembuatan link.
    trims banyak mas atas tutoriaonya. hehehehe

  7. Numpang comment lagi ya mas…. 😀 😀 😀 😀
    kayaknya mas udah mulai main teka-teki nih yeah…
    mandek lagi nich proyek saya… mulai di page mana sih tutorial ini??
    mohon pencerahan…
    (Maafkan atas ketidak-nyamanan ini, hahaaaaaay…..rencananya sih setelah semua selesai, akan dibongkar lagi proyeknya and start over again jadi harus ada kejelasan)

  8. hadeuh saya senang sekali nyasar ke blog ini, sungguh luar biasa!
    mw tanya dikit om, maaf kalo ngawur maklum wong ndeso. dari tutorial pembuatan cms ini dari segi security-nya gmana om?
    numpang belajar ya om..

    keep forward to javawebmedia.com

  9. maaf mas saya mau tanya , itu untuk masukin list kategorinya dimana yaa..
    saya masih stuck disitu mulai dari form add-news sampai edit news ini ,
    selalu muncul tulisan please select an item disebelah spry validation select..
    mohon bimbinganya ,, terima kasih bbanyak sebelumnya

  10. wes.. mantap benar dah tutorialnya..
    saya, dah banyak tutorial yg saya cari,tapi baru ini yg luar biasa detailnya..

    ikut gabung ya mas.. trimakasih

  11. Membuat Recordset (rsEdit)
    Membuat Recordset (rsCategory)
    Membuat form edit berita (edit-berita.php)
    Binding data ke dalam form yang telah dibuah
    Mengaktifkan form edit berita

    mas tolong dijawab ya, saya jadi bingung itu, mungkin g ada gambarnya, dari semua list diatas semua dibuka melalui add-news.php? soalnya pada list point ke 3 diatas disuruh buka add.news.php, saya jadi bingung mas, tolong dijawab disetiap list harus buka apa saja..? terima kasih..

  12. saya ikuti part 1-7 eh part 7 mulai ngaco, ga sinkron tutorialnya mandek,,
    mohon ralat lagi dong tulisannya itu seharusnya edit-news.php bukannya add-news php saya nyari tulisan Form edit news goes here gada di add news.php adanya edit-news.php

    salam hangat member pecinta javawebmedia.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.