Scribd
Upload
9 views

WT lab..

The document is a lab file for the Web Technology course at Galgotias College of Engineering and Technology, detailing various experiments and programming tasks related to web development. It includes exercises on HTML, CSS, JavaScript, XML, and Node.js, focusing on creating forms, validating input data, and building web applications. The document also contains example code snippets for implementing these tasks.

Uploaded by

arunstp45
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
9 views

WT lab..

The document is a lab file for the Web Technology course at Galgotias College of Engineering and Technology, detailing various experiments and programming tasks related to web development. It includes exercises on HTML, CSS, JavaScript, XML, and Node.js, focusing on creating forms, validating input data, and building web applications. The document also contains example code snippets for implementing these tasks.

Uploaded by

arunstp45
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/ 15

GALGOTIAS COLLEGE OF ENGINEERING

AND TECHNOLOGY
Department of Information Technology

Web Technology
Lab File
BCS-552

Session - 2024-25

Submitted to : Submitted by:


Ms. Sakshi Malhotra Name: Arun Pratap Singh
Asst. Professor, Branch / Section: IT/A
Dept. of Information Roll No.: 2200970130026
technology
INDEX
Sr. EXPERIMENT NAME Page Date of Date of Faculty
No. No Completion Submission Signature

Write HTML program for designing your


institute website. Display departmental
information of your institute on the website.
1

Write HTML program to design an entry form


2 for student details/employee
information/faculty details.

Develop a responsive website using CSS and


HTML. Website may be for
tutorial/blogs/commercial website.
3

Write programs using HTML and Java Script for


validation of input data.
4

Write a program in XML for creation of DTD,


which specifies set of rules. Create a style
sheet in CSS/ XSL & display the document in
5
internet explorer.

Create a Java Bean for Employee information


(EmpID, Name, Salary, Designation and
Department).
6

Build a command-line utility using Node.js


that performs a specific task, such as
converting text to uppercase, calculating the
7
factorial of a number, or generating random
passwords.
Develop a script that uses MongoDB's
aggregation framework to perform operations
like grouping, filtering, and sorting. For
8
instance, aggregate user data to find the
average age of users in different cities.

Assume four users user1, user2, user3 and


user4 having the passwords pwd1, pwd2,
pwd3 and pwd4 respectively. Write a servlet
for doing the following: 1. Create a Cookie
9
and add these four user id’s and passwords to
this Cookie. 2. Read the user id and passwords
entered in the Login form and authenticate
with the values available in the cookies.

Create a table which should contain at least


the following fields: name, password, email-
id, phone number Write Servlet/JSP to
connect to that database and extract data
10
from the tables and display them. Insert the
details of the users who register with the web
site, whenever a new user clicks the submit
button in the registration page.

Write a JSP which insert the details of the 3


or 4 users who register with the web site by
using registration form. Authenticate the user
11 when he submits the login form using the
user name and password from the database.

Design and implement a simple shopping cart


example with session tracking API.
12

14

15
Experiment - 02
Aim - . Write HTML program to design an entry form for student details/employee information/faculty
details.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<form action="">

<h1>Employee Details Form</h1>

<section>

<p><b>Please Fill this-</b></p>

</section>

<p>Name* <input type="text" placeholder="please enter your name" name="Name" id="101"></p>

<p>Password* <input type="password"placeholder="enter Password" name="password" id="102"></p>

<p>E-mail <input type="text"placeholder="enter your e-mail id" name="e-mail"id="103"></p>

<p>Phone Number* <input type="text"placeholder="enter your Phone Number" name="phone


Number"id="104"></p>

<fieldset>

<legend>Gender* </legend>

<p>

Male <input type="radio" name="Gender" id="male"> Female<input type="radio"


name="Gender"id="female">

</p>

</fieldset>

<p>

Date of Birth* <input type="date" name="exp_date" id="exp_date">

</p>

<p>Language Known:

<select language="language" id="106">


<option value="">--select Language--</option>

<option value="English">English</option>

<option value="tamil">Tamil</option>

<option value="hindi">Hindi</option>

<option value="telugu">Telugu</option>

</select>

<p>Address: <textarea name="address" id="adderes" cols="30"rows="5"></textarea></p>

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

</form>

</body>

</html>
Experiment – 04
Aim.-Write programs using HTML and Java Script for validation of input data.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<form action="" id="registrationForm">

<h1>Registration Form</h1>

<section>

<p><b>Please Register here-</b></p>

<p><i>Required fields are followed by * </i></p>

</section>

<p>Name* <input type="text" placeholder="Please enter your name" name="Name" id="name"


required></p>

<p>Password* <input type="password" placeholder="Enter Password" name="password" id="password"


required></p>

<p>E-mail <input type="email" placeholder="Enter your e-mail ID" name="email" id="email"></p>

<p>Phone Number* <input type="text" placeholder="Enter your Phone Number"


name="phoneNumber" id="phoneNumber" required></p>

<fieldset>

<legend>Gender* </legend>

<p>

Male <input type="radio" name="Gender" id="male" required>

Female <input type="radio" name="Gender" id="female" required>

</p>

</fieldset>

<p>

Date of Birth* <input type="date" name="exp_date" id="exp_date" required>

</p>

<p>Language Known:
<select language="language" id="language" required>

<option value="">--Select Language--</option>

<option value="English">English</option>

<option value="Tamil">Tamil</option>

<option value="Hindi">Hindi</option>

<option value="Telugu">Telugu</option>

</select>

</p>

<p>Address: <textarea name="address" id="address" cols="30" rows="5" placeholder="Enter your


address" required></textarea></p>

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

</form>

<script>

const form = document.getElementById('registrationForm');

const nameInput = document.getElementById('name');

const passwordInput = document.getElementById('password');

const emailInput = document.getElementById('email');

const phoneNumberInput = document.getElementById('phoneNumber');

const languageSelect = document.getElementById('language');

const addressTextarea = document.getElementById('address');

form.addEventListener('submit', (e) => {

let isValid = true;

// Name validation

if (nameInput.value.trim() === '') {

alert('Please enter your name');

isValid = false;

// Password validation

if (passwordInput.value.trim() === '') {

alert('Please enter your password');

isValid = false;
} else if (passwordInput.value.length < 8) {

alert('Password must be at least 8 characters long');

isValid = false;

// Email validation

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

if (emailInput.value.trim() !== '' && !emailRegex.test(emailInput.value)) {

alert('Please enter a valid email address');

isValid = false;

// Phone number validation

const phoneNumberRegex = /^\d{10}$/;

if (phoneNumberInput.value.trim() === '') {

alert('Please enter your phone number');

isValid = false;

} else if (!phoneNumberRegex.test(phoneNumberInput.value)) {

alert('Please enter a valid phone number');

isValid = false;

// Language validation

if (languageSelect.value === '') {

alert('Please select a language');

isValid = false;

// Address validation

if (addressTextarea.value.trim() === '') {

alert('Please enter your address');

isValid = false;

}
if (!isValid) {

e.preventDefault();

});

</script>

</body>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, sans-serif;

body {

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

form {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 500px;

h1 {
text-align: center;

color: #333;

margin-bottom: 20px;

section p {

margin-bottom: 10px;

font-size: 14px;

color: #777;

p{

margin-bottom: 15px;

input, select, textarea {

width: 100%;

padding: 10px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 14px;

input[type="radio"] {

width: auto;

margin-left: 5px;

fieldset {

border: none;

padding: 0;

margin-bottom: 15px;
}

legend {

font-weight: bold;

margin-bottom: 10px;

input[type="submit"] {

background-color: #28a745;

color: white;

border: none;

padding: 12px;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s ease;

input[type="submit"]:hover {

background-color: #218838;

.error {

color: red;

font-size: 13px;

.required-label {

color: red;

</style>

</html>

You might also like