How To Create Youtube like Rating Using PHP/MySQL

Submitted by: 
Language: 
Visitors have accessed this post 4176 times.

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


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.