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

Standar

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

http://javawebmedia.com/blog/membuat-cms-php-mysql-menggunakan-dreamweaver-cs5-cs4-cs3-part-12/

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s