Toto je velmi jednoduchý a rychlý návod, jak velmi snadno vytvořit hodnocení hvězdičkami pomocí jquery A návštěvníci obchodu hlasují v databázi pro zobrazení popularity produktu. Toto je ukázkový skript, zde jsem nepoužil příliš dobré uživatelské rozhraní, soustředím se jen na vytváření dynamických funkce hodnocení hvězdičkami pomocí PHP a Mysql.
Vytvořil jsem ukázkovou databázi, kde se budou ukládat hlasy návštěvníků, a pomocí těchto hlasů zobrazím průměrné hodnocení produktu, skript vytvořený v Core PHP a Mysql, takže se můžete snadno integrovat do svého webového projektu.
Ukázka struktury tabulky hodnocení.
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 |
V tomto tutoriálu jsem použil plugin pro hodnocení hvězdičkami jquery k zobrazení hodnocení hvězdičkami jako část uživatelského rozhraní, můžete prozkoumat další funkce hodnocení uživatelského rozhraní pomocí tohoto oficiálního pluginu hodnocení. Podporuje také funkci odezvy na bootstrap.
http://www.jqueryrain.com/?d8VUtmAN
Vytvořte ukázkový soubor uživatelského rozhraní s některými ukázkovými produkty a jejich hodnocením.
<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> |
Poté zahrňte požadované knihovny hodnocení (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> |
Aplikujte kód jquery vždy, když uživatel udělí hodnocení produktu, pak jeden požadavek ajax odejde na server s productId a daným hlasem a tyto hodnoty musíte uložit do své databáze.
<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> |
Vytvořte soubor serveru rating.php , kam zapíšete funkci ukládání a načítání hodnocení.
<?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; } } ?> |
Podívejte se na živé demo a stáhněte si zdrojový kód.
DEMO
| STÁHNOUT
|
Doufám, že tento tutoriál vám pomůže vytvořit systém hodnocení pro vaše webové projekty.