MAHARANA PRATAP GROUP OF INSTITUTIONS
KOTHI MANDHANA, KANPUR
(Approved by AICTE New Delhi an Affiliated to Dr. AKTU, Lucknow)
LAB FILE
[DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING]
Lab Name : WEB TECHNOLOGY LAB
Lab Code : BCS552
Course : [Link]
Branch : CSE
Semester : 5th
Lab Faculty : Mr. Deepak Pal
Roll No
INDEX
EXP EXPERIMENT NAME DATE OF TEACHER’S REMARKS
NO. EXPERIMENT SIGNATURE
1. Write HTML program for designing your institute
website. Display departmental information of your
institute on the website.
2. Write HTML program to design an entry form for
student details/employee information/faculty details.
3. Develop a responsive website using CSS and HTML.
Website may be for tutorial/blogs/commercial
website.
4. Write programs using HTML and Java Script for
validation of input data.
5. Write a program in XML for creation of DTD, which
specifies
set of rules. Create a style sheet in CSS/
XSL & displaythe document in internet explorer.
6. Create a Java Bean for Employee information (EmpID,
Name, Salary, Designation and Department)
7. Build
a command-line utility using [Link] that
performs a specific task, such as converting text to
uppercase, calculating the factorial of a number, or
generating random passwords.
8. Develop a script that uses MongoDB's 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.
Experiment 1
Write HTML program for designing your institute website. Display departmental information of
your institute on the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MPGI</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header id="head">
<img src="[Link]" alt="">
<h1>MAHARANA GROUP OF INSTITUTION <p>Blend of Fine Education</p></h1>
<p>Blend of Fine Education</p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#departments">Departments</a>
<a href="#contact">Contact Us</a>
</nav>
<div class="content" id="home">
<h2>About our Institution</h2>
<p>Welcome to Maharana Pratap Engineering College, where we strive for academic excellence and
innovation.
Explore our various departments below.</p>
</div>
<div class="content" id="departments">
<h2>Our Departments</h2>
<div class="department">
<table>
<thead>
<tr>
<th>Department Name</th>
<th>Head of Department</th>
<th>Contact Email</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer Science and Engineering</td>
<td>Dr. P. Yadav</td>
<td>cse@[Link]</td>
<td>Focuses on software development, AI, and web technologies.</td>
</tr>
<tr>
<td>Computer Science with Allied Batch</td>
<td>Dr. S.S</td>
<td>ee@[Link]</td>
<td>Specializes in power systems and renewable energy.</td>
</tr>
<tr>
<td>Mechanical Engineering</td>
<td>[Link]</td>
<td>me@[Link]</td>
<td>Covers robotics, thermal engineering, and CAD.</td>
</tr>
<tr>
<td>Civil Engineering</td>
<td>Prof. P. Yadav</td>
<td>ce@[Link]</td>
<td>Focuses on infrastructure design and urban planning.</td>
</tr>
<tr>
<td>Electronics and Communication Engineering</td>
<td>Dr. P. Yadav</td>
<td>ece@[Link]</td>
<td>Specializes in VLSI design and communication systems.</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>
<p>© 2024 MPGI Institute. All rights reserved.</p>
<p>Contact us: info@[Link] | +91 12345 67890</p>
</footer>
</body>
</html>
CSS FILE: [Link]
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color: #87b5f5;
color: white;
padding: 20px 10px;
text-align: center;
display: flex;
justify-content: space-between;
}
#head img{
display: flex;
}
#head h1{
font-weight: 700;
}
#head h1 p{
font-size: 20px;
color: white;
}
#head p{
font-style: oblique;
color: #87b5f5;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #575757;
}
.content {
padding: 20px;
}
.department {
background-color: #f2b2b2;
margin: 10px 0;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
text-align: left;
padding: 10px;
}
th {
background-color: #004080;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
footer {
background-color: #0047ab;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
Experiment 2
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>Entry Form</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header id="head">
<img src="[Link]" alt="">
<h1>MAHARANA GROUP OF INSTITUTION <p>Blend of Fine Education</p></h1>
<p>Blend of Fine Education</p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#departments">Departments</a>
<a href="#contact">Contact Us</a>
</nav>
<div class="container">
<h1>Entry Form</h1>
<form action="#" method="POST">
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" placeholder="Enter full name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email address" required>
</div>
<div class="form-group">
<label for="contact">Contact Number:</label>
<input type="tel" id="contact" name="contact" placeholder="Enter contact number" required>
</div>
<div class="form-group">
<label for="role">Role:</label>
<select id="role" name="role" required>
<option value="">-- Select Role --</option>
<option value="student">Student</option>
<option value="employee">Employee</option>
<option value="faculty">Faculty</option>
</select>
</div>
<div class="form-group">
<label for="department">Department:</label>
<input type="text" id="department" name="department" placeholder="Enter department name" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" placeholder="Enter full address" required></textarea>
</div>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
CSS File: [Link]
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color: #87b5f5;
color: white;
padding: 20px 10px;
text-align: center;
display: flex;
justify-content: space-between;
}
#head img{
display: flex;
}
#head h1{
font-weight: 700;
font-size: 50px;
}
#head h1 p{
font-size: 20px;
color: white;
}
#head p{
font-style: oblique;
color: #87b5f5;
}
nav {
background-color: #003060;
padding: 10px 0;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
}
nav a:hover {
text-decoration: underline;
}
#head h1 p{ padding: 10px;
font-size: 20px; font-size: 16px;
color: white; border: 1px solid #1185a8;
} border-radius: 5px;
#head p{ }
font-style: oblique;
color: #87b5f5; .form-group input:focus, .form-group select:focus,
} .form-group textarea:focus {
nav { border-color: #007BFF;
background-color: #003060; outline: none;
padding: 10px 0; }
text-align: center; .form-group button {
} display: block;
nav a { width: 100%;
color: white; padding: 10px;
text-decoration: none; font-size: 18px;
margin: 0 15px; color: white;
font-size: 18px; background-color: #007BFF;
} border: none;
nav a:hover { border-radius: 5px;
text-decoration: underline; cursor: pointer;
} }
.form-group input, .form-group .form-group button:hover {
select, .form-group textarea { background-color: #0056b3;
width: 100%; }
Experiment 3
Develop a responsive website using CSS and HTML. Website may be for tutorial/blogs/commercial
website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phone Addiction Blog</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #004080;
color: white;
text-align: center;
padding: 1px 0;
}
nav {
background-color: #003060;
padding: 1px 0;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 7px;
font-size: 12px;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 900px;
margin: -4px auto;
padding: 2px;
background: white;
border-radius: 7px;
box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}
.blog-content {
line-height: 1.4;
color: #333;
}
.blog-content h2 {
color: #004080;
margin-bottom: 5px;
}
footer {
background-color: #004080;
color: white;
text-align: center;
padding: 6px 0;
margin-top: 8px;
}
@media (max-width: 600px) {
nav a {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>Welcome To My Blog Page</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Blogs</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<div class="blog-content">
<h2>What is Phone Addiction?</h2>
<p>Phone addiction, also known as "nomophobia" (fear of being without a mobile phone), is a
growing concern in the modern world. With the increasing dependency on smartphones for
communication, work, and entertainment, many individuals find it hard to disconnect.</p>
<h2>Signs of Phone Addiction</h2>
<ul>
<li>Constantly checking your phone even without notifications.</li>
<li>Feeling anxious or restless when away from your phone.</li>
<li>Neglecting social interactions and responsibilities.</li>
<li>Using your phone late at night, affecting sleep patterns.</li>
</ul>
<h2>How to Overcome Phone Addiction</h2>
<p>Here are some tips to manage phone usage effectively:</p>
<ol>
<li>Set specific time limits for phone use each day.</li>
<li>Engage in offline activities such as reading or exercising.</li>
<li>Turn off non-essential notifications.</li>
<li>Keep your phone away during meals and social gatherings.</li>
</ol>
<h2>Conclusion</h2>
<p>While smartphones are a vital part of our lives, it's important to use them mindfully. By
recognizing the signs of phone addiction and taking steps to manage it, we can ensure a healthier
relationship with technology.</p>
</div>
</div>
<footer>
<p>© 2024 Blog Website. All rights reserved.</p>
</footer>
</body>
</html>
Experiment 4
Write programs using HTML and Java Script for validation of input data.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Input Validation Form</h1>
<form id="validationForm" onsubmit="return validateForm()">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<div id="nameError" class="error"></div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<div id="emailError" class="error"></div>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" placeholder="Enter your phone number">
<div id="phoneError" class="error"></div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<div id="passwordError" class="error"></div>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
<script src="[Link]">
</script>
</body>
</html>
JavaScript Code
function validateForm() {
const name = [Link]('name').[Link]();
const email = [Link]('email').[Link]();
const phone = [Link]('phone').[Link]();
const password = [Link]('password').[Link]();
const nameError = [Link]('nameError');
const emailError = [Link]('emailError');
const phoneError = [Link]('phoneError');
const passwordError = [Link]('passwordError');
[Link] = '';
[Link] = '';
[Link] = '';
[Link] = '';
let isValid = true;
if (name === '') {
[Link] = 'Name is required.';
isValid = false;
}
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email === '') {
[Link] = 'Email is required.';
isValid = false;
} else if () {
[Link] = 'Invalid email format.';
isValid = false;
}
const phonePattern = /^[0-9]{10}$/;
if (phone === '') {
[Link] = 'Phone number is required.';
isValid = false;
} else if () {
[Link] = 'Phone number must be 10 digits.';
isValid = false;
}
if (password === '') {
[Link] = 'Password is required.';
isValid = false;
} else if ([Link] < 6) {
[Link] = 'Password must be at least 6 characters long.';
isValid = false;
}
if (isValid) {
alert("Form submitted successfully!");
}
return isValid;
}
CSS code: [Link]
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
body { .form-group input {
font-family: Arial, sans-serif; width: 100%;
margin: 0; padding: 10px;
padding: 0; font-size: 16px;
background-color: #f4f4f9; border: 1px solid #ccc;
} border-radius: 5px;
.container { }
max-width: 500px; .form-group button {
margin: 50px auto; display: block;
background: white; width: 100%;
padding: 20px; padding: 10px;
border-radius: 8px; font-size: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); color: white;
} background-color: #007BFF;
h1 { border: none;
text-align: center; border-radius: 5px;
color: #333; cursor: pointer;
} }
.form-group { .form-group button:hover {
margin-bottom: 15px; background-color: #0056b3;
} }
.form-group label { .error {
display: block; color: red;
font-weight: bold; font-size: 14px;
margin-bottom: 5px; }
}
Experiment 5
Write a program in XML for creation of DTD, which specifies set of rules. Create a style
sheet in CSS/ XSL & displaythe document in internet explorer.
1. XML Document with DTD 2. XSLT Stylesheet
<?xml version="1.0" encoding="UTF-8"?> <?xml- The XSLT file will transform the XML into a simple HTML table.
stylesheet type="text/xsl" href="[Link]"?>
<!DOCTYPE people [ <!ELEMENT people <?xml version="1.0" encoding="UTF-8"?>
(person+)> <!ELEMENT person (name, age, city)> <xsl:stylesheet version="1.0"
<!ELEMENT name (#PCDATA)> <!ELEMENT age
xmlns:xsl="[Link]
(#PCDATA)> <!ELEMENT city (#PCDATA)> ]>
m">
<people>
<!-- Template to match the root element
"people" -->
<xsl:template match="/people">
<person> <html>
<name>Rahul</name> <head>
<age>29</age> <title>Indian People List</title>
<city>Mumbai</city> <link rel="stylesheet" type="text/css"
</person> href="[Link]"/>
<person> </head>
<name>Anjali</name> <body>
<age>25</age> <h1>Indian People Information</h1>
<city>Delhi</city> <table border="1">
</person> <tr>
<person> <th>Name</th>
<name>Priya</name> <th>Age</th>
<age>34</age> <th>City</th>
<city>Bangalore</city> </tr>
</person> < ! - - I t e r a t e o ver each person and
display data in t a b l e r o w s - ->
<person>
<name>Vikas</name> <xsl:for-each select="person">
<age>40</age> <tr>
<city>Kolkata</city> <td><xsl:value-of select="name"/>
</person> </td> <td><xsl:value-of select="age"/>
<person> <td><xsl:value-of select="city"/>
<name>Sandeep</name> </td>
<age>28</age>
<city>Chennai</city> </td>
</person> </tr>
<person> </xsl:for-each>
<name>Neha</name> </table>
<age>30</age> </body>
<city>Pune</city> </html>
</person> </xsl:template>
</people> </xsl:stylesheet>
3. CSS File
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f9;
}
h1 {
color: #2c3e50;
text-align: center;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: #2980b9;
color: white;
}
tr:nth-child(even) {
background-color: #ecf0f1;
}
tr:hover {
background-color: #dfe6e9;
}
Experiment 6
Write a program in XML for creation of DTD, which specifies set of rules. Create a style
sheet in CSS/ XSL & displaythe document in internet explorer.
import [Link];
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) {
[Link] = empID;
[Link] = name;
[Link] = salary;
[Link] = designation;
[Link] = department;
}
/ / G e t t e r s a n d S e t t e r s
public int getEmpID() {
return empID;
}
public void setEmpID(int empID) {
[Link] = empID;
}
public String getName() {
return name;
}
public void setName(String name) {
[Link] = name;
}
p u b l i c d o u b l e g e t S a l a r y ( ) {
return salary;
}
p u b l i c v o i d s e t S a l a r y ( d o u b l e s a l a r y ) {
[Link] = salary;
}
p u b l i c S t r i n g g e t D e s i g n a t i o n ( ) {
return designation;
}
p u b l i c v o i d s e t D e s i g n a t i o n ( S t r i n g d e s i g n a t i o n ) {
[Link] = designation;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
[Link] = department;
}
// toString method for displaying employee information
@Override
public String toString() {
return "Employee{" +
"empID=" + empID +
", name='" + name + '\'' +
", salary=" + salary +
", designation='" + designation + '\'' +
", department='" + department + '\'' +
'}';
}
// Main method for testing
public static void main(String[] args) {
// Create an instance of Employee
Employee emp = new Employee(101, "Aditya Raj", 75000.0, "Developer", "IT");
// Print employee details
[Link](emp);
} }
Experiment 7
Build a command-line utility using [Link] that performs a specific task, such as converting
text to uppercase, calculating the factorial of a number, or generating random passwords
// Import required modules
const readline = require('readline');
const crypto = require('crypto');
// Create a readline interface
const rl = [Link]({
input: [Link],
output: [Link]
});
// Display menu options
[Link]("Command-Line Utility:");
[Link]("1. Convert text to uppercase");
[Link]("2. Calculate factorial of a number");
[Link]("3. Generate a random password");
// Function to convert text to uppercase
function convertToUppercase(text) {
return [Link]();
}
// Function to calculate factorial
function factorial(num) {
if (num < 0) return "Factorial is not defined for negative numbers.";
if (num === 0 || num === 1) return 1;
return num * factorial(num - 1);
}
// Function to generate random password
function generateRandomPassword(length = 12) {
return [Link](length).toString('base64').slice(0, length);
}
// Prompt user for choice
[Link]("Enter your choice (1/2/3): ", (choice) => {
switch (choice) {
case '1':
[Link]("Enter text to convert to uppercase: ", (text) => {
[Link]("Uppercase Text:", convertToUppercase(text));
[Link]();
});
break;
case '2':
[Link]("Enter a number to calculate its factorial: ", (number) => {
const num = parseInt(number);
if (isNaN(num)) {
[Link]("Please enter a valid number.");
} else {
[Link](`Factorial of ${num}:`, factorial(num));
}
[Link]();
});
break;
case '3':
[Link]("Enter desired password length (default is 12): ", (length) => {
const len = parseInt(length) || 12;
[Link]("Generated Password:", generateRandomPassword(len));
[Link]();
});
break;
default:
[Link]("Invalid choice. Please restart the program and select a valid option.");
[Link]();
}
});
Experiment 8
Develop a script that uses MongoDB's 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.
// Import MongoDB client
const { MongoClient } = require('mongodb');
// Function to run the aggregation pipeline
async function run() {
const uri = 'mongodb://localhost:27017'; // Replace with your MongoDB URI
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });
try {
// Connect to MongoDB client
await [Link]();
const database = [Link]('userdb'); // Replace with your database name
const collection = [Link]('users'); // Replace with your collection name
// Insert sample data (for the first time, to populate the collection)
const sampleData = [
{ "_id": 1, "name": "Alice", "age": 30, "city": "Mumbai" },
{ "_id": 2, "name": "Aditya", "age": 25, "city": "Patna" },
{ "_id": 3, "name": "Payal", "age": 35, "city": "Mumbai" },
{ "_id": 4, "name": "Happy", "age": 40, "city": "Kanpur" },
{ "_id": 5, "name": "Alira", "age": 28, "city": "Patna" },
{ "_id": 6, "name": "Rahul", "age": 33, "city": "Mumbai" },
{ "_id": 7, "name": "Grace", "age": 32, "city": "Kanpur" },
{ "_id": 8, "name": "Hannah", "age": 27, "city": "Patna" }
];
// Insert sample data only if the collection is empty
const count = await [Link]();
if (count === 0) {
await [Link](sampleData);
[Link]("Sample data inserted.");
}
// Aggregation pipeline to find the average age by city
const pipeline = [
// Stage 1: Group by city and calculate the average age
{
$group: {
_id: "$city", // Group by city
averageAge: { $avg: "$age" } // Calculate average age of users in each city
}
},
// Stage 2: Sort by average age in descending order (optional)
{
$sort: {
averageAge: -1 // Sort by averageAge in descending order
}
},
// Stage 3: Project to clean up output
{
$project: {
_id: 0, // Remove internal _id
city: "$_id", // Rename _id to 'city'
averageAge: 1 // Include averageAge in the output
}
}
];
// Run the aggregation
const result = await [Link](pipeline).toArray();
// Output the result
if ([Link] > 0) {
[Link]("Average Age of Users by City:");
[Link](cityData => {
[Link](`City: ${[Link]}, Average Age: ${[Link]}`);
});
} else {
[Link]("No users found in the database.");
}
} catch (err) {
[Link]("Error during aggregation:", err);
} finally {
// Ensure client is closed after the operation
await [Link]();
}
}
// Run the aggregation function
run().catch(err => {
[Link]("Error executing the script:", err);
});