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.
Below is a screenshot of the folder structure and files I am using:
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
Below is the screenshot of the page:
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.
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.
Table has 2 columns.
id - It is the primary key and auto incremented
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.
After you create the table, verify if data is inserted correctly, it should have below data in it:
Table2 : FEEDBACK_FORM
This table stores the actual feedback for each item for each user. Customers of the hotel will use this feedback form.
Table has 5 columns.
id - It is the primary key and auto incremented
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.
feedback_item_id - id of the feedback item. This id comes from feedback_item table
rating - Rating given by the user, it is stored as integer 0 to 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.
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.
I am using mysqli_connect() function which needs 4 parameters.
These four parameters are:
server - in our case it is localhost
userid - we are using root user
password - no password for user root
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)
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:
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.
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.
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.
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.
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.
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:
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.
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.
Test 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:
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.
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.
Download 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.
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.