Cara Menambahkan Komentar Dinamis Tanpa Reload dengan PHP dan jQuery
Pada website modern, fitur komentar menjadi salah satu elemen penting untuk meningkatkan interaksi pengguna. Namun, jika setiap kali mengirim komentar halaman harus di-refresh, pengalaman pengguna menjadi kurang nyaman. Solusinya adalah membuat komentar dinamis tanpa reload halaman menggunakan PHP dan jQuery.
Artikel ini akan membahas cara membuat sistem komentar sederhana yang:
- Bisa mengirim komentar tanpa refresh
- Menampilkan komentar baru secara langsung
- Mudah dipahami oleh pemula
- Tidak menggunakan framework yang rumit
Konsep Dasar Komentar Dinamis
Komentar dinamis bekerja dengan konsep berikut:
- Pengguna mengetik komentar
- jQuery mengirim data ke server menggunakan AJAX
- PHP menyimpan komentar ke database
- PHP mengembalikan data komentar
- Halaman diperbarui tanpa reload
Teknik ini sering disebut sebagai AJAX-based comment system.
Kenapa Menggunakan PHP dan jQuery?
Alasannya sederhana:
- PHP masih banyak digunakan di server
- jQuery AJAX lebih ringkas dan mudah
- Cocok untuk shared hosting
- Stabil dan ringan
Pendekatan ini cocok untuk blog pribadi, website company profile, hingga portal berita kecil.
Struktur Database Sederhana
Gunakan tabel berikut untuk menyimpan komentar:
CREATE TABLE comments (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
comment TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Struktur File
index.php
submit_comment.php
fetch_comments.php
1. Tampilan HTML (index.php)
<!DOCTYPE html>
<html>
<head>
<title>Komentar Dinamis</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Tulis Komentar</h3>
<input type="text" id="name" placeholder="Nama"><br><br>
<textarea id="comment" placeholder="Komentar"></textarea><br><br>
<button id="send">Kirim</button>
<hr>
<h3>Daftar Komentar</h3>
<div id="comment-box"></div>
<script>
$(document).ready(function(){
function loadComments() {
$.get("fetch_comments.php", function(data){
$("#comment-box").html(data);
});
}
loadComments();
$("#send").click(function(){
$.post("submit_comment.php", {
name: $("#name").val(),
comment: $("#comment").val()
}, function(){
$("#comment").val("");
loadComments();
});
});
});
</script>
</body>
</html>
2. PHP untuk Menyimpan Komentar (submit_comment.php)
<?php
$conn = mysqli_connect("localhost","root","","test_db");
$name = $_POST['name'];
$comment = $_POST['comment'];
mysqli_query($conn,
"INSERT INTO comments (name, comment) VALUES ('$name','$comment')"
);
3. PHP untuk Menampilkan Komentar (fetch_comments.php)
<?php
$conn = mysqli_connect("localhost","root","","test_db");
$result = mysqli_query($conn,
"SELECT * FROM comments ORDER BY id DESC"
);
while($row = mysqli_fetch_assoc($result)) {
echo "<p><strong>".$row['name']."</strong><br>";
echo $row['comment']."</p><hr>";
}
Hasil yang Didapat
- Komentar langsung muncul tanpa reload
- Halaman tetap ringan
- Interaksi pengguna lebih nyaman
- Mudah dikembangkan ke fitur lanjutan
Pengembangan Lebih Lanjut
Sistem ini bisa dikembangkan dengan:
- Validasi input
- Proteksi SQL Injection
- Pagination komentar
- Sistem reply
- Komentar realtime dengan interval
Kesimpulan
Membuat komentar dinamis tanpa reload menggunakan PHP dan jQuery adalah solusi sederhana namun efektif untuk meningkatkan pengalaman pengguna. Dengan konsep AJAX, website terasa lebih modern tanpa harus menggunakan teknologi kompleks.
