Scribd
Upload
19 views37 pages

Saanp File

Uploaded by

sumnadas346
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views37 pages

Saanp File

Uploaded by

sumnadas346
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 37

1|Page

PRACTICAL FILE
Subject: Web Technology Lab
Subject Code: BCS-552
Course: B. Tech Branch: CSE Semester: 5th
Session Odd Sem 2024-25

Submitted To: Submitted By:


Prof. Bipin Panday Aditya Verma
Department of Computer Science and Engineering. 2202300100009
CSE A
2|Page

INDEX
S. Name of Experiment Date Page Remarks Signature
No. No.

1. Write HTML program for designing your 19/09/2024 3-6


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

2. Write HTML program to design an entry 26/09/2024 7-9


form for student details.

3. Develop a responsive website using CSS and 30/09/2024 9-20


HTML. Website may be commercial website.

4. Write programs using HTML and Java Script 10/10/2024 21-23


for validation of input data.

5. Write a JavaScript program to calculate 24/10/2024 24-25


longitude and latitude of your location.

6. Create a collection in Mongo-Db named 07/11/2024 26-29


employee the key will be employee id name
salary and department. Store at least 10
records.

7. Using JavaScript display the content of XML 21/11/2024 30-33


file on webpage using HTML and CSS.

8. Using Servlets create a form to register 21/11/2024 34-37


information in database.
3|Page

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>Institute Website</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

overflow-x: hidden;

header {

background-color: rgb(233, 20, 63);

color: white;

padding: 1rem 0;

text-align: center;

nav {

background-color: black;

padding: 0.6rem;

text-align: center;

}
4|Page

nav a {

color: white;

margin: 0 15px;

text-decoration: none;

.container {

padding: 2rem;

.department {

background: rgb(176, 166, 166);

margin: 1rem 0;

padding: 1rem;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

footer {

text-align: center;

padding: 0.6rem;

background-color: black;

color: white;

position: relative;

/* bottom: 0; */

width: 100%;

height: 40px;

/* align-items: center; */

</style>

</head>
5|Page

<body>

<header>

<h1>Welcome to Dronacharya Group of Institutions, Greater Noida</h1>

<p>Providing Excellence in Education</p>

</header>

<nav>

<a href="#about">About</a>

<a href="#departments">Departments</a>

<a href="#contact">Contact</a>

</nav>

<div class="container">

<section id="about">

<h2>About Us</h2>

<p>Our institute is dedicated to providing high-quality education and fostering innovation and
creativity

among students.</p>

</section>

<section id="departments">

<h2>Departments</h2>

<div class="department">

<h3>Department of Computer Science</h3>

<p>Focuses on software development, AI, machine learning, and emerging technologies.</p>

</div>

<div class="department">

<h3>Department of Electronics</h3>

<p>Specializes in embedded systems, IoT, and semiconductor technologies.</p>

</div>

<div class="department">

<h3>Department of Mechanical Engineering</h3>

<p>Covers automation, robotics, and thermodynamics with hands-on industrial exposure.</p>


6|Page

</div>

<div class="department">

<h3>Department of Civil Engineering</h3>

<p>Focuses on structural design, urban planning, and sustainable development.</p>

</div>

</section>

<section id="contact">

<h2>Contact Us</h2>

<p>Email: [email protected]</p>

<p>Phone: 0120-2322022</p>

<p>Address: #27, APJ Abdul Kalam Road,

Knowledge Park-III, Greater Noida,

Uttar Pradesh - 201306</p>

</section>

</div>

<footer>

<p>&copy; 2024 Dronacharya Group of Institutions,Greater Noida. All Rights Reserved.</p>

</footer>

</body>

</html>
7|Page

2. Write HTML program to design an entry form for student details.


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Student Entry Form</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #e6f7ff;

.form-container {

max-width: 400px;

margin: 50px auto;

padding: 20px;

background: white;

border-radius: 8px;

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

h2 {

text-align: center;

color: #333;

input[type="text"], input[type="email"], input[type="number"], select {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 4px;

}
8|Page

button {

width: 100%;

padding: 10px;

background: #0073e6;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

button:hover {

background: #005bb5;

</style>

</head>

<body>

<div class="form-container">

<h2>Student Details</h2>

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="roll">Roll Number:</label>

<input type="text" id="roll" name="roll" required>

<label for="department">Department:</label>

<select id="department" name="department">

<option>Computer Science</option>

<option>Electronics</option>

<option>Mechanical</option>

<option>Civil</option>
9|Page

<option>Electrical</option>

</select>

<button type="submit">Submit</button>

</form>

</div>

</body>

</html>
10 | P a g e

3. Develop a responsive website using CSS and HTML. Website may be


commercial website.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Dynamic E-Commerce Website</title>

<style>

/* General Reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

color: #333;

a{

text-decoration: none;

color: inherit;

ul {

list-style: none;

/* Header */

.header {
11 | P a g e

background: #333;

color: white;

padding: 15px 20px;

display: flex;

justify-content: space-between;

align-items: center;

.header .logo {

font-size: 24px;

font-weight: bold;

.header .navbar ul {

display: flex;

gap: 20px;

.header .navbar a {

color: white;

font-size: 16px;

/* Hero Section */

.hero {

display: flex;

justify-content: center;

align-items: center;

height: 60vh;

background: url('download (1).jpg') no-repeat center center/cover;

text-align: center;

color: white;

padding: 20px;
12 | P a g e

.hero h1 {

font-size: 48px;

margin-bottom: 10px;

color: #f3af03;

.hero p {

font-size: 20px;

margin-bottom: 20px;

color: blue;

.hero .cta {

padding: 10px 20px;

background: #ff5733;

color: white;

border-radius: 5px;

/* Products Section */

.products {

padding: 40px 20px;

.products h2 {

text-align: center;

margin-bottom: 20px;

font-size: 32px;

}
13 | P a g e

.products .product-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

.products .product-card {

border: 1px solid #ddd;

border-radius: 8px;

overflow: hidden;

background: white;

transition: transform 0.2s, box-shadow 0.2s;

.products .product-card:hover {

transform: translateY(-5px);

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

.products .product-card img {

width: 100%;

height: auto;

.products .product-card .details {

padding: 15px;

text-align: center;

.products .product-card h3 {

margin-bottom: 10px;

font-size: 18px;

}
14 | P a g e

.products .product-card p {

color: #ff5733;

font-size: 16px;

margin-bottom: 15px;

.products .product-card button {

background: #ff5733;

color: white;

border: none;

padding: 10px 15px;

border-radius: 5px;

cursor: pointer;

/* About Section */

.about {

padding: 40px 20px;

text-align: center;

background: #f9f9f9;

.about h2 {

margin-bottom: 20px;

font-size: 32px;

.about p {

max-width: 600px;

margin: 0 auto;

line-height: 1.6;

}
15 | P a g e

/* Contact Section */

.contact {

padding: 40px 20px;

text-align: center;

.contact form {

max-width: 500px;

margin: 0 auto;

.contact form label {

display: block;

margin-bottom: 5px;

font-weight: bold;

.contact form input,

.contact form textarea {

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ddd;

border-radius: 5px;

.contact form button {

background: #ff5733;

color: white;

border: none;

padding: 10px 20px;

border-radius: 5px;
16 | P a g e

cursor: pointer;

/* Footer */

.footer {

background: #333;

color: white;

text-align: center;

padding: 10px;

/* Media Queries */

@media (max-width: 768px) {

.hero h1 {

font-size: 32px;

.hero p {

font-size: 16px;

</style>

</head>

<body>

<!-- Header -->

<header class="header">

<div class="logo">ShopEase</div>

<nav class="navbar">

<ul>

<li><a href="#products">Products</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>
17 | P a g e

</ul>

</nav>

</header>

<!-- Hero Section -->

<section class="hero">

<div>

<h1>Welcome to ShopEase</h1>

<p>Your one-stop shop for all your needs!</p>

<a href="#products" class="cta">Start Shopping</a>

</div>

</section>

<!-- Products Section -->

<section class="products" id="products">

<h2>Our Products</h2>

<div class="product-grid">

<div class="product-card">

<img src="download (2).jpg" alt="Product 1">

<div class="details">

<h3>Product 1</h3>

<p>$19.99</p>

<button>Add to Cart</button>

</div>

</div>

<div class="product-card">

<img src="download (3).jpg" alt="Product 2">

<div class="details">

<h3>Product 2</h3>

<p>$29.99</p>

<button>Add to Cart</button>

</div>

</div>
18 | P a g e

<div class="product-card">

<img src="download (4).jpg" alt="Product 3">

<div class="details">

<h3>Product 3</h3>

<p>$39.99</p>

<button>Add to Cart</button>

</div>

</div>

<div class="product-card">

<img src="download (5).jpg" alt="Product 4">

<div class="details">

<h3>Product 4</h3>

<p>$49.99</p>

<button>Add to Cart</button>

</div>

</div>

</div>

</section>

<!-- About Section -->

<section class="about" id="about">

<h2>About Us</h2>

<p>We are dedicated to bringing you the best products at unbeatable prices. ShopEase is committed to
quality and

customer satisfaction.</p>

</section>

<!-- Contact Section -->

<section class="contact" id="contact">

<h2>Contact Us</h2>

<form>

<label for="name">Name:</label>

<input type="text" id="name" placeholder="Enter your name">


19 | P a g e

<label for="email">Email:</label>

<input type="email" id="email" placeholder="Enter your email">

<label for="message">Message:</label>

<textarea id="message" rows="4" placeholder="Your message"></textarea>

<button type="submit">Send</button>

</form>

</section>

<!-- Footer -->

<footer class="footer">

<p>&copy; 2024 ShopEase. All rights reserved.</p>

</footer>

</body>

</html>
20 | P a g e
21 | P a g e

4. 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>Form Validation</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f9;

margin: 0;

padding: 0;

.form-container {

max-width: 400px;

margin: 50px auto;

padding: 20px;

background: white;

border-radius: 8px;

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

input {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 4px;

button {

width: 100%;

padding: 10px;
22 | P a g e

background: #0073e6;

color: white;

border: none;

border-radius: 4px;

</style>

</head>

<body>

<div class="form-container">

<h2>Register</h2>

<form id="form">

<input type="text" id="username" placeholder="Username" required>

<input type="email" id="email" placeholder="Email" required>

<input type="password" id="password" placeholder="Password" required>

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

</form>

</div>

<script>

function validateForm() {

const username = document.getElementById('username').value;

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

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

if (!username || !email || !password) {

alert("All fields are required!");

return;

if (password.length < 6) {

alert("Password must be at least 6 characters!");

return;

}
23 | P a g e

alert("Form submitted successfully!");

</script>

</body>

</html>
24 | P a g e

5. Write a javaScript program to calculate longitude and latitude of your


location.

<!DOCTYPE html>

<html>

<head>

<title>Real-Time Location Tracker</title>

<style>

a{

text-decoration: none;

color: crimson;

font-weight: 900;

button {

border-radius: 8px;

background-color: burlywood;

font-weight: 700;

p{

font-weight: 900;

</style>

</head>

<body>

<h1>Real-Time Location Tracker</h1>

<p id="location">Click the button to track your location.</p>

<button onclick="trackLocation()">Track Location</button>

<br /><br />

<a id="map-link" href="#" target="_self">View on Google Map</a>

<script>

async function trackLocation() {


25 | P a g e

if ("geolocation" in navigator) {

navigator.geolocation.getCurrentPosition(async function (position) {

const latitude = position.coords.latitude;

const longitude = position.coords.longitude;

const locationText = `Latitude: ${latitude}, Longitude: ${longitude}`;

document.getElementById("location").innerText = locationText;

// Link to Google Maps

const mapLink = `https://www.google.com/maps?q=${latitude},${longitude}`;

document.getElementById("map-link").href = mapLink;

// Fetch address using OpenCage Geocoding API

const apiKey = "YOUR_OPENCAGE_API_KEY"; // Replace with your OpenCage API key

});

} else {

document.getElementById("location").innerText =

"Geolocation is not supported by your browser.";

</script>

</body>

</html>
26 | P a g e

6. Create a collection in Mongo-Db named employee the key will be


employee id name salary and department. Store at least 10 records.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Employee Data</title>

<style>

table {

width: 50%;

margin: 50px auto;

border-collapse: collapse;

th, td {

padding: 10px;

border: 1px solid #ddd;

text-align: center;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h1 style="text-align: center;">Employee Records</h1>

<table>

<thead>

<tr>

<th>Employee ID</th>

<th>Name</th>

<th>Salary</th>
27 | P a g e

<th>Department</th>

</tr>

</thead>

<tbody id="employeeTable">

<!-- Employee Data Will Be Populated Here -->

</tbody>

</table>

<script>

fetch('http://localhost:3000/employees')

.then(response => response.json())

.then(data => {

const tableBody = document.getElementById('employeeTable');

data.forEach(employee => {

const row = document.createElement('tr');

row.innerHTML = `

<td>${employee.employee_id}</td>

<td>${employee.name}</td>

<td>${employee.salary}</td>

<td>${employee.department}</td>

`;

tableBody.appendChild(row);

});

})

.catch(err => console.error('Error fetching data:', err));

</script>

</body>

</html>

JAVASCRIPT FILE:

const express = require('express');

const MongoClient = require('mongodb').MongoClient;

const path = require('path');


28 | P a g e

const app = express();

const url = 'mongodb://localhost:27017';

const dbName = 'company_db';

MongoClient.connect(url, { useUnifiedTopology: true })

.then(client => {

console.log('Connected to Database');

const db = client.db(dbName);

const employeeCollection = db.collection('employee');

// Serve static HTML file

app.use(express.static(path.join(__dirname, 'public')));

// API to fetch employee data

app.get('/employees', (req, res) => {

employeeCollection.find().toArray()

.then(employees => {

res.json(employees);

})

.catch(err => console.error(err));

});

// Listen for requests

app.listen(3000, () => {

console.log('Server is running on port 3000');

});

})

.catch(err => console.error(err));


29 | P a g e

Employee ID Name Salary Department


101 Aditya Verma 50000 HR
102 Harsh Kumar 60000 Finance
103 Dev Bhargav 55000 Marketing
104 Aman Raj 70000 Engineering
105 Lakshya Rawat 45000 Sales
106 Hardik Thapliyal 65000 Engineering
107 Prince Sharma 48000 HR
108 Harsh Pandey 72000 Finance
109 Mukul Tyagi 53000 Marketing
110 Rajan Sharma 75000 Sales
30 | P a g e

7.Using JavaScript display the content of XML file on webpage using HTML
and CSS.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Display XML Content</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

background-color: #f9f9f9;

.xml-container {

border: 1px solid #ddd;

padding: 15px;

background: #fff;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

.xml-item {

margin-bottom: 10px;

padding: 10px;

border-bottom: 1px solid #eee;

.xml-item:last-child {

border-bottom: none;

.xml-tag {

font-weight: bold;

color: #333;

}
31 | P a g e

</style>

</head>

<body>

<h1>Display XML Content</h1>

<div id="xml-output" class="xml-container"></div>

<script>

document.addEventListener("DOMContentLoaded", () => {

const outputDiv = document.getElementById("xml-output");

// XML Data as a string

const xmlData = `

<employees>

<employee>

<id>1</id>

<name>Aditya Verma</name>

<department>HR</department>

<salary>50000</salary>

</employee>

<employee>

<id>2</id>

<name>Harsh kumar</name>

<department>Finance</department>

<salary>60000</salary>

</employee>

<employee>

<id>3</id>

<name>Dev Bhargav</name>

<department>Marketing</department>

<salary>45000</salary>

</employee>

</employees>

`;
32 | P a g e

// Parse the XML

const parser = new DOMParser();

const xmlDoc = parser.parseFromString(xmlData, "application/xml");

// Handle any XML parsing errors

const parseError = xmlDoc.getElementsByTagName("parsererror");

if (parseError.length) {

outputDiv.textContent = "Error parsing XML data.";

return;

// Extract and display XML content

const employees = xmlDoc.getElementsByTagName("employee");

Array.from(employees).forEach((employee) => {

const id = employee.getElementsByTagName("id")[0].textContent;

const name = employee.getElementsByTagName("name")[0].textContent;

const department = employee.getElementsByTagName("department")[0].textContent;

const salary = employee.getElementsByTagName("salary")[0].textContent;

// Create a container for each employee

const employeeDiv = document.createElement("div");

employeeDiv.className = "xml-item";

employeeDiv.innerHTML = `

<div><span class="xml-tag">ID:</span> ${id}</div>

<div><span class="xml-tag">Name:</span> ${name}</div>

<div><span class="xml-tag">Department:</span> ${department}</div>

<div><span class="xml-tag">Salary:</span> $${salary}</div>

`;

outputDiv.appendChild(employeeDiv);

});

});
33 | P a g e

</script>

</body>

</html>
34 | P a g e

8. Using Servlets create a form to register information in database.

SQL to create the database and table:

CREATE DATABASE user_registration;

USE user_registration;

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(100),

email VARCHAR(100),

password VARCHAR(100),

age INT

);

register.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>User Registration</title>

</head>

<body>

<h2>Register User</h2>

<form action="RegisterServlet" method="post">

<label for="name">Name:</label><br>

<input type="text" id="name" name="name" required><br><br>


35 | P a g e

<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required><br><br>

<label for="password">Password:</label><br>

<input type="password" id="password" name="password" required><br><br>

<label for="age">Age:</label><br>

<input type="number" id="age" name="age" required><br><br>

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

</form>

</body>

</html>

RegisterServlet.java:

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

import java.sql.*;

public class RegisterServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws


ServletException, IOException {

String name = request.getParameter("name");

String email = request.getParameter("email");

String password = request.getParameter("password");

int age = Integer.parseInt(request.getParameter("age"));

Connection connection = null;

PreparedStatement preparedStatement = null;

try {
36 | P a g e

// Load the JDBC driver

Class.forName("com.mysql.cj.jdbc.Driver");

// Establish a connection to the database

connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/user_registration", "root",


"password");

// SQL query to insert data into the 'users' table

String sql = "INSERT INTO users (name, email, password, age) VALUES (?, ?, ?, ?)";

preparedStatement = connection.prepareStatement(sql);

preparedStatement.setString(1, name);

preparedStatement.setString(2, email);

preparedStatement.setString(3, password);

preparedStatement.setInt(4, age);

// Execute the query

int result = preparedStatement.executeUpdate();

// Provide feedback to the user

if (result > 0) {

response.getWriter().println("User registered successfully!");

} else {

response.getWriter().println("Error in registration!");

} catch (Exception e) {

e.printStackTrace();

response.getWriter().println("Database error: " + e.getMessage());

} finally {

// Close resources

try {

if (preparedStatement != null) preparedStatement.close();

if (connection != null) connection.close();

} catch (SQLException e) {
37 | P a g e

e.printStackTrace();

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_4_0.xsd"

version="4.0">

<servlet>

<servlet-name>RegisterServlet</servlet-name>

<servlet-class>RegisterServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>RegisterServlet</servlet-name>

<url-pattern>/RegisterServlet</url-pattern>

</servlet-mapping>

</web-app>

Id Name Email Password Age


1 Aditya Verma [email protected] password@123 19

You might also like