Get And Display Star Rating In PHP with jQuery Ajax

Star Rating System In PHP + MySQL + Ajax

To create ⭐ star rating system in PHP + MySQL + Ajax. in this tutorial, i am going to show you how to create star rating system in PHP + MySQL + Ajax. And as well as how to store star rating into MySQL database.

You can use this for create product, post, customer and user 5 ⭐ rating system using PHP + MySQL + jQuery and ajax.

Star ⭐ Rating System In PHP + MySQL + Ajax

  • Step 1 – Start Apache Web Server
  • Step 2 – Create PHP Project
  • Step 3 – Create Table and Database Connection File
  • Step 4 – Create Start Rating Html
    • Create Star Rating HMTL Markup
    • Integrate Star Rating jQuery Plugin
    • Implement Ajax Code to Send Star Rating into Server

    Step 1 – Start Apache Web Server

    Now, you need to start your apache web server. And as well as start Apache and mysql web server. You can see in the image below how to start apache and mysql server:

    start xampp apache mysql server

    Step 2 – Create PHP Project

    In step 2, navigate to your xampp/htdocs/ directory. And inside xampp/htdocs/ directory, create one folder. And you can name this folder anything.

    Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).

    Step 3 – Create Table and Database Connection File

    In step 3,, you need to create database and table. So run the following sql query to create database and table:

    CREATE DATABASE my_db; CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, `post_id` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

    Then create a php file that named mydb.php. Which is used to connect phpmyadmin mysql database to project folder(demo).

    So, now create mydb.php file and add the below given code into your file:

    Step 4 – Create Star Rating Html

    In step 4, create a php file that named index.php. Which is used to display star rating and store star rating to MySQL database in PHP, So add the following code into it:

    Create Star Rating HTML Markup

    Create star rating html markup and add into index.php file; as shown below:

               .content < border: 0px solid black; border-radius: 3px; padding: 5px; margin: 0 auto; width: 50%; >.post < border-bottom: 1px solid black; padding: 10px; margin-top: 10px; margin-bottom: 10px; >.post:last-child < border: 0; >.post h1 < font-weight: normal; font-size: 30px; >.post a.link < text-decoration: none; color: black; >.post-text < letter-spacing: 1px; font-size: 15px; font-family: serif; color: gray; text-align: justify; >.post-action < margin-top: 15px; margin-bottom: 15px; >.like,.unlike < border: 0; background: none; letter-spacing: 1px; color: lightseagreen; >.like,.unlike:hover  
    ' target='_blank'>
    Average Rating : '>
    ?>

Integrate Star Rating jQuery Plugin

Add the following lines jQuery star rating js library in html form:

Implement Ajax Code to Send Star Rating into Server

Implement jQuery ajax code for send star rating to server, so add into index.php file; as shown below:

  
           .content < border: 0px solid black; border-radius: 3px; padding: 5px; margin: 0 auto; width: 50%; >.post < border-bottom: 1px solid black; padding: 10px; margin-top: 10px; margin-bottom: 10px; >.post:last-child < border: 0; >.post h1 < font-weight: normal; font-size: 30px; >.post a.link < text-decoration: none; color: black; >.post-text < letter-spacing: 1px; font-size: 15px; font-family: serif; color: gray; text-align: justify; >.post-action < margin-top: 15px; margin-bottom: 15px; >.like,.unlike < border: 0; background: none; letter-spacing: 1px; color: lightseagreen; >.like,.unlike:hover  
' target='_blank'>
Average Rating : '>
?>

Step 5 – Store Star Rating into Database

In step 5, create one file that named store-star-rating-db.php file. This php file code will insert/store star rating into mysql database and directory. So, add the below code into your store-star-rating-db.php file:

else < $updatequery = "UPDATE post_rating SET rating=" . $rating . " where user_id=" . $user_id . " and post_id=" . $post_id; mysqli_query($con,$updatequery); >// get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE post_id=".$post_id; $result = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($result); $averageRating = $fetchAverage['averageRating']; $return_arr = array("averageRating"=>$averageRating); echo json_encode($return_arr);

Step 6 – TestThis PHP App

Finally, you need to open your browser and type http://localhost/demo/ this run project on local machine.

Conclusion

To create 5 star ⭐ rating system in PHP + MySQL + Ajax. in this tutorial, You have learned how to create star rating system in PHP + MySQL + Ajax. And as well as how to store star ⭐ rating into MySQL database.

Источник

Star Rating System in PHP and MySQL using jQuery Ajax

Star rating system/code with PHP MySQL & jquery and ajax on products, and posts. In this tutorial, we will show you how to build 5 start rating system with PHP MySQL using jQuery and ajax. As well as, To display the 5 star ratings on the web (HTML) page from the database.

If the user/customer changes the start rating then send an AJAX request to save the user currently rating status on the MySQL database table with PHP.

Sometime, you have products/posts on your website or blog. And may want to get start rating from user. So this tutorial will help you to get review of start rating into your website or blog using jQuery ajax in php mysql.

How to Create 5 Star Rating System in PHP and MySQL using jQuery Ajax

Just follow the below given simple steps to create 5 star rating system/code in PHP MySQL using jQuery and ajax. And store star rating into database:

Step 1: Create Star Rating Table into Database

First of all, open your database and run the following sql queries to create country, state and city table into the database:

Run this following sql query to create posts and post_rating table into your database:

CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, `post_id` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2: Create DB Connection PHP File

In this step, create a file name db.php and update the following code into db.php file:

Note that, This code is used to create a MySQL database connection in PHP project.

Step 3: Create Html to Get and Display Star Rating From Database

In this step, create a display-star-rating.php file and update the below PHP and HTML code into display-star-rating.php file.

Note that, This HTML code shows the star rating on posts. And also user give rating by clicking on stars.

Now, update the following html form into display-star-rating.php file:

           .content < border: 0px solid black; border-radius: 3px; padding: 5px; margin: 0 auto; width: 50%; >.post < border-bottom: 1px solid black; padding: 10px; margin-top: 10px; margin-bottom: 10px; >.post:last-child < border: 0; >.post h1 < font-weight: normal; font-size: 30px; >.post a.link < text-decoration: none; color: black; >.post-text < letter-spacing: 1px; font-size: 15px; font-family: serif; color: gray; text-align: justify; >.post-action < margin-top: 15px; margin-bottom: 15px; >.like,.unlike < border: 0; background: none; letter-spacing: 1px; color: lightseagreen; >.like,.unlike:hover  
?>
Average Rating : '>
?>

Step 4: Store Star Rating Into Database using jQuery Ajax

In this step, create an again new PHP file named store-star-rating-db.php. This PHP code will store star rationg on post by user into database table.

To update the following php and html code into store-star-rating-db.php file:

else < $updatequery = "UPDATE post_rating SET rating=" . $rating . " where user_id=" . $user_id . " and post_id=" . $post_id; mysqli_query($con,$updatequery); >// get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE post_id=".$post_id; $result = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($result); $averageRating = $fetchAverage['averageRating']; $return_arr = array("averageRating"=>$averageRating); echo json_encode($return_arr);

Note that, if you found any error ralated to jQuery star rating library. So, You can download the plugin from here. And then include in your display-star-rating.php file.

Conclusion

Get star rating and display star rating from database in PHP with jQuery and ajax tutorial, you have learned how to get start rating on posts/products by user/customer using jQuery ajax in php.

Источник

Star Rating System With JQuery, Ajax, PHP And MySQL

Star rating system with PHP MySQL, jquery, and ajax on products, etc posts. In this tutorial, we will learn how to create a simple star rating script with PHP MySQL using jQuery and ajax. Then display the star ratings on the web (HTML) page from the database. If the user changes the start rating then send an AJAX request to save the database table with PHP. Sometimes, you have products/posts on your website or blog. And may want to get a star rating from the user. So this tutorial will help you display star rating in PHP.

★★★★★ Star Rating System With JQuery, Ajax, PHP And MySQL

Just follow the below given simple steps to create a customer/user star rating system in PHP MySQL using jQuery and ajax. And store star rating into the database:

Open your database and run the following SQL queries to create a country, state, and city table into the database: Run this following SQL query to create posts and post_rating table into your database:

CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; CREATE TABLE IF NOT EXISTS `post_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, `post_id` int(11) NOT NULL, `rating` int(2) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

In this step, create a display-star-rating.php file and update the below PHP and HTML code into display-star-rating.php file. Note that, This HTML code shows the star rating on posts. And also users give ratings by clicking on stars. Now, update the following HTML form into display-star-rating.php file:

           .content < border: 0px solid black; border-radius: 3px; padding: 5px; margin: 0 auto; width: 50%; >.post < border-bottom: 1px solid black; padding: 10px; margin-top: 10px; margin-bottom: 10px; >.post:last-child < border: 0; >.post h1 < font-weight: normal; font-size: 30px; >.post a.link < text-decoration: none; color: black; >.post-text < letter-spacing: 1px; font-size: 15px; font-family: serif; color: gray; text-align: justify; >.post-action < margin-top: 15px; margin-bottom: 15px; >.like, .unlike < border: 0; background: none; letter-spacing: 1px; color: lightseagreen; >.like, .unlike:hover  
' target='_blank'>
Average Rating : '>
?>

Create an again new PHP file named store-star-rating-db.php. This PHP code is a simple star rating script PHP. To update the following PHP and HTML code into store-star-rating-db.php file:

else < $updatequery = "UPDATE post_rating SET rating=" . $rating . " where user_id=" . $user_id . " and post_id=" . $post_id; mysqli_query($con,$updatequery); >// get average $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE post_id=".$post_id; $result = mysqli_query($con,$query) or die(mysqli_error()); $fetchAverage = mysqli_fetch_array($result); $averageRating = $fetchAverage['averageRating']; $return_arr = array("averageRating"=>$averageRating); echo json_encode($return_arr);

Источник

Читайте также:  Removehandler html htm php
Оцените статью