Scribd
Upload
22 views40 pages

Web Technology P1 PDF

The document is a lab file for a Web Technology course at Galgotias University, detailing various experiments and coding assignments related to HTML, CSS, JavaScript, and server-side programming. It includes specific tasks such as creating web pages, implementing forms, and utilizing frameworks like Bootstrap. Each experiment is accompanied by example code and outputs demonstrating the concepts learned.

Uploaded by

Krish Pandey
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
22 views40 pages

Web Technology P1 PDF

The document is a lab file for a Web Technology course at Galgotias University, detailing various experiments and coding assignments related to HTML, CSS, JavaScript, and server-side programming. It includes specific tasks such as creating web pages, implementing forms, and utilizing frameworks like Bootstrap. Each experiment is accompanied by example code and outputs demonstrating the concepts learned.

Uploaded by

Krish Pandey
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/ 40

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>&copy; 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>&copy; 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:

You might also like