Scribd
Upload
17 views

WebApp Lab Manual

Lab manual of web application 2024

Uploaded by

tejaswinijalla459
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

WebApp Lab Manual

Lab manual of web application 2024

Uploaded by

tejaswinijalla459
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

WEB APP - LAB MANUAL

Dineshkumar Thangavel

QISCET
Skill Development Course
Table of Content

S.NO TOPIC PAGE REMARKS

1 Responsive Navigation Bar 1

2 Snake Game 2

3 User Profile Registration 5

4 User Profile Dashboard 19


</div>
Responsive Navigation <div class="landing"></div>

Bar <script src="script.js"></script>

</body>
HTML </html>
<!DOCTYPE html> <div class="landing">
<html lang="en"> </div>
<head> <script src="script.js"></script>
</body>
<title>NavBar</title> </html>
<link rel="shortcut icon"
href="title_icon.png" type="image/x-
icon"> CSS
<link rel="stylesheet" :root{
href="https://cdnjs.cloudflare.com/aj --color1: #176B87;
ax/libs/font- --color2: #86B6F6;
awesome/6.5.1/css/all.min.css"> --color3: #B4D4FF;
<link rel="stylesheet" --color4: #EEF5FF;
href="style.css"> }

</head> *{
<body> margin: 0px;
padding: 0px;
<div class="navbar"> box-sizing: border-box;
}
<div class="logo">
<i id='logo' class="fa-solid fa- .navbar{
school fa-2x"></i>
</div> height:10vh;
background-color: var(--color4);
<div class="hamburger"> display: flex;
<i id="hamburger" class="fa-solid fa- justify-content: space-between;
bars fa-2x"></i> padding: 0px 10px;
</div> align-items: center;
}
<div id="nav-menu" class="nav-menu
hide"> .nav-menu a{
<a href="">Home</a> text-decoration: none;
<a href="">Service</a> color: var(--color1);
<a href="">Career</a> font-family: 'Franklin Gothic
<a href="">Contact Us</a> Medium', 'Arial Narrow', Arial, sans-
</div> serif;
margin: 0px 5px;
Web Application Development 1

padding: 5px 8px; }


border: none;
border-radius: 5px; .nav-menu{
} flex-direction: column;
justify-content: space-
.navbar a:hover{ around;
cursor: pointer; align-items: flex-start;
background-color: var(--color2); background-color: var(--
color: white; color3);
} padding: 10px;
border-radius: 5px;
.nav-menu{ position: absolute;
display: flex; top: 10vh;
justify-content: space-between; left: 75%;
align-items: center;
width: max-content; }
}
.nav-menu a{
.navbar #logo{ margin-bottom: 5px;
color: var(--color1); display: block;
} width: 100%;
}
.navbar #hamburger{
color: var(--color1); #hamburger:hover{
} cursor: pointer;
}
.hamburger{
display: none; .landing{
} background-position: 50% 0px;
}
.landing{
.hide{
height:90vh; display: none;
background-image: }
url(background.jpeg); .show{
background-size: cover; display: flex;
height: 90vh; }
background-position: 0px - }
50px;
}

@media all and (max-width:950px){

.hamburger{
display: block;
Web Application Development 2

JS
<div class="score">
document.addEventListener('DOMContent <span id="scoreTitle">Score:</span>
Loaded', function () { <span id="score">0</span>
</div>
const hamburger =
document.getElementById('hamburger') <script src="script.js"></script>
const navMenu = </body>
document.getElementById('nav-menu') </html>

hamburger.addEventListener('click
CSS
', function(){
navMenu.classList.toggle('sho
w') :root{
navMenu.classList.toggle('hid --color1: #DCFFB7;
e') --color2: #FF004D;
}) --color3: #cc036b;
--color4: #1D2B53;
}) --color5: #DED0B6;
}

Snake Game *{
margin: 0px;
HTML padding: 0px;
font-family: 'Gill Sans', 'Gill
<!DOCTYPE html>
Sans MT', Calibri, 'Trebuchet MS',
<html lang="en">
sans-serif;
background-color: var(--color1);
<head>
text-align: center;
<meta charset="UTF-8">
}
<meta name="viewport"
content="width=device-width, initial-
h2{
scale=1.0">
font-size: xx-large;
<title>Snake Game</title>
color: var(--color4);
<link rel="stylesheet"
}
href="style.css">
</head>
#gameBoard{
border: 3px solid var(--color4);
<body>
margin: 10px 0px;
}
<h2>Snake Game</h2>

#scoreTitle, #score{
<div class="con">
font-size: x-large;
<canvas id="gameBoard" width="500px"
height="500px"> </canvas>
</div>
Web Application Development 3

font-family: 'Gill Sans', 'Gill


Sans MT', Calibri, 'Trebuchet MS', function displaySnake(){
sans-serif; ctx.fillStyle = '#FF004D'
color: var(--color4); ctx.strokeStyle = 'black'
}
// for(let i=0; i<snake.length; i++)
// ctx.fillRect(snake[i].x,
JS snake[i].y, food, food)

snake.forEach((part)=>{
const score =
ctx.fillRect(part.x, part.y,
document.getElementById('score')
food, food)
let s = 0
ctx.strokeRect(part.x, part.y,
food, food)
const board =
})
document.getElementById('gameBoard')
}
let ctx = board.getContext('2d')

function displayFood(){
let width = board.width
xFood =
let height = board.height
Math.floor(Math.random()*(width/food)
let food = 25
)*food
let xFood = 0
yFood =
let yFood = 0
Math.floor(Math.random()*(height/food
let xs = food
))*food
let ys = 0
ctx.fillStyle = '#cc036b'
let started = false
ctx.fillRect(xFood, yFood, food,
food)
let snake = [{x:75, y:0},
}
{x:50, y:0},
{x:25, y:0},
function startGame(event){
{x:0, y:0}]

if(!started){
window.addEventListener('keydown',
started = true
startGame)//event
nextMove()
start()
}
function start(){
if(event.keyCode == 37 && xs!=food){
background()
xs = -food
displaySnake()
ys = 0
displayFood()
} }
else if(event.keyCode == 39 && xs!=-
function background(){ food){
xs = food
ctx.fillStyle = 'black'
ys = 0
ctx.fillRect(0, 0, width, height)
}
}
Web Application Development 4

else if(event.keyCode == 38 && s++


ys!=food){ score.innerHTML = s
xs = 0 displayFood()
ys = -food; }
} else{
else if(event.keyCode == 40 && ys!=- // del the tail
food){ let tail = snake.pop()
xs = 0 // repaint the tail
ys = food ctx.fillStyle = 'black'
} ctx.fillRect(tail.x, tail.y,
} food, food)
}
function nextMove(){ }
setInterval(()=>{
if(collisionWall()){ function collisionWall(){
snakeMoving()
} if(snake[0].x<0 || snake[0].x>width
else{ || snake[0].y<0 || snake[0].y>height)
ctx.clearRect(0, 0, width, return false
height) else
ctx.font = "bold 50px serif" return true
ctx.fillStyle = "black" }
ctx.textAlign = 'center'
ctx.fillText("Game Over!!",
width/2, height/2)
}
}, 200)
}

function snakeMoving(){
// head
let head = {x: snake[0].x + xs, y:
snake[0].y + ys}
// paint the head
ctx.fillStyle = '#FF004D'
ctx.strokeStyle = 'black'
ctx.fillRect(head.x, head.y, food,
food)
ctx.strokeRect(head.x, head.y, food,
food)
// add the head
snake.unshift(head)

if(snake[0].x == xFood && snake[0].y


== yFood){
Web Application Development 5

<label for="firstName">First
User Profile Name:</label>
<input type="text" id="firstName"
Registration name="firstName" required>
</div>

<div class="row">
HTML <label for="middleName">Middle
Name:</label>
<input type="text"
Form1:
id="middleName" name="middleName">
</div>
<!DOCTYPE html>
<html lang="en"> <div class="row">
<head> <label for="lastName">Last
<meta charset="UTF-8"> Name:</label>
<meta name="viewport" <input type="text" id="lastName"
content="width=device-width, initial- name="lastName" required>
scale=1.0"> </div>
<title>Personal Details</title>
<link rel="stylesheet" <div class="row">
href="style.css"> <label for="dob">Date of
</head> Birth:</label>
<body> <input type="date" id="dob"
<div class="con"> name="dob" placeholder="YYYY-MM-DD"
<h2>Registration Form</h2> pattern="\d{4}-\d{2}-\d{2}" required>
</div>
<form id="registrationForm"
action="reg1"> <div class="row">
<fieldset> <label for="age">Age:</label>
<input type="number" id="age"
<legend>Personal Details</legend> name="age" readonly>
</div>
<div class="row">
<label for="title">Title:</label> <div class="row">
<select id="title" name="title"> <label>Gender:</label>
<option <div class="genderItems">
value="mr">Mr</option> <input type="radio" id="male"
<option name="gender" value="male">
value="mrs">Mrs</option> <label
</select> for="male">Male</label>
</div> <input type="radio"
id="female" name="gender"
<div class="row"> value="female">
Web Application Development 6

<label
for="female">Female</label> <script src="script.js"></script>
</div> </body>
</div> </html>

</fieldset> Form2:

<fieldset>
<!DOCTYPE html>
<legend>Languages Known</legend>
<html lang="en">
<head>
<div class="language-container">
<meta charset="UTF-8">
<label id="lang"
<meta name="viewport"
for="language1">Language:</label>
content="width=device-width, initial-
<input type="text" id="language1"
scale=1.0">
name="languages[]" required>
<title>Educational Details</title>
<input type="checkbox"
<link rel="stylesheet"
id="language1-read"
href="style.css">
name="languagesRead[]" value="read">
</head>
<label for="language1-
read">Read</label>
<body>
<input type="checkbox"
<div class="con">
id="language1-write"
<h2>Registration Form</h2>
name="languagesWrite[]"
value="write">
<form id="registrationForm"
<label for="language1-
action="reg2">
write">Write</label>
<input type="checkbox"
<fieldset>
id="language1-speak"
<legend>Educational Details</legend>
name="languagesSpeak[]"
<div class="row">
value="speak">
<label
<label for="language1-
for="qualification">Qualification:</l
speak">Speak</label>
abel>
</div>
<select id="qualification"
name="qual">
<button type="button"
<option value="High School">High
id="addLanguage">Add
School</option>
Language</button>
<option
</fieldset>
value="Diploma">Diploma</option>
<option value="Bachelor of
<div class="btn-con">
Engineering">Bachelor of
<button type="submit">Next</button>
Engineering</option>
<button type="reset">Reset</button>
<option value="Bachelor of
</div>
Technology">Bachelor of
</form>
Technology</option>
</div>
Web Application Development 7

<option value="Master of <label for="mobile">Contact


Engineering">Master of Number:</label>
Engineering</option> <input type="tel" id="mobile"
<option value="Master of name="mobile" required>
Technology">Master of </div>
Technology</option>
</select> <div class="row">
</div> <label for="email">Email:</label>
<input type="email" id="email"
<div class="row"> name="email" required>
<label for="institution">Name of </div>
the Institution:</label>
<input type="text" <div class="row">
id="institution" name="inst" <label for="address">Address for
required> communication:</label>
</div> <input type="text" id="address"
name="address" required>
<div class="row"> </div>
<label for="instruction">Mode of </fieldset>
Instruction</label>
<input type="text" <div class="btn-con">
id="instruction" name="mode"> <button type="submit">Next</button>
</div> <button type="reset">Reset</button>
</div>
<div class="row"> </form>
<label for="pyear">Year of
Passing:</label> </div>
<input type="number" id="pyear"
name="year" minlength="4" <script src="script.js"></script>
maxlength="4" required> </body>
</div> </html>

<div class="row"> Form3:


<label for="passPer">Pass
Percentage:</label>
<input type="number" id="passPer" <!DOCTYPE html>
name="per" required> <html lang="en">
</div> <head>
</fieldset> <meta charset="UTF-8">
<meta name="viewport"
<fieldset> content="width=device-width, initial-
<legend>Languages Known</legend> scale=1.0">
<title>Login Details</title>
<div class="row"> <link rel="stylesheet"
href="style.css">
<style>
Web Application Development 8

.con{ </body>
height: 100vh; </html>
}
</style>
</head> CSS
<body> :root{
<div class="con"> --color1:#DBE7C9;
<h2>Registration Form</h2> --color2:#789461;
--color3:#50623A;
<form id="registrationForm" --color4:#294B29;
action="reg3"> }
<fieldset>
<legend>LogIn Details</legend> * {
margin: 0px;
<div class="row"> padding: 0px;
<label box-sizing: border-box;
for="uname">UserName:</label> font-family:'Gill Sans', 'Gill
<input type="text" id="uname" Sans MT', Calibri, 'Trebuchet MS',
name="uname" required> sans-serif;
</div> }

<div class="row"> .con{


<label flex-direction: column;
for="password">Password:</label> display: flex;
<input type="text" id="password" justify-content: center;
name="password"> align-items: center;
</div> background-image:
url(background.jpg);
<div class="row"> background-repeat: no-repeat;
<label for="cPass">Confirm background-size: cover;
Password:</label> }
<input type="text" id="cPass"
name="cPass" required> h2{
</div> margin: 10px 0px;
</fieldset> color: var(--color4);
position: relative;
<div class="btn-con"> left: 15vw;
<button }
type="submit">Register</button>
<button type="reset">Reset</button> #registrationForm{
</div> position: relative;
</form> left: 15vw;
</div> width: 500px;
padding: 10px 20px;
<script src="script.js"></script> display: flex;
Web Application Development 9

flex-direction: column; align-items: center;


justify-content: center; }
align-items: flex-start;
background-color: var(--color1); .btn-con{
height: max-content; width: 100%;
border-radius: 10px; display: flex;
margin-bottom: 10px; justify-content: space-around;
} align-items: center;
}
.row{ button {
display: flex; padding: 10px 20px;
flex-direction: column; border: none;
justify-content: center; border-radius: 5px;
align-items: flex-start; background-color: var(--color2);
} color: #fff;
cursor: pointer;
legend{ }
color: white; button:hover {
font-size: larger; background-color: var(--color4);
letter-spacing: 3px; box-shadow: 0px 0px 5px var(--
text-align: center; color2);
color: var(--color4); }
} .error {
color: red;
label { }
margin-bottom: 5px; .language-container {
font-weight: bold; width: 100%;
margin-bottom: 10px;
} display: flex;
justify-content: space-between;
input, select { align-items: center;
width: calc(100% - 20px); }
padding: 8px;
margin-bottom: 10px; .language-container
border-radius: 5px; input[type='text']{
border: 1px solid #ccc; width: 120px;
} }
input[type="checkbox"] {
margin-right: 5px; fieldset {
} width: 100%;
border: 1px solid var(--color4);
.genderItems{ border-radius: 5px;
width: 40%; padding: 10px;
display: flex; margin-bottom: 20px;
justify-content: space-between; background-color: var(--color1);
Web Application Development 10

} JS
document.getElementById('dob').addEve
input[type='radio'], ntListener('change', function() {
input[type='checkbox']{ const dob = new Date(this.value);
accent-color: var(--color4); const today = new Date();
} const age = today.getFullYear() -
dob.getFullYear();
.dashboard{ document.getElementById('age').value
height:100vh; = age;
width: 100%; });
display: flex; let languageCount = 1;
flex-direction: column; document.getElementById('addLanguage'
justify-content: center; ).addEventListener('click',
align-items: center; function() {
} const containers =
document.querySelectorAll('.language-
/* Style for the table */ container');
table { const container =
border-collapse: collapse; containers[containers.length - 1]; //
width: 60%; Select the last language container
}
languageCount++;
th, td {
border: 1px solid #dddddd; const languageDiv =
text-align: left; document.createElement('div');
padding: 8px; languageDiv.classList.add('language-
} container');

th { const label =
background-color: #f2f2f2; document.createElement('label');
} label.textContent = 'Language:';
languageDiv.appendChild(label);
/* Style for the user dashboard
heading */ const input =
h1 { document.createElement('input');
color: #333333; input.type = 'text';
} input.id = 'language' +
languageCount;
/* Style for the paragraph when no input.name = 'languages[]';
user data available */ input.required = true;
p { languageDiv.appendChild(input);
color: red;
font-style: italic; const checkboxes = ['read', 'write',
} 'speak'];
Web Application Development 11

checkboxes.forEach(function(checkbox) // Check if passwords match


{ if (password !== confirmPassword) {
const checkboxInput = // Create and insert error message
document.createElement('input'); if (!errorMessage) {
checkboxInput.type = 'checkbox'; errorMessage =
checkboxInput.id = 'language' + document.createElement("span");
languageCount + '-' + checkbox; errorMessage.id = "password-
checkboxInput.name = 'languages' + error";
checkbox.charAt(0).toUpperCase() + errorMessage.style.color = "red";
checkbox.slice(1) + '[]'; errorMessage.textContent =
checkboxInput.value = checkbox; "Passwords do not match!";
languageDiv.appendChild(checkboxInput document.getElementById("cpass").
); parentNode.appendChild(errorMessage);
}
const checkboxLabel = return false; // Prevent form
document.createElement('label'); submission
checkboxLabel.textContent = } else {
checkbox.charAt(0).toUpperCase() + // Remove error message if passwords
checkbox.slice(1); match
checkboxLabel.htmlFor = 'language' + if (errorMessage) {
languageCount + '-' + checkbox; errorMessage.parentNode.removeChi
languageDiv.appendChild(checkboxLabel ld(errorMessage);
); }
}); }
return true; // Allow form submission
container.parentNode.insertBefore(lan }
guageDiv,
container.nextElementSibling);
});
SERVLETS
RegisterServlet1
function validatePassword() {
var username =
document.getElementById("username").v package register;
alue.trim();
var password =
import
document.getElementById("pass").value
jakarta.servlet.ServletException;
;
import
var confirmPassword =
jakarta.servlet.annotation.WebServlet
document.getElementById("cpass").valu
;
e;
import
var errorMessage =
jakarta.servlet.http.HttpServlet;
document.getElementById("password-
import
error");
jakarta.servlet.http.HttpServletReque
st;
username.value = username;
Web Application Development 12

import //redirect response to form2


jakarta.servlet.http.HttpServletRespo response.sendRedirect("register2.
nse; html");
import }
jakarta.servlet.http.HttpSession; }
import profile.User;
RegisterServlet2
import java.io.IOException;
import java.sql.*; package register;

@WebServlet("/reg1") import
public class RegisterServlet1 extends jakarta.servlet.ServletException;
HttpServlet { import
private static final long jakarta.servlet.annotation.WebServlet
serialVersionUID = 1L; ;
import
public void jakarta.servlet.http.HttpServlet;
service(HttpServletRequest request, import
HttpServletResponse response) throws jakarta.servlet.http.HttpServletReque
ServletException, IOException { st;
import
//create a new session jakarta.servlet.http.HttpServletRespo
HttpSession session = nse;
request.getSession(); import
jakarta.servlet.http.HttpSession;
//update form1 inputs into the import profile.User;
session
User user = new User(); import java.io.IOException;

user.setfName(request.getParamete @WebServlet("/reg2")
r("firstName")); public class RegisterServlet2 extends
user.setmName(request.getParamete HttpServlet {
r("middleName")); private static final long
user.setlName(request.getParamete serialVersionUID = 1L;
r("lastName"));
user.setDob(request.getParameter( public void
"dob")); service(HttpServletRequest request,
user.setAge(Integer.parseInt(requ HttpServletResponse response) throws
est.getParameter("age"))); ServletException, IOException {
user.setGender(request.getParamet
er("gender")); //get the prev session
HttpSession session =
session.setAttribute("user", request.getSession(false);
user); float a = 10;
//get the session attribute
Web Application Development 13

User user = import


(User)session.getAttribute("user"); jakarta.servlet.http.HttpServlet;
//int a = (int)10.5; import
jakarta.servlet.http.HttpServletReque
//update form2 inputs into the st;
session import
user.setQual(request.getParameter jakarta.servlet.http.HttpServletRespo
("qual")); nse;
user.setInst(request.getParameter import
("inst")); jakarta.servlet.http.HttpSession;
user.setMode(request.getParameter import profile.Database;
("mode")); import profile.User;

user.setYear(Integer.parseInt(req import java.io.IOException;


uest.getParameter("year"))); import java.sql.SQLException;
user.setPer(Float.parseFloat(requ
est.getParameter("per"))); @WebServlet("/reg3")
user.setMobile(Long.parseLong(req public class RegisterServlet3 extends
uest.getParameter("mobile"))); HttpServlet {
private static final long
user.setEmail(request.getParamete serialVersionUID = 1L;
r("email"));
user.setAddress(request.getParame public void
ter("address")); service(HttpServletRequest request,
HttpServletResponse response) throws
session.setAttribute("user", ServletException, IOException {
user);
//get the prev session
//redirect the response to form3 HttpSession session =
response.sendRedirect("register3. request.getSession(false);
html");
//get the session attribute
} User user = (User)
session.getAttribute("user");
}
//update form3 input
RegisterServlet3 user.setUname(request.getParamete
r("uname"));
user.setPass(request.getParameter
package register;
("password"));
import
//update into db
jakarta.servlet.ServletException;
Database db = new
import
Database("user");
jakarta.servlet.annotation.WebServlet
try {
;
Web Application Development 14

db.insert(user);
} catch (Exception e) { con =
// TODO Auto-generated catch DriverManager.getConnection(url,
block uname, pass);
e.printStackTrace(); }
}
//invalidate the session public User read(String uname) throws
session.invalidate(); SQLException, ClassNotFoundException
//respond {
response.getWriter().println("Reg
istration is Success"); //load the drive
} //create connection
this.connection();
}
//write query
query = "select * from
DAO CLASS user_profile where uname='"+uname
+"'";
Database:
//create statement
st = con.createStatement();
package profile;
//execute statement
import java.sql.*; ResultSet result =
st.executeQuery(query);
public class Database { User user = new User();
//process the result(select)
String url, uname, pass, db; while(result.next()) {
Connection con; user.setfName(result.getStrin
String query; g(1));
Statement st; user.setmName(result.getStrin
PreparedStatement pt; g(2));
user.setlName(result.getStrin
public Database(String db) { g(3));
super(); user.setDob(result.getString(
this.db = db; 4));
this.url = user.setAge(result.getInt(5))
"jdbc:mysql://localhost:3306/" + ;
this.db; user.setGender(result.getStri
this.uname = "root"; ng(6));
this.pass = "darwin";
} user.setQual(result.getString
(7));
public void connection() throws user.setInst(result.getString
SQLException, ClassNotFoundException (8));
{
Web Application Development 15

user.setMode(result.getString
(9)); pt.setString(7, user.getQual());
user.setYear(result.getInt(10 pt.setString(8, user.getInst());
)); pt.setString(9, user.getMode());
user.setPer(result.getFloat(1 pt.setInt(10, user.getYear());
1)); pt.setFloat(11, user.getPer());
user.setMobile(result.getLong pt.setLong(12, user.getMobile());
(12)); pt.setString(13,
user.setEmail(result.getStrin user.getEmail());
g(13)); pt.setString(14,
user.setAddress(result.getStr user.getAddress());
ing(14));
pt.setString(15,
user.setUname(result.getStrin user.getUname());
g(15)); pt.setString(16,
user.setPass(result.getString user.getPass());
(16));
} //execute pr statement
//close the connection int row = pt.executeUpdate();
con.close(); //close connection
return user;
} return row;
}
public int insert(User user) throws
SQLException, ClassNotFoundException public int delete(String uName)
{ throws SQLException,
//load the drive ClassNotFoundException {
//create connection //load the drive
this.connection(); //create connection
this.connection();
//write query
this.query = "insert into //write query
user_profile values(?, ?, ?, ?, ?, ?, this.query = "delete from
?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"; user_profile where uname=?" ;

//create prepared statement //create statement


pt = con.prepareStatement(query); pt = con.prepareStatement(query);
pt.setString(1, uName);
pt.setString(1, user.getfName());
pt.setString(2, user.getmName()); //execute statement
pt.setString(3, user.getlName()); int row = pt.executeUpdate();
pt.setString(4, user.getDob()); //close connection
pt.setInt(5, user.getAge()); con.close();
pt.setString(6, return row;
user.getGender()); }
Web Application Development 16

if(result.getString(1).equals(pas
public int update(String address, sword)) {
String uName) throws SQLException, con.close();
ClassNotFoundException { return 2;
//load the drive }
//create connection else {
this.connection(); con.close();
return 3;
//write query }
this.query = "update user_profile }
set address=? where uname=?" ; }

//create statement User Class


pt = con.prepareStatement(query);
pt.setString(1, address); package profile;
pt.setString(2, uName);

public class User {


//execute statement
int row = pt.executeUpdate();
private String fName, mName, lName,
//close connection
dob;
con.close();
private int age;
return row;
private String gender;
}

private String qual, inst, mode;


public int validate(String uname,
private int year;
String password) throws SQLException,
private float per;
ClassNotFoundException {
private long mobile;
private String email, address;
this.connection();

private String uname, pass;


query = "select pass from
user_profile where
public User() {
uname='"+uname+"'";
super();
}
//create statement
st = con.createStatement();
public String getfName() {
return fName;
//execute statement
}
ResultSet result =
st.executeQuery(query);
public void setfName(String fName) {
this.fName = fName;
if(!result.next()) {
}
con.close();
return 1;
public String getmName() {
}
return mName;
Web Application Development 17

} }

public void setmName(String mName) { public String getInst() {


this.mName = mName; return inst;
} }

public String getlName() { public void setInst(String inst) {


return lName; this.inst = inst;
} }

public void setlName(String lName) { public String getMode() {


this.lName = lName; return mode;
} }

public String getDob() { public void setMode(String mode) {


return dob; this.mode = mode;
} }

public void setDob(String dob) { public int getYear() {


this.dob = dob; return year;
} }

public int getAge() { public void setYear(int year) {


return age; this.year = year;
} }

public void setAge(int age) { public float getPer() {


this.age = age; return per;
} }

public String getGender() { public void setPer(float per) {


return gender; this.per = per;
} }

public void setGender(String gender) public long getMobile() {


{ return mobile;
this.gender = gender; }
}
public void setMobile(long mobile) {
public String getQual() { this.mobile = mobile;
return qual; }
}
public String getEmail() {
public void setQual(String qual) { return email;
this.qual = qual; }
Web Application Development 18

gender VARCHAR(10),
public void setEmail(String email) { language VARCHAR(50),
this.email = email;
read_language BOOLEAN,
}
write_language BOOLEAN,
public String getAddress() { speak_language BOOLEAN,
return address;
qualification VARCHAR(100) NOT NULL,
}
institution VARCHAR(100) NOT NULL,
public void setAddress(String mode_of_instruction VARCHAR(50),
address) {
this.address = address; year_of_passing INT(4) NOT NULL,
} pass_percentage DECIMAL(5,2) NOT NULL,

contact_number VARCHAR(15) NOT NULL,


public String getUname() {
return uname; email VARCHAR(100) NOT NULL,
} address VARCHAR(255) NOT NULL,

username VARCHAR(100) NOT NULL,


public void setUname(String uname) {
this.uname = uname; password VARCHAR(100) NOT NULL,
} confirm_password VARCHAR(100) NOT NULL

);
public String getPass() {
return pass;
}

public void setPass(String pass) {


this.pass = pass;
}
}

TABLE

CREATE TABLE registration (

id INT AUTO_INCREMENT PRIMARY KEY,

title VARCHAR(10),

firstName VARCHAR(50) NOT NULL,

middleName VARCHAR(50),

lastName VARCHAR(50) NOT NULL,

dob DATE NOT NULL,

age INT,
Web Application Development 19

Database db = new Database("user");


User Profile Dashboard
try {
int result =
Servlet: db.validate(request.getParameter("una
me"),request.getParameter("password")
LoginServlet );

switch(result) {
package login; case 1->{
session.setAttribute("error",
import "username is wrong");
jakarta.servlet.RequestDispatcher; response.sendRedirect("login.
import jsp");
jakarta.servlet.ServletException; }
import case 2->{
jakarta.servlet.annotation.WebServlet RequestDispatcher rd =
; request.getRequestDispatcher("dashboa
import rd");
jakarta.servlet.http.HttpServlet; rd.forward(request,
import response);
jakarta.servlet.http.HttpServletReque }
st; case 3->{
import
session.setAttribute("error",
jakarta.servlet.http.HttpServletRespo "password is wrong");
nse; response.sendRedirect("login.
import jsp");
jakarta.servlet.http.HttpSession; }
import profile.Database; }
} catch (Exception e) {
import java.io.IOException; // TODO Auto-generated catch
import java.sql.SQLException; block
e.printStackTrace();
@WebServlet("/login") }
public class LoginServlet extends }
HttpServlet {
private static final long }
serialVersionUID = 1L;

public void
service(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {

HttpSession session =
request.getSession();
Web Application Development 20

DashboardServlet } catch (Exception e) {


// TODO Auto-generated catch
package login; block
e.printStackTrace();
import }
jakarta.servlet.ServletException; }
import
jakarta.servlet.annotation.WebServlet }
;
import
JSP PAGE
jakarta.servlet.http.HttpServlet;
import
jakarta.servlet.http.HttpServletReque <%@ page language="java"
st; contentType="text/html; charset=UTF-
import 8"
jakarta.servlet.http.HttpServletRespo pageEncoding="UTF-8"%>
nse; <%@ taglib prefix="c"
import uri="http://java.sun.com/jsp/jstl/cor
jakarta.servlet.http.HttpSession; e" %>
import profile.Database;
<!DOCTYPE html>
import java.io.IOException; <html>
import java.sql.SQLException; <head>
<title>User Dashboard</title>
@WebServlet("/dashboard") <link rel="stylesheet"
public class DashboardServlet extends href="style.css">
HttpServlet { </head>
private static final long <body>
serialVersionUID = 1L;

public void <div class="dashboard">


service(HttpServletRequest request, <h1>User Dashboard</h1>
HttpServletResponse response) throws <!-- Displaying user information -->
ServletException, IOException { <table border="1">
<colgroup>
Database db = new <col style="width: 30%;"> <!-
Database("user"); - Adjust width of the first column --
HttpSession session = >
request.getSession(false); <col style="width: 70%;"> <!-
try { - Adjust width of the second column -
session.setAttribute("user", ->
db.read(request.getParameter("uname") </colgroup>
));; <tr>
response.sendRedirect("dashbo <th>Field</th>
ard.jsp"); <th>Value</th>
Web Application Development 21

</tr> <tr>
<tr> <td>Mobile:</td>
<td>First Name:</td> <td>${user.mobile}</td>
<td>${user.fName}</td> </tr>
</tr> <tr>
<tr> <td>Email:</td>
<td>Middle Name:</td> <td>${user.email}</td>
<td>${user.mName}</td> </tr>
</tr> <tr>
<tr> <td>Address:</td>
<td>Last Name:</td> <td>${user.address}</td>
<td>${user.lName}</td> </tr>
</tr> </table>
<tr> </div>
<td>Date of Birth:</td>
<td>${user.dob}</td>
</tr> </body>
<tr> </html>
<td>Age:</td>
<td>${user.age}</td>
</tr>
<tr>
<td>Gender:</td>
<td>${user.gender}</td>
</tr>
<tr>
<td>Qualification:</td>
<td>${user.qual}</td>
</tr>
<tr>
<td>Institution:</td>
<td>${user.inst}</td>
</tr>
<tr>
<td>Mode of Study:</td>
<td>${user.mode}</td>
</tr>
<tr>
<td>Year of Study:</td>
<td>${user.year}</td>
</tr>
<tr>
<td>Percentage:</td>
<td>${user.per}</td>
</tr>

You might also like