Pada tutorial ini penulis akan membuat sebuah cara membuat sistem komentar dengan PHP jquery ajax dan mysql sesuai judul artikel. Sistem komentar ini bisa membalas dari pengguna lain. Mungkin kamu yang sedang mencari sebuah source code pada aplikasi sistem komentar, ini bisa menjadi solusi untuk hal tersebut.
AJAX
Penulis akan mengulas sedikit tentang AJAX ini. AJAX adalah singkatan dari Asynchronous JavaScript and XML. Ini adalah teknologi yang digunakan untuk membuat aplikasi web yang lebih interaktif dengan mengirim dan menerima data dari server tanpa harus menyegarkan halaman web secara keseluruhan. AJAX digunakan untuk meningkatkan kinerja aplikasi web dan meningkatkan pengalaman pengguna. Tanpa kita menggunakan AJAX maka otomatis ketika kita memasukkan sebuah komentar browser web selalu merefresh halaman dan kita tidak mau seperti itu. Tidak perlu berlama lama lagi kita akan mulai langsung saja.
Tutorial
- Pertama yang perlu di lakukan dulu adalah kita nyalakan web server kita, karena untuk menjalankan apache, PHP dan mysql. Di sini penulis menggunakan software WAMP, sesuaikan saja pada software web server kamu.
- Buka teks editor kamu, penulis menggunakan software IDE brackets.
- Untuk mempermudah tutorial, alangkah baiknya kita buat sebuah folder bernama sistem-komentar. Ouh ya simpan pada folder htdocs kamu.
- Buka browser kamu, di sini penulis menggunakan brave dan ketik seperti ini :
- Buat sebuah database bernama db_komentar.
- Beri dan buat dengan nama tabel tbl_komentar. Perintah SQL nya :
- Masuk kembali pada IDE kamu dan buat file PHP dengan nama db.php untuk akses database. Perlu di ingat setiap file PHP harus di simpan pada folder sistem-komentar. Script PHP pada file db.php nya :
- Lalu buat file dengan nama index.php untuk membuat sebuah halaman website nya. Kita akan menggunakan framework bootstrap agar bisa responsif pada device mobile :
- Buat sebuah file dengan nama tambah_komentar.php untuk melakukan kirim komentar :
- Terakhir buat file dengan nama ambil_komentar.php untuk mendapatkan sebuah komentar yang di mana nanti di tampilkan pada dokumen HTML :
- Untuk hasil nya kamu bisa lihat demo video di sini :
- Atau juga kamu bisa lihat hasil screenshot di bawah ini ketika penulis mengakses file index.php nya di web browser :
- Selesai.
http://localhost/phpmyadmin/CREATE TABLE tbl_komentar (
id INT PRIMARY KEY AUTO_INCREMENT,
nama VARCHAR(50),
komentar TEXT,
parent_id INT,
tanggal_komen DATETIME
);Anggap kamu sudah paham tipe data pada mysql. Kita memberi sebuah tipe data text pada column bernama komentar agar data yang di kirim dalam komentar tidak terbatas dan column parent_id, bisa penulis mudahkan untuk mengurutkan sebuah komentar baru yang di lakukan pada select order by nanti. Kamu akan melihat hasilnya seperti ini jika perintah SQL berhasil di eksekusi :
<?php
$db = mysqli_connect('localhost', 'root', '', 'db_komentar');
?><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sistem Komentar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Ikon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<!-- </Akhir ikon -->
</head>
<body>
<!-- Konten utama -->
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<form method="post" id="form_komen">
<div class="mb-3 animate-box">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" id="nama" aria-describedby="nama" name="nama" autocomplete="off" required>
</div>
<div class="mb-3 animate-box">
<label for="komentar" class="form-label">Komentar</label>
<textarea class="form-control" id="komentar" name="komentar" rows="3" style="height: 100px;" required></textarea>
</div>
<input type="hidden" name="parent_id" id="parent_id" value="0" />
<button type="submit" name="submit" id="submit" class="btn btn-danger btn-kirim mb-5 animate-box">Kirim</button>
</form>
<!-- Hasil komentar -->
<div class="overflow-auto border border-2 pt-1 ps-1 mb-5" style="max-height: 400px; background-color:whitesmoke;">
<div id="komentarPengguna"></div>
</div>
<!-- </Akhir hasil komentar -->
</div>
</div>
</div>
<!-- </Akhir konten utama-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Jquery 3.6.3-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<!-- Script jquery -->
<script>
// ketika dokumen sudah siap
$(document).ready(function(){
// load function komentar ketika dokumen sudah siap
loadKomentar();
// ambil id form komen
$('#form_komen').on('submit', function(e) {
/*
e.preventDefault() di sini di maksud kan agar data bisa di kirim ke server
tanpa refresh halaman menggunakan ajax nanti
*/
e.preventDefault();
// init ajax
$.ajax({
// set url
url: "tambah_komentar.php",
// set method
method: "POST",
// ambil semua data form
data: $(this).serialize(),
// ketika sukses dan data berhasil masuk
success: function(response) {
// load function komentar
loadKomentar();
// reset form komen
$('#form_komen')[0].reset();
// di bawah ini jika pengguna tidak membalas komentar pengguna lain
$('#parent_id').val('0');
}
})
});
// untuk mendapatkan ID dari setiap pengguna dan membalas komentar
$(document).on('click', '.reply', function () {
let id = $(this).attr("id");
$('#parent_id').val(id);
$('#nama').focus();
});
// function load komentar
function loadKomentar(){
// init ajax
$.ajax({
// set url
url: "ambil_komentar.php",
// set method
method: "GET",
// ketika data berhasil di GET
success: function(response) {
// tampilkan pada tag div id komentar pengguna
$('#komentarPengguna').html(response);
}
})
}
});
</script>
</body>
</html>Kode di atas penulis langsung menaruh script jquery nya. Ini bisa di sesuaikan menurut kamu sendiri aja. Penulis sudah menulis sebuah komentar pada kode di atas, memungkinkan kamu bisa tahu cara kerja pada kode yang telah penulis buat.
<?php
// set atau include file db.php
include 'db.php';
// Cek jika request nya itu post
if($_SERVER["REQUEST_METHOD"] == "POST"){
// ambil data name form komentar
$nama = stripslashes(strip_tags(htmlspecialchars($_POST["nama"], ENT_QUOTES)));
$komentar = stripslashes(strip_tags(htmlspecialchars($_POST["komentar"], ENT_QUOTES)));
$parent_id = stripslashes(strip_tags(htmlspecialchars($_POST["parent_id"], ENT_QUOTES)));
// set timezone indonesia
$tz = 'Asia/Jakarta';
$dt = new DateTime("now", new DateTimeZone($tz));
$date = $dt->format('Y-m-d H:i:s');
// lakukan insert
$query = "INSERT INTO tbl_komentar (nama, komentar, parent_id, tanggal_komen) VALUES (?, ?, ?, ?)";
$stmt = $db->prepare($query);
$stmt->bind_param("ssis", $nama, $komentar, $parent_id, $date);
$stmt->execute();
// redirect HTTP/1.1 404 Not Found ketika pengguna mencoba mengakses file data.php
} else {
header("HTTP/1.1 404 Not Found");
}
?>Fungsi stripslashes, strip_tags, htmlspecialchars bila penulis mudahkan dalam studi kasus masalah sistem komentar ini adalah untuk melindungi dari serangan XSS. Sebagai seorang programmer tentu kita harus melakukan filter terhadap karakter khusus yang di masukkan pada pengguna ketika memasukkan sebuah komentar.
<?php
include 'db.php';
// init output
$output = '';
// lakukan query select order by untuk mengurutkan komentar baru pada tbl_komentar
$query = "SELECT * FROM tbl_komentar WHERE parent_id = 0 ORDER BY id DESC";
$stmt = $db->prepare($query);
$stmt->execute();
$res = $stmt->get_result();
// looping data
while ($row = $res->fetch_assoc()) {
// lakukan join output
$output .= '
<div class="card border border-1 p-3 mb-2 me-1 bg-white text-dark">
<i class="bi bi-person-circle" style="font-size:30px;"> <span class="fst-normal fw-bold" style="font-size:19px;">' .$row["nama"] . '</span></i>
<div class="card-body">
<p>' . $row["komentar"] . '</p>
</div>
<div class="col-se-5 mt-5">
<i class="bi bi-clock"> ' . $row["tanggal_komen"] . '</i>
<button type="button" class="btn btn-primary float-end reply" id="' . $row["id"] . '">Reply</button>
</div>
</div>
';
$output .= ambil_reply($db, $row["id"]);
}
// tampilkan
echo $output;
// function ambil_reply di gunakan untuk membalas komentar pengguna
function ambil_reply($db, $parent_id = 0)
{
$output = '';
$query = "SELECT * FROM tbl_komentar WHERE parent_id=?";
$stmt = $db->prepare($query);
$stmt->bind_param("s", $parent_id);
$stmt->execute();
$res = $stmt->get_result();
$count = $res->num_rows;
if ($count > 0) {
while ($row = $res->fetch_assoc()) {
$output .= '
<div class="card border border-1 p-3 mb-2 bg-white text-dark me-2" style="margin-left:30px;">
<i class="bi bi-person-circle" style="font-size:30px;"> <span class="fst-normal fw-bold" style="font-size:19px;">' .$row["nama"] . '</span></i>
<div class="card-body">
<p>' . $row["komentar"] . '</p>
</div>
<div class="col-se-5 mt-5">
<i class="bi bi-clock"> ' . $row["tanggal_komen"] . '</i>
<button type="button" class="btn btn-primary float-end reply" id="' . $row["id"] . '">Reply</button>
</div>
</div>
';
$output .= ambil_reply($db, $row["id"]);
}
}
return $output;
}
?>
Penutup
Kode di atas memang perlu di modifikasi lagi sesuai kebutuhan kamu dan juga beberapa penambahan seperti keamanan csrf. Source code sudah penulis taruh di akun github penulis, kamu bisa kunjungi di sini. Semoga bermanfaat.
0 Komentar