Example : A complete Dashboard/Home Page code in JSP.
NB : Dashboard Home page appears after successful Login or Validation.
================================= Login.jsp ====================================
<%@page contentType="text/html" pageEncoding="UTF-8" import="java.sql.*"%>
<%
/*----------------------------------------------------------
Variable Declaration Section
----------------------------------------------------------*/
// Variable to display login status message
String msg = "";
// Variables to store user name and password
String uname = "";
String pass = "";
// Read username and password from login HTML form
uname = request.getParameter("UNAME1");
pass = request.getParameter("PASS1");
// Read the clicked button value
String sub = request.getParameter("SUB1");
/*----------------------------------------------------------
Login Authentication Section
----------------------------------------------------------*/
// Check whether Login button is clicked
if(sub != null && sub.equals("Login"))
{
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
try
{
// Load Oracle JDBC Driver
Class.forName("oracle.jdbc.driver.OracleDriver");
// Connect to Oracle Database
conn = DriverManager.getConnection(
"jdbc:oracle:thin:@localhost:1521:orcl",
"System",
"raj"
);
// SQL Query to verify user credentials
pst = conn.prepareStatement(
"SELECT * FROM UREG WHERE UNAME5=? AND PASSWORD5=?"
);
// Pass user entered values to SQL query
pst.setString(1, uname);
pst.setString(2, pass);
// Execute SQL query
rs = pst.executeQuery();
/*--------------------------------------------------
If login is successful
--------------------------------------------------*/
if(rs.next())
{
// Create user session
session.setAttribute("LOGIN", "YES");
session.setAttribute("USERNAME", uname);
// Redirect to Dashboard page
response.sendRedirect("dashboard.jsp");
return;
}
else
{
// Display invalid login message
msg = "Invalid Username or Password";
}
}
catch(Exception e)
{
// Display database or program error
msg = e.toString();
}
}
%>
<html>
<head>
<title>Login Page</title>
<style>
/*----------------------------------------------------------
Page Background
----------------------------------------------------------*/
body{
margin:0;
padding:0;
font-family:Arial;
background:#e2e8f0;
}
/*----------------------------------------------------------
Login Box Design
----------------------------------------------------------*/
.login-box{
width:350px;
margin:120px auto;
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 0 10px gray;
}
/*----------------------------------------------------------
Heading Style
----------------------------------------------------------*/
h2{
text-align:center;
color:#0f172a;
}
/*----------------------------------------------------------
Text Box Design
----------------------------------------------------------*/
input[type=text],
input[type=password]{
width:100%;
padding:10px;
margin-top:8px;
margin-bottom:15px;
border:1px solid #94a3b8;
border-radius:5px;
}
/*----------------------------------------------------------
Button Design
----------------------------------------------------------*/
input[type=submit],
input[type=reset]{
width:48%;
padding:10px;
border:none;
border-radius:5px;
background:#2563eb;
color:white;
font-weight:bold;
cursor:pointer;
}
/* Reset Button Color */
input[type=reset]{
background:#64748b;
}
/*----------------------------------------------------------
Message Label
----------------------------------------------------------*/
.msg{
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<!--=========================================================
Login Form Section
==========================================================-->
<div class="login-box">
<h2>Login</h2>
<!-- Display Login Message -->
<p class="msg"><%=msg%></p>
<!-- Login Form -->
<form method="post">
<!-- User Name -->
User Name
<input type="text"
name="UNAME1"
required>
<!-- Password -->
Password
<input type="password"
name="PASS1"
required>
<!-- Login Button -->
<input type="submit"
name="SUB1"
value="Login">
<!-- Reset Button -->
<input type="reset"
value="Reset">
<br><br>
<!-- Forget Password Link -->
<p align="center">
<a href="forgetpassword.jsp">
Forget Password?
</a>
</p>
</form>
</div>
</body>
</html>
====================================== Dashboard.jsp =======================================
<%-- ================================================================
File Name : dashboard.jsp
Author : Admin
================================================================ --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
/*---------------------------------------------------------------
Session Checking Section
If user is not logged in, redirect to login.jsp.
---------------------------------------------------------------*/
String login = (String)session.getAttribute("LOGIN");
String username = (String)session.getAttribute("USERNAME");
if(login == null || !login.equals("YES"))
{
response.sendRedirect("login.jsp");
return;
}
%>
<!DOCTYPE html>
<html>
<head>
<!-- Page title -->
<title>Dashboard</title>
<style>
/*----------------------------------------------------------
Common setting for all HTML elements
----------------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
}
/*----------------------------------------------------------
Body background color
----------------------------------------------------------*/
body {
background: #f1f5f9;
}
/*----------------------------------------------------------
Header section design
----------------------------------------------------------*/
.header {
height: 80px;
background: #0f172a;
color: white;
display: flex;
align-items: center;
padding: 10px 20px;
}
/*----------------------------------------------------------
Logo image design
----------------------------------------------------------*/
.logo {
width: 60px;
height: 60px;
margin-right: 15px;
border-radius: 50%;
}
/*----------------------------------------------------------
Project title area
----------------------------------------------------------*/
.title {
flex: 1;
}
.title h1 {
font-size: 26px;
}
/*----------------------------------------------------------
Right side header area: email, signup, logout
----------------------------------------------------------*/
.header-right {
text-align: right;
}
.header-right p {
margin-bottom: 8px;
font-size: 14px;
}
.header-right a {
text-decoration: none;
background: #38bdf8;
color: black;
padding: 8px 14px;
margin-left: 5px;
border-radius: 5px;
font-weight: bold;
}
/*----------------------------------------------------------
Logout button design
----------------------------------------------------------*/
.header-right a.logout {
background: #ef4444;
color: white;
}
/*----------------------------------------------------------
Marquee section design
----------------------------------------------------------*/
.marquee {
background: #facc15;
color: #111827;
padding: 8px;
font-weight: bold;
}
/*----------------------------------------------------------
Main body divided into sidebar and content area
----------------------------------------------------------*/
.body {
display: flex;
min-height: calc(100vh - 150px);
}
/*----------------------------------------------------------
Left side menu area
----------------------------------------------------------*/
.sidebar {
width: 260px;
background: #1e293b;
color: white;
padding-top: 10px;
}
/*----------------------------------------------------------
Main menu title design
----------------------------------------------------------*/
.menu-title {
padding: 13px 20px;
cursor: pointer;
background: #334155;
border-bottom: 1px solid #475569;
font-weight: bold;
}
.menu-title:hover {
background: #475569;
}
.menu-title a {
color: white;
text-decoration: none;
display: block;
}
/*----------------------------------------------------------
Home menu design
----------------------------------------------------------*/
.home-menu {
background: #2563eb;
}
.home-menu:hover {
background: #1d4ed8;
}
/*----------------------------------------------------------
Submenu and sub-submenu hidden by default
----------------------------------------------------------*/
.submenu, .subsubmenu {
display: none;
background: #0f172a;
}
/*----------------------------------------------------------
Submenu link design
----------------------------------------------------------*/
.submenu a {
display: block;
padding: 11px 35px;
color: white;
text-decoration: none;
border-bottom: 1px solid #1e293b;
font-size: 14px;
}
.submenu a:hover {
background: #2563eb;
}
/*----------------------------------------------------------
Submenu title design for sub-submenu
----------------------------------------------------------*/
.submenu-title {
padding: 11px 35px;
cursor: pointer;
background: #111827;
border-bottom: 1px solid #1e293b;
font-size: 14px;
}
.submenu-title:hover {
background: #2563eb;
}
/*----------------------------------------------------------
Sub-submenu link design
----------------------------------------------------------*/
.subsubmenu a {
padding-left: 55px;
background: #020617;
}
/*----------------------------------------------------------
Right side content area
----------------------------------------------------------*/
.content {
flex: 1;
padding: 10px;
background: #e2e8f0;
}
/*----------------------------------------------------------
iframe design
All menu pages open inside this iframe.
----------------------------------------------------------*/
iframe {
width: 100%;
height: 100%;
min-height: 620px;
border: none;
background: #E8F5E9;
}
/*----------------------------------------------------------
Footer section design
----------------------------------------------------------*/
.footer {
height: 40px;
background: #0f172a;
color: white;
text-align: center;
line-height: 40px;
font-size: 14px;
}
</style>
<script>
/*----------------------------------------------------------
Function Name : toggleMenu
Purpose : To show and hide submenu/sub-submenu.
----------------------------------------------------------*/
function toggleMenu(id) {
var menu = document.getElementById(id);
if (menu.style.display === "block") {
menu.style.display = "none";
} else {
menu.style.display = "block";
}
}
/*----------------------------------------------------------
Function Name : logoutConfirm
Purpose : To confirm before logout.
----------------------------------------------------------*/
function logoutConfirm() {
return confirm("Are you sure you want to logout?");
}
</script>
</head>
<body>
<!-- ==============================================================
Header Section
Contains logo, project title, username, email, signup, logout
================================================================ -->
<div class="header">
<!-- Project logo -->
<img src="images/logo.png" class="logo">
<!-- Project title and logged-in username -->
<div class="title">
<h1>Online Student Management System</h1>
<p>Welcome, <%=username%></p>
</div>
<!-- Header right side links -->
<div class="header-right">
<p>Email: [email protected]</p>
<!-- Signup page opens in iframe -->
<a href="signup.jsp" target="mainFrame">Signup</a>
<!-- Logout page opens after confirmation -->
<a href="logout.jsp" class="logout" onclick="return logoutConfirm();">
Logout
</a>
</div>
</div>
<!-- ==============================================================
Marquee Section
================================================================ -->
<div class="marquee">
<marquee behavior="scroll" direction="left">
Welcome to Online Student Management System | Manage Student, Course, Teacher, Exam and Reports
</marquee>
</div>
<!-- ==============================================================
Dashboard Body Section
Contains left menu and right iframe area
================================================================ -->
<div class="body">
<!-- ==========================================================
Left Sidebar Menu Section
=========================================================== -->
<div class="sidebar">
<!-- Home menu -->
<div class="menu-title home-menu">
<a href="home.jsp" target="mainFrame">🏠 Home</a>
</div>
<!-- Master Entry main menu -->
<div class="menu-title" onclick="toggleMenu('masterMenu')">
📂 Master Entry
</div>
<!-- Master Entry submenu -->
<div class="submenu" id="masterMenu">
<!-- Student Master page -->
<a href="student.jsp" target="mainFrame">Student Master</a>
<!-- Course Master page -->
<a href="course.jsp" target="mainFrame">Course Master</a>
<!-- Teacher Master page -->
<a href="teacher.jsp" target="mainFrame">Teacher Master</a>
<!-- Subject Master sub-submenu title -->
<div class="submenu-title" onclick="toggleMenu('subjectSubMenu')">
Subject Master +
</div>
<!-- Subject Master sub-submenu -->
<div class="subsubmenu" id="subjectSubMenu">
<a href="subject.jsp" target="mainFrame">Add Subject</a>
<a href="subject_report.jsp" target="mainFrame">Subject Report</a>
</div>
</div>
<!-- Process main menu -->
<div class="menu-title" onclick="toggleMenu('processMenu')">
⚙ Process
</div>
<!-- Process submenu -->
<div class="submenu" id="processMenu">
<a href="admission.jsp" target="mainFrame">Admission</a>
<a href="fee.jsp" target="mainFrame">Fee Payment</a>
<a href="marks.jsp" target="mainFrame">Marks Entry</a>
</div>
<!-- Reports main menu -->
<div class="menu-title" onclick="toggleMenu('reportMenu')">
📊 Reports
</div>
<!-- Reports submenu -->
<div class="submenu" id="reportMenu">
<a href="student_report.jsp" target="mainFrame">Student Report</a>
<a href="course_report.jsp" target="mainFrame">Course Report</a>
<a href="marks_report.jsp" target="mainFrame">Marks Report</a>
<!-- Admin Reports sub-submenu title -->
<div class="submenu-title" onclick="toggleMenu('adminReportSub')">
Admin Reports +
</div>
<!-- Admin Reports sub-submenu -->
<div class="subsubmenu" id="adminReportSub">
<a href="user_report.jsp" target="mainFrame">User Report</a>
<a href="login_report.jsp" target="mainFrame">Login Report</a>
</div>
</div>
<!-- Settings main menu -->
<div class="menu-title" onclick="toggleMenu('settingMenu')">
⚙ Settings
</div>
<!-- Settings submenu -->
<div class="submenu" id="settingMenu">
<a href="change_password.jsp" target="mainFrame">Change Password</a>
<a href="profile.jsp" target="mainFrame">Profile</a>
</div>
</div>
<!-- ==========================================================
Right Content Area
All pages open inside iframe named mainFrame
=========================================================== -->
<div class="content">
<iframe src="home.jsp" name="mainFrame"></iframe>
</div>
</div>
<!-- ==============================================================
Footer Section
================================================================ -->
<div class="footer">
Copyright © 2026 Online Student Management System | Developed in JSP and Oracle 10g
</div>
</body>
</html>
================================= home.jsp ====================================
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>Home</title>
<style>
/* body{
margin:0;
background:#E8F5E9;
font-family:Arial;
}*/
body{
margin:0;
background-image:url('images/background.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
</style>
</head>
<body style="font-family:Arial; padding:30px;">
<h1>Welcome to Home Page</h1>
<p>This page opens inside iframe.</p>
</body>
</html>
================================= Logout.jsp ====================================
<%
session.invalidate();
response.sendRedirect("login.jsp");
%>
0 Comments