Scribd
Upload
8 views

Web Development

The document outlines a Web Technology Lab course for Bachelor of Technology in Computer Science & Engineering at Galgotias College, detailing various experiments including HTML programming for a college website, an entry form, and a responsive website. Each experiment includes specific coding tasks and aims to enhance students' practical skills in web development. The document also features an index and assessment sections for faculty evaluation.

Uploaded by

rubi.22gcebcs116
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Web Development

The document outlines a Web Technology Lab course for Bachelor of Technology in Computer Science & Engineering at Galgotias College, detailing various experiments including HTML programming for a college website, an entry form, and a responsive website. Each experiment includes specific coding tasks and aims to enhance students' practical skills in web development. The document also features an index and assessment sections for faculty evaluation.

Uploaded by

rubi.22gcebcs116
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

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

You might also like