Banyak situs web media sosial seperti Facebook memiliki opsi untuk ditambahkan tidak seperti untuk posting, tautan, foto yang ditambahkan oleh pengguna. Menambahkan suka dan tidak suka menggunakan AJAX akan memberikan pengalaman pengguna yang baik. Ini dapat digunakan secara efektif untuk menyaring dan menyortir konten.Terkadang, itu juga dapat digunakan untuk mengidentifikasi gulma dari komentar.
Sistem komentar ini memungkinkan pengguna untuk menambahkan komentar dan menambahkan balasan ke komentar tertentu yang ditambahkan oleh beberapa pengguna lain. Setiap komentar dan balasan, ini berisi ikon jempol yang ditunjukkan kepada pengguna untuk menambahkan suka untuk komentar dan balasan. Awalnya, semua ikon berwarna abu-abu akan menunjukkan bahwa komentar dan balasan belum disukai oleh pengguna. Setelah pengguna menyukai komentar dengan mengklik ikon abu-abu, maka itu berubah menjadi biru untuk memperbarui status dan jumlah seperti itu juga akan diperbarui.
Daftar Komentar dengan Suka Tidak Suka Status dan Hitung
Kode ini untuk mendapatkan daftar komentar dan suka dari database. Setiap baris komentar dan balasan menunjukkan suka, tidak seperti yang ditambahkan oleh pengguna saat ini. Juga, itu menunjukkan jumlah suka total setiap catatan. Kuncinya adalah,
<? php require_once ("db.php"); $ memberId = 1; // Untuk mendapatkan status suka dari pengguna saat ini $ sql = "SELECT tbl_comment. *, tbl_like_unlike.like_unlike FROM tbl_comment LEFT JOIN tbl_like_unlike ON tbl_comment.comment_id = tbl_like_unlike.comment_id DAN member_id =". $ memberIdI. "ORDER BY parent_comment_id asc, comment_id asc"; $ result = mysqli_query ($ conn, $ sql); $ record_set = array (); while ($ row = mysqli_fetch_assoc ($ hasil)) { array_push ($ record_set, $ row); } mysqli_free_result (hasil $); mysqli_close ($ conn); echo json_encode ($ record_set); ?> <? php // Untuk mendapatkan Total Suka require_once ("db.php"); $ commentId = $ _POST ['comment_id']; $ totalLikes = "Tidak"; $ likeQuery = "SELECT sum (like_unlike) AS sukaCount FROM tbl_like_unlike WHERE comment_id =". $ commentId; $ resultLikeQuery = mysqli_query ($ conn, $ likeQuery); $ fetchLikes = mysqli_fetch_array ($ resultLikeQuery, MYSQLI_ASSOC); if (isset ($ fetchLikes ['likesCount'])) { $ totalLikes = $ fetchLikes ['likesCount']; } echo $ totalLikes; ?>
File PHP Thease diakses oleh skrip jQuery AJAX. AJAX akan menerima respons JSON yang dikirim dari kode PHP dan mem-parsing hasilnya untuk memperbarui UI. Fungsi AJAX adalah,
function listComment () { $ .post ("comment-list.php", function (data) { var data = JSON.parse (data); var comments = ""; var menjawab = ""; var item = ""; var induk = -1; hasil var = Array baru (); var list = $ ("<ul class = 'outer-comment'>"); var item = $ ("<li>") .html (komentar); for (var i = 0; (i <data.length); i ++) { var commentId = data [i] ['comment_id']; parent = data [i] ['parent_comment_id']; var obj = getLikesUnlikes (commentId); if (parent == "0") { if (data [i] ['like_unlike']> = 1) { like_icon = "<img src = 'like.png' id = 'tidak suka_" + data [i] [' comment_id '] + "' class = 'like -like' onClick = 'likeOrDislike (" + data [i] [' comment_id '] + ", -1)' />"; like_icon + = "<img style = 'display: none;' src = 'tidak seperti.png' id = 'like_ "+ data [i] [' comment_id '] +"' class = 'like -like' onClick = 'likeOrDislike ("+ data [i] [' comment_id '] +" , 1) '/> "; } lain { like_icon = "<img style = 'display: none;' src = 'like.png' id = 'tidak suka_ "+ data [i] [' comment_id '] +"' class = 'like -like' onClick = 'likeOrDislike ("+ data [i] [' comment_id '] +" , -1) '/> "; like_icon + = "<img src = 'tidak seperti.png' id = 'like_" + data [i] [' comment_id '] + "' class = 'like -like' onClick = 'likeOrDislike (" + data [i] [ 'comment_id'] + ", 1) '/>"; } komentar = "\ <div class = 'comment-row'> \ <div class = 'comment-info'> \ <span class = 'commet-row-label'> dari </ span> \ <span class = 'posted-by'> "+ data [i] ['comment_sender_name'] +" </ span> \ <span class = 'commet-row-label'> di </ span> \ <span class = 'posted-at'> "+ data [i] ['date'] +" </ span> \ </ div> \ <div class = 'comment-text'> "+ data [i] ['komentar'] +" </ div> \ <div> \ <a class='btn-reply' onClick='postReply(" + commentId + ")'> Balas </a> \ </ div> \ <div class = 'post-action'> \ "+ like_icon +" \ <span id = 'likes_ "+ commentId +"'> "+ totalLikes +" suka </ span> \ </ div> \ </ div> "; var item = $ ("<li>") .html (komentar); list.append (item); var reply_list = $ ('<ul>'); item.append (reply_list); listReplies (commentId, data, reply_list); } } $ ("# output") .html (daftar); }); }
function getLikesUnlikes (commentId) { $ .ajax ({ ketik: 'POST', async: salah, url: 'get-like-like.php', data: {comment_id: commentId}, sukses: fungsi (data) { totalLikes = data; } }); }
Tidak Seperti Komentar via jQuery AJAX
Saat menambahkan atau menghapus suka, panggilan AJAX dikirim ke PHP untuk memperbarui status seperti dalam database. Saya telah membuat tbl_like_unlike untuk menyimpan komentar seperti, tidak seperti status. Dalam tabel ini, suka dan tidak suka disimpan sebagai 1, -1 masing-masing. Yang suka, tidak suka disimpan dengan referensi dari comment_id yang sesuai untuk mana pengguna menambahkan suka.
<? php require_once ("db.php"); $ memberId = 1; $ commentId = $ _POST ['comment_id']; $ likeOrUnlike = 0; if ($ _ POST ['like_unlike'] == 1) { $ likeOrUnlike = $ _POST ['like_unlike']; } $ sql = "SELECT * FROM tbl_like_unlike WHERE comment_id =". $ commentId. "dan member_id =". $ memberId; $ result = mysqli_query ($ conn, $ sql); $ row = mysqli_fetch_array ($ hasil, MYSQLI_ASSOC); if (! empty ($ row)) { $ query = "UPDATE tbl_like_unlike SET like_unlike =". $ likeOrUnlike. "DI MANA comment_id =". $ commentId. "dan member_id =". $ memberId; } lain { $ query = "INSERT INTO tbl_like_unlike (member_id, comment_id, like_unlike) VALUES ('". $ memberId. "', '". $ commentId. "', '". $ likeOrUnlike. "')"; } mysqli_query ($ conn, $ query); $ totalLikes = "Tidak"; $ likeQuery = "SELECT sum (like_unlike) AS sukaCount FROM tbl_like_unlike WHERE comment_id =". $ commentId; $ resultLikeQuery = mysqli_query ($ conn, $ likeQuery); $ fetchLikes = mysqli_fetch_array ($ resultLikeQuery, MYSQLI_ASSOC); if (isset ($ fetchLikes ['likesCount'])) { $ totalLikes = $ fetchLikes ['likesCount']; } echo $ totalLikes; ?>
<script> berfungsi sepertiOrDislike (comment_id, like_unlike) { $ .ajax ({ url: 'komentar-suka-tidak suka.php', async: salah, ketik: 'posting', data: {comment_id: comment_id, like_unlike: like_unlike}, tipe data: 'json', success: function (data) { $ ("# likes _" + comment_id) .text (data + "suka"); if (like_unlike == 1) { $ ("# like_" + comment_id) .css ("display", "none"); $ ("# liked_" + comment_id) .show (); } if (like_unlike == -1) { $ ("# liked_" + comment_id) .css ("display", "none"); $ ("# like_" + comment_id) .show (); } }, error: function (data) { alert ("error:" + JSON.stringify (data)); } }); } </ script>
PHP Comment System dengan Suka Tidak Seperti - Output
Screenshot menunjukkan output untuk sistem komentar PHP dengan suka tidak seperti. Komentar yang disukai disorot dengan ikon jempol biru, sedangkan jempol abu-abu digunakan sebagai default.
Tutorial kode PHP ini diterbitkan pada 2 Februari 2018.
