0% found this document useful (0 votes)
14 views109 pages

Ex1 Merged

The document outlines the creation of two web applications: a responsive image map application for a computer system and a travel blog featuring various CSS implementations. The first application includes an interactive image map with clickable areas for different computer components, while the second focuses on a visually appealing travel blog with features like an image slider, masonry layout, and social sharing sidebar. Both projects emphasize responsive design and user interaction, utilizing HTML, CSS, and various web development tools.

Uploaded by

Shiva kannan
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
0% found this document useful (0 votes)
14 views109 pages

Ex1 Merged

The document outlines the creation of two web applications: a responsive image map application for a computer system and a travel blog featuring various CSS implementations. The first application includes an interactive image map with clickable areas for different computer components, while the second focuses on a visually appealing travel blog with features like an image slider, masonry layout, and social sharing sidebar. Both projects emphasize responsive design and user interaction, utilizing HTML, CSS, and various web development tools.

Uploaded by

Shiva kannan
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/ 109

Ex.

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

 Notepad / VS code / Any text editor

 Web Browser (Chrome, Firefox, Edge, etc.)

 Image Editing Software (for mapping coordinates, e.g., Paint)

Procedure:

1. Choose a Image of a Computer

o Obtain an image of a computer component’s internal components.

o Use an image editor or an online tool to determine the coordinates for different
parts.

2. Create the HTML Structure

o Use the <img> tag to display the computer components image.

o Define an <map> element with clickable <area> elements corresponding to


different parts.

3. Add CSS for Styling

o Style the page layout and highlight component when hovered.

4. Test the Clickable Parts

o Verify that clicking on a components redirects to a new page or displays relevant


data.
Code:

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:

 Understanding how image maps work in HTML.

 Learning how to define clickable regions using <map> and <area>.

 Understand how to make a responsive Design.


Ex.No:2a DEVELOP A TRAVEL BLOG FEATURING DIFFERENT CSS
IMPLEMENTATION METHODS
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 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:

 Software & Platforms:

 Text Editor (VS Code, Sublime Text, Notepad++)

 Web Browser (Chrome, Firefox, Edge)

 Image Editing Tool (Canva, Photoshop, GIMP)

 HTML for structuring the content

 CSS for styling and responsive design

Procedure:
1.Setting Up the Project:

o Create an HTML file (index.html) and a CSS file (style.css).

o Link the CSS file to the HTML document.


2. Implementing the Basic Structure:

o Add the <header>, <main>, and <footer> sections.

o Insert a Table of Contents (TOC) using the <aside> element.

o Create a floating social sidebar for social media links.

3. Adding the Image Slider:

o Use a <div> container with multiple images.

o Apply CSS animations (@keyframes) to cycle through images.

4. Building the Masonry Blog Layout:

o Use CSS Grid to arrange blog posts in different sizes.

o Add some demo content for different travel destinations.

5. Enhancing User Experience:

o Style blockquotes to highlight travel quotes.

o Make the newsletter subscription form functional using a required email input.

o Ensure all sections are responsive using CSS media queries.

6. Testing & Debugging:

o Run the webpage in different browsers.

o Check responsiveness on mobile devices.

o Fix broken image links and issues.

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:

 Understand HTML structure and semantic elements for web development.


 Apply CSS techniques like Grid, animations, and styling for an attractive design.
 Implement a basic image slider using CSS keyframes.
 Learn basic form validation with the required email input.
 Gain experience in testing and debugging web applications.
Ex.No:2B DEVELOP A TRAVEL BLOG USING BOOTSTRAP

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:

Software & Platforms:

 Text Editor: VS Code, Sublime Text, Notepad++


 Web Browser: Chrome, Firefox, Edge
 Image Editing Tools: Canva, Photoshop, GIMP
 Bootstrap Framework: For styling and responsive design
 HTML: For structuring the content

Procedure:

1. Setting Up the Project:

 Create the following files:


o index.html for the HTML structure.
o style.css (optional) for minor custom styles.
 Include Bootstrap CDN in the HTML file.
 Link external libraries if needed (e.g., Font Awesome for icons).

2. Implementing the Basic Structure:

 Use Bootstrap Grid System for layout.


 Create <header>, <main>, and <footer> sections.
 Implement a sticky Table of Contents (TOC) using the <aside> element with
Bootstrap's position-sticky class.
 Add a floating social sharing sidebar using Bootstrap icons or Font Awesome.

3. Adding the Image Slider:

 Use Bootstrap Carousel for the image slider.


 Place multiple images inside the <div class="carousel-inner">.
 Enable sliding with controls and indicators.

4. Building the Masonry Blog Layout:

 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.

5. Enhancing User Experience:

 Highlight Travel Quotes:


o Use Bootstrap's Blockquote component to emphasize quotes.

6. Testing & Debugging:

 Run the webpage in multiple browsers (Chrome, Firefox, Edge).


 Test responsiveness on mobile, tablet, and desktop devices.
 Check for broken links and missing images.
 Utilize Bootstrap's built-in validation for forms.
 Use Bootstrap's form controls for responsive and validated input fields.
Code:

Boot.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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-


beta3/css/all.min.css">

<style>

body {

background: linear-gradient(to right, #ff7e5f, #feb47b);

}.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;

.facebook { background-color: #3b5998; }

.twitter { background-color: #1DA1F2; }

.instagram { background-color: #E1306C; }

.linkedin { background-color: #0077B5; }

.youtube { background-color: #FF0000; }


.whatsapp { background-color: #25D366; }

.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 -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container">

<a class="navbar-brand" href="#">Travel Blog</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-


target="#navbarNav">

<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ms-auto">

<li class="nav-item"><a class="nav-link"


href="destinations1.html">Destinations</a></li>

<li class="nav-item"><a class="nav-link" href="travel-tips1.html">Travel Tips</a></li>

</ul>

</div>

</div>

</nav>

<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>

<div id="travelCarousel" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="img2.jpg" class="d-block w-100" alt="Beach Destination">

</div>

<div class="carousel-item">

<img src="img1.jpg" class="d-block w-100" alt="Mountain Adventure">

</div>

<div class="carousel-item">

<img src="img3.jpg" class="d-block w-100" alt="City Exploration">

</div>

</div>

<button class="carousel-control-prev" type="button" data-bs-target="#travelCarousel"


data-bs-slide="prev">

<span class="carousel-control-prev-icon"></span>

</button>

<button class="carousel-control-next" type="button" data-bs-target="#travelCarousel"


data-bs-slide="next">

<span class="carousel-control-next-icon"></span>

</button>
</div>

<div class="container mt-5">

<div class="row">

<!-- Amazing Destinations -->

<div class="col-md-6">

<div class="card">

<img src="img4.jpg" class="card-img-top" alt="Beautiful Travel Destination">

<div class="card-body">

<h5 class="card-title">Amazing Destinations</h5>

<p class="card-text">Discover breathtaking locations around the world.</p>

<a href="destinations1.html" class="btn btn-primary">Explore More</a>

</div>

</div>

</div>

<div class="col-md-6">

<div class="card">

<img src="img5.jpg" class="card-img-top" alt="Travel Tips">

<div class="card-body">

<h5 class="card-title">Travel Tips</h5>

<p class="card-text">Pack smart and travel light.</p>


<a href="travel-tips1.html" class="btn btn-primary">Read More</a>

</div>

</div>

</div>

</div>

</div>

<footer class="mt-5">

<p>Subscribe to our newsletter for travel updates!</p>

<form class="d-flex justify-content-center">

<input type="email" class="form-control w-25" placeholder="Enter your email"


required>

<button type="submit" class="btn btn-warning ms-2">Subscribe</button>

</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">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Top Travel Destinations</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

body {

background: linear-gradient(120deg, #ff9a9e, #fad0c4);

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;

padding: 10px 15px;

border-radius: 5px;

text-decoration: none;

</style>

</head>

<body>

<div class="container">

<h1 class="my-4">Top Travel Destinations</h1>

<div class="row">

<div class="col-md-4">

<div class="card destination">

<img src="img9.jpg" class="card-img-top" alt="Paris">

<div class="card-body">

<h2 class="card-title">Paris, France</h2>

<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 destination">

<img src="img10.jpg" class="card-img-top" alt="Maldives">

<div class="card-body">

<h2 class="card-title">Maldives</h2>

<p class="card-text">Relax on the stunning beaches of Maldives with crystal-clear


waters.</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card destination">

<img src="img11.jpg" class="card-img-top" alt="Bali">

<div class="card-body">

<h2 class="card-title">Bali, Indonesia</h2>

<p class="card-text">Explore lush jungles, ancient temples, and breathtaking


beaches.</p>

</div>
</div>

</div>

</div>

<a href="boot.html" class="btn btn-custom mt-4">← Back to Home</a>

<footer class="mt-4 text-muted">

<p>© 2025 Travel Blog. All rights reserved.</p>

</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">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Travel Tips</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

body {

background: linear-gradient(120deg, #ff9a9e, #fad0c4);

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">

<h1 class="my-4">Essential Travel Tips</h1>

<div class="row justify-content-center">

<div class="col-md-4">

<div class="card tip">

<img src="img6" class="card-img-top" alt="Pack Light">

<div class="card-body">

<h2 class="card-title">1. Pack Light</h2>

<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 tip">

<img src="img7.jpg" class="card-img-top" alt="Important Documents">

<div class="card-body">

<h2 class="card-title">2. Keep Important Documents Handy</h2>

<p class="card-text">Make digital copies of passports, visas, and travel insurance.</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card tip">

<img src="img8.jpg" class="card-img-top" alt="Local Phrases">

<div class="card-body">

<h2 class="card-title">3. Learn Basic Local Phrases</h2>

<p class="card-text">Knowing a few phrases in the local language can help in


communication.</p>

</div>

</div>

</div>

</div>

<a href="boot.html" class="btn btn-custom">← Back to Home</a>


<footer class="mt-4 text-muted">

<p>© 2025 Travel Blog. All rights reserved.</p>

</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:

1. Form Design (HTML)


 Create a structured HTML form with sections:
 Attendee Information: Name, Age, Email, etc.
 Session Selection: Multiple checkboxes or dropdowns.
 Special Requirements: Text area for dietary/accessibility needs.
 Add Attendee button to allow multiple entries.
 Total Cost Display and Submit button.
2. Styling (CSS)
 Use CSS to make the form responsive, user-friendly, and visually appealing.
 Group sections clearly and use visual indicators for errors.
3. Email Format Validation
 Use JavaScript with a regular expression to validate that each entered email address
follows the correct format (e.g., [email protected]).
4. Session Conflict Detection
 Assign start and end times to each session and implement logic to prevent attendees
from selecting overlapping sessions.
5. Age Requirement Enforcement
 Check the attendee's age against the age restrictions for certain sessions and display
an error message if the requirement is not met.
6. Dynamic Cost Calculation
 Assign cost values to each session and calculate the total cost dynamically based on
the sessions selected by the user.
7. Adding Multiple Attendees
 Provide a button to allow users to add more attendees by duplicating the form section
and ensure that each set of fields is uniquely validated.
8. Preventing Duplicate Emails
 Store all entered email addresses temporarily and check for duplicates before allowing
a new entry with the same email.
9. Confirmation Dialog
 Before the final submission, display a summary dialog showing all the validated
attendee information, selected sessions, special requests, and the total registration cost.
10. Final Submission
 Allow form submission only after the user confirms that all details in the confirmation
dialog are correct.
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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Event Registration Form</h1>
<form id="registrationForm" onsubmit="return validateForm(event)">
<div id="attendees">
<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>
</div>
<button type="button" onclick="addAttendee()">Add Another Attendee</button>
<div id="costDetails">
<p>Total Cost: $<span id="totalCost">0</span></p>
</div>
<button type="submit">Submit Registration</button>
</form>
</div>
<div id="confirmationDialog" class="modal">
<div class="modal-content">
<h2>Confirm Your Registration</h2>
<div id="confirmationDetails"></div>
<button onclick="submitForm()">Confirm</button>
<button onclick="closeModal()">Cancel</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>

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.

 Applied frontend validation techniques to ensure data accuracy, prevent duplicates,


and handle multiple attendee inputs.

 Implemented real-world logic such as age restrictions and session conflict detection
using conditional statements and event handling.

 Developed a fully interactive registration form capable of handling multiple users,


cost calculations, and confirmation dialogs without backend support.
Ex No: 4
INSTALLATION OF TOMCAT SERVER
Date:

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:

 Java Development Kit (JDK)


 Apache Tomcat (preferably version 9 or 10)
 Eclipse IDE for Enterprise Java Developers
 Web Browser (e.g., Chrome, Firefox)

Procedure:

Part A: Installing Apache Tomcat

1. Verify Java Installation:


 Open Command Prompt and run: java -version
 If not installed, download and install JDK from Oracle or OpenJDK.
 Set JAVA_HOME environment variable.
2. Download Tomcat:
 Visit https://tomcat.apache.org/
 Download the appropriate version (e.g., Tomcat 9) ZIP or EXE for your OS.
3. Extract and Launch:
 Extract the ZIP to a directory (e.g., C:\apache-tomcat-9.x)
 Go to the /bin folder and run startup.bat (Windows) or startup.sh (Linux)
4. Verify:
 Open a browser and go to http://localhost:8080
 You should see the Tomcat welcome page.
Part B: Integrating Tomcat with Eclipse

1. Launch Eclipse IDE.


2. Open “Servers” tab:
 If not visible, go to Window → Show View → Servers.

3. Define a New Server:


 Right-click inside the Servers tab → New → Server
 Choose Apache → Tomcat v9.0 (or your version) → Next

4. Add Web Project:


 Right-click on the Tomcat server in the Servers tab → Add and Remove…
 Add your Dynamic Web Project → Finish
5. Start Server:
 Right-click → Start or Debug to launch the Tomcat server from Eclipse

Learning Outcomes:

 Installed Apache Tomcat server and tested it using a browser


 Configured and integrated Tomcat within Eclipse IDE
 Understood how to deploy and test Java web applications using Tomcat.
Ex.No:5A EVENT REGISTRATION FORM WITHOUT
SESSION
Date:

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:

To develop a dynamic web-based event registration system using HTML, CSS,


JavaScript, and Java Servlet technology that allows users to:Add multiple attendees.Select
multiple events per attendee.Automatically calculate total cost.Validate input (age,
email,event eligibility).Preview registration summary before final submission.

Tools Required:

 Frontend:HTML5, CSS3, JavaScript


 Backend:Java Servlet (Servlet API)
 Server:Apache Tomcat (v10 or above recommended)
 IDE:Eclipse IDE for Enterprise Java Developers
 JDK:Java SE Development Kit (JDK 11 or above.
 Browser:Google Chrome or Firefox.
Procedure:
1.Frontend Setup:
 Place the register.html file inside the WebContent folder of your Dynamic Web
Project.
 This file provides an interactive interface for adding attendees and selecting multiple
events.
2.Java Servlet (Backend):
 Add the EventRegistrationServlet.java inside the src/servlet package.
 This servlet will process submitted data (though it’s currently mocked with an alert in
frontend).
 Compile and build using Eclipse.
3.Web Descriptor Configuration:
 Use the provided web.xml content (xml code.txt) and place it in the WEB-INF folder
under WebContent.
4.Run the Application:
 Start the Tomcat server in Eclipse.
 Right-click the project → Run on Server.
 Open http://localhost:8080/YourProjectName/register.html in the browser.
5.Usage Flow:
 Fill in attendee details.
 Select one or more events (cost adds up accordingly).
 Click “Submit Registration” to see a confirmation modal with all data and total cost.
 Click “Confirm & Submit” to finalize.

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).

2.Java Servlet with Session:

 Create EventRegistrationServlet.java under the src/servlet package.


 On form submission, use HttpSession to store attendee data and event selections to
maintain session continuity.
3. Web Descriptor Configuration:
 Place the web.xml file (from xml code.txt) in the WEB-INF folder under WebContent.
 This maps the servlet URL and initializes the application.
4.Run the Application:
 Start the Tomcat server in Eclipse.
 Right-click your project → Run on Server.
 Open http://localhost:8080/YourProjectName/register.html in your browser.
5.Usage Flow:
 User fills in attendee details and selects one or more events.
 Cost dynamically updates based on selected events.
 On clicking “Submit Registration”, the servlet stores the info in session and shows a
confirmation.
 Clicking “Confirm & Submit” finalizes the session-stored data and clears the session.

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")

public class SessionEventRegistrationServlet extends HttpServlet {

private static final Set<String> registeredEmails = new HashSet<>();

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

String email = request.getParameter("email");

String age = request.getParameter("age");

String[] sessions = request.getParameterValues("sessions");

String specialReq = request.getParameter("specialRequirements");

out.println("<html>");

out.println("<head><title>Event Registration</title></head>");

out.println("<body style='text-align: left; font-family: Arial, sans-serif;'>");

if (registeredEmails.contains(email)) {

out.println("<h3>Email is already registered!</h3>");

out.println("</body></html>");

return;

if (name == null || email == null || age == null || sessions == null) {

out.println("<h3>Missing required fields!</h3>");

out.println("</body></html>");

return;

registeredEmails.add(email);
int totalCost = sessions.length * 100;

out.println("<h1>Registration Summary</h1>");

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>Sessions:</strong><br>");

for (String session : sessions) {

out.println(session + "<br>");

out.println("</p>");

out.println("<p><strong>Special Requirements:</strong> " + (specialReq == null ? "None" :


specialReq) + "</p>");

out.println("<p><strong>Total Cost:</strong> ₹" + totalCost + "</p>");

out.println("</body></html>");

Web.xml

<?xml version="1.0" encoding="UTF-8"?>


<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
<servlet>
<servlet-name>SessionEventRegistrationServlet</servlet-name>
<servlet-class>eventtt.SessionEventRegistrationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SessionEventRegistrationServlet</servlet-name>
<url-pattern>/register</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: 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:

 HTML, CSS (for UI)


 JSP (JavaServer Pages)
 JDBC (Java Database Connectivity)
 MySQL / Oracle Database
 Apache Tomcat Server
 Java Development Kit (JDK)
 IDE (Eclipse, NetBeans)

Procedure:

1. Database Setup:

 Create a database with the following tables:


o users (user_id, username, password)
o questions (question_id, question_text, option_a, option_b, option_c,
option_d, correct_option)
 Insert sample users and questions into the database.

2. Login Page (login.jsp):

 Create a form with username and password fields.


 On form submission, use embedded JDBC code to connect to the database and
validate the user credentials.
 If authentication is successful, create a session and redirect the user to the quiz page.
 If authentication fails, show an error message.

3. Quiz Page (quiz.jsp):

 Retrieve questions from the database using embedded JDBC.


 Display one question at a time or all questions with multiple-choice options (radio
buttons).
 Allow the user to select answers.
 Store the selected answers temporarily (in session or hidden fields).

4. Submit and Score Calculation (result.jsp):

 Compare user-submitted answers with correct answers stored in the database.


 Calculate the total score.
 Display the final score with feedback (e.g., "Excellent", "Good", "Try Again").
 Optionally store results in a results table.

5. Validation & Session Management:

 Use basic HTML form validation (e.g., required fields).


 Use session tracking to ensure that only logged-in users can access the quiz.
 Invalidate the session upon logout or quiz submission.
login.jsp
<%@ page import="java.sql.*" %>

<%@ page import="jakarta.servlet.*" %>


<%@ page import="jakarta.servlet.http.*" %>

<%

String msg = "";

if ("POST".equalsIgnoreCase(request.getMethod())) {

String user = request.getParameter("username");

String pass = request.getParameter("password");

Class.forName("com.mysql.cj.jdbc.Driver");

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/students",


"root", "Lipsy@2005");

PreparedStatement ps = con.prepareStatement("SELECT * FROM users WHERE


username=? AND password=?");

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 {

msg = "Invalid credentials!";

con.close();

%>

<h2>Login</h2>

<form method="post">
Username: <input type="text" name="username" required/><br/>

Password: <input type="password" name="password" required/><br/>

<input type="submit" value="Login"/>

</form>

<p style="color:red;"><%= msg %></p>

exam.jsp

<%@ page import="java.sql.*, java.util.*" %>

<%

if (session.getAttribute("user") == null) {

response.sendRedirect("login.jsp");

return;

Class.forName("com.mysql.cj.jdbc.Driver");

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/students",


"root", "Lipsy@2005");

Statement stmt = con.createStatement();

ResultSet rs = stmt.executeQuery("SELECT * FROM questions");

%>

<h2>Online Exam</h2>

<form action="submit.jsp" method="post">

<%

int qno = 1;

while (rs.next()) {

int id = rs.getInt("id");

%>

<p><%= qno++ %>. <%= rs.getString("question") %></p>


<input type="radio" name="q<%= id %>" value="A" required> <%=
rs.getString("option_a") %><br/>

<input type="radio" name="q<%= id %>" value="B"> <%= rs.getString("option_b")


%><br/>

<input type="radio" name="q<%= id %>" value="C"> <%= rs.getString("option_c")


%><br/>

<input type="radio" name="q<%= id %>" value="D"> <%= rs.getString("option_d")


%><br/><br/>

<%

con.close();

%>

<input type="submit" value="Submit Exam"/>

</form>

submit.jsp

<%@ page import="java.sql.*, java.util.*" %>

<%

if (session.getAttribute("user") == null) {

response.sendRedirect("login.jsp");

return;

int score = 0;

Class.forName("com.mysql.cj.jdbc.Driver");

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/students",


"root", "Lipsy@2005");

Statement stmt = con.createStatement();

ResultSet rs = stmt.executeQuery("SELECT id, correct_option FROM questions");


while (rs.next()) {

int id = rs.getInt("id");

String correct = rs.getString("correct_option");

String submitted = request.getParameter("q" + id);

if (correct.equalsIgnoreCase(submitted)) {

score++;

con.close();

%>

<h2>Exam Submitted</h2>

<p>Your Score: <%= score %></p>

<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:

 Java Development Kit (JDK)


 Apache Tomcat Server
 HTML & CSS
 JSP (JavaServer Pages)
 JDBC (Java Database Connectivity)
 MySQL / Oracle Database
 IDE (Eclipse / NetBeans / IntelliJ)
 Web browser (Chrome, Firefox)

Architecture Overview (Three Tiers):

 Presentation Tier: JSP pages (UI)


 Business Logic Tier: Embedded JDBC and Java code within JSP
 Data Tier: Relational database (e.g., MySQL)
Procedure:

1. Database Design:

 Create two tables:


a) students (student_id, name, roll_number, username, password)
b) marks (mark_id, student_id, subject, score)
 Use SQL JOIN to associate student details with subject-wise marks.

2. Login Page (login.jsp):

 Create a login form with username and password fields.


 Use embedded JDBC in JSP to authenticate the student against the database.
 On successful login, store student_id in the session and redirect to the dashboard.

3. Dashboard Page (dashboard.jsp):

 Use session data to retrieve the logged-in student's ID.


 Use embedded JDBC code to perform a JOIN between students and marks tables.
 Retrieve and display:
o Student Name
o Roll Number
o Subject-wise marks
o Total marks (calculated in SQL or JSP)
 Display all data in a structured HTML table.

4. Logout Mechanism (optional):

 Invalidate the session and redirect to the login page.

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:

 XML Editor (Notepad++, VS Code, or any IDE supporting XML)


 Web browser (for viewing XSL-transformed HTML)
 XML Parser (such as built-in browser engines or tools like Xerces)
 Optional: Online validators for XML/XSD/XSLT

Procedure:

1. Create students.xml:

 Define a structured XML document to store multiple students' data.


 Each student should have:
o studentID
o name
o department
o semester
o subjects (with subject name and marks)
2. Create students.xsd:

 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.

4. Link the XSL file with the XML document:

 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"?>

<?xml-stylesheet type="text/xsl" href="students.xsl"?>

<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

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" indent="yes"/>

<xsl:template match="/students">

<html>

<head>

<title>Student Information</title>

<style>

table { border-collapse: collapse; width: 100%; }

th, td { border: 1px solid #999; padding: 8px; text-align: left; }

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>

<p><strong>Department:</strong> <xsl:value-of select="department"/></p>

<p><strong>Semester:</strong> <xsl:value-of select="semester"/></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

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="students">

<xs:complexType>

<xs:sequence>

<xs:element name="student" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

<xs:element name="id" type="xs:int"/>

<xs:element name="name" type="xs:string"/>

<xs:element name="department" type="xs:string"/>

<xs:element name="semester" type="xs:int"/>

<xs:element name="subjects">

<xs:complexType>

<xs:sequence>

<xs:element name="subject" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

<xs:element name="name" type="xs:string"/>

<xs:element name="marks" type="xs:int"/>

</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:

 Learned how to structure hierarchical data using XML.


 Gained experience in defining XML schema constraints using XSD for validation.
 Transformed raw XML data into human-readable HTML using XSLT.
 Validated student information against a schema to ensure data integrity.

You might also like