LORDS INSTITUTE OF ENGINEERING & TECHNOLOGY

Approved by AICTE / Affiliated to JNTUH/ Estd.2002. Accredited with

‘A’ grade by NAAC, Accredited by NBA Survey No.32, Himayath Sagar, near TSPA
Junction, Hyderabad-500091

Department of Computer Science and

Engineering

Name of the Laboratory: Web Technologies Laboratory

B.E (Bachelor of Engineering)
Branch: - Computer Science and Engineering
Year – IV
Semester – I
Vision of the Department:
To be a preferred department of learning for students and teachers alike, with dual commitment to academics and
research, serving students in an atmosphere of innovation, team work and critical thinkingto adapt to ever changing
world.

Mission of the Department

DM1: To provide adaptable education preparing the graduates for a rewarding career in InformationTechnology
and related industries, in tune with evolving needs of the industry.
DM2: To prepare the students to think professionally and apply their knowledge critically andinnovatively in
solving professional and social problems.
DM3: To offer high quality education in the fields of computing by providing rich environment ofknowledge
and research for professional and personal growth of students as well as faculty
Note: DM: Department Mission
 Program Outcomes (POs):
Engineering Graduates will be able to:

S.No. Program Outcomes (POs):

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/Development of solutions: Design solutions for complex engineering problems
and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modelling to complex
engineering activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of t h e
engineering and management principles and apply these to one’s own work, as a
member and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological
change.
 WEB TECHNOLOGIES LAB
Program Specific Outcomes (PSO’s):

Professional Skills: The ability to research, understand and implement computer programs
in the areas related to algorithms, system software, multimedia, web design, big data
PSO1
analytics, and networking for efficient analysis and design of computer-based systems of
varying complexity.

Problem-Solving Skills: The ability to apply standard practices and strategies in software
service management using open-ended programming environments with agility to deliver a
PSO2
quality service for business success.
 Course Code Course Title Core/Elective
PC 752 CS Web Technologies Lab Core
Prerequisite Contact Hours per Week CIE SEE Credits
L T D P
- - - 4 25 50 2
Course Objectives:
The objectives of this course is to impart knowledge of
 To develop skills in designing & implement static and dynamic websites.
 To develop server-side programming for handling user requests
 To develop database processing and communication.

Course Outcomes:
After completing this course, the student will be able to:
 Analyze a web page and identify its elements and attributes.
 Apply Cascading Style Sheets web pages for a good aesthetic sense of design.
 Build dynamic web pages using JavaScript.
 Develop server-side scripting using Middleware Technologies for various application
scenarios
 Facilitate back-end Database communication for users via Middleware Technologies

LIST of EXPERIMENTS

1. Static Website Development

A. Create a static website using HTML tables.
B. Create a registration form using HTML forms.
C. Apply various CSS attributes and styles.

2. Dynamic Website Development

A. Develop dynamic Web content using JavaScript.
B. Develop a student registration form with Validation support using JavaScript.
C. Develop a dynamic website using JavaScript Event Handling
D. Develop DOM manipulation using JavaScript

3. Server-side programming using Node.js

A. Deployment of Node.js and built-in Node.js modules
B. Implement file system in Node.js
C. Introduction to Express.js, Router
D. Request Parameter handling, Request Response Objects
E. Develop MVC Architecture
F. Create REST services in Node.js

4. Server-side programming using React.js

A. Introduction to React Components, rendering HTML, JSX
B. Execute React props, events, lists, forms, and router
C. Implement a REST service from Node.js, and display a SPA

5. MongoDB and React JS

A. Essentials of No-SQL database
B. Creating collections, retrieving data, inserting, updating, and querying the databases
C. Connection with Node.js

6. CASE STUDY: A full-fledged MERN stack application

 WEB TECHNOLOGIES LAB

List of Programs

S.No Lab Programs CO Page No

Static website development CO 1 7
A) Create a static website using HTML tables CO 1 7
1
B) Create a registration form using HTML forms CO 1 7
C) Apply various CSS attributes and styles. CO 1 7
Dynamic website development CO 2 10
A) Develop dynamic Web content using JavaScript CO 2 10
B) Develop a student registration form with Validation support using
2 CO 2 10
JavaScript

C) Develop a dynamic website using JavaScript Event Handling CO 2 10

D) Develop DOM manipulation using JavaScript CO 2 10
Server-side programming using Node.js CO 3 14
A. Deployment of Node.js and built-in Node.js modules CO 3 14
B. Implement file system in Node.js CO 3 15
3 C. Introduction to Express.js, Router CO 3 15
D. Request Parameter handling, Request Response Objects CO 3 17
E. Develop MVC Architecture CO 3 17
F. Create REST services in Node.js CO 3 19
Server-side programming using React.js CO 4 20
A. Introduction to React Components, rendering HTML, JSX CO 4 20
4
B. Execute React props, events, lists, forms, and router CO 4 21
C. Implement a REST service from Node.js, and display a SPA CO 4 22
MongoDB and React JS CO 5 23
A. Essentials of No-SQL database CO 5 23
5 B. Creating collections, retrieving data, inserting, updating, and querying CO 5
24
the databases
C. Connection with Node.js CO 5 25
6 CASE STUDY: A full-fledged MERN stack application CO 5 26

Beyond the Syllabus

S.No Additional Programs CO Page No

1 Dynamic website development using php and mysql CO 3 29

LORDS ENGINEERING COLLEGE BE VII SEMESTER

 WEB TECHNOLOGIES LAB

Experiment: 1. Static website development

Problem Statement: Design Student Registration Form in HTML with cascading style sheets using
Table Tags in HTML. A simple HTML code for student registration Form that contains all necessary
fields in the student registration form. Take An Example, First-Name, Last-Name, Email- id, Mobile
Number, Address, Hobbies, Course, Gender, Date-Of-Birth, Etc.
Description: A static site consists of web pages that look the same every time visitors access
them. It can be written in Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS),
and html tags.

Experiment: 1. Static website development

1.A) Create a static website using HTML tables

Program steps:
 Open notepad
 Create tags – table, tr, th, td
 Fill data
 Save as html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Website with HTML Table</title>
<style>
/* Optional: Add some basic styling for better
presentation */body {
font-family: Arial, sans-
serif;margin: 20px;

table {
LORDS ENGINEERING COLLEGE BE VII SEMESTER 7
 WEB TECHNOLOGIES LAB

width: 100%;
border-collapse:
collapse;margin-top:
20px;

}
th, td {
border: 1px solid
#ddd;padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h1>Sample Table</h1>

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>

</thead
>
<tbody>
<tr>
<td>Row 1, Cell 1</td>

LORDS ENGINEERING COLLEGE BE VII SEMESTER 8

 WEB TECHNOLOGIES LAB

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>

</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>

</tbody
>
</table>

</body>
</html>

LORDS ENGINEERING COLLEGE BE VII SEMESTER 9

 WEB TECHNOLOGIES LAB

1.C) Create a registration form using HTML forms

Program steps:
1. Open notepad
2. Create tags – form and its attributes
3. Save as html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body
{
font-family: Arial, sans-
serif;margin: 20px;
}

form {
width: 300px;
margin: 0
auto;
}

label {
display: block;
margin-bottom:
8px;
}

input {
width
:
100%
;
padding:
8px;
margin-bottom:
16px; box-sizing:
border-box;
}

button { background-
LORDS ENGINEERING COLLEGE BE VII SEMESTER 10
 WEB TECHNOLOGIES LAB

color:
#4CAF50;color: white;
padding: 10px
15px;border:
none; border-
radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<h1>Registration Form</h1>

<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" required>

<label for="lname">Last Name:</label>

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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Register</button>
</form>

</body>
</html>

LORDS ENGINEERING COLLEGE BE VII SEMESTER 11

 WEB TECHNOLOGIES LAB

1.C) Apply various CSS attributes and styles.

CSS is used to apply the style in the web page which is made up of HTML elements. It describes the
look of the webpage.CSS provides various style properties such as background color, padding,
margin, border-color, and many more, to style a webpage. Each property in CSS has a name-value
pair, and each property is separated by a semicolon (;).

i) Inline CSS:
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS
style is an effective way to style single pages. Using the CSS style for multiple web pages is
time-consuming because we require placing the style on each web page.
Program steps:
 Open notepad and write html code
 In the HTML page, locate where css is requried
 Put the csss code the html content
 Add the rules of CSS in the new line.
 Close the style tag.

i) Internal CSS:
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
Program steps:

 Open notepad and write html code

 In the HTML page and locate the <head>
 Put the csss code after the <head>
 Add the rules of CSS in the new line.
 Close the style tag.

ii) External CSS:

An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page
Program steps:
 The external style sheet can be written in any text editor.
 The file must not contain any HTML code, and must be saved with a .css extension.

<!DOCTYPE html>
<html lang="en">
<head>
LORDS ENGINEERING COLLEGE BE VII SEMESTER 12
 WEB TECHNOLOGIES LAB

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0; display:
flex;
justify-content: center;align-
items: center; height: 100vh;
}

form {
background-color: #fff;border-
radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);padding: 20px;

width: 300px; text-align:

center;
}

h1 {
color: #333;
}

label {
display: block; margin-
bottom: 8px;color: #555;
}

input {
width: 100%; padding: 10px;
margin-bottom: 16px;
box-sizing: border-box; border:1px
solid #ccc; border-radius: 4px;
}

button {
background-color: #4CAF50;color:
white;
padding: 10px 15px;border:
none; border-radius: 4px;
LORDS ENGINEERING COLLEGE BE VII SEMESTER 13
 WEB TECHNOLOGIES LAB

cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<form>

<h1>Registration Form</h1>

<label for="fname">First Name:</label>

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

<label for="lname">Last Name:</label>

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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Register</button>
</form>

</body>
</html

LORDS ENGINEERING COLLEGE BE VII SEMESTER 14

 WEB TECHNOLOGIES LAB

Output:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 15

 WEB TECHNOLOGIES LAB

Experiment: 2. Dynamic website development

Problem Statement: Design Student Registration Form in DHTML with validations and javascript
Event Handling. Take an example, First-Name, Last-Name, EmailID, Mobile Number, Address,
Hobbies, Course, Gender, Date-of-Birth, etc.
Description: When the web server receives a user request for a dynamic page, it does not send the
page directly to the requesting browser as it would do with a static page. Instead, it passes the page to
the application server which then completes three activities:
 Read the code on the page
 Validate the page according to the code’s instructions
 Check the validation for each field from the page

2.A) Develop dynamic Web content using JavaScript

Program steps:
 Open an html page
 Reading: Dynamically displaying data
 Creating: Allow User Input
 Editing data before submit.
 Save the file as html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Registration Form</title>
<style>
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana,sans-
serif;background-color: #f4f4f4;
margin: 0;
padding: 0;
display:
flex;

justify-content:
center;align-items:
center; height:
100vh;
}
LORDS ENGINEERING COLLEGE BE VII SEMESTER 16
 WEB TECHNOLOGIES LAB

form {
background-color:
#fff;border-radius:
8px;
box-shadow: 0 0 10px rgba(0, 0, 0,
0.1);padding: 20px;
width: 300px;
text-align:
center;
}

h1 {
color: #333;
}

label {
display: block;
margin-bottom:
8px;color: #555;
}

input {
width: 100%;
padding: 10px;
margin-bottom:
16px;
box-sizing: border-
box; border: 1px
solid #ccc; border-
radius: 4px;
}

button { background-
color:
#4CAF50;color: white;
padding: 10px
15px;border:
none; border-
radius: 4px;
cursor: pointer;
font-size: 16px;

button:hover {

LORDS ENGINEERING COLLEGE BE VII SEMESTER 17

 WEB TECHNOLOGIES LAB

background-color: #45a049;
}

#greeting {
margin-top:
20px;color:
#4CAF50;
}
</style>
</head>
<body>

<form id="registrationForm">
<h1>Registration Form</h1>

<label for="fname">First Name:</label>

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

<label for="lname">Last Name:</label>

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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="button" onclick="displayGreeting()">Register</button>

</form>

<div id="greeting"></div>

<script>
function displayGreeting() {
// Get values from the form
var firstName =
document.getElementById('fname').value;varlastName =
document.getElementById('lname').value;

// Display a greeting message

var greetingDiv = document.getElementById('greeting');
greetingDiv.innerHTML = '<p>Welcome, ' + firstName + ' ' +lastName +
'!</p>';
}
</script>

LORDS ENGINEERING COLLEGE BE VII SEMESTER 18

 WEB TECHNOLOGIES LAB

</body>

</html>

2.B) Develop a student registration form with Validation support using JavaScript
Program steps:

 Create an HTML page to create the form.

 CSS to design the layout of the form.
 JavaScript to validate the form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana,sans-
serif;background-color: #f4f4f4;
margin: 0;
padding: 0;
display:
flex;
justify-content:
center;align-items:
center; height:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 19

 WEB TECHNOLOGIES LAB

100vh;
}

form {
background-color:
#fff;border-radius:
8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align:
center;
}

h1 {
color: #333;
}

label {
display: block;
margin-bottom:
8px;color: #555;
}

input {
width: 100%;
padding: 10px;
margin-bottom:
16px;
box-sizing: border-
box; border: 1px
solid #ccc; border-
radius: 4px;
}

button { background-
color:
#4CAF50;color: white;
padding: 10px
15px;border:
none; border-
radius: 4px;
cursor: pointer;
font-size: 16px;
}

LORDS ENGINEERING COLLEGE BE VII SEMESTER 20

 WEB TECHNOLOGIES LAB

button:hover {
background-color: #45a049;
}

#error-
messag
e
{color: red;
margin-top: 10px;

}
</style>
</head>
<body>

<form id="registrationForm" onsubmit="return validateForm()">

<h1>Student Registration Form</h1>

<label for="name">Full 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="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>

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

<div id="error-message"></div>
</form>

<script>
function validateForm() {
var name
=
document.getElementById('name').value; var email
=
document.getElementById('email').value; var dob =
document.getElementById('dob').value;
var errorMessage = document.getElementById('error-message');

// Basic validation
if (name.trim() === '' || email.trim() === '' || dob.trim()
=== '') {errorMessage.textContent = 'All fields are
required.';
return false;
LORDS ENGINEERING COLLEGE BE VII SEMESTER 21
 WEB TECHNOLOGIES LAB

// Email format validation

var emailRegex =
/^\S+@\S+\.\S+$/;if
(!emailRegex.test(email)) {
errorMessage.textContent = 'Please enter a valid email
address.';return false;
}

// Additional validation can be added as needed

// Clear error message if validation

passeserrorMessage.textContent = '';

// Allow form
submissionreturn true;
}
</script>

</body>
</html>

LORDS ENGINEERING COLLEGE BE VII SEMESTER 22

 WEB TECHNOLOGIES LAB

2.C) Develop a dynamic website using JavaScript Event Handling

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">

Program steps:

 Create an HTML page to create the form.

 CSS to design the layout of the form.
 Write JavaScript to handle the events in the html page.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 23

 WEB TECHNOLOGIES LAB

Output:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 24

 WEB TECHNOLOGIES LAB

<!DOCTYPE html>
<htm
l
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic To-Do List</title>
<style>
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana,sans-
serif;background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content:
center;align-items:
center; height:
100vh;
}

#todo-container
{ background-color:
#fff;border-radius:
8px;
box-shadow: 0 0 10px rgba(0, 0, 0,
0.1);padding: 20px;
width: 300px;
text-align:
center;

LORDS ENGINEERING COLLEGE BE VII SEMESTER 25

 WEB TECHNOLOGIES LAB

ul {
list-style-type:
none;padding: 0;

li {
margin-bottom:

10px;display: flex;

justify-content: space-
between;align-items:
center;
}

button { background-
color:
#4CAF50;color: white;
padding: 5px
10px;border:
none; border-
radius: 4px;
cursor: pointer;
font-size: 12px;
}

button:hover {
background-color: #45a049;
}
</style>

</head
>
LORDS ENGINEERING COLLEGE BE VII SEMESTER 26
 WEB TECHNOLOGIES LAB

<body
>

<div id="todo-container">
<h2>To-Do List</h2>
<input type="text" id="new-task" placeholder="New task...">
<button onclick="addTask()">Add</button>
<ul id="task-list"></ul>
</div>

<script>
function addTask() {

var newTaskInput =

document.getElementById('new-task');var taskList
= document.getElementById('task-list');

if (newTaskInput.value.trim()
=== '') {alert('Please enter a
task.'); return;

var li =
document.createElement('li');
li.innerHTML = `
<span>${newTaskInput.value}</span>
<button onclick="completeTask(this)">Complete</button>
<button onclick="deleteTask(this)">Delete</button>
`;

taskList.appendChil
d(li);
LORDS ENGINEERING COLLEGE BE VII SEMESTER 27
 WEB TECHNOLOGIES LAB

newTaskInput.value
= '';
}

function
completeTask(button)
{var li =
button.parentElement;
li.style.textDecoration = 'line-through';
}

function deleteTask(button)

{ var li =
button.parentElement;
li.remove();

}
</script>

</body>
</html>

LORDS ENGINEERING COLLEGE BE VII SEMESTER 28

 WEB TECHNOLOGIES LAB

2.D) Develop DOM manipulation using JavaScript

Problem Statement: Demonstrate JavaScript DOM Events like:

 When a web page has loaded completely
 When the mouse move over an element.
 When a user clicks the mouse.
 When any value changes in input field or drop down list
Description:
The DOM stands for Document Object Model. DOM manipulation in JavaScript is the process of
interacting with the DOM API to change or modify an HTML document that will be displayed in a
web browser.

Program steps:

 Create an HTML page to create the form.

 CSS to design the layout of the form.
 Write JavaScript to handle the events in the html page.
 Finding HTML elements by id

 Finding HTML elements by tag name

 Finding HTML elements by class name

LORDS ENGINEERING COLLEGE BE VII SEMESTER 29

 WEB TECHNOLOGIES LAB

Output:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 30

 WEB TECHNOLOGIES LAB

Experiment: 3. Server-side programming using Node.js

Problem Statement: Create a user database management system using Node JS

Description: Node.js is a JavaScript framework for writing server-side applications. Its non-IO
blocking technology makes it perfect for creating highly scalable web applications built around user
interaction. Node.js is a performance efficient server-side platform which makes writing backend
code
3.A) Deployment of Node.js and built-in Node.js modules
Program steps:
 Node.js is an open source server environment
 Node.js is free
 Node.js runs on various platforms
 Node.js uses JavaScript on the server
Various Node.js modules

Module Description

assert Provides a set of assertion tests

buffer To handle binary data

child_process To run a child process

cluster To split a single Node process into multiple processes

crypto To handle OpenSSL cryptographic functions

dgram Provides implementation of UDP datagram sockets

dns To do DNS lookups and name resolution functions

domain Deprecated. To handle unhandled errors

events To handle events

fs To handle the file system

http To make Node.js act as an HTTP server

https To make Node.js act as an HTTPS server.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 31
 WEB TECHNOLOGIES LAB

Output:

3.B) Implement file system in Node.js

Program steps:

 Read files
 Create files
 Update files
 Delete files
 Rename files

Output:

File system example

3.C) Introduction to Express.js, Router

Express is a small framework that sits on top of Node.js’s web server functionality to simplify its
APIs and add helpful new features.It makes it easier to organize your application’s functionality with
middle ware and routing; it adds helpful utilities to Node.js’s HTTP objects;it facilitates the rendering
of dynamic HTTP objects.
The express.Router() function is used to create a new router object. This function is used when you want
to create a new router object in your program to handle requests.
Syntax : express.Router( [options] )
Optional Parameters:
 case-sensitive: This enables case sensitivity.
 mergeParams: It preserves the req.params values from the parent router.
 strict: This enables strict routing.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 32

 WEB TECHNOLOGIES LAB

Return Value: This function returns the New Router Object.

The optional options parameter specifies the behavior of the router.

Property Description Default Availability

caseSensitive Enable case sensitivity. Disabled by default,

treating “/Foo” and
“/foo” as the same.

mergeParams Preserve the req.params values from the parent false 4.5.0+
router. If the parent and the child have conflicting
param names, the child’s value take precedence.

strict Enable strict routing. Disabled by default,

“/foo” and “/foo/” are
treated the same by the
router.

Program steps:

 Routing HTTP requests.

 Configuring middleware
 Rendering HTML views
 Registering a template engine

Output:

This middleware is available in Express v4.17.0 onwards.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 33

 WEB TECHNOLOGIES LAB




3.D) Request Parameter handling, Request Response Objects
Program steps:

 The requestListener is a function that is called each time the server gets a request.
 The requestListener function is passed as a parameter to the http.createServer() method.
 The requestListener function handles requests from the user, and also the response back to the user



Output:







LORDS ENGINEERING COLLEGE BE VII SEMESTER 34

 WEB TECHNOLOGIES LAB

LORDS ENGINEERING COLLEGE BE VII SEMESTER 35

 WEB TECHNOLOGIES LAB

3.E) Develop MVC Architecture

Problem Statement: Build an app that works with a RESTful api that is programmed through a
MVC architecture. Example: College Management System

Description:
MVC is an acronym for Model-View-Controller. It is a design pattern for software projects. It is used
majorly by Node developers and by C#, Ruby, PHP framework users too. In MVC pattern, application
and its development are divided into three interconnected parts. The advantage of this isit helps in
focusing on a specific part of the application name, the ways information is presented to and accepted
from, the user. It helps in allowing for efficient code reuse and the parallel development of the
application.

Model: Model represents the structure of data, the format and the constraints with which it is stored.
It maintains the data of the application. Essentially, it is the database part of the application.
View: View is what is presented to the user. Views utilize the Model and present data in a form in which
the user wants. A user can also be allowed to make changes to the data presented to the user. They
consist of static and dynamic pages which are rendered or sent to the user when the userrequests
them.
Controller: Controller controls the requests of the user and then generates appropriate response which
is fed to the viewer. Typically, the user interacts with the View, which in turn generates the appropriate
request; this request will be handled by a controller. The controller renders the appropriate view with
the model data as a response.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 36

 WEB TECHNOLOGIES LAB

LORDS ENGINEERING COLLEGE BE VII SEMESTER 37

 WEB TECHNOLOGIES LAB

3.F) Create REST services in Node.js

Following four HTTP methods are commonly used in REST based architecture.

 GET − This is used to provide a read only access to a resource. 

 PUT − This is used to create a new resource.
 DELETE − This is used to remove a resource.
 POST − This is used to update a existing resource or create a new resource.

Program steps:
 Create a Project Directory
 Initialize a new Node.js Project
 Install Required Packages
 Create Project Files
 Start Building Your Project

Output:

HTTP
Sr.No. URI POST body Result
Method

1 listUsers GET empty Show list of all the users.

2 addUser POST JSON String Add details of new user.

3 deleteUser DELETE JSON String Delete an existing user.

4 :id GET empty Show details of a user.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 38

 WEB TECHNOLOGIES LAB

Experiment: 4. Server-side programming using React.js

Problem Statement: Create a component that displays a simple form with input fields for the
event title, start time and location, and a submit button.
Description: React is a JavaScript library for building user interfaces. React is used to build single-
page applications. React allows us to create reusable UI components.

4.A) Introduction to React Components, rendering HTML, JSX

Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML. Components come in two types, Class components
and Function components
React Components rendering HTML
Class component:
A class component must include the extends React.Component statement. This statement creates an
inheritance to React.Component, and gives your component access to React.Component's functions.
Function components
A Function component also returns HTML, and behaves much the same way as a Class component, but
Function components can be written using much less code, are easier to understand.
Program steps:

 Import react package

 Write the jscode
 Execute the application
Output:

React Components rendering JSX

LORDS ENGINEERING COLLEGE BE VII SEMESTER 39

 WEB TECHNOLOGIES LAB

JSX is an XML-like code which we can use when coding with React. It was developed by the team at

LORDS ENGINEERING COLLEGE BE VII SEMESTER 40

 WEB TECHNOLOGIES LAB

Facebook & is mean’t to provide a more concise syntax, helping to simplify the developer experience.
We use curly braces {} to embed the variable into our JSX expression. And within those curly braces
we could embed any valid JavaScript expression. Such as user.firstName or printName(user)
JSX allows us to write HTML elements in JavaScript and place them in the DOM without
any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
Output:

4.B) Execute React props, events, lists, forms, and router

React-Router is a popular React library that is heavily used for client-side routing and offers single-
page routing. It provides various Component APIs( like Route, Link, Switch, etc.) that you can use
in your React application to render different components based on the URL pathnames in a single
page.
Pre-requisite: Please go through the below articles first, if you are not already familiar with React
Router
 ReactJS Router 
 ReactJS Types of Routers.
Program steps: 
 Create login.js
 Use parameters useParams
 Execute the application

Output:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 41

 WEB TECHNOLOGIES LAB

4.C) Implement a REST service from Node.js, and display a SPA

An SPA (Single-page application) is a web app implementation that loads only a single web
document, and then updates the body content of that single document via JavaScript APIs
Program steps:
 Define the API endpoints
 Secure the API endpoints
 Check the application permissions
 Determine the User Identity
Output:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 42

 WEB TECHNOLOGIES LAB

Experiment: 5. MongoDB and React JS

Problem Statement: Create an Application for student Data Base using MongoDB and React JS

Description: Set Up Your MongoDB Database

1. Install MongoDB: Download and install MongoDB from the official website
(https://www.mongodb.com/try/download/community). Follow the installation instructions for your
operating system.
2. Start MongoDB: Start the MongoDB server. This usually involves running a command
like mongod in your terminal.
3. Create a Database: Use a MongoDB management tool like MongoDB Compass or the command
line to create a new database. For example, using the command line:

5.A) Essentials of No-SQL database

NoSQL databases (aka "not only SQL") are non-tabular databases and store data differently than
relational tables. NoSQL databases come in a variety of types based on their data model. The main
types are document, key-value, wide-column, and graph. They provide flexible schemas and scale
easily with large amounts of data and high user loads

Types of NoSQL databases

Over time, four major types of NoSQL databases emerged: document databases, key-value
databases, wide-column stores, and graph databases.

 Document databases store data in documents similar to JSON (JavaScript Object Notation)
objects. Each document contains pairs of fields and values. The values can typically be a variety
of types including things like strings, numbers, booleans, arrays, or objects.
 Key-value databases are a simpler type of database where each item contains keys and values.
 Wide-column stores store data in tables, rows, and dynamic columns. 
 Graph databases store data in nodes and edges. Nodes typically store information about people,
places, and things, while edges store information about the relationships between the nodes.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 43

 WEB TECHNOLOGIES LAB

Fig: NoSQL Architecture comparing with other Architectures

5.B) Creating collections, retrieving data, inserting, updating, and querying the databases
Program steps:
 Create Collection
 Insert Data into Collection Documents in MongoDB
 Select All Documents in a Collection
 Specify Conditions Using Query Operators

Output:

5.C) Connection with Node.js

The following example demonstrates connecting to the local MongoDB database. var MongoClient =
require('mongodb'). MongoClient; // Connect to the db MongoClient.
connect("mongodb://localhost:27017/MyDb", function (err, db) { if(err) throw err; //Write databse
Insert/Update/Query code here.. });

LORDS ENGINEERING COLLEGE BE VII SEMESTER 44

 WEB TECHNOLOGIES LAB

Fig: DB connection

Output:

LORDS ENGINEERING COLLEGE BE VII SEMESTER 45

 WEB TECHNOLOGIES LAB

Experiment: 6. CASE STUDY: A full-fledged MERN stack application

Problem Statement: Record the information of employees

Description: Use the MERN stack; you work with React to implement the presentation
layer, Express and Node to make up the middle or application layer, and MongoDB to create the
database layer.

Steps to execute application “Record the information of employees”:

1. Install Node
To install Node, go to https://nodejs.org/en/ and download either the LTS version or the current
version.
2. Install a Code Editor
Use any code editor Dreamweaver Code editor with the plug-in prettier and code icons.
3. Follow the screen shots for MERN stack application
4. Creating an empty directory: mern

5. Create a folder for the back end and name it server

6. Jump into the server folder that we created previously and create the server. Then, we will
initialize package.json using npm init.

7. Install the dependencies.

LORDS ENGINEERING COLLEGE BE VII SEMESTER 46

 WEB TECHNOLOGIES LAB

8. Connecting to MongoDB Atlas

LORDS ENGINEERING COLLEGE BE VII SEMESTER 47

 WEB TECHNOLOGIES LAB

9. Use react JS code to display employee information

LORDS ENGINEERING COLLEGE BE VII SEMESTER 48

 WEB TECHNOLOGIES LAB

ADDITIONAL EXPERIMENT: Dynamic website development using php and mysql

Program Steps:
 Use php code
 Use mysql database
 Use Dreamweaver tool to create code and connect frontend with backend
 Use lampp services
 Execute application

Output:

-----END-----

LORDS ENGINEERING COLLEGE BE VII SEMESTER 49