PHP
Star Rating Script menggunakan PHP dan MySQL dengan AJAX
May
oleh Vincy. Terakhir diubah pada 4 Februari 2020.
Bagaimana Anda mengetahui pemikiran pembaca atau pelanggan Anda tentang konten situs web Anda? Bagaimana fitur peringkat bintang membantu mengumpulkan opini pelanggan?
Peringkat bintang adalah fitur yang digunakan di berbagai domain dengan berbagai cara. Misalnya, ini adalah salah satu blok bangunan utama dalam situs web eCommerce.
Peringkat bintang membantu Anda mengetahui bagaimana orang memberi peringkat pada konten Anda. Itu tidak hanya memberi peringkat pada konten Anda. Juga, ini membawa lebih banyak pembaca ke halaman Anda dengan peringkat yang diperoleh.
Saat Anda membangun situs web, jika Anda memiliki ruang lingkup untuk menerapkan sistem peringkat bintang dan Anda harus bereksperimen dengannya.
Situs web menggunakan berbagai cara untuk memungkinkan pengguna memberi peringkat pada konten. Misalnya, peringkat bintang, peringkat naik-turun, peringkat emoji, dan lainnya.
Kami telah melihat begitu banyak contoh untuk peringkat bintang, peringkat emoji dan banyak lagi. Saya mengelompokkan semua itu dalam satu contoh tunggal ini.
Saya mendukung tiga alternatif UI untuk bagian peringkat. Yaitu,
- Peringkat bintang lima
- Peringkat favorit
- Peringkat emoji
Saya membuat arahan di PHP untuk mengonfigurasi template untuk tampilan peringkat.
Apa isinya?
- Plugin yang ada untuk menerapkan peringkat bintang dinamis
- Keuntungan membuat skrip peringkat bintang ubahsuaian
- Berbagai jenis opsi peringkat
- jQuery star rating contoh script
- Database contoh rating
- Desain UI untuk membuat opsi peringkat bintang
- jQuery berfungsi untuk menangani tindakan penilaian pengguna
- Menyimpan rating pengguna ke database MySQL dari PHP
- Output tangkapan layar dari opsi peringkat yang berbeda dengan bintang, favorit, emoji
Plugin yang ada untuk menerapkan peringkat bintang dinamis
Ada berbagai plugin yang tersedia di pasar untuk mengaktifkan peringkat bintang. Plugin yang sudah jadi dengan fitur yang luar biasa.
Misalnya, Rateit adalah plugin peringkat bintang berbasis jQuery. Ini memungkinkan penyematan peringkat bintang dengan daftar, pilih, dan lebih banyak markup HTML. Ini mendukung Font Awesome, ikon Material untuk menampilkan ikon peringkat.
UpvoteJS adalah paket JavaScript untuk merender widget peringkat seperti StackExchange.
Jika Anda memiliki situs web WordPress, ada plugin peringkat bawaan yang tersedia. Wp-PostRatings adalah plugin populer untuk mengimplementasikan rating.
Keuntungan membuat skrip peringkat bintang ubahsuaian
Dengan peringkat bintang khusus, kita dapat menyederhanakan logika kode alih-alih banyak menjejali.
Dan dengan demikian akan memudahkan pada saat fase enhancement atau maintenance.
Ini memperbaiki kelebihan Anda dengan built-in yang penuh fitur. Selain itu, ini mengurangi upaya Anda dalam mengelola seribu baris kode untuk fitur UI sederhana ini.
Berbagai jenis opsi peringkat
Situs web menggunakan jenis opsi peringkat yang berbeda untuk mendapatkan ulasan pengguna. Daftar berikut menunjukkan beberapa tipe.
- Peringkat bintang tunggal atau ganda
- Peringkat emoji seperti Facebook
- Pemungutan suara naik-turun sederhana.
- Peringkat suka-tidak seperti
- Peringkat bar
Jenisnya adalah verifikasi dalam pola pikir pengguna saat memberi peringkat. Misalnya, peringkat suka-tidak suka dan naik-turun mengharapkan opsi biner 0 atau 1 dari pengguna. Tetapi dengan peringkat bar, itu dapat memiliki kisaran poin dari beberapa batas.
Contoh rating bintang dengan AJAX
Saya telah membuat kode contoh peringkat bintang berbasis AJAX dengan PHP dan jQuery.
Kode ini akan menampilkan daftar kursus dengan opsi untuk menilai setiap kursus. Kursus berasal dari database.
Elemen peringkat di UI dapat dikonfigurasi. Saya memberikan tiga alternatif UI untuk bagian peringkat. Peringkat bintang, favorit, dan emoji ada untuk mengumpulkan ulasan pengguna.
Saat menambahkan peringkat, kode mengirimkannya ke PHP melalui AJAX. Kemudian, ini menyimpan peringkat dalam database MySQL.
Setelah diberi nilai, pengguna tidak dapat mengubah mata pelajaran lagi untuk menghindari nilai duplikat.
Gambar berikut menunjukkan struktur file dari kode contoh.
Database contoh rating
Bagian ini menunjukkan struktur dan SQL dari database yang digunakan dalam contoh ini.
Saya telah membuat dua tabel tbl_courses dan tbl_course_rating. Itu tbl_cources tabel database berisi kursus di mana pengguna akan menambahkan peringkat.
Itu tbl_cource_rating tabel memiliki pemetaan dengan tbl_cource database. Ini memiliki peringkat unik tanpa duplikat.
Skrip di bawah ini menunjukkan pernyataan CREATE dan dump data untuk dua tabel ini. Dengan mengimpor skrip ini, Anda dapat menyiapkan contoh ini di lingkungan lokal.
sql / db_rating.sql
-- -- Database: `db_rating` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_course` -- CREATE TABLE `tbl_course` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `description` varchar(255) NOT NULL, `period` varchar(255) NOT NULL, `availabe_seats` int(11) NOT NULL, `last_date_to_register` date NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `tbl_course` -- INSERT INTO `tbl_course` (`id`, `name`, `description`, `period`, `availabe_seats`, `last_date_to_register`) VALUES (1, 'Professional Training for Finantial Analystrn', 'Professional Training for Finantial Analyst', '30 days', 2, '2020-01-31'), (2, 'Enterprise Programming in Artificial Intelligencern', 'Enterprise Programming in Artificial Intelligence', '30 days', 2, '2020-01-24'); -- -------------------------------------------------------- -- -- Table structure for table `tbl_course_rating` -- CREATE TABLE `tbl_course_rating` ( `id` int(11) NOT NULL, `course_id` int(11) NOT NULL, `member_id` int(11) NOT NULL, `rating` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_course` -- ALTER TABLE `tbl_course` ADD PRIMARY KEY (`id`); -- -- Indexes for table `tbl_course_rating` -- ALTER TABLE `tbl_course_rating` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_course` -- ALTER TABLE `tbl_course` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; -- -- AUTO_INCREMENT for table `tbl_course_rating` -- ALTER TABLE `tbl_course_rating` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=95; COMMIT;
Desain UI untuk membuat opsi peringkat bintang
Di halaman arahan, ini menunjukkan daftar kursus dari database. Kode HTML untuk halaman ini ada di bawah.
Ini memuat elemen peringkat berdasarkan konstanta PHP yang ditentukan dalam file konfigurasi umum.
Elemen peringkat akan menampilkan 5-bintang yang dapat diklik atau ikon favorit atau ikon emoji.
Saat mengklik elemen peringkat, itu memanggil skrip jQuery untuk mengirim permintaan AJAX untuk menyimpan peringkat.
index.php
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Star Rating Script in PHP</title> <link href="https://phppot.com/php/jquery-star-rating-script-using-php-and-mysql-with-ajax/./assets/css/phppot-style.css" type="text/css" rel="stylesheet" /> <link href="./assets/css/star-rating-style.css" type="text/css" rel="stylesheet" /> <script src="./vendor/jquery/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div class="phppot-container"> <div class="container"> <h2>Star Rating Script in PHP</h2> <div id="course_list"> <?php require_once "getRatingData.php"; ?> </div> </div> </div> <script src="./assets/js/rating.js"></script> </body> </html>
Saya membuat file template terpisah untuk memiliki berbagai jenis UI peringkat. Yaitu star-rating-view.php, favorit-rating-view.php dan emoji_rating_view.php.
File template menunjukkan spesifikasi penanganan event onClick di markup.
star-rating-view.php
<?php
for ($count = 1; $count <= 5; $count ++) {
$starRatingId = $row['id'] . '_' . $count;
if ($count <= $userRating) {
?>
<li value="<?php echo $count; ?>" id="<?php echo $starRatingId; ?>"
class="star"><img src="https://phppot.com/php/jquery-star-rating-script-using-php-and-mysql-with-ajax/./img/<?php echo $apperance; ?>-filled.png"></li>
<?php
} else {
?>
<li value="' . $count; ?>" id="<?php echo $starRatingId; ?>"
class="star"
onclick="addRating(this,<?php echo $row['id']; ?>,<?php echo $count; ?>, 'star');"
onMouseOver="mouseOverRating(<?php echo $row['id']; ?>,<?php echo $count; ?>,'<?php echo $apperance; ?>');"
onMouseLeave="mouseOutRating(<?php echo $row['id']; ?>,<?php echo $userRating; ?>,'<?php echo $apperance; ?>');"><img
src="./img/<?php echo $apperance; ?>-open.png"></li>
<?php
}
}
?>
favorit-rating-view.php
<?php
for ($count = 1; $count <= 5; $count ++) {
$starRatingId = $row['id'] . '_' . $count;
if ($count == $userRating) {
?>
<li value="<?php echo $count; ?>" id="<?php echo $starRatingId; ?>"
class="star"><img src="https://phppot.com/php/jquery-star-rating-script-using-php-and-mysql-with-ajax/./img/<?php echo $apperance; ?>-filled.png"></li>
<?php
} else {
?>
<li value="<?php $count; ?>" id="<?php echo $starRatingId; ?>"
class="star"
onclick="addRating(this,<?php echo $row['id']; ?>,<?php echo $count; ?>);"
onMouseOver="mouseOverRating(<?php echo $row['id']; ?>,<?php echo $count; ?>,'<?php echo $apperance; ?>');"
onMouseLeave="mouseOutRating(<?php echo $row['id']; ?>,<?php echo $userRating; ?>,'<?php echo $apperance; ?>');"><img
src="./img/<?php echo $apperance; ?>-open.png"></li>
<?php
}
}
?>
Dalam templat peringkat emoji, ini menunjukkan rangkaian lima ikon emosi dari sangat sedih untuk sangat senang.
Jika Anda memberikan dukungan pada kueri pengguna, Anda dapat menggunakan peringkat emoji. Menanamkan rating emoji akan memberikan kesan emosional pelanggan atas dukungan Anda.
emoji-rating-view.php
<?php
for ($count = 1; $count <= 5; $count ++) {
$starRatingId = $row['id'] . '_' . $count;
if ($count == $userRating) {
?>
<li value="<?php echo $count; ?>" id="<?php echo $starRatingId; ?>"
class="star"><img src="https://phppot.com/php/jquery-star-rating-script-using-php-and-mysql-with-ajax/./img/<?php echo $apperance . $count; ?>-filled.png"></li>
<?php
} else {
?>
<li value="<?php $count; ?>" id="<?php echo $starRatingId; ?>"
class="star"
onclick="addRating(this,<?php echo $row['id']; ?>,<?php echo $count; ?>);"
onMouseOver="mouseOverRating(<?php echo $row['id']; ?>,<?php echo $count; ?>,'<?php echo $apperance; ?>');"
onMouseLeave="mouseOutRating(<?php echo $row['id']; ?>,<?php echo $userRating; ?>,'<?php echo $apperance; ?>');"><img
src="./img/<?php echo $apperance . $count; ?>-open.png"></li>
<?php
}
}
?>
Gaya CSS dibuat untuk UI peringkat bintang
assets / css / star-rating-style.php
ul {
margin: 0px;
padding: 10px 0px 0px 0px;
display: inline-flex;
}
li.star {
list-style: none;
display: inline-block;
margin-right: 5px;
cursor: pointer;
color: #9E9E9E;
}
.row-title {
font-size: 20px;
color: #232323;
}
.review-note {
font-size: 12px;
color: #999;
font-style: italic;
}
.row-item {
margin-bottom: 20px;
border-bottom: #F0F0F0 1px solid;
}
p.text-address {
font-size: 12px;
}
img {
height: 20px;
width: 20px;
}
.course-detail {
font-size: 1em;
margin-right: 20px;
}
.loader-icon {
display: none;
}
.response {
display: inline-block;
vertical-align: super;
margin-left: 10px;
color: #FF0000;
}
jQuery berfungsi untuk menangani tindakan penilaian pengguna
File ini berisi fungsi jQuery untuk mempersiapkan permintaan AJAX untuk menyimpan peringkat pengguna.
Ini juga menangani acara arahkan mouse untuk menyorot elemen peringkat. Itu mouseOverRating () fungsi menyoroti bintang atau elemen peringkat lainnya saat melayang.
Demikian pula, mouseOutRating () menyetel ulang UI peringkat kembali ke bentuk aslinya saat mouse keluar.
Kode AJAX di file addRating () mempersiapkan permintaan dengan URL titik akhir PHP dan parameter data.
Ia menerima respon server dalam callback sukses AJAX di mana ia memperbarui UI yang sesuai.
assets / js / rating.js
function mouseOverRating(courseId, rating, appearance) {
if (appearance == "star") {
for (var i = 1; i <= rating; i++) {
$('#' + courseId + "_" + i + ' img').attr('src',
"./img/" + appearance + "-filled.png");
}
} else {
ratingIconPrefix = "./img/" + appearance;
for (var i = 1; i <= rating; i++) {
if (appearance == "emoji") {
ratingIconPrefix = "./img/" + appearance + "1";
}
if (i == rating) {
$('#' + courseId + "_" + i + ' img').attr('src',
ratingIconPrefix + "-filled.png");
}
}
}
}
function mouseOutRating(courseId, userRating, appearance) {
var ratingId;
if (appearance == "star") {
if (userRating != 0) {
for (var i = 1; i <= userRating; i++) {
$('#' + courseId + "_" + i + ' img').attr('src',
"./img/" + appearance + "-filled.png");
}
}
if (userRating <= 5) {
for (var i = (userRating + 1); i <= 5; i++) {
$('#' + courseId + "_" + i + ' img').attr('src',
"./img/" + appearance + "-open.png");
}
}
$(".selected img").attr('src', "./img/" + appearance + "-filled.png");
} else {
ratingIconPrefix = "./img/" + appearance;
if (userRating <= 5) {
for (var i = 1; i <= 5; i++) {
if (appearance == "emoji") {
ratingIconPrefix = "./img/" + appearance + i;
}
if (userRating == i) {
$('#' + courseId + "_" + i + ' img').attr('src',
ratingIconPrefix + "-filled.png");
} else {
$('#' + courseId + "_" + i + ' img').attr('src',
ratingIconPrefix + "-open.png");
}
}
}
var selectedImageSource = $(".selected img").attr('src');
if (selectedImageSource) {
selectedImageSource = selectedImageSource.replace('open', "filled");
$(".selected img").attr('src', selectedImageSource);
}
}
}
function addRating(currentElement, courseId, ratingValue, appearance) {
var loaderIcon = $(currentElement).closest(".row-item");
$.ajax({
url : "ajax-end-point/insertRating.php",
data : "index=" + ratingValue + "&course_id=" + courseId,
type : "POST",
beforeSend : function() {
$(loaderIcon).find("#loader-icon").show();
},
success : function(data) {
loaderIcon = $(currentElement).closest(".row-item");
$(loaderIcon).find("#loader-icon").hide();
if (data != "") {
$('#response-' + courseId).text(data);
return false;
}
if (appearance == 'star') {
$('#list-' + courseId + ' li').each(
function(index) {
$(this).addClass('selected');
if (index == $('#list-' + courseId + ' li').index(
currentElement)) {
return false;
}
});
} else {
$(currentElement).addClass('selected');
}
}
});
}
Menyimpan rating pengguna ke database MySQL dari PHP
Ketika skrip AJAX dipanggil, itu mempersiapkan permintaan ke PHP. Dalam PHP, ia menerima data posting peringkat yang dipilih dan menyimpannya dalam database peringkat.
Meskipun UI menampilkan elemen yang berbeda, nilai peringkat berkisar dari 1 sampai 5. Dalam database, ada pemetaan antara nilai peringkat, id kursus dan id anggota.
Konfigurasi di bawah ini adalah untuk mengatur tampilan elemen rating. Nilai yang mungkin ada di sana dengan pernyataan komentar.
Umum / Config.php
<?php
namespace Phppot;
class Config
{
// Possible values: star | favourite | emoji
const RATING_APPEARANCE = "favourite";
}
Ini adalah titik akhir PHP yang dipanggil melalui AJAX. Ini memasukkan peringkat pengguna ke database.
Sebelum memasukkan, ia memeriksa apakah pengguna sudah menambahkan peringkat untuk kursus tertentu itu. Jika demikian, maka kode tidak akan mengizinkan pengguna untuk menilai lagi.
ajax-end-point / insertRating.php
<?php
namespace Phppot;
use PhppotRating;
require_once __DIR__ . "./../Model/Rating.php";
$rating = new Rating();
// Here the user id is harcoded.
// You can integrate your authentication code here to get the logged in user id
$userId = 5;
if (isset($_POST["index"], $_POST["course_id"])) {
$courseId = $_POST["course_id"];
$ratingIndex = $_POST["index"];
$rowCount = $rating->isUserRatingExist($userId, $courseId);
if ($rowCount == 0) {
$insertId = $rating->addRating($userId, $courseId, $ratingIndex);
if (empty($insertId)) {
echo "Problem in adding ratings.";
}
} else {
echo "You have added rating already.";
}
}
Kode ini membaca kursus dan peringkat yang sesuai dari database. Ini mempersiapkan markup HTML yang disematkan dengan data dinamis.
File ini menampilkan daftar kursus dengan opsi peringkat di halaman arahan.
getRatingData.php
<?php
namespace Phppot;
use PhppotRating;
require_once "./Common/Config.php";
$config = new Config();
require_once "./Model/Rating.php";
$rating = new Rating();
// Here the user id is harcoded.
// You can integrate your authentication code here to get the logged in user id
$userId = 5;
$apperance = $config::RATING_APPEARANCE;
$courseResult = $rating->getCourse();
if (! empty($courseResult)) {
foreach ($courseResult as $row) {
$userRating = $rating->getUserRating($userId, $row['id']);
$totalRating = $rating->getTotalRating($row['id']);
$date = date_create($row["last_date_to_register"]);
?>
<div class="row-item">
<div class="row-title"><?php echo $row['name']; ?></div>
<ul class="list-inline" id="list-<?php echo $row['id']; ?>">
<?php require $apperance . "-rating-view.php"; ?>
<img src="https://phppot.com/php/jquery-star-rating-script-using-php-and-mysql-with-ajax/img/loader.gif" class="loader-icon" id="loader-icon">
</ul>
<div class="response" id="response-<?php echo $row['id']; ?>"></div>
<p class="review-note">Total Reviews: <?php echo $totalRating; ?></p>
<p class="text-address">
<label class="course-detail">Period: <?php echo $row["period"]; ?></label><label
class="course-detail">Available seats: <?php echo $row["availabe_seats"]; ?></label><label
class="course-detail">Last Date to Register: <?php echo date_format($date, "d M Y"); ?></label>
</p>
</div>
<?php
}
}
?>
Dalam dua file PHP di atas, saya telah melakukan harcode id pengguna dengan variabel PHP $ userId. Anda dapat memasukkan kode otentikasi pengguna dan mendapatkan ID pengguna yang masuk.
Itu Rating.php adalah kelas model PHP yang dibuat untuk melakukan tindakan pemeringkatan.
Ini memiliki fungsi untuk membaca kursus dan peringkat pengguna di dalamnya. Itu getUserRating () dan getTotalRating () fungsi mengembalikan data untuk menampilkan statistik peringkat.
Itu isUserRatingExist () memeriksa keunikan rating pengguna pada kursus tertentu.
Saya menggunakan pernyataan yang disiapkan dengan MySQLi untuk menjalankan kueri database. Sumber berisi kelas DAO DataSource.php generik untuk menjalankan operasi database.
Model / Rating.php
<?php
namespace Phppot;
use PhppotDataSource;
class Rating
{
private $ds;
function __construct()
{
require_once __DIR__ . './../lib/DataSource.php';
$this->ds = new DataSource();
}
function getCourse()
{
$query = "SELECT * FROM tbl_course ORDER BY id DESC";
$result = $this->ds->select($query);
return $result;
}
function getUserRating($userId, $courseId)
{
$average = 0;
$avgQuery = "SELECT rating FROM tbl_course_rating WHERE member_id = ? and course_id = ?";
$paramType="ii";
$paramValue = array(
$userId,
$courseId
);
$result = $this->ds->select($avgQuery, $paramType, $paramValue);
if ($result > 0) {
foreach ($result as $row) {
$average = round($row["rating"]);
} // endForeach
} // endIf
return $average;
}
function getTotalRating($courseId)
{
$totalVotesQuery = "SELECT * FROM tbl_course_rating WHERE course_id = ?";
$paramType="i";
$paramValue = array(
$courseId
);
$result = $this->ds->getRecordCount($totalVotesQuery, $paramType, $paramValue);
return $result;
}
function isUserRatingExist($userId, $courseId)
{
$checkIfExistQuery = "select * from tbl_course_rating where member_id = ? and course_id = ?";
$userId;
$courseId;
$paramType="ii";
$paramValue = array(
$userId,
$courseId
);
$rowCount = $this->ds->getRecordCount($checkIfExistQuery, $paramType, $paramValue);
return $rowCount;
}
function addRating($userId, $courseId, $rating)
{
$insertQuery = "INSERT INTO tbl_course_rating(member_id,course_id, rating) VALUES (?,?,?) ";
$paramType="iii";
$paramValue = array(
$userId,
$courseId,
$rating
);
$insertId = $this->ds->insert($insertQuery, $paramType, $paramValue);
return $insertId;
}
}
Output tangkapan layar dari opsi peringkat yang berbeda dengan bintang, favorit, emoji
Pada tangkapan layar berikut, ini menampilkan teks berwarna merah. Ini adalah pesan kesalahan untuk memberi tahu pengguna jika dia mencoba menambahkan peringkat lagi.
Kesimpulan
Kami telah melihat pentingnya menerapkan skrip rating dalam sebuah aplikasi. Selain itu, kami telah melihat jenis peringkat yang umumnya digunakan oleh aplikasi.
Dengan mendukung 3 jenis komponen UI peringkat dalam skrip contoh, saya yakin ini membantu Anda untuk memiliki opsi. Anda dapat memilih dan memperbaiki salah satunya berdasarkan kebutuhan.
Misalnya, jika Anda mengelola lebih banyak aplikasi, maka integrasikan yang ini dalam semua. Konfigurasi peringkat memungkinkan pengaturan berdasarkan sifat aplikasi.
Tidak ada batasan. Kami dapat meningkatkan komponen ini dengan menambahkan lebih banyak opsi peringkat seperti-tidak suka, pemungutan suara naik-turun, peringkat dengan ranger dan banyak lagi.
Unduh
↑ Kembali ke Atas
Source link
