How to develop feedback form with Star Rating in PHP, MySQL and jQuery

You can display star rating from database for the user to select and submit the feedback form. Using jQuery with PHP and MySQL, you can develop this form and save the feedback in MySQL database. In this topic, I will show how to select star rating (0-5) for various categories of services as feedback and submit the feedback form. We will use below star rating description for each rating.

0 - No Rating, 1- One Star, 2 - Two Star, 3 - Three Star, 4 - Four Star, 5 - Five Star.

create a review system in php and mysql and jqueryAssumption

  1. You must have basic knowledge of HTML, CSS, JavaScript/jQuery. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

display star rating in phpFolders and Files

Below is a screenshot of the folder structure and files I am using:

star rating feedback form

I have created a folder called 'feedback' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'star_rating' folder under 'www'.

Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - My custom stylesheet is in this folder
Folder 'js' - In this folder I have my custom JavaScripts
index.php is my main program that presents the feedback form.
process_feedback.php is the php program to process the form and update database after the form is submitted.

Below is the screenshot of the page:

dynamic star rating javascript

In the above form, user can select a star rating for each of the services. When the user brings mouse over the stars, rating caption changes on the right side and on clicking any star, rating will be selected.

Step 1 - Create tables in MySQL database

We will have two tables FEEDBACK_ITEM and FEEDBACK_FORM in mysql database. First one to store a list of services for which feedback to be taken and other one to store rating for each services for a user. I have a database named 'demo'. So these two tables will be created in this database. If you have an existing database other than demo you can also use it. Just make sure same tables do not exist already. Table structures are given below:

Table1 : FEEDBACK_ITEM

This table stores all items for which feedback is to be taken from user.

Star Rating in PHP and jquery

Table has 2 columns.

  1. id - It is the primary key and auto incremented
  2. descr - Description of the item
Create table script for this table is given below, you can use this code to create the table. You can also download zip later in this topic and get the scripts.

feedback_item.sql

After you create the table, verify if data is inserted correctly, it should have below data in it:

dispkay Star Rating in PHP mysql and jquery

Table2 : FEEDBACK_FORM

This table stores the actual feedback for each item for each user. Customers of the hotel will use this feedback form.

feedback form in php using star rating

Table has 5 columns.

  1. id - It is the primary key and auto incremented
  2. userid - Userid of the user who is participating in feedback. In our example we are not storing userid as login option is not included in this example. If you implement login then you can store logged in userid in this table. I have used client ip address as userid here.
  3. feedback_item_id - id of the feedback item. This id comes from feedback_item table
  4. rating - Rating given by the user, it is stored as integer 0 to 5.
  5. date - Date of feedback given by the user
Create table script for this table is given below, you can use this code to create the table. You can also download the zip file given later in this topic and get the scripts.

feedback_form.sql

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. Note that we have the database connection php program(dbconnect.php) in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

dbconnect.php

I am using mysqli_connect() function which needs 4 parameters.

These four parameters are:

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.
If connection is successful, it will return true, false otherwise. This Boolean value is returned and stored in the $conn variable. We will include this dbconnect.php in other php programs so that we do not need to write it again in the program. For detail database connection understanding please read topic How to Connect to MySQL database in PHP.

Step 3 - Create Feedback Form (index.php)

feedback form in php jquery and mysql using star rating

It selects all feedback items from feedback_item table and in a loop, it displays feedback names and ids (hidden) in a html table. Against each feedback name, it displays a minus symbol (-) for No-Rating and star symbols for star rating. User can not submit the form without selecting rating for all services. See the code for index.php below:

index.php

JavaScript function checkForm() is to validate the form, i.e., if user has missed feedback for any services. This function is written in feedback.js file in js folder.

Note that I am using dynamic id in line 33 (id="item-<?=$item["id"];?>") and line 36 (id="rating<?=$item['id'];?>") to identify each item separately. These ids will be used in jQuery.

Highlighting and selection of stars work using three events onMouseOver, onMouseOut and onClick.

For each event, a JavaScript function is called.
onMouseOver - showStar() function highlights the stars and corresponding text appears on the right side.
onMouseOut - removeStar() function removes a highlight and corresponding text disappears.
onClick - selectStar() function selects a particular star and displays the corresponding text on the right side. It also assigns value (0-5) to hidden rating field. Note that it works exactly same way for both Not-Rated symbol and Star symbols.

Step 4 - Write JavaScript/jQuery (feedback.js)

There are two arrays defined at the beginning, one has all captions like "No Rating", "One Star", "Two Star" up to "Five Star" and other array has all labels like label-default, label-danger etc.

Function removeStar()

removeStar() function simply removes all highlighted stars and no-rating symbol. It also removes the corresponding caption. Once all are removed, it checks if any rating is selected, then it displays the caption.

Function showStar()

This function is called on onMouseover event of star symbol or no-rating symbol. It is called with two parameters; one is the object (the symbol) and other is the id of the item (service name). This function only highlights the corresponding star or no-rating symbol.

Function selectStar()

selectStar() function works the same way as showStar(). Instead of just highlighting, it will select the rating and highlight the stars. It is called on onClick event of the star symbol or No-Rating symbol.

Function checkForm()

This function is called when the form is submitted. You can see in the form tag we have called it on onSubmit event in index.php.

Step 5 - Process form data (process_feedback.php)

Now we write PHP code for form submission. When form is submitted, we need to process the values submitted and insert into database tables accordingly and display the appropriate message.

Check the code below:

process_feedback.php

Here I am using commit and rollback as rows will be inserted one after the other for each feedback item. For user id I am taking remote client address. You can use logged in user id also if you implement login.

We are almost done, we just need to add styles.

Step 6 - Add CSS (style.css)

Let us add below styles. I have already added style.css in index.php.

style.css

You can see various classes which are dynamically added/removed using jQuery, are on the css file. Keep this style.css file in your css folder.

Star Rating in PHP and jqueryTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/feedback. You will see the home page displayed as below:

feedback form in php jquery using star rating

Test if rating and captions are showing correctly when you rollover the mouse on any star. Then give rating and submit the form. Form should be submitted successfully and you will see message displayed on the screen. Now run index.php again and try to submit the rating to check if cookie is correctly being written. It should not allow to submit.

PHP Star Rating System with JavaScript jquery and mysql

Create Review Rating Page in PHP with jqueryImportant Note

  1. To prevent multiple submission of the same feedback, I have used cookie here. Even though, one can remove cookies and submit again. However, you can always use user login id to submit the feedback, so that one user can submit once only.

Star Rating System Using PHP and JavaScriptDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

Build PHP MySQL 5 Star Rating System using jQueryConclusion

In this topic I have explained how you can use a form with star rating to submit feedback. I have given example of the hotel services; it can be rating for a product or someone's performance. You can change it to meet your requirements and use it for any similar application. Hope it will be useful for you.