これは、jqueryを使用して星の評価を非常に簡単に作成し、訪問者の投票をデータベースに保存して製品の人気を表示する方法に関する非常にシンプルで迅速なチュートリアルです。これはサンプルスクリプトです。ここでは、あまり優れたUIを使用せず、動的な作成に焦点を当てています。 PHPとMysqlを使用した星評価機能。
訪問者の投票が保存されるサンプルデータベースを作成し、それらの投票を使用して、製品の平均評価、Core PHPおよびMysqlで作成されたスクリプトを表示して、Webベースのプロジェクトに簡単に統合できるようにします。
評価テーブルの構造の例。
CREATE TABLE IF NOT EXISTS `rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `product_id` int(11) NOT NULL, `vote` float NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 |
このチュートリアルでは、jqueryの星評価プラグインを使用して星の評価をUIパーツとして表示し、この公式の評価プラグインによってさらに多くのUI評価機能を調べることができます。また、ブートストラップ応答機能もサポートしています。
http://www.jqueryrain.com/?d8VUtmAN
いくつかのデモ製品とその評価を使用してサンプルUIファイルを作成します。
<table border=1>
<tr><td >
<img src="img/p1.jpeg">
<h3>Product-1</h3>
<input value="0" type="number" class="rating" min=0 max=5 step=0.1 data-size="md" data-stars="5" productId=1>
</td>
<td>
<img src="img/p2.jpeg">
<h3>Product-2</h3>
<input value="0" type="number" class="rating" min=0 max=5 step=0.1 data-size="md" data-stars="5" productId=2>
</td>
</tr></table> |
その後、必要な評価ライブラリ（css＆js）を含めます。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/star-rating.min.js" type="text/javascript"></script>> |
ユーザーが製品に評価を与えるたびにjqueryコードを適用すると、1つのajaxリクエストがproductIdを使用してサーバーに送信され、投票が行われます。これらの値をデータベースに保存する必要があります。
<script type="text/javascript">
$(function(){
$('.rating').on('rating.change', function(event, value, caption) {
productId = $(this).attr('productId');
$.ajax({
url: "rating.php",
dataType: "json",
data: {vote:value, productId:productId, type:'save'},
success: function( data ) {
alert("rating saved");
},
error: function(e) {
// Handle error here
console.log(e);
},
timeout: 30000
});
});
});
</script> |
サーバーファイルrating.phpを作成します 、評価の保存と取得機能を記述します。
<?php
function connect() {
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$con = mysqli_connect($hostname, $username, $password, $dbname);
return $con;
}
function getRatingByProductId($con, $productId) {
$query = "SELECT SUM(vote) as vote, COUNT(vote) as count from rating WHERE product_id = $productId";
$result = mysqli_query($con, $query);
$resultSet = mysqli_fetch_assoc($result);
if($resultSet['count']>0) {
$data['avg'] = $resultSet['vote']/$resultSet['count'];
$data['totalvote'] = $resultSet['count'];
} else {
$data['avg'] = 0;
$data['totalvote'] = $resultSet['count'];
}
return $data;
}
if(isset($_REQUEST['type'])) {
if($_REQUEST['type'] == 'save') {
$vote = $_REQUEST['vote'];
$productId = $_REQUEST['productId'];
$query = "INSERT INTO rating (product_id, vote) VALUES ('$productId', '$vote')";
// get connection
$con = connect();
$result = mysqli_query($con, $query);
echo 1; exit;
}
}
?> |
ライブデモを参照してソースコードをダウンロードしてください。
デモ
| ダウンロード
|
このチュートリアルが、Webベースのプロジェクトの評価システムの作成に役立つことを願っています。