Here i created a simple html application which used jQuery for displaying signup and login page with toggle effect and Side Effect.And also ajax for dynamic validation.
Lets see how we can create it through the below tutorial.........
Before you start jQuery you can use jQuery in two different ways
1.Downloading jQuery from http://jquery.com/download/ and refer it in <head> tag like this
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
2.Using google CDN or Microsoft CDN
Google CDN
-----------------
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
Microsoft CDN
------------------
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
</script>
</head>
If you are using the CDN means you need a working internet connection to perform jQuery.
Design a form
--------------
<body>
<div id="main">
<form method="post" action="login.jsp" name="home">
<h2 id="l">Login</h2>
<h2 id="s">Sign Up</h2>
<div id="frm">
<h1 style="color: white;">Users Login</h1>
User Name :<input style="margin-left: 15px;" type="text" name="username" value="" /><br/><br/>
Password :<input style="margin-left: 27px;" type="password" name="password" value="" />
<input type="submit" class="b" value="Login" name="submit" onclick="return logfield()"/>
</div>
</form>
<form method="get" action="signup.jsp" name="signup" onsubmit="return regfield()">
<div id="frm1">
<h1 style="color: white;">Sign Up</h1>
User Name :<input style="margin-left: 15px;" type="text" name="susername" value="" /><br/><br/><div id="chk" style="color: #ff9999;font-size: 30px;"></div>
Password :<input style="margin-left: 27px;" type="password" name="spassword" value="" onfocus="user(susername.value)"/><br/><br/>
Re-password :<input style="margin-left: 5px;" type="password" name="repassword" value="" /><br/><br/>
E-mail :<input style="margin-left: 48px;" type="email" name="email" value="" /><br/><br/>
Mobile :<input style="margin-left: 47px;" type="text" name="mobile" /><br/><br/>
<input type="submit" class="b" value="Submit" name="submit" />
</div>
</form>
</div>
<div style="color: white;font-size: 30px;">
</div>
</body>
In Scrip tag you can include the jQuery like this
<script>
$(document).ready(function(){
$("#l").click(function(){
$("#frm").toggle("slow");
$("#frm1").slideUp("slow");
});
});
$(document).ready(function(){
$("#s").click(function(){
$("#frm").slideUp("slow");
$("#frm1").slideDown("slow");
});
});
</script>
'#l' is the reference of heading Login
Here '#frm' is used for naming the form that means it is a reference....
Ajax Code
----------------
<script type="text/javascript">
function user(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("chk").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("chk").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","user.jsp?q="+str,true);
xmlhttp.send();
}
</script>
Here we are sending our text through url with the help of variable 'str'
and we are doing the database operation in 'user.jsp' for checking the availability.
user.jsp
------------
<%@page language="java" import="java.sql.*" %>
<%! ResultSet rs=null;
Connection connection;
Statement statement;
int f=0;
%>
<% String value = request.getParameter("q");
try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123");
statement=connection.createStatement();
rs=statement.executeQuery("select * from login");
while(rs.next())
{
if(value.equalsIgnoreCase(rs.getString("username")))
{
f=1;
}
else
{
f=0;
}
}
if(f==1)
{
out.println("User Exist");
}
else
{
out.println("User Available");
}
}
catch(SQLDataException e)
{
out.println(e);
}
%>
Lets see how we can create it through the below tutorial.........
Before you start jQuery you can use jQuery in two different ways
1.Downloading jQuery from http://jquery.com/download/ and refer it in <head> tag like this
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
2.Using google CDN or Microsoft CDN
Google CDN
-----------------
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
Microsoft CDN
------------------
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
</script>
</head>
If you are using the CDN means you need a working internet connection to perform jQuery.
Design a form
--------------
<body>
<div id="main">
<form method="post" action="login.jsp" name="home">
<h2 id="l">Login</h2>
<h2 id="s">Sign Up</h2>
<div id="frm">
<h1 style="color: white;">Users Login</h1>
User Name :<input style="margin-left: 15px;" type="text" name="username" value="" /><br/><br/>
Password :<input style="margin-left: 27px;" type="password" name="password" value="" />
<input type="submit" class="b" value="Login" name="submit" onclick="return logfield()"/>
</div>
</form>
<form method="get" action="signup.jsp" name="signup" onsubmit="return regfield()">
<div id="frm1">
<h1 style="color: white;">Sign Up</h1>
User Name :<input style="margin-left: 15px;" type="text" name="susername" value="" /><br/><br/><div id="chk" style="color: #ff9999;font-size: 30px;"></div>
Password :<input style="margin-left: 27px;" type="password" name="spassword" value="" onfocus="user(susername.value)"/><br/><br/>
Re-password :<input style="margin-left: 5px;" type="password" name="repassword" value="" /><br/><br/>
E-mail :<input style="margin-left: 48px;" type="email" name="email" value="" /><br/><br/>
Mobile :<input style="margin-left: 47px;" type="text" name="mobile" /><br/><br/>
<input type="submit" class="b" value="Submit" name="submit" />
</div>
</form>
</div>
<div style="color: white;font-size: 30px;">
</div>
</body>
In Scrip tag you can include the jQuery like this
<script>
$(document).ready(function(){
$("#l").click(function(){
$("#frm").toggle("slow");
$("#frm1").slideUp("slow");
});
});
$(document).ready(function(){
$("#s").click(function(){
$("#frm").slideUp("slow");
$("#frm1").slideDown("slow");
});
});
</script>
'#l' is the reference of heading Login
Here '#frm' is used for naming the form that means it is a reference....
Ajax Code
----------------
<script type="text/javascript">
function user(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("chk").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("chk").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","user.jsp?q="+str,true);
xmlhttp.send();
}
</script>
Here we are sending our text through url with the help of variable 'str'
and we are doing the database operation in 'user.jsp' for checking the availability.
user.jsp
------------
<%@page language="java" import="java.sql.*" %>
<%! ResultSet rs=null;
Connection connection;
Statement statement;
int f=0;
%>
<% String value = request.getParameter("q");
try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123");
statement=connection.createStatement();
rs=statement.executeQuery("select * from login");
while(rs.next())
{
if(value.equalsIgnoreCase(rs.getString("username")))
{
f=1;
}
else
{
f=0;
}
}
if(f==1)
{
out.println("User Exist");
}
else
{
out.println("User Available");
}
}
catch(SQLDataException e)
{
out.println(e);
}
%>
No comments:
Post a Comment