Showing posts with label jsp. Show all posts
Showing posts with label jsp. Show all posts

Wednesday, 14 August 2013

Youtube like rating system in jsp using jquery

// siddhu vydyabhushana // 26 comments
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>
javascript code:
$(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
Read More

Monday, 12 August 2013

submit a form using jquery, jsp without refreshing page

// siddhu vydyabhushana // 14 comments

Hai the readers of javatyro, today am going to explain the form submit in webpages without refresh or without changing the page . jQuery is a google library it has a capability to change the values on live change using $("slector").live() . i hope you will like the tutorial..
   
                                             DOWNLOAD TUTORIAL:click here 

Database  :

Validations using jquery
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
	var username = $("#username").val();
	var password = $("#password").val();
	var gender = $("#gender").val();
	     
	
var dataString = 'name='+ name + '&username=' + username + '&password=' + password +
                     '&gender=' + gender;
	if(name=='' || username=='' || password=='' || gender=='')
	{
	$('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
    }
    else
	{
	$.ajax({
	type: "POST",
    url: "ajax-form.jsp",
    data: dataString,
    success: function(){
	$('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
}
});
}
return false;
});
});

ajax-form.jsp
<%@page import="java.sql.*"%>
<%
if(request.getParameter("name")!=null)
{
String name=request.getParameter("name");
String username=request.getParameter("username");
String password=request.getParameter("password");
String gender=request.getParameter("gender");

try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:form");
Statement stmt=con.createStatement();
stmt.executeQuery("insert into login values('"+name+"','"+username+"',
'"+password+"','"+gender+"')");
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>
your likes and shares makes me more happy like my page in fb
Read More

Saturday, 10 August 2013

Fllicker like title edit using java

// siddhu vydyabhushana // 28 comments
Flicker like title edit using java, jquery, jsp, is quite little bit confusing so i am interested to teach you something which i know, i hope you like it.same post you can find it in 9lessons in php













                     Download: click here
java script code:
$(function() 
{

$("h4").click(function() 
{
var titleid = $(this).attr("id");
var sid=titleid.split("title");
var id=sid[1];
var dataString = 'id='+ id ;
var parent = $(this).parent();
$(this).hide();
$("#formbox"+id).show();
return false;
});
 
$(".save").click(function() 
{
var A=$(this).parent().parent();
var X=A.attr('id');
var d=X.split("formbox");
var id=d[1];
var Z=$("#"+X+" input.content").val();
var dataString = 'id='+ id +'&title='+Z ;
$.ajax({
type: "POST",
url: "imageajax.jsp",
data: dataString,
cache: false,
success: function(data)
{
A.hide(); 
$("#title"+id).html(Z); 
$("#title"+id).show(); 
}
});
return false;
});
$(".cancel").click(function() 
{
var A=$(this).parent().parent();
var X= A.attr("id");
var d=X.split("formbox");
var id=d[1];
var parent = $(this).parent();
$("#title"+id).show();
A.hide();
return false;
}); 
});
css code:
#container
{
margin:0 auto;
width:900px;
font-family:Arial, Helvetica, sans-serif;

}
td
{
width:100px;
}
h4
{
margin:0px;
padding:0px;
}
h4:hover
{
background-color:#ffffcc;
}
.save
{
background-color:#cc0000;
color:#fff;
padding:4px;
font-size:11px;
border:solid 1px #cc0000;
text-weight:bold;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
.cancel
{
background-color:#dedede;
color:#333;
padding:4px;
font-size:11px;
border:solid 1px #dedede;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
database images

 
imageajax.jsp:
<%@page import="java.sql.*"%>
<%
if(request.getParameter("id")!=null)
{
int id=Integer.parseInt(request.getParameter("id"));
String title=request.getParameter("title");
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:flicker");
Statement stmt=con.createStatement();
stmt.executeQuery("update images set title='"+title+"' where id="+id+" ");
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>
databse after update:


your likes, shares make me more happy
 
Read More

Wednesday, 7 August 2013

Facebook like Autosuggestion with jQuery, Ajax and JAVA

// siddhu vydyabhushana // 12 comments
Facebook like auto suggestion with jquey, ajax with jsp also developed by 9lessons in php i never found this tutorial in java o jasp anywhere and i got many requests from users who are reading frequently.I lhope you like it.Automatically  based on the query you search the values will be listed.

  
                           Download Script:   Download File



  
Database: Actually i used ms access to connect with jsp,if you use mysql or oracle below code useful
CREATE TABLE test_user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
index.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;

if(searchbox=='')
{
}
else
{

$.ajax({
type: "POST",
url: "search.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#display").html(html).show();
	
	
	}
});
}return false;    


});
});

jQuery(function($){
   $("#searchbox").Watermark("Search");
   });
</script>
Search.jsp: it displays results
<%@page import ="java.sql.*"%>
<%
if(request.getParameter("searchword")!=null)
{
String q=request.getParameter("searchword");
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:auto");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from test_user_data where fname like '%"+q+"%' or lname like '%"+q+"%'  ");
while(rs.next())
{
String fname=rs.getString(2);
String lname=rs.getString(3);
String img=rs.getString(5);
String country=rs.getString(4);
%>
<div class="display_box" align="left">
<img src="user_img/<%=img%>" style="width:25px; float:left; margin-right:6px" /><%=fname%> <%=lname%><br/>
<span style="font-size:9px; color:#999999"><%=country%></span></div>
<%
}
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
else
{
out.println("wrong");
}
%>
Css code: for simple and nice user interface
body
{
font-family:"Lucida Sans";
}
*
{
margin:0px
}
#searchbox
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#display
{
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
#shade
{
background-color:#00CCFF;
}
Read More

Tuesday, 6 August 2013

Live Table Edit with Jquery ,Ajax and Java

// siddhu vydyabhushana // 5 comments
Very thankful to srinivas tamada for writing this post already he did live table edit in php but now am going to teach you how to do this in pure java.i hope you like it .Lets start...

                            Download this code:  click here
Database:
i took a single table named fullnames columns is,firstname,lastname



CREATE TABLE fullnames
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);

wireframe:
index.jsp : For displaying records



<table width="100%">
<tr class="head">
<th>First Name</th><th>Last Name</th>
</tr>
<%
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:edit","","");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from fullnames");
int i=1;
while(rs.next())
{
int id=rs.getInt(1);
String firstname=rs.getString(2);
String lastname=rs.getString(3);
if(i%2==0)
{
%>
<tr id="<%=id%>" class="edit_tr">
<% 
} 
else 
{ %>
<tr id="<%=id%>" bgcolor="#f2f2f2" class="edit_tr">
<% } %>
<td width="50%" class="edit_td">
<span id="first_<%=id%>" class="text"><%=firstname %></span>
<input type="text" value="<%=firstname%>" class="editbox" id="first_input_<%=id%>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<%=id%>" class="text"><%=lastname%></span> 
<input type="text" value="<%=lastname%>"  class="editbox" id="last_input_<%=id %>"/>
</td>
</tr>

<%
i++;
}
con.close();
}
 catch(Exception e)
 {
 out.println(e);
 }
%>

</table>

Javascript Code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />');


if(first.length && last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});

$(".editbox").mouseup(function() 
{
return false
});

$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});
</script>
css code:
 
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
I connected jsp to ms access database after downloading this code you have to set data source name path and place it in webapps folder of apache run it . even though if have any doubts comment here i will clarify it. mail me vydyas@gmail.com
Read More

Monday, 5 August 2013

JSP EBOOK: Free download core jsp ebook

// siddhu vydyabhushana // 11 comments
What is jsp?
Java Server Pages which is a subpart of java useful to make webpage dynamic.Its supports all things supported by the java. so i love it. Many of professors wrote many books but this book specially emphasize
the core topics of jsp.

Author : DAMON HOUGLAND
             AARON TAVISTOCK

Book Name: core JSP foreward by Cay s.HARSHMAN

Features:
1.The experience developers guide to java server pages development.
2.Database support ,xml support, JavaBeans Integration much more..
3.Architecture jsp applications.
4. Several complete jsp applications



                                              Download Book Click Here
Read More

Monday, 22 July 2013

Difference between JSP include directive and JSP include action

// siddhu vydyabhushana // 4 comments
  • <%@ include file=”filename” %> is the JSP include directive.
    At JSP page translation time, the content of the file given in the include directive is ‘pasted’ as it is, in the place where the JSP include directive is used. Then the source JSP page is converted into a java servlet class. The included file can be a static resource or a JSP page. Generally JSP include directive is used to include header banners and footers.
    The JSP compilation procedure is that, the source JSP page gets compiled only if that page has changed. If there is a change in the included JSP file, the source JSP file will not be compiled and therefore the modification will not get reflected in the output.
  • <jsp:include page=”relativeURL” /> is the JSP include action element.
    The jsp:include action element is like a function call. At runtime, the included file will be ‘executed’ and the result content will be included with the soure JSP page. When the included JSP page is called, both the request and response objects are passed as parameters.
    If there is a need to pass additional parameters, then jsp:param element can be used. If the resource is static, its content is inserted into the calling JSP file, since there is no processing needed.
Read More

How to pre-compile JSP?

// siddhu vydyabhushana // Leave a Comment
Add jsp_precompile as a request parameter and send a request to the JSP file. This will make the jsp pre-compile. Why it is mentioned as pre compile instead of compilation is that, the request is not served. That is, the JSP will not be executed and the request will not be serviced. Just it will be compiled and the implementation class will be generated.
The jsp_precompile parameter may have no value, or may have values true or false. It should not have any other values like ?jsp_precompile=yes – this will result in HTTP error 500.
So the example for query strings to pre compile jsp files are
?jsp_precompile
?jsp_precompile=true
?jsp_precompile=false
?foobar=foobaz&jsp_precompile=true
?foobar=foobaz&jsp_precompile=false

How to do pre compile for a bunch of JSP files? for all JSPs in a folder or application?

There are no special features available for this in the JSP specification. But the application servers (JSP containers) provide methods to do this on their own way. At the end of this tutorial we will see how to pre compile JSP files for Apache Tomcat 6.
But if you want to pre compile in server independent manner you have to use jsp_precompile request parameter and no other option available. To do it for the whole application, you can custome write a servlet or jsp file which will raise a request for all the JSPs available with jsp_precompile added as parameter.

Following JSP will pre compile all JSPs available in a folder and its subfolder:

<%@ page import="javax.servlet.*,javax.servlet.http.*,javax.servlet.jsp.* "%>
<%@ page import="java.util.Set,java.util.Iterator,java.io.IOException"%>
<%!
  private void preCompileJsp(PageContext pageContext, JspWriter out,
   HttpServletRequest request, HttpServletResponse response, String uripath)
   throws IOException, ServletException {
 
     // getting jsp files list for pre compilation
     Set jspFilesSet = pageContext.getServletContext().getResourcePaths(uripath);
     for (Iterator jspFilesSetItr = jspFilesSet.iterator(); jspFilesSetItr.hasNext();) {
         String uri = (String) jspFilesSetItr.next();
         if (uri.endsWith(".jsp")) {
             RequestDispatcher rd = getServletContext().getRequestDispatcher(uri);
             if (rd == null) throw new Error(uri +" - not found");
             rd.include(request, response);
         }
         else if (uri.endsWith("/")) {
             preCompileJsp(pageContext, out, request, response, uri);
         }
     }
   }
%>
<html><head><title>Pre Compile JSP Files</title></head>
<body>
<%
  HttpServletRequest req = new HttpServletRequestWrapper(request) {
      public String getQueryString() {
          // setting the pre compile parameter
          return "jsp_precompile";
      };
  };
  preCompileJsp(pageContext, out, req, response, "/");
%>
JSP files Pre Compile Completed.
</body></html>
How to pre compile JSP from command line?
Yes you can compile JSP files from command line. There are no specific tool promoted or authored by JSP specification or SUN. The right choice is to depend on application server for which we are compiling application or JSP the JSP files. Logic is to fork the JSP compiler mostly JSPC from command prompt using a utility like ANT.
I will give an example for the popular Apache Tomcat using ANT tool to pre compile JSP files. Important step is to write the ANT build script which will take through the compilation process. Using this ant script, either you can pre compile JSP files from command prompt or you can integrate the step of pre compiling JSP files into the build process which creates the distributable (WAR) file of your application.

Apache Tomcat 6.0 uses Eclipse JDT Java compiler to perform JSP java source code compilation.

<project name="Webapp Precompilation" default="all" basedir=".">
   <import file="${tomcat.home}/bin/catalina-tasks.xml"/>
   <target name="jspc">
<jasper
             validateXml="false"
             uriroot="${webapp.path}"
             webXmlFragment="${webapp.path}/WEB-INF/generated_web.xml"
             outputDir="${webapp.path}/WEB-INF/src" />
  </target>
  <target name="compile">
    <mkdir dir="${webapp.path}/WEB-INF/classes"/>
    <mkdir dir="${webapp.path}/WEB-INF/lib"/>
    <javac destdir="${webapp.path}/WEB-INF/classes"
           optimize="off"
           debug="on" failonerror="false"
           srcdir="${webapp.path}/WEB-INF/src"
excludes="**/*.smap">
      <classpath>
        <pathelement location="${webapp.path}/WEB-INF/classes"/>
        <fileset dir="${webapp.path}/WEB-INF/lib">
          <include name="*.jar"/>
        </fileset>
        <pathelement location="${tomcat.home}/lib"/>
        <fileset dir="${tomcat.home}/common/lib">
          <include name="*.jar"/>
        </fileset>
        <fileset dir="${tomcat.home}/bin">
          <include name="*.jar"/>
        </fileset>
      </classpath>
      <include name="**" />
      <exclude name="tags/**" />
    </javac>
  </target>
  <target name="all" depends="jspc,compile">
  </target>
  <target name="cleanup">
    <delete>
        <fileset dir="${webapp.path}/WEB-INF/src"/>
        <fileset dir="${webapp.path}/WEB-INF/classes/org/apache/jsp"/>
    </delete>
  </target>
</project>
Use the above ant script and execute the following command to pre compile JSP files from command prompt:
$ANT_HOME/bin/ant -Dtomcat.home=<$TOMCAT_HOME> -Dwebapp.path=<$WEBAPP_PATH>

The benefits of pre-compiling a JSP page:

It removes the start-up lag that occurs when a container must translate a JSP page upon receipt of the first request.
Since the Java compiler is not needed, there will be a reduction of the footprint needed to run a JSP container.
In include directives, tag library references, and translation-time actions used in custom actions, compilation of a JSP page provides resolution of relative URL specifications.
Read More