Scribd
Upload
21 views51 pages

HTML Projects by Vaibhav Kaushik

The document contains a series of experiments demonstrating various HTML, CSS, and JavaScript implementations. It includes code for creating simple web pages, forms, and a calculator, showcasing skills in web development. Each experiment is structured with code examples and outputs for educational purposes.

Uploaded by

Arav 2511
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views51 pages

HTML Projects by Vaibhav Kaushik

The document contains a series of experiments demonstrating various HTML, CSS, and JavaScript implementations. It includes code for creating simple web pages, forms, and a calculator, showcasing skills in web development. Each experiment is structured with code examples and outputs for educational purposes.

Uploaded by

Arav 2511
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Experiment no -01

write a simple HTML code to display data/ content on a web page.


Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
</head>
<body>

<h1>Welcome to My Web Page</h1>


<p>This is a simple web page made using only HTML.</p>

<h2>About Me</h2>
<p>Hi! My name is Vaibhav Kaushik.</p>

<h2>My Hobbies</h2>
<ul>
<li>Reading Books</li>
<li>Playing Cricket</li>
<li>Web Development</li>
</ul>
<h2>Contact Information</h2>
<p>Email: kaushikvaibhav853@[Link]</p>
<p>Phone: +91 9368472986</p>

</body>
</html>

Output: -

Experiment no -02
Write a HTML code to display your CV on a web page. Write a HTML
code to implement the concept of frames with 2 frames: one for
hyperlink and another for opening 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>My CV</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}

h1, h2 {
color: #333;
}

.profile-pic {
width: 132px;
height: 170px;
border-radius: 10px;
object-fit: cover;
display: block;
margin-bottom: 10px;
}

.contact, .education, .experience, .skills {


margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Vaibhav Kaushik</h1>
<img src="[Link]" alt="Profile Picture" class="profile-pic">
<p><strong>Web Developer</strong></p>
<div class="contact">
<h2>Contact Information</h2>
<p>Email: kaushikvaibhav853@[Link]</p>
<p>Phone: 9368472986</p>
</div>

<div class="education">
<h2>Education</h2>
<p><strong>Bachelor's in Computer Science</strong></p>
<p>Galgotias University, 2022-2026</p>
</div>

<div class="experience">
<h2>Work Experience</h2>
<p><strong>Front-End Developer</strong> - ABC Tech</p>
<p>June 2025 - Present</p>
<ul>
<li>Developed responsive web applications.</li>
<li>Optimized website performance.</li>
</ul>
</div>

<div class="skills">
<h2>Skills</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>React, Angular</li>
<li>Python, Django</li>
</ul>
</div>
</div>
</body>
</html>

Output: -
Experiment -03
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>CSS Implementation in HTML</title>

<!-- Internal CSS -->


<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif; margin:
20px;
} h1
{ color: blue;
text-align: center;
}
.internal-style {
color: green; font-
weight: bold;
}
</style>
<!-- Linking External CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>

<!-- Inline CSS -->


<h1 style="color: red; text-decoration: underline;">This is an Inline Styled
Heading</h1>

<p class="internal-style">This paragraph is styled using Internal CSS.</p>

<p class="external-style">This paragraph is styled using External CSS.</p>

</body>
</html>

[Link]:-
.external-style {
font-size: 20px; color:
darkblue;
background-color: lightyellow;
padding: 10px; border: 2px
solid black;

Output: -

Experiment -04

Design HTML form for keeping student record and validate it


using java script.

Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Record Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0; padding: 20px;
}
.container {
width: 50%;
background: white;
padding: 20px;
border-radius: 10px; box-
shadow: 0px 0px 10px gray;
margin: auto;
} h2
{ text-align:
center; color:
#333;
} label
{ font-weight:
bold;
}
input, select, textarea {
width: 100%; padding:
8px; margin: 5px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
button { width: 100%;
padding: 10px; background-
color: #28a745; color:
white;
border: none;
border-radius:
5px; font-size:
16px;
}
button:hover {
background-color: #218838;
}
.error
{ color: red;
font-size: 14px;
}
</style>
</head>
<body>

<div class="container">
<h2>Student Record Form</h2>
<form name="studentForm" onsubmit="return validateForm()">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<span class="error" id="nameError"></span>

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span class="error" id="emailError"></span>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="10" max="100">
<span class="error" id="ageError"></span>

<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<span class="error" id="genderError"></span>

<label for="course">Course:</label>
<select id="course" name="course">
<option value="">Select a Course</option>
<option value="Computer Science">Computer Science</option>
<option value="Business Administration">Business
Administration</option>
<option value="Engineering">Engineering</option>
</select>
<span class="error" id="courseError"></span>

<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
<span class="error" id="addressError"></span>

<button type="submit">Submit</button>
</form>
</div>
<script>
function validateForm() {
let isValid = true;

// Clear previous errors


[Link]("nameError").innerHTML = "";
[Link]("emailError").innerHTML = "";
[Link]("ageError").innerHTML = "";
[Link]("genderError").innerHTML = "";
[Link]("courseError").innerHTML = "";
[Link]("addressError").innerHTML = "";

let name = [Link]["studentForm"]["name"].value;


let email = [Link]["studentForm"]["email"].value; let
age = [Link]["studentForm"]["age"].value; let gender
= [Link]["studentForm"]["gender"].value; let course =
[Link]["studentForm"]["course"].value; let address =
[Link]["studentForm"]["address"].value;

// Name validation (required, min 3 chars)


if (name === "" || [Link] < 3) {
[Link]("nameError").innerHTML = "Name must be
at least 3 characters.";
isValid = false;
}
// Email validation (required, proper format)
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (email === "" || ![Link](email)) {
[Link]("emailError").innerHTML = "Enter a valid
email address.";
isValid = false;
}

// Age validation (required, 10-100)


if (age === "" || age < 10 || age > 100) {
[Link]("ageError").innerHTML = "Age must be
between 10 and 100."; isValid = false;
}

// Gender validation (must select one)


if (![Link]('input[name="gender"]:checked')) {
[Link]("genderError").innerHTML = "Please select a
gender.";
isValid = false;
}

// Course validation (must select one)


if (course === "") {
[Link]("courseError").innerHTML = "Please select
a course.";
isValid = false;
}
// Address validation (required, min 10 chars)
if (address === "" || [Link] < 10) {
[Link]("addressError").innerHTML = "Address
must be at least 10 characters.";
isValid = false;
}

return isValid;
}
</script>

</body>
</html>

Output: -
Experiment -05
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>
<link
href="[Link]
s" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.hero-section {
background: url('[Link]
norepeat center center; background-size: cover;
height: 400px;
display: flex; align-
items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Website</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="#">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="#about">About</a></li>
<li class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="hero-section">
<h1>Welcome to My Website</h1>
</header>

<div class="container mt-5">


<div class="row">
<div class="col-md-4">
<div class="card">
<img src="[Link]
class="card-img-top" alt="Tech">
<div class="card-body">
<h5 class="card-title">Technology</h5>
<p class="card-text">Latest trends in technology and
innovation.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="[Link]
class="card-img-top" alt="Business">
<div class="card-body">
<h5 class="card-title">Business</h5>
<p class="card-text">Insights on business and
entrepreneurship.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="[Link]
class="card-img-top" alt="Travel">
<div class="card-body">
<h5 class="card-title">Travel</h5>
<p class="card-text">Explore beautiful destinations
worldwide.</p>
</div>
</div>
</div>
</div>
</div>

<footer class="bg-dark text-white text-center py-3 mt-5">


&copy; 2025 My Website | Designed with Bootstrap
</footer>

<script
src="[Link]
[Link]"></script>
</body>
</html>
Output: -

Experiment -06

Write a Java Script to design a simple calculator to perform the


following operations: sum,product,difference and quotient.
Code:-
<script> function
add()
{
const v1 = [Link]("#val1").value;
const v2 = [Link]("#val2").value;
[Link]("#ans").value = parseFloat(v1)+parseFloat(v2);
}
function sub()
{
const v1 = [Link]("#val1").value;
const v2 = [Link]("#val2").value;
[Link]("#ans").value = v1-v2;
}
function mul()
{
const v1 = [Link]("#val1").value;
const v2 = [Link]("#val2").value;
[Link]("#ans").value = v1*v2;
}
function div()
{
const v1 = [Link]("#val1").value;
const v2 = [Link]("#val2").value; if(v2!
=0)
[Link]("#ans").value = v1/v2;
else
{
[Link]("#ans").value = 0;
alert('Divide by Zero error');
}
}
function cls()
{
[Link]("#val1").value = 0;
[Link]("#val2").value = 0;
[Link]("#ans").value = 0;
}
</script>
<table border=10 align=center>
<tr>
<th colspan=4 style="text-align:center;">Simple Calculator</th>
</tr>
<tr>
<td>Value1</td>
<td colspan=3><input type="number" id="val1" value="0"></td>
</tr>
<tr>
<td>Value2</td>
<td colspan=3><input type="number" id="val2" value="0"></td>
</tr>
<tr>
<td>Answer</td>
<td colspan=2><input type="number" value="0" id="ans" disabled></td>
<td><input type="button" value="C / CE" onclick="cls()"></td>
</tr>
<tr>
<td><input type="button" value="Addition" onclick="add()"></td>
<td><input type="button" value="Subtraction"
onclick="sub()"></td>
<td><input type="button" value="Multiplication"
onclick="mul()"></td>
<td><input type="button" value="Division" onclick="div()"></td>
</tr>
</table>
Output: -

Experiment -07

Write a program to implement AJAX.


Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
</head>
<body>
<h2>AJAX Demo</h2>

<button onclick="loadData()">Get Data</button>


<div id="result"></div>

<script>
function loadData() {
// Create an XMLHttpRequest object
var xhttp = new XMLHttpRequest(); //
Define what happens when the response is
loaded [Link] = function() {
if ([Link] === 200) {
// Update the result div with response
[Link]("result").innerHTML = [Link];
}
};

// Open the request (method, url, async)


[Link]("GET", "[Link]", true);

// Send the request


[Link]();
}
</script>
</body>
</html>
Output: -

Experiment -08

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 navigation bar using Bootstrap and create a
responsive website for your Institute.

Code: -
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="[Link]" %>
<%
String instituteName = "Global Institute of Technology";
Date now = new Date();
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= instituteName %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CDN -->
<link
href="[Link]
s" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#"><%= instituteName %></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 active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Main Content -->


<div class="container mt-4">
<div class="text-center">
<h1>Welcome to <%= instituteName %></h1>
<p>Current server time: <%= [Link]() %></p>
</div>

<section id="home" class="mt-5">


<h2>Home</h2>
<p>This is the homepage of our institute. Stay tuned for updates.</p>
</section>

<section id="about" class="mt-5">


<h2>About Us</h2>
<p>We provide quality education in engineering, science, and
management.</p>
</section>

<section id="contact" class="mt-5 mb-5">


<h2>Contact</h2>
<p>Email: contact@[Link]</p>
<p>Phone: +91 12345 67890</p>
</section>
</div>

<!-- Bootstrap JS CDN -->


<script
src="[Link]
[Link]"></script>
</body>
</html>

Output:-

Experiment -09
Write a program in jquery to click the button and display the
content.

Code:-
<!DOCTYPE html>
<html>
<head>
<title>jQuery Button Click and display the content</title>
<!-- Include jQuery library (via CDN) -->
<script src="[Link]
<style>
#content {
display: none; /* Hidden by default */ margin-
top: 10px;

color: green; font-


weight: bold;
}
</style>
</head>
<body>

<button id="showBtn">Click Me!</button>

<div id="content">Thank you</div>

<script>
$(document).ready(function() {
$("#showBtn").click(function() {
$("#content").show(); // Show the hidden content
});
});
</script>
</body>
</html>

Output:-

Experiment -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="[Link]
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
.highlight {
background-color: yellow;
}
.info {
color: green;
}
</style>
</head>
<body>

<h1 id="mainTitle">jQuery Selector Example</h1>

<p class="info">This is a paragraph with class "info".</p>


<p>This is a normal paragraph.</p>

<input type="text" id="nameInput" placeholder="Enter your name">


<button id="submitBtn">Submit</button>

<br><br>

<a href="#" data-toggle="info">Toggle Info Class</a>

<script>
$(document).ready(function () {
// ID selector
$('#submitBtn').click(function () {
let name = $('#nameInput').val();
alert('Hello, ' + name + '!');
});

// Element selector
$('p').hover(function () {
$(this).addClass('highlight');
}, function () {
$(this).removeClass('highlight');
});

// Class selector $
('.info').click(function () { alert('You
clicked on an info paragraph.');
});

// Attribute selector
$('[data-toggle="info"]').click(function (e) {
[Link]();
$('.info').toggleClass('highlight');
});
});
</script>

</body>
</html>

Output:

Experiment -11
11. Design a web page to create a button for to change button color,
show text, show image, and Reset Button using Jquery.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Button Actions</title>
<script src="[Link]
<style> body { font-family: Arial, sans-serif;
padding: 20px; background-color: #f4f4f4;
}

button { margin: 10px; padding: 10px 20px; font-size: 16px;


cursor: pointer;
}

#outputText { margin-top: 20px; font-size: 18px; color: blue;


}

#outputImage { margin-top: 20px; display: none; max-width: 300px;


}

.color-changed { background-color: crimson; color: white;


}
</style>
</head>
<body>

<h2>jQuery Button Actions</h2>

<button id="changeColorBtn">Change My Color</button>


<button id="showTextBtn">Show Text</button>
<button id="showImageBtn">Show Image</button>
<button id="resetBtn">Reset</button>
<div id="outputText"></div>
<img id="outputImage" src="Screenshot 2025-05-29 [Link]">

<script>
$(document).ready(function () {
// Change button color
$('#changeColorBtn').click(function () {
$(this).toggleClass('color-changed');
});

// Show text
$('#showTextBtn').click(function () {
$('#outputText').text('Hello! My name is Vaibhav.');
});
// Show image
$('#showImageBtn').click(function () {
$('#outputImage').show();
});

// Reset all
$('#resetBtn').click(function () {
$('#changeColorBtn').removeClass('color-changed');
$('#outputText').text('');
$('#outputImage').hide();
});
});
</script>

</body>
</html>

Output:

Experiment -12
Write a program using SERVLET/ JSP and HTML to create a form and
display the details entered by the user.

Code:
[Link] – Input Form
<!DOCTYPE html>
<html>
<head><title>User Form</title></head>
<body>
<h2>User Registration Form</h2>
<form action="submitForm" method="post">
Name: <input type="text" name="name" required><br><br>
Email: <input type="email" name="email" required><br><br>
Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br><br>
Country:
<select name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2. [Link] – Servlet to Handle Form Submission
import [Link]; import [Link].*; import
[Link].*;

public class FormServlet extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
// Get form data
String name = [Link]("name");
String email = [Link]("email");
String gender = [Link]("gender");
String country = [Link]("country");

// Set attributes to forward to JSP


[Link]("name", name);
[Link]("email", email);
[Link]("gender", gender);
[Link]("country", country);

// Forward to JSP
RequestDispatcher dispatcher =
[Link]("[Link]");
[Link](request, response);
}
}
3. [Link] – Show Submitted Details
<%@ page language="java" %>
<html>
<head><title>User Details</title></head>
<body>
<h2>User Submitted Details</h2>
<p><strong>Name:</strong> <%= [Link]("name") %></p>
<p><strong>Email:</strong> <%= [Link]("email") %></p>
<p><strong>Gender:</strong> <%= [Link]("gender") %></p>
<p><strong>Country:</strong> <%= [Link]("country") %></p>
</body>
</html>

4. [Link] – Servlet Mapping


<web-app>
<servlet>
<servlet-name>FormServlet</servlet-name>
<servlet-class>FormServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>FormServlet</servlet-name>
<url-pattern>/submitForm</url-pattern>
</servlet-mapping>
</web-app>

Output:-
Experiment -13

13. Write simple SERVLET/JSP program to set cookies and read it.

Code:
1. JSP Page to Set Cookie ([Link])
<%@ page language="java" %>
<html>
<head><title>Set Cookie</title></head>
<body>
<%
String userName = "JohnDoe";
Cookie cookie = new Cookie("username", userName);
[Link](60 * 60); // 1 hour [Link](cookie);
%>
<h3>Cookie has been set for user: <%= userName %></h3>
<a href="readcookie">Read Cookie</a>
</body>
</html>
2. Servlet to Read Cookie ([Link])
import [Link]; import [Link].*;
import [Link].*;

public class ReadCookieServlet extends HttpServlet {


protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException
{ [Link]("text/html");
[Link] out = [Link]();

Cookie[] cookies = [Link]();


String user = "Not Found";

if (cookies != null) { for (Cookie cookie :


cookies) { if
("username".equals([Link]())) {
user = [Link](); break;
}
}
}

[Link]("<html><body>");
[Link]("<h3>Cookie Retrieved: " + user + "</h3>");
[Link]("</body></html>");
}
}
3. [Link] Configuration
<web-app>
<servlet>
<servlet-name>ReadCookieServlet</servlet-name>
<servlet-class>ReadCookieServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ReadCookieServlet</servlet-name>
<url-pattern>/readcookie</url-pattern>
</servlet-mapping>
/web-app>

Output:
Experiment -14
[Link] a SERVLET/JSP/JSP page for login system using session.

Code:-
1. [Link] – User Login Page
<%@ page language="java" %>
<html>
<head><title>Login Page</title></head>
<body>
<h2>Login</h2>
<form action="login" method="post">
Username: <input type="text" name="username" required><br><br>
Password: <input type="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
[Link] – Handles Login Logic
import [Link]; import
[Link].*; import
[Link].*;

public class LoginServlet extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {

String username = [Link]("username");


String password = [Link]("password");

// Simple static validation (replace with DB validation in real systems)


if ("admin".equals(username) && "1234".equals(password))
{ HttpSession session = [Link]();
[Link]("username", username);
[Link]("[Link]");
} else {
[Link]("text/html");
[Link]().println("<h3>Invalid credentials!</h3>");
[Link]().println("<a href='[Link]'>Try Again</a>");
}
}
}

3. [Link] – Page After Successful Login


<%@ page language="java" %>
<%
HttpSession session = [Link](false);
String user = (session != null) ? (String) [Link]("username") :
null;
if (user == null) {
[Link]("[Link]");
return;
}
%>
<html>
<head><title>Welcome</title></head>
<body>
<h2>Welcome, <%= user %>!</h2>
<a href="[Link]">Logout</a>
</body>
</html>
4. [Link] – (Optional) Logout Page
<%@ page language="java" %>
<%
[Link]();
[Link]("[Link]");%>
5. [Link] – Servlet Configuration
<web-app>
<servlet>
<servlet-name>LoginServlet</servlet-name> <servlet-
class>LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>

Output:-

Experiment -15

[Link] a SERVLET/JSP/JSP program for sending e-mail.


Code:-
[Link] – JSP Input Form
<%@ page language="java" %>
<html>
<head><title>Send Email</title></head>
<body>
<h2>Send Email</h2>
<form action="sendemail" method="post">
To: <input type="email" name="to" required><br><br>
Subject: <input type="text" name="subject" required><br><br>
Message:<br>
<textarea name="message" rows="5" cols="40"
required></textarea><br><br>
<input type="submit" value="Send Email">
</form>
</body>
</html>
[Link] – Servlet to Send Email
import [Link].*; import
[Link].*; import [Link].*;
import [Link].*;

import [Link]; import


[Link];

public class SendEmailServlet extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {

String to = [Link]("to");
String subject = [Link]("subject");
String messageText = [Link]("message");

// SMTP config (Gmail example)


String from = "youremail@[Link]"; // your email
String password = "yourapppassword"; // App-specific password
Properties props = new Properties();
[Link]("[Link]", "true");
[Link]("[Link]", "true");
[Link]("[Link]", "[Link]");
[Link]("[Link]", "587");

Session mailSession = [Link](props, new Authenticator() {


protected PasswordAuthentication getPasswordAuthentication()
{ return new PasswordAuthentication(from, password);
}
}); try
{
Message message = new MimeMessage(mailSession);
[Link](new InternetAddress(from));
[Link]([Link], new InternetAddress(to));
[Link](subject);
[Link](messageText);

[Link](message);
[Link]("status", "Email sent successfully!");
} catch (MessagingException e) {
[Link]();
[Link]("status", "Email sending failed: " + [Link]());
}
RequestDispatcher dispatcher =
[Link]("[Link]");
[Link](request, response);
}
}
[Link] – Display Result
<%@ page language="java" %>
<html>
<head><title>Status</title></head>
<body>
<h2><%= [Link]("status") %></h2>
<a href="[Link]">Send Another Email</a>
</body>
</html>
[Link] – Servlet Mapping
<web-app>
<servlet>
<servlet-name>SendEmailServlet</servlet-name>
<servlet-class>SendEmailServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>SendEmailServlet</servlet-name>
<url-pattern>/sendemail</url-pattern>
</servlet-mapping>
</web-app>

Output:-

Common questions

Powered by AI

JSP (JavaServer Pages) enables dynamic page generation by embedding Java code directly within HTML documents. It allows server response generation based on request inputs and backend data processing. Its main uses include developing interactive and data-driven websites, handling form submissions, dealing with sessions or user dynamics, and managing complex business logic in web pages .

AJAX (Asynchronous JavaScript and XML) plays a crucial role in modern web applications by enabling asynchronous data exchange between a client and server. This allows web pages to update content dynamically without reloading the entire page, improving user experience with faster interactions and seamless content updates. It reduces server load and improves performance by only updating necessary data .

jQuery simplifies JavaScript by providing a cross-browser compatible library that reduces the complexity of scripting tasks. It offers a succinct API for tasks such as DOM manipulation, event handling, and animations. jQuery's effectiveness lies in its ability to write less code for similar functionalities, improve code readability, and ease integration, although it may add bloat if only light scripting is needed .

Bootstrap is used in web design to streamline the development process by providing a set of pre-designed CSS and JavaScript components. It ensures responsive development, meaning web pages will adjust smoothly to different devices and screen sizes. Its advantages include standardized style conventions, reduced development time through ready-to-use components, and easy maintenance and updates across multiple pages due to its consistent framework .

HTML techniques for styling include inline CSS, internal CSS, and external CSS. Inline CSS uses the 'style' attribute directly within HTML tags, applying styles on a per-element basis. Internal CSS is placed within a <style> element inside the <head> section of the HTML document, allowing styles to be applied across the document. External CSS involves linking to a separate CSS file using a <link> element in the <head> section. This externalization allows for separation of content and style, easier maintenance, and reuse across multiple HTML documents .

JavaScript enhances form validation by providing real-time feedback on form submissions, ensuring data integrity before sending it to the server. It checks for errors like missing fields or incorrect formats (e.g., an improperly typed email). JavaScript validation is necessary as it improves user experience by immediately informing users of errors while reducing server load by preventing erroneous data submissions .

Cookies benefit web applications by allowing persistent data storage across sessions, enabling personalized user experiences and keeping track of user state even after browsers close. However, their limitations include potential privacy concerns, such as tracking user activity without explicit consent, limited storage capacity, and the requirement of user consent due to privacy regulations .

Key considerations include ensuring proper data validation both on the client and server-side to avoid injection attacks, managing user sessions to authenticate and track users, handling different MIME types for varying form data inputs, and ensuring thread safety since servlets can manage multiple requests concurrently. Optimizing performance and resource management is also crucial for efficient data handling .

SMTP (Simple Mail Transfer Protocol) enables web applications to send emails by setting up email clients to communicate with email servers for message delivery. Challenges include ensuring secure connections through authentication and encryption (TLS), handling spam filters that can block authorized emails, and configuring application-specific passwords for platforms like Gmail to manage connections securely .

Session management is crucial in user authentication as it tracks and maintains user interactions across different requests during a session. It ensures users remain authenticated without requiring re-login at every page. Implementing session management enhances security by allowing servers to manage timeouts and authentication states, thus protecting sensitive user data from unauthorized access .

You might also like