How To Create Youtube like Rating Using PHP/MySQL

Submitted by argie on Wednesday, January 16, 2013 - 11:48.
Hi everyone, this tutorial will teach you on how to create a youtube like rating or likes and dislikes rating using php and mysql. To start this tutorial lets follow the steps bellow to create this easy and nice code.

Step1: Create Our Database and its Table:

First step is to create our table in database to store the likes and dislikes votes. To create a database: 1. Open phpmyadmin 2. Click create table and name it as "database". 3. After creating a database name, click the SQL and paste the below code.
  1. CREATE TABLE IF NOT EXISTS `messages` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `up` int(11) NOT NULL,
  4.   `down` int(11) NOT NULL,
  5.   `messages` varchar(300) NOT NULL,
  6.   PRIMARY KEY (`id`)
  7. ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Step2: Create Our Form:

This Step we will create our form that display our voting process. To create copy the code below and paste it to your editor and save as "index.php".
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>votedemo</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/
  7. ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  8. <script type="text/javascript">
  9. $(document).ready(function()
  10. {
  11. $(".like").click(function()
  12. {
  13. var id=$(this).attr("id");
  14. var name=$(this).attr("name");
  15. var dataString = 'id='+ id + '&name='+ name;
  16. $("#votebox"+id).slideDown("slow");
  17.  
  18. $("#flash"+id).fadeIn("slow");
  19.  
  20. $.ajax
  21. ({
  22. type: "POST",
  23. url: "rating.php",
  24. data: dataString,
  25. cache: false,
  26. success: function(html)
  27. {
  28. $("#flash"+id).fadeOut("slow");
  29. $("#content"+id).html(html);
  30. }
  31. });
  32. });
  33.  
  34.  
  35. });
  36. </script>
  37. <style>
  38.  
  39. body
  40. {
  41. font-family:Arial, Helvetica, sans-serif;
  42. font-size:13px;
  43.  
  44. }
  45. a
  46. {
  47. text-decoration:none
  48. }
  49. a:hover
  50. {
  51. text-decoration:none
  52.  
  53. }
  54. #votebox
  55. {
  56. border:solid 1px #dedede; padding:3px;
  57. display:none;
  58. padding:15px;
  59. width:700px;
  60. -moz-border-radius: 6px;
  61. -webkit-border-radius: 6px;
  62. }
  63. .close
  64. {
  65. color:#333
  66. }
  67.  
  68.  
  69. #greebar
  70. {
  71. float:left;
  72. background-color:#aada37;
  73. border:solid 1px #698a14;
  74. width:0px;
  75. height:12px;
  76. }
  77. #redbar
  78. {
  79. float:left;
  80. background-color:#cf362f;
  81. border:solid 1px #881811;
  82. width:0px;
  83. height:12px;
  84. }
  85.  
  86. #flash
  87. {
  88. display:none;
  89. font-size:10px;
  90. color:#666666;
  91. }
  92. #close
  93. {
  94. float:right; font-weight:bold; padding:3px 5px 3px 5px; border:solid 1px #333;
  95. -moz-border-radius: 6px;
  96. -webkit-border-radius: 6px;
  97. }
  98. h1
  99. {
  100. font-family:'Georgia', Times New Roman, Times, serif;
  101. font-size:36px;
  102. color:#333333;
  103. }
  104. </style>
  105. </head>
  106.  
  107. <body>
  108. <?php
  109. include('db.php');
  110. $result = mysql_query("SELECT * FROM messages ORDER BY id ASC");
  111. while($row = mysql_fetch_array($result))
  112.         {
  113. ?>
  114. <div style="margin:50px">
  115. <?php echo $row['messages'] ?><br>
  116. <a href="#" class="like" id="<?php echo $row['id'] ?>" name="up">Like</a> -- <a href="#" class="like" id="<?php echo $row['id'] ?>" name="down">Dislike</a>
  117. <div id="votebox<?php echo $row['id'] ?>">
  118.  
  119. <div style="height:13px">
  120. </div>
  121. <div id="content<?php echo $row['id'] ?>">
  122.  
  123.  
  124.  
  125. </div>
  126.  
  127. </div>
  128. </div>
  129. <?php
  130. }
  131. ?>
  132. </body>
  133. </html>

Step3: Create Our Database Connection:

Next step is to create a database connection and save it as "db.php". This file is used to connect our form to database. This file serves as a bridge between our form and our database.
  1. <?php
  2. $mysql_hostname = "localhost";
  3. $mysql_user = "root";
  4. $mysql_password = "";
  5. $mysql_database = "database";
  6. $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
  7. or die("Opps some thing went wrong");
  8. mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
  9. ?>

Step4: Writing our script that updates our votes:

Copy the code bellow and save it as "rating.php".
  1. <?php
  2. include("db.php");
  3.  
  4.  
  5. if($_POST['id'])
  6. {
  7. $id=mysql_escape_String($_POST['id']);
  8. $name=mysql_escape_String($_POST['name']);
  9.  
  10.  
  11. mysql_query("update messages set $name=$name+1 where id='$id'");
  12.  
  13.  
  14. $result=mysql_query("select up,down from messages where id='$id'");
  15. $row=mysql_fetch_array($result);
  16. $up_value=$row['up'];
  17. $down_value=$row['down'];
  18. $total=$up_value+$down_value;
  19.  
  20. $up_per=($up_value*100)/$total;
  21. $down_per=($down_value*100)/$total;
  22. ?>
  23. <div style="margin-bottom:10px">
  24. <b>Ratings for this blog</b> ( <?php echo $total; ?> total)
  25. </div>
  26. <table width="700px">
  27.  
  28. <tr>
  29. <td width="30px"></td>
  30. <td width="60px"><?php echo $up_value; ?></td>
  31. <td width="600px"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>
  32. </tr>
  33.  
  34. <tr>
  35. <td width="30px"></td>
  36. <td width="60px"><?php echo $down_value; ?></td>
  37. <td width="600px"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>
  38. </tr>
  39.  
  40. </table>
  41.  
  42. <?php
  43.  
  44. }
  45. ?>
That's it you've been successfully created your youtube like rating system.
Tags
php rating
youtube like rating

Add new comment

About text formats
  • 161 views