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.
  

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

  • March 10, 2012 at 3:11 am
    Permalink

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

    Reply
  • March 10, 2012 at 2:14 pm
    Permalink

    makasih atas ilmunya…..

    Reply
  • March 13, 2012 at 12:06 am
    Permalink

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

    Reply
  • March 28, 2012 at 10:14 am
    Permalink

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

    by the way, kapan neh lanjutannya? :D

    Reply
  • April 5, 2012 at 12:28 am
    Permalink

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

    Reply
  • April 5, 2012 at 1:25 am
    Permalink

    Part 9 ada di mana? Minta linknya maz..

    Reply
    • April 5, 2012 at 7:25 am
      Permalink

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

      Reply
  • April 10, 2012 at 1:38 pm
    Permalink

    thx ya om…
    tutornya sangat membantu..
    :)

    perlu di update terus..

    Reply
  • April 10, 2012 at 10:51 pm
    Permalink

    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.

    Reply
  • May 10, 2012 at 5:55 pm
    Permalink

    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 ..???

    Reply
  • May 11, 2012 at 7:48 am
    Permalink

    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.

    Reply
  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 11) | Blog Java Web Media

  • May 24, 2012 at 6:55 pm
    Permalink

    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.

    Reply
      • June 13, 2013 at 7:52 pm
        Permalink

        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.

        Reply
  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 12) | Blog Java Web Media

  • June 6, 2012 at 5:13 am
    Permalink

    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 :)

    Reply
    • June 7, 2012 at 1:28 pm
      Permalink

      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

      Reply
  • July 29, 2012 at 4:33 am
    Permalink

    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.

    Reply
  • December 4, 2013 at 10:46 am
    Permalink

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

    Reply
  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 13) – Installasi Text Editor TinyMCE | Blog Java Web Media

  • Pingback: Membuat CMS PHP MySQL Menggunakan Dreamweaver CC, CS6, CS5, CS4, CS3 (Part 10) | Blog Java Web Media

  • August 11, 2014 at 2:58 pm
    Permalink

    makasih bray sekarang ane jadi tau

    Reply
  • November 18, 2014 at 12:44 pm
    Permalink

    kendala nya sama pas ane klik edit ga berfungsi, cuma klik delete yang berfungsi

    blom ada pencerahannya dari adminnya, mungkin adminnya salah nulis tutorial step by stepnya namanya manusia gada yang smpurna
    berharap ada pencerahan…

    Reply
  • November 30, 2014 at 12:01 pm
    Permalink

    Mas link edit nya ko ga berubah ya? Cuma link delete doang yg berhasil

    Aktivasi form edit category

    Klik Insert > Data Objects > Update Record > Update Record. Jendela Update Record akan keluar.
    Submit values from: form2
    Connections: cms_blog
    Update table: category
    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.
    Klik pada kolom “category”, lalu di bagian menu bawah Anda akan melihat menu Value: None, ubah nilai None tadi menjadi FORM.category2.
    After updating, goto: category.php
    Klik OK untuk menyelesaikan pekerjaan Anda
    Simpan kembali file Anda

    Ketika saya ikuti diatas tulisan id not value gitu

    Reply
  • December 3, 2014 at 4:25 pm
    Permalink

    ini kenapa ketika saya update record

    column ‘category’ is maped to a form element that does not exist. please map the column to an existing for a element or set its value to ‘none’

    dan ketika saya set value to ‘ none’ sama aja.. kenapa ya kak? ada solusinya ga?

    Reply

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.