Star Rating System<\/b> is very useful to get user feedback about the product or service. With the rating system, the user can rate the product by selecting the star. It helps service provider to improve their service based on the rating provided by the customer. Mostly, the 5 stars are used to rate between 1 to 5 for the rating system. Besides the provider, the Five-Star rating system helps the buyer to select a quality product based on the rate provided by the other customers.<\/p>\n
You can easily implement the dynamic 5 Star Rating System<\/b> with the database using PHP and MySQL. If you want to integrate the review system, star rating definitely add an extra value to make it user-friendly. In this tutorial, we will show you how to build a rating system with 5 star<\/b> using jQuery, Ajax, PHP, and MySQL.<\/p>\n
In the example script, we will create a dynamic star rating system with PHP<\/b> and integrate it into the post details page.<\/p>\n Before getting started to build a star rating system<\/b>, take a look at the files structure.<\/p>\n Two tables are required to store the post and rating information in the database.<\/p>\n 1. <\/b>The following SQL creates a 2. <\/b>The following SQL creates a The following code is used to connect the database using PHP and MySQL. Specify the database host ( In the post page, we will display information about the specific post and add 5 Star rating for the respective post.<\/p>\n Submit Rating Number:<\/b>\n
star_rating_system_php\/<\/span>\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 rating.php\r\n\u251c\u2500\u2500 js\/<\/span>\r\n\u2502 \u251c\u2500\u2500 jquery.min.js\r\n\u2514\u2500\u2500 css\/<\/span>\r\n \u2514\u2500\u2500 style.css\r\n<\/pre>\nCreate Database Tables<\/h2>\n
posts<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `posts`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `title`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `content`<\/span> text<\/span> COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> '1'<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> AUTO_INCREMENT=2<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nrating<\/code> table with a parent identifier (post_id) in the MySQL database. <\/p>\nCREATE<\/span> TABLE<\/span> `rating`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `post_id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span>,\r\n `rating_number`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span>,\r\n `user_ip`<\/span> varchar<\/span>(20<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span> COMMENT<\/span> 'User IP Address'<\/span>,\r\n `submitted`<\/span> datetime NOT<\/span> NULL<\/span> DEFAULT<\/span> CURRENT_TIMESTAMP<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
$dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\nStar Rating System in the Post Page (index.php)<\/h2>\n
\n
<?php
<\/span>\/\/ Include the database config file
<\/span>include_once <\/span>'dbConfig.php'<\/span>;
<\/span>$postID <\/span>= <\/span>1<\/span>; <\/span>\/\/ It will be changed with dynamic value
\/\/ Fetch the post and rating info from database
<\/span>$query <\/span>= <\/span>\"SELECT p.*, COUNT(r.rating_number) as rating_num, FORMAT((SUM(r.rating_number) \/ COUNT(r.rating_number)),1) as average_rating FROM posts as p LEFT JOIN rating as r ON r.post_id = p.id WHERE p.id = <\/span>$postID<\/span> GROUP BY (r.post_id)\"<\/span>;
<\/span>$result <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>$query<\/span>);
<\/span>$postData <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>();
<\/span>?><\/span><\/pre>\n
\nOnce the user clicks on the star, the rating number is posted to the server-side script via Ajax request.<\/p>\n<div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n <h1<\/span>><\/span><?php <\/span>echo <\/span>$postData<\/span>[<\/span>'title'<\/span>]; <\/span>?><\/span><\/h1<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"rate\"<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"radio\"<\/span> id<\/span>=\"star5\"<\/span> name<\/span>=\"rating\"<\/span> value<\/span>=\"5\"<\/span> <?php <\/span>echo (<\/span>$postData<\/span>[<\/span>'average_rating'<\/span>] >= <\/span>5<\/span>)?<\/span>'checked=\"checked\"'<\/span>:<\/span>''<\/span>; <\/span>?><\/span>>\r\n <label<\/span> for<\/span>=\"star5\"<\/span>><\/span><\/label<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"radio\"<\/span> id<\/span>=\"star4\"<\/span> name<\/span>=\"rating\"<\/span> value<\/span>=\"4\"<\/span> <?php <\/span>echo (<\/span>$postData<\/span>[<\/span>'average_rating'<\/span>] >= <\/span>4<\/span>)?<\/span>'checked=\"checked\"'<\/span>:<\/span>''<\/span>; <\/span>?><\/span>>\r\n <label<\/span> for<\/span>=