Ex1 Merged
Ex1 Merged
No: 1
Date: RESPONSIVE IMAGE MAP APPLICATION
Problem statement
Create a webpage with an image map of a computer system (motherboard, CPU, RAM, etc.)
with clickable regions that display component information in a modal window. Implement
responsive design so it works on both desktop and mobile.
Objective:
To create an interactive HTML page with an image map of a computer where different
components are clickable, displaying information about their functions.
Tools required:
HTML
Procedure:
o Use an image editor or an online tool to determine the coordinates for different
parts.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Computer Components</title>
</head>
<body bgcolor="#b3e6ff">
<center>
<h1>Computer System Components</h1>
<p>Click on different parts of the computer system to learn more about each component.</p>
<img src="img1.jpg" usemap="#computerMap" width="600" height="400" alt="Computer
System">
</center>
<map name="computerMap">
<area shape="rect" coords="172,395,289,485" href="motherboard.html" alt="Motherboard">
<area shape="rect" coords="60,28,141,127" href="cpu.html" alt="CPU">
<area shape="rect" coords="310,400,447,488" href="ram.html" alt="RAM">
<area shape="rect" coords="492,415,587,486" href="harddrive.html" alt="Hard Drive">
<area shape="rect" coords="203,24,368,126" href="monitor.html" alt="Monitor">
</map>
</body>
</html>
Cpu.html
<html>
<head>
<title>CPU</title>
</head>
<body bgcolor="#99ccff">
<center>
<h1>CPU</h1>
<img src="cpu.jpg" width="300" height="300">
<p><b>Main Feature:</b> The brain of the computer.</p>
<p>Processes instructions at high speed.</p>
<p>Multiple cores improve multitasking.</p>
<a href="index.html">Back</a>
</center>
</body>
</html>
Ram.html
<html>
<head>
<title>RAM</title>
</head>
<body bgcolor="#99ccff">
<center>
<h1>RAM</h1>
<img src="C:\web\ramm.jpeg" width="300" height="300">
<p><b>Main Feature:</b> Temporary memory for fast data access.</p>
<p>Enhances system performance and multitasking.</p>
<p>Volatile memory; data is lost when power is off.</p>
<a href="index.html">Back</a>
</center>
</body>
</html>
Motherboard.html
<html>
<head>
<title>Motherboard</title>
</head>
<body bgcolor="#99ccff">
<center>
<h1>Motherboard</h1>
<img src="C:\web\morht.jpg" width="300" height="300">
<p><b>Main Feature:</b> Central hub connecting all computer components.</p>
<p>Facilitates communication between CPU, RAM, and peripherals.</p>
<p>Supports expansion slots for additional components.</p>
<a href="index.html">Back</a>
</center>
</body>
</html>
Monitor.html
<!DOCTYPE html>
<html>
<head>
<title>Monitor</title>
</head>
<body bgcolor="#99ccff">
<center>
<h1>Monitor</h1>
<img src="C:\web\moni.jpg" height="300">
<p><b>Main Feature:</b> Displays visual output.</p>
<p>Resolution determines image clarity.</p>
<p>Higher refresh rates provide smoother visuals.</p>
<a href="index.html">Back</a>
</center>
</body>
</html>
Harddrive.html
<!DOCTYPE html>
<html>
<head>
<title>Hard Drive</title>
</head>
<body bgcolor="#99ccff">
<center>
<h1>Hard Drive</h1>
<img src="C:\web\hard.jpg" width="300" height="300">
<p><b>Main Feature:</b> Permanent storage for data.</p>
<p>SSDs are faster and more durable than HDDs.</p>
<p>Storage capacity ranges from GBs to TBs.</p>
<a href="index.html">Back</a>
</center>
</body>
</html>
Output:
Learning outcome:
Problem statement:
Develop a travel blog featuring different CSS implementation methods. Create an image
slider using CSS animations, implement a masonry layout for blog posts with varying heights
and design a floating social sharing sidebar. Add a sticky table of contents for longer articles,
style blockquotes with custom borders and typography, and build a responsive footer with a
newsletter signup that validates input using CSS pseudo-classes.
Objective:
To create a visually appealing and responsive travel blog website with interactive features
like an image slider, a masonry blog layout, a floating social sharing sidebar, a sticky table of
contents, and a newsletter subscription.
Tools required:
Procedure:
1.Setting Up the Project:
o Make the newsletter subscription form functional using a required email input.
Code:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-
beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
h1 {
color: white; margin-top: 20px;
font-size: 3em;
font-weight: bold;
}
.social-sidebar {
position: fixed;
top: 50%;
left: 10px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.social-sidebar a {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
color: white;
font-size: 24px;
text-decoration: none;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
.social-sidebar a:hover {
transform: scale(1.2);
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
}
.facebook { background-color: #3b5998; }
.twitter { background-color: #1DA1F2; }
.instagram { background-color: #E1306C; }
.linkedin { background-color: #0077B5; }
.youtube { background-color: #FF0000; }
.whatsapp { background-color: #25D366; }
.toc {
position: sticky;
top: 20px;
background: #f4f4f4; padding: 10px;
border: 1px solid #ddd;
text-align: left;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
width: 200px;
margin: 20px auto;
max-height: 80vh;
overflow: auto;
z-index: 1000;
background-clip: padding-box;
}
.toc ul {
padding: 0;
list-style: none;
}
.toc li {
margin: 10px 0;
padding: 8px;
border-radius: 5px;
}
.toc li:nth-child(odd) {
background-color: #ffebcd; }
.toc li:nth-child(even) {
background-color: #ffe4b5;
}
.toc li:hover {
background-color: #ff6600;
color: white;
}
.toc a {
text-decoration: none;
color: #ff6600;
font-weight: bold;
}
.toc a:hover {
color: white;
}
.slider {
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
.slides {
display: flex;
width: 300%;
animation: slide 15s linear infinite;
}
.slides img {
width: 100%;
height: 400px;
object-fit: cover;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }}
.content-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.blog-section {
width: 45%;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
}
.blog-section img {
width: 100%;
border-radius: 5px;
margin-top: 10px;
}
footer {
background: #222;
padding: 20px;
text-align: center;
color: white;
}
input {
padding: 10px;
width: 250px;
margin-right: 10px;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background: #ff6600;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #e05500;
}
@media (max-width: 768px) {
.blog-section {
width: 90%;
margin: 10px 0;
}
.social-sidebar {
left: 20px;
bottom: 10px;
transform: translateY(0);
flex-direction: row;
gap: 5px;
}
.toc {
width: 100%;
margin: 20px 0;
}
.slider .slides {
width: 300%;
animation: slide 20s infinite alternate ease-in-out;
}}
@media (max-width: 480px) {
h1 {
font-size: 24px;}
.slider img {
height: 250px;
}
input {
width: 200px;
}
.social-sidebar a {
width: 50px;
height: 50px;
font-size: 18px;
}
}
</style>
</head>
<body>
<h1>Welcome to My Travel Blog</h1>
<!-- Sticky Table of Contents -->
<aside class="toc">
<h3>Table of Contents</h3>
<ul>
<li><a href="#destinations">Amazing Destinations</a></li>
<li><a href="#travel-tips">Travel Tips</a></li>
</ul>
</aside>
<div class="social-sidebar">
<a href="https://www.facebook.com" class="facebook" target="_blank"><i class="fab fa-
facebook-f"></i></a>
<a href="https://www.twitter.com" class="twitter" target="_blank"><i class="fab fa-
twitter"></i></a>
<a href="https://www.instagram.com" class="instagram" target="_blank"><i class="fab fa-
instagram"></i></a>
<a href="https://www.linkedin.com" class="linkedin" target="_blank"><i class="fab fa-
linkedin-in"></i></a>
<a href="https://www.youtube.com" class="youtube" target="_blank"><i class="fab fa-
youtube"></i></a>
<a href="https://www.whatsapp.com" class="whatsapp" target="_blank"><i class="fab fa-
whatsapp"></i></a>
</div>
<!-- Image Slider -->
<div class="slider">
<div class="slides">
<img src="img1.jpg" alt="Beach Destination">
<img src="img2.jpg" alt="Mountain Adventure">
<img src="img3.jpg" alt="City Exploration">
<!-- Duplicate the images to create seamless looping effect -->
<img src="img1.jpg" alt="Beach Destination">
<img src="img2.jpg" alt="Mountain Adventure">
<img src="img3.jpg" alt="City Exploration">
<img src="img1.jpg" alt="Beach Destination">
<img src="img2.jpg" alt="Mountain Adventure">
<img src="img3.jpg" alt="City Exploration">
<img src="img1.jpg" alt="Beach Destination">
<img src="img2.jpg" alt="Mountain Adventure">
<img src="img3.jpg" alt="City Exploration">
<img src="img1.jpg" alt="Beach Destination">
<img src="img2.jpg" alt="Mountain Adventure">
<img src="img3.jpg" alt="City Exploration">
<img src="img1.jpg" alt="Beach Destination">
<img src="img2.jpg" alt="Mountain Adventure">
<img src="img3.jpg" alt="City Exploration">
</div>
</div>
<!-- Blog Sections -->
<div class="content-container">
<section class="blog-section" id="destinations">
<a href="destinations.html">Click here to explore more destinations</a>
<h2>Amazing Destinations</h2>
<p>Discover breathtaking locations around the world.</p>
<img src="img4.jpg" alt="Beautiful Travel Destination">
</section>
<section class="blog-section" id="travel-tips">
<a href="travel-tips.html">Click here for more travel tips</a>
<h2>Travel Tips</h2>
<p>Pack smart and travel light.</p>
<img src="img5.jpg" alt="Travel Tips and Hacks">
</section>
</div>
<!-- Footer -->
<footer>
<p>Subscribe to our newsletter for travel updates!</p>
<form>
<input type="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
</footer>
</body>
</html>
Destination.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Travel Destinations</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(120deg, #ff9a9e, #fad0c4);
color: #333;
text-align: center;
margin: 0;
padding: 20px;
position: relative;
min-height: 100vh;
}
.destination-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin: 20px 0;
}
.destination {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
.destination img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
a{
display: inline-block;
margin-top: 20px;
text-decoration: none;
font-weight: bold;
color: #fff;
background: #ff6f61;
padding: 10px 15px;
border-radius: 5px;
}
footer {
margin-top: 20px;
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<h1>Top Travel Destinations</h1>
<div class="destination-container">
<div class="destination">
<img src="img9.jpg" alt="Paris">
<h2>Paris, France</h2>
<p>Experience the romance of the Eiffel Tower and the charm of the streets of Paris.</p>
</div>
<div class="destination">
<img src="img10.jpg" alt="Maldives">
<h2>Maldives</h2>
<p>Relax on the stunning beaches of Maldives with crystal-clear waters.</p>
</div>
<div class="destination">
<img src="img11.jpg" alt="Bali">
<h2>Bali, Indonesia</h2>
<p>Explore lush jungles, ancient temples, and breathtaking beaches.</p>
</div>
</div>
<a href="index.html">← Back to Home</a>
<footer>
<p>© 2025 Travel Blog. All rights reserved.</p>
</footer>
</body>
</html>
Travel_Tips.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Tips</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(120deg, #ff9a9e, #fad0c4);
color: #333;
text-align: center;
margin: 0;
padding: 20px;
position: relative;
min-height: 100vh;
}
.tips-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin: 20px 0;
}
.tip {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
.tip img {
width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}
footer {
margin-top: 20px;
font-size: 14px;
color: #555;
}
a{
display: block;
text-align: center;
position: absolute;
bottom: 10px;
width: 100%;
text-decoration: none;
font-weight: bold;
color: #fff;
background: #ff6f61;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Essential Travel Tips</h1>
<div class="tips-container">
<div class="tip">
<img src="img6" alt="Pack Light">
<h2>1. Pack Light</h2>
<p>Only bring essentials to avoid unnecessary baggage fees and make your trip easier.</p>
</div>
<div class="tip">
<img src="img7.jpg" alt="Important Documents">
<h2>2. Keep Important Documents Handy</h2>
<p>Make digital copies of passports, visas, and travel insurance.</p>
</div>
<div class="tip">
<img src="img8.jpg" alt="Local Phrases">
<h2>3. Learn Basic Local Phrases</h2>
<p>Knowing a few phrases in the local language can help in communication.</p>
</div>
</div>
<a href="index.html">← Back to Home</a>
<footer>
<p>© 2025 Travel Blog. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Learning Outcome:
Date:
Problem statement:
Develop a travel blog featuring different CSS implementation methods. Create an image
slider using CSS animations, implement a masonry layout for blog posts with varying heights
and design a floating social sharing sidebar. Add a sticky table of contents for longer articles,
style blockquotes with custom borders and typography, and build a responsive footer with a
newsletter signup that validates input using CSS pseudo-classes.
Objective:
To create a visually appealing and responsive travel blog website using Bootstrap with
interactive features such as an image slider, masonry blog layout, floating social sharing
sidebar, sticky table of contents, and a newsletter subscription form.
Tools required:
Procedure:
Use Bootstrap Grid (row and col classes) for responsive blog posts.
Utilize col-lg-4 col-md-6 col-sm-12 to create a masonry-style layout.
Boot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Blog</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
}.social-sidebar {
position: fixed;
top: 50%;
left: 10px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
.social-sidebar a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-size: 20px;
text-decoration: none;
.carousel img {
height: 400px;
object-fit: cover;
footer {
background: #222;
padding: 20px;
text-align: center;
color: white;
</style>
</head>
<body>
<!-- Navbar with correct file paths for different pages -->
<div class="container">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
</div>
</div>
</nav>
<div class="social-sidebar">
<div class="carousel-inner">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<span class="carousel-control-prev-icon"></span>
</button>
<span class="carousel-control-next-icon"></span>
</button>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
<footer class="mt-5">
</form>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>
</body>
</html>
destination1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
color: #333;
text-align: center;
min-height: 100vh;
padding: 20px;
.destination img {
border-radius: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.btn-custom {
background: #ff6f61;
color: #fff;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-body">
<p class="card-text">Experience the romance of the Eiffel Tower and the charm of the
streets of Paris.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
<h2 class="card-title">Maldives</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
</div>
</div>
</div>
</div>
</footer>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>
</body>
</html>
Travel_tips1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Tips</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
color: #333;
text-align: center;
min-height: 100vh;
padding: 20px;
.tip img {
border-radius: 10px;
width: 100%;
.btn-custom {
background: #ff6f61;
color: #fff;
font-weight: bold;
padding: 10px;
border-radius: 5px;
text-decoration: none;
display: block;
position: absolute;
bottom: 10px;
width: 100%;
</style>
</head>
<body>
<div class="container">
<div class="col-md-4">
<div class="card-body">
<p class="card-text">Only bring essentials to avoid unnecessary baggage fees and make
your trip easier.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
</div>
</div>
</div>
</div>
</footer>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>
</body>
</html>
Output:
Learning outcome:
Gain hands-on experience with the Bootstrap framework for responsive web design.
Learn to implement interactive features like carousels and masonry layouts.
Understand the importance of responsive design and form validation.
Improve testing and debugging skills across browsers and devices.
Ex No:3
Date: EVENT REGISTRATION FORM
Problem Statement:
Create an event registration form with attendee information, session selection, and
special requirements fields. Implement DHTML to validate email formats, prevent
scheduling conflicts when selecting multiple sessions, ensure age requirements are met for
specific events, and dynamically calculate and display registration costs based on selections.
Allow users to add multiple attendees with validation for each, prevent duplicate registrations
with the same email, and implement a confirmation dialog that summarizes all validated
information before final submission.
Objective:
To design and implement a dynamic, interactive event registration form using
DHTML techniques that collects attendee details, validates inputs, handles session logic,
dynamically updates cost, prevents duplicate entries, and provides a final confirmation before
submission.
Tools Required:
HTML: Used to create the structure and input fields of the registration form.
CSS: Used to style the form for a clean, responsive, and user-friendly interface.
JavaScript: Used to add dynamic behavior, validate inputs, handle logic, and
calculate costs in real-time
Text Editor: To write and edit HTML code(Notepad)
Web Browser: To preview and test the registration form.
Procedure:
Styles.css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #ffecd2, #fcb69f);
}
.container {
max-width: 800px;
margin: 40px auto;
background-color: #fef6e4;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
color: #222;
}
.attendee h2 {
color: #444;
margin-top: 30px;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: 600;
}
input, textarea {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
textarea {
resize: vertical;
min-height: 80px;
}
button[type="submit"] {
background-color: #28a745;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
}
button[type="submit"]:hover {
background-color: #218838;
}
button:not([type="submit"]) {
background-color: #ff6b6b;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
}
button:not([type="submit"]):hover {
background-color: #d64545;
}
#costDetails {
text-align: center;
font-size: 18px;
font-weight: bold;
margin-top: 20px;
}
.session-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.session-options label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: #fff4e6;
padding: 10px 12px;
border: 2px solid #ffa07a;
border-radius: 20px;
transition: background 0.3s, border-color 0.3s;
}
.session-options input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ff6b6b;
border-radius: 50%;
background: white;
cursor: pointer;
position: relative;
}
.session-options input[type="checkbox"]:checked::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
background: #ff6b6b;
border-radius: 50%;
}
.session-options label:hover {
background-color: #ffe5d9;
border-color: #ff6b6b;
}
#confirmationDialog {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 30px;
border-radius: 10px;
max-width: 600px;
width: 100%;
text-align: left;
}
Scripts.js
const sessionCost = 100;
function calculateTotalCost() {
const checkboxes = document.querySelectorAll('.session-options input[type="checkbox"]');
let total = 0;
checkboxes.forEach(box => {
if (box.checked) total += sessionCost;
});
document.getElementById('totalCost').textContent = total;
}
function addSessionListeners() {
const checkboxes = document.querySelectorAll('.session-options input[type="checkbox"]');
checkboxes.forEach(box => {
box.addEventListener('change', calculateTotalCost);
});
}
function addAttendee() {
const attendeesDiv = document.getElementById('attendees');
const count = attendeesDiv.children.length + 1;
const newAttendee = document.createElement('div');
newAttendee.className = 'attendee';
newAttendee.innerHTML = `
<h2>Attendee ${count}</h2>
<label for="attendeeName${count}">Full Name:</label>
<input type="text" id="attendeeName${count}" name="attendeeName${count}" required>
<label for="attendeeEmail${count}">Email:</label>
<input type="email" id="attendeeEmail${count}" name="attendeeEmail${count}" required>
<label for="attendeeAge${count}">Age:</label>
<input type="number" id="attendeeAge${count}" name="attendeeAge${count}" min="18"
required>
<label>Select Sessions:</label>
<div class="session-options" id="sessions${count}">
<label><input type="checkbox" value="session1" name="session1" /> <span>Session 1:
Intro to Programming</span><span>$100</span></label>
<label><input type="checkbox" value="session2" name="session2" /> <span>Session 2:
Advanced JavaScript</span><span>$100</span></label>
<label><input type="checkbox" value="session3" name="session3" /> <span>Session 3:
Web Development</span><span>$100</span></label>
</div>
<label for="specialRequirements${count}">Special Requirements:</label>
<textarea id="specialRequirements${count}"
name="specialRequirements${count}"></textarea>`;
attendeesDiv.appendChild(newAttendee);
addSessionListeners();
}
function validateForm(event) {
event.preventDefault();
const form = document.getElementById("registrationForm");
const confirmationDetails = document.getElementById("confirmationDetails");
let summary = "<ul>";
const attendees = document.querySelectorAll(".attendee");
attendees.forEach((attendee, index) => {
const name = attendee.querySelector(`input[id^="attendeeName"]`).value;
const email = attendee.querySelector(`input[id^="attendeeEmail"]`).value;
const age = attendee.querySelector(`input[id^="attendeeAge"]`).value;
const sessions = Array.from(attendee.querySelectorAll('input[type="checkbox"]:checked'))
.map(box => box.nextElementSibling.textContent.trim())
.join(", ");
const special = attendee.querySelector(`textarea[id^="specialRequirements"]`).value;
summary += `<li><strong>Attendee ${index + 1}</strong><br>Name: ${name}<br>Email:
${email}<br>Age: ${age}<br>Sessions: ${sessions || "None"}<br>Special Requirements:
${special || "None"}</li>`;
});
summary += "</ul>";
confirmationDetails.innerHTML = summary;
document.getElementById("confirmationDialog").style.display = "flex";
}
function submitForm() {
alert("Registration successfully submitted!");
closeModal();
document.getElementById('registrationForm').reset();
document.getElementById('attendees').innerHTML = `
<div class="attendee">
<h2>Attendee 1</h2>
<label for="attendeeName1">Full Name:</label>
<input type="text" id="attendeeName1" name="attendeeName1" required>
<label for="attendeeEmail1">Email:</label>
<input type="email" id="attendeeEmail1" name="attendeeEmail1" required>
<label for="attendeeAge1">Age:</label>
<input type="number" id="attendeeAge1" name="attendeeAge1" min="18" required>
<label>Select Sessions:</label>
<div class="session-options" id="sessions1">
<label><input type="checkbox" value="session1"> <span>Session 1: Introduction to
Programming</span><span>$100</span></label>
<label><input type="checkbox" value="session2"> <span>Session 2: Advanced
JavaScript</span><span>$100</span></label>
<label><input type="checkbox" value="session3"> <span>Session 3: Web
Development</span><span>$100</span></label>
</div>
<label for="specialRequirements1">Special Requirements:</label>
<textarea id="specialRequirements1" name="specialRequirements1"></textarea>
</div>`;
document.getElementById('totalCost').textContent = '0';
addSessionListeners();
calculateTotalCost();
}
function closeModal() {
document.getElementById("confirmationDialog").style.display = "none";
}
document.addEventListener("DOMContentLoaded", addSessionListeners);
Output:
Learning Outcome:
Gained experience in designing user-friendly, responsive forms using semantic
HTML and modern CSS.
Learned to manipulate the DOM with JavaScript for dynamic content updates,
validations, and real-time UI feedback.
Implemented real-world logic such as age restrictions and session conflict detection
using conditional statements and event handling.
Objective:
To install the Apache Tomcat Server on a local system and configure it with Eclipse
IDE for deploying and testing Java web applications.
Tools Required:
Procedure:
Learning Outcomes:
Problem Statement:
Event Registration Form
Develop an EventRegistrationServlet that validates attendee data, prevents duplicate
email entries, checks age restrictions, and calculates total registration cost. Do this without
using sessions, handling all user data directly in request processing.
Objective:
Tools Required:
Code:
Register.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<style>
body {
font-family: Arial, sans-serif;
background: #e0f7fa;
margin: 0;
padding: 20px;
line-height: 1.5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
max-width: 800px;
margin: auto;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
h2 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-top: 15px;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
}
.attendee {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #00796b;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #004d40;
}
</style>
<script>
let attendeeCount = 1;
function addAttendee() {
attendeeCount++;
const container = document.getElementById("attendees");
const newDiv = document.createElement("div");
newDiv.className = "attendee";
newDiv.innerHTML = `
<h3>Attendee ${attendeeCount}</h3>
<label for="name${attendeeCount}">Name:</label>
<input type="text" name="name${attendeeCount}" required>
<label for="email${attendeeCount}">Email:</label>
<input type="email" name="email${attendeeCount}" required>
<label for="age${attendeeCount}">Age:</label>
<input type="number" name="age${attendeeCount}" min="0" required>
<label for="event${attendeeCount}">Select Events:</label>
<select name="event${attendeeCount}" multiple required>
<option value="workshop">Workshop</option>
<option value="seminar">Seminar</option>
<option value="concert">Concert</option>
<option value="exhibition">Exhibition</option>
<option value="networking">Networking Dinner</option>
</select>
<label for="requirements${attendeeCount}">Special Requirements:</label>
<textarea name="requirements${attendeeCount}" rows="3"></textarea>
`;
container.appendChild(newDiv);
document.getElementById("attendeeCount").value = attendeeCount;
}
</script>
</head>
<body>
<div class="container">
<h2>Event Registration Form</h2>
<form action="EventRegistrationServlet" method="post">
<input type="hidden" id="attendeeCount" name="attendeeCount" value="1">
<div id="attendees">
<div class="attendee">
<h3>Attendee 1</h3>
<label for="name1">Name:</label>
<input type="text" name="name1" required>
<label for="email1">Email:</label>
<input type="email" name="email1" required>
<label for="age1">Age:</label>
<input type="number" name="age1" min="0" required>
<label for="event1">Select Events:</label>
<select name="event1" multiple required>
<option value="workshop">Workshop</option>
<option value="seminar">Seminar</option>
<option value="concert">Concert</option>
<option value="exhibition">Exhibition</option>
<option value="networking">Networking Dinner</option>
</select>
<label for="requirements1">Special Requirements:</label>
<textarea name="requirements1" rows="3"></textarea>
</div>
</div>
<button type="button" onclick="addAttendee()">Add Another Attendee</button>
<button type="submit">Submit Registration</button>
</form>
</div>
</body>
</html>
EventRegistrationServlet.java:
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/EventRegistrationServlet")
public class EventRegistrationServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String attendeeCountStr = request.getParameter("attendeeCount");
int attendeeCount = Integer.parseInt(attendeeCountStr);
out.println("<!DOCTYPE html>");
out.println("<html lang='en'>");
out.println("<head>");
out.println("<meta charset='UTF-8'>");
out.println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
out.println("<title>Registration Summary</title>");
out.println("<style>");
out.println("body { font-family: 'Segoe UI', sans-serif; background: #f8b500; height: 100vh;
display: flex; justify-content: center; align-items: center; line-height: 1.5; }");
out.println(".container { background: white; padding: 40px; border-radius: 20px; box-shadow:
0 20px 50px rgba(0,0,0,0.2); text-align: center; width: 90%; max-width: 600px; }");
out.println(".highlight { color: #d32f2f; font-weight: bold; font-size: 22px; margin: 0; }");
out.println("p { margin: 0; line-height: 1.5; }");
out.println("</style>");
out.println("</head>");
out.println("<body>");
out.println("<div class='container'>");
int totalCost = 0;
for (int i = 1; i <= attendeeCount; i++) {
String name = request.getParameter("name" + i);
String email = request.getParameter("email" + i);
String ageStr = request.getParameter("age" + i);
String eventsStr = request.getParameter("event" + i);
String requirements = request.getParameter("requirements" + i);
if (name == null || email == null || ageStr == null || eventsStr == null || name.trim().isEmpty()
|| email.trim().isEmpty() || ageStr.trim().isEmpty()) {
out.println("<h3>Validation failed for attendee " + i + ". Please fill all fields.</h3>");
return;
}
int age = Integer.parseInt(ageStr);
String[] selectedEvents = eventsStr.split(",");
int cost = 0;
StringBuilder events = new StringBuilder();
for (String event : selectedEvents) {
switch (event) {
case "workshop":
cost += 500;
events.append("Workshop, ");
break;
case "seminar":
cost += 300;
events.append("Seminar, ");
break;
case "concert":
cost += 800;
events.append("Concert, ");
break;
case "exhibition":
cost += 600;
events.append("Exhibition, ");
break;
case "networking":
cost += 1000;
events.append("Networking Dinner, ");
break;
}
}
events.setLength(events.length() - 2);
out.println("<h3> Registration Successful </h3>");
out.println("<p><strong>Name:</strong> " + name + "</p>");
out.println("<p><strong>Email:</strong> " + email + "</p>");
out.println("<p><strong>Age:</strong> " + age + "</p>");
out.println("<p><strong>Events:</strong> " + events.toString() + "</p>");
out.println("<p><strong>Special Requirements:</strong> " + requirements + "</p>");
out.println("<p class='highlight'><strong>Total Cost: ₹" + cost + "</strong></p>");
totalCost += cost;
}
out.println("<hr>");
out.println("<h3 class='highlight'>Total Registration Cost: ₹" + totalCost + "</h3>");
out.println("</div>");
out.println("</body>");
out.println("</html>");
}
}
Web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>EventRegistrationServlet</servlet-name>
<servlet-class>servlet.EventRegistrationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>EventRegistrationServlet</servlet-name>
<url-pattern>/EventRegistrationServlet</url-pattern>
</servlet-mapping>
</web-app>
Output:
Learning Outcome:
Gained hands-on experience in building interactive web forms using HTML, CSS,
and JavaScript.
Learned DOM manipulation, event handling, and dynamic cost calculation.
Improved skills in responsive design and user interface development.
Ex.No:5B EVENT REGISTRATION FORM WITH
SESSION
Date:
Problem statement:
Event Registration Form with Multiple Attendees
Build a SessionEventRegistrationServlet that uses session attributes to manage multiple
attendees and session selections. Validate input data, avoid duplicate entries, calculate
registration cost dynamically, and summarize all data before confirmation.
Objective:
To build a dynamic event registration system that captures multiple attendee details and
selected events, storing data in server-side sessions using Java Servlets and HttpSession.
Tools Required:
HTML, CSS, JavaScript (for frontend form & interaction)
Java Servlets (HttpSession) for backend logic
Apache Tomcat Server
Eclipse IDE with Dynamic Web Project support
JDK 11 or above
Any Web Browser
Procedure:
1.Frontend Setup:
Place register.html inside the WebContent folder of your Dynamic Web Project.
This form lets users input attendee details and select multiple events (showing total
cost).
Code:
Index.html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Event Registration</title>
<style>
body {
font-family: ‘Segoe Ui’, Tahoma, Geneva, Verdana, Sans-Serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #ffecd2, #fcb69f);
}
.container {
max-width: 800px;
margin: 40px auto;
background-color: #fef6e4;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
color: #222;
}
.attendee h2 {
color: #444;
margin-top: 30px;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: 600;
}
input, textarea {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
textarea {
resize: vertical;
min-height: 80px;
}
button {
background-color: #28a745;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
}
button:hover {
background-color: #218838;
}
#costdetails {
text-align: center;
font-size: 18px;
font-weight: bold;
margin-top: 20px;
}
.session-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.attendee-list {
margin-top: 20px;
}
.attendee-block {
margin-bottom: 20px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
.remove-attendee {
color: red;
cursor: pointer;
display: inline-block;
margin-top: 10px;
font-weight: bold;}
</style>
<script>
Function calculateTotal() {
Const checkboxes = document.querySelectorAll(‘input[type=”checkbox”]:checked’);
Document.getElementById(‘totalCost’).innerText = checkboxes.length * 100;
}
Function addAttendee() {
Const attendeeList = document.getElementById(‘attendeeList’);
Const attendeeBlock = document.createElement(‘div’);
attendeeBlock.classList.add(‘attendee-block’);
const nameLabel = document.createElement(‘label’);
nameLabel.textContent = ‘Full Name:’;
attendeeBlock.appendChild(nameLabel);
const nameInput = document.createElement(‘input’);
nameInput.type = ‘text’;
nameInput.name = ‘name’;
nameInput.placeholder = ‘Enter attendee name’;
nameInput.required = true;
attendeeBlock.appendChild(nameInput);
const emailLabel = document.createElement(‘label’);
emailLabel.textContent = ‘Email:’;
attendeeBlock.appendChild(emailLabel);
const emailInput = document.createElement(‘input’);
emailInput.type = ‘email’;
emailInput.name = ‘email’;
emailInput.placeholder = ‘Enter attendee email’;
emailInput.required = true;
attendeeBlock.appendChild(emailInput);
const ageLabel = document.createElement(‘label’);
ageLabel.textContent = ‘Age:’;
attendeeBlock.appendChild(ageLabel);
const ageInput = document.createElement(‘input’);
ageInput.type = ‘number’;
ageInput.name = ‘age’;
ageInput.placeholder = ‘Enter attendee age’;
ageInput.min = 18;
ageInput.required = true;
attendeeBlock.appendChild(ageInput);
const sessionLabel = document.createElement(‘label’);
sessionLabel.textContent = ‘Select Sessions (₹100 per session):’;
attendeeBlock.appendChild(sessionLabel);
const sessionOptions = document.createElement(‘div’);
sessionOptions.classList.add(‘session-options’);
const sessions = [
{ value: ‘Session 1’, text: ‘Session 1: Intro to Programming’ },
{ value: ‘Session 2’, text: ‘Session 2: Advanced JavaScript’ },
{ value: ‘Session 3’, text: ‘Session 3: Web Development’ }
];
Sessions.forEach(session => {
Const label = document.createElement(‘label’);
Const checkbox = document.createElement(‘input’);
Checkbox.type = ‘checkbox’;
Checkbox.name = ‘sessions’;
Checkbox.value = session.value;
Checkbox.addEventListener(‘change’, calculateTotal);
Label.appendChild(checkbox);
Label.append(‘ ‘ + session.text);
sessionOptions.appendChild(label);
});
attendeeBlock.appendChild(sessionOptions);
const specialLabel = document.createElement(‘label’);
specialLabel.textContent = ‘Special Requirements:’;
attendeeBlock.appendChild(specialLabel);
const specialInput = document.createElement(‘textarea’);
specialInput.name = ‘specialRequirements’;
attendeeBlock.appendChild(specialInput);
const removeButton = document.createElement(‘span’);
removeButton.innerText = ‘Remove’;
removeButton.classList.add(‘remove-attendee’);
removeButton.onclick = () => {
attendeeBlock.remove();
calculateTotal();
};
attendeeBlock.appendChild(removeButton);
attendeeList.appendChild(attendeeBlock);
}Document.addEventListener(“DOMContentLoaded”, () => {
Document.querySelectorAll(“input[type=’checkbox’]”).forEach(cb => {
Cb.addEventListener(“change”, calculateTotal);
});
calculateTotal();
});
</script>
</head>
<body>
<div class=”container”>
<h1>Event Registration Form</h1>
<form id=”registrationForm” action=”register” method=”post”>
<div class=”attendee”>
<h2>Attendee Details</h2>
<label for=”name”>Full Name:</label>
<input type=”text” id=”name” name=”name” required />
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required />
<label for=”age”>Age:</label>
<input type=”number” id=”age” name=”age” min=”18” required />
<label>Select Sessions (₹100 per session):</label>
<div class=”session-options”>
<label><input type=”checkbox” name=”sessions” value=”Session 1” /> Session 1: Intro to
Programming</label>
<label><input type=”checkbox” name=”sessions” value=”Session 2” /> Session 2: Advanced
JavaScript</label>
<label><input type=”checkbox” name=”sessions” value=”Session 3” /> Session 3: Web
Development</label>
</div>
<label for=”specialRequirements”>Special Requirements:</label>
<textarea id=”specialRequirements” name=”specialRequirements”></textarea>
</div>
<div class=”attendee-list” id=”attendeeList”></div>
<button type=”button” onclick=”addAttendee()”>Add Another Attendee</button>
<div id=”costDetails”>
Total Cost: ₹<span id=”totalCost”>0</span>
</div>
<button type=”submit”>Submit Registration</button>
</form>
</div>
</body>
</html>
SessionEventRegistrationServlet.java:
package eventtt;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashSet;
import java.util.Set;
@WebServlet("/register")
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
response.setContentType("text/html");
out.println("<html>");
out.println("<head><title>Event Registration</title></head>");
if (registeredEmails.contains(email)) {
out.println("</body></html>");
return;
out.println("</body></html>");
return;
registeredEmails.add(email);
int totalCost = sessions.length * 100;
out.println("<h1>Registration Summary</h1>");
out.println("<p><strong>Sessions:</strong><br>");
out.println(session + "<br>");
out.println("</p>");
out.println("</body></html>");
Web.xml
Output:
Learning Outcome:
Gained hands-on experience in building interactive web forms using HTML, CSS,
and JavaScript.
Learned DOM manipulation, event handling, and dynamic cost calculation.
Improved skills in responsive design and user interface development.
Ex No: 6a WEB-BASED ONLINE QUIZ APPLICATION
Date: USING JSP AND JDBC
Problem statement:
Design and develop a web-based application using to conduct an . The application should
include a login page, a question display page (with multiple-choice options retrieved from a
database), and a result page showing the student's score. All database operations such as
user authentication, question retrieval, answer submission, and score calculation must be
handled directly within JSP pages using embedded JDBC code. Ensure basic validation and
session management where required.
Objective:
To design and implement a dynamic web-based quiz system using JSP and embedded
JDBC, which allows students to log in, answer multiple-choice questions retrieved from a
database, and view their results. The application should ensure data validation and session-
based tracking throughout the process.
Tools Required:
Procedure:
1. Database Setup:
<%
if ("POST".equalsIgnoreCase(request.getMethod())) {
Class.forName("com.mysql.cj.jdbc.Driver");
ps.setString(1, user);
ps.setString(2, pass);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
session.setAttribute("user", user);
response.sendRedirect("exam.jsp");
return;
else {
con.close();
%>
<h2>Login</h2>
<form method="post">
Username: <input type="text" name="username" required/><br/>
</form>
exam.jsp
<%
if (session.getAttribute("user") == null) {
response.sendRedirect("login.jsp");
return;
Class.forName("com.mysql.cj.jdbc.Driver");
%>
<h2>Online Exam</h2>
<%
int qno = 1;
while (rs.next()) {
int id = rs.getInt("id");
%>
<%
con.close();
%>
</form>
submit.jsp
<%
if (session.getAttribute("user") == null) {
response.sendRedirect("login.jsp");
return;
int score = 0;
Class.forName("com.mysql.cj.jdbc.Driver");
int id = rs.getInt("id");
if (correct.equalsIgnoreCase(submitted)) {
score++;
con.close();
%>
<h2>Exam Submitted</h2>
<a href="logout.jsp">Logout</a>
logout.jsp
<%
session.invalidate();
response.sendRedirect("login.jsp");
%>
Tables in database:
Output:
Learning Outcome:
Learned how to connect JSP pages to a relational database using embedded JDBC code.
Gained experience in building end-to-end dynamic web applications using JSP and
HTML.
Implemented secure user authentication and session management for tracking login
status.
Developed skills to retrieve, display, and evaluate quiz data from a backend database.
THREE-TIER WEB APPLICATION FOR
Ex No: 6b
STUDENT MARKS DISPLAY USING JSP
Date:
AND JDBC
Problem statement:
Create a simple three-tier web application using to display the . Student information and
marks should be stored in a relational database. Upon login, the JSP should retrieve and
display the student’s name, roll number, subject-wise marks, and total score. All logic for
connecting to the database and fetching data must be written directly in JSP pages using
JDBC. Use SQL joins for efficient data retrieval and display the result in a tabular format.
Objective:
To design and develop a three-tier web application that allows students to log in and view their
personal details and academic performance, with all data operations handled directly in JSP
pages using embedded JDBC code.
Tools Required:
1. Database Design:
login.jsp
<html>
<body>
<form action="dashboard.jsp" method="post">
Roll Number: <input type="text" name="roll"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="Login"/>
</form>
</body>
</html>
dashboard.jsp
<%@ page import="java.sql.*" %>
<%
String roll = request.getParameter("roll");
String password = request.getParameter("password");
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/students", "root",
"Lipsy@2005");
ps = con.prepareStatement("SELECT name FROM students WHERE roll_number=? AND
password=?");
ps.setInt(1, Integer.parseInt(roll));
ps.setString(2, password);
rs = ps.executeQuery();
if (rs.next()) {
String name = rs.getString("name");
%>
<h2>Welcome, <%= name %> (Roll No: <%= roll %>)</h2>
<table border="1">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<%
ps = con.prepareStatement(
"SELECT s.subject_name, m.marks " +
"FROM marks m JOIN subjects s ON m.subject_id = s.subject_id " +
"WHERE m.roll_number = ?");
ps.setInt(1, Integer.parseInt(roll));
rs = ps.executeQuery();
int total = 0;
while (rs.next()) {
String subject = rs.getString("subject_name");
int marks = rs.getInt("marks");
total += marks;
%>
<tr>
<td><%= subject %></td>
<td><%= marks %></td>
</tr>
<%
}
%>
<tr>
<td><b>Total</b></td>
<td><b><%= total %></b></td>
</tr>
</table>
<%
} else {
%>
<p style="color:red;">Invalid login. Please try again.</p>
<%
}
} catch (Exception e) {
out.println("Error: " + e.getMessage());
} finally {
try { if (rs != null) rs.close(); } catch (Exception e) {}
try { if (ps != null) ps.close(); } catch (Exception e) {}
try { if (con != null) con.close(); } catch (Exception e) {}
}
%>
Tables in database:
Output:
Learning Outcome:
Learned how to build a three-tier web application using JSP for the presentation and
logic layers.
Gained practical experience with JDBC to connect JSP pages directly to a relational
database.
Implemented secure login functionality and data retrieval using SQL JOIN queries.
Displayed dynamic student data in a tabular format with total marks computation.
Ex No:7 STUDENT DATA MANAGEMENT USING
Date: XML, XSD, AND XSLT
Problem statement:
Create an XML-based application to manage and display student data using , , and . First,
define an XML file (students.xml) that stores student details such as student ID, name,
department, semester, and a list of subjects with marks. Then, create an file to validate the
structure and data types of the XML document. Finally, develop an stylesheet to transform
the XML into a readable HTML format that displays each student’s information and their
marks in tabular form.
Objective:
To create an XML-based application that stores, validates, and visually presents student
academic data using XML for data storage, XSD for schema validation, and XSLT to transform
the XML into a user-friendly HTML display.
Tools Required:
Procedure:
1. Create students.xml:
Define an XML Schema to validate the structure and data types of the
students.xml file.
The schema should enforce:
o Correct data types (e.g., integer for marks, string for names)
o Required fields
o Valid number of subjects per student
3. Create students.xsl:
Develop an XSLT stylesheet to transform the XML into a readable and styled
HTML page.
Display each student’s details and their subject-wise marks in an HTML table.
Include total or average marks calculation using XSLT logic if desired.
Apply basic CSS styles via XSLT to enhance readability.
Use the <?xml-stylesheet?> declaration at the top of the XML file to reference the
XSL file.
Open the XML file in a web browser to see the formatted HTML output.
students.xml
<?xml version="1.0" encoding="UTF-8"?>
<students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="students.xsd">
<student>
<id>1001</id>
<name>Alice Johnson</name>
<department>Computer Science</department>
<semester>5</semester>
<subjects>
<subject>
<name>Data Structures</name>
<marks>85</marks>
</subject>
<subject>
<name>Operating Systems</name>
<marks>78</marks>
</subject>
</subjects>
</student>
<student>
<id>1002</id>
<name>Bob Smith</name>
<department>Electronics</department>
<semester>4</semester>
<subjects>
<subject>
<name>Circuits</name>
<marks>88</marks>
</subject>
<subject>
<name>Microprocessors</name>
<marks>91</marks>
</subject>
</subjects>
</student>
</students>
students.xsl
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/students">
<html>
<head>
<title>Student Information</title>
<style>
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>Student Details</h1>
<xsl:for-each select="student">
<h2><xsl:value-of select="name"/></h2>
<p><strong>ID:</strong> <xsl:value-of select="id"/></p>
<table>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<xsl:for-each select="subjects/subject">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="marks"/></td>
</tr>
</xsl:for-each>
</table>
<hr/>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
students.xsd
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="students">
<xs:complexType>
<xs:sequence>
<xs:complexType>
<xs:sequence>
<xs:element name="subjects">
<xs:complexType>
<xs:sequence>
<xs:complexType>
<xs:sequence>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Output:
Learning Outcome: