यह एक बहुत ही सरल और त्वरित ट्यूटोरियल है कि कैसे jQuery का उपयोग करके बहुत आसानी से स्टार रेटिंग बनाई जाए और उत्पाद की लोकप्रियता को प्रदर्शित करने के लिए आगंतुकों को डेटाबेस में वोट दिया जाए। यह एक नमूना स्क्रिप्ट है, यहां मैंने बहुत अच्छे UI का उपयोग नहीं किया है, मैं सिर्फ गतिशील बनाने पर ध्यान केंद्रित करता हूं PHP और Mysql का उपयोग करके स्टार रेटिंग सुविधा।
मैंने एक नमूना डेटाबेस बनाया जहां आगंतुकों के वोट स्टोर किए जाएंगे और उन वोटों का उपयोग करके मैं उत्पाद की औसत रेटिंग प्रदर्शित करूंगा, कोर PHP और माइस्क्ल में बनाई गई स्क्रिप्ट ताकि आप आसानी से अपने वेब आधारित प्रोजेक्ट में एकीकृत कर सकें।
नमूना रेटिंग तालिका संरचना।
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 स्टार रेटिंग प्लगइन का उपयोग किया है, आप इस आधिकारिक रेटिंग प्लगइन द्वारा अधिक यूआई रेटिंग सुविधा का पता लगा सकते हैं। यह बूटस्ट्रैप प्रतिक्रियाशील सुविधा का भी समर्थन करता है।
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> |
उसके बाद आवश्यक रेटिंग लाइब्रेरी (सीएसएस और जेएस) शामिल करें।
<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 कोड लागू करें, फिर एक AJAX अनुरोध उत्पाद आईडी के साथ सर्वर पर जाएगा और वोट दिया जाएगा और आपको इन मानों को अपने डेटाबेस में स्टोर करने की आवश्यकता होगी।
<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; } } ?> |
लाइव डेमो देखें और सोर्स कोड डाउनलोड करें।
डेमो
| डाउनलोड करें
|
आशा है कि यह ट्यूटोरियल आपकी वेब आधारित परियोजनाओं के लिए रेटिंग प्रणाली बनाने में सहायक होगा।