Komentar Sistem menggunakan PHP dan Ajax

Dalam tutorial ini, kita akan melihat cara membuat sistem komentar sederhana berbasis AJAX menggunakan PHP. Sistem komentar ini menyertakan fitur untuk menambahkan balasan atas setiap komentar yang ditambahkan oleh pengguna. Saya menggunakan jQuery AJAX untuk menambahkan komentar / membalas database dan menunjukkannya kepada pengguna. Karena menggunakan AJAX, itu akan memberikan pengalaman yang mulus bagi pengguna.

Setiap komentar akan memiliki id unik dan id ini akan digunakan untuk merujuk elemen HTML yang menampilkan komentar. ID komentar ini akan diteruskan melalui panggilan AJAX untuk melakukan operasi yang berorientasi pada komentar seperti menambahkan balasan. Dalam tutorial sebelumnya, kami telah melihat cara membaca dan menulis ke database melalui panggilan AJAX .

Kode HTML untuk Menampilkan Komentar

Kode ini menampilkan kolom input HTML untuk memasukkan nama dan komentar / balasan yang akan diterbitkan. Saat mengirimkan komentar pengguna, panggilan AJAX akan dipanggil untuk menambahkan data ke database. Kode AJAX akan menambah atau menambahkan komentar / balasan yang diposting oleh pengguna setelah operasi AJAX yang sukses.

Komentar dan balasan ditambahkan dalam tampilan struktural sebagai elemen orangtua-anak. Setiap komentar ditampilkan dengan menggunakan elemen induk yang berisi daftar elemen anak yang menunjukkan balasannya.

  <div class = "comment-form-container">
     <form id = "frm-comment">
         <div class = "input-row">
             <input type = "hidden" name = "comment_id" id = "commentId"
                 placeholder = "Name" /> <input class = "input-field"
                 type = "text" name = "name" id = "name" placeholder = "Nama" />
         </ div>
         <div class = "input-row">
             <textarea class = "input-field" type = "text" name = "komentar"
                 id = "comment" placeholder = "Tambahkan Komentar"> </ textarea>
         </ div>
         <div>
             <input type = "button" class = "btn-submit" id = "submitButton"
                 value = "Publish" />
             <div id = "comment-message"> Komentar Berhasil! </ div>
         </ div>

     </ form>
 </ div>
 <div id = "output"> </ div>
 <script>
  function postReply (commentId) {
   $ ('# commentId'). val (commentId);
   $ ("# name"). fokus ();
  }

  $ ("# submitButton"). klik (function () {
   $ ("# comment-message"). css ('display', 'none');
   var str = $ ("# frm-comment"). serialize ();

   $ .ajax ({
    url: "comment-add.php",
    data: str,
    ketik: 'posting',
    success: function (response) {
     var result = eval ('(' + response + ')');
     if (response) {
      $ ("# comment-message"). css ('display', 'inline-block');
      $ ("# name"). val ("");
      $ ("# comment"). val ("");
      $ ("# commentId"). val ("");
      listComment ();
     } lain {
      alert ("Gagal menambahkan komentar!");
      return false;
     }
    }
   });
  });

  $ (document) .ready (function () {
   listComment ();
  });

  function listComment () {
   $
     .pos(
       "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'];

         if (parent == "0") {
          comments = "<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'> pada </ span> <span class = 'posted-at'>"
            + data [i] ['tanggal']
            + "</ span> </ div>"
            + "<div class = 'comment-text'>"
            + data [i] ['komentar']
            + "</ div>"
            + "<div> <a class = 'btn-reply' onClick = 'postReply ("
            + komentarId + ") '> Balas </a> </ 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 listReplies (commentId, data, daftar) {
   for (var i = 0; (i <data.length); i ++) {
    if (commentId == data [i] .parent_comment_id) {
     var comments = "<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'> pada </ 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 ("
       + data [i] ['comment_id'] + ") '> Balas </a> </ div>"
       + "</ div>";
     var item = $ ("<li>") .html (komentar);
     var reply_list = $ ('<ul>');
     list.append (item);
     item.append (reply_list);
     listReplies (data [i] .comment_id, data, reply_list);
    }
   }
  }
 </ script>

Kode PHP untuk Mempublikasikan Komentar / Balas

Dalam kode PHP ini, ia menerima permintaan AJAX dan menambahkan komentar / balasan yang diposting oleh pengguna. Setelah menambahkan komentar pengguna ke database, kode PHP akan mencetak komentar yang akan dibaca sebagai tanggapan terhadap skrip AJAX. Data respons ini akan ditambahkan ke penampung HTML komentar.

Kode berikut menunjukkan program PHP untuk menambahkan dan menampilkan komentar yang diposting oleh pengguna melalui AJAX.

comment-list.php

  <? php
 require_once ("db.php");

 $ sql = "SELECT * FROM tbl_comment 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);
 ?>

komentar-add.php

  <? php
 require_once ("db.php");
 $ commentId = isset ($ _ POST ['comment_id'])?  $ _POST ['comment_id']: "";
 $ comment = isset ($ _ POST ['komentar'])?  $ _POST ['comment']: "";
 $ commentsSenderName = isset ($ _ POST ['name'])?  $ _POST ['name']: "";
 $ date = date ('Ymd H: i: s');

 $ sql = "INSERT INTO tbl_comment (parent_comment_id, komentar, comment_sender_name, tanggal) VALUES ('". $ commentId. "', '". $ komentar. "', '". $ commentSenderName. "', '". $ tanggal . "')";

 $ result = mysqli_query ($ conn, $ sql);

 if (! $ result) {
     $ result = mysqli_error ($ conn);
 }
 echo $ result;
 ?>

PHP AJAX Comment System - Output

Screenshot berikut menunjukkan output untuk sistem komentar PHP AJAX.

unduh

Tutorial kode PHP ini diterbitkan pada 18 Desember 2017.