Login module using jsp, servlet, JQuery, bootstrap by santosh sir
index.jsp
<!-- Add a Navbar -->
<!-- Add a navbar at the top of the page that collapses on smaller screens: -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* navigation bar css */
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
/* navigation bar css */
#panel{
padding: 5px;
text-align: center;
background-color:#f4511e;
border: solid 1px #c3c3c3;
float: ;
margin-right:px;
}
#panel {
padding: 50px;
display:none;
}
</style>
</head>
<body>
<!-- adding navigation bar -->
<div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about" title="login" data-toggle="popover" data-placement="bottom" data-content="content">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#contact" id="flip" >LOGIN</a></li>
</ul>
</div>
</div>
</nav>
<div id="panel">
<!-- form -->
<div class="container" style="float: left">
<form class="form-inline" role="form">
<form style="width:500px; float: left;" >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
</div>
</div>
</div>
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>
<!-- adding navigation bar -->
<!-- java script for popover -->
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
</body>
</html>
loginServlet.java
