Scribd
Upload
132 views

Web Technology Lab Record

The document is a laboratory record for a Web Technologies course. It contains an index of 8 experiments conducted including developing websites using HTML, CSS and JavaScript, developing web applications using APIs and databases, and creating modules for user registration, login, shopping cart, and more. It also includes the vision, mission, and objectives of the computer science department and institution.

Uploaded by

21CS185 VISHAL.M
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
132 views

Web Technology Lab Record

The document is a laboratory record for a Web Technologies course. It contains an index of 8 experiments conducted including developing websites using HTML, CSS and JavaScript, developing web applications using APIs and databases, and creating modules for user registration, login, shopping cart, and more. It also includes the vision, mission, and objectives of the computer science department and institution.

Uploaded by

21CS185 VISHAL.M
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/ 46

DEPARTMENT OF

COMPUTER SCIENCE AND ENGINEERING

LABORATORY RECORD

NAME : -------------------------------------------------

REGSITER NUMBER : -------------------------------------------------

YEAR/SEM : -------------------------------------------------

SUB. CODE/TITLE : -------------------------------------------------

Certified that this is a Bonafide record of work done by the above student during the academic year
____________.

Signature of the Course In-charge Signature of the HoD

Submitted for the End Semester Practical Examination held on ---------------

INTERNAL EXAMINER EXTERNAL EXAMINER


INDEX

Inte Viva
Prepa Observ Resu
Exp. rpre - Total Pag Sig
Date Name of the Experiments ration ation lts e
No tatio Voce (20) n
(4) (4) (4) No.
n (4) (4)

Develop a web site with


minimum 3 pages for an
1
enterprise using HTML and
CSS.

Develop a simple web page


2 with BMI calculator using
JavaScript.

Develop a web application


using Java script to pull the
3
weather information using
appropriate API calls.

Create a user registration


form which gets name,
4 phone number, email, pin
code, password, confirm
password and date of birth.

Develop a login and


registration modules of a
5 technical event organized
by the Department using
PHP and MySQL.

Develop a web application


6 food delivery system using
PHP and MySQL.

Develop a leave
management system for
7 telemarketing organization
using Java servlets and
JDBC.

Develop a shopping cart


8 using Java servlets and
JDBC.

Total Marks ( 160 )

Total Marks ( 75 )

2
U21CS504 – WEB TECHNOLOGIES LABORATORY
VISION AND MISSION OF THE INSTITUTION

Vision

To become a premier institute of academic excellence by imparting technical, intellectual and


professional skills to students for meeting the diverse needs of industry, society, the nation and the world
at large.

Mission
 Commitment to offer value-based education and enhancement of practical skills.
 Continuous assessment of teaching and learning processes through scholarly activities.
 Enriching research and innovation activities in collaboration with industry and institutes of repute.
 Ensuring the academic processes to uphold culture, ethics and social responsibilities.

VISION AND MISSION OF THE DEPARTMENT

Vision

To foster the needs of students by providing learner centric teaching environment, continuous learning,
research and development to become thriving professionals and entrepreneurs to excel in the field of
computer science and contribute to the society.

Mission
 Provide holistic education incorporating the state-of-the-art technologies to produce successful
professionals.
 Facilitate the students to pursue higher education and research in the areas related to Computer
Science and Engineering.
 Promote strong collaborations with the industries and steer the students to nurture their interest in
continuous learning to meet the changing needs of the society.

3
EX.NO: 01
WEBSITE
DATE:

AIM:

To develop a web site with minimum 3 pages for an enterprise using HTML and CSS. Include
tables, forms, images and links wherever necessary. The website should provide information about the
people, products, services, existing clients and all the relevant information.

ALGORITHM:

Step 1: Determine your content and page structure.


Step 2: Develop HTML pages (e.g., Home, Products, Services).
Step 3: Populate pages with text, images, and links.
Step 4: Include a menu with hyperlinks for page navigation.
Step 5: Apply CSS to control the website's visual appearance.
Step 6: Add tables for tabular data and forms for user interaction.
Step 7: Verify functionality and correct any issues.
Step 8: Optimize and compress images for faster loading.
Step 9: Consider responsiveness for various devices.
Step 10: Proofread content and make final adjustments.
Step 11: Upload files to web hosting for public access.
Step 12: Continuously update and improve the website.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kpr Webpage</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheetintegrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384Mr
cW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<style>
.custom-container {
height: 90px;
}

.nav-links a {
color: white;
text-decoration: none;
margin-right: 75px;
}

4
.social-icons img {
height: 30px;
margin-right: 2px;
}
.image {
margin-top: 100px;
width: 130px;
height: 200px;
object-fit: cover;
border: 1px solid #d8dedc;
}
.footer {
border-radius: 10px;
background-color: #bdc5ce;
padding: 20px;
text-align: center;
}

.social-icons {
font-size: 24px;
margin: 0 5px;
}
.forms{
margin: 10px 5px 5px 10px ;
background-color: aquamarine;
padding: 5px 15px 5px 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="jumbotron" style="background-color: rgb(28, 25, 25);">
<nav class="navbar custom-container">
<a href="https://www.forbesindia.com/magazine/"><img src="forbes-logo.png" style="height:
70px;"></a>
<div class="nav-links">

<a href="https://www.forbesindia.com/magazine/">LEADERSHIP</a>

<a href="https://www.forbesindia.com/magazine/">INNOVATION</a>

<a href="https://www.forbesindia.com/magazine/">BILLIONAIRES</a>
<a href="https://www.forbesindia.com/magazine/">LISTS</a>
<a href="https://www.forbesindia.com/magazine/">STARTUPS</a>
<a href="https://www.forbesindia.com/magazine/">PODCASTS</a>
<a href="https://www.forbesindia.com/magazine/">LIFE</a>
<a href="https://www.forbesindia.com/magazine/">SUBSCRIBE</a>
</div>
</nav>
</div>

<div style=" width: 100%; height: 1070px;">


<div style=" width: 70%; height: 750px; float:left;">
5
<a style="justify-content: center;">Home/Forbes India/Latest Issue</a>
<div class="container" style="height: 150px; justify-content: space-between;">
<h1>Latest Issue</h1>
<h5>Edition :August 5</h5>
<div class="card">
<div class="card-header">
Edition
</div>
<div class="card-body">
<h5 class="card-title"><Article></Article></h5>
<ahref="#">
<img src="forbesindia_20230731103309_300x500.jpg" alt="" >
<img src="main2.jpg" alt="" style="margin-left: 100px"; ></a>
<p class="card-text">With supporting text below as a natural lead-in to additional
content.</p>

</div>
</div>

<div class="card">
<div class="card-header">
Forbes India
</div>
<div class="card-body">
<h5 class="card-title"><Article></Article></h5>
<a href="#"><img src="cove2.jpg" style="height: 175px; width: 175px; alt=""></a>
<p class="card-text">Forbes India 13th Anniversary: Rewind of Key Milestones of
India's Corporates and Startups
A rewind of the key milestones in India's corporates and startups, through the lens of 13
years of Forbes India</p>

</div>
</div>
</div>
</nav>
</div>
<div style="width: 30%; height: 550px; float: right;">

<nav class="navbar custom-container">


<a href="https://www.forbesindia.com/magazine/" style="color: black;" >Follow</a>
<a><img src="insta.jpg" style="height: 25px; width: 25px;"alt=""></a>
<a><img src="face.png" style="height: 25px; width: 25px;" alt=""></a>
<a><img src="pngtree-twitter-social-media-round-icon-png-image_6315985.png"
style="height: 25px; width: 25px;" alt=""></a>
<a><img src="youtube.png" style="height: 25px; width: 25px;"alt=""></a>
</nav>
<div class="container">
<h2>Popular Articles</h2>
<ol>
<li><a>Byju's problems pile on — what's the end game, and how will this impact
India's edtech startups?</a></li>
<li><a>The Tata Group has built an electric vehicle universe. Can it help its global
ambitions?</a></li>

6
<li><a>Tata Group has built an electric vehicle universe. Can it help its global
ambitions?</a></li>
<li><a>How Revant Himatsingka is waging a battle against FMCG companies and
bringing them to their knees</a></li>
<li><a>Star, superstar and class act: Meet the sword of Davids</a></li>
<li><a>Dharavi redevelopment: Can Adani really do it?</a></li>
<li><a>Tech Mahindra ends lower after tough misses. Five takeaways from
Q1</a></li>
<li><a>Inside Kota: Meet the 'JOMO' boys and girls</a></li>
<li><a>Buyback Math: Why Larsen & Toubro is returning cash to
shareholders</a></li>
<li><a>From broken dreams in Kota to Air India's Maharaja, here are our most-read
stories of the week</a></li>
<li><a>Qatar's QIA fund mulling a minority stake</a></li>
</ol>
</div>

</div>
</div>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" style="max-
height: 600px; max-width: 900px; margin: auto;">
<div class="carousel-inner" style="max-height: 800px;">
<div class="carousel-item active">
<img src="ss6.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h3>Monsoon fury wreaks havoc over northern India
</h3>

</div>
</div>
<div class="carousel-item">
<img src="ss3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h3>SEMICONDUCTOR</h3>
<p>Explained: The unbelievably complex process of making semiconductor chips</p>
</div>
</div>
<div class="carousel-item">
<img src="ss7.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h3>Salzburg cultural festival, World Aquatics Championships, shopping in Rennes: Eye-
catching photos of this week</h3>
<p></p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
7
<span class="visually-hidden">Next</span>
</button>
</div>

<div class="container mt-200">


<div class="row">
<div class="col-md-2">
<img src="image1.jpg" alt="Image 1" class="image">
<p>11 August, 2023</p>
</div>
<div class="col-md-2">
<img src="image2.jpg" alt="Image 2" class="image">
<p>28 July, 2023</p>
</div>
<div class="col-md-2">
<img src="image3.jpg" alt="Image 3" class="image">
<p>14 July, 2023</p>
</div>
<div class="col-md-2">
<img src="image4.jpg" alt="Image 4" class="image">
<p>30 June, 2023</p>
</div>
<div class="col-md-2">
<img src="image5.gif" alt="Image 5" class="image">
<p>16 June, 2023</p>
</div>
<p style="margin-right:auto;"><a href="https://www.forbesindia.com/archive/"
>more>></a></p>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-
target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Chandrayaan-3 'on schedule', snaps new Moon images from altitude of about 70 km
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-
headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"> The Chandrayaan-3 mission is on schedule to attempt a soft
landing on the Moon on Wednesday, August 23, the Indian Space Research Organisation (Isro) said.

The space agency said all systems are undergoing regular checks and smooth sailing is
continuing.<code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-
target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Chandrayaan-3 landing will be postponed to August 27 if…: Top Isro scientist
</button>
</h2>
8
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-
headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">.Space Applications Centre-Isro, Ahmedabad Director has
expressed the possibility of pushing the appropriate date to land Chandrayaan-3 on the Moon.</div>
</div>
</div>

</div>

<form class="forms">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">Enter the email.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-


target="#offcanvasBottom" aria-controls="offcanvasBottom">click To know more details..</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-


labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel"> hello there</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"
style="margin: 5px 10px 5px 10px;"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>&copy; COPYRIGHT 2023, FORBESINDIA.COM ALL RIGHTS RESERVED</p>
<a href="#" class="social-icons"><img src="pngtree-twitter-social-media-round-icon-png-
image_6315985.png" alt="Twitter"></a>
<a href="#" class="social-icons"><img src="youtube.png" alt="YouTube"></a>
<a href="#" class="social-icons"><img src="insta.jpg" alt="Instagram"></a>
</div>
</div>
</div>
9
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

OUTPUT:

10
DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:
Thus the program has been executed successfully and the output is verified.
11
EX.NO: 02 BMI CALCULATOR
DATE:

AIM:

To develop a simple web page with BMI calculator using JavaScript. Get the required
information from the user. Provide necessary analysis and suggestions based on the BMI.

ALGORITHM:

Step 1: Create an HTML file with a form to input weight and height.
Step 2: Write a JavaScript function to calculate BMI based on user input and
Step 3: Provide analysis and suggestions.
Step 4: Add CSS for styling your web page (optional).
Step 5: Open the HTML file in a web browser and test the BMI calculator.
Step 6: Consider adding extra features like unit selection or charts for visual representation.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<script>
function calculateBMI() {
var weight = parseFloat(document.getElementById("weight").value);
var height = parseFloat(document.getElementById("height").value) / 100; // Convert height to
meters
var bmi = weight / (height * height);
var result = document.getElementById("result");

if (isNaN(bmi)) {
result.innerHTML = "Please enter valid values.";
} else {
result.innerHTML = "Your BMI is: " + bmi.toFixed(2);

if (bmi < 18.5) {


result.innerHTML += "<br>Underweight";
} else if (bmi >= 18.5 && bmi < 24.9) {
result.innerHTML += "<br>Normal weight";
} else if (bmi >= 25 && bmi < 29.9) {
result.innerHTML += "<br>Overweight";
} else {
result.innerHTML += "<br>Obese";
}
}
}
</script>
</head>
12
<body>
<h1>BMI Calculator</h1>
<p>Enter your weight (kg): <input type="text" id="weight"></p>
<p>Enter your height (cm): <input type="text" id="height"></p>
<button onclick="calculateBMI()">Calculate BMI</button>
<div id="result"></div>
</body>
</html>

OUTPUT:

DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.

13
EX.NO: 03 WEATHER INFORMATION WEB APP
DATE:

AIM:

To develop a web application using Java script to pull the weather information of a given
location using appropriate API calls.

ALGORITHM:

Step 1: Choose a weather data provider and get an API key.


Step 2: Create an HTML structure with input fields and a button for location.
Step 3: Write JavaScript to fetch weather data based on user input using the selected API.
Step 4: Populate the web page with weather information.
Step 5: Implement error handling for API requests.
Step 6: Style the application with CSS.
Step 7: Test with different locations.
Step 8: Add features like geolocation or weather icons.
Step 9: Document usage instructions and API key setup.
Step 10: Host the application if needed.
Step 11: Ensure API and privacy compliance for public use.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--The CSS styling-->
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(rgb(123, 184, 104), rgb(13, 87, 10));
font-size: 2rem;
font-family: sans-serif;
color: rgb(7, 9, 10);
}
.container {
height: 20rem;
width: 15rem;
background-color: rgb(152, 228, 165);

14
text-align: center;
padding-top: 12px;
border-radius: 16px;
border: 2px solid rgb(14, 43, 1);
}
</style>
</head>
<body>
<div class="container">
<div class="icon">---</div>
<div class="temp">-°C</div>
<div class="summary">----</div>
<div class="location"></div>
</div>
<!--Linking the javascript code-->
<script src="script.js">

// Declaring the variables


let lon;
let lat;
let temperature = document.querySelector(".temp");
let summary = document.querySelector(".summary");
let loc = document.querySelector(".location");
let icon = document.querySelector(".icon");
const kelvin = 273;

window.addEventListener("load", () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position);
lon = position.coords.longitude;
lat = position.coords.latitude;

// API ID
const api = "6d055e39ee237af35ca066f35474e9df";

// API URL
const base =
`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&` +
`lon=${lon}&appid=6d055e39ee237af35ca066f35474e9df`;

// Calling the API


fetch(base)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
temperature.textContent =
Math.floor(data.main.temp - kelvin) + "°C";
summary.textContent = data.weather[0].description;
loc.textContent = data.name + "," + data.sys.country;
let icon1 = data.weather[0].icon;
icon.innerHTML =
15
`<img src="icons/${icon1}.svg" style= 'height:10rem'/>`;
});
});
}
});
</script>
</body>
</html>

OUTPUT:

DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.

16
EX.NO: 04 FORM VALIDATION
DATE:

AIM:
To create a user registration form that gets name, phone number, email, pin code, password,
confirm password and date of birth. All are mandatory fields. Provide validation for all the above fields.

ALGORITHM:
Step 1: Get the number of elements to be in the list
Step 2: Get the number of elements to be in the list
Step 3: Get the elements for the list
Step 4: Get the elements to be searched in the list
Step 5: Make a copy of list as a new list
Step 6: Sort the new list
Step 7: Compare the new list with the original list. If it’s same then print as “In ascending order” and
If not print as “Not in ascending order”

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.registration-form {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 400px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
font-weight: bold;
17
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="registration-form">
<h2>User Registration</h2>
<form id="user-registration-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="pincode">Pin Code</label>
<input type="text" id="pincode" name="pincode" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>
<div class="form-group">
18
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
</div>
<button type="submit">Register</button>
</form>
</div>

<script>
const form = document.getElementById("user-registration-form");

form.addEventListener("submit", function(event) {
const password = form.querySelector("#password").value;
const confirmPassword = form.querySelector("#confirm-password").value;

if (password !== confirmPassword) {


alert("Passwords do not match!");
event.preventDefault();
}
});
</script>
</body>
</html>

OUTPUT:

19
DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.

20
EX.NO: 05 LOGIN AND REGISTRATION
DATE:

AIM:
To develop login and registration modules for technical event organized by the Department
using PHP and MySQL.
ALGORITHM:
Step 1: Create a MySQL database.
Step 2: Develop a user registration page.
Step 3: Create a login page with user authentication.
Step 4: Build a user dashboard for event information.
Step 5: Write PHP scripts for database interactions.
Step 6: Implement security features.
Step 7: Apply CSS for a professional appearance.
Step 8: Thoroughly test the modules.
Step 9: Provide user instructions.
Step 10: Host on a web server.
Step 11: Ensure legal compliance.
Step 12: Establish backup procedures.

PROGRAM:
<?php

$showAlert = false;
$showError = false;
$exists=false;

if($_SERVER["REQUEST_METHOD"] == "POST") {

// Include file which makes the


// Database Connection.
include 'dbconnect.php';

$username = $_POST["username"];
$password = $_POST["password"];
$cpassword = $_POST["cpassword"];

$sql = "Select * from users where username='$username'";

$result = mysqli_query($conn, $sql);

$num = mysqli_num_rows($result);

// This sql query is use to check if


// the username is already present
// or not in our Database
if($num == 0) {
if(($password == $cpassword) && $exists==false) {

21
$hash = password_hash($password,
PASSWORD_DEFAULT);

// Password Hashing is used here.


$sql = "INSERT INTO `users` ( `username`,
`password`, `date`) VALUES ('$username',
'$hash', current_timestamp())";

$result = mysqliquery($conn, $sql);

if ($result) {
$showAlert = true;
}
}
else {
$showError = "Passwords do not match";
}
}// end if

if($num>0)
{
$exists="Username not available";
}

}//end if

?>

<!doctype html>
<html lang="en">
<head>

<!-- Required meta tags -->


<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1,
shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>

<body>

<?php

if($showAlert) {

echo ' <div class="alert alert-success


22
alert-dismissible fade show" role="alert">

<strong>Success!</strong> Your account is


now created and you can login.
<button type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> ';
}

if($showError) {

echo ' <div class="alert alert-danger


alert-dismissible fade show" role="alert">
<strong>Error!</strong> '. $showError.'

<button type="button" class="close"


data-dismiss="alert aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> ';
}

if($exists) {
echo ' <div class="alert alert-danger
alert-dismissible fade show" role="alert">

<strong>Error!</strong> '. $exists.'


<button type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> ';
}

?>

<div class="container my-4 ">

<h1 class="text-center">Signup Here</h1>


<form action="signup.php" method="post">

<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
name="username" aria-describedby="emailHelp">
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" name="password">
</div>
23
<div class="form-group">
<label for="cpassword">Confirm Password</label>
<input type="password" class="form-control"
id="cpassword" name="cpassword">

<small id="emailHelp" class="form-text text-muted">


Make sure to type the same password
</small>
</div>

<button type="submit" class="btn btn-primary">


SignUp
</button>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="
https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="
sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src="
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
</script>
</body>
</html>

OUTPUT:

24
DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.

25
EX.NO: 06
FOOD DELIVERY SYSTEM
DATE:

AIM:
To develop a web application food delivery system that can be used by customers to order items
from multiple restaurants using PHP and MySQL.

ALGORITHM:
Step 1: Define system requirements and user roles.
Step 2: Create a MySQL database for restaurants, menus, orders, and customers.
Step 3: Implement secure registration and login processes.
Step 4: Allow restaurants to manage profiles and menus.
Step 5: Enable customers to place orders and restaurants to confirm or reject them.
Step 6: Integrate secure payment processing for online transactions.
Step 7: Implement order status tracking and delivery management.
Step 8: Develop an admin panel for system management and ensure data security.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-
label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
26
<h1 class="text-uppercase text-white font-weight-bold">Your Favorite Source of Free
Bootstrap Themes</h1>
<hr class="divider my-4" />
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 font-weight-light mb-5">Start Bootstrap can help you build
better websites using the Bootstrap framework! Just download a theme and start customizing, no
strings attached!</p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="page-section bg-primary" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">We've got what you need!</h2>
<hr class="divider light my-4" />
<p class="text-white-50 mb-4">Start Bootstrap has everything you need to get your
new website up and running in no time! Choose one of our open source, free to download, and easy to
use themes! No strings attached!</p>
<a class="btn btn-light btn-xl js-scroll-trigger" href="#services">Get Started!</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<h2 class="text-center mt-0">At Your Service</h2>
<hr class="divider my-4" />
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-gem text-primary mb-4"></i>
<h3 class="h4 mb-2">Sturdy Themes</h3>
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
<h3 class="h4 mb-2">Up to Date</h3>
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-globe text-primary mb-4"></i>
<h3 class="h4 mb-2">Ready to Publish</h3>
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</p>
</div>
27
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-heart text-primary mb-4"></i>
<h3 class="h4 mb-2">Made with Love</h3>
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio-->
<div id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/1.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/2.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/2.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/3.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/3.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/4.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/4.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/5.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/5.jpg" alt="" />
28
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/6.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/6.jpg" alt="" />
<div class="portfolio-box-caption p-3">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Call to action-->
<section class="page-section bg-dark text-white">
<div class="container text-center">
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2>
<hr class="divider my-4" />
<p class="text-muted mb-5">Ready to start your next project with us? Give us a call or
send us an email and we will get back to you as soon as possible!</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<i class="fas fa-phone fa-3x mb-3 text-muted"></i>
<div>+1 (555) 123-4567</div>
</div>
<div class="col-lg-4 mr-auto text-center">
<i class="fas fa-envelope fa-3x mb-3 text-muted"></i>
<!-- Make sure to change the email address in BOTH the anchor text and the link target
below!-->
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container"><div class="small text-center text-muted">Copyright © 2020 - Start
Bootstrap</div></div>
</footer>
<!-- Bootstrap core JS-->
29
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-
popup.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

CSS:
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--breakpoint-lg: 992px;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier
New", monospace;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}

body {
margin: 0;

30
font-family: "Merriweather", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

h1, h2, h3, h4, h5, h6 {


margin-top: 0;
margin-bottom: 0.5rem;
}

p{
margin-top: 0;
margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}

address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}

PHP FILE:
<!-- Masthead-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
31
<div class="col-lg-10 align-self-end mb-4 page-title">
<h3 class="text-white">Welcome to <?php echo $_SESSION['setting_name']; ?></h3>
<hr class="divider my-4" />
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#menu">Order NO
</div>
</div>
</header>
<section class="page-section" id="menu">
<div id="menu-field" class="card-deck">
<?php
include'admin/db_connect.php';
$qry = $conn->query("SELECT * FROM product_list order by rand() ");
while($row = $qry->fetch_assoc()):
?>
<div class="col-lg-3">
<div class="card menu-item "><img src="assets/img/<?php echo $row['img_path'] ?>"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php echo $row['name'] ?></h5>
<p class="card-text truncate"><?php echo $row['description'] ?></p>
<div class="text-center">
<button class="btn btn-sm btn-outline-primary view_prod btn-block" data-id=<?php echo
$row['id'] ?>><i class="fa fa-eye"></i> View</button>

</div>
</div>
<?php endwhile; ?>
</div>
</section>
<script>

$('.view_prod').click(function(){
uni_modal_right('Product','view_prod.php?id='+$(this).attr('data-id'))
})
</script>
<!-- Masthead-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end mb-4 page-title">
<h3 class="text-white">Cart List</h3>
<hr class="divider my-4" />
</div>

</div>
</div>
</header>
<section class="page-section" id="menu">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="sticky">
<div class="card">
<div class="card-body">
32
<div class="row">
<div class="col-md-8"><b>Items</b></div>
<div class="col-md-4 text-right"><b>Total</b></div> </div>
</div>
</div>

<?php
if(isset($_SESSION['login_user_id'])){
$data = "where c.user_id = '".$_SESSION['login_user_id']."' ";
}else{
$ip = isset($_SERVER['HTTP_CLIENT_IP']) ? $_SERVER['HTTP_CLIENT_IP'] :
isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR']
: $_SERVER['REMOTE_ADDR'];
$data = "where c.client_ip = '".$ip."' ";
}
$total = 0;
$get = $conn->query("SELECT *,c.id as cid FROM cart c inner join product_list p on p.id =
c.product_id ".$data);
while($row= $get->fetch_assoc()):
$total += ($row['qty'] * $row['price']);
?>

<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4" style="text-align: -webkit-center">
<a href="admin/ajax.php?action=delete_cart&id=<?php echo $row['cid'] ?>" class="rem_cart btn btn-
sm btn-outline-danger" data-id="<?php echo $row['cid'] ?>"><i class="fa fa-trash"></i>
</a>
<img src="assets/img/<?php echo $row['img_path'] ?>" alt="">
</div>
<div class="col-md-4">
<p><b><large><?php echo $row['name'] ?></large></b></p>
<p class='truncate'> <b><small>Desc :<?php echo $row['description'] ?></small></b></p>
<p> <b><small>Unit Price :<?php echo number_format($row['price'],2) ?></small></b></p>
<p><small>QTY :</small></p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary qty-minus"
type="button" data-id="<?php echo $row['cid'] ?>"><span class="fa fa-minus"></button>
</div>
<input type="number" readonly value="<?php echo $row['qty']
?>" min = 1 class="form-control text-center" name="qty" >
<div class="input-group-prepend">
<button class="btn btn-outline-secondary qty-plus" type="button" id="" data-id="<?php echo
$row['cid'] ?>"><span class="fa fa-plus"></span></button>
</div>
</div>
</div>
<div class="col-md-4 text-right">
<b><large><?php echo number_format($row['qty'] * $row['price'],2)
?></large></b>
</div>
</div>
33
</div>
</div>

<?php endwhile; ?>


</div>
<div class="col-md-4">
<div class="sticky">
<div class="card">
<div class="card-body">
<p><large>Total Amount</large></p>
<hr>
<p class="text-right"><b><?php echo number_format($total,2) ?></b></p>
<hr>
<div class="text-center">
<button class="btn btn-block btn-outline-primary" type="button" id="checkout">Proceed to
Checkout</button>
</div>
</div>
</div>
</div>
</section>
<style>
.card p {
margin: unset
}
.card img{
max-width: calc(100%);
max-height: calc(59%);
}
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 4.7em;
z-index: 10;
background: white
}
.rem_cart{
position: absolute;
left: 0;
}
</style>
<script>

$('.view_prod').click(function(){
uni_modal_right('Product','view_prod.php?id='+$(this).attr('data-id'))
})
$('.qty-minus').click(function(){
var qty = $(this).parent().siblings('input[name="qty"]').val();
update_qty(parseInt(qty) -1,$(this).attr('data-id'))
if(qty == 1){
return false;
}else{
$(this).parent().siblings('input[name="qty"]').val(parseInt(qty) -1);
}
34
$('.qty-plus').click(function(){
var qty = $(this).parent().siblings('input[name="qty"]').val();
$(this).parent().siblings('input[name="qty"]').val(parseInt(qty) +1);
update_qty(parseInt(qty) +1,$(this).attr('data-id'))
})
function update_qty(qty,id){
start_load()
$.ajax({
url:'admin/ajax.php?action=update_cart_qty',
method:"POST",
data:{id:id,qty},
success:function(resp){
if(resp == 1){
load_cart()
end_load()
}
})
}
$('#checkout').click(function(){
if('<?php echo isset($_SESSION['login_user_id']) ?>' == 1){
location.replace("index.php?page=checkout")
}else{
uni_modal("Checkout","login.php?page=checkout") }
}) </script>

JAVASCRIPT:

/*!
* Start Bootstrap - Creative v6.0.3 (https://startbootstrap.com/themes/creative)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-
creative/blob/master/LICENSE)
*/
(function($) {
"use strict"; // Start of use strict

// Smooth scrolling using jQuery easing


$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 72)
}, 1000, "easeInOutExpo");
return false;
}
}
});

// Closes responsive menu when a scroll trigger link is clicked


35
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});

// Activate scrollspy to add active class to navbar items on scroll


$('body').scrollspy({
target: '#mainNav',
offset: 75
});

// Collapse Navbar
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-scrolled");
} else {
$("#mainNav").removeClass("navbar-scrolled");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);

})(jQuery); // End of use strict

OUTPUT:

36
DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.
37
EX.NO: 07 LEAVE MANAGEMENT SYSTEM
DATE:

AIM:
To develop a leave management system for telemarketing organization using Java servlets and
JDBC where employees can view their available leaves and apply for new leaves.

ALGORITHM:
Step 1: Define system requirements and leave types.
Step 2: Create a JDBC database for employee profiles, leave balances, and requests.
Step 3: Implement secure employee login and authorization.
Step 4: Develop an interface for employees to request leave.
Step 5: Set up a leave approval process involving supervisors and HR.
Step 6: Display available leave balances and a company-wide leave calendar.
Step 7: Send email notifications to employees and administrators.
Step 8: Create an admin panel for managing profiles, approvals, and leave policies.

PROGRAM:
1. Database Setup: Create a database table to store leave information. Here's a simple example
schema:
CREATE TABLE leaves (
id INT AUTO_INCREMENT PRIMARY KEY,
employee_id INT,
start_date DATE,
end_date DATE,
status VARCHAR(20)
);

2. Java Servlets:Employee.java: A simple Java bean representing an employee.


public class Employee {
private int id;
private String name;

// Getters and setters


}

3. Leave.java: Another Java bean representing a leave request.java

public class Leave {


private int id;
private int employeeId;
private Date startDate;
private Date endDate;
private String status;

// Getters and setters


}

4. LeaveDAO.java: A Data Access Object (DAO) class for interacting with the database.
import java.sql.*;
38
import java.util.ArrayList;
import java.util.List;

public class LeaveDAO {


private Connection connection;

public LeaveDAO(Connection connection) {


this.connection = connection;
}

public List<Leave> getLeavesForEmployee(int employeeId) throws SQLException {


List<Leave> leaves = new ArrayList<>();
// Query the database and populate the leaves list
return leaves;
}

public void applyLeave(Leave leave) throws SQLException {


// Insert the leave into the database
}
}

5. LeaveManagementServlet.java: The main servlet for handling leave management actions.


import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class LeaveManagementServlet extends HttpServlet {


private LeaveDAO leaveDAO;

@Override
public void init() throws ServletException {
// Initialize the LeaveDAO with a JDBC connection
// You need to set up JDBC connection and create LeaveDAO instance
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Fetch and display employee's available leaves
// Use leaveDAO to retrieve leaves and forward to JSP
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Handle leave application form submission
// Read form data, create Leave object, and use leaveDAO to apply leave
}
}

6. JSP Frontend:View_leaves.jsp: Display available leaves for an employee.


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
39
<html>
<head>
<title>View Leaves</title>
</head>
<body>
<h1>Available Leaves</h1>
<!-- Display leave information here -->
</body>
</html>

7. Apply_leave.jsp: Form for applying new leave.


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Apply Leave</title>
</head>
<body>
<h1>Apply for Leave</h1>
<form action="LeaveManagementServlet" method="post">
<!-- Leave application form fields -->
<input type="submit" value="Apply">
</form>
</body>
</html>

OUTPUT:

40
DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.

41
EX.NO: 08 SHOPPING CART APPLICATION
DATE:

AIM:
To write a program to develop a shopping cart application that can be used an herbal company
using Java servlets and JDBC.

ALGORITHM:
Step 1: Define system requirements and product catalog.
Step 2: Create a JDBC database for products, customer profiles, and orders.
Step 3: Implement secure customer registration and login.
Step 4: Develop a catalog to display herbal products.
Step 5: Create shopping cart functionality for adding and managing items.
Step 6: Build a system for order processing, inventory updates, and payment calculations.
Step 7: Integrate a secure payment gateway for processing payments.
Step 8: Develop an admin panel for managing products, customer accounts, and order fulfillment.

PROGRAM:

1. Database Setup: Create database tables to store products and cart items. Here's a basic example:
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
price DECIMAL(10, 2)
);

CREATE TABLE cart (


id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT,
product_id INT,
quantity INT
);

2. Java Servlets:
Product.java: A Java bean representing a product.
public class Product {
private int id;
private String name;
private double price;

// Getters and setters


}

3. CartItem.java: A Java bean representing an item in the shopping cart.


public class CartItem {
private int id;
private int productId;
private int quantity;
// Getters and setters
}

42
4. ProductDAO.java: A Data Access Object (DAO) class for interacting with the products database.
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class ProductDAO {


private Connection connection;

public ProductDAO(Connection connection) {


this.connection = connection;
}

public List<Product> getAllProducts() throws SQLException {


List<Product> products = new ArrayList<>();
// Query the database and populate the products list
return products;
}
}

5. CartDAO.java: A DAO class for interacting with the shopping cart.


import java.sql.*;
import java.util.List;

public class CartDAO {


private Connection connection;

public CartDAO(Connection connection) {


this.connection = connection;
}

public void addToCart(int userId, int productId, int quantity) throws SQLException {
// Insert item into cart table
}

public List<CartItem> getCartItems(int userId) throws SQLException {


List<CartItem> cartItems = new ArrayList<>();
// Query the database and populate the cartItems list
return cartItems;
}
}

6. ShoppingCartServlet.java: The main servlet for handling shopping cart actions.


import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class ShoppingCartServlet extends HttpServlet {


private ProductDAO productDAO;
private CartDAO cartDAO;

@Override
public void init() throws ServletException {
43
// Initialize the DAOs with JDBC connections
// You need to set up JDBC connection and create DAO instances
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Fetch products and display them
// Use productDAO to retrieve products and forward to JSP
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Handle adding items to the cart
// Read form data, use cartDAO to add to the cart, and redirect to cart page
}
}

7. JSP Frontend:
product_list.jsp: Display a list of products.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Product List</title>
</head>
<body>
<h1>Product List</h1>
<!-- Display products and add to cart buttons -->
</body>
</html>

8. Cart.jsp: Display the shopping cart.


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
</head>
<body>
<h1>Your Shopping Cart</h1>
<!-- Display cart items and checkout options -->
</body>
</html>

44
OUTPUT:

45
DEPARTMENT OF CSE

Preparation (Algorithm) 4
Observation (Program) 4
Results (Output) 4
Interpretation (Validation) 4
Viva-Voce 4
Total 20

RESULT:

Thus the program has been executed successfully and the output is verified.

46

You might also like