BACHELOR OF COMPUTER SCIENCE
ENGINEERING & TECHNOLOGY
SCHOOL OF COMPUTER SCIENCE AND ENGINEERING
GALGOTIAS UNIVERSITY, GREATER NOIDA
UTTAR PRADESH
Lab File
Web Technology
Course Code: R1UC626C
Name: Krish Pandey
Admission No.: 22SCSE1011422
S.No. Experiment Name Signature
1 Write a simple HTML code to display data / content on a
web page.
2 Write an HTML code to display your CV on a web
page.
3 Write an HTML code to implement the concept of frames
with 2 frames: one for hyperlinks and another for opening
the content to that link.
4 Implement CSS using all the ways of HTML.
5 Design HTML form for keeping student record and val-
idate it using JavaScript.
6 Complete Web page with HTML and CSS using Boot-
strap.
7 Write a program to implement AJAX.
8 Implementation of JSP to generate server side
response Write a JSP code to generate dynamic
webpage using server response. Write a code to
create a responsive website navigation bar using
Bootstrap and create for your Institute.
9 Write a program in jquery to click the button and display
the content.
10 Design a Web Page using Jquery Selectors.
11 Design a web page to create a button for to change button
color, show text, show image, and Reset Button using
Jquery.
12 Write a program using SERVLET/ JSP and HTML to
create a form and display the details entered by the user.
13 Write simple SERVLET/ JSP program to set cookies and
read it.
14 Create a SERVLET/ JSP/ JSP page for login system using
session
15 Write a SERVLET/ JSP / JSP program for sending e-mail.
EXP-1
1.Write a simple HTML code to display data/content on a webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Data</title>
<style>
body {
background-color: yellow;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
padding: 30px;
h1 {
color: darkblue;
p{
font-size: 18px;
ul {
list-style-type: circle;
padding: 0;
}
li {
margin: 10px 0;
font-weight: bold;
img {
width: 250px;
border-radius: 10px;
margin-top: 20px;
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: darkblue;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
button:hover {
background-color: navy;
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>Here’s a basic example of how content can be displayed beautifully on a web page.</p>
<ul>
<li>Clean Design</li>
<li>Simple Layout</li>
<li>Easy to Understand</li>
</ul>
<img src="https://via.placeholder.com/250" alt="Sample Image">
<br>
<button onclick="alert('Thanks for visiting!')">Click Me</button>
</body>
</html>
Output:
EXP-2
2.Write an HTML code to display your CV on a web page. Write an HTML code to
implement the concept of frames with 2 frames: one for hyperlinks and another for
opening the for the content to that link.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Nawaj - CV</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f8;
color: #2c3e50;
padding: 40px;
max-width: 850px;
margin: auto;
line-height: 1.6;
h1, h2 {
color: #1a1a1a;
h1 {
border-bottom: 2px solid #1abc9c;
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 20px;
.profile-pic {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #1abc9c;
.section {
margin-top: 30px;
ul {
list-style: square;
padding-left: 20px;
}
.contact {
background-color: #ecf0f1;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
.contact p {
margin: 5px 0;
.links {
margin-top: 10px;
.links a {
margin-right: 15px;
text-decoration: none;
color: #1abc9c;
font-weight: bold;
.resume-btn {
margin-top: 20px;
display: inline-block;
background-color: #1abc9c;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
.resume-btn:hover {
background-color: #16a085;
}
</style>
</head>
<body>
<h1>
<img src="profile.jpg" alt="Nawaj Profile Picture" class="profile-pic">
Nawaj
</h1>
<p><strong>B.Tech in Computer Science Engineering</strong><br>Galgotias University, Greater
Noida</p>
<div class="contact">
<p><strong>Phone:</strong> 817180</p>
<p><strong>Email:</strong> [email protected]</p>
<div class="links">
<a href="https://github.com/yourgithubusername" target="_blank">GitHub</a>
<a href="resume.pdf" class="resume-btn" download> Download Resume</a>
</div>
</div>
<div class="section">
<h2>Objective</h2>
<p>To obtain a part-time opportunity where I can apply my technical knowledge and grow as a
Computer Science student by contributing to real-world projects.</p>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li>Programming Languages: Java, JavaScript, Python</li>
<li>Web Development: HTML, CSS, Bootstrap, React (Basics)</li>
<li>Tools: Git, VS Code, Tinkercad, Figma</li>
<li>Core Areas: Data Structures, Algorithms, OOP</li>
<li>AI/ML & Data Science (AWS Academy)</li>
<li>Cybersecurity Fundamentals</li>
<li>Arduino Projects & IoT (Tinkercad Simulations)</li>
</ul>
</div>
<div class="section">
<h2>Projects</h2>
<ul>
<li><strong>Portfolio Website:</strong> Responsive personal site using HTML, CSS, and JS.</li>
<li><strong>Gaming Desk Setup Plan:</strong> Designed clean gaming layout with own devices.</li>
<li><strong>To-Do List App:</strong> JavaScript-based task manager with local storage.</li>
</ul>
</div>
<div class="section">
<h2>Education</h2>
<ul>
<li>B.Tech in CSE, Galgotias University (2022–2026)</li>
<li>Senior Secondary (12th), XYZ School</li>
</ul>
</div>
<div class="section">
<h2>Achievements & Certifications</h2>
<ul>
<li>AI/ML & Data Science Virtual Internships – AWS Academy</li>
<li>Cybersecurity Fundamentals – AWS Training</li>
<li>Participation in Hackathons and coding challenges</li>
</ul>
</div>
</body>
</html>
Output:
EXP-3
3.Implement CSS using all the ways of HTML.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Professional CV - Nawaj</title>
<!-- Simulated External CSS -->
<!-- <link rel="stylesheet" href="styles.css"> -->
<style>
body {
margin: 0;
padding: 0;
background-color: #add8e6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #2c3e50;
.container {
max-width: 800px;
margin: 50px auto;
background-color: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
h1 {
color: #1a1a1a;
text-align: center;
border-bottom: 2px solid #1abc9c;
padding-bottom: 10px;
.btn {
background-color: #1abc9c;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
margin: 30px auto 0;
text-align: center;
text-decoration: none;
.btn:hover {
background-color: #16a085;
</style>
</head>
<body style="background-color: #add8e6;"> <!-- Inline CSS -->
<div class="container">
<h1>Nawaj - Computer Science Student</h1>
<p style="text-align: center; font-size: 18px;">
Welcome to my professional profile! I’m passionate about technology, coding, and real-world
problem-solving.
</p>\
<!-- Continue Button -->
<a href="#" class="btn">Continue</a>
</div>
</body>
</html>
Output:
EXP-4
4.Design HTML form for keepiong student record and validate it using java script
.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Record Form</title>
<style>
body {
background-color: #e3f2fd;
font-family: Arial, sans-serif;
margin: 0;
padding: 40px;
}
.form-container {
background-color: #ffffff;
max-width: 500px;
margin: auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
h2 {
text-align: center;
color: #0d47a1;
label {
display: block;
margin-top: 15px;
font-weight: bold;
input, select {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 6px;
border: 1px solid #ccc;
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background-color: #0d47a1;
color: white;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
button:hover {
background-color: #1565c0;
.error {
color: red;
font-size: 13px;
</style>
</head>
<body>
<div class="form-container">
<h2>Student Record Form</h2>
<form id="studentForm" onsubmit="return validateForm()">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<div id="nameError" class="error"></div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div id="emailError" class="error"></div>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone">
<div id="phoneError" class="error"></div>
<label for="roll">Roll Number:</label>
<input type="text" id="roll" name="roll">
<div id="rollError" class="error"></div>
<label for="course">Course:</label>
<select id="course" name="course">
<option value="">-- Select Course --</option>
<option value="B.Tech CSE">B.Tech CSE</option>
<option value="BCA">BCA</option>
<option value="B.Sc CS">B.Sc CS</option>
<option value="MCA">MCA</option>
</select>
<div id="courseError" class="error"></div>
<button type="submit">Submit Record</button>
</form>
</div>
<script>
function validateForm() {
const name = document.getElementById("Nawaj").value.trim();
const email = document.getElementById("[email protected]").value.trim();
const phone = document.getElementById("817180").value.trim();
const roll = document.getElementById("22SCSE").value.trim();
const course = document.getElementById("B.Tech-CSE").value;
const nameErr = document.getElementById("nameError");
const emailErr = document.getElementById("emailError");
const phoneErr = document.getElementById("phoneError");
const rollErr = document.getElementById("rollError");
const courseErr = document.getElementById("courseError");
let valid = true;
nameErr.textContent = "";
emailErr.textContent = "";
phoneErr.textContent = "";
rollErr.textContent = "";
courseErr.textContent = "";
if (name === "") {
nameErr.textContent = "Please enter full name.";
valid = false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
emailErr.textContent = "Enter a valid email address.";
valid = false;
if (!/^\d{10}$/.test(phone)) {
phoneErr.textContent = "Phone number must be 10 digits.";
valid = false;
if (roll === "") {
rollErr.textContent = "Please enter roll number.";
valid = false;
if (course === "") {
courseErr.textContent = "Please select a course.";
valid = false;
return valid;
</script>
</body>
</html>
Output:
EXP-5
5.Complete web page with HTML and CSS using bootstrap.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Web Page</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-primary text-white text-center py-5">
<h1>Welcome to My Website</h1>
<p class="lead">This is a simple web page using Bootstrap</p>
<a href="#" class="btn btn-light btn-lg">Learn More</a>
</div>
<!-- Features Section -->
<div class="container my-5">
<div class="row text-center">
<div class="col-md-4">
<div class="card p-3">
<div class="card-body">
<h5 class="card-title">Feature 1</h5>
<p class="card-text">Description of feature 1.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-3">
<div class="card-body">
<h5 class="card-title">Feature 2</h5>
<p class="card-text">Description of feature 2.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-3">
<div class="card-body">
<h5 class="card-title">Feature 3</h5>
<p class="card-text">Description of feature 3.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2025 My Website. All rights reserved.</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:
EXP-6
6.Write a javaScript to design a simple calculator to perform the following
operations: sum,product,difference and quotient.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
input, button {
margin: 5px;
padding: 10px;
font-size: 16px;
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<br>
<button onclick="calculate('sum')">Sum</button>
<button onclick="calculate('product')">Product</button>
<button onclick="calculate('difference')">Difference</button>
<button onclick="calculate('quotient')">Quotient</button>
<h2 id="result">Result: </h2>
<script>
function calculate(operation) {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
let result;
if (isNaN(num1) || isNaN(num2)) {
result = "Please enter valid numbers.";
} else {
switch (operation) {
case 'sum':
result = num1 + num2;
break;
case 'product':
result = num1 * num2;
break;
case 'difference':
result = num1 - num2;
break;
case 'quotient':
result = num2 !== 0 ? num1 / num2 : "Cannot divide by zero.";
break;
default:
result = "Invalid operation.";
document.getElementById('result').innerText = "Result: " + result;
</script>
</body>
</html>
Output:
EXP-7
7.Write a program to implement Ajax.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AJAX Demo - Nawaj</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #e3f2fd;
font-family: 'Segoe UI', Tahoma, sans-serif;
padding: 40px;
.ajax-container {
max-width: 600px;
margin: auto;
background-color: #ffffff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
text-align: center;
#output {
margin-top: 20px;
padding: 15px;
border: 1px dashed #2196f3;
background-color: #f1f8ff;
border-radius: 8px;
</style>
</head>
<body>
<div class="ajax-container">
<h2>AJAX: Fetching Data Without Reload</h2>
<p>This example uses AJAX to get content from the page itself (simulating server response).</p>
<button onclick="loadData()" class="btn btn-primary">Fetch Data</button>
<div id="output" class="mt-4">Result will appear here...</div>
</div>
<script>
function loadData() {
const xhr = new XMLHttpRequest();
const responseText = "Hello Nawaj! This is data loaded via AJAX. ";
const blob = new Blob([responseText], { type: 'text/plain' });
const fakeURL = URL.createObjectURL(blob);
xhr.open('GET', fakeURL, true);
xhr.onload = function () {
if (this.status === 200) {
document.getElementById('output').innerHTML = `<strong>Server
says:</strong><br>${this.responseText}`;
} else {
document.getElementById('output').innerHTML = "Error fetching data.";
};
xhr.onerror = function () {
document.getElementById('output').innerHTML = "Request failed.";
};
xhr.send();
</script>
</body>
</html>
Output:
EXP-8
8. Implementation of JSP to generate server side response Write a JSP code to
generate dynamic webpage using server response. Write a code to create a
a responsive website navigation bar using Bootstrap and create for your Institute.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Galgotias University</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: yellow;
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Galgotias University</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Static Content -->
<div class="container mt-5">
<h1 class="text-center">Hello, Nawaj!</h1>
<p class="text-center">Wish you a great learning journey ahead!</p>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>© 2025 Galgotias University. All Rights Reserved.</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:
EXP-9
9.Write a program in jquery to click the button and display the content
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Message Display</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.container {
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
text-align: center;
max-width: 400px;
width: 90%;
h1 {
font-size: 24px;
margin-bottom: 10px;
}
p.subtitle {
color: #666;
font-size: 14px;
margin-bottom: 30px;
#showBtn {
padding: 12px 25px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
#showBtn:hover {
background-color: #0056b3;
#content {
display: none;
margin-top: 25px;
font-size: 18px;
color: #333;
animation: fadeIn 0.5s ease-in-out;
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Web App</h1>
<p class="subtitle">Click the button below to reveal the hidden message.</p>
<button id="showBtn">Show Message</button>
<div id="content"> Hello Nawaj! This message is revealed using jQuery.</div>
</div>
<script>
$(document).ready(function(){
$('#showBtn').click(function(){
$('#content').fadeIn();
});
});
</script>
</body>
</html>
Output:
EXP-10
10.Design a web page using Jquery selectors.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Selectors Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 30px;
background-color: #f0f2f5;
h1 {
color: #333;
.highlight {
background-color: yellow;
.box {
border: 1px solid #ccc;
padding: 15px;
margin: 10px 0;
border-radius: 6px;
background-color: #fff;
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0056b3;
</style>
</head>
<body>
<h1>jQuery Selector Example</h1>
<div id="box1" class="box">Box 1 (ID selector)</div>
<div class="box highlight">Box 2 (Class selector)</div>
<p class="box">Paragraph 1 (Tag + class)</p>
<p>Paragraph 2 (Tag selector)</p>
<input type="text" placeholder="Type something..." />
<br/>
<button id="actionBtn">Apply jQuery Selectors</button>
<script>
$(document).ready(function() {
$('#actionBtn').click(function() {
// ID selector
$('#box1').css('color', 'green');
// Class selector
$('.highlight').css('font-weight', 'bold');
// Tag selector
$('p').css('font-size', '18px');
// Attribute selector
$('input[type="text"]').val('jQuery is working!');
// Multiple selectors
$('div, p').css('border-color', 'blue');
});
});
</script>
</body>
</html>
Output:
EXP-11
11. Design a web page to create a button for to change button color, show text,
showimage, and Reset Button using Jquery.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Button Actions</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background: #f4f4f4;
text-align: center;
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
#output {
margin-top: 20px;
#output img {
max-width: 200px;
display: block;
margin: 10px auto;
</style>
</head>
<body>
<h1>jQuery Button Actions</h1>
<button id="colorBtn">Change Button Color</button>
<button id="textBtn">Show Text</button>
<button id="imgBtn">Show Image</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ready(function () {
$("#colorBtn").click(function () {
$(this).css("background-color", "#28a745");
$(this).css("color", "white");
});
$("#textBtn").click(function () {
$("#output").append("<p>This is some sample text added using jQuery.</p>");
});
$("#imgBtn").click(function () {
$("#output").append('<img src="https://via.placeholder.com/200" alt="Sample Image" />');
});
$("#resetBtn").click(function () {
$("#colorBtn").css({ backgroundColor: "", color: "" });
$("#output").html("");
});
});
</script>
</body>
</html>
Outout:
EXP-12
12. Write a program using SERVLET/ JSP and HTML to create a form and display the
details entered by the user.
Code:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>User Details Form</title>
</head>
<body>
<%
String name = request.getParameter("name");
String email = request.getParameter("email");
if (name != null && email != null) {
%>
<h2>Details Entered:</h2>
<p>Name: <%= name %></p>
<p>Email: <%= email %></p>
<a href="UserForm.jsp">Back to Form</a>
<%
} else {
%>
<h2>Enter Your Details</h2>
<form method="post" action="UserForm.jsp">
Name: <input type="text" name="name" required><br><br>
Email: <input type="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
<%
%>
</body>
</html>
Output:
EXP-13
13. Write simple SERVLET/ JSP program to set cookies and read it.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example - Simple</title>
</head>
<body>
<h2>Set and Read Cookies using JavaScript</h2>
<button onclick="setCookie()">Set Cookie</button>
<button onclick="showCookies()">Show Cookies</button>
<p id="output"></p>
<script>
function setCookie() {
document.cookie = "username=Student; max-age=3600; path=/";
alert("Cookie has been set.");
function showCookies() {
document.getElementById("output").innerText = document.cookie || "No cookies found.";
</script>
</body>
</html>
Output:
EXP-14
14. Create a SERVLET/ JSP/ JSP page for login system using session.
Code:
<!-- login.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-
8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head >
<title >Login </title >
</head >
<body>
<form action="welcome.jsp" method="post">
<label>Username:</label><input type="text" name=" username"><br>
<label>Password:</label><input type=" password" name=" password">< br>
<input type="submit" value="Login">
</form >
</body>
</html>
<!-- welcome.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-
8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head >
<title >Welcome </title >
</head >
<body>
<%
String username = request. getParameter(" username"); String
password = request. getParameter(" password");
if (username != null && password != null &&
username.equals(" rahul") && password.equals(" india123 ")) {
session. setAttribute(" username", username); out.println("<h1 >Welcome
, " + username +
"!</h1 >");
Output:
EXP-15
15.Write a SERVLET/JSP/JSP program for sending e-mail.
Code:
<!-- email.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head >
<title >Send Email </title >
</head >
<body>
<form action=" EmailServlet" method="post">
<label>To:</label><input type="email" name=" recipient"><br>
<label>Subject:</label><input type="text" name="subject"><br>
<label>Message:</label><textarea name="message" ></textarea ><br>
<input type="submit" value="Send">
</form >
</body>
</html>
<!-- EmailServlet.java -->
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*; import
javax.mail.*;
import javax.mail. internet.*;
import java.util. Properties;
public class EmailServlet extends HttpServlet {
protected void doPost( HttpServletRequest request ,
HttpServletResponse response)
throws ServletException , IOException { response.
setContentType("text/html");
PrintWriter out = response. getWriter();
String recipient = request. getParameter(" recipient"); String
subject = request. getParameter("subject");
String message = request. getParameter("message");
// Email configuration (example , requires actual SMTP settings)
Properties props = new Properties();
props.put("mail.smtp.host", "smtp.example.com");
props.put("mail.smtp.port", "587 ");
props.put("mail.smtp.auth", "true");
props.put("mail.smtp. starttls.enable", "true");
out.println("<h1 >Email Sent (Configuration Required) </h1 >");
out.println("<p>Recipient: " + recipient + " </p>");
out.println("<p>Subject: " + subject + " </p>");
out.println("<p>Message: " + message + " </p>");
}
Output:
