Posting ini adalah lanjutan dari Posting sebelumnya. Oleh karena itu sebelum membaca posting ini, pastikan Anda telah membaca dan mengikuti artikel-artikel sebelumnya:
- Membuat Site Definition di Dreamweaver CS5, dan
- Membuat koneksi database PHP MySQL dengan Dreamweaver CS5
- Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 1)
- Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 2)
- Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 3)
- Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 4)
- Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 5)
- Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 6)
- 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:
- Klik Insert > Data Objects > Recordset
- Name: rEdit (ubahlah defaultnya yang semula Recordset1 menjadi rsEdit)
- Connection: cms_blog
- Table: post
- Columns: All
- Filter: ID, URL Parameter
- Ubah tulisan ID yang ada di kolom sampingnya menjadi edit
- Sort: updated, Descending
- Klik OK untuk menyelesaikannya.
- Simpan kembali hasil pekerjaan Anda.
Membuat Recordset (rsCategory) ==> Untuk KATEGORI BERITA
Berikut adalah langkah-langkahnya:
- Klik Insert > Data Objects > Recordset
- Name: rsCategory (ubahlah defaultnya yang semula Recordset1 menjadi rsCategory)
- Connection: cms_blog
- Table: category
- Columns: All
- Filter: None
- Sort: category, Ascending
- Klik OK untuk menyelesaikannya.
- 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:
- Buka kembali file edit-news.php. Anda akan bekerja dalam mode Design View, jadi ubah workspace Anda menjadi Design View
- Seleksi tulisan “Form edit news goes here”. Hapus tulisan tersebut
- Klik Insert > Form > Form
- Klik Insert > Spry > Spry Validation Text Field. Spry berfungsi untuk validasi input. Jendela Input Tag akan keluar.
- ID: title
- Label: Judul berita:
- Klik OK. Form text field akan muncul di Design View Anda. Letakkan kursor Anda setelah text field tersebut lalu tekan ENTER.
- Klik Insert > Spry > Spry Validation Select. Jendela Input Tag akan keluar
- ID: category
- Label: Kategori berita:
- Klik OK. Form select akan keluar. Letakkan kursor Anda setelah form select tersebut lalu tekan ENTER
- Klik Insert > Spry > Spry Validation Text Area
- ID: content
- Label: Isi berita:
- Klik OK untuk menyelesaikannya. Form text area akan muncul, letakkan kursor
sesudahnya lalu tekan ENTER.
- Klik Insert > Form > Button
- ID: submit. ==> Label tidak perlu Anda isi.
- Klik OK
- Seleksi tombol Submit tersebut, lalu copy dan paste di sampingnya.
- Seleksi tombol Submit yang baru saja Anda paste tadi, lalu melalui panel Propertiesubah menjadi Reset
Form.
- 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).
- Lakukan hal yang sama pada form input content. Ubah Char width: 60 (semula 45) dan Num lines: 10 (semula 5)
- Letakkan kursor Anda di samping tombol Reset
- Klik Insert > Form > Hidden Field
- 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.
- 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:
- Buka kembali file add-news.php. Anda akan bekerja dalam mode Design View, jadi ubah workspace Anda menjadi Design View
- 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.
- Klik form input textfield title pada bagian judul berita, . Pada menu Properties akan muncul menu Init val dengan gambar petir.
- Klik icon petir tersebut, maka akan muncul jendela Dynamic Data.
- Expand jendela Recordset (rsEdit) dengan mengklik
tanda plus (+). Lalu pilih/klik kolom tabel title. Klik OK untuk menyelesaikannya.
- Klik form input select category, lalu pada menu Properties akan muncul menu Dynamic … (dengan gambar petir).
- Klik menu Dynamic… tersebut, maka jendela Dynamic List/Menu akan keluar.
- Anda langsung saja menuju ke pilihan Option from recordset: rsCategory (klik dropdown menu yang semula bernilai None menjadi rsCategory)
- Lalu pada pilihan Values dan Labels yang semula bernilai ID ubah menjadi category.
- Lalu pada menu Select value equal to: (disana Anda akan melihat gambar petir). Klik gambar petir tersebut, maka jendela Dynamic Data akan keluar.
- Lalu dari Recordset (rsEdit) pilih kolom category.
- Klik OK sebanyak dua kali untuk menyelesaikan.
- Klik form input textarea content, menu Properties akan muncul pilihan Init val dengan tanda petir. Klik gambar petir tersebut. Jendela Dynamic Data akan muncul.
- Lalu pada Recordset (rsEdit) pilih kolom content
- Klik OK untuk menyelesaikannya.
- Klik pada form input hidden field ID. Pada menu Properties akan muncul menu Value dengan tanda petir.
- Klik tanda petir tersebut. Jendela Dynamic Data akan muncul.
- Klik kolom ID pada Recordset (rsEdit).
- Klik OK untuk menyelesaikannya.
- 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:
- Klik Insert > Data Objects > Update Record > Update Record. Jendela Update Record akan keluar.
- Submit values from form: form1
- Connection: cms_blog
- Update Table: post
- Pada menu Columns, pastikan hanya kolom updated yang bernilai Does Not get a Value.
- After updating, go to: index.php.
- Klik OK untuk menyelesaikannya.
- 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.
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
Halaman category belum selesai diupdate. Di halaman tersebut nanti Anda bisa menambah dan menghapus kategori.
Part 8 sudah release Mas. Silakan dilanjut
Saya sudah praktekkan sampai part 7 dan sukses, tapi untuk menampilkan beritanya di news.php gimana cara? mohon pencerahan,,,
Sabar yaahhhh…. Blum sempat update lagi…
sabar menunggu update berikutnya………….
tutor yang bagus. silakan dilanjutkan mas.
semoga bermanfaat untuk semua.
belum ada update terbarunya ya mas
Belum mas. Lagi ngerjain beberapa project dan ngajar (koreksi tugas mahasiswa)…
thanx
Thanks juga
tutorial sama sourc code nya ga sinkron. .. ngaco
Haha…silakan di baca lagi urutannya mas. Dirimu langsung baca part 7, coba ikuti part-part sebelumnya…
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….
Baru diketik sebagian Part 8 Mas. Mudah2an segera…
ok semngat bang…..
ane tunggu
Part 8 sudah release yah, silakan kunjungi di Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8)
wahhh mantap nih tutorialnya, tapi saya masih newbie belum paham ginian
keren,,,,
ane uda brhasil gan,,
ampe part 7.
eh.. ane publish ulang ya gan tutornya. boleh khan ?
credit tetep JAVA WEB MEDIA
Silakan saja, mau dipublish dimana?
Part 8 Sudah release, silakan dicoba lagi
mas kok menu kategorinya gak munculya,,? kira-kira ada kesalahan dimana ya???
Mas, untuk melakukan “Membuat Recordset (rsEdit)” pada bagian part pertama ini dilakukan di page mana?
benar bukan kalau di “add-news.php” ?
maaf nanya lagi, itu yg bagian pertama bagian namenya diganti dengan “rsEdit” atau “rsCategory”.
soalnya gambar dengan penjelasan dibawahnya berbeda.
Gambar berfungsi sebagai illustrasi aja Mas.Silakan ikuti langkah2nya saja…
Anda benar. Harusnya rsEdit (bukan rsCategory)…
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
Itu terbalik mas. Harusnya di variable name=edit dan variable value=3. Silakan ikuti step2nya dengan benar. Sy yakin bisa.
sudah selesai mas! ternyata pada step lima nya di index.php ketika pembuatan link.
trims banyak mas atas tutoriaonya. hehehehe
Hihi…bisa kan.
Numpang comment lagi ya mas…. :D :D :D :D
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)
Silakan dibaca dari Part 1 saja.
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
mas, waktu mau bikin insrt record, kenapa semua kolom “Does Not Get a Value” ya?
makasih mantap web nya sukses sampai part 6 lanjut part 7
Sama-sama… Senang bermanfaat
Maaf mas ane ada kesulitan untuk part7 ini, untuk Membuat Recordset (rsEdit) ==> Untuk BERITA nah ini buatnya di file add-news? ane praktekin kok jadi beda ya pas gambar ini http://javawebmedia.com/blog/wp-content/uploads/2012/01/javawebmedia_08012012_090059.jpg kok punyaku beda recordestnya punyaku ada 3 klo gag salah,alhasil bljarnya bru nyampe sini part7 cz bingung,hehehee.. mohon pencerahanya mas.
Iya benar, di file add-news.php.
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
part 9 ya mas tolonk makasih ya mas sebelumnya
Lihat jawaban yang lain yah. Part 10, 11 dan 12 sudah ada. Silakan dibaca yah.
tolonk ya mas part 9 dan 10 ya makasih mas thanks sebelumnya
Part 10, 11 dan 12 sudah ada. Silakan dibaca yah.
wes.. mantap benar dah tutorialnya..
saya, dah banyak tutorial yg saya cari,tapi baru ini yg luar biasa detailnya..
ikut gabung ya mas.. trimakasih
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..
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
Haha….coba saya cek ulang yah.. Sudah direvisi yah. Mohon maaf
Anda benar mas. Sudah direvisi yah Part 7-nya. Seharunya memang di EDIT-NEWS.PHP.
Terimakasih