Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 8)

Sebelum masuk ke tutorial Part 8 ini, Anda sebaiknya mempelajari seri 1-7 dari tutorial Membuat CMS PHP MySQL dengan Dreamweaver ini.

  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. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 7)
  10. Mendownload Source Code Part 7. Silakan di download di link ini.

Pada Part 8 ini, Anda akan belajar untuk membuat:

  • Menambah, mengedit dan menghapus kategori berita
  • Menampilkan listing kategori berita

Membuat form tambah kategori

Java Web Media: Web Design Company Depok

Java Web Media: Web Design Company Depok

Untuk membuat form tambah kategori berita, berikut adalah langkah-langkahnya:

  1. Melalui Design View, seleksi tulisan “Form add category goes here”. Lalu hapus tulisan tersebut.
  2. Klik Insert > Form > Form
  3. Klik Insert > Spry > Spry Validation Textfield. Jendela Spry Validation Textfield akan keluar.
  4. Lalu isi data berikut ini, ID: category dan Label: Add new category:. Klik OK
  5. Letakkan kursor Anda di samping kolom textfield.
  6. Klik Insert > Form > Button. Masukkan ID: submit, lalu klik OK.
  7. Copy button Submit tersebut lalu paste di samping, ubah menjadi Reset form
Mengaktifkan form agar bisa memasukkan kategori baru
  1. Klik Insert > Data Objects > Insert Record > Insert Record. Jendela Insert Record akan keluar
  2. Submit values from: form1
  3. Connection: cms_blog
  4. Insert table: category
  5. After inserting go to: category.php
  6. Klik OK

Mencegah masuknya kategori yang sama

Anda tentu tidak ingin kategori yang sama masuk ke dalam database, nah di sini, Anda harus melakukan pencegahan.

  1. Klik Insert > Data Objects > User Authentication > Check New Username
  2. Username field: category
  3. If already exist, go to: category.php
  4. Klik OK
  5. Simpan kembali file Anda

Menampilkan peringatan jika kategory yang sama sudah ada dalam database

Untuk menampilkan peringatan, Anda harus mengerjakannya dengan manual koding. Ubah lembar kerja Anda menjadi Code View. Cari kode di bawah ini:
<td colspan=”2″ scope=”col”>
<form name=”form1″ method=”POST” action=”<?php echo $editFormAction; ?>”>

Lalu ubah menjadi:

<td colspan=”2″ scope=”col”>
<?php if(isset($_GET['requsername'])) { ?>
<p style=”color:red”>Oopss…, kategori: <strong><?php echo $_GET['requsername']; ?></strong> sudah tersimpan dalam database. Masukkan kategori yang berbeda.</p>
<?php } ?>
<form name=”form1″ method=”POST” action=”<?php echo $editFormAction; ?>”>Simpan kembali pekerjaan Anda.

Menampilkan data kategori yang terlah tersimpan dalam database

Anda harus membuat recordset terlebih dahulu untuk menampilkan data kategori berita. Berikut adalah langkah-langkahnya:

  1. Klik Insert > Data Objects > Recordset. Jendela Recordset akan keluar.
  2. Name: Recordset1
  3. Connection: cms_blog
  4. Table: category
  5. Sort: category, lalu pilih Ascending
  6. Klik OK
  7. Ubah lembar kerja Dreamweaver Anda menjadi Design View.
    Java Web Media: Web Design Company Depok

    Java Web Media: Web Design Company Depok

  8. Seleksi tulisan “Category name goes here”, lalu hapus tulisan tersebut.
  9. Klik Window > Binding. Di sana akan muncul Recordset (Recordset1) yang tadi Anda buat. Klik tanda plus (+) kecil yang ada pada recordset tersebut.
  10. Klik pada category (Yang di sampinganya ada tanda petir).
  11. Drag menuju tulisan yang baru saja Anda hapus tadi (lihat langkah ke 8)
  12. Simpan kembali file Anda.
Java Web Media: Web Design Company Depok

Java Web Media: Web Design Company Depok

Menambahkan link dinamis pada Edit dan Delete kategory.

Java Web Media: Web Design Company Depok

Java Web Media: Web Design Company Depok

  1. Seleksi tulisan Edit
  2. Lalu melalui panel Properties (Klik Window > Properties (pastikan bertanda checked)
  3. Pada menu Link, ketik category.php lalu klik icon Folder yang ada di sampingnya. Jendela Select File akan muncul.
  4. Di area bagian bawah, Anda akan lihat menu URL dan tombol Parameters… Klik tombol Parameters tersebut. Jendela Parameters.. akan muncul.
  5. Pada menu Name ketik edit, lalu pada menu Value, klik area putih sejajar dengan tulisan edit. Icon petir akan muncul. Klik Ikon Petir tersebut. Jendela Dynamic Data akan muncul.
  6. Pilih/klik field/kolom ID, lalu klik OK sebanyak 3 (tiga) kali.
  7. Lakukan hal yang sama untuk link Delete, hanya saja lakukan perubahan pada Name menjadi bernilai delete.
  8. Simpan kembali file Anda
Looping data kategori dengan Repeat Region

Untuk menampilkan data semua kategori, kita akan melakukan looping. Ubah lembar kerja Anda menjadi Code View. Seleksi kode di bawah ini:

<tr>
<td width=”70%”><?php echo $row_Recordset1['category']; ?></td>
<td width=”30%”><a href=”category.php?edit=<?php echo $row_Recordset1['ID']; ?>”>Edit</a> | <a href=”category.php?delete=<?php echo $row_Recordset1['ID']; ?>”>Delete</a></td>
</tr>

  1. Seleksi kode di atas.
  2. Klik Insert > Data Object > Repeat Region. Jendela Repeat Region akan keluar.
  3. Recordset: Recordset1
  4. Show: All records (Anda akan menampilkan semua data recordset1)
  5. Klik OK
  6. Simpan kembali pekerjaan Anda

Mengaktifkan link Edit dan Delete kategori

Anda akan mengaktifkan link edit dan delete kategori, berilkut adalah langkah untuk mengedit kategori yang sudah ada.

  1. Langkah pertama adalah dengan membuat recordset
    Java Web Media: Web Course di Depok

    Java Web Media: Web Course di Depok

  2. Klik Insert > Data Objects > Recordset. Jendela Recordset akan keluar.
  3. Name: rsEdit
  4. Connection: cms_blog
  5. Table: category
  6. Filter: ID, URL Parameter dan =
  7. Ubah tulisan ID menjadi edit
  8. Klik OK
  9. Melalui Design View, seleksi tulisan “Form edit category goes here”. Lalu hapus tulisan tersebut.
  10. Klik Insert > Form > Form
  11. Klik Insert > Spry > Spry Validation Textfield. Jendela Spry Validation Textfield akan keluar.
  12. Lalu isi data berikut ini, ID: category dan Label: Edit category:. Klik OK
  13. Untuk menampilkan data yang akan Anda edit, ubah lembar kerja Anda menjadi Code View, lalu cari kode berikut: <input type=”text” name=”category2″ id=”category2″>
  14. Lalu ubah menjadi: <input name=”category2″ type=”text” id=”category2″ value=”<?php echo $row_rsEdit['category']; ?>”>
  15. Letakkan kursor Anda di samping kolom textfield.
  16. Klik Insert > Form > Hidden Field 
  17. Ubah hiddenfield tersebut menjadi ID melalui panel Properties.
  18. Pada menu Value, klik icon petir. Lalu pilih fields ID yang ada dalam Recordset (rsEdit). Lalu klik OK.
    Java Web Media: Kursus Website di Depok

    Java Web Media: Web Design di Depok

  19. Klik Insert > Form > Button. Masukkan ID: submit, lalu klik OK.
  20. Copy button Submit tersebut lalu paste di samping, ubah menjadi Reset form
  21. PERINGATAN: DREAMWEAVER AKAN OTOMATIS MENGUBAH TEXTFIELD YANG SAMA (DALAM HAL INI category MENJADI category1)
  22. Simpan kembali hasil pekerjaan Anda.

Aktivasi form edit category

  1. Klik Insert > Data Objects > Update Record > Update Record. Jendela Update Record akan keluar.
  2. Submit values from: form2
  3. Connections: cms_blog
  4. Update table: category
  5. Columns:, di sana Anda akan menyadari bahwa hanya ID yang mendapatkan nilai (‘ID’ Select record using ‘FORM.ID’ as ‘INTEGER’, hanya saja yang category tidak mendapatkan value/nilai.
  6. Klik pada kolom “category”, lalu di bagian menu bawah Anda akan melihat menu Value: None, ubah nilai None tadi menjadi FORM.category2.
  7. After updating, goto: category.php
  8. Klik OK untuk menyelesaikan pekerjaan Anda
  9. Simpan kembali file Anda
Mengaktifkan link delete category
Java Web Media: Web Design in Depok

Java Web Media: Web Design in Depok

Untuk mengaktifkan link delete category, ikuti langkah berikut ini:
  1. Klik Insert > Data Objects > Delete Record 
  2. First check if variable is defined: Primary key
  3. Connection: cms_blog
  4. Table: category
  5. Primary key: ID, Numeric
  6. Primary key value: URL Parameter, ubah tulisan yang semula ID menjadi delete
  7. After deleting, go to: category.php
  8. Klik OK untuk menyelesaikannya.
  9. Simpan kembali pekerjaan Anda
  10. Jika Anda melakukan uji coba untuk menghapus data kategory, Anda akan mengalami page error.
Mengatasi page error setelah proses menghapus data kategory dapat dilakukan sebagai berikut:
Cari kode di bawah ini, terletak di sekitar baris ke 171:
Java Web Media: Web Design in Depok

Java Web Media: Web Design in Depok

$deleteGoTo = “category.php”;
if (isset($_SERVER['QUERY_STRING'])) {
$deleteGoTo .= (strpos($deleteGoTo, ‘?’)) ? “&” : “?”;
$deleteGoTo .= $_SERVER['QUERY_STRING'];
}
header(sprintf(“Location: %s”, $deleteGoTo));
}Hapus baris kode ke-172 sampai dengan 175, sehingga kode yang tersisa hanya seperti berikut:$deleteGoTo = “category.php”;
header(sprintf(“Location: %s”, $deleteGoTo));
}
Simpan kembali hasil pekerjaan Anda.

31 comments on “Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 8)

  1. mantabbb euyyy…

  2. wah mantap puuoool,mulai dari g ngerti sampai sedikit ngerti terima kasih mass bro tak lanjutkan ngoprekkkkk.

  3. makasih atas ilmunya…..

  4. mas mau nanya dong..
    untuk form berita nya, gak seperti gambar yang mas tunjukin..
    belom di bikin yah tutornya?

  5. heheh.. thx mas, dah mulai faham neh pake DW

    by the way, kapan neh lanjutannya? :D

  6. Maz br0.. Stelah part 8 selesai tahap selanjutnya apa?

  7. Part 9 ada di mana? Minta linknya maz..

    • Maz minta latihan cms link part 9.. Tak cari-cari gak ada soalnya.

  8. thx ya om…
    tutornya sangat membantu..
    :)

    perlu di update terus..

  9. sbelumny trimakasih java web media.
    q dh buat web cms dari tutor2nya.
    q sekarang lg buat web toko online
    tp masalahnya q gk tw cara bikin
    skrip keranjangnya dan report hasil penjualan per tanggal.
    mohon bantuanya web toko online ini saya buat untuk bahan TA.

  10. hihi om aku dah coba ikutin sampe sini pas coba.. mau edit category name tp data yang di sumbmit gak muncul om. malah gak ada text nya..tp yang delete bisa cuma kalo mau rubah nama category aja..kira- kenapa yah om?? tiap kali edit nama kategory nama kategorynya jadi kosong ..???

  11. Sudah mengikuti langkah2 dengan benar apa belum? Sebenarnya cukup sederhana, untuk form edit Anda harus memanggil data yang akan diedit terlebih dahulu. Jika sudah bisa baru aktifkan form edit.

  12. [...] Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8.)  [...]

  13. sama neh kasusnya kaya bro dadan, pas klik link edit di salah satu kategori gak terjadi perubahan apa2, lalu masukkan text di edit kategori. namun setelah di submit nama kategori yang tadi diklik link editnya jadi ilang.

    • Silakan cek pada value option nya. Sekilas dari gambar value yang ada pada input option tidak ada.

      • ane dapet problem yang sama gan.
        udah ane udah klik value option, udah klik ok.

        pas dijalanin, tetep gak jalan.
        ane buka lagi, value option kosong lagi gan.

  14. [...] Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8.)  [...]

  15. ka, maaf mau tanya kalau mau bikin laporan pertanggal, terus cari, itu di dreamweaver gimana yaa? saya bingung ini, soalnya saya newbie, makasih, ditunggu jawabannya :)

    • Sekilas pertanyaan Anda cukup sederhana, tapi cukup membingungkan. Sebenarnya Anda dapat menggunakan advance recordset. Katakanlah untuk tanggal 2012-06-05 dari database, maka Anda hanya tinggal menggunakan QUERY SQL:
      SELECT * FROM your_table WHERE date_report = ’2012-06-05′ ORDER BY id_report DESC

  16. mau nanya donk .,kalau misalkkan kita mau menampilkan berita sesuai dengan category yang ada gmana caranya bang ?
    kalau di index berita kan penampilannya secara keseluruhan tuh dari kategori yang ada ,nah yang saya mau tanya kan gimana cara menampilkanya sesuai dengan categori2 yang sudah kita tentukan …
    misalnya kusus category komputer berarti beritanya komputer saja…
    makasih sblumnya.

  17. ass
    mas ko screenshot gambarnya gada ya?
    mohon perbaiki dong mas pnting banget untuk media belajar
    insya allah ilmu mas bermanfa’at dunia akhirat

  18. […] Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8.)  […]

  19. […] Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8) […]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Social Widgets powered by AB-WebLog.com.