Scribd
Upload
32 views48 pages

Web Technology LAB Record

This document is a lab record file for the Web Technology course at Galgotias University, detailing the work done by a student named Subham Baghar. It includes a certificate of completion, a list of experiments related to web development, and sample HTML and JavaScript code for various web pages and functionalities. The experiments cover topics such as static web page design, form validation, and AJAX programming.

Uploaded by

subham baghar
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
32 views48 pages

Web Technology LAB Record

This document is a lab record file for the Web Technology course at Galgotias University, detailing the work done by a student named Subham Baghar. It includes a certificate of completion, a list of experiments related to web development, and sample HTML and JavaScript code for various web pages and functionalities. The experiments cover topics such as static web page design, form validation, and AJAX programming.

Uploaded by

subham baghar
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/ 48

21SCSE1011599

School of Computer Science & Engineering

Galgotias University

Greater Noida, Uttar Pradesh 203201

LAB RECORD FILE

Web Technology
R1UC602C

Submitted To:
Mr. R.Radha Krishnan

NAME Subham Baghar


ADMIN NO 21SCSE1011599
SUB NAME WEB TECHNOLOGY
SUB CODE R1UC602C
SECTION 22

1
21SCSE1011599

School of Computer Science & Engineering


Galgotias University
Greater Noida, Uttar Pradesh 203201

CERTIFICATE

Certified to be bonafide record of work done by Mr. Subham Baghar of Sixth


semester B.Tech of Computer Science and Engineering in the R1UC602C-Web
Technology Lab during the academic year 2023-2024.

STAFF-IN-CHARGE

Submitted for the university practical examination held on ______________ .

Internal Examiner External Examiner

2
21SCSE1011599

S. No. LIST OF Page


EXPERIMENTS No.
1 Design the following static web pages required for an online book store 5 - 11
web site. 1) HOME PAGE: The static home page must contain three
frames. 2) LOGIN PAGE 3) CATOLOGUE PAGE: The catalogue page
should contain the details of all the books available in the web site in a
table. 4) REGISTRATION PAGE
2. Write JavaScript to validate the following fields of the Registration page. 12 - 14
1. First Name (Name should contains alphabets and the length should not
be less than 6 characters).
2. Password (Password should not be less than 6 characters length). 3. E-
mail id (should not contain any invalid and must follow the standard
pattern [email protected]) 4. Mobile Number (Phone number should
contain 10 digits only). 5. Last
Name and Address (should not be Empty).
3. Develop and demonstrate the usage of inline, internal and external 15 - 16
style sheet using CSS
4. Develop and demonstrate JavaScript with POP-UP boxes and functions for 17 - 21
the following problems: a) Input: Click on Display Date button using
onclick () function Output: Display date in the textbox b) Input: A number
n obtained using prompt Output: Factorial of n number using alert c)
Input: A number n obtained using prompt Output: A multiplication table of
numbers from 1 to
10 of n using alert d) Input: A number n obtained using prompt and add
another number using confirm Output: Sum of the entire
n numbers using alert
5. Write an HTML page that contains a selection box with a list of 5 22 - 23
countries. When the user selects a country, its capital should be printed
next in the list. Add CSS to customize the properties of the font of the
capital (color,bold and font size).
6. Write an HTML page including any required JavaScript that takes a 24 - 26
number from text field in the range of 0 to 999 and shows it in words. It
should not accept four and above digits, alphabets and special characters.
Create a form using various form elements and print the values using Java 27 - 29
7. Script
Write a AJAX program in which user will enter a number and table of 30 - 31
8. that will be displayed

3
21SCSE1011599

Create and save an XML document at the server, which contains10 users 32 - 35
9. information. Write a program which takes user id as input and returns the
user details by taking the user informationfrom the XML document
10. Write a Servlet/ JSP program which takes value from HTML and print 36 - 37
using Servlet/ JSP.
11. Creating a JSP (JavaServer Pages) program that interacts with an Oracle 38 - 39

12. To create a JSP (JavaServer Pages) program that prints the 40 - 41


multiplication table of a given number
13. Servlet/ JSP program without session Management 42 - 43

14. Servlet/ JSP program with session Management 44 - 45

15. Servlet/ JSP program with navigation 46 - 48

4
21SCSE1011599

Experiment 1

Design the following static web pages required for an online book store web site.
1. HOME PAGE: The static home page must contain three frames.
2. LOGIN PAGE
3. CATALOGUE PAGE: The catalogue page should contain the details of all the
books available in the web site in a table.
4. REGISTRATION PAGE

CODE

home.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online Book Store - Home</title>
<style>
frameset, frame {
border: none;
}
</style>
</head>
<frameset rows="15%,10%,*">
<frame src="header.html" name="header">
<frame src="nav.html" name="nav">
<frame src="content.html" name="content">
</frameset>
</html>

header.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #4682B4;
margin: 0;
color: white;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
}
h1 {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>📚 ONLINE BOOK STORE</h1>
</body>
</html>

content.html

<!DOCTYPE html>
5
21SCSE1011599

<html>
<head>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
text-align: center;
padding: 50px;
background-color: #fafafa;
}
h2 {
color: #333;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h2>Explore Thousands of Books!</h2>
<p>Log in or register to start browsing and buying your favorite books online.</p>
</body>
</html>

catalogue.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #fdfdfd;
padding: 30px;
}
h2 {
text-align: center;
color: #333;
}
table {
width: 90%;
margin: auto;
border-collapse: collapse;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
border: 1px solid #ccc;
text-align: center;
}
th {
background-color: #4A90E2;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Book Catalogue</h2>
<table>
<tr>

6
21SCSE1011599

<th>Book ID</th>
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th>Genre</th>
</tr>
<tr>
<td>101</td>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>$10.99</td>
<td>Classic</td>
</tr>
<tr>
<td>102</td>
<td>1984</td>
<td>George Orwell</td>
<td>$8.99</td>
<td>Dystopian</td>
</tr>
<tr>
<td>103</td>
<td>Harry Potter</td>
<td>J.K. Rowling</td>
<td>$12.50</td>
<td>Fantasy</td>
</tr>
</table>
</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
text-align: center;
padding: 50px;
}
form {
background-color: white;
display: inline-block;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"], input[type="password"] {
width: 250px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
padding: 10px 20px;
border: none;
background-color: #4A90E2;
color: white;
font-weight: bold;

7
21SCSE1011599

border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #357ABD;
}
</style>
</head>
<body>
<h2>User Login</h2>
<form>
<input type="text" name="username" placeholder="Username"><br>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="Login">
</form>
</body>
</html>

nav.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
padding: 10px;
}
a {
margin: 0 20px;
text-decoration: none;
font-weight: bold;
color: #333;
}
a:hover {
color: #4A90E2;
}
</style>
</head>
<body>
<a href="home.html" target="content">Home</a>
<a href="login.html" target="content">Login</a>
<a href="catalogue.html" target="content">Catalogue</a>
<a href="register.html" target="content">Register</a>
</body>
</html>

register.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
text-align: center;
padding: 50px;
}
form {

8
21SCSE1011599

background-color: white;
display: inline-block;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"], input[type="email"], input[type="password"] {
width: 250px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
padding: 10px 20px;
border: none;
background-color: #4A90E2;
color: white;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #357ABD;
}
</style>
</head>
<body>
<h2>Register New Account</h2>
<form>
<input type="text" name="fullname" placeholder="Full Name"><br>
<input type="email" name="email" placeholder="Email"><br>
<input type="text" name="username" placeholder="Username"><br>
<input type="password" name="password" placeholder="Password"><br>
<input type="password" name="confirm_password" placeholder="Confirm
Password"><br>
<input type="submit" value="Register">
</form>
</body>
</html>

9
21SCSE1011599

OUTPUT - SCREENSHOTS

HOME PAGE

LOGIN PAGE

10
21SCSE1011599

CATALOGUE PAGE

RAGISTRATION PAGE

11
21SCSE1011599

Experiment 2

Write JavaScript to validate the following fields of the Registration page.


1. First Name (Name should contains alphabets and the length should not be
less than 6
characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the standard
pattern
[email protected])
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).

CODE

registration.html

<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 50px;
}
form {
background-color: white;
display: inline-block;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"], input[type="email"], input[type="password"], textarea {
width: 250px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
padding: 10px 20px;
border: none;
background-color: #4A90E2;
color: white;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #357ABD;
}
</style>
<script>
function validateForm() {
const fname = document.forms["regForm"]["firstname"].value.trim();
const lname = document.forms["regForm"]["lastname"].value.trim();
const email = document.forms["regForm"]["email"].value.trim();
12
21SCSE1011599

const password = document.forms["regForm"]["password"].value;


const phone = document.forms["regForm"]["phone"].value.trim();
const address = document.forms["regForm"]["address"].value.trim();

const nameRegex = /^[A-Za-z]{6,}$/;


const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}$/;
const phoneRegex = /^\d{10}$/;

let errors = [];

if (!nameRegex.test(fname)) {
errors.push("First name must be at least 6 alphabetic characters.");
}

if (lname === "") {


errors.push("Last name cannot be empty.");
}

if (!emailRegex.test(email)) {
errors.push("Please enter a valid email address (e.g. [email protected]).");
}

if (password.length < 6) {
errors.push("Password must be at least 6 characters long.");
}

if (!phoneRegex.test(phone)) {
errors.push("Phone number must be exactly 10 digits.");
}

if (address === "") {


errors.push("Address cannot be empty.");
}

if (errors.length > 0) {
alert(errors.join("\n"));
return false;
} else {
alert("🎉 Registration Successful!");
return true;
}
}
</script>
</head>
<body>
<h2>Register New Account</h2>
<form name="regForm" onsubmit="return validateForm()">
<input type="text" name="firstname" placeholder="First Name"><br>
<input type="text" name="lastname" placeholder="Last Name"><br>
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="password" placeholder="Password"><br>
<input type="text" name="phone" placeholder="Mobile Number"><br>
<textarea name="address" placeholder="Address"></textarea><br>
<input type="submit" value="Register">
</form>
</body>
</html>

13
21SCSE1011599

OUTPUT - SCREENSHOTS

14
21SCSE1011599

Experiment 3

Develop and demonstrate the usage of inline, internal and external style
sheet using CSS.

CODE

registration.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Styles Demo</title>

<!-- Internal CSS -->


<style>
h1 {
color: darkblue;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
}
.internal-style {
color: green;
font-size: 18px;
}
</style>

<!-- External CSS -->


<link rel="stylesheet" href="/EXP 3/style.css">
</head>
<body>

<!-- Inline CSS -->


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

<p class="internal-style">This paragraph uses Internal CSS.</p>

<p class="external-style">This paragraph uses External CSS.</p>

</body>
</html>

style.css

/* style.css */

.external-style {
color: #4A90E2;
font-weight: bold;
font-size: 16px;
font-family: Arial, sans-serif;
}

15
21SCSE1011599

OUTPUT - SCREENSHOTS

16
21SCSE1011599

Experiment 4

Develop and demonstrate JavaScript with POP-UP boxes and functions for the
following problems:
a) Input: Click on Display Date button using onclick( ) function
Output: Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
d) Input: A number n obtained using prompt and add another number using
confirm
Output: Sum of the entire n numbers using alert

CODE

index.html

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Popup & Function Demo</title>
<style>
body {
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
padding: 30px;
background-color: #f4f4f4;
}
button {
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
margin: 10px;
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
input {
padding: 10px;
margin-top: 10px;
width: 250px;
}
</style>
</head>
<body>

<h2>JavaScript Popups & Functions Demo</h2>

<!-- Task 1: Display Date in Textbox -->


<button onclick="displayDate()">Display Date</button><br>
<input type="text" id="dateBox" placeholder="Date will appear here">

<!-- Task 2: Factorial -->


17
21SCSE1011599

<button onclick="findFactorial()">Find Factorial</button>

<!-- Task 3: Multiplication Table -->


<button onclick="showMultiplicationTable()">Show Multiplication Table</button>

<!-- Task 4: Sum of Numbers using Confirm -->


<button onclick="sumNumbers()">Sum of Numbers</button>

<script>
// Task 1: Display Date
function displayDate() {
document.getElementById("dateBox").value = new Date().toLocaleString();
}

// Task 2: Factorial using prompt and alert


function findFactorial() {
let n = parseInt(prompt("Enter a number to calculate its factorial:"));
if (isNaN(n) || n < 0) {
alert("Please enter a valid non-negative number.");
return;
}

let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}

alert(`Factorial of ${n} is ${result}`);


}

// Task 3: Multiplication table of n using prompt


function showMultiplicationTable() {
let n = parseInt(prompt("Enter a number to get its multiplication table:"));
if (isNaN(n)) {
alert("Invalid input. Please enter a number.");
return;
}

let output = `Multiplication Table of ${n}:\n`;


for (let i = 1; i <= 10; i++) {
output += `${n} x ${i} = ${n * i}\n`;
}

alert(output);
}

// Task 4: Sum of n numbers using confirm


function sumNumbers() {
let total = 0;
let count = 0;

while (true) {
let n = parseFloat(prompt("Enter a number to add:"));
if (isNaN(n)) {
alert("Invalid input. Please enter a number.");
continue;
}

total += n;
count++;

if (!confirm("Do you want to add another number?")) {


break;
}

18
21SCSE1011599

alert(`You added ${count} number(s).\nTotal sum is: ${total}`);


}
</script>

</body>
</html>

OUTPUT - SCREENSHOTS

DISPLAY DATE IN A TEXTBOX

19
21SCSE1011599

FIND FACTORIAL

MULTIPLICATION TABLE

20
21SCSE1011599

SUM OF NUMBERS

21
21SCSE1011599

Experiment 5

Write an HTML page that contains a selection box with a list of 5


countries. When the user selects a country, its capital should be printed
next in the list. Add CSS to customize the properties of the font of the
capital (color,bold and font size).

CODE
index.html

<!DOCTYPE html>
<html>
<head>
<title>Country Capital Selector</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
padding: 50px;
background-color: #f4f4f4;
}

label, select {
font-size: 18px;
}

#capitalDisplay {
margin-top: 20px;
font-size: 22px;
font-weight: bold;
color: #2E86C1;
}
</style>
<script>
function showCapital() {
const country = document.getElementById("countrySelect").value;
const capitalMap = {
India: "New Delhi",
USA: "Washington, D.C.",
France: "Paris",
Japan: "Tokyo",
Australia: "Canberra"
};

const capital = capitalMap[country] || "";


document.getElementById("capitalDisplay").innerText = capital;
}
</script>
</head>
<body>

<h2>Select a Country to See Its Capital</h2>

<label for="countrySelect">Choose a country:</label>


<select id="countrySelect" onchange="showCapital()">
<option value="">--Select--</option>
<option value="India">India</option>
22
21SCSE1011599

<option value="USA">USA</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="Australia">Australia</option>
</select>

<div id="capitalDisplay"></div>

</body>
</html>

OUTPUT - SCREENSHOTS

23
21SCSE1011599

Experiment 6

Write an HTML page including any required JavaScript that takes a


number from text field in the range of 0 to 999 and shows it in words. It
should not accept four and above digits, alphabets and special characters.

CODE
index.html

<!DOCTYPE html>
<html>
<head>
<title>Number to Words (0 - 999)</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
padding: 40px;
background-color: #f7f7f7;
}
input[type="text"] {
width: 200px;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 15px;
font-size: 16px;
margin-left: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
#output {
margin-top: 20px;
font-weight: bold;
font-size: 20px;
color: #2E86C1;
}
</style>
</head>
<body>

<h2>Convert Number (0 - 999) to Words</h2>

<input type="text" id="numberInput" placeholder="Enter number (0-999)">


<button onclick="convertToWords()">Convert</button>

<div id="output"></div>

<script>
const ones = ["zero", "one", "two", "three", "four", "five", "six", "seven",
"eight", "nine"];
const teens = ["ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen",
"sixteen", "seventeen", "eighteen", "nineteen"];

24
21SCSE1011599

const tens = ["", "", "twenty", "thirty", "forty", "fifty", "sixty", "seventy",
"eighty", "ninety"];

function convertToWords() {
let input = document.getElementById("numberInput").value.trim();
const output = document.getElementById("output");

// Validate: 0-999 and only digits


if (!/^\d{1,3}$/.test(input)) {
output.innerText = "❌ Please enter a valid number between 0 and 999.";
return;
}

let number = parseInt(input);


if (number < 0 || number > 999) {
output.innerText = "❌ Number must be between 0 and 999.";
return;
}

// Convert to words
let words = "";

if (number === 0) {
words = "zero";
} else {
if (Math.floor(number / 100) > 0) {
words += ones[Math.floor(number / 100)] + " hundred";
if (number % 100 !== 0) {
words += " and ";
}
}

let remainder = number % 100;

if (remainder >= 10 && remainder < 20) {


words += teens[remainder - 10];
} else {
if (Math.floor(remainder / 10) > 1) {
words += tens[Math.floor(remainder / 10)];
if (remainder % 10 !== 0) {
words += "-" + ones[remainder % 10];
}
} else if (remainder > 0) {
words += ones[remainder];
}
}
}

output.innerText = "✅ In words: " + words;


}
</script>

</body>
</html>

25
21SCSE1011599

OUTPUT - SCREENSHOTS

26
21SCSE1011599

Experiment 7

Create a form using various form elements and print the values using
Java Script

CODE
index.html

<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f4f4f4;
}

label {
display: block;
margin-top: 15px;
font-weight: bold;
}

input[type="text"],
textarea,
select {
width: 300px;
padding: 8px;
margin-top: 5px;
font-size: 16px;
}

input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
}

button {
margin-top: 20px;
padding: 10px 15px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

#output {
margin-top: 30px;
padding: 15px;
background: #fff;
border-left: 4px solid #2E86C1;
font-size: 16px;
white-space: pre-wrap;
}
</style>
</head>
<body>

27
21SCSE1011599

<h2>Registration Form</h2>

<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label>Gender:</label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female

<label>Languages Known:</label>
<input type="checkbox" name="language" value="English">English
<input type="checkbox" name="language" value="Hindi">Hindi
<input type="checkbox" name="language" value="French">French

<label for="country">Country:</label>
<select id="country">
<option value="">--Select--</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Australia">Australia</option>
</select>

<label for="comments">Comments:</label>
<textarea id="comments" rows="4"></textarea>

<button type="button" onclick="printValues()">Submit</button>


</form>

<div id="output"></div>

<script>
function printValues() {
let output = "";
const name = document.getElementById("name").value;
const country = document.getElementById("country").value;
const comments = document.getElementById("comments").value;

// Get selected gender


const genders = document.getElementsByName("gender");
let gender = "";
for (let g of genders) {
if (g.checked) {
gender = g.value;
break;
}
}

// Get checked languages


const langs = document.getElementsByName("language");
let languages = [];
for (let l of langs) {
if (l.checked) {
languages.push(l.value);
}
}

output += `Name: ${name}\n`;


output += `Gender: ${gender}\n`;
output += `Languages Known: ${languages.join(", ")}\n`;
output += `Country: ${country}\n`;
output += `Comments: ${comments}`;

28
21SCSE1011599

document.getElementById("output").innerText = output;
}
</script>

</body>
</html>

OUTPUT - SCREENSHOTS

29
21SCSE1011599

Experiment 8

Write a AJAX program in which user will enter a number and table
of that will be displayed

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>Multiplication Table using JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f4f4f4;
}

input[type="text"] {
padding: 10px;
font-size: 16px;
width: 200px;
}

button {
padding: 10px 15px;
font-size: 16px;
margin-left: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}

#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
white-space: pre-line;
color: #2E86C1;
}
</style>
</head>
<body>

<h2>Enter a Number to See Its Multiplication Table</h2>

<input type="text" id="number" placeholder="Enter a number">


<button onclick="getTable()">Show Table</button>

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

<script>
function getTable() {
const num = document.getElementById("number").value;

// Check if the input is valid


30
21SCSE1011599

if (num === "" || isNaN(num)) {


document.getElementById("result").innerText = "Please enter a valid
number.";
return;
}

let tableOutput = `Multiplication Table of ${num}:\n`;


for (let i = 1; i <= 10; i++) {
tableOutput += `${num} x ${i} = ${num * i}\n`;
}

document.getElementById("result").innerText = tableOutput;
}
</script>

</body>
</html>

OUTPUT - SCREENSHOTS

31
21SCSE1011599

Experiment 9
Create and save an XML document at the server, which contains10 users information.
Write a program which takes user id as input and returns the user details by taking
the user information from the XML document

CODE

users.xml
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user>
<id>1</id>
<name>John Doe</name>
<email>[email protected]</email>
<age>30</age>
</user>
<user>
<id>2</id>
<name>Jane Smith</name>
<email>[email protected]</email>
<age>25</age>
</user>
<user>
<id>3</id>
<name>Emily Johnson</name>
<email>[email protected]</email>
<age>35</age>
</user>
<user>
<id>4</id>
<name>Michael Brown</name>
<email>[email protected]</email>
<age>40</age>
</user>
<user>
<id>5</id>
<name>Chris Lee</name>
<email>[email protected]</email>
<age>28</age>
</user>
<user>
<id>6</id>
<name>Sarah Wilson</name>
<email>[email protected]</email>
<age>32</age>
</user>
<user>
<id>7</id>
<name>David Martinez</name>
<email>[email protected]</email>
<age>45</age>
</user>
<user>
<id>8</id>
<name>Rachel Adams</name>
<email>[email protected]</email>
<age>29</age>
</user>
<user>
32
21SCSE1011599

<id>9</id>
<name>Steven Clark</name>
<email>[email protected]</email>
<age>38</age>
</user>
<user>
<id>10</id>
<name>Olivia Turner</name>
<email>[email protected]</email>
<age>33</age>
</user>
</users>

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch User Details</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f4f4f4;
}

label {
font-size: 16px;
margin-right: 10px;
}

input[type="text"] {
padding: 8px;
font-size: 16px;
width: 200px;
}

button {
padding: 8px 15px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}

button:hover {
background-color: #45a049;
}

#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
white-space: pre-line;
color: #2E86C1;
}
</style>
</head>
<body>

<h2>Enter User ID to Fetch Details</h2>


33
21SCSE1011599

<label for="user_id">User ID:</label>


<input type="text" id="user_id" name="user_id" required>
<button onclick="getUserDetails()">Get User Details</button>

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

<script>
function getUserDetails() {
const userId = document.getElementById("user_id").value;

// Check if input is valid


if (userId === "" || isNaN(userId) || userId < 1 || userId > 10) {
document.getElementById("result").innerText = "Please enter a valid user ID
between 1 and 10.";
return;
}

// Create a new XMLHttpRequest to fetch the XML file


const xhr = new XMLHttpRequest();
xhr.open("GET", "users.xml", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
const xmlDoc = xhr.responseXML;
const users = xmlDoc.getElementsByTagName("user");
let userDetails = "User not found.";

// Loop through all users and find the user with the matching ID
for (let i = 0; i < users.length; i++) {
const user = users[i];
const id = user.getElementsByTagName("id")[0].textContent;

if (id == userId) {
const name = user.getElementsByTagName("name")[0].textContent;
const email = user.getElementsByTagName("email")[0].textContent;
const age = user.getElementsByTagName("age")[0].textContent;

userDetails = `
<h3>User Details</h3>
<p><strong>ID:</strong> ${id}</p>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Age:</strong> ${age}</p>
`;
break;
}
}

document.getElementById("result").innerHTML = userDetails;
}
};
xhr.send();
}
</script>

</body>
</html>

34
21SCSE1011599

OUTPUT - SCREENSHOTS

35
21SCSE1011599

Experiment 10

Write a Servlet/ JSP program which takes value from HTML and print using
Servlet/ JSP.

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>User Input Form</title>
</head>
<body>
<h2>Enter Your Details</h2>
<form action="userDetailsServlet" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>

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


</form>
</body>
</html>

UserDetailsServlet.java

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class UserDetailsServlet extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Getting data from the HTML form
String name = request.getParameter("name");
String email = request.getParameter("email");
String age = request.getParameter("age");

// Setting the data in request attributes to forward it to the JSP page


request.setAttribute("name", name);
request.setAttribute("email", email);
request.setAttribute("age", age);

// Forwarding the request to the JSP page to display the values


RequestDispatcher dispatcher =
request.getRequestDispatcher("displayUserDetails.jsp");
dispatcher.forward(request, response);
}
}

displayUserDetails.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>

36
21SCSE1011599

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Details</title>
</head>
<body>
<h2>User Details</h2>
<p><strong>Name:</strong> ${requestScope.name}</p>
<p><strong>Email:</strong> ${requestScope.email}</p>
<p><strong>Age:</strong> ${requestScope.age}</p>
</body>
</html>

web.xml

<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_0.xsd"
version="3.0">

<servlet>
<servlet-name>UserDetailsServlet</servlet-name>
<servlet-class>UserDetailsServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>UserDetailsServlet</servlet-name>
<url-pattern>/userDetailsServlet</url-pattern>
</servlet-mapping>

</web-app>
OUTPUT - SCREENSHOTS

37
21SCSE1011599

Experiment 11

Creating a JSP (JavaServer Pages) program that interacts with an Oracle


database involves several steps. Below is a simple example to guide you through
the process.

CODE

Table employees

CREATE TABLE employees (


id NUMBER PRIMARY KEY,
name VARCHAR2(100),
department VARCHAR2(100)
);

INSERT INTO employees (id, name, department) VALUES (1, 'John Doe', 'Engineering');
INSERT INTO employees (id, name, department) VALUES (2, 'Jane Smith', 'Marketing');
INSERT INTO employees (id, name, department) VALUES (3, 'Emily Johnson', ‘HR');

displayEmployees.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee List</title>
</head>
<body>
<h2>Employee List from Oracle Database</h2>

<%
// Database connection variables
String url = "jdbc:oracle:thin:@localhost:1521:orcl"; // Change to your DB
URL
String user = "your_db_user"; // Database username
String password = "your_db_password"; // Database password

// JDBC objects
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;

try {
// Load the JDBC driver
Class.forName("oracle.jdbc.driver.OracleDriver");

// Establish a connection to the database


conn = DriverManager.getConnection(url, user, password);

// Create a statement object to execute queries


stmt = conn.createStatement();

// Execute the query to fetch employee details


String sql = "SELECT * FROM employees";
rs = stmt.executeQuery(sql);

38
21SCSE1011599

// Display the data in an HTML table


out.println("<table border='1'>");
out.println("<tr><th>ID</th><th>Name</th><th>Department</th></tr>");
while (rs.next()) {
int id = rs.getInt("id");
String name = rs.getString("name");
String department = rs.getString("department");
out.println("<tr><td>" + id + "</td><td>" + name + "</td><td>" +
department + "</td></tr>");
}
out.println("</table>");
} catch (Exception e) {
e.printStackTrace();
out.println("<h3>Error: " + e.getMessage() + "</h3>");
} finally {
try {
// Close JDBC resources
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
%>
</body>
</html>

web.xml

<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_0.xsd"
version="3.0">

<servlet>
<servlet-name>JSP Servlet</servlet-name>
<jsp-file>/displayEmployees.jsp</jsp-file>
</servlet>

<servlet-mapping>
<servlet-name>JSP Servlet</servlet-name>
<url-pattern>/displayEmployees.jsp</url-pattern>
</servlet-mapping>
</web-app>

39
21SCSE1011599

Experiment 12
To create a JSP (JavaServer Pages) program that prints the multiplication table
of a given number.

CODE
multiplicationTable.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<%@ page import="java.io.*, java.util.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Table</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 50%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 8px 12px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2 style="text-align:center;">Multiplication Table Generator</h2>

<!-- Form to take input -->


<form method="POST" action="">
<div style="text-align:center;">
<label for="number">Enter a Number: </label>
<input type="number" id="number" name="number" required>
<input type="submit" value="Generate Table">
</div>
</form>

<%
// Get the number from the request
String numberStr = request.getParameter("number");
if (numberStr != null && !numberStr.isEmpty()) {
try {
int number = Integer.parseInt(numberStr);
out.println("<h3 style='text-align:center;'>Multiplication
Table of " + number + "</h3>");
out.println("<table>");
out.println("<tr><th>Multiplication</th><th>Result</th></
tr>");

// Loop to print the multiplication table


40
21SCSE1011599

for (int i = 1; i <= 10; i++) {


int result = number * i;
out.println("<tr><td>" + number + " x " + i + "</
td><td>" + result + "</td></tr>");
}

out.println("</table>");
} catch (NumberFormatException e) {
out.println("<h3 style='color:red; text-
align:center;'>Please enter a valid number.</h3>");
}
}
%>
</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_0.xsd"
version="3.0">
<display-name>Multiplication App</display-name>
</web-app>

OUTPUT - SCREENSHOTS

41
21SCSE1011599

Experiment 13
JSP program without session Management.

CODE
ExampleServlet.java

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class ExampleServlet extends HttpServlet {


protected void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
// Set the content type
response.setContentType("text/html");

// Get a PrintWriter to write the response


PrintWriter out = response.getWriter();

// Set some data in the request


String message = "Hello from Servlet!";
request.setAttribute("message", message);

// Forward the request to the JSP


RequestDispatcher dispatcher =
request.getRequestDispatcher("example.jsp");
dispatcher.forward(request, response);
}
}

example.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>Servlet to JSP Example</title>
</head>
<body>
<h2>Message from Servlet:</h2>
<p>${message}</p>
</body>
</html>

web.xml

<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>ExampleServlet</servlet-name>
<servlet-class>ExampleServlet</servlet-class>
</servlet>

<servlet-mapping>

42
21SCSE1011599

<servlet-name>ExampleServlet</servlet-name>
<url-pattern>/example</url-pattern>
</servlet-mapping>
</web-app>

OUTPUT - SCREENSHOTS

43
21SCSE1011599

Experiment 14

JSP program with session Management.

CODE

SessionExampleServlet.java

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class SessionExampleServlet extends HttpServlet {


protected void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
response.setContentType("text/html");

HttpSession session = request.getSession(true);


String message = "Hello from Servlet with Session!";
session.setAttribute("message", message);

RequestDispatcher dispatcher =
request.getRequestDispatcher("sessionExample.jsp");
dispatcher.forward(request, response);
}
}

sessionExample.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"


pageEncoding="UTF-8"%>
<html>
<head><title>Session JSP Example</title></head>
<body>
<h2>Session Message:</h2>
<p>${sessionScope.message}</p>
</body>
</html>

web.xml

<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_0.xsd"
version="3.0">

<servlet>
<servlet-name>SessionExampleServlet</servlet-name>
<servlet-class>SessionExampleServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>SessionExampleServlet</servlet-name>
<url-pattern>/session-example</url-pattern>
</servlet-mapping>

</web-app>

44
21SCSE1011599

OUTPUT - SCREENSHOTS

45
21SCSE1011599

Experiment 15

Servlet/ JSP program with navigation

CODE
form.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>Form Page</title>
</head>
<body>
<h2>Enter Your Name</h2>
<form action="formServlet" method="POST">
Name: <input type="text" name="username" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

welcome.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h2>Welcome, ${requestScope.username}!</h2>
<a href="form.jsp">Go back to the form</a>
</body>
</html>

FormServlet.java

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class FormServlet extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Get the username from the form
String username = request.getParameter("username");

// Set the username in the request object for use in the JSP
request.setAttribute("username", username);

// Forward the request to the welcome.jsp


RequestDispatcher dispatcher = request.getRequestDispatcher("welcome.jsp");
dispatcher.forward(request, response);
}
}

web.xml

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

46
21SCSE1011599

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>FormServlet</servlet-name>
<servlet-class>FormServlet</servlet-class>
</servlet>

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

OUTPUT - SCREENSHOTS

47
21SCSE1011599

48

You might also like