Cara Membuat Sistem Komentar dengan Hapus menggunakan PHP jQuery

Saya telah melihat banyak contoh kode untuk membuat sistem komentar menggunakan PHP. Dalam artikel ini, kita harus menerapkan sistem komentar PHP dengan opsi delete. Orang-orang biasanya bertanya kepada saya untuk mengintegrasikan sistem komentar ke dalam proyek-proyek mereka yang ada. Jika Anda adalah salah satu di antara mereka, kode ini akan memberi Anda ide awal untuk mulai menyesuaikan sistem komentar Anda sendiri untuk aplikasi Anda.

Dalam contoh kode ini, saya telah menggunakan jQuery AJAX untuk melakukan aksi tambah atau hapus komentar. Setelah melakukan aksi ini, daftar komentar dinamis akan diperbarui di UI tanpaÂ refresh halaman. Jika akan membuat pengguna merasa lebih baik untuk melihat tanpa ada load pada posting atau menghapus komentar.

Ini akan menjadi fungsi yang sangat berguna untuk banyak aplikasi dan kadang-kadang juga penting. Ini adalah media bagi pengguna yang membiarkan mereka berinteraksi dengan aplikasi Anda. Biasanya, sistem komentar berisi berbagai fitur untuk membalas, memberi suara, suka / tidak suka atau banyak lainnya.

Interface Sistem Komentar dengan Opsi Hapus

Kode ini berisi HTML untuk membuat user interface sistem komentar dengan menghapus. Dalam user interface ini, form HTML akan ditampilkan untuk mendapatkan nama pengguna dan komentar yang akan diposting.

Dengan memposting data form komentar, permintaan AJAX akan dikirim untuk menambahkan komentar pengguna ke database. Kemudian UI akan diperbarui dengan menampilkan komentar terbaru yang diposting oleh pengguna. Juga, jumlah total komentar akan ditampilkan dan diperbarui sesuai.

<form action=" " id="frmComment" method="post">
	<div class="row">
		<label> Name: </label> <span id="name-info"></span><input
			class="form-field" id="name" type="text" name="user">
	</div>
	<div class="row">
		<label for="mesg"> Message : <span id="message-info"></span></label>
		<textarea class="form-field" id="message" name="message" rows="4"></textarea>

	</div>
	<div class="row">
		<input type="hidden" name="add" value="post" />
		<button type="submit" name="submit" id="submit"
			class="btn-add-comment">Add Comment</button>
		<img src="LoaderIcon.gif" id="loader" />
	</div>
</form>

<label> Name: </label> <span id="name-info"></span><input

class="form-field" id="name" type="text" name="user">

</div>

<label for="mesg"> Message : <span id="message-info"></span></label>

</div>

<button type="submit" name="submit" id="submit"

class="btn-add-comment">Add Comment</button>

</div>

</form>

Di bawah form komentar, daftar data komentar ditampilkan dengan opsi hapus. Hapus adalah kontrol tindakan yang dapat diklik yang akan memanggil fungsi delete jQuery AJAX pada peristiwa kliknya. Dalam tutorial sebelumnya, kami telah memberikan opsi suka atau tidak suka pada setiap item komentar.

<?php
include_once 'db.php';

$sql_sel = "SELECT * FROM tbl_user_comments ORDER BY id DESC";
$result = $conn->query($sql_sel);
$count = $result->num_rows;

if ($count > 0) {
    ?>
<div id="comment-count">
	<span id="count-number"><?php echo $count;?></span> Comment(s)
</div>
<?php } ?>
<div id="response">
<?php
while ($row = $result->fetch_array(MYSQLI_ASSOC)) // using prepared staement
{
    ?>
			<div id="comment-<?php echo $row["id"];?>" class="comment-row">
		<div class="comment-user"><?php echo $row["username"];?></div>
		<div class="comment-msg" id="msgdiv-<?php echo $row["id"];?>"><?php echo $row["message"];?></div>
		<div class="delete" name="delete" id="delete-<?php echo $row["id"];?>"
			onclick="deletecomment(<?php echo $row["id"];?>)">Delete</div>
	</div>
<?php
}
?>
</div>

<?php

include_once 'db.php';

$sql_sel = "SELECT * FROM tbl_user_comments ORDER BY id DESC";

$result = $conn->query($sql_sel);

$count = $result->num_rows;

if ($count > 0) {

<span id="count-number"><?php echo $count;?></span> Comment(s)

</div>

<?php } ?>

<?php

while ($row = $result->fetch_array(MYSQLI_ASSOC)) // using prepared staement

{

<div id="comment-<?php echo $row["id"];?>" class="comment-row">

<div class="delete" name="delete" id="delete-<?php echo $row["id"];?>"

onclick="deletecomment(<?php echo $row["id"];?>)">Delete</div>

</div>

<?php

}

</div>

Fungsi jQuery untuk Menambahkan Hapus Komentar

Skrip jQuery ini berisi fungsi untuk menambah dan menghapus komentar tergantung pada permintaan tindakan oleh pengguna. Saat mengirimkan form komentar, tindakan addComment akan dilakukan melalui AJAX. Sebelum memanggil skrip AJAX, bidang form komentar divalidasi dengan menggunakan jQuery. Semua kolom form wajib diisi dengan nilai. Setelah bidang ini berhasil divalidasi, maka tindakan tambah akan dilakukan.

Komentar yang ditambahkan akan diambil dari database untuk membentuk respon HTML untuk memperbarui UI. Setiap baris komentar akan berisi opsi untuk menghapus komentar itu. Saat mengklik penghapusan komentar, kotak konfirmasi JavaScript akan ditampilkan kepada pengguna. Setelah pengguna mengonfirmasi tindakan penghapusan, maka komentar-delete.php akan diakses melalui AJAX untuk mengeksekusi kueri penghapusan pada komentar tertentu.

<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"></script>
<script>

    function deletecomment(id) {

       if(confirm("Are you sure you want to delete this comment?")) {

            $.ajax({
            url: "comment-delete.php",
            type: "POST",
            data: 'comment_id='+id,
            success: function(data){
                if (data)
                {
                    $("#comment-"+id).remove();
                    if($("#count-number").length > 0) {
                        var currentCount = parseInt($("#count-number").text());
                        var newCount = currentCount - 1;
                        $("#count-number").text(newCount)
                    }
                }
            }
           });
        }
     }

	$(document).ready(function() {

        $("#frmComment").on("submit", function(e) {
        		$(".error").text("");
            $('#name-info').removeClass("error");
            $('#message-info').removeClass("error");
            e.preventDefault();
            var name = $('#name').val();
            var message = $('#message').val();
            
            if(name == ""){
            		$('#name-info').addClass("error");
            }
            if(message == ""){
            		$('#message-info').addClass("error");
            }
            $(".error").text("required");
            if(name && message){
                	$("#loader").show();
            		$("#submit").hide();
            	 	$.ajax({
                
                 type:'POST',
                 url: 'comment-add.php',
                 data: $(this).serialize(),
                 success: function(response)
                    {
						$("#frmComment input").val("");
						$("#frmComment textarea").val("");
                     	$('#response').prepend(response);

                         if($("#count-number").length > 0) {
                             var currentCount = parseInt($("#count-number").text());
                             var newCount = currentCount + 1;
                             $("#count-number").text(newCount)
                         }
                         $("#loader").hide();
                 		$("#submit").show();
                     }
                	});
			}
		});
     });
    </script>

function deletecomment(id) {

if(confirm("Are you sure you want to delete this comment?")) {

$.ajax({

url: "comment-delete.php",

type: "POST",

data: 'comment_id='+id,

success: function(data){

if (data)

{

$("#comment-"+id).remove();

if($("#count-number").length > 0) {

var currentCount = parseInt($("#count-number").text());

var newCount = currentCount - 1;

$("#count-number").text(newCount)

}

});

}

$(document).ready(function() {

$("#frmComment").on("submit", function(e) {

$(".error").text("");

$('#name-info').removeClass("error");

$('#message-info').removeClass("error");

e.preventDefault();

var name = $('#name').val();

var message = $('#message').val();

if(name == ""){

$('#name-info').addClass("error");

}

if(message == ""){

$('#message-info').addClass("error");

}

$(".error").text("required");

if(name && message){

$("#loader").show();

$("#submit").hide();

$.ajax({

type:'POST',

url: 'comment-add.php',

data: $(this).serialize(),

success: function(response)

{

$("#frmComment input").val("");

$("#frmComment textarea").val("");

$('#response').prepend(response);

if($("#count-number").length > 0) {

var currentCount = parseInt($("#count-number").text());

var newCount = currentCount + 1;

$("#count-number").text(newCount)

}

$("#loader").hide();

$("#submit").show();

}

});

}

});

</script>

Akses Kode PHP melalui AJAX untuk menambah Hapus Komentar

Di bagian ini, kita akan melihat kode PHP untuk komentar-add.php dan komentar-delete.php. Pada form submit event, skrip AJAX dipanggil dan akses comment-add.php. Di file comment-add.php, ia menerima nama pengguna dan pesan yang diposting oleh pengguna. Dengan menggunakan parameter ini, ini menghasilkan query INSERT dan mengeksekusinya untuk menambahkan komentar ke database.

Setelah memasukkan komentar, komentar yang ditambahkan baru-baru ini diambil untuk membentuk respons HTML. Tanggapan HTML akan berisi baris komentar yang ditambahkan baru-baru ini dengan nama pengguna, pesan dan opsi hapus

comment-add.php

<?php
if (isset($_POST['add'])) {
    include_once 'db.php';
    
    $username = $_POST['user'];
    $message = $_POST['message'];
    
    $sql = "INSERT INTO tbl_user_comments (username, message) VALUES ('$username', '$message')";
    $stmt = $conn->prepare($sql);
    
    $stmt->execute();
    $comment_id = $stmt->insert_id;
    ?>
<?php
    
    $sql_sel = "SELECT * FROM tbl_user_comments WHERE id = $comment_id";
    
    $result = $conn->query($sql_sel);
    
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) // using prepared staement
    {
        ?>

<div id="comment-<?php echo $row["id"];?>" class="comment-row">
	<div class="comment-user"><?php echo $row["username"];?></div>
	<div class="comment-msg" id="msgdiv"><?php echo $row["message"];?></div>

	<div class="delete" name="delete" id="delete"
		onclick="deletecomment(<?php echo $row["id"];?>)">Delete</button>

</div>

<?php
    }
}
?>

<?php

if (isset($_POST['add'])) {

include_once 'db.php';

$username = $_POST['user'];

$message = $_POST['message'];

$sql = "INSERT INTO tbl_user_comments (username, message) VALUES ('$username', '$message')";

$stmt = $conn->prepare($sql);

$stmt->execute();

$comment_id = $stmt->insert_id;

<?php

$sql_sel = "SELECT * FROM tbl_user_comments WHERE id = $comment_id";

$result = $conn->query($sql_sel);

while ($row = $result->fetch_array(MYSQLI_ASSOC)) // using prepared staement

{

<div id="comment-<?php echo $row["id"];?>" class="comment-row">

<div class="delete" name="delete" id="delete"

onclick="deletecomment(<?php echo $row["id"];?>)">Delete</button>

</div>

<?php

}

Demikian pula, komentar-edit.php dipanggil melalui jQuery AJAX pada fungsi deleteComment () yang didefinisikan dalam contoh ini. Fungsi ini akan dipanggil untuk mengklik tautan hapus yang ada di setiap baris komentar.

Di komentar-delete.php, id komentar diterima dari daftar parameter permintaan AJAX. Dengan referensi id ini, DELETE akan dilakukan untuk menghapus catatan tertentu dari database.

comment-delete.php

<?php
include_once 'db.php';

$comment_id = $_POST['comment_id'];

$sql_del = "DELETE FROM tbl_user_comments WHERE id = $comment_id";
$stmt = $conn->prepare($sql_del);
$stmt->execute();

if (! empty($stmt)) {
    echo true;
}
?>

<?php

include_once 'db.php';

$comment_id = $_POST['comment_id'];

$sql_del = "DELETE FROM tbl_user_comments WHERE id = $comment_id";

$stmt = $conn->prepare($sql_del);

$stmt->execute();

if (! empty($stmt)) {

echo true;

}

PHP jQuery Buat Sistem Komentar dengan Hapus Opsi Output

Screenshot ini menunjukkan output dari contoh ini untuk membuat sistem komentar PHP jQuery dengan fitur hapus. Output ini menampilkan dua komentar di bawah formulir komentar. Di setiap baris komentar, kita dapat melihat tautan hapus.

Oke itulah tadi pembahasan saya tentang Cara Membuat Sistem Komentar dengan Hapus menggunakan PHP jQuery, semoga bermanfaat.

Cara Membuat Sistem Komentar dengan Hapus menggunakan PHP jQuery

Facebook DUMET School

Konsultasi Gratis

Categories