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

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.

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.

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.

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.

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:

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 using MySQLi and PDO.

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:

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:

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.