Galgotias College of Engineering and
Technology,
Greater Noida, Uttar Pradesh
Bachelor of Technology In
Computer Science & Engineering
Session 2024-25
Web Technology Lab
Subject Code: BCS-552
Name: Shubham Maurya
Submitted To: D r. Indrajeet Sinha
Roll No: 200970100164 Semester: V
Galgotias College of Engineering & Technology, Greater Noida
StudentNa me:…........ .............
INDEX Roll No:…...............................
Assessment by Faculty Member
Page No.
From….... In time
Date of
Exp No. Name of the Experiment ... Pre-Lab
Implementati Graph, submission of
Practical on/Active Results/Outp Lab Total Signature
To…........ Writing work
Participation ut, Cal. Report/Viva MM:50 with Date
... Voce,
Write HTML program for designing your
1 institute website. Display departmental
information of your institute on the
website.
Write HTML program to design an entry
2 form for student details/employee
information/faculty
details.
Develop a responsive website using CSS
3 and HTML. Website may be for
tutorial/blogs commercial website.
Write a program in XML for creation of
4 DTD, which specifies set of rules. Create
a style sheet in CSS/ XSL & display the
document in internet explorer.
Create a Java Bean for Employee
5 information (EmpID, Name, Salary,
Designation and Department).
.Build a command-line utility using
6 Node.js that performs a specific task,
such as converting text to uppercase,
calculating the factorial of a number, or
generating random passwords.
Develop a script that uses MongoDB's
7 aggregation framework to perform
operations like grouping, filtering, and
sorting. For instance, aggregate user data
to find the average age of users in
different cities
10
11
12
13
14
Teacher Remark (If any): AVERAGE MARKS
Name and Sign of Faculty members(s) with date
Name & Sign of Lab In charge HoD
Experiment No: 1
Aim: Write HTML program for designing your institute website.
Display departmental information of your institute on the website.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Galgotia College of Engineering and Technology</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #004aad;
color: #fff;
padding: 20px;
text-align: center;
}
section {
padding: 20px;
max-width: 800px;
margin: auto;
}
h2 {
color: #004aad;
text-align: center;
}
.departments,
.stats-table {
margin-top: 20px;
}
.departments ul {
list-style-type: none;
padding: 0;
}
.departments li {
padding: 8px;
background: #ddd;
margin-bottom: 8px;
border-radius: 4px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
padding: 12px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #004aad;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>Galgotia College of Engineering and Technology</h1>
<p>Empowering Minds, Building Futures</p>
</header>
<section>
<h2>About the College</h2>
<p>
Galgotia College of Engineering and Technology (GCET) is a prestigious
institution that offers quality education in various fields of
engineering and technology. With a community of over 1500 students and
500+ faculty members, the college is dedicated to fostering innovation
and excellence.
</p>
<h2>Departments</h2>
<div class="departments">
<ul>
<li>Computer Science and Engineering</li>
<li>Electronics and Communication Engineering</li>
<li>Mechanical Engineering</li>
<li>Civil Engineering</li>
<li>Electrical Engineering</li>
<li>Information Technology</li>
</ul>
</div>
<h2>College Statistics</h2>
<div class="stats-table">
<table>
<tr>
<th>Department</th>
<th>Number of Students</th>
<th>Number of Faculty</th>
<th>Lab Facilities</th>
</tr>
<tr>
<td>Computer Science and Engineering</td>
<td>500+</td>
<td>100+</td>
<td>AI & Machine Learning, Data Science Labs</td>
</tr>
<tr>
<td>Electronics and Communication Engineering</td>
<td>300+</td>
<td>80+</td>
<td>Embedded Systems, Circuit Design Labs</td>
</tr>
<tr>
<td>Mechanical Engineering</td>
<td>250+</td>
<td>70+</td>
<td>Thermal, Manufacturing Labs</td>
</tr>
<tr>
<td>Civil Engineering</td>
<td>200+</td>
<td>60+</td>
<td>Structural Analysis, Geotechnical Labs</td>
</tr>
<tr>
<td>Electrical Engineering</td>
<td>150+</td>
<td>50+</td>
<td>Power Systems, Control Systems Labs</td>
</tr>
<tr>
<td>Information Technology</td>
<td>100+</td>
<td>40+</td>
<td>Web Development, Cybersecurity Labs</td>
</tr>
</table>
</div>
</section>
</body>
</html>
Output:
Experiment No: 2
Aim: Write HTML program to design an entry form for student details/employee
information/faculty details.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Comprehensive Form</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
form {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-actions {
text-align: center;
}
</style>
</head>
<body>
<form>
<h2>Comprehensive Form</h2>
<!-- Text Input -->
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<!-- Email Input -->
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<!-- Password Input -->
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
</div>
<!-- Number Input -->
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0"
required>
</div>
<!-- Date Input -->
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<!-- Radio Buttons -->
<div class="form-group">
<label>Gender:</label>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender"
value="other">
<label for="other">Other</label>
</div>
<!-- Checkboxes -->
<div class="form-group">
<label>Hobbies:</label>
<input type="checkbox" id="hobby1" name="hobbies"
value="sports">
<label for="hobby1">Sports</label>
<input type="checkbox" id="hobby2" name="hobbies"
value="music">
<label for="hobby2">Music</label>
<input type="checkbox" id="hobby3" name="hobbies"
value="reading">
<label for="hobby3">Reading</label>
</div>
<!-- Select (Dropdown) -->
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select Country</option>
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="bio">Short Bio:</label>
<textarea id="bio" name="bio" rows="4" placeholder="Tell
us about yourself"></textarea>
</div>
<!-- File Upload -->
<div class="form-group">
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume">
</div>
<!-- Color Picker -->
<div class="form-group">
<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor">
</div>
<!-- Range Slider -->
<div class="form-group">
<label for="satisfaction">Satisfaction Level:</label>
<input type="range" id="satisfaction"
name="satisfaction" min="0" max="10">
</div>
<!-- Form Actions -->
<div class="form-actions">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
Output
Experiment 3
Aim: Develop a responsive website using CSS and HTML. Website may be for
tutorial/blogs commercial website.Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
width: 100%;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1,
h2 {
color: #004aad;
text-align: center;
}
.book-list,
.cart-list {
margin-top: 20px;
}
.book,
.cart-item {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 5px;
}
button {
background-color: #004aad;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #00337d;
}
.cart-total {
text-align: right;
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Online Bookstore</h1>
<h2>Available Books</h2>
<!-- Book List -->
<div class="book-list">
<div class="book">
<span>Book 1: The Great Gatsby</span>
<span>$10.00</span>
<button onclick="addToCart('The Great Gatsby', 10)">
Add to Cart
</button>
</div>
<div class="book">
<span>Book 2: To Kill a Mockingbird</span>
<span>$12.00</span>
<button onclick="addToCart('To Kill a Mockingbird', 12)">
Add to Cart
</button>
</div>
<div class="book">
<span>Book 3: 1984</span>
<span>$15.00</span>
<button onclick="addToCart('1984', 15)">Add to Cart</button>
</div>
<div class="book">
<span>Book 4: Moby Dick</span>
<span>$18.00</span>
<button onclick="addToCart('Moby Dick', 18)">Add to Cart</button>
</div>
</div>
<!-- Cart Section -->
<h2>Shopping Cart</h2>
<div class="cart-list" id="cart-list">
<!-- Cart items will appear here -->
</div>
<!-- Cart Total and Buy Button -->
<div class="cart-total" id="cart-total">Total: $0.00</div>
<button onclick="completePurchase()" id="buy-button" disabled>
Buy Now
</button>
</div>
<script>
const cart = [];
// Function to add books to the cart
function addToCart(book, price) {
const item = cart.find((i) => i.book === book);
if (item) {
item.quantity++;
} else {
cart.push({ book, price, quantity: 1 });
}
updateCart();
}
// Function to update cart display
function updateCart() {
const cartList = document.getElementById("cart-list");
const cartTotal = document.getElementById("cart-total");
const buyButton = document.getElementById("buy-button");
cartList.innerHTML = "";
let total = 0;
cart.forEach((item) => {
const itemTotal = item.price * item.quantity;
total += itemTotal;
const cartItem = document.createElement("div");
cartItem.className = "cart-item";
cartItem.innerHTML = `
<span>${item.book} (x${item.quantity})</span>
<span>$${itemTotal.toFixed(2)}</span>
`;
cartList.appendChild(cartItem);
});
cartTotal.innerHTML = `Total: $${total.toFixed(2)}`;
buyButton.disabled = total === 0;
}
// Function to complete the purchase
function completePurchase() {
if (cart.length > 0) {
alert("Thank you for your purchase!");
cart.length = 0;
updateCart();
}
}
</script>
</body>
</html>
Output
Experiment 4
Aim: 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 internet explorer.
Code
XML File (students.xml)
<?xml version="1.0"?>
<!DOCTYPE students [
<!ELEMENT students (student*)>
<!ELEMENT student (name, rollno, department)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT rollno (#PCDATA)>
<!ELEMENT department (#PCDATA)>
]>
<?xml-stylesheet type="text/css" href="styles.css"?>
<students>
<student>
<name>John Doe</name>
<rollno>12345</rollno>
<department>CSE</department>
</student>
<student>
<name>Jane Smith</name>
<rollno>67890</rollno>
<department>ECE</department>
</student>
</students>
CSS File
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
}
wstudents {
display: block;
margin: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #fff;
}
student {
display: block;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
name, rollno, department {
display: block;
font-weight: bold;
}
Output
Student List
• John Doe
Roll No: 12345
Department: CSE
• Jane Smith
Roll No: 67890
Department: ECE
Experiment 5
Aim: Create a Java Bean for Employee information (EmpID, Name, Salary,
Designation and Department).
Code
import java.io.Serializable;
// Java Bean for Employee Information
public class Employee implements Serializable {
private int empID;
private String name;
private double salary;
private String designation;
private String department;
// Default Constructor
public Employee() {
// Parameterized Constructor
public Employee(int empID, String name, double salary, String designation, String department) {
this.empID = empID;
this.name = name;
this.salary = salary;
this.designation = designation;
this.department = department;
// Getter and Setter for EmpID
public int getEmpID() {
return empID;
public void setEmpID(int empID) {
this.empID = empID;
}
// Getter and Setter for Name
public String getName() {
return name;
public void setName(String name) {
this.name = name;
// Getter and Setter for Salary
public double getSalary() {
return salary;
public void setSalary(double salary) {
this.salary = salary;
// Getter and Setter for Designation
public String getDesignation() {
return designation;
public void setDesignation(String designation) {
this.designation = designation;
// Getter and Setter for Department
public String getDepartment() {
return department;
public void setDepartment(String department) {
this.department = department;
// Display Employee Details
@Override
public String toString() {
return "Employee Details: [EmpID: " + empID + ", Name: " + name + ", Salary: " + salary +
", Designation: " + designation + ", Department: " + department + "]";
public class Main {
public static void main(String[] args) {
// Creating an Employee object using the default constructor
Employee emp1 = new Employee();
emp1.setEmpID(101);
emp1.setName("John Doe");
emp1.setSalary(75000.50);
emp1.setDesignation("Software Engineer");
emp1.setDepartment("IT");
// Displaying the details of emp1
System.out.println(emp1);
// Creating an Employee object using the parameterized constructor
Employee emp2 = new Employee(102, "Jane Smith", 85000.00, "Project Manager",
"Management");
// Displaying the details of emp2
System.out.println(emp2);
Output
Employee Details: [EmpID: 101, Name: John Doe, Salary: 75000.5, Designation: Software Engineer,
Department: IT]
Employee Details: [EmpID: 102, Name: Jane Smith, Salary: 85000.0, Designation: Project Manager,
Department: Management]
Experiment 6
Aim: Build a command-line utility using Node.js that performs a specific task,
such as converting text to uppercase, calculating the factorial of a number, or
generating random passwords.
Code
const readline = require('readline');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
// Display menu options
const displayMenu = () => {
console.log("\nNode.js Command-Line Utility");
console.log("1. Convert text to uppercase");
console.log("2. Calculate the factorial of a number");
console.log("3. Generate a random password");
console.log("4. Exit\n");
rl.question("Choose an option (1-4): ", handleMenuOption);
};
// Handle menu selection
const handleMenuOption = (option) => {
switch (option) {
case '1':
rl.question("\nEnter text to convert to uppercase: ", (text) => {
console.log("Uppercase Text:", text.toUpperCase());
displayMenu();
});
break;
case '2':
rl.question("\nEnter a number to calculate its factorial: ", (num) => {
const number = parseInt(num);
if (isNaN(number) || number < 0) {
console.log("Please enter a valid non-negative number.");
} else {
console.log(`Factorial of ${number}:`, factorial(number));
displayMenu();
});
break;
case '3':
rl.question("\nEnter desired password length: ", (length) => {
const len = parseInt(length);
if (isNaN(len) || len <= 0) {
console.log("Please enter a valid positive number.");
} else {
console.log("Generated Password:", generatePassword(len));
displayMenu();
});
break;
case '4':
console.log("\nGoodbye!");
rl.close();
break;
default:
console.log("\nInvalid option. Please try again.");
displayMenu();
};
// Function to calculate factorial
const factorial = (n) => {
return n === 0 ? 1 : n * factorial(n - 1);
};
// Function to generate a random password
const generatePassword = (length) => {
const chars =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}";
let password = "";
for (let i = 0; i < length; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
return password;
};
// Start the utility
displayMenu();
Output
Enter text to convert to uppercase: hello world
Uppercase Text: HELLO WORLD
Enter a number to calculate its factorial: 5
Factorial of 5: 120
Enter desired password length: 10
Generated Password: W9z&nGp8QX
Experiment 7
Aim: Build a command-line utility using Node.js that performs a specific task,
such as converting text to uppercase, calculating the factorial of a number, or
generating random passwords.
Code
const { MongoClient } = require('mongodb');
// MongoDB connection URL and database/collection name
const url = "mongodb://localhost:27017";
const dbName = "userDB";
const collectionName = "users";
// Aggregation function
const aggregateUserData = async () => {
const client = new MongoClient(url);
try {
// Connect to the MongoDB server
await client.connect();
console.log("Connected to MongoDB");
// Select database and collection
const db = client.db(dbName);
const collection = db.collection(collectionName);
// Define the aggregation pipeline
const pipeline = [
// Stage 1: Filter users older than 20 years
{ $match: { age: { $gt: 20 } } },
// Stage 2: Group by city and calculate the average age
$group: {
_id: "$city",
averageAge: { $avg: "$age" },
totalUsers: { $sum: 1 }
}
},
// Stage 3: Sort by average age in descending order
{ $sort: { averageAge: -1 } }
];
// Execute the aggregation pipeline
const results = await collection.aggregate(pipeline).toArray();
// Display the aggregated results
console.log("Aggregation Results:");
results.forEach(result => {
console.log(`City: ${result._id}, Average Age: ${result.averageAge.toFixed(2)}, Total Users:
${result.totalUsers}`);
});
} catch (err) {
console.error("Error performing aggregation:", err);
} finally {
// Close the connection
await client.close();
};
// Run the aggregation
aggregateUserData();
Output
Connected to MongoDB
Aggregation Results:
City: Los Angeles, Average Age: 37.50, Total Users: 2
City: New York, Average Age: 27.50, Total Users: 2
City: Chicago, Average Age: 25.00, Total Users: 2
