Scribd
Upload
20 views24 pages

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
20 views24 pages

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

WEB APP - LAB MANUAL

Dineshkumar Thangavel

QISCET
Skill Development Course
Table of Content

[Link] 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="[Link]"></script>

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

</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([Link]); .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">
[Link]('DOMContent <span id="scoreTitle">Score:</span>
Loaded', function () { <span id="score">0</span>
</div>
const hamburger =
[Link]('hamburger') <script src="[Link]"></script>
const navMenu = </body>
[Link]('nav-menu') </html>

[Link]('click
CSS
', function(){
[Link]('sho
w') :root{
[Link]('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="[Link]">
</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; [Link] = '#FF004D'
color: var(--color4); [Link] = 'black'
}
// for(let i=0; i<[Link]; i++)
// [Link](snake[i].x,
JS snake[i].y, food, food)

[Link]((part)=>{
const score =
[Link](part.x, part.y,
[Link]('score')
food, food)
let s = 0
[Link](part.x, part.y,
food, food)
const board =
})
[Link]('gameBoard')
}
let ctx = [Link]('2d')

function displayFood(){
let width = [Link]
xFood =
let height = [Link]
[Link]([Link]()*(width/food)
let food = 25
)*food
let xFood = 0
yFood =
let yFood = 0
[Link]([Link]()*(height/food
let xs = food
))*food
let ys = 0
[Link] = '#cc036b'
let started = false
[Link](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){
[Link]('keydown',
started = true
startGame)//event
nextMove()
start()
}
function start(){
if([Link] == 37 && xs!=food){
background()
xs = -food
displaySnake()
ys = 0
displayFood()
} }
else if([Link] == 39 && xs!=-
function background(){ food){
xs = food
[Link] = 'black'
ys = 0
[Link](0, 0, width, height)
}
}
Web Application Development 4

else if([Link] == 38 && s++


ys!=food){ [Link] = s
xs = 0 displayFood()
ys = -food; }
} else{
else if([Link] == 40 && ys!=- // del the tail
food){ let tail = [Link]()
xs = 0 // repaint the tail
ys = food [Link] = 'black'
} [Link](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)
[Link](0, 0, width, return false
height) else
[Link] = "bold 50px serif" return true
[Link] = "black" }
[Link] = 'center'
[Link]("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
[Link] = '#FF004D'
[Link] = 'black'
[Link](head.x, head.y, food,
food)
[Link](head.x, head.y, food,
food)
// add the head
[Link](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="[Link]"> <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="[Link]"></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="[Link]">
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="[Link]"></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="[Link]">
<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([Link]);
<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="[Link]"></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
[Link]('dob').addEve
input[type='radio'], ntListener('change', function() {
input[type='checkbox']{ const dob = new Date([Link]);
accent-color: var(--color4); const today = new Date();
} const age = [Link]() -
[Link]();
.dashboard{ [Link]('age').value
height:100vh; = age;
width: 100%; });
display: flex; let languageCount = 1;
flex-direction: column; [Link]('addLanguage'
justify-content: center; ).addEventListener('click',
align-items: center; function() {
} const containers =
[Link]('.language-
/* Style for the table */ container');
table { const container =
border-collapse: collapse; containers[[Link] - 1]; //
width: 60%; Select the last language container
}
languageCount++;
th, td {
border: 1px solid #dddddd; const languageDiv =
text-align: left; [Link]('div');
padding: 8px; [Link]('language-
} container');

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

[Link](function(checkbox) // Check if passwords match


{ if (password !== confirmPassword) {
const checkboxInput = // Create and insert error message
[Link]('input'); if (!errorMessage) {
[Link] = 'checkbox'; errorMessage =
[Link] = 'language' + [Link]("span");
languageCount + '-' + checkbox; [Link] = "password-
[Link] = 'languages' + error";
[Link](0).toUpperCase() + [Link] = "red";
[Link](1) + '[]'; [Link] =
[Link] = checkbox; "Passwords do not match!";
[Link](checkboxInput [Link]("cpass").
); [Link](errorMessage);
}
const checkboxLabel = return false; // Prevent form
[Link]('label'); submission
[Link] = } else {
[Link](0).toUpperCase() + // Remove error message if passwords
[Link](1); match
[Link] = 'language' + if (errorMessage) {
languageCount + '-' + checkbox; [Link]
[Link](checkboxLabel ld(errorMessage);
); }
}); }
return true; // Allow form submission
[Link](lan }
guageDiv,
[Link]);
});
SERVLETS
RegisterServlet1
function validatePassword() {
var username =
[Link]("username").v package register;
[Link]();
var password =
import
[Link]("pass").value
[Link];
;
import
var confirmPassword =
[Link]
[Link]("cpass").valu
;
e;
import
var errorMessage =
[Link];
[Link]("password-
import
error");
[Link]
st;
[Link] = username;
Web Application Development 12

import //redirect response to form2


[Link] [Link]("register2.
nse; html");
import }
[Link]; }
import [Link];
RegisterServlet2
import [Link];
import [Link].*; package register;

@WebServlet("/reg1") import
public class RegisterServlet1 extends [Link];
HttpServlet { import
private static final long [Link]
serialVersionUID = 1L; ;
import
public void [Link];
service(HttpServletRequest request, import
HttpServletResponse response) throws [Link]
ServletException, IOException { st;
import
//create a new session [Link]
HttpSession session = nse;
[Link](); import
[Link];
//update form1 inputs into the import [Link];
session
User user = new User(); import [Link];

[Link]([Link] @WebServlet("/reg2")
r("firstName")); public class RegisterServlet2 extends
[Link]([Link] HttpServlet {
r("middleName")); private static final long
[Link]([Link] serialVersionUID = 1L;
r("lastName"));
[Link]([Link]( public void
"dob")); service(HttpServletRequest request,
[Link]([Link](requ HttpServletResponse response) throws
[Link]("age"))); ServletException, IOException {
[Link]([Link]
er("gender")); //get the prev session
HttpSession session =
[Link]("user", [Link](false);
user); float a = 10;
//get the session attribute
Web Application Development 13

User user = import


(User)[Link]("user"); [Link];
//int a = (int)10.5; import
[Link]
//update form2 inputs into the st;
session import
[Link]([Link] [Link]
("qual")); nse;
[Link]([Link] import
("inst")); [Link];
[Link]([Link] import [Link];
("mode")); import [Link];

[Link]([Link](req import [Link];


[Link]("year"))); import [Link];
[Link]([Link](requ
[Link]("per"))); @WebServlet("/reg3")
[Link]([Link](req public class RegisterServlet3 extends
[Link]("mobile"))); HttpServlet {
private static final long
[Link]([Link] serialVersionUID = 1L;
r("email"));
[Link]([Link] public void
ter("address")); service(HttpServletRequest request,
HttpServletResponse response) throws
[Link]("user", ServletException, IOException {
user);
//get the prev session
//redirect the response to form3 HttpSession session =
[Link]("register3. [Link](false);
html");
//get the session attribute
} User user = (User)
[Link]("user");
}
//update form3 input
RegisterServlet3 [Link]([Link]
r("uname"));
[Link]([Link]
package register;
("password"));
import
//update into db
[Link];
Database db = new
import
Database("user");
[Link]
try {
;
Web Application Development 14

[Link](user);
} catch (Exception e) { con =
// TODO Auto-generated catch [Link](url,
block uname, pass);
[Link](); }
}
//invalidate the session public User read(String uname) throws
[Link](); SQLException, ClassNotFoundException
//respond {
[Link]().println("Reg
istration is Success"); //load the drive
} //create connection
[Link]();
}
//write query
query = "select * from
DAO CLASS user_profile where uname='"+uname
+"'";
Database:
//create statement
st = [Link]();
package profile;
//execute statement
import [Link].*; ResultSet result =
[Link](query);
public class Database { User user = new User();
//process the result(select)
String url, uname, pass, db; while([Link]()) {
Connection con; [Link]([Link]
String query; g(1));
Statement st; [Link]([Link]
PreparedStatement pt; g(2));
[Link]([Link]
public Database(String db) { g(3));
super(); [Link]([Link](
[Link] = db; 4));
[Link] = [Link]([Link](5))
"jdbc:mysql://localhost:3306/" + ;
[Link]; [Link]([Link]
[Link] = "root"; ng(6));
[Link] = "darwin";
} [Link]([Link]
(7));
public void connection() throws [Link]([Link]
SQLException, ClassNotFoundException (8));
{
Web Application Development 15

[Link]([Link]
(9)); [Link](7, [Link]());
[Link]([Link](10 [Link](8, [Link]());
)); [Link](9, [Link]());
[Link]([Link](1 [Link](10, [Link]());
1)); [Link](11, [Link]());
[Link]([Link] [Link](12, [Link]());
(12)); [Link](13,
[Link]([Link] [Link]());
g(13)); [Link](14,
[Link]([Link] [Link]());
ing(14));
[Link](15,
[Link]([Link] [Link]());
g(15)); [Link](16,
[Link]([Link] [Link]());
(16));
} //execute pr statement
//close the connection int row = [Link]();
[Link](); //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
[Link](); //create connection
[Link]();
//write query
[Link] = "insert into //write query
user_profile values(?, ?, ?, ?, ?, ?, [Link] = "delete from
?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"; user_profile where uname=?" ;

//create prepared statement //create statement


pt = [Link](query); pt = [Link](query);
[Link](1, uName);
[Link](1, [Link]());
[Link](2, [Link]()); //execute statement
[Link](3, [Link]()); int row = [Link]();
[Link](4, [Link]()); //close connection
[Link](5, [Link]()); [Link]();
[Link](6, return row;
[Link]()); }
Web Application Development 16

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

//create statement User Class


pt = [Link](query);
[Link](1, address); package profile;
[Link](2, uName);

public class User {


//execute statement
int row = [Link]();
private String fName, mName, lName,
//close connection
dob;
[Link]();
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;
[Link]();

private String uname, pass;


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

} }

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


[Link] = mName; return inst;
} }

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


return lName; [Link] = inst;
} }

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


[Link] = lName; return mode;
} }

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


return dob; [Link] = mode;
} }

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


[Link] = dob; return year;
} }

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


return age; [Link] = year;
} }

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


[Link] = age; return per;
} }

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


return gender; [Link] = per;
} }

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


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

gender VARCHAR(10),
public void setEmail(String email) { language VARCHAR(50),
[Link] = 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) {
[Link] = 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) {
[Link] = uname; password VARCHAR(100) NOT NULL,
} confirm_password VARCHAR(100) NOT NULL

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

public void setPass(String pass) {


[Link] = 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: [Link]([Link]("una
me"),[Link]("password")
LoginServlet );

switch(result) {
package login; case 1->{
[Link]("error",
import "username is wrong");
[Link]; [Link]("login.
import jsp");
[Link]; }
import case 2->{
[Link] RequestDispatcher rd =
; [Link]("dashboa
import rd");
[Link]; [Link](request,
import response);
[Link] }
st; case 3->{
import
[Link]("error",
[Link] "password is wrong");
nse; [Link]("login.
import jsp");
[Link]; }
import [Link]; }
} catch (Exception e) {
import [Link]; // TODO Auto-generated catch
import [Link]; block
[Link]();
@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 =
[Link]();
Web Application Development 20

DashboardServlet } catch (Exception e) {


// TODO Auto-generated catch
package login; block
[Link]();
import }
[Link]; }
import
[Link] }
;
import
JSP PAGE
[Link];
import
[Link] <%@ page language="java"
st; contentType="text/html; charset=UTF-
import 8"
[Link] pageEncoding="UTF-8"%>
nse; <%@ taglib prefix="c"
import uri="[Link]
[Link]; e" %>
import [Link];
<!DOCTYPE html>
import [Link]; <html>
import [Link]; <head>
<title>User Dashboard</title>
@WebServlet("/dashboard") <link rel="stylesheet"
public class DashboardServlet extends href="[Link]">
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 = >
[Link](false); <col style="width: 70%;"> <!-
try { - Adjust width of the second column -
[Link]("user", ->
[Link]([Link]("uname") </colgroup>
));; <tr>
[Link]("dashbo <th>Field</th>
[Link]"); <th>Value</th>
Web Application Development 21

</tr> <tr>
<tr> <td>Mobile:</td>
<td>First Name:</td> <td>${[Link]}</td>
<td>${[Link]}</td> </tr>
</tr> <tr>
<tr> <td>Email:</td>
<td>Middle Name:</td> <td>${[Link]}</td>
<td>${[Link]}</td> </tr>
</tr> <tr>
<tr> <td>Address:</td>
<td>Last Name:</td> <td>${[Link]}</td>
<td>${[Link]}</td> </tr>
</tr> </table>
<tr> </div>
<td>Date of Birth:</td>
<td>${[Link]}</td>
</tr> </body>
<tr> </html>
<td>Age:</td>
<td>${[Link]}</td>
</tr>
<tr>
<td>Gender:</td>
<td>${[Link]}</td>
</tr>
<tr>
<td>Qualification:</td>
<td>${[Link]}</td>
</tr>
<tr>
<td>Institution:</td>
<td>${[Link]}</td>
</tr>
<tr>
<td>Mode of Study:</td>
<td>${[Link]}</td>
</tr>
<tr>
<td>Year of Study:</td>
<td>${[Link]}</td>
</tr>
<tr>
<td>Percentage:</td>
<td>${[Link]}</td>
</tr>

You might also like