Cara membuat rating bintang dengan php dan mysql

| 2:32 PM | AJax, Codeigniter, CSS, CSS3, HTML, HTML5, Javascript, JQuery, MySQL, PHP, Web Development |

Star Rating adalah system penilaian kualitas dengan menggunakan 5 bintang untuk mengetahui sebuah artikel/berita. Penilaian merupakan salah satu kriteria yang paling penting untuk menilai sesuatu apakah menarik, bermanfaat atau malah sebaliknya, Setiap orang memiliki kebebasan untuk memberikan pendapat dalam hal ini dengan memberikan bintang mulai dari bintang 1 sampai 5 dan dan biasanya digunakan untuk mengetahui respon dari pengunjung. didalam tutorial ini saya akan membuat Star Rating sistem Dinamis dengan Jquery Ajax di Codeigniter dan database MySQL.

Cara kerja Star Rating ini sangatlah sederhana yaitu :
Pada saat user membuka halaman maka akan muncul list berita + 5 Bintang untuk memberikan Rating, selanjutnya jika bintang diklik maka akan langsung di proses atau disimpan ke database sesuai dengan urutan bintang yang diklik dengan bantuan jQuery Ajax.

Gambar 1

oke berikut langkah-langkahnya :
Buat Database artikel terlebih dahulu dan insert beberapa artikel/berita :

CREATE TABLE `berita` (
  `id_berita` int(5) NOT NULL,
  `judul` varchar(100) COLLATE latin1_general_ci NOT NULL,
  `isi_berita` longtext CHARACTER SET latin1 NOT NULL,
  `tanggal` date NOT NULL,
  `rating` int(3) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
ALTER TABLE `berita` ADD PRIMARY KEY (`id_berita`);

Selanjutnya Buat File “controllers/Berita.php” untk menampilkn Berita :

model_app->view('berita');
		$this->load->view('view_berita',$data);
	}

	function tambah_rating(){
		if ($this->input->post('rating')!=''){
	        $data = array('rating'=>$this->input->post('rating'));
	        $where = array('id_berita' => $this->input->post('id'));
		$this->model_app->update('berita', $data, $where);
		}
	}
}

Buat “models/Model_app.php” untuk menampilkan dan Update rating Berita..

db->get($table);
    }
 
    public function update($table, $data, $where){
        return $this->db->update($table, $data, $where); 
    }
}

Buat “views/view_berita.php” untuk interface halaman list Berita..
// Kode Menampilkan List Berita dan Bintang

Semua Berita
	result_array() as $row) {
		echo "
$row[judul]
				

				
";
					  	for($i=1; $i<=5; $i++) {
						  if($i <= $row["rating"]){ $selected = "selected"; }else{ $selected = ""; }
					  		echo "
★
"; 
					  	}
					echo "

				

			  
$row[isi_berita]
";
	}
	?>

// CSS Mempercantik tampilan List Berita (Tempatkan di dalam tag head)

#body{ width:60%;}
h2{ color: #000; background-color: #cecece; border-bottom: 1px solid #D0D0D0; font-size: 19px; font-weight: bold; margin: 0 0 14px 0; padding: 14px 15px 10px 15px; }
h2{ color: green; border-bottom: 1px solid #D0D0D0; font-size: 19px; font-weight: bold; margin: 0; padding: 0}
p{ margin:0px 0px 20px 0px;}
ul{ margin:0; padding:0; }
li{ cursor:pointer; list-style-type: none; display: inline-block; color: #F0F0F0; text-shadow: 0 0 1px #666666; font-size:20px; }
.highlight, .selected { color:#F4B30A; }

// Kode JavaScript untuk proses star rating system

Seperti yang dilihat pada views di atas untuk proses add rating mengarah ke Controllers “berita/tambah_rating” dan selanjutnya dikirimkan ke model, jadi cukup mudah bukan, untuk fitur star rating ini akan sangat berguna sekali bagi anda untuk mengetahui respon dari pengunjung sebuah web terhadap artikel atau produknya.

semoga artikel ini bermanfaat dan sampai jumpa lagi pada artikel menarik lainnya, untuk filenya bisa anda download pada link download dibawah ini salam,. 🙂
DEMO DOWNLOAD

About The Author

Robby Prihandaya

Robby is an Engineer, Entrepreneur, Thinker and Founder of phpmu.com programming blog. a very popular web development site, Lives in Padang - Indonesia