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

Anda memasuki Part 12 dari rangkaian tutorial Pembuatan Aplikasi CMS/Berita sederhana. Pastikan Anda mengikuti tutorial-tutorial Part 1-Part 11 di bawah ini:

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. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 7)
  10. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 8.) 
  11. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 9)
  12. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 10)
  13. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3 (Part 11)
  14. Download source code part 11: cms_blog_part11

Pada Part-12 ini, Anda akan membuat aplikasi komentar pada setiap detail berita. Setiap detail berita akan menampilkan form komentar dan pengunjung website dapat memasukkan komentar mereka. Berikut yang akan Anda pelajari pada Part 12:

  1. Anda dapat membuat form komentar
  2. Pengunjung website dapat memasukkan komentar ke setiap postingan Anda.
  3. Anda dapat memfilter data yang diinput oleh pengunjung website
  4. Anda dapat menampilkan komentar berdasarkan postingan

Form komentar ini akan tersedia di setiap detail berita.

Tabel/Database Komentar

Komentar yang dimasukkan oleh pengunjung harus disetujui terlebih dahulu oleh administrator website sebelum tampil di halaman web. Berikut adalah rancangan database komentar yang akan Anda buat.

  1. id_komentar, kolom primary key komentar.
  2. id_post, adalah kolom untuk menyimpan informasi berita yang diberi komentar.
  3. nama, kolom untuk menyimpan nama pemberi komentar
  4. email, kolom untuk menyimpan alamat email pemberi komentar
  5. komentar, kolom untuk menyimpan data komentar
  6. approval, kolom untuk menyimpan status komentar. Apakah disetujui atau tidak. Setiap komentar baru, maka akan diberi nama baru, jika disetujui maka akan bernilai ok.
  7. tanggal, untuk menyimpan data tanggal komentar

Berikut adalah databasenya:

CREATE TABLE IF NOT EXISTS `komentar` (
 `id_komentar` int(10) NOT NULL AUTO_INCREMENT,
 `id_post` int(10) NOT NULL,
 `nama` varchar(64) NOT NULL,
 `email` varchar(64) NOT NULL,
 `komentar` text NOT NULL,
 `approval` varchar(10) NOT NULL,
 `tanggal` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
 PRIMARY KEY (`id_komentar`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Membuat form komentar

Langkah selanjutnya adalah membuat form komentar. Berikut adalah langkah-langkahnya:

Buka file news.php menggunakan Dreamweaver Anda. Lalu melalui Code View, cari kode di bawah ini:

<?php
 // Menampilkan detail berita yang dipilih
 if(isset($_GET['view']) && ($_GET['view']==$row_rsView['ID'])) {
 ?>
 <h2><?php echo $row_rsView['title']; ?></h2>
<p><?php echo $row_rsView['content']; ?></p>

Form komentar akan ditampilkan setelah <p><?php echo $row_rsView[‘content’]; ?></p>. Tambahkan kode ini:

Java Web Media: Web Design Course Depok
Java Web Media: Web Design Course Depok
<h3>Form komentar:</h3>
<form name="form1" method="post" action="">
 <p>
 <label for="nama">Nama Anda *):</label>
 <input type="text" name="nama" id="nama">
 </p>
 <p>
 <label for="email">Alamat email *):</label>
 <input type="text" name="email" id="email">
 </p>
 <p>
 <label for="komentar">Komentar Anda *):</label>
 <textarea name="komentar" id="komentar" cols="45" rows="5"></textarea>
 </p>
 <p>
 <input type="submit" name="submit" id="submit" value="Submit">
 <input type="reset" name="submit2" id="submit2" value="Reset">
 </p>
</form>
Java Web Media: Web Design Course Depok
Java Web Media: Web Design Course Depok

Selanjutnya melalui Design View, letakkan kursor Anda di samping tombol Reset. Lalu klik Insert > Form > Hidden Field. Ubah nama hidden field tersebut menjadi id_post. Lalu pada menu Value, klik icon petir lalu pilih Recordset (rsView) kemudian pilih kolom ID, lalu klik OK.

Hal ini akan menghasilkan:

<input name="id_post" type="hidden" id="id_post" value="<?php echo $row_rsView['ID']; ?>">
Java Web Media: Web Design Course Depok
Java Web Media: Web Design Course Depok
Java Web Media: A Web Design Company Based in Depok
Java Web Media: A Web Design Company Based in Depok

Lalu letakkan kursor Anda di samping input hidden field id_post tadi. Lalu klik Insert > Form > Hidden Field. Ubah nama hidden field tersebut menjadi approval. Pada menu  Value, ketika dengan nilai baru.

Form di atas memproses inputan nama, email, id_post dan approval dari pengunjung. Kolom id_post akan diset sesuai dengan id berita yang sedang dilihat, sedangkan approval akan diset bernilai baru.

Simpan kembali hasil pekerjaan Anda.

Mengaktifkan form input komentar

Untuk mengaktifkan form input komentar, berikut langkah-langkahnya:

Java Web Media: A Web Design Company Based in Depok
Java Web Media: A Web Design Company Based in Depok
  1. Klik Insert > Data Objects > Insert Record
  2. Submit values from: form1
  3. Connection: cms_blog
  4. Insert table: komentar
  5. Columns, pastikan hanya id_komentar dan tanggal yang tidak mendapatkan value/nilai.
  6. After inserting, go to: news.php
  7. Klik OK

Lakukan uji coba untuk memasukkan komentar Anda. Komentar akan masuk ke dalam database.
Selanjutnya Anda harus memastikan bahwa pengunjung tidak memasukkan komentar yang membahayakan database dan tampilan website Anda.

Menambahkan validasi input komentar

Menggunakan mode Code View, cari kode di bawah ini (terletak di atas <!DOCTYPE>).

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
 $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
 $insertSQL = sprintf("INSERT INTO komentar (id_post, nama, email, komentar, approval) VALUES (%s, %s, %s, %s, %s)",
 GetSQLValueString($_POST['id_post'], "int"),
 GetSQLValueString($_POST['nama'], "text"),
 GetSQLValueString($_POST['email'], "text"),
 GetSQLValueString($_POST['komentar'], "text"),
 GetSQLValueString($_POST['approval'], "text"));

Kita akan menambahkan validasi sebelum data disubmit ke dalam database. Berikut langkah-langkahnya. Letakkan kursor Anda di atas kode, lalu tekan Enter dua kali:

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {

Lalu tambahkan kode ini:

// Check input komentar dari pengunjung
$error = array();
$MM_flag="MM_insert";
if (isset($_POST[$MM_flag])) {
 // Periksa panjang nama, nama minimal 3 karakter
 $_POST['nama'] = trim($_POST['nama']);
 if(empty($_POST['nama']) || strlen($_POST['nama']) < 3) {
 $error['nama'] = "Nama harus diisi minimal 3 karakter";
 }
 //Periksa alamat email
 $checkEmail = '/^[^@]+@[^\s\r\n\'";,@%]+$/';
 if (!preg_match($checkEmail, trim($_POST['email']))) {
 $error['email'] = "Alamat email tidak valid";
 }
 //Periksa komentar
 if(empty($_POST['komentar'])) {
 $error['komentar'] = "Komentar harus diisi";
 }
}
if(!$error) {
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {

Kode di atas bekerja menggunakan array yang berfungsi untuk memvalidasi input komentar yang dimasukkan oleh pengunjung. Selanjutnya cari kode di bawah ini:

header(sprintf("Location: %s", $insertGoTo));
}

Lalu tambahkan kode sehingga menjadi:

header(sprintf("Location: %s", $insertGoTo));
}
// Bersihkan array
$_POST = array();
}

Menampilkan pesan error jika terjadi error dalam proses input komentar

Cari kode di bawah ini:

<h3>Form komentar:</h3>
<form name="form1" method="POST" action="<?php echo $editFormAction; ?>">

Lalu ubah menjadi:

<h3>Form komentar:</h3>
<?php if($error) { ?>
<h3>Ada kesalahan dalam proses pengisian data:</h3>
<p>
<?php foreach($error as $peringatan) { ?>
<br/><?php echo $peringatan; ?>
<?php } ?>
</p>
<?php } ?>
<form name="form1" method="POST" action="<?php echo $editFormAction; ?>">

Kode di atas berfungsi untuk memastikan bahwa pengunjung memasukkan data dengan benar.

Java Web Media: Web Programming Course Depok
Java Web Media: Web Programming Course Depok

Menampilkan komentar yang telah disetujui

Langkah selanjutnya adalah menampilkan komentar di setiap detail posting.

Java Web Media: Web Development Course Depok
Java Web Media: Web Development Course Depok
  1. Buatlah recordset rsKomentar untuk menampilkan komentar.
  2. Klik Insert > Data Objects > Recordset
  3. Name: rsKomentar
  4. Connection: cms_blog
  5. Table: komentar
  6. Columns: All
  7. Filter: id_post, URL Parameter, = dan view

Kemudian cari kode di bawah ini:

<h3>Form komentar:</h3>

Lalu tambahkan kode ini:

<h3>Form komentar:</h3>
<p><?php echo $row_rsKomentar['nama']; ?> | <?php echo $row_rsKomentar['email']; ?></p>
<?php echo nl2br($row_rsKomentar['komentar']); ?><hr/>

Lalu seleksi kode berikut:

<p><strong><?php echo $row_rsKomentar['nama']; ?> | <?php echo $row_rsKomentar['email']; ?></strong></p>
<?php echo nl2br($row_rsKomentar['komentar']); ?><hr/>

Kemudian klik Insert > Data Objects > Repeat Region. Lalu pilih recordset (rsKomentar) kemudian Show all records. Klik OK.

Java Web Media: Web Development Course
Java Web Media: Web Development Course

Menampilkan pesan jika post tidak memiliki komentar

Untuk menampilkan posting yang tidak memiliki komentar, Anda dapat mengubah kode ini:

<?php do { ?>
 <p><strong><?php echo $row_rsKomentar['nama']; ?> | <?php echo $row_rsKomentar['email']; ?></strong></p>
 <?php echo nl2br($row_rsKomentar['komentar']); ?><hr/>
 <?php } while ($row_rsKomentar = mysql_fetch_assoc($rsKomentar)); ?>

Lalu ubah menjadi:

<?php
 // Jika komentar kosong
 if(empty($row_rsKomentar)) {
 ?>
 <p>Belum ada komentar</p>
 <?php }else{ ?>
 <?php do { ?>
 <p><strong><?php echo $row_rsKomentar['nama']; ?> | <?php echo $row_rsKomentar['email']; ?></strong></p>
 <?php echo nl2br($row_rsKomentar['komentar']); ?><hr/>
 <?php } while ($row_rsKomentar = mysql_fetch_assoc($rsKomentar)); ?>
 <?php } ?>
Java Web Media: Graphic Design Course Depok
Java Web Media: Graphic Design Course Depok

Note: Dalam menampilkan komentar, dalam contoh ini fungsi approval tidak digunakan. Dalam aplikasi sebenarnya, fungsi approval hanya bisa diakses oleh administrator website.

Java Web Media: Web Design Course Depok

Java Web Media: Web Design Course Depok

 

 

 

 

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.

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

  1. bang ini apakah tutor terakhir.,.,

    saya ingin bertanya bagaimana carra mengganti template nya.,,.,
    saya udah bisa membuat beberapa cms sederhana tapi saya belum bisa membuat pengaturang css nya untuk template

  2. mas kapan ya lanjuatan tutorialnya, website ini sangat membantu banget karena saya pemula dalam belajar bahasa pemprograman web….?

    ditunggu secepatnya??

    oh ya mas saya mau nanya ni kalau buat pendaftaran siswa baru kan ada masa-masa form tersebut dibuka atau di sembunyikan…gimana caranya mas???

    terima kasih tutorialnya

    1. Ada beberapa trik mas.
      1. Menggunakan fungsi PHP
      Misalnya musim pendaftaran siswa baru adalah:

      // Set tanggal pembukaan dan penutupan pendaftaran
      $pembukaan = "2012-05-12"; // YYYY-MM-DD
      $penutupan = "2012-07-12"; // YYYY-MM-DD
      // Mengaktifkan/menonaktifkan form pendaftaran
      if(date('Y-m-d') >= $pembukaan && date('Y-m-d') < = $penutupan) { echo "Form pendaftaran AKTIF"; }else{ echo "Form pendaftaran TIDAK AKTIF"; }

      2. Menggunakan pengaturan database (jadi mas membuat database sendiri untuk mengaktifkan form tadi).

  3. mas tolong dong posting cara buat cms untuk gallery produk (upload, edit , hapus) …
    juga cms untuk mengganti foto untuk jquery slider (saya menggunakan nivoSlider) …
    -terima kasih-

  4. mas,, kenapa ya pas saya upload filenya ke webhosting..
    mucul tulisan ” Table ‘u105815322_jj.post’ doesn’t exist ”
    apakah karna cmsnya blum selesai atau ada masalah yang lain..??
    maaf ya mas soalnya masih nubie..
    thx

      1. udah saya ganti, udh bisa mas,, tp pas saya klik link admin yg ada di bawah,
        muncul tulisan
        ” Table ‘u439194489_ggg.user’ doesn’t exist ”
        tolong mas pencerahannya..
        thx

        1. Coba di upload database lama nya ke tempat hostingan anda.

          seperti nya itu karena table nya tidak ada di dalam database.

          atau di database localhost, export dulu.
          kemudian di hostingan anda silahkan di import.

          Correct me if im wrong “CMIIW” 😀

          Salam

  5. mau tanya,,langkah2 diatas sudah dijalankan,dan komentar sudah msuk di database,,tapi komentar tidak tampil,itu kenapa ya? mohon bantuannya..

    1. Ingat di awal tutorial ini disediakan kolom untuk menyimpan status approval dari komentar yang dikirim pengunjung. Artinya komentar yang baru dikiri oleh pengunjung statusnya adalah “baru”. Jika sudah disetujui maka akan berstatus “ok”.

      Buka tabel data Anda, lalu ubah status approval yang semula adalah “baru” menjadi “ok”.
      Selamat mencoba.

  6. bang,, gimana kalo buat tombol print out di halaman berita yang sudah kita buat??
    mohon pencerahannya..
    thx 😀

  7. mas jujur, tutorial ini sangat2 membantu kami dalam belajar pemrograman WEB (php, cms, css, dkk). terima kasih banyak mas 🙂

    ditunggu tutorial bermanfaat lainnya ya

    gracias,

  8. mas kan di dreamweaver ada fungsi repeat region,, nah untuk penomoran otomatis 1,2,3,dst, tidak bisa malah jadi 1 semua… pada tabel admin, index, dll saya ingin menambahkan no 1,2,3 dst,,,bagaimana cara nya..

    1. Tidak bisa, kecuali Anda menyimpan string tanggal dalam format data VARCHAR (Tidak saya rekomendasikan). Langkah paling mudah justru mengeluarkan output dari database MySQL-nya.
      Format tanggal dalam database adalah 2001-02-22 03:2200 (YYYY-MM-DD HH:II:SS). Maka ada beberapa opsi yang bisa Anda pakai untuk menampilkan tanggal berformat Indonesia.
      1. Dengan Query SQL, misalnya:
      SELECT DATE_FORMAT(tabel.tanggal,’%d/%m/%Y) AS tanggal_format_indonesia
      FROM tabel
      ORDER BY tabel.id DESC
      2. Menggunakan fungsi STRTOTIME milik PHP (Silakan di Google aja, panjang soalnya. Hehe…)

  9. mas.. saya baca komentar di atas katax klo qta memasukan komentar ,komenx ga langsung masuk…. tp punya saya koq lgsngb masuk

  10. waduh panjang banget caranya, pusing deh pemula….aku udh pernah coba berkali2 tapi komentar pembaca gak bisa muncul …..trims mas tutorialnya.

  11. kok saya import databasenya ke phpmyadmin gak bisa ya
    munculnya kayak gini

    Error
    SQL query:


    — Database: `test`

    — ——————————————————–

    — Struktur dari tabel `category`

    CREATE TABLE IF NOT EXISTS `category` (

    `ID` INT( 10 ) NOT NULL AUTO_INCREMENT ,
    `category` VARCHAR( 100 ) NOT NULL ,
    PRIMARY KEY ( `ID` )
    ) ENGINE = MYISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT =5;

    MySQL said:

    #1046 – No database selected

  12. mas,punya tutorial membuat web mobile pada dreamweaver cs5.5 gak?saya lg mencobanya tapi tidak bisa memasukkan data ke databasenya,trimakasih,,,

  13. Thank you for sharing your thoughts. I truly appreciate your
    efforts and I am waiting for your further write ups thank you once again.

  14. Mas gimana kalau menambahkan SEO di dreamweaver supaya dapat terbaca oleh google..??? Bisa kasih tutorialnya gak ??? Makasih…

  15. sebelum nya terimakasih atas tutorialnya sangat bermanfaat untuk awam….mas saya udah menguikuti semua part yang satu sampe 12…yang saya mau tanya mas kalau pas input kalimat kedatabase itukan kita gunakan enter tu setiap paragraf…setelah ditampil artikelnya enter antar paragraf itu gak kebaca…atau dengan kata lain membuat otomatis kebaca tombol enter saat diposting…itu gmn ya mas…saya udah baca2 hanya saja saya bingung letakinnya dimana…

      1. Mas Buat aja dua buah recordset lagi yah. Tapi dengan mode Advanced Recordset (lihat sisi sebelah kanan saat buat recordset, di sana Ada tombol Advanced kan).
        1. RECORDSET PERTAMA ==> rsTotalbeban
        SELECT SUM(beban) AS total_beban
        FROM tabel_kamu_yah
        2. RECORDSET KEDUA ==> rsTotaltagiah
        SELECT SUM(tagihan) AS total_tagihan
        FROM tabel_kamu_yah

        Lalu
        Jumlah kedua variabel itu:
        $totalbiaya = $row_rsTotalbeban + $row_rsTotaltagihan;

        Baru kemudian di cetak variabel $totalbiaya dengan perintah echo…

  16. mas tolonk source code part 12 mas saya mentok di part tersebut eror dan ada perintah Parse error: parse error in C:\xampp\htdocs\pocin.com\news.php on line 302

  17. mas mohon pencerahanya pada part 12 ada perintah seperti ini : Menambahkan validasi input komentar

    Menggunakan mode Code View, cari kode di bawah ini (terletak di atas ).

    $editFormAction = $_SERVER[‘PHP_SELF’];
    if (isset($_SERVER[‘QUERY_STRING’])) {
    $editFormAction .= “?” . htmlentities($_SERVER[‘QUERY_STRING’]);
    }

    if ((isset($_POST[“MM_insert”])) && ($_POST[“MM_insert”] == “form1”)) {
    $insertSQL = sprintf(“INSERT INTO komentar (id_post, nama, email, komentar, approval) VALUES (%s, %s, %s, %s, %s)”,
    GetSQLValueString($_POST[‘id_post’], “int”),
    GetSQLValueString($_POST[‘nama’], “text”),
    GetSQLValueString($_POST[’email’], “text”),
    GetSQLValueString($_POST[‘komentar’], “text”),
    GetSQLValueString($_POST[‘approval’], “text”));
    sementara dilisting saya gak ada kalimat ).
    seetiap saya membuat validasi komentar pasti program eror saya sudah mencoba berulang@ mohon pencerahanya mas

  18. mas itu kok pada saat pengisian komentar yang masuk di artikel pertama, dan sewaktu mw mengisi komentar di artikel ke dua, malah masuk ke artikel pertama juga,,,,

    oh ya, seandainya saya membuka misalnya localhost/website/news.php –>> itu kan muncul semua post ya? terus ada kotak komentarnya jg dibawah, jika kita masukan komentar, malah masuk ke artikel pertama,,,, gimana caranya hilangkan komentar sewaktu kita melakukan browsing di localhost/website/news.php….? thx…

  19. Mas saya sudah membuat form komentar, bagaimana kalau membuat balas komentar dan otomatis muncul dibawah content yang dikomentari, Terima Kasih.

  20. // Check input komentar dari pengunjung
    $error = array();
    $MM_flag=”MM_insert”;
    if (isset($_POST[$MM_flag])) {
    // Periksa panjang nama, nama minimal 3 karakter
    $_POST[‘nama’] = trim($_POST[‘nama’]);
    if(empty($_POST[‘nama’]) || strlen($_POST[‘nama’]) < 3) {
    $error['nama'] = "Nama harus diisi minimal 3 karakter";
    }
    //Periksa alamat email
    $checkEmail = '/^[^@]+@[^\s\r\n\'";,@%]+$/';
    if (!preg_match($checkEmail, trim($_POST['email']))) {
    $error['email'] = "Alamat email tidak valid";
    }
    //Periksa komentar
    if(empty($_POST['komentar'])) {
    $error['komentar'] = "Komentar harus diisi";
    }
    }
    if(!$error) {
    if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {

    script ini ga berfungsi mas,, pasa saya coba kosongkan kolom komentar, atau nama atau email gitu
    malah gada tulisan peringatannya yang ada column null
    mohon artikelnya diperjelas banyak yang ga sinkron

  21. Consignment selling will give you better leverage especially when the store you are partnering
    with already has a solid customer base. With the party season ebbing out slowly and
    life seeming to revolve again around routine schedules between home and office, you
    need to detoxify your wardrobe – let go of all the unnecessarily dressy
    stuff and invest, well, wisely and carefully, in women’s
    clothing which is all about minimalism. These blazers can be very much suitable both as normal sized wearing and also
    as plus size clothing. Like the big bird, you could stick your head in the proverbial sand, say nothing and hope
    for the best.

  22. saya mencarinya yang komentar seperti anda ini..
    name
    email
    website
    comment
    jika boleh anda mau berbagi tutorial pada saya lewat email saya, saya akan sangat berterimakasih !!!

  23. Mau tanya..
    Kalo seumpama di komentar yang akan ditampilkan harus diverivikasi oleh admin itu layak untuk ditampilkan atau tidak layak scriptnya gimna yah?

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.