Bilah peringkat bintang memungkinkan pengguna untuk mengirimkan pemikirannya tentang apakah konten atau produk itu berguna atau tidak. Ini juga memberi administrator pandangan tentang seberapa baik kinerja itemnya Pengantar PHP. Bagaimana itu bekerja Harap aktifkan JavaScript Ini sangat umum di situs web e-niaga Dalam tutorial ini, saya menggunakan plugin jQuery Bar Rating untuk menampilkan peringkat bintang di layar Setiap kali pengguna mengubah peringkat, kirim permintaan AJAX untuk menyimpan status peringkat pengguna saat ini di tabel database MySQL dengan PHP Unduhan Demo Isi1. Struktur tabelSaya menggunakan tabel tabel posting CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; tabel post_rating CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_ 2. KonfigurasiBuat Kode Selesai <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); } 3. HTML & PHPUnduh plugin jQuery Bar Rating dari sini Muat skrip plugin jQuery Bar Rating dengan perpustakaan jQuery dan juga memuat CSS tema font mengagumkan dengan file CDN font mengagumkan Saya telah memperbaiki CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;0 menjadi CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;1 yang dapat Anda ganti dengan variabel CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;2. Ambil semua rekaman dari Tabel posts Dapatkan peringkat pengguna di pos dan rata-rata pos Buat tata letak untuk menampilkan judul dan konten Menggunakan elemen CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_4 untuk menampilkan peringkat bintang di layar. Didefinisikan CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;5 atribut untuk mendapatkan id elemen pada seleksi dalam skrip Tetapkan peringkat yang dipilih sebelumnya dengan memanggil metode CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_6 di mana lulus nilai peringkat pada CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;7 Kode Selesai <?php include "config.php"; ?> <!-- CSS --> <link href="style.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> <link href='jquery-bar-rating-master/dist/themes/fontawesome-stars.css' rel='stylesheet' type='text/css'> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="jquery-bar-rating-master/dist/jquery.barrating.min.js" type="text/javascript"></script> <div class="content"> <?php $userid = 4; $query = "SELECT * FROM posts"; $result = mysqli_query($con,$query); while($row = mysqli_fetch_array($result)){ $postid = $row['id']; $title = $row['title']; $content = $row['content']; $link = $row['link']; // User rating $query = "SELECT * FROM post_rating WHERE postid=".$postid." and userid=".$userid; $userresult = mysqli_query($con,$query) or die(mysqli_error()); $fetchRating = mysqli_fetch_array($userresult); $rating = $fetchRating['rating']; // get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE postid=".$postid; $avgresult = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($avgresult); $averageRating = $fetchAverage['averageRating']; if($averageRating <= 0){ $averageRating = "No rating yet."; } ?> <div class="post"> <h2><a href='<?php echo $link; ?>' class='link' target='_blank'><?php echo $title; ?></a></h2> <div class="post-text"> <?php echo $content; ?> </div> <div class="post-action"> <!-- Rating --> <select class='rating' id='rating_<?php echo $postid; ?>' data-id='rating_<?php echo $postid; ?>'> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option> </select> <div style='clear: both;'></div> Average Rating : <span id='avgrating_<?php echo $postid; ?>'><?php echo $averageRating; ?></span> <!-- Set rating --> <script type='text/javascript'> $(document).ready(function(){ $('#rating_<?php echo $postid; ?>').barrating('set',<?php echo $rating; ?>); }); </script> </div> </div> <?php } ?> </div> 4. CSS.content{ border: 0px solid black; border-radius: 3px; padding: 5px; margin: 0 auto; width: 50%; } .post{ border-bottom: 1px solid black; padding: 10px; margin-top: 10px; margin-bottom: 10px; } .post:last-child{ border: 0; } .post h1{ font-weight: normal; font-size: 30px; } .post a.link{ text-decoration: none; color: black; } .post-text{ letter-spacing: 1px; font-size: 15px; font-family: serif; color: gray; text-align: justify; } .post-action{ margin-top: 15px; margin-bottom: 15px; } .like,.unlike{ border: 0; background: none; letter-spacing: 1px; color: lightseagreen; } .like,.unlike:hover{ cursor: pointer; } 5. PHPBuat file CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_8 Periksa entri CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_9 oleh pengguna di post_rating Tabel. Jika ada catatan maka perbarui peringkat jika tidak, masukkan catatan baruHitung nilai rata-rata pada <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }_1 dan kembalikan respons JSON Kode Selesai <?php include "config.php"; $userid = 4; // User id $postid = $_POST['postid']; $rating = $_POST['rating']; // Check entry within table $query = "SELECT COUNT(*) AS cntpost FROM post_rating WHERE postid=".$postid." and userid=".$userid; $result = mysqli_query($con,$query); $fetchdata = mysqli_fetch_array($result); $count = $fetchdata['cntpost']; if($count == 0){ $insertquery = "INSERT INTO post_rating(userid,postid,rating) values(".$userid.",".$postid.",".$rating.")"; mysqli_query($con,$insertquery); }else { $updatequery = "UPDATE post_rating SET rating=" . $rating . " where userid=" . $userid . " and postid=" . $postid; mysqli_query($con,$updatequery); } // get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE postid=".$postid; $result = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($result); $averageRating = $fetchAverage['averageRating']; $return_arr = array("averageRating"=>$averageRating); echo json_encode($return_arr); 6. SkripInisialisasi CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_6 pada <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }3. Tentukan opsi <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }_4 dan <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }5 <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }_5 dipicu saat peringkat bintang diubah. Dapatkan id elemen dan pisahkan untuk mendapatkan CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;9 Kirim permintaan AJAX dengan meneruskan CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;9 dan <?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }9 variabel sebagai <?php include "config.php"; ?> <!-- CSS --> <link href="style.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> <link href='jquery-bar-rating-master/dist/themes/fontawesome-stars.css' rel='stylesheet' type='text/css'> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="jquery-bar-rating-master/dist/jquery.barrating.min.js" type="text/javascript"></script> <div class="content"> <?php $userid = 4; $query = "SELECT * FROM posts"; $result = mysqli_query($con,$query); while($row = mysqli_fetch_array($result)){ $postid = $row['id']; $title = $row['title']; $content = $row['content']; $link = $row['link']; // User rating $query = "SELECT * FROM post_rating WHERE postid=".$postid." and userid=".$userid; $userresult = mysqli_query($con,$query) or die(mysqli_error()); $fetchRating = mysqli_fetch_array($userresult); $rating = $fetchRating['rating']; // get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE postid=".$postid; $avgresult = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($avgresult); $averageRating = $fetchAverage['averageRating']; if($averageRating <= 0){ $averageRating = "No rating yet."; } ?> <div class="post"> <h2><a href='<?php echo $link; ?>' class='link' target='_blank'><?php echo $title; ?></a></h2> <div class="post-text"> <?php echo $content; ?> </div> <div class="post-action"> <!-- Rating --> <select class='rating' id='rating_<?php echo $postid; ?>' data-id='rating_<?php echo $postid; ?>'> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option> </select> <div style='clear: both;'></div> Average Rating : <span id='avgrating_<?php echo $postid; ?>'><?php echo $averageRating; ?></span> <!-- Set rating --> <script type='text/javascript'> $(document).ready(function(){ $('#rating_<?php echo $postid; ?>').barrating('set',<?php echo $rating; ?>); }); </script> </div> </div> <?php } ?> </div>0 Saat callback berhasil, perbarui nilai rata-rata pada elemen <?php include "config.php"; ?> <!-- CSS --> <link href="style.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> <link href='jquery-bar-rating-master/dist/themes/fontawesome-stars.css' rel='stylesheet' type='text/css'> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="jquery-bar-rating-master/dist/jquery.barrating.min.js" type="text/javascript"></script> <div class="content"> <?php $userid = 4; $query = "SELECT * FROM posts"; $result = mysqli_query($con,$query); while($row = mysqli_fetch_array($result)){ $postid = $row['id']; $title = $row['title']; $content = $row['content']; $link = $row['link']; // User rating $query = "SELECT * FROM post_rating WHERE postid=".$postid." and userid=".$userid; $userresult = mysqli_query($con,$query) or die(mysqli_error()); $fetchRating = mysqli_fetch_array($userresult); $rating = $fetchRating['rating']; // get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE postid=".$postid; $avgresult = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($avgresult); $averageRating = $fetchAverage['averageRating']; if($averageRating <= 0){ $averageRating = "No rating yet."; } ?> <div class="post"> <h2><a href='<?php echo $link; ?>' class='link' target='_blank'><?php echo $title; ?></a></h2> <div class="post-text"> <?php echo $content; ?> </div> <div class="post-action"> <!-- Rating --> <select class='rating' id='rating_<?php echo $postid; ?>' data-id='rating_<?php echo $postid; ?>'> <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option> </select> <div style='clear: both;'></div> Average Rating : <span id='avgrating_<?php echo $postid; ?>'><?php echo $averageRating; ?></span> <!-- Set rating --> <script type='text/javascript'> $(document).ready(function(){ $('#rating_<?php echo $postid; ?>').barrating('set',<?php echo $rating; ?>); }); </script> </div> </div> <?php } ?> </div>1 dengan respons Kode Selesai $(function() { $('.rating').barrating({ theme: 'fontawesome-stars', onSelect: function(value, text, event) { // Get element id by data-id attribute var el = this; var el_id = el.$elem.data('id'); // rating was selected by a user if (typeof(event) !== 'undefined') { var split_id = el_id.split("_"); var postid = split_id[1]; // postid // AJAX Request $.ajax({ url: 'rating_ajax.php', type: 'post', data: {postid:postid,rating:value}, dataType: 'json', success: function(data){ // Update average var average = data['averageRating']; $('#avgrating_'+postid).text(average); } }); } } }); }); 7. DemoLihat Demo 8. KesimpulanSaya menggunakan plugin jQuery Bar Rating untuk menerapkan peringkat bintang di halaman web. Anda dapat menggunakan plugin lain untuk ini Dalam demonstrasi, saya telah memperbaiki nilai CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;_0 yang dapat Anda perbarui dengan variabel CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `postid` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;2 saat menerapkan pada proyek Anda |