As of now, We have seen everything related to JSP such as JSP tags, Action tags, Directive cookies, sessions in JSP, and so on. In this article, we will cover the Registration and Login example in JSP.
For a beginner, we will create a Registration and Login page to understand the flow of the JSP page. So, Let’s begin :-). First, we will create a Registration Example, and then we will move on to log in.
Registration Example in JSP
We will be using an MYSQL database, so first create a database registration_form and then create a table register in the database.
mysql>create database registration_form
mysql>use registration_form
mysql>create table register(Id int Auto_Increment,primary key(id),
username varchar(20) NOT NULL,
-> email varchar(30) NOT NULL,
-> password varchar(30) NOT NULL,
-> contact int(20));
I have created a folder structure as shown below to follow the basic coding practice in the Eclipse IDE.
Add the file mysql-connector-java-8.0.21.jar file inside WebContent\WEB-INF\lib. (You will find the jar file inside your MYSQL folder where you have installed- in my case C:\Program Files (x86)\MySQL\Connector J 8.0\mysql-connector-java-8.0.21).
Now, We will create register.jsp for the View.
<!--
Author: Colorlib
Author URL: https://colorlib.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>SignUp Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- //web font -->
</head>
<body>
<!-- main -->
<div class="main-w3layouts wrapper">
<h1>Registration Form</h1>
<div class="main-agileinfo">
<div class="agileits-top">
<form action="registerpage.jsp" method="post">
<input class="text" type="text" name="Username" placeholder="Username" required="">
<input class="text email" type="email" name="email" placeholder="Email" required="">
<input class="text" type="password" name="password" placeholder="Password" required="">
<input class="text w3lpass" type="password" name="password" placeholder="Confirm Password" required="">
<input class="text w3lpass" type="text" name="phone" placeholder="Contact" required="">
<div class="wthree-text">
<div class="clear"> </div>
</div>
<input type="submit" value="Register">
</form>
</div>
</div>
<!-- copyright -->
<div class="colorlibcopy-agile">
<p>© 2020 Signup Form. All rights reserved | Design by <a href="https://colorlib.com/" target="_blank"> Codedec</a></p>
</div>
<!-- //copyright -->
<ul class="colorlib-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- //main -->
</body>
</html>
create a CSS file style.css
@CHARSET "ISO-8859-1";
/*--
Author: Colorlib
Author URL: https://colorlib.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/*-- reset --*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
margin: 0px;
padding: 0px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*-- start editing from here --*/
a {
text-decoration: none;
}
.txt-rt {
text-align: right;
}
/* text align right */
.txt-lt {
text-align: left;
}
/* text align left */
.txt-center {
text-align: center;
}
/* text align center */
.float-rt {
float: right;
}
/* float right */
.float-lt {
float: left;
}
/* float left */
.clear {
clear: both;
}
/* clear float */
.pos-relative {
position: relative;
}
/* Position Relative */
.pos-absolute {
position: absolute;
}
/* Position Absolute */
.vertical-base {
vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
display: block;
}
/* vertical menu */
nav.horizontal ul li {
display: inline-block;
}
/* horizontal menu */
img {
max-width: 100%;
}
/*-- end reset --*/
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #76b852, #8DC26F);
background: -moz-linear-gradient(to top, #76b852, #8DC26F);
background: -o-linear-gradient(to top, #76b852, #8DC26F);
background: linear-gradient(to top, #76b852, #8DC26F);
background-size: cover;
background-attachment: fixed;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 3em;
text-align: center;
color: #fff;
font-weight: 100;
text-transform: capitalize;
letter-spacing: 4px;
font-family: 'Roboto', sans-serif;
}
/*-- main --*/
.main-w3layouts {
padding: 3em 0 1em;
}
.main-agileinfo {
width: 35%;
margin: 3em auto;
background: rgba(0, 0, 0, 0.18);
background-size: cover;
}
.agileits-top {
padding: 3em;
}
input[type="text"], input[type="email"], input[type="password"] {
font-size: 0.9em;
color: #fff;
font-weight: 100;
width: 94.5%;
display: block;
border: none;
padding: 0.8em;
border: solid 1px rgba(255, 255, 255, 0.37);
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
background-position: -800px 0;
background-size: 100%;
background-repeat: no-repeat;
color: #fff;
font-family: 'Roboto', sans-serif;
}
input.email, input.text.w3lpass {
margin: 2em 0;
}
.text:focus, .text:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
.text:focus::-webkit-input-placeholder, .text:valid::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: .9em;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-o-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
visibility: visible !important;
}
::-webkit-input-placeholder {
color: #fff;
font-weight: 100;
}
:-moz-placeholder {
/* Firefox 18- */
color: #fff;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input[type="submit"] {
font-size: .9em;
color: #fff;
background: #76b852;
outline: none;
border: 1px solid #76b852;
cursor: pointer;
padding: 0.9em;
-webkit-appearance: none;
width: 100%;
margin: 2em 0;
letter-spacing: 4px;
}
input[type="submit"]:hover {
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
background: #8DC26F;
}
.agileits-top p {
font-size: 1em;
color: #fff;
text-align: center;
letter-spacing: 1px;
font-weight: 300;
}
.agileits-top p a {
color: #fff;
-webkit-transition: .5s all;
-moz-transition: .5s all;
transition: .5s all;
font-weight: 400;
}
.agileits-top p a:hover {
color: #76b852;
}
/*-- //main --*/
/*-- checkbox --*/
.wthree-text label {
font-size: 0.9em;
color: #fff;
font-weight: 200;
cursor: pointer;
position: relative;
}
input.checkbox {
background: #8DC26F;
cursor: pointer;
width: 1.2em;
height: 1.2em;
}
input.checkbox:before {
content: "";
position: absolute;
width: 1.2em;
height: 1.2em;
background: inherit;
cursor: pointer;
}
input.checkbox:after {
content: "";
position: absolute;
top: 0px;
left: 0;
z-index: 1;
width: 1.2em;
height: 1.2em;
border: 1px solid #fff;
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: #fff;
border-top-color: transparent;
border-right-color: transparent;
}
.anim input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: transparent;
border-right-color: transparent;
animation: .4s rippling .4s ease;
animation-fill-mode: forwards;
}
@keyframes rippling {
50% {
border-left-color: #fff;
}
100% {
border-bottom-color: #fff;
border-left-color: #fff;
}
}
/*-- //checkbox --*/
/*-- copyright --*/
.colorlibcopy-agile {
margin: 2em 0 1em;
text-align: center;
}
.colorlibcopy-agile p {
font-size: .9em;
color: #fff;
line-height: 1.8em;
letter-spacing: 1px;
font-weight: 100;
}
.colorlibcopy-agile p a {
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.colorlibcopy-agile p a:hover {
color: #000;
}
/*-- //copyright --*/
.wrapper {
position: relative;
overflow: hidden;
}
.colorlib-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.colorlib-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 20s infinite;
-moz-animation: square 250s infinite;
-o-animation: square 20s infinite;
-ms-animation: square 20s infinite;
animation: square 20s infinite;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.colorlib-bubbles li:nth-child(1) {
left: 10%;
}
.colorlib-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
-moz-animation-duration: 17s;
-o-animation-duration: 17s;
animation-duration: 17s;
}
.colorlib-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.colorlib-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
-moz-animation-duration: 22s;
-o-animation-duration: 22s;
-ms-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.colorlib-bubbles li:nth-child(5) {
left: 70%;
}
.colorlib-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.colorlib-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
.colorlib-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
-moz-animation-duration: 40s;
animation-duration: 40s;
}
.colorlib-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.colorlib-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
/*-- responsive-design --*/
@media(max-width:1440px) {
input[type="text"], input[type="email"], input[type="password"] {
width: 94%;
}
}
@media(max-width:1366px) {
h1 {
font-size: 2.6em;
}
.agileits-top {
padding: 2.5em;
}
.main-agileinfo {
margin: 2em auto;
}
.main-agileinfo {
width: 36%;
}
}
@media(max-width:1280px) {
.main-agileinfo {
width: 40%;
}
}
@media(max-width:1080px) {
.main-agileinfo {
width: 46%;
}
}
@media(max-width:1024px) {
.main-agileinfo {
width: 49%;
}
}
@media(max-width:991px) {
h1 {
font-size: 2.4em;
}
.main-w3layouts {
padding: 2em 0 1em;
}
}
@media(max-width:900px) {
.main-agileinfo {
width: 58%;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 93%;
}
}
@media(max-width:800px) {
h1 {
font-size: 2.2em;
}
}
@media(max-width:736px) {
.main-agileinfo {
width: 62%;
}
}
@media(max-width:667px) {
.main-agileinfo {
width: 67%;
}
}
@media(max-width:600px) {
.agileits-top {
padding: 2.2em;
}
input.email, input.text.w3lpass {
margin: 1.5em 0;
}
input[type="submit"] {
margin: 2em 0;
}
h1 {
font-size: 2em;
letter-spacing: 3px;
}
}
@media(max-width:568px) {
.main-agileinfo {
width: 75%;
}
.colorlibcopy-agile p {
padding: 0 2em;
}
}
@media(max-width:480px) {
h1 {
font-size: 1.8em;
letter-spacing: 3px;
}
.agileits-top {
padding: 1.8em;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 91%;
}
.agileits-top p {
font-size: 0.9em;
}
}
@media(max-width:414px) {
h1 {
font-size: 1.8em;
letter-spacing: 2px;
}
.main-agileinfo {
width: 85%;
margin: 1.5em auto;
}
.text:focus, .text:valid {
background-position: 0 0px;
}
.wthree-text ul li, .wthree-text ul li:nth-child(2) {
display: block;
float: none;
}
.wthree-text ul li:nth-child(2) {
margin-top: 1.5em;
}
input[type="submit"] {
margin: 2em 0 1.5em;
letter-spacing: 3px;
}
input[type="submit"] {
margin: 2em 0 1.5em;
}
.colorlibcopy-agile {
margin: 1em 0 1em;
}
}
@media(max-width:384px) {
.main-agileinfo {
width: 88%;
}
.colorlibcopy-agile p {
padding: 0 1em;
}
}
@media(max-width:375px) {
.agileits-top p {
letter-spacing: 0px;
}
}
@media(max-width:320px) {
.main-w3layouts {
padding: 1.5em 0 0;
}
.agileits-top {
padding: 1.2em;
}
.colorlibcopy-agile {
margin: 0 0 1em;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 89.5%;
font-size: 0.85em;
}
h1 {
font-size: 1.7em;
letter-spacing: 0px;
}
.main-agileinfo {
width: 92%;
margin: 1em auto;
}
.text:focus, .text:valid {
background-position: 0 0px;
}
input[type="submit"] {
margin: 1.5em 0;
padding: 0.8em;
font-size: .85em;
}
.colorlibcopy-agile p {
font-size: .85em;
}
.wthree-text label {
font-size: 0.85em;
}
.main-w3layouts {
padding: 1em 0 0;
}
}
Now we will create a Database connection class for initializing the database
DBConnection.java
package com.register.DBConnect;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBConnection {
public static Connection getConn() {
Connection con = null;
String loadDriver = "com.mysql.jdbc.Driver";
String dbURL = "jdbc:mysql://localhost:3306/Registration_form";
String dbUSERNAME = "root";
String dbPASSWORD = "root";
try {
Class.forName(loadDriver);
con = DriverManager.getConnection(dbURL, dbUSERNAME, dbPASSWORD);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return con;
}
}
Now, we will create a Bean class. As we know JavaBeans are classes that encapsulate many objects into a single bean(Single object).
Studenbean.java
package com.register.Student;
public class Studenbean {
private String username;
private String email;
private String password;
private int contact;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getContact() {
return contact;
}
public void setContact(int contact) {
this.contact = contact;
}
public Studenbean(String username, String email, String password, int contact) {
super();
this.username = username;
this.email = email;
this.password = password;
this.contact = contact;
}
}
Now we will create a Dao class (Data Access Object). It involves the business logic for database operation like insert, update, delete (basically the CRUD operation of the database).
StudentDao.java
package com.register.StudentDao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import com.register.DBConnect.DBConnection;
import com.register.Student.Studenbean;
public class StudentDao {
public String insertintoDB(Studenbean studenbean)
{
Connection con = DBConnection.getConn();
System.out.println("error");
String sql="insert into register(Id,username,email,password,contact) values (NULL,?,?,?,?)";
System.out.println("inside");
int i = 0;
try {
PreparedStatement preparedStatement=con.prepareStatement(sql);
preparedStatement.setString(1,studenbean.getUsername());
preparedStatement.setString(2, studenbean.getEmail());
preparedStatement.setString(3, studenbean.getPassword());
preparedStatement.setLong(4, studenbean.getContact());
i = preparedStatement.executeUpdate();
System.out.println(i);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(i!=0)
{
return "Registered";
}
else
{
return "Not Registereds";
}
}
}
Then, we will create a JSP page.
registerpage.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*"%>
<%@ page import="com.register.Student.Studenbean" %>
<%@ page import="com.register.StudentDao.StudentDao" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration</title>
</head>
<body>
<%
String uname=request.getParameter("Username");
String email=request.getParameter("email");
String password=request.getParameter("password");
int contact=Integer.parseInt(request.getParameter("phone"));
Studenbean studenbean=new Studenbean(uname,email,password,contact);
StudentDao dao=new StudentDao();
String result=dao.insertintoDB(studenbean);
if (result.equals("Registered")) {
RequestDispatcher dispatcher = request.getRequestDispatcher("welcome.jsp");
dispatcher.forward(request, response);
} else {
RequestDispatcher dispatcher = request.getRequestDispatcher("register.jsp");
dispatcher.include(request, response);
out.print("Registered once again");
}
%>
</body>
</html>
welcome.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body bgcolor="">
<%String uname=request.getParameter("Username");
String email=request.getParameter("email");
String password=request.getParameter("password");
int contact=Integer.parseInt(request.getParameter("phone")); %>
<h1>Successfully Registered.</h1>
<table>
<tr><td>Username:</td>
<td><%=uname %>
</td>
</tr>
<tr><td>Email:</td>
<td><%=email %>
</td>
</tr>
<tr><td>Password:</td>
<td><%=password %>
</td>
</tr>
<tr><td>Contact No.:</td>
<td><%=contact %>
</td>
</tr>
</table>
</body>
</html>
When we will run this application from the register.jsp page we will get the following output:
Now check whether the data is inserted into the database. To check, let’s run the query “SELECT * FROM register” to view in the database.
Thus we can create a Registration in JSP by using the above steps.
Login Example in JSP
We will be using the same table as we used for the Registration i.e register and we will fetch the username and password from it for Login Example.
I have created a folder structure as shown below to follow the basic coding practice in the Eclipse IDE.
Add the file mysql-connector-java-8.0.21.jar file inside WebContent\WEB-INF\lib. (You will find the jar file inside your MYSQL folder where you have installed- in my case C:\Program Files (x86)\MySQL\Connector J 8.0\mysql-connector-java-8.0.21).
Now, we will create a login.jsp page.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- //web font -->
</head>
<body>
<!-- main -->
<div class="main-w3layouts wrapper">
<h1>Login Form</h1>
<div class="main-agileinfo">
<div class="agileits-top">
<form action="loginpage.jsp" method="post">
<input class="text" type="text" name="Username" placeholder="Username" required="">
<input class="text w3lpass" type="password" name="password" placeholder="Password" required="">
<div class="wthree-text">
<div class="clear"> </div>
</div>
<input type="submit" value="LogIn">
</form>
</div>
</div>
<!-- copyright -->
<div class="colorlibcopy-agile">
<p>© 2020 Signup Form. All rights reserved | Design by <a href="https://colorlib.com/" target="_blank"> Codedec</a></p>
</div>
<!-- //copyright -->
<ul class="colorlib-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- //main -->
</body>
</html>
style.css
@CHARSET "ISO-8859-1";
/*--
Author: Colorlib
Author URL: https://colorlib.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/*-- reset --*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
margin: 0px;
padding: 0px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*-- start editing from here --*/
a {
text-decoration: none;
}
.txt-rt {
text-align: right;
}
/* text align right */
.txt-lt {
text-align: left;
}
/* text align left */
.txt-center {
text-align: center;
}
/* text align center */
.float-rt {
float: right;
}
/* float right */
.float-lt {
float: left;
}
/* float left */
.clear {
clear: both;
}
/* clear float */
.pos-relative {
position: relative;
}
/* Position Relative */
.pos-absolute {
position: absolute;
}
/* Position Absolute */
.vertical-base {
vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
display: block;
}
/* vertical menu */
nav.horizontal ul li {
display: inline-block;
}
/* horizontal menu */
img {
max-width: 100%;
}
/*-- end reset --*/
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #76b852, #8DC26F);
background: -moz-linear-gradient(to top, #76b852, #8DC26F);
background: -o-linear-gradient(to top, #76b852, #8DC26F);
background: linear-gradient(to top, #76b852, #8DC26F);
background-size: cover;
background-attachment: fixed;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 3em;
text-align: center;
color: #fff;
font-weight: 100;
text-transform: capitalize;
letter-spacing: 4px;
font-family: 'Roboto', sans-serif;
}
/*-- main --*/
.main-w3layouts {
padding: 3em 0 1em;
}
.main-agileinfo {
width: 35%;
margin: 3em auto;
background: rgba(0, 0, 0, 0.18);
background-size: cover;
}
.agileits-top {
padding: 3em;
}
input[type="text"], input[type="email"], input[type="password"] {
font-size: 0.9em;
color: #fff;
font-weight: 100;
width: 94.5%;
display: block;
border: none;
padding: 0.8em;
border: solid 1px rgba(255, 255, 255, 0.37);
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
background-position: -800px 0;
background-size: 100%;
background-repeat: no-repeat;
color: #fff;
font-family: 'Roboto', sans-serif;
}
input.email, input.text.w3lpass {
margin: 2em 0;
}
.text:focus, .text:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
.text:focus::-webkit-input-placeholder, .text:valid::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: .9em;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-o-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
visibility: visible !important;
}
::-webkit-input-placeholder {
color: #fff;
font-weight: 100;
}
:-moz-placeholder {
/* Firefox 18- */
color: #fff;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input[type="submit"] {
font-size: .9em;
color: #fff;
background: #76b852;
outline: none;
border: 1px solid #76b852;
cursor: pointer;
padding: 0.9em;
-webkit-appearance: none;
width: 100%;
margin: 2em 0;
letter-spacing: 4px;
}
input[type="submit"]:hover {
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
background: #8DC26F;
}
.agileits-top p {
font-size: 1em;
color: #fff;
text-align: center;
letter-spacing: 1px;
font-weight: 300;
}
.agileits-top p a {
color: #fff;
-webkit-transition: .5s all;
-moz-transition: .5s all;
transition: .5s all;
font-weight: 400;
}
.agileits-top p a:hover {
color: #76b852;
}
/*-- //main --*/
/*-- checkbox --*/
.wthree-text label {
font-size: 0.9em;
color: #fff;
font-weight: 200;
cursor: pointer;
position: relative;
}
input.checkbox {
background: #8DC26F;
cursor: pointer;
width: 1.2em;
height: 1.2em;
}
input.checkbox:before {
content: "";
position: absolute;
width: 1.2em;
height: 1.2em;
background: inherit;
cursor: pointer;
}
input.checkbox:after {
content: "";
position: absolute;
top: 0px;
left: 0;
z-index: 1;
width: 1.2em;
height: 1.2em;
border: 1px solid #fff;
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: #fff;
border-top-color: transparent;
border-right-color: transparent;
}
.anim input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: transparent;
border-right-color: transparent;
animation: .4s rippling .4s ease;
animation-fill-mode: forwards;
}
@keyframes rippling {
50% {
border-left-color: #fff;
}
100% {
border-bottom-color: #fff;
border-left-color: #fff;
}
}
/*-- //checkbox --*/
/*-- copyright --*/
.colorlibcopy-agile {
margin: 2em 0 1em;
text-align: center;
}
.colorlibcopy-agile p {
font-size: .9em;
color: #fff;
line-height: 1.8em;
letter-spacing: 1px;
font-weight: 100;
}
.colorlibcopy-agile p a {
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.colorlibcopy-agile p a:hover {
color: #000;
}
/*-- //copyright --*/
.wrapper {
position: relative;
overflow: hidden;
}
.colorlib-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.colorlib-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 20s infinite;
-moz-animation: square 250s infinite;
-o-animation: square 20s infinite;
-ms-animation: square 20s infinite;
animation: square 20s infinite;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.colorlib-bubbles li:nth-child(1) {
left: 10%;
}
.colorlib-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
-moz-animation-duration: 17s;
-o-animation-duration: 17s;
animation-duration: 17s;
}
.colorlib-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.colorlib-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
-moz-animation-duration: 22s;
-o-animation-duration: 22s;
-ms-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.colorlib-bubbles li:nth-child(5) {
left: 70%;
}
.colorlib-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.colorlib-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
.colorlib-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
-moz-animation-duration: 40s;
animation-duration: 40s;
}
.colorlib-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.colorlib-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
/*-- responsive-design --*/
@media(max-width:1440px) {
input[type="text"], input[type="email"], input[type="password"] {
width: 94%;
}
}
@media(max-width:1366px) {
h1 {
font-size: 2.6em;
}
.agileits-top {
padding: 2.5em;
}
.main-agileinfo {
margin: 2em auto;
}
.main-agileinfo {
width: 36%;
}
}
@media(max-width:1280px) {
.main-agileinfo {
width: 40%;
}
}
@media(max-width:1080px) {
.main-agileinfo {
width: 46%;
}
}
@media(max-width:1024px) {
.main-agileinfo {
width: 49%;
}
}
@media(max-width:991px) {
h1 {
font-size: 2.4em;
}
.main-w3layouts {
padding: 2em 0 1em;
}
}
@media(max-width:900px) {
.main-agileinfo {
width: 58%;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 93%;
}
}
@media(max-width:800px) {
h1 {
font-size: 2.2em;
}
}
@media(max-width:736px) {
.main-agileinfo {
width: 62%;
}
}
@media(max-width:667px) {
.main-agileinfo {
width: 67%;
}
}
@media(max-width:600px) {
.agileits-top {
padding: 2.2em;
}
input.email, input.text.w3lpass {
margin: 1.5em 0;
}
input[type="submit"] {
margin: 2em 0;
}
h1 {
font-size: 2em;
letter-spacing: 3px;
}
}
@media(max-width:568px) {
.main-agileinfo {
width: 75%;
}
.colorlibcopy-agile p {
padding: 0 2em;
}
}
@media(max-width:480px) {
h1 {
font-size: 1.8em;
letter-spacing: 3px;
}
.agileits-top {
padding: 1.8em;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 91%;
}
.agileits-top p {
font-size: 0.9em;
}
}
@media(max-width:414px) {
h1 {
font-size: 1.8em;
letter-spacing: 2px;
}
.main-agileinfo {
width: 85%;
margin: 1.5em auto;
}
.text:focus, .text:valid {
background-position: 0 0px;
}
.wthree-text ul li, .wthree-text ul li:nth-child(2) {
display: block;
float: none;
}
.wthree-text ul li:nth-child(2) {
margin-top: 1.5em;
}
input[type="submit"] {
margin: 2em 0 1.5em;
letter-spacing: 3px;
}
input[type="submit"] {
margin: 2em 0 1.5em;
}
.colorlibcopy-agile {
margin: 1em 0 1em;
}
}
@media(max-width:384px) {
.main-agileinfo {
width: 88%;
}
.colorlibcopy-agile p {
padding: 0 1em;
}
}
@media(max-width:375px) {
.agileits-top p {
letter-spacing: 0px;
}
}
@media(max-width:320px) {
.main-w3layouts {
padding: 1.5em 0 0;
}
.agileits-top {
padding: 1.2em;
}
.colorlibcopy-agile {
margin: 0 0 1em;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 89.5%;
font-size: 0.85em;
}
h1 {
font-size: 1.7em;
letter-spacing: 0px;
}
.main-agileinfo {
width: 92%;
margin: 1em auto;
}
.text:focus, .text:valid {
background-position: 0 0px;
}
input[type="submit"] {
margin: 1.5em 0;
padding: 0.8em;
font-size: .85em;
}
.colorlibcopy-agile p {
font-size: .85em;
}
.wthree-text label {
font-size: 0.85em;
}
.main-w3layouts {
padding: 1em 0 0;
}
}
Now we will create a Database connection class for initializing the database
DBConnect.java
package com.Student.DBCon;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBconnect {
public static Connection getConn() {
Connection con = null;
String loadDriver = "com.mysql.jdbc.Driver";
String dbURL = "jdbc:mysql://localhost:3306/Registration_form";
String dbUSERNAME = "root";
String dbPASSWORD = "khan";
try {
Class.forName(loadDriver);
con = DriverManager.getConnection(dbURL, dbUSERNAME, dbPASSWORD);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return con;
}
}
Now, we will create a Bean class. As we know JavaBeans are classes that encapsulate many objects into a single bean(Single object).
StudentLoginBean.java
package com.Student.bean;
public class StudentLoginBean {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public StudentLoginBean(String username, String password) {
super();
this.username = username;
this.password = password;
}
public StudentLoginBean() {
super();
// TODO Auto-generated constructor stub
}
}
Now we will create a Dao class (Data Access Object). It involves the business logic for database operation like insert, update, delete (basically the CRUD operation of the database).
StudentDao.java
package com.Student.Dao;
import com.Student.DBCon.DBconnect;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.Student.bean.StudentLoginBean;
public class StudentDao {
public boolean vaildate(StudentLoginBean bean)
{
boolean result = false;
Connection connection=DBconnect.getConn();
System.out.println("connect");
String sql="select * from register where username=? and password=?";
System.out.println("inside");
try {
PreparedStatement ps=connection.prepareStatement(sql);
ps.setString(1, bean.getUsername());
ps.setString(2, bean.getPassword());
ResultSet rs=ps.executeQuery();
result=rs.next();
System.out.println("outside"+result);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return result;
}
}
Then we will create a JSP page for processing the request.
loginpage.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="com.Student.bean.StudentLoginBean" %>
<%@page import="com.Student.Dao.StudentDao" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
String uname=request.getParameter("Username");
String pass=request.getParameter("password");
session.setAttribute("username", uname);
StudentLoginBean bean=new StudentLoginBean();
StudentDao dao=new StudentDao();
bean.setUsername(uname);
bean.setPassword(pass);
if(dao.vaildate(bean))
{
System.out.print("here");
response.sendRedirect("welcome.jsp");
}
else
{
System.out.print("in");
response.sendRedirect("login.jsp");
}
%>
</body>
</html>
When we will run this application from the login.jsp page we will get the following output:
Thus we have created a Login Form using JSP by using the above steps.
In the next article of this tutorial, we will cover a simple Login and Logout Example using JSP.
