How To Make 5 Star Rating System in Codeigniter With JQuery, Ajax,PHP and MySQL

In this post we learn how to create a 5 star rating system in Codeigniter using the Ajax jQuery and MySQL databases. With the five-star rating, the user can give his or her opinion about a product, a service or a business unit that is useful or not. The user can send a live review for the product and on the website you will get the live result of the result on the website without updating the website. Because here we are going to use Ajax with the Codeigniter framework to develop the Star Rating application. This function is very common among most e-commerce providers who want to sell your product online. Depending on the rating, the rating of multiple users can give the user an idea of which product is good.

In this system, the user can evaluate the business unit or the product based on the quality of his product or service, the advantages of the product, etc. Therefore, this qualification is useful for another user who wants to use a particular business area service or buy a product that is based on another user who is reviewing or evaluating the idea of the new user in relation to the product listed on the e-commerce website ,

In this tutorial, we use pure JQuery and Ajax code to evaluate stars in Codeigniter. Here we didn't use a jQuery plugin to implement the star rating system in Codeigniter. This is a dynamic star rating system where the rating is shown in the average rating of all users that we did in Codeigniter with Ajax jQuery. If you click on a specific star number in this system, the Ajax request was sent to the codeigniter controller, which inserts the qualification data of a specific product in the MySQL table. This is a simple star rating system script based on Ajax Codeigniter that will help you develop the 5 star rating feature in your Codeigniter web application. Below is the complete step-by-step process for creating star ratings in Codeigniter using Ajax jquery and MySQL.

Step 1 - Create Table

First we have to create a table in the MySQL database where we have to do business and qualify. We will do this two table to build a dynamic star rating system.

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `business`
--

CREATE TABLE `business` (
  `id` int(11) NOT NULL,
  `business_name` varchar(300) NOT NULL,
  `address` text NOT NULL,
  `product` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `business`
--

INSERT INTO `business` (`id`, `business_name`, `address`, `product`) VALUES
(1, 'Fog Harbor Fish House', 'Fisherman\'s Wharf, North Beach/Telegraph Hill\r\nPier 39\r\nSan Francisco, CA 94133\r\nPhone number (415) 421-2442', 'Seafood, Bars'),
(2, 'The House', 'North Beach/Telegraph Hill\r\n1230 Grant Ave\r\nSan Francisco, CA 94133\r\nPhone number (415) 986-8612', 'Asian Fusion'),
(3, 'Barnzu', 'Tenderloin\r\n711 Geary St\r\nSan Francisco, CA 94109\r\nPhone number (415) 525-4985', 'Korean, Tapas Bars'),
(4, 'Brenda French Soul Food', 'Tenderloin\r\n652 Polk St\r\nSan Francisco, CA 94102\r\nPhone number (415) 345-8100', 'Breakfast & Brunch, French, Soul Food'),
(5, 'The Salzburg', 'Russian Hill, North Beach/Telegraph Hill\r\n663 Union St\r\nSan Francisco, CA 94133', 'Austrian'),
(6, 'Marufuku Ramen', 'Lower Pacific Heights, Japantown\r\n1581 Webster St\r\nSan Francisco, CA 94115\r\nPhone number (415) 872-9786', 'Seafood, Seafood Markets, Live/Raw Food');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `business`
--
ALTER TABLE `business`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `business`
--
ALTER TABLE `business`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- Table structure for table `rating`
--

CREATE TABLE `rating` (
  `rating_id` int(11) NOT NULL,
  `business_id` int(11) NOT NULL,
  `rating` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `rating`
--

INSERT INTO `rating` (`rating_id`, `business_id`, `rating`) VALUES
(1, 6, 3),
(2, 6, 5),
(3, 6, 3),
(4, 5, 3),
(5, 5, 2),
(6, 5, 5),
(7, 5, 5),
(8, 5, 5),
(9, 5, 1),
(10, 3, 5),
(11, 4, 3),
(12, 4, 5),
(13, 4, 3),
(14, 4, 5),
(15, 1, 3),
(16, 1, 1),
(17, 1, 2),
(18, 1, 5),
(19, 1, 5),
(20, 2, 4);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `rating`
--
ALTER TABLE `rating`
  ADD PRIMARY KEY (`rating_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `rating`
--
ALTER TABLE `rating`
  MODIFY `rating_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;

Step 2 - Database Connection

In the second step we have to establish the database connection as part of Codeigniter, for this we have to go to application / config / database.php and define the details of the database configuration in this file Mysql.

<?php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'testing',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
);


?>

Step 3 – Controllers

Then we have to create the driver file Star_rating.php in the folder application / controller. In this class we created the following method to process the HTTP request.

__construnct (): This magical method executes this block of code every time an object of this class is created.


index () - This is the root method of this controller class. If you have to enter base_url / star_rating in the browser, this method is executed, with which the file application / views / star_raing.php is loaded as output in the browser.

fetch (): This method shows all data of the business area on the website with star rating. This method received Ajax's request to display all details of the star-rated product on the website.

insert (): This method inserts qualification data using the model method. This method also received Ajax's request to insert user rating data into the MySQL table.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Star_rating extends CI_Controller {

 public function __construct()
 {
  parent::__construct();
  $this->load->model('star_rating_model');
 }

 function index()
 {
  $this->load->view('star_rating');
 }

 function fetch()
 {
  echo $this->star_rating_model->html_output();
 }

 function insert()
 {
  if($this->input->post('business_id'))
  {
   $data = array(
    'business_id'  => $this->input->post('business_id'),
    'rating'   => $this->input->post('index')
   );
   $this->star_rating_model->insert_rating($data);
  }
 }

}
?>

Step 4 – Models

Under Codeigniter, the model class was mainly used to perform all operations in the MySQL database. This class method is carried out by the controller class method. In this class we have the make make following method for the star rating system.

get_business_data (): This method returns all data from the business table.


get_business_rating ($ business_id): This method returns the average rating of the company based on the argument $ business_id.

html_output () - This method converts all commercial data with classification in HTML format. This method was called the fetch method of the Star_rating controller class.

insert_rating (): This method inserts the user's rating data into the MySQL rating table. This method was called by the insert () method of the Star_rating controller.

<?php
class Star_rating_model extends CI_Model
{
 function get_business_data()
 {
  $this->db->order_by('id', 'DESC');
  return $this->db->get('business');
 }

 function get_business_rating($business_id)
 {
  $this->db->select('AVG(rating) as rating');
  $this->db->from('rating');
  $this->db->where('business_id', $business_id);
  $data = $this->db->get();
  foreach($data->result_array() as $row)
  {
   return $row["rating"];
  }
 }

 function html_output()
 {
  $data = $this->get_business_data();
  $output = '';
  foreach($data->result_array() as $row)
  {
   $color = '';
   $rating = $this->get_business_rating($row["id"]);
   $output .= '
   <h3 class="text-primary">'.$row["business_name"].'</h3>
   <ul class="list-inline" data-rating="'.$rating.'" title="Average Rating - '.$rating.'">
   ';
   for($count = 1; $count <= 5; $count++)
   {
    if($count <= $rating)
    {
     $color = 'color:#ffcc00;';
    }
    else
    {
     $color = 'color:#ccc;';
    }

    $output .= '<li title="'.$count.'" id="'.$row['id'].'-'.$count.'" data-index="'.$count.'" data-business_id="'.$row["id"].'" data-rating="'.$rating.'" class="rating" style="cursor:pointer; '.$color.' font-size:24px;">&#9733;</li>';
   }
   $output .= '</ul>
   <p>'.$row["address"].'</p>
   <label style="text-danger">'.$row["product"].'</label>
   <hr />
   ';
  }
  echo $output;
 }

 function insert_rating($data)
 {
  $this->db->insert('rating', $data);
 }
}

?>

Step 5 – Views

The code file was used to display the HTML output on the website under Codeigniter. In this file we used the jQuery function to upload commercial data to the website. In the jQuery function, you used the Ajax requirement to display business and qualification data on the website. In the same way to insert qualification data, we also use Ajax here. Therefore, all operations are carried out without updating the website. We used the jQuery code for the star rating effect. This is all of the source code that you can find below.

<html>
<head>
    <title>How To Make  5 Star Rating  System in Codeigniter With JQuery, Ajax,PHP and MySQL </title>
    
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
</head>
<body>
 <div class="container box">
  <h3 align="center">How To Make  5 Star Rating  System in Codeigniter With JQuery, Ajax,PHP and MySQL </h3>
  <br />
  <span id="business_list"></span>
 </div>
</body>
</html>

<script>
$(document).ready(function(){

 load_data();

 function load_data()
 {
  $.ajax({
   url:"<?php echo base_url(); ?>star_rating/fetch",
   method:"POST",
   success:function(data)
   {
    $('#business_list').html(data);
   }
  })
 }

 $(document).on('mouseenter', '.rating', function(){
  var index = $(this).data('index');
  var business_id = $(this).data('business_id');
  remove_background(business_id);
  for(var count = 1; count <= index; count++)
  {
   $('#'+business_id+'-'+count).css('color', '#ffcc00');
  }
 });

 function remove_background(business_id)
 {
  for(var count = 1; count <= 5; count++)
  {
   $('#'+business_id+'-'+count).css('color', '#ccc');
  }
 }

 $(document).on('click', '.rating', function(){
  var index = $(this).data('index');
  var business_id = $(this).data('business_id');
  $.ajax({
   url:"<?php echo base_url(); ?>star_rating/insert",
   method:"POST",
   data:{index:index, business_id:business_id},
   success:function(data)
   {
    load_data();
    alert("You have rate "+index +" out of 5");
   }
  })
 });

 $(document).on('mouseleave', '.rating', function(){
  var index = $(this).data('index');
  var business_id = $(this).data('business_id');
  var rating = $(this).data('rating');
  remove_background(business_id);
  for(var count = 1; count <= rating; count++)
  {
   $('#'+business_id+'-'+count).css('color', '#ffcc00');
  }
 });

});
</script>

This is the complete step-by-step guide to creating a star rating system in Codeigniter with Ajax JQuery. Then you can learn something new as part of Codeigniter. If you want to see the demo of this post, you can find the following demo link.