Peringkat Bintang dengan PHP dan jQuery AJAX

Peringkat bintang digunakan untuk memberi peringkat halaman, artikel atau posting yang dipublikasikan ke pengguna akhir. Ini akan membantu pengguna untuk mengidentifikasi dan memilih konten berkualitas yang berperingkat tinggi. Dalam artikel ini, kita akan melihat cara membuat sistem rating bintang PHP menggunakan jQuery AJAX . Artikel ini adalah versi yang ditingkatkan dari kode tertaut yang ada. Dalam contoh ini, saya telah menghitung peringkat bintang rata-rata dari total peringkat yang ditambahkan untuk setiap tutorial.

Contoh peringkat bintang ini menunjukkan lima bintang yang dapat diklik untuk setiap tutorial untuk menambahkan peringkat. Tutorial dan peringkatnya disimpan dalam basis data. Saya telah menyimpan peringkat berdasarkan sesi anggota. Saya hardcoded id sesi anggota pada baris pertama dari program ini. Anda dapat mengintegrasikan modul otentikasi Anda untuk mengganti ini dengan login di sesi sesi pengguna.

lihat demo

Daftar Tutorial dengan Star Rating

Kode ini digunakan untuk mengambil data tutorial dari database dan mencantumkannya dengan peringkat bintang. Saya menggabungkan tutorialtabel dan tbl_member_rating menggunakan LEFT JOIN untuk mendapatkan peringkat bintang bersama dengan informasi tutorial. Untuk setiap tutorial, saya menampilkan peringkat yang ditambahkan oleh pengguna dengan representasi grafis menyoroti bintang-bintang. Juga, saya menghitung nilai rata-rata dari 5 dengan menggunakan peringkat keseluruhan yang ditambahkan untuk tutorial.

  <? php
 $ member_id = 1;
 require_once ("Rate.php");
 $ rate = new Rate ();
 $ result = $ rate-> getAllPost ();

 if (! empty ($ result)) {
     $ i = 0;
     foreach (hasil $ sebagai $ tutorial) {
         $ ratingResult = $ rate-> getRatingByTutorialForMember ($ tutorial ["id"], $ member_id);
         $ ratingVal = "";
         if (! empty ($ ratingResult [0] ["rating"])) {
             $ ratingVal = $ ratingResult [0] ["rating"];
         }
         ?>
 <tr>
                 <td valign = "top">
                     <div class = "feed_title"> <? php echo $ tutorial ["title"];  ?> </ div>
                     <div id = "tutorial - <? php echo $ tutorial [" id "];?>"
                         class = "star-rating-box">
                         <input type = "hidden" name = "rating" id = "rating"
                             value = "<? php echo $ ratingVal;?>" />
                         <ul
                             onMouseOut = "resetRating (<? php echo $ tutorial [" id "];?>);">
   <? php
         untuk ($ i = 1; $ i <= 5; $ i ++) {
             $ selected = "";
             if (! empty ($ ratingResult [0] ["rating"]) && $ i <= $ ratingResult [0] ["rating"]) {
                 $ selected = "selected";
             }
             ?>
   <li class = '<? php echo $ selected;  ?> '
                                 onmouseover = "highlightStar (ini, <? php echo $ tutorial [" id "];?>);"
                                 onmouseout = "removeHighlight (<? php echo $ tutorial [" id "];?>);"
                                 onClick = "addRating (ini, <? php echo $ tutorial [" id "];?>);"> ★ </ li>  
   <? php}?>
 </ ul>
                         <div
                             id = "peringkat bintang-penilaian - <? php echo $ tutorial [" id "];?>"
                             class = "star-rating-count">
                                 <? php
        
         if (! empty ($ tutorial ["rating_total"])) {
             $ average = round (($ tutorial ["rating_total"] / $ tutorial ["rating_count"]), 1);
             echo "Rating Bintang Rata-rata adalah".  $ rata-rata.  "dari Total".  $ tutorial ["rating_count"].  "Peringkat";
             ?>
                                
                                 <? php} else {?>
                                 Tanpa Peringkat
                                 <? php}?>
                                 </ div>

                     </ div>
                     <div> <? php echo $ tutorial ["deskripsi"];  ?> </ div>
                 </ td>
             </ tr>
 <? php
     }
 }
 ?>

Tambahkan Rating via jQuery AJAX

Kode jQuery ini menunjukkan fungsi yang digunakan untuk menangani peristiwa yang dipicu selama proses penambahan peringkat bintang.Misalnya, menangani efek mengambang untuk menyorot dan mengatur ulang ikon peringkat bintang atau menangani peristiwa klik untuk menambah peringkat. Fungsi addRating () dipanggil untuk memilih ikon bintang untuk memberi peringkat tutorial. Fungsi ini akan mengirim permintaan ke kode PHP untuk menambahkan peringkat bintang untuk tutorial tertentu dengan referensi dari id tutorial.

  <script src = "jquery-3.2.1.min.js" ketik = "text / javascript"> </ script>
 <script>
  function highlightStar (obj, id) {
   removeHighlight (id);
   $ ('. demo-table # tutorial-' + id + 'li'). masing-masing (function (index) {
    $ (this) .addClass ('sorot');
    if (index == $ ('. demo-table # tutorial-' + id + 'li'). index (obj)) {
     return false;
    }
   });
  }

  function removeHighlight (id) {
   $ ('. demo-table # tutorial-' + id + 'li'). removeClass ('selected');
   $ ('. demo-table # tutorial-' + id + 'li'). removeClass ('sorot');
  }

  function addRating (obj, id) {
   $ ('. demo-table # tutorial-' + id + 'li'). masing-masing (function (index) {
    $ (this) .addClass ('selected');
    $ ('# tutorial-' + id + '#rating'). val ((indeks + 1));
    if (index == $ ('. demo-table # tutorial-' + id + 'li'). index (obj)) {
     return false;
    }
   });
   $ .ajax ({
    url: "add_rating.php",
    data: 'id =' + id + '& rating ='
      + $ ('# tutorial-' + id + '#rating'). val (),
    ketik: "POST",
    success: function (data) {
     $ ("# star-rating-count-" + id) .html (data);
    }
   });
  }

  function resetRating (id) {
   if ($ ('# tutorial-' + id + '#rating'). val ()! = 0) {
    $ ('. demo-table # tutorial-' + id + 'li'). masing-masing (function (index) {
     $ (this) .addClass ('selected');
     if ((index + 1) == $ ('# tutorial-' + id + '#rating'). val ()) {
      return false;
     }
    });
   }
  }
 </ script>

Kode PHP untuk Menambahkan / Perbarui Peringkat Bintang

Dalam kode PHP, ia menerima data peringkat dengan id tutorial. Jika tutorial sudah dinilai oleh anggota, maka catatan yang ada akan diperbarui dengan peringkat baru. Jika tidak, catatan baru akan ditambahkan ke tabel database tbl_member_rating untuk menyimpan peringkat pengguna. Kode untuk mengaktifkan sisipan atau pembaruan pada basis data peringkat adalah,

  <? php
 $ member_id = 1;
 if (! empty ($ _ POST ["rating"]) &&! kosong ($ _ POST ["id"])) {
     require_once ("Rate.php");
     $ rate = new Rate ();
    
     $ ratingResult = $ rate-> getRatingByTutorial ($ _ POST ["id"], $ member_id);
    
     if (! empty ($ ratingResult)) {
         $ rate-> updateRating ($ _ POST ["rating"], $ ratingResult [0] ["id"]);
     } lain {
         $ rate-> addRating ($ _ POST ["id"], $ _POST ["rating"], $ member_id);
     }
    
     $ postRating = $ rate-> getRatingByTutorial ($ _ POST ["id"]);
    
     if (! empty ($ postRating [0] ["rating_total"])) {
         $ average = round (($ postRating [0] ["rating_total"] / $ postRating [0] ["rating_count"]), 1);
         echo "Rating Bintang Rata-rata adalah".  $ rata-rata.  "dari Total".  $ postRating [0] ["rating_count"].  "Peringkat";
     } lain {
         echo "No Ratings";
     }
 }
 ?>