A Laboratory Manual for

Advanced Web Programming

(3151606)

B.E. Semester 6
(Information Technology)

Directorate of Technical Education, Gandhinagar,

Gujarat
 Shantilal Shah Engineering College,

Bhavnagar Certificate

This is to certify
that Mr./Ms.
Enrollment No. of B.E. Semester 6th
Information Technology of this Institute has satisfactorily completed the
Practical / Tutorial work for the subject Advanced Web Programming
(3161611) for the academic year 2023-24.

Place:
Date:

Name and Sign of Faculty member Head of the Department

Advanced Web Programming (3161611)

Preface

Main motto of any laboratory/practical/field work is for enhancing required skills as well
as creating ability amongst students to solve real time problem by developing relevant
competencies in psychomotor domain. By keeping in view, GTU has designed
competency focused outcome-based curriculum for engineering degree programs where
sufficient weightage is given to practical work. It shows importance of enhancement of
skills amongst the students and it pays attention to utilize every second of time allotted
for practical amongst students, instructors and faculty members to achieve relevant
outcomes by performing the experiments rather than having merely study type
experiments. It is must for effective implementation of competency focused outcome-
based curriculum that every practical is keenly designed to serve as a tool to develop and
enhance relevant competency required by the various industry among every student.
These psychomotor skills are very difficult to develop through traditional chalk and board
content delivery method in the classroom. Accordingly, this lab manual is designed to
focus on the industry defined relevant outcomes, rather than old practice of conducting
practical to prove concept and theory.

By using this lab manual students can go through the relevant theory and procedure in
advance before the actual performance which creates an interest and students can have
basic idea prior to performance. This in turn enhances pre-determined outcomes
amongst students. Each experiment in this manual begins with competency, industry
relevant skills, course outcomes as well as practical outcomes (objectives). The students
will also achieve safety and necessary precautions to be taken while performing practical.

This manual also provides guidelines to faculty members to facilitate student centric lab
activities through each experiment by arranging and managing necessary resources in
order that the students follow the procedures with required safety and necessary
precautions to achieve the outcomes. It also gives an idea that how students will be
assessed by providing rubrics.

In the era of digitization, the demand of Internet based applications is increasing day by
day. Advanced Web Programming is one of the required skills for IT Engineer. This
focuses on front- end and back-end design. After learning this subject students can
advance their career in the field of web development.

Utmost care has been taken while preparing this lab manual however always there is
chances of improvement. Therefore, we welcome constructive suggestions for
improvement and removal of errors if any.
Advanced Web Programming (3161611)

Practical – Course Outcome matrix

Course Outcomes (COs):

CO 1 : Learn the concepts of client side programming using CSS and Java Script
CO 2 : Understand the concepts of Angular JS to extend basic HTML features
CO 3 : Learn Node JS framework to build dynamic server side applications
CO 4 : Study the concept of database using Mongo DB and connect database with application.
CO 5 : Design and implement full featured web application using the concepts of Angular JS and
Node JS.
Sr.
Objective(s) of Experiment CO1 CO2 CO3 CO4 CO5
No.

1. Design a webpage that reads a Text file using AJAX. √

Create a HTML form that will accept Enrolment No.,

Name, Semester, Branch, Mobile Number, Email,
2. √
Address etc. from the student and display them on the
page using Angular JS Directives and Expressions.

Create a webpage using Angular JS that displays details

of students' objects (such as Enrolment No., Name,
3. Semester, Branch, Mobile Number, Email Address, √ √
Address etc.) in a tabular format with appropriate CSS
effects.

Modify Practical 3 and provide a search field to search

records on the top of the page and also allow user to
4. √ √
sort table according to the column values when user
clicks on a column using filter.

Write Angular JS code to read Customer’s data in JSON

format available in a Customers.php file using $http
5. √ √
service and display the same on a webpage in tabular
format.

Create an Angular JS application for validation that will

accept Email, Username and Password as required
6. √
fields from the user. It will enable submit button only if
all the entered data are valid.

Create an example demonstrating the concept of

7. √
Angular JS Routing.
Advanced Web Programming (3161611)

Study the installation of Node JS and installation of

8. √
various packages in Node JS.

Design a webpage with a file input control to browse

appropriate file and four buttons Read File
9. Synchronously, Read File Asynchronously, Compress √
File, Decompress File. Implement the functionality of all
four buttons on the browsed file using Node JS.

Create a Node JS application that will allow a user to

10. √
browse and upload a file in localhost.

Create a Node JS application that will allow a user to

11. create new file, read file, write into a file and delete a √
file.

Study MongoDB environment setup and write Node JS

12. √ √
code to perform insertion operation in Mongo DB.

Write Node JS code to perform deletion operation from

13. √ √
Mongo DB.

Write Node JS code to perform selection and updation

14. operation to select and update specific document in √ √
Mongo DB.

Create a single page application for Library that will

15. allow the librarian to add a new book and search √ √ √ √ √
whether book is currently available in the library or not.
Advanced Web Programming (3161611)

Industry Relevant Skills

The following industry relevant competency are expected to be developed in the

student by undertaking the practical work of this laboratory.
1. HTML/CSS Skills : HTML is used extensively by web developers to build web pages.
CSS is used to implement different fonts, colors and layouts in the design of a
website.
2. Angular JS Skills : Angular JS is used to create fully functional dynamic web applications.
3. Node JS Skills : Node JS is extensively used to support back end activities
in the development of dynamic web applications.
4. Web Development Skills : Angular JS, Node JS are widely used for the development
of web applications along with HTML and CSS.

Guidelines for Faculty members

1. Teacher should provide the guideline with demonstration of practical to the
students with all features.
2. Teacher shall explain basic concepts/theory related to the experiment to the
students before starting of each practical
3. Involve all the students in performance of each experiment.
4. Teacher is expected to share the skills and competencies to be developed in the
students and ensure that the respective skills and competencies are developed in
the students after the completion of the experimentation.
5. Teachers should give opportunity to students for hands-on experience after the
demonstration.
6. Teacher may provide additional knowledge and skills to the students even though
not covered in the manual but are expected from the students by concerned
industry.
7. Give practical assignment and assess the performance of students based on task
assigned to check whether it is as per the instructions or not.
8. Teacher is expected to refer complete curriculum of the course and follow the
guidelines for implementation.

Instructions for Students

1. Students have to write answers / solutions of QUIZ in separate file pages. The quiz
of corresponding practical must be attached just behind each practical.
Advanced Web Programming (3161611)

2. Students are expected to carefully listen to all the theory classes delivered by the
faculty members and understand the COs, content of the course, teaching and
examination scheme, skill set to be developed etc.
3. Students shall organize the work in the group and make record of all observations.
4. Students shall develop maintenance skill as expected by industries.
5. Student shall attempt to develop related hand-on skills and build confidence.
6. Student shall develop the habits of evolving more ideas, innovations, skills etc. apart
from those included in scope of manual.
7. Student shall refer technical magazines and data books.
8. Student should develop a habit of submitting the experimentation work as per the
schedule and s/he should be well prepared for the same.
Advanced Web Programming (3161611)

Sample Rubrics for Practical Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)

Excellent Moderate level Problem not

understanding of understanding of understood and
problem and 03 problem and 02 can't establish the 01
Understanding
relevance with the relevance with the relation with the
of Problem
theory clearly theory clearly theory.
understood. understood.
Efficient Moderate level of Partial
implementation implementation. implementation 01
Implementation
with proper 04 Poor naming 03 with poor to
of Problem
naming convention convention. understanding. 02
and understanding
Unique Ordinary Weak
documentation documentation of documentation of 01
Presentation (not copied from 03 given problem 02 given problem to
and report other sources) of with proper without proper 02
writing given problem with formatting and formatting and
proper formatting language language
and language.
 Advanced Web Programming (3161611)

Index
(Progressive Assessment Sheet)

Sr. No. Objective(s) of Experiment Page Date of Date of Assessmen Sign. of Remark
No. perform submissi t Teacher s
ance on Marks with date
Design a webpage that reads a Text file using
1
AJAX.
Create a HTML form that will accept Enrolment
No., Name, Semester, Branch, Mobile Number,
2 Email, Address etc. from the student and
display them on the page using Angular JS
Directives
and Expressions.
Create a webpage using Angular JS that displays
details of students' objects (such as Enrolment
3 No., Name, Semester, Branch, Mobile Number,
Email Address, Address etc.) in a tabular format
with appropriate CSS effects.
Modify Practical 3 and provide a search field to
search records on the top of the page and also
4
allow user to sort table according to the column
values when user clicks on a column using filter.
Write Angular JS code to read Customer’s data
in JSON format available in a Customers.php
5
file using $http service and display the same
on a
webpage in tabular format.
Create an Angular JS application for validation
that will accept Email, Username and Password
6 as required fields from the user. It will enable
submit button only if all the entered data are
valid.
Create an example demonstrating the concept
7
of Angular JS Routing.
Study the installation of Node JS and installation
8
of various packages in Node JS.
Design a webpage with a file input control to
browse appropriate file and four buttons Read
File Synchronously, Read File Asynchronously,
9
Compress File, Decompress File. Implement the
functionality of all four buttons on the browsed
file using Node JS.
Create a Node JS application that will allow a
10
user to browse and upload a file in localhost.
Create a Node JS application that will allow a
11 user to create new file, read file, write into a file
and delete a file.
Advanced Web Programming (3161611)

Study MongoDB environment setup and write

12 Node JS code to perform insertion operation in
Mongo DB.
Write Node JS code to perform deletion
13
operation from Mongo DB.
Write Node JS code to perform selection and
14 updation operation to select and update
specific document in Mongo DB.
Create a single page application for Library that
will allow the librarian to add a new book and
15
search whether book is currently available in the
library or not.

Total
 Experiment No: 1

Aim : Design a webpage that reads a Text file using AJAX.

Implementation :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read Text File using AJAX</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: rgb(217, 234, 228);
}
#fileContent {
margin-top: 20px;
padding: 20px;
border: 1px solid #e1dbdb;
background-color: #c7aaaa62;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>Read Text File using AJAX</h2>
<input type="file" id="fileInput">
<div id="fileContent"></div>

<script>
document.getElementById('fileInput').addEventListener('change',
function() {
var file = this.files[0];
var reader = new FileReader();

reader.onload = function(event) {
var fileContents = event.target.result;
document.getElementById('fileContent').innerText = fileContents;
};

reader.onerror = function(event) {
console.error("File could not be read! Code " +
event.target.error.code);
};

reader.readAsText(file);
});
</script>
</body>
 </html>

Output:

Quiz:
1. What is AJAX? Enlist the advantages of AJAX.
AJAX stands for Asynchronous JavaScript and XML. It's a set of web development techniques
used to create asynchronous web applications. AJAX allows web pages to send and receive
data from a server asynchronously, without interfering with the display and behavior of the
existing page.

Advantages of AJAX include:

 Improved User Experience: AJAX allows parts of a web page to be updated asynchronously
without requiring a full page reload, resulting in a smoother and more interactive user
experience.
 Reduced Server Load: Since only parts of a page are updated, AJAX reduces the amount of
data transferred between the client and the server, leading to reduced server load.
 Faster Response Time: Asynchronous requests enable faster responses from the server,
enhancing the overall responsiveness of web applications.
 Enhanced Interactivity: AJAX facilitates the development of interactive web applications by
enabling dynamic updates without disrupting the user's workflow.
 Bandwidth Efficiency: By transmitting only the necessary data, AJAX conserves bandwidth
and improves the efficiency of data transmission.
2. Which type of files can be read using AJAX?
AJAX can be used to read data from various file types, but it's primarily used for reading
data from text-based files such as:

 XML (eXtensible Markup Language) files: AJAX was initially designed to work with XML, and
it's often used to fetch XML data from the server asynchronously.
 JSON (JavaScript Object Notation) files: JSON has become a popular data format for AJAX
requests due to its lightweight and easy-to-parse nature. AJAX can easily fetch JSON data
and manipulate it within web applications.
 Text files (plain text): AJAX can also be used to retrieve plain text files from the server
 asynchronously.
 HTML files: While less common, AJAX can also fetch HTML content from the server and
dynamically update parts of a web page.

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 2

Aim : Create a HTML form that will accept Enrolment No., Name, Semester,
Branch, Mobile Number, Email, Address etc. from the student and display
them on the page using Angular JS Directives and Expressions.
Implementation:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2</title>
<style>
body{
background-image: linear-gradient(rgb(106, 106, 106));
background-attachment: fixed;
text-align: center;
}
table {
margin: 196px 249px;
border: 2px solid black;
height: 334px;
width: 506px;
padding-left: 20px;
font-size: 1.5em;
}

td {
width: 33%;
}
</style>
</head>

<body>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="" ng-init="">

<table>
<tr>
<td>
Enrolment_no:
</td>
<td>
<input type="number" ng-model="Enrolment_no">
</td>
<th>{{ Enrolment_no }}</th>

</tr>
<tr>
<td>
 Name: </td>
<td>

<input type="text" ng-model="Name">

</td>
<th>
{{ Name }}
</th>
</tr>
<tr>
<td>
Semester:
</td>
<td><input type="number" ng-model="Semester">
</td>
<th>
{{ Semester }}
</th>
</tr>
<tr>
<td>
Branch:
</td>
<td>
<input type="text" ng-model="Branch">

</td>
<th>
{{ Branch }}
</th>
</tr>
<tr>
<td>
Mobile No.:</td>
<td> <input type="number" ng-model="Mobile">
</td>
<th>
{{ Mobile }}
</th>
</tr>
<tr>
<td>
Email:
</td>
<td><input type="email" ng-model="Email">
</td>
<th>
{{ Email }}
</th>
</tr>

</table>
 </div>

</body>

</html>

Output:

Quiz:
1. Enlist five most commonly used Angular JS directives and state their usages.
a. ng-model: Used for two-way data binding between the view (HTML) and the model
(JavaScript). It binds the value of HTML controls (like input, select, textarea) to application
data.
b. ng-repeat: Iterates over a collection (array or object) and repeats a set of HTML elements for
each item in the collection, creating a template for each item.
c. ng-click: Used to add click event handlers to HTML elements. It executes a specified
expression when an element is clicked.
d. ng-show / ng-hide: Used to conditionally display or hide HTML elements based on the
evaluation of an expression. It toggles the visibility of elements.
e. ng-if: Similar to ng-show/ng-hide, but it completely removes or recreates DOM elements
based on the evaluation of an expression. It's useful for conditionally rendering elements and
improving performance by reducing the number of elements in the DOM.
2. Explain various ways to display the values of the variables on the page with
suitable example.
a. Interpolation: Use double curly braces {{ }} to directly embed variables in HTML
templates. For example: <p>{{ message }}</p>
 b. b. ng-bind: Use the ng-bind directive to bind the content of an HTML element to
a variable. For example: <p ng-bind="message"></p>
c. c. Controller Binding: Bind variables to the $scope object in the controller, and
they become accessible in the corresponding view. For example:
app.controller('MainController', function($scope) {
$scope.message = 'Hello, world!';
});

d. Using Filters: Apply filters to variables to transform their display. For example,
using the currency filter: <p>{{ price | currency }}</p>
e. Directives with Expressions: Utilize directives like ng-show, ng-hide, ng-if, etc.,
along with expressions to conditionally display variables. For example:
<div ng-show="isLoggedIn">
<p>Welcome, {{ username }}</p>
</div>

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 3

Aim : Create a webpage using Angular JS that displays details of students'

objects (such as Enrolment No., Name, Semester, Branch, Mobile Number,
Email Address, Address etc.) in a tabular format with appropriate CSS effects.

Implementation:

<!DOCTYPE html>
<html ng-app="studentApp">

<head>
<title>Student Details</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
<style>
table {
border-collapse: collapse;
width: 100%;

th, td {
border: 2px solid black;
padding: 11px 26px;
}

th {
background-color: rgb(210, 238, 245);
}

td {
text-align: center;
background-color: rgb(210, 238, 245);
}

h1 {
text-align: center;
margin-top: 50px;
}
#top{
border: 2px solid black;
background-image: linear-gradient(skyblue,rgb(255, 255, 255));
}
#body{

background-image: linear-gradient(rgb(118, 206, 241),rgb(47, 58, 64));

 background-attachment: fixed;
}

</style>
</head>

<body id="body" ng-controller="studentController">

<div id="top" >
<h1>Student Details</h1><br>
</div>
<br>
<table>
<thead>
<tr>
<th>Enrolment No.</th>
<th>Name</th>
<th>Semester</th>
<th>Branch</th>
<th>Mobile Number</th>
<th>Email Address</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">
<td>{{ student.enrolmentNo }}</td>
<td>{{ student.name }}</td>
<td>{{ student.semester }}</td>
<td>{{ student.branch }}</td>
<td>{{ student.mobileNumber }}</td>
<td>{{ student.email }}</td>
<td>{{ student.address }}</td>
</tr>
</tbody>
</table>

<script>
var app = angular.module('studentApp', []);

app.controller('studentController', function($scope) {
$scope.students = [
{
enrolmentNo: "001",
name: "Jigar Raval",
semester: "6",
branch: "Information Technology",
mobileNumber: "1234567890",
email: "[email protected]",
address: "123 ABC Street"
},
{
 enrolmentNo: "002",
name: "Jayesh Raval",
semester: "6",
branch: "Information Technology",
mobileNumber: "9876543210",
email: "[email protected]",
address: "456 DEF Street"
},
{
enrolmentNo: "003",
name: "Jimit Shah",
semester: "6",
branch: "Informaton Technology",
mobileNumber: "5678901234",
email: "[email protected]",
address: "789 GHI Street"
},
{
enrolmentNo: "004",
name: "Aayush Sadhu",
semester: "2",
branch: "Computer Science",
mobileNumber: "5678901234",
email: "[email protected]",
address: "012 JKL Street"
},
{
enrolmentNo: "005",
name: "Heet Shah",
semester: "7",
branch: "Compuer Science",
mobileNumber: "5678901234",
email: "[email protected]",
address: "345 MNO Street"
},
{
enrolmentNo: "006",
name: "Dhruv makwana",
semester: "5",
branch: "Civil ",
mobileNumber: "5678901234",
email: "[email protected]",
address: "678 PQR Street"
},
{
enrolmentNo: "007",
name: "Devraj rathod",
semester: "4",
branch: "Electrical",
mobileNumber: "5678901234",
email: "[email protected]",
 address: "901 STU Street"
},

];
});

</script>
</body>

</html>
Output:

Quiz:

1. Write a note on : MVC Architecture.

 MVC stands for Model-View-Controller, which is a software architectural pattern commonly

used in web development and other software systems. The MVC pattern separates an
application into three interconnected components:

 Model: The model represents the data and business logic of the application. It encapsulates
the data and behavior of the application's domain. In web applications, the model typically
interacts with the database or other data sources.

 View: The view is responsible for presenting the user interface and displaying data to the
user. It receives input from users and forwards it to the controller for processing. In web
applications, the view is typically implemented using HTML, CSS, and client-side scripting
languages like JavaScript.

 Controller: The controller acts as an intermediary between the model and the view. It
receives user input from the view, processes it using the model, and updates the view with
the results. The controller handles user interactions, makes decisions, and coordinates the
flow of data between the model and the view.
 2. Explain the usage of ng-repeat, ng-controller directives with suitable example.

 ng-repeat Directive:
The ng-repeat directive is used in AngularJS to iterate over a collection and generate
HTML elements for each item in the collection. It creates a template that is duplicated
for each item in an array or object.
Example:
<ul>
<li ng-repeat="item in items">{{ item.name }}</li>
</ul>

 ng-controller Directive:
The ng-controller directive is used to define the controller for a particular part of the
HTML document. It associates a JavaScript controller with a portion of the HTML,
allowing the controller to manipulate the data and behavior within that portion.

Example:
<div ng-controller="UserController">
<p>{{ user.name }}</p>
</div>

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 4

Aim : Modify Practical 3 and provide a search field to search records on the
top of the page and also allow user to sort table according to the column
values when user clicks on a column using filter.

Implementation:

<!doctype html>
<html ng-app="studentApp">

<head>
<title>4</title>
<link rel="stylesheet" href="styles.css">
</head>

<body id="body" ng-controller="StudentController">

<div id="wrapper">
<h1 id="top">Student Records</h1>
<hr color="black"><br><br>
<input type="text" ng-model="search" placeholder="Search..." />

<table>
<thead>
<tr>
<th ng-click="orderByField='enrollmentNo'; reverseSort=!
reverseSort">Enrollment No.</th>
<th ng-click="orderByField='name'; reverseSort=!reverseSort">Name</th>
<th ng-click="orderByField='semester'; reverseSort=!
reverseSort">Semester</th>
<th ng-click="orderByField='branch'; reverseSort=!
reverseSort">Branch</th>
<th ng-click="orderByField='mobileNo'; reverseSort=!reverseSort">Mobile
Number</th>
<th ng-click="orderByField='email'; reverseSort=!reverseSort">Email
Address</th>
<th ng-click="orderByField='address'; reverseSort=!
reverseSort">Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students | filter:search |
orderBy:orderByField:reverseSort">
<td>{{student.enrollmentNo}}</td>
<td>{{student.name}}</td>
<td>{{student.semester}}</td>
<td>{{student.branch}}</td>
<td>{{student.mobileNo}}</td>
<td>{{student.email}}</td>
<td>{{student.address}}</td>
</tr>
 </tbody>
</table>
</div>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.js"></script>
<script src="app.js"></script>
</body>

</html>

angular.module('studentApp', []).controller('StudentController', function($scope)

{
$scope.students = [
{
enrollmentNo: "001",
name: "Jigar Raval",
semester: "6",
branch: "Information Technology",
mobileNo: "1234567890",
email: "[email protected]",
address: "123 ABC Street"
},
{
enrollmentNo: "002",
name: "Jayesh Raval",
semester: "6",
branch: "Information Technology",
mobileNo: "9876543210",
email: "[email protected]",
address: "456 DEF Street"
},
{
enrollmentNo: "003",
name: "Jimit Shah",
semester: "6",
branch: "Informaton Technology",
mobileNo: "5678901234",
email: "[email protected]",
address: "789 GHI Street"
},
{
enrollmentNo: "004",
name: "Aayush Sadhu",
semester: "2",
branch: "Computer Science",
mobileNo: "5678901234",
email: "[email protected]",
address: "012 JKL Street"
},
{
enrollmentNo: "005",
name: "Heet Shah",
semester: "7",
 branch: "Compuer Science",
mobileNo: "5678901234",
email: "[email protected]",
address: "345 MNO Street"
},
{
enrollmentNo: "006",
name: "Dhruv makwana",
semester: "5",
branch: "Civil ",
mobileNo: "5678901234",
email: "[email protected]",
address: "678 PQR Street"
},
{
enrollmentNo: "007",
name: "Devraj rathod",
semester: "4",
branch: "Electrical",
mobileNo: "5678901234",
email: "[email protected]",
address: "901 STU Street"
},
{
enrollmentNo: "018",
name: "Shivam Yadav",
semester: "4",
branch: "Mechanical",
mobileNo: "5678901234",
email: "[email protected]",
address: "234 VWX Street"
}

];

$scope.orderByField = 'enrollmentNo';
$scope.reverseSort = true;
});

#wrapper {
margin: 50px auto;
width: 80%;
}

h1 {
text-align: center;
}

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

}
 th,td{
background-color: rgb(210, 238, 245);

}
th {
cursor: pointer;
text-align: left;
padding: 11px 26px;
border: 2px solid #000000;

th:hover {
background-color: #ddd;
}

td {
padding: 11px 26px;
text-align: left;
border: 2px solid black;
}
#top{
border: 2px solid black;
background-color: rgb(210, 238, 245);
padding: 25px 8px;
}
#body{

background-image: linear-gradient(rgb(118, 206, 241),rgb(170, 176, 176));

background-attachment: fixed;
}

input[type="text"] {
padding: 5px;
margin-bottom: 10px;
width: 100%;
}
 Output:

Quiz:

1. Discuss various filters present in Angular JS with suitable examples.

AngularJS provides several built-in filters that allow developers to format data displayed in
the view. Some commonly used filters include:

 currency: Formats a number as a currency string. It takes an optional parameter to

specify the currency symbol, fraction size, and other options.

<p>{{ price | currency }}</p>

 date: Formats a date object to a string based on the specified format.

<p>{{ today | date:'yyyy-MM-dd' }}</p>

 uppercase / lowercase: Converts a string to uppercase or lowercase.

<p>{{ text | uppercase }}</p>

 number: Formats a number as text. It takes optional parameters to specify the

number of decimal places and the thousand separator.

<p>{{ value | number:2 }}</p>

 filter: Filters an array based on a predicate function or string value.

<ul>

<li ng-repeat="item in items | filter:'searchText'">{{ item.name }}</li>

</ul>
  orderBy: Orders an array by the specified expression.

<ul>

<li ng-repeat="item in items | orderBy:'price'">{{ item.name }}</li>

</ul>
2. Write Angular JS code to display numbers in Rupee format with Rupee symbol.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Currency Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="MyController">
<!-- Display a number in Rupee format -->
<p>{{ price | currency:'₹' }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
// Number to display
$scope.price = 10000;
});
</script>

</body>
</html>

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 5

Aim : Write Angular JS code to read Customer’s data in JSON format available
in a Customers.php file using $http service and display the same on a
webpage in tabular format.
Implementation:

<!DOCTYPE html>
<html ng-app="customerApp">
<head>
<title>Customer Data</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border-bottom: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #333;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
<script>
var customerApp = angular.module('customerApp', []);

customerApp.controller('CustomerController', ['$scope', '$http',

function($scope, $http) {
$scope.customers = [];

$http.get('Customers.php')
.then(function(response) {
$scope.customers = response.data;
}, function(error) {
console.error('Error fetching customer data:', error);
});
}]);
</script>
</head>
<body>
<div class="container" ng-controller="CustomerController">
<h1>Customer Data</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{ customer.name }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.phone }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

<?php
// Define an array of customer data
$customers = array(
array(
"name" => "aaa",
"email" => "[email protected]",
"phone" => "+1234567890"
),
array(
"name" => "bbb",
"email" => "[email protected]",
"phone" => "+1987654321"
),
 array(
"name" => "cccn",
"email" => "[email protected]",
"phone" => "+1122334455"
)
);

// Set the content type header to JSON

header('Content-Type: application/json');

// Output the customer data as JSON

echo json_encode($customers, JSON_PRETTY_PRINT);
?>

Output:

Quiz:

1. Explain the usage of any five services available in Angular JS with suitable examples.

a. $http Service:

The $http service facilitates communication with remote HTTP servers. It allows you to make
HTTP requests and handle responses asynchronously.

Example:

app.controller('MyController', function($scope, $http) {

$http.get('data.json').then(function(response) {

$scope.data = response.data;

});
});

b. $timeout Service:

The $timeout service allows you to execute a function after a specified delay. It's useful for
delaying the execution of code or for scheduling tasks.

Example:

app.controller('MyController', function($scope, $timeout) {

$scope.message = 'Hello, world!';

$timeout(function() {

$scope.message = 'Delayed message!';

}, 2000);

});

c. $location Service:

The $location service provides access to the URL in the browser's address bar. It allows you
to manipulate the URL and retrieve information about the current URL.

Example:

app.controller('MyController', function($scope, $location) {

$scope.currentUrl = $location.absUrl();

});

d. $rootScope Service:

The $rootScope service is the top-level scope accessible to all AngularJS components. It's
used to share data and functions across the entire application.

Example:

app.controller('MyController', function($scope, $rootScope) {

$rootScope.appName = 'My Angular App';

});

e. $log Service:

The $log service provides a simple logging service for AngularJS applications. It allows you to
log messages at different levels (debug, info, warn, error).
 Example:

app.controller('MyController', function($scope, $log) {

$log.debug('Debug message');

$log.info('Info message');

$log.warn('Warning message');

$log.error('Error message');

});
2. Write Angular JS code to display clock on the web page.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Clock Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.clock {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div ng-controller="ClockController">
<p class="clock">{{ currentTime | date: 'HH:mm:ss' }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ClockController', function($scope, $interval) {
// Update time every second
$interval(function() {
$scope.currentTime = new Date();
}, 1000);
});
</script>
 </body>
</html>

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 6

Aim : Create an Angular JS application for validation that will accept Email,
Username and Password as required fields from the user. It will enable submit
button only if all the entered data are valid.

Implementation:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<div class="login-box">
<h2>Login</h2>
<form id="login-form">
<div class="input-container">
<input type="text" id="username" placeholder="Username"
required>
</div>
<div class="input-container">
<input type="email" id="email" placeholder="Email or phone"
required>
</div>
<div class="input-container">
<input type="password" id="password" placeholder="Password"
required>
</div>
<div class="checkbox-container">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<button type="submit" id="submit-btn">Login</button>
</form>
<br>
</div>
</div>

<script src="app.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', function () {
var form = document.getElementById('login-form');
 form.addEventListener('submit', function (event) {
event.preventDefault();

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

var password = document.getElementById('password').value;
var rememberMe = document.getElementById('remember-me').checked;

if (email.trim() === '') {

alert('Please enter your email.');
return;
}

if (password.trim() === '') {

alert('Please enter your password.');
return;
}

console.log('Email:', email);
console.log('Password:', password);
console.log('Remember me:', rememberMe);

});
});

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.login-box {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 350px;
width: 100%;
}

h2 {
margin-bottom: 20px;
color: #333;
}
input[type="email"],
input[type="password"],
input[type="text"]{
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.checkbox-container {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 15px;
}

.checkbox-container input[type="checkbox"] {
margin-right: 10px;
}

button {
background-color: #4285f4;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #357ae8;
}

.links a {
color: #757575;
text-decoration: none;
margin-right: 10px;
}

.links a:hover {
text-decoration: underline;
}
Output:

Quiz:

1. Briefly discuss the usage of all the Input states and Form states with suitable examples.

a. Input States:

- $pristine: Indicates that the user has not interacted with the input field yet.

- $dirty: Indicates that the user has interacted with the input field.

- $valid: Indicates that the input value meets the validation criteria.

- $invalid: Indicates that the input value does not meet the validation criteria.

- $touched: Indicates that the input field has been blurred by the user.

- $untouched: Indicates that the input field has not been blurred by the user.

b. Form States:

- $pristine: Indicates that the form is in its initial state and has not been interacted with.
 - $dirty: Indicates that the form has been interacted with by the user.

- $valid: Indicates that all the inputs in the form are valid.

- $invalid: Indicates that one or more inputs in the form are invalid.

- $submitted: Indicates that the form has been submitted.

2. Discuss various CSS classes present in Angular JS used for these validation states.
 ng-pristine: Applied to input fields and forms that are in a pristine state.
 ng-dirty: Applied to input fields and forms that have been interacted with.
 ng-valid: Applied to input fields and forms that have valid input values.
 ng-invalid: Applied to input fields and forms that have invalid input values.
 ng-touched: Applied to input fields that have been blurred by the user.
 ng-untouched: Applied to input fields that have not been blurred by the user.
 ng-submitted: Applied to forms that have been submitted.

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 7

Aim : Create an example demonstrating the concept of Angular JS Routing.

Date:

Competency and Practical Skills: HTML, Routing in Angular JS

Relevant CO: CO 2

Objectives:

1. To understand how to create Single Page Application (SPA) using Angular JS Routing.
Theory:
 Angular JS concepts to be used
 Routing in Anguar JS : In Angular JS, ngRoute module helps in configuring
routing information to create Single Page Applications.
In order to use ngRoute module, first the developer need to include angular-route.js
file using the following line in <head> section.

<script src=”angular-route.js” />

In the second step, links to load the pages needs to be created. For example,

<a href="#!red">Red</a>

In the third step, ngRoute module must be included as a dependency in application

module using the following line,

var app = angular.module("myApp", ["ngRoute"]);

Now your application has access to the route module, which provides the
$routeProvider object. In the fourth step, use this $routeProvider object to
configure routing details in the Angular JS application. The following code
demonstrates the same,

app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red",
{ templateUrl : "red.htm"
})
.when("/green",
{ templateUrl : "green.htm"
})
.when("/blue",
{ templateUrl :
"blue.htm"
 });
});
In the above code, in when( ) function, two arguments needs to be passed, first is
the target URL and second is the block of statements to execute when target URL is
requested. Here, templateUrl is used to load HTML page as a template.
Now to load the content of resource specified by templateUrl, a view needs to be
created. This can be done using ng-view directive in three different ways.
1. Using ng-view directive can be used as HTML element.

<ng-view></ng-view>

2. Using ng-view directive as an attribute in HTML element.

<div ng-view></div>

3. Using ng-view as a value to the class attribute in HTML element.

<div class="ng-view"></div>

Once, the view is specified, the pages will be loaded in the view when the links are clicked.

Implementation: Create an example demonstrating the concept of Angular JS Routing.

Output:

Conclusion:

Quiz:

1. Write a note on : Routing in Angular JS.

2. State the usefulness of ng-view directive. Explain various ways to use it.

Suggested Reference:

1. https://www.w3schools.com/angular/angular_routing.asp
References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 8

Aim : Study the installation of Node JS and installation of various packages in

Node JS.

Date:

Competency and Practical Skills: Node JS Environment setup

Relevant CO: CO 3

Objectives:

1. To learn installation of Node JS and the required packages in Node JS.

Theory:
 Node JS Installation
First, Node JS installation package needs to be downloaded from,
https://nodejs.org/en
After downloading the package, double click on it to install Node JS in your machine. Follow
the instructions one by one and act accordingly. This will install Node JS with some basic
packages such as, fs, os, net, dns, url, http, https, path etc. in your machine. In order to
install additional packages Node Package Manager (NPM) can be used.
 Node Package Manager
Node Package Manager allows us to install new packages, update existing packages and
uninstall existing packages. All can be done by executing following commands on Command
Line Interface provided by the operating system. Lets have a look at some most commonly
used commands.
 To install new package
locally, use, npm install
package_name
 To install new package
globally, use, npm install -g
package_name
Here -g flag is used to install package globally
 To update existing
package, use, npm update
package_name
 To uninstall already installed
package, use, npm uninstall
package_name
 To get a list of locally installed
packages, use npm list
 To get a list of locally installed packages, use
 npm list -g

Output:
<Include the Screenshots of installing Node JS environment>
<Include the Screenshots of managing packages using NPM>

Conclusion:

Quiz:

1. Write a note on : Routing in Angular JS.

2. State the usefulness of ng-view directive. Explain various ways to use it.

Suggested Reference:

1. https://www.geeksforgeeks.org/15-npm-commands-that-every-node-js-
developer- should-know/

References used by the students:

Assessment :

Node JS installation Understanding of NPM Presentation and report Total

process (3 marks) writing (10 marks)
(4 marks) (3 marks)

Detailed Required Partial

screenshots are screenshots are screenshots are 01
Node JS
given, which are 04 given, which can 03 given, which are to
installation
sufficient to be used to nor sufficient to 02
process
understand the understand the understand the
process process process.
All the commands Sufficient Partial commands
are given with commands are are discussed with
Understanding detailed 03 given with 02 or without output. 01
of NPM information and required
output. information and
output.
Unique Ordinary Weak
documentation (not documentation of documentation of 01
Presentation copied from other 03 given problem 02 given problem to
and report sources) of given with proper without proper 02
writing problem with formatting and formatting and
proper formatting language language
and language.
 Experiment No: 9

Aim : Design a webpage with a file input control to browse appropriate file
and four buttons Read File Synchronously, Read File Asynchronously,
Compress File, Decompress File. Implement the functionality of all four
buttons on the browsed file using Node JS.

Date :

Competency and Practical Skills: File System (fs) module and zlib modules of Node JS
Relevant CO : CO 3
Objectives:
1. To understand to difference between synchronous and asynchronous processes.
2. To understand the functions for compressing and decompressing files and use them.
Theory:
 Node JS concepts to be used
Node JS provides variety of functions to perform various operations on files. To use file
system related functions, file system module must be included in the current code
using require( ) function. For example,
var fs = require("fs");
Now using fs variable, all the functions defined in file system module can be accessed.
 Reading a file synchronously
To read a file synchronously readFileSync( ) function is used. It takes only one
parameter, that is the URL / Name of the file (along with the extension). To display
read data in appropriate format, you need to convert it in specific types. When a file
is being read synchronously, other processes will be blocked till the reading is done.
 Reading a file asynchronously
To read a file asynchronously readFile( ) function is used. It takes two parameters,
first is the URL / Name of the file (along with the extension) and second is the
callback function. To display read data in appropriate format, you need to convert it
in specific types. When a file is being read asynchronously, other processes will
continue their execution in parallel while reading is done.
 Compressing a file
To compress a file first of all you need to read the file. createReadStream( ) function
of file system module allows you to read a file. It takes a single parameter that is
the URL / Name of the file to be read (along with the extension).
After reading a file you can compress it using zlib module’s createGzip( ) function.
 Then you need to write the compressed file, that can be done using
createWriteStream( ) function of file system module, again this function takes a
single parameter, that is the name of the file to be saved with.
In order to combine these function pipe( ) function can be used. It allows us to
provide output of one function as an input to the other one.
 Decompressing a file
Similarly to decompress a file you need to read the file using the same function
previously used createReadStream( ).
To decompress a file , use createGunzip( ) function of zlib module.
And again use createWriteStream( ) function to write a decompressed file.

Implementation : Design a webpage with a file input control to browse appropriate file and
four buttons Read File Synchronously, Read File Asynchronously, Compress File,
Decompress File. Implement the functionality of all four buttons on the browsed file using
Node JS.

Output:

Conclusion:

Quiz:
1. Enlist various functions available in fs module and also state their usages.
2. Explain various functions available in zlib module.

Suggested Reference:
1. https://www.knowledgehut.com/blog/web-development/compression-
decompression- of-data-using-zlib-in-Nodejs#there-are-two-types-of- compression:
%E2%80%AFlossless%E2%80%AFand%E2%80%AFlossy.

References used by the students:

Assessment :
Understanding of Implementation of Presentation and report Total
Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 10

Aim : Create a Node JS application that will allow a user to browse and
upload a file in localhost.

Date :

Competency and Practical Skills: File System (fs), http, and formidable modules of Node JS

Relevant CO : CO 3

Objectives:

1. To understand form processing while uploading any file on server in Node JS.
Theory:

 Node JS concepts to be used

To process the form, formidable module is required. It is not included in the basic Node JS
installation. Developers can install the formidable module using NPM through the following
command,
npm install formidable

In addition to formidable, file system (fs) and http modules will be required.
While designing the interface that will allow a user to browse the file to be uploaded, one
important thing to remember is to use post as a method and specify enctype attribute in
<form> tag, like,

<form action="URL of the page" method="post" enctype="multipart/form-data">

After these modifications, your form will be able to upload the files on the server.
Now as shown bellow, using the IncomingForm( ) method of formidable module, the form
can be referred using a variable.

var form = new formidable.IncomingForm();

After that form variable can be used to parse the request object, fields and files using
parse( ) function. Using appropriate methods of file system (fs) module, the uploaded file
can be stored in specific directory with appropriate name.
Implementation : Design a webpage with a file input control to browse appropriate file and
four buttons Read File Synchronously, Read File Asynchronously, Compress File,
Decompress File. Implement the functionality of all four buttons on the browsed file using
Node JS.

Output:

Conclusion:

Quiz:
1. Enlist and explain various methods of formidable module used to manage uploading files.

Suggested Reference:

1. https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 11

Aim : Create a Node JS application that will allow a user to create new file,
read file, write into a file and delete a file.

Date :

Competency and Practical Skills: File System (fs) module of Node JS

Relevant CO : CO 3

Objectives:

1. To understand the basics of file management in Node JS.

Theory:

 Node JS concepts to be used

To manage files using Node JS applications, file system (fs) module is required. It provides
various functions to manage the files.
Following functions will be used to manage files using Node JS :
1. readFile( ) : It is used to read a file.
2. appendFile( ) : It is used to append content in a file. If file doesn’t exists, new file
will be created.
3. open( ) : If open( ) is used with ‘w’ flag, it will allow user to write into a file. If file
doesn’t exists empty file will be created.
4. writeFile( ) : It is used to write a file. If file doesn’t exists, new file will be created.
5. unlink( ) : It is used to delete a file.
6. rename( ) : It is used to rename an existing file.

Implementation : Create a Node JS application that will allow a user to create new file, read
file, write into a file and delete a file.

Output:
Conclusion:

Practical Quiz:
1. Create Node JS application that will list all the files available in the browsed
directory of a server.
2. Create Node JS application that will allow a user to create new files and rename
existing files using the proper interface

Suggested Reference:

1. https://www.w3schools.com/nodejs/nodejs_filesystem.asp

References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 12

Aim : Study MongoDB environment setup and write Node JS code to

perform insertion operation in Mongo DB.

Date :

Competency and Practical Skills: Operations on MongoDB Database, Node JS code for
insertion in MongoDB Database.

Relevant CO : CO 3, CO 4

Objectives:

1. To understand the installation of MongoDB.

2. To understand how to interact with MongoDB Database through Node JS code.
Theory:

 Introduction to MongoDB
MongoDB is a document database which is often referred to as a non-relational
database. This does not mean that relational data cannot be stored in document
databases. It means that relational data is stored differently. A better way to refer to it
is as a non-tabular database.
MongoDB stores data in flexible documents. Instead of having multiple tables you can
simply keep all of your related data together. This makes reading your data very fast.
You can still have multiple groups of data too. In MongoDB, instead of tables these are
called collections.
MongoDB can be used locally or you can use the cloud platform for the same.

 Node JS concepts to be used

 After successful installation of MongoDB, services of MongoDB will be accessible through
MongoClient object of mongodb package in Node JS.
 connect( ) function of MongoClient will allow a user to create a database, if
database doesn’t exists.
 All the documents of a MongoDB database are maintained in a collection, a
collection is similar to a table in relational databases.
 To create a collection, createCollection( ) function of Database object can be used.
 And collection( ) function of Database object can be used to access the collection.
 In MongoDB the records are inserted in terms of documents, therefore the
object of document(s) to be inserted must be defined before performing insertion
operation.
 To insert a single document insertOne( ) function is used.
  In case of insertion of multiple documents, insertMany( ) function can be used.

Implementation : Study MongoDB environment setup and write Node JS code to

perform insertion operation in Mongo DB.

Output:

Conclusion:

Practical Quiz:
1. Differentiate between Relational Database and Document Database. OR
Differentiate between SQL Database and No SQL Database.
2. Discuss various methods available in Node JS to perform various operations on MongoDB.

Suggested Reference:

1. https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows/
2. https://www.w3schools.com/nodejs/nodejs_mongodb_insert.asp

References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 13

Aim : Write Node JS code to perform deletion operation from Mongo DB.

Date :

Competency and Practical Skills: Operations on MongoDB Database, Node JS code for
deletion in MongoDB Database.

Relevant CO : CO 3, CO 4

Objectives:

1. To understand how to delete documents from a MongoDB Database through Node JS code.
Theory:

 Node JS concepts to be used

 Services of MongoDB will be accessible through MongoClient object of mongodb
package in Node JS.
 connect( ) function of MongoClient will allow a user to connect with a MongoDB database.
 Once the connection with the Database is established, collection( ) function of
Database object can be used to access the collection.
 After that create an object containing query data for a document to be deleted.
 The use deleteOne( ) function of collection to delete single document.
 You can use deleteMany( ) function of collection to delete multiple
documents simultaneously.

Implementation : Write Node JS code to perform deletion operation from Mongo DB.

Output:

Conclusion:
Suggested Reference:

1. https://www.w3schools.com/nodejs/nodejs_mongodb_query.asp
2. https://www.w3schools.com/nodejs/nodejs_mongodb_delete.asp

References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 14

Aim : Write Node JS code to perform selection and updation operation to

select and update specific document in Mongo DB.

Date :

Competency and Practical Skills: Operations on MongoDB Database, Node JS code for
selection and updation of document in MongoDB Database.

Relevant CO : CO 3, CO 4

Objectives:

1. To understand how to search documents from a MongoDB Database and updated

them through Node JS code.
Theory:

 Node JS concepts to be used

 Services of MongoDB will be accessible through MongoClient object of mongodb
package in Node JS.
 connect( ) function of MongoClient will allow a user to connect with the
MongoDB database.
 Once the connection with the Database is established, collection( ) function of
Database object can be used to access the collection.
 After that object containing query data for a document to be selected needs to be created.
 Using find( ) method of the collection object, document can be searched.
 If the document is found then it’s details can be printed / used as per need.
 For updating documents, use updateOne( ) function of collection to update a
single document and use updateMany( ) function of collection, to update multiple
documents.

Implementation : Write Node JS code to perform selection and updation operation to

select and update specific document in Mongo DB.

Output:
Conclusion:

Suggested Reference:

1. https://www.w3schools.com/nodejs/nodejs_mongodb_query.asp
2. https://www.w3schools.com/nodejs/nodejs_mongodb_update.asp

References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)
 Experiment No: 15

Aim : Create a single page application for Library that will allow the librarian
to add a new book and search whether book is currently available in the
library or not.

Date :

Competency and Practical Skills: HTML, CSS, Angular JS, Node JS, MongoDB.

Relevant CO : CO 1, CO 2, CO 3, CO 4, CO 5

Objectives:

1. To learn application development using HTML, CSS, Angular JS and Node JS.

Implementation : Create a single page application for Library that will allow the librarian to
add a new book and search whether book is currently available in the library or not.

Output:

Conclusion:

Suggested Reference:

1. https://www.w3schools.com/html/default.asp
2. https://www.w3schools.com/css/default.asp
3. https://www.w3schools.com/angular/
 4. https://www.w3schools.com/nodejs/
5. https://www.w3schools.com/mongodb/index.php

References used by the students:

Assessment :

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10 marks)
(3 marks) (4 marks) (3 marks)