Hi friends today am going to post youtube like rating system in jsp using jquery ,i hope you will like it. youtube is a one of the most famous video storage site many of the developers want to design , develop rating systems like youtube , so i wrote this article.
DOWNLOAD :click here
index.html it contains two links like & dislike . when you click on like $(".selector").slidedown() will be called .
<body> <div style="margin:50px"> <h1><a href="http://javatyro.blogspot.in">javatyro.blogspot.in</a></h1> <a href="#" class="like" id="1" name="up">Like</a> -- <a href="#" class="like" id="1" name="down">Dislike</a> <div id="votebox"> <span id='close'><a href="#" class="close" title="Close This">X</a></span> <div style="height:13px"> <div id="flash">Loading........</div> </div> <div id="content"> </div>
$(document).ready(function()
{
$(".like").click(function()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax
({
type: "POST",
url: "rating.jsp",
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content").html(html);
}
});
});
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
css code:
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
a
{
text-decoration:none
}
a:hover
{
text-decoration:none
}
#votebox
{
border:solid 1px #dedede; padding:3px;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.close
{
color:#333
}
#greebar
{
float:left;
background-color:#aada37;
border:solid 1px #698a14;
width:0px;
height:12px;
}
#redbar
{
float:left;
background-color:#cf362f;
border:solid 1px #881811;
width:0px;
height:12px;
}
#flash
{
display:none;
font-size:10px;
color:#666666;
}
#close
{
float:right; font-weight:bold; padding:3px 5px 3px 5px; border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
h1
{
font-family:'Georgia', Times New Roman, Times, serif;
font-size:36px;
color:#333333;
}
rating.jsp:
<%@page import="java.sql.*"%>
<%
if(request.getParameter("id")!=null)
{
int id=Integer.parseInt(request.getParameter("id"));
int val,valb,total=0,up_per=0,down_per=0,up_value=0,down_value=0;
String name=request.getParameter("name");
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:youtube");
if(name.equals("up")==true)
{
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from messages where id="+id+" ");
rs.next();
val=rs.getInt(3)+1;
Statement stmt1=con.createStatement();
stmt1.executeUpdate("update messages set up="+val+" where id="+id+" ");
}
else
{
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from messages where id="+id+" ");
rs.next();
val=rs.getInt(4)+1;
Statement stmt1=con.createStatement();
stmt1.executeUpdate("update messages set down="+val+" where id="+id+" ");
}
Statement stmt2=con.createStatement();
ResultSet rs1=stmt2.executeQuery("select * from messages where id="+id+" ");
rs1.next();
up_value=rs1.getInt(3);
down_value=rs1.getInt(4);
total=up_value+down_value;
up_per=(up_value*100)/total;
down_per=(down_value*100)/total;
%>
<div style="margin-bottom:10px">
<b>Ratings for this blog</b> ( <%=total%> total)
</div>
<table width="700px">
<tr>
<td width="30px"></td>
<td width="60px"><%=up_value %></td>
<td width="600px"><div id="greebar" style="width:<%=up_per %>%"></div></td>
</tr>
<tr>
<td width="30px"></td>
<td width="60px"><%=down_value %></td>
<td width="600px"><div id="redbar" style="width:<%=down_per%>%"></div></td>
</tr>
</table>
<%
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>
Your like and shares make me more happy thanq....
database image:
DOWNLOAD :click here
