Pendahuluan
Codeigniter merupakan salah satu framework PHP yang sampai sekarang masih banyak peminatnya. Beragam aplikasi dibuat menggunakan framework ini. Mulai dari e-commerce, portofolio, blog, portal berita, company profile dan sebagainya. Salah satu fitur dari sebuah aplikasi yang lumayan banyak dicari adalah fitur komentar. Kebanyakan programmer bingung bagaimana alur dan cara kerja dari fitur komentar mulai dari gambaran database hingga implementasi.
Sebenarnya ada alternatif lain yang bisa digunakan untuk memberikan fitur komentar di aplikasi. Contohnya plugin pihak ketiga seperti Disqus yang lebih sederhana dan tidak memakan waktu untuk proses implementasinya serta yang paling penting juga tersedia fitur gratis. Namun pemakaian plugin pihak ketiga ini memiliki kelemahannya sendiri yang dapat kamu baca disini.
Secara sederhana, untuk membuat sebuah fitu komentar kita menggunakan sistem parent child. Dimana primary komentar induk menjadi penanda pada komentar balasan, selanjutnya tinggal membuat looping berdasarkan komentar induk tersebut, begitu seterusnya.
Persiapan
Ada beberapa hal yang perlu kamu persiapkan sebelum mulai membuat fitur komentar ini:
- Codeigniter 3
- Database MySQL
- Library W3.css
Untuk kamu yang belum tau dan masih bingung proses instalasi Codeigniter 3, silahkan baca terlebih dahulu artikel berikut ini. Selanjutnya kamu membutuhkan database MySQL yang sudah include didalam paket instalasi web server seperti Xampp atau Wamp.
Langkah Pembuatan
#1 Buat Database
Disini kita akan menggunakan dua tabel. Pertama silahkan buat database baru dengan nama sistem_comment. Kemudian buat sebuah tabel dengan nama table_content. Berikut rincian fieldsnya:
Tabel ini merupakan tabel contoh untuk memisahkan comentar dari satu artikel dengan artikel yang lainnya.
Kemudian isi beberapa data pada tabel konten ini dengan query berikut:
INSERT INTO table_content VALUES
(1,'Content Pertama','<h2>Hallo,</h2><p>Ini adalah konten <b>pertama</b>. Silahkan berkomentar sepuasnya</p>'),
(2,'Content Kedua','<h2>Hallo,</h2><p>Ini adalah konten <b>pertama</b>. Silahkan berkomentar sepuasnya</p>'),
(3,'Content Ketiga','<h2>Hallo,</h2><p>Ini adalah konten <b>pertama</b>. Silahkan berkomentar sepuasnya</p>');Selanjutnya buat tabel lagi dengan nama table_comment. Berikut rincian fieldsnya:
PENJELASAN FIELDS:
Pada rincian fields diatas kamu bisa lihat terdapat comment_status. Field ini akan diisi dengan angka 0 apabila komentar induk. Apabila komentar balasan, maka akan diisi dengan primary dari komentar induknya sendiri. Kemudian field comment_content_id merupakan primary key dari tabel konten sebagai pertanda kalau komentar tersebut untuk konten yang mana.
#2 Instal Codeigniter
Silahkan instal Codeigniter dengan nama ci-komen. Silahkan pastikan instalasi berhasil dengan mangakses url http://localhost/ci-komen. Tutorial instal Codeigniter 3 dapat kamu baca disini.
#3 Konfigurasi Codeigniter
Buka file autoload.php yang berada di application/config. Kemudian rubah kode didalamnya menjadi seperti berikut:
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');Buka file config.php yang berada di application/config. Kemudian rubah kode didalamnya menjadi seperti berikut:
$config['base_url'] = 'http://localhost/ci-komen/';
$config['index_page'] = '';Buka file database.php yang berada di application/config. Kemudian rubah kode didalamnya menjadi seperti berikut:
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'sistem_comment'Buka dile routes.php yang berada di application/config. Kemudian rubah kode default controllernya menjadi seperti berikut:
$route['default_controller'] = 'komentar';Ini akan menjadikan controller komentar untuk di load saat pertama kali website di akses.
Terakhir buat sebuah file bernama .htaccess pada direktory root atau sejajar dengan folder application dan system. Kemudian ketik kode berikut didalamnya:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
#4 Buat Controllers
Pada folder application/controllers buatlah sebuah file bernama Komentar.php (Penamaan controller harus menggunakan huruf kapital diawal) dan ketik kode berikut:
<?php
class Komentar extends CI_Controller {
public function index() {
$data['content'] = $this->db->query("SELECT * FROM table_content");
$this->load->view('view_home',$data);
}
public function detail() {
$id = $this->uri->segment('3');
$content = $this->db->query("SELECT * FROM table_content WHERE content_id='$id'")->row_array();
$data['content_title'] = $content['content_title'];
$data['content_body'] = $content['content_body'];
$data['content_id'] = $content['content_id'];
$this->load->view('view_content',$data);
}
public function kirim() {
$id = $this->input->post('id');
$nama = $this->input->post('nama');
$email = $this->input->post('email');
$isi_komentar = $this->input->post('isi');
$this->db->query("INSERT INTO table_comment VALUES('','0','$nama','$email','$isi_komentar','$id')");
redirect('komentar/detail/'.$id);
}
public function balas() {
$comment_id = $this->input->post('comment_id');
$content_id = $this->input->post('content_id');
$nama = $this->input->post('nama');
$email = $this->input->post('email');
$isi = $this->input->post('isi');
$this->db->query("INSERT INTO table_comment VALUES('','$comment_id','$nama','$email','$isi','$content_id')");
redirect('komentar/detail/'.$content_id);
}
}PENJELASAN KODE:
function index : Digunakan untuk menampilkan seluruh data dari tabel konten.
function detail : Digunakan untuk menampilkan salah satu konten yang telah dipilih sebelumnya.
function kirim : Digunakan untuk mengirim komentar parent / induk.
function balas : Digunakan untuk mengirim komentar child / balasan.
#4 Buat Views
Disini kamu akan membutuhkan 2 view. Yang pertama adalah view untuk menampilkan list konten yang berasal dari tabel konten, dan yang kedua adalah view untuk menampilkan detail dari konten yang juga akan menampilkan rincian komentar.
Pada folder application/views buat sebuah file bernama view_home.php dan ketik kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistem Komentar</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<br>
<div class="w3-container w3-center">
<h1>List Content</h1>
<hr>
<div class="w3-row-padding">
<?php foreach ($content->result() as $row): ?>
<div class="w3-col s4">
<div class="w3-blue w3-padding-large">
<h3>
<a href="<?php echo site_url('komentar/detail/').$row->content_id ?>"><?php echo $row->content_title;?></a>
</h3>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</body>
</html>Kemudian buat view yang kedua dengan nama view_content.php dan ketik kode berikut:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistem Komentar</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.container {
padding-left: 15%;
padding-right: 15%;
}
.child{
margin-left: 50px;
}
.modal {
width: 40% !important;
}
textarea {
width: 100%;
height: 80px;
}
</style>
</head>
<body>
<div class="container">
<h1><?php echo $content_title;?></h1>
<hr>
<?php echo $content_body;?>
<div class="w3-panel w3-blue">
<p>Kolom Komentar:</p>
</div>
<form method="POST" action="<?php echo site_url('komentar/kirim') ?>">
<div class="w3-row-padding">
<div class="w3-half">
<input type="hidden" value="<?php echo $content_id;?>" name="id">
<input class="w3-input w3-border" type="text" placeholder="Nama" name="nama">
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="email" placeholder="Email" name="email">
</div>
</div>
<div class="w3-padding">
<textarea style="width: 100%;" name="isi"></textarea>
</div>
<button class="w3-button w3-block w3-blue w3-section w3-padding" type="submit">Kirim Komentar</button>
</form>
</div>
<?php
$content_id = $content_id;
$query = $this->db->query("SELECT * FROM table_comment WHERE comment_status='0' AND comment_content_id = '$content_id'");
foreach ($query->result() as $utama):
?>
<div class="container">
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
<p>
<b><?php echo $utama->comment_nama?></b>
<br><?php echo $utama->comment_isi?>
<br><button class="w3-button w3-tiny w3-blue" onclick="document.getElementById('<?php echo $utama->comment_id?>').style.display='block'">Balas</button>
</p>
</div>
</div>
<?php
$content_id = $content_id;
$comment_id=$utama->comment_id;
$query = $this->db->query("SELECT * FROM table_comment WHERE comment_status='$comment_id' AND comment_content_id = '$content_id'");
foreach ($query->result() as $balasan):
?>
<div class="container">
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue child">
<p>
<b><?php echo $balasan->comment_nama?></b>
<br><?php echo $balasan->comment_isi?>
</p>
</div>
</div>
<?php endforeach;?>
<div id="<?php echo $utama->comment_id?>" class="w3-modal">
<div class="w3-modal-content modal">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('<?php echo $utama->comment_id?>').style.display='none'" class="w3-button w3-display-topright">×</span>
<h2>Balas Komentar</h2>
</header>
<div class="w3-container">
<form class="w3-container" method="POST" action="<?php echo site_url('komentar/balas') ?>">
<input type="hidden" name="comment_id" value="<?php echo $utama->comment_id?>">
<input type="hidden" name="content_id" value="<?php echo $content_id?>">
<div class="w3-section">
<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Nama" name="nama" required>
<input class="w3-input w3-border" type="email" placeholder="Email" name="email" required>
<br>
<textarea style="width: 100%;" name="isi"></textarea>
<button class="w3-button w3-block w3-blue w3-section w3-padding" type="submit">Kirim</button>
</div>
</form>
</div>
<footer class="w3-container w3-blue w3-border-top w3-padding-16"></footer>
</div>
</div>
<?php endforeach;?>
</body>
</html>Test Case (Percobaan)
Silahkan buka browser dan arahkan ke url http://localhost/ci-komen. Kamu akan mendapatkan tampilan seperti berikut:
Silahkan pilih salah satu konten, misalnya Content Pertama.
Berikut tampilan untuk detail konten:
Silahkan tes untuk mengisi komentar dan klik tombol kirim komentar.
Klik tombol balas yang ada di komentar parent
Untuk membalas komentar kamu bisa melakukan dengan mengisi komentar pada dialog atau modal yang tampil setelah menekan tombol balas.
Berikut tampilan komentar berbalas di Content Ketiga:
Kesimpulan
Pada artikel kali ini kamu telah belajar bagaimana membuat sistem komentar dengan menggunakan codeigniter dan database MySQL. Kamu telah tau bagaimana alur dan logika dari sistem komentar ini. Souce code sistem komentar ini dapat kamu download pada link berikut ini.
Update: 10 Januari 2020