In the previous article, we have seen Registration and Login Example in JSP with MYSQL. In this article, we will see the Log-in and Logout Example using session object in JSP and we have seen earlier what is HttpSession if you don’t know about it you can check it here How to handle Sessions in JSP.
Login and Logout Example in JSP
- In this example, We will be creating three links for Login, Logout, and View profile.
- if we click on Log out it should not allow us to view the profile.
- I have used a hardcoded username and password but you can use the database to compare the login credentials with username=” abc” and password=”1234″.
- When a user enters the login credentials the request is sent to loginpage.jsp and it will show a “welcome” message otherwise it will be on the same page login.jsp.
- logoutprocess.jsp invalidates the session to logout the user and shows a “Successfully Logout” message.
- ViewProfile link will be sent the request to viewprocess.jsp and display the message “Welcome to Profile”.
First, create a project structure as shown below
Let’s create each file one by one 🙂
link.html
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <table cellspacing="20"> <tr><td> <h3><a href="login.jsp">Login</a></h3> <td><h3> <a href="viewprocess.jsp">View Profile</a></td> <td><h3> <a href="logoutprocess.jsp">Logout</a></h3></td> </tr> </table> </body> </html>
login.jsp will display the login form
- This form shows the login page for the user.
- getAttribute(): If we have some data created and that need to pass into the JSP page. we will use getAttribute() method.
<%@ 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>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<%
String errorMessage = (String) session.getAttribute("msg");
if (null !=errorMessage) { %>
<h4> <%=errorMessage %></h4>
<%}
%>
<body>
<h2>Login Page</h2><br>
<div class="login">
<form id="login" method="get" action="loginpage.jsp">
<label><b>User Name
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="submit" name="log" id="log" value="LogIn">
</form>
</div>
</body>
</html>
</body>
</html>
style.css
@CHARSET "ISO-8859-1";
body
{
margin: 0;
padding: 0;
background-color:#FA8072;
font-family: 'Arial';
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: silver;
border-radius: 15px ;
}
h2{
text-align: center;
color: #277582;
padding: 20px;
}
label{
color: #08ffd1;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: black;
}
welcome.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="link.html" %>
<!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>
<%
out.print("<h1>Welcome "+session.getAttribute("uname")+"</h1>") ;%>
</body>
</html>
create the following JSP for processing the request
- loginpage.jsp
- logoutprocess.jsp
- viewprocess.jsp
loginpage.jsp
On this page, we are getting the parameter of username and password from login.jsp page and validating the user and redirecting it to Welcome 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>
</head>
<body>
<%
String uname=request.getParameter("Uname");
String pass=request.getParameter("Pass");
session.setAttribute("uname", uname);
if(uname.equals("abc") && pass.equals("1234"))
{
response.sendRedirect("welcome.jsp");
}
else
{
response.sendRedirect("login.jsp");
out.print("Incorrect");
}
%>
</body>
</html>
logoutprocess.jsp
On this page, we are invalidating the session Once the user is logged out.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="link.html" %>
<!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>
<%
session.invalidate();
out.print("<h1>Successfully Log out!!!</h1>");
%>
</body>
</html>
viewprocess.jsp
On this page, we will display the “Welcome to your profile” message.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="link.html" %>
<!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>
<%
if(session.isNew())
{
//out.println("<br><h1>Please Login First</h1>");
response.sendRedirect("login.jsp");
session.setAttribute("msg","Please login first");
}
else
{
String uname = (String) session.getAttribute("uname");
out.println("<h1>Welcome " + uname + " to your profile!!!</h1>");
}
%>
</body>
</html>
Run the code from login.jsp page and you will get the following output
If I click on View Profile Once again It should take us to the login page.
Thus, this is How we create a simple Login and Logout example in JSP using the session.
In the next article of this tutorial, we will discuss the File Uploading Example in JSP. We will understand How to upload files using the JSP page.
