A Laboratory Manual for

Advanced Web Programming

(3151606)

B.E. Semester 6
(Informaon Technology)

Directorate of Technical Educaon, Gandhinagar,

Gujarat

Shanlal Shah Engineering College, Bhavnagar

Cercate

This is to cerfy that

Mr./Ms. _______________________________________________________

Enrollment No. ___________________ of B.E. Semester 6th Informaon

Technology of this Instute has sasfactorily completed the Praccal / 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 moo of any laboratory/praccal/eld work is for enhancing required skills as well as
creang ability amongst students to solve real me 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 sucient weightage
is given to praccal work. It shows importance of enhancement of skills amongst the students
and it pays aenon to ulize every second of me alloed for praccal 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 eecve implementaon of
competency focused outcome-based curriculum that every praccal 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 dicult to develop through tradional chalk
and board content delivery method in the classroom. Accordingly, this lab manual is designed to
focus on the industry dened relevant outcomes, rather than old pracce of conducng praccal
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 praccal outcomes (objecves). The students will also achieve safety and necessary
precauons to be taken while performing praccal.
This manual also provides guidelines to faculty members to facilitate student centric lab acvies
through each experiment by arranging and managing necessary resources in order that the
students follow the procedures with required safety and necessary precauons to achieve the
outcomes. It also gives an idea that how students will be assessed by providing rubrics.

In the era of digizaon, the demand of Internet based applicaons is increasing day by day.
Advanced Web Programming is one of the required skills for IT Engineer. This focuses on frontend
and back-end design. Aer learning this subject students can advance their career in the eld of
web development.

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

Praccal – 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 applicaons

CO 4 : Study the concept of database using Mongo DB and connect database with applicaon.

CO 5 : Design and implement full featured web applicaon using the concepts of Angular JS and
Node JS.

Sr.
Objecve(s) of Experiment CO1 CO2 CO3 CO4 CO5
No.

1. Design a webpage that reads a Text le 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 Direcves 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
eects.

Modify Praccal 3 and provide a search eld to search

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

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

format available in a Customers.php le using $hp
5. √ √
service and display the same on a webpage in tabular
format.

Create an Angular JS applicaon for validaon that will

accept Email, Username and Password as required elds
6. √
from the user. It will enable submit buon only if all the
entered data are valid.
Advanced Web Programming (3161611)

Create an example demonstrang the concept of Angular

7. √
JS Roung.

Study the installaon of Node JS and installaon of various

8. √
packages in Node JS.

Design a webpage with a le input control to browse

appropriate le and four buons Read File
9. Synchronously, Read File Asynchronously, Compress File, √
Decompress File. Implement the funconality of all four
buons on the browsed le using Node JS.

Create a Node JS applicaon that will allow a user to

10. √
browse and upload a le in localhost.

Create a Node JS applicaon that will allow a user to

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

Study MongoDB environment setup and write Node JS

12. √ √
code to perform inseron operaon in Mongo DB.

Write Node JS code to perform deleon operaon from

13. √ √
Mongo DB.

Write Node JS code to perform selecon and updaon

14. operaon to select and update specic document in √ √
Mongo DB.

Create a single page applicaon for Library that will allow

15. the librarian to add a new book and search whether book √ √ √ √ √
is currently available in the library or not.

Industry Relevant Skills

The following industry relevant competency are expected to be developed in the student by
undertaking the praccal work of this laboratory.

1. HTML/CSS Skills : HTML is used extensively by web developers to build web pages. CSS is
used to implement dierent fonts, colors and layouts in the design of a website.

2. Angular JS Skills : Angular JS is used to create fully funconal dynamic web applicaons.
Advanced Web Programming (3161611)

3. Node JS Skills : Node JS is extensively used to support back end acvies in the development
of dynamic web applicaons.

4. Web Development Skills : Angular JS, Node JS are widely used for the development of web
applicaons along with HTML and CSS.

Guidelines for Faculty members

1. Teacher should provide the guideline with demonstraon of praccal to the students with
all features.

2. Teacher shall explain basic concepts/theory related to the experiment to the students
before starng of each praccal

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 respecve skills and competencies are developed in the students aer
the compleon of the experimentaon.

5. Teachers should give opportunity to students for hands-on experience aer the
demonstraon.

6. Teacher may provide addional knowledge and skills to the students even though not
covered in the manual but are expected from the students by concerned industry.

7. Give praccal assignment and assess the performance of students based on task assigned
to check whether it is as per the instrucons or not.

8. Teacher is expected to refer complete curriculum of the course and follow the guidelines
for implementaon.

Instrucons for Students

1. Students have to write answers / soluons of QUIZ in separate le pages. The quiz of
corresponding praccal must be aached just behind each praccal.
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 examinaon
scheme, skill set to be developed etc.

3. Students shall organize the work in the group and make record of all observaons.

4. Students shall develop maintenance skill as expected by industries.

5. Student shall aempt to develop related hand-on skills and build condence.

6. Student shall develop the habits of evolving more ideas, innovaons, skills etc. apart from
those included in scope of manual.
Advanced Web Programming (3161611)

7. Student shall refer technical magazines and data books.

8. Student should develop a habit of subming the experimentaon work as per the schedule
and s/he should be well prepared for the same.
 Advanced Web Programming (3161611)

Sample Rubrics for Praccal Assessment :

Understanding of Implementaon of Presentaon and report Total

Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)

Excellent Moderate level Problem not

understanding understanding of
understood and
of problem problem and
and 03 relevance with the 02 can't establish the 01
Understanding relevance with the theory clearly relaon with the
of Problem theory clearly understood.
theory.
understood.

Ecient Moderate level of Paral

implementaon implementaon. implementaon 01
Implementaon with poor
with proper 04 Poor naming 03 to
of Problem understanding.
naming convenon
convenon. 02
and understanding

Presentaon Unique Ordinary Weak

documentaon documentaon of
and report documentaon of 01
(not copied from given problem with
given problem
wring other sources) of 03 proper formang 02 to
without proper
given problem with and language 02
formang and
proper formang
language
and language.

Index (Progressive
Assessment Sheet)
Sr. No. Objecve(s) of Experiment Page Date of Date of Assessmen Sign. of Remark
No. perform submissi t Teacher s
ance on Marks with date
Advanced Web Programming (3161611)

Design a webpage that reads a Text le 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 Direcves
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 eects.
Modify Praccal 3 and provide a search eld 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 lter.

Write Angular JS code to read Customer ’s data in

JSON format available in a Customers.php le
5
using $hp service and display the same on a
webpage in tabular format.

Create an Angular JS applicaon for validaon

that will accept Email, Username and Password
6 as required elds from the user. It will enable
submit buon only if all the entered data are
valid.

Create an example demonstrang the concept of

7
Angular JS Roung.
Study the installaon of Node JS and installaon of
8
various packages in Node JS.
Design a webpage with a le input control to
browse appropriate le and four buons Read
File Synchronously, Read File Asynchronously,
9 Compress File, Decompress File. Implement the
funconality of all four buons on the browsed
le using Node JS.

Create a Node JS applicaon that will allow a user

10
to browse and upload a le in localhost.
Create a Node JS applicaon that will allow a
11 user to create new le, read le, write into a le
and delete a le.
Study MongoDB environment setup and write
12 Node JS code to perform inseron operaon in
Mongo DB.
Advanced Web Programming (3161611)

Write Node JS code to perform deleon operaon

13
from Mongo DB.
Write Node JS code to perform selecon and
14 updaon operaon to select and update specic
document in Mongo DB.
Create a single page applicaon 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 le using AJAX.

Date :

Competency and Praccal Skills: HTML, JavaScript, XMLHpRequest Object

Relevant CO : CO 1

Objecves:

1. To understand how AJAX can be used to load dynamic content .

Theory:

•
What is AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language.

It just uses a combinaon of:

1. A browser built-in XMLHpRequest object (to request data from a web server)

2. JavaScript and HTML DOM (to display or use the data)

AJAX allows web pages to be updated asynchronously by exchanging data with a web
server behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.

•
How AJAX works?

Figure 1. Working of AJAX

An event occurs in a web page (the page is loaded, a buon is clicked).

 ▪ An XMLHpRequest object is created by JavaScript.

▪ The XMLHpRequest object sends a request to a web server.

▪ The server processes the request.

▪ The server sends a response back to the web page.

▪ The response is read by JavaScript.

▪ Proper acon (like page update) is performed by JavaScript.

Implementaon : Design a webpage that reads a Text le using AJAX.

Output:
Conclusion:

Quiz:

1. What is AJAX? Enlist the advantages of AJAX.

2. Which type of les can be read using AJAX?

Suggested Reference:

1. hps://www.w3schools.com/xml/ajax_intro.asp

References used by the students:

www.geeksforgeeks.org
 11
Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (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 Direcves and Expressions.

Date:

Competency and Praccal Skills : HTML, Angular JS Direcves

Relevant CO : CO 2

Objecves:

1. To understand HTML Page Structure.

2. To understand how to use Angular JS direcves.

Theory:

• HTML Form : HTML Forms are required, when

▪ For example for registraon you may collect informaon like user name , email , contact
number, address etc.

▪ A form will take input from the site visitor and then will post it to a back-end applicaon
such as CGI, ASP Script or PHP script etc.

▪ The back-end applicaon will perform required processing on the passed data based on
dened business logic inside the applicaon.

▪ There are various form elements available like text elds, textarea elds, drop-down menus,
radio buons, checkboxes, etc.

▪ The HTML <form> tag is used to create an HTML form

Syntax :

<form acon = "Script URL" method = "GET|POST">

form elements like input, textarea etc.

</form>
 11
Checkbox Checkboxes are used when
<input type = "checkbox" name =
more than one opon is
"maths" value = “maths"> Maths
required to be selected.
<input type = "checkbox" name =
"physics" value = “physics"> name =
"password" />

Radio Buon Radio buons are used

when out of many opons,
just one opon is required <input type = "radio" name =
to be selected. "subject" value = "maths"/> Maths

<input type = "radio" name =

"subject" value = "physics"/> Physics

Drop Down Box provides opon to list

down various opons in <select name = "dropdown">
the form of drop down list,
from where a user can <option value = "Maths"
select one or more selected>Maths</option>
opons.
<option value =
"Physics">Physics</option>

</select>

File Upload It allows site users to

upload a le to website.it is <input type = "file" name =
also known as le select
"fileupload" accept = "image/*" />
box.

Submit Buon This creates a buon that

automacally submits a
form. <input type = "submit" name =
"submit" value = "Submit" />
 11
Reset Buon This creates a buon that
automacally resets form
controls to their inial
<input type = "reset" name = "reset"
values.
value = "Reset" />

Buon
<input type = "button" name = "ok"
This creates a buon that is
value = "OK" />
used to trigger a clientside
script when the user clicks
that buon.

Image Buon This creates a clickable

<input type = "image" name =
buon but we can use an
"imagebutton" src =
image as background of
"/html/images/logo.png" />
the buon.

Hidden Control <input type = "hidden" name =

Hidden form controls are
"pagename" value = "10" />
used to hide data inside
the page which later on can
be pushed to the server.
This control hides inside
the code and does not
appear on the actual page.

• Angulr JS Concepts to be used

To use Angular JS in web pages, angular.min.js le must be included in the current page using
<script src=”angular.min.js” /> tag in head secon of the web page.

▪ ng-model : This direcve is used to bind the values of HTML controls to a variable.

▪ ng-bind : This direcve is used to bind HTML elements to variables. It is generally used to
display the values of variables in the HTML elements like <p> or <span>.

▪ Angular JS Expression : Angular JS expressions are used to print the values of the variables
on the page. An Angular JS expression starts with {{ and ends with }}.
- For example, {{ rst_name + “ “ + last_name }} will print rst_name and last_name separated
by space.
 11
Implementaon: 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 Direcves and Expressions.
11
11
 11

Output:

Conclusion:

Quiz:

1. Enlist ve most commonly used Angular JS direcves and state their usages.
 11
2. Explain various ways to display the values of the variables on the page with suitable example.

Suggested References:

1. hps://www.w3schools.com/angular/angular_direcves.asp

2. hps://www.w3schools.com/angular/angular_model.asp

3. hps://www.w3schools.com/angular/angular_databinding.asp

References used by the students:

www.geeksforgeeks.org

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
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 eects.

Date:

Competency and Praccal Skills: HTML, CSS, Use of MVC in Angular JS Relevant

CO: CO 1, CO 2

Objecves:

1. To understand about dening objects in Angular JS.

2. To use objects dened in Angular JS and display it’s informaon in HTML table.
Theory:

• MVC Architecture
Model View Controller or MVC as it is popularly called, is a soware design paern for developing
web applicaons. A Model View Controller paern is made up of the following three parts, ▪ Model
− It is the lowest level of the paern responsible for maintaining data.

▪ View − It is responsible for displaying all or a poron of the data to the user.

▪ Controller − It is a soware Code that controls the interacons between the Model and
View.
Figure 2. MVC Architecture
 11

MVC is popular because it isolates the applicaon logic from the user interface layer and supports
separaon of concerns. The controller receives all requests for the applicaon and then works with
the model to prepare any data needed by the view. The view then uses the data prepared by the
controller to generate a nal presentable response. The MVC abstracon can be graphically
represented as Figure 2.

• Angular JS concepts to be used

▪ To dene an Angular JS applicaon scope ng-app direcve must be used.

▪ Aer dening an Angular JS applicaon, it can be bind with a controller using ng-controller
direcve.

▪ To dene controller, rst an applicaon module must be dened in <script> tag using
var app = angular.module('myApp', [ ]);
Here angular.module ( ) funcon is used to dene applicaon module. Where myApp is
the name of applicaon and [ ] (empty square brackets) are used to menon no addional
/ dependant modules are needed / used.

▪ Then using app variable controller can be dened as

app.controller('myCtrl', funcon($scope) {

$scope.students=[

{enrolment:'301',name:'Rajesh',semester:'3',branch:'I.T.'},

{enrolment:'501',name:'Ishwar',semester:'5',branch:'Producon'},

{enrolment:'701',name:'Ronit',semester:'7',branch:'Mechanical'}];

});
Applicaon controller is dened using app variable along with controller( ) funcon.
Controller( ) funcon takes two arguments, rst is the name of controller, which is myCtrl
in our case and second is the callback funcon with a single variable that is $scope. $scope
is an object, that can be used to declare variables and objects within the controller and it
is accessible throughout the controller.

As it can be seen in the above code, students is an array of objects dened using $scope.
Each object contains various values including enrolment, name, semester and branch.

▪ A table must be created using <table> tag.

▪ Now to create separate rows for each objects in a table, the following syntax cab be used.
<tr ng-repeat="x in students">
Here, ng-repeat direcve will iterate over all the elements of students (array of objects)
and separate rows will be created for each object. Each me object will be accessed using
 11
x and you will be able to print it’s variables using expression, such as, {{ x.enrolment } in
individual cells of a table row.

• HTML Table Tag

▪ HTML tables allow web developers to arrange data into rows and columns.

▪ The <table> tag denes an HTML table.

▪ table row is dened with a <tr> tag.

▪ table header is dened with a <th> tag.

▪ text in <th> elements are bold and centered.

▪ Each table data/cell is dened with a <td>.

▪ By default, the text in <td> elements are regular and le-aligned.

▪ colspan aribute is used to make a cell span more than one column.

▪ rowspan ariute is used to make a call span more than one row.

▪ cellpadding represents the distance between cell borders and the content within a cell.

▪ The cellspacing aribute denes space between table cell

Implementaon: Create your class me table using table tag, experiment with rowspan, colspan,
cellspacing and cellpadding aributes.
11
11
 11

Output:

Conclusion:

Quiz:

1. Write a note on : MVC Architecture.

2. Explain the usage of ng-repeat, ng-controller direcves with suitable example.

Suggested Reference:

1. hps://www.w3schools.com/angular/angular_direcves.asp

2. hps://www.w3schools.com/angular/angular_tables.asp

References used by the students:

 11
hps://www.javaguides.net

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 4

Aim : Modify Praccal 3 and provide a search eld 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 lter.

Date:

Competency and Praccal Skills: HTML, CSS, MVC in Angular JS, Filters in Angular JS Relevant

CO: CO 1, CO 2

Objecves:

1. To understand about dening objects in Angular JS.

2. To use objects dened in Angular JS and display it’s informaon in HTML table.

3. To use lter to lter the records.

Theory:

• Angular JS concepts to be used

▪ Filters in Angular JS : Filters in Angular JS are used to format / transform the data. Angular JS
provides the following lters.

- currency : It is used to format a number to a currency format.

- date : It is used to format a date to a specied format.

- lter : It is used to select a subset of items from an array.

- json : It formats an object to a JSON string.

- limitTo : It limits an array/string, into a specied number of elements/characters.

- lowercase : It is used to format a string to lower case.

- number : It formats a number to a string.

- orderBy : It orders / sorts an array by an expression.

- uppercase : It is used to format a string to upper case.

For example,
<ul>
 <li ng-repeat="x in names | lter : 'i'">

{{ x }}

</li>

</ul
 11
The above code will display an unordered list of items from names array consisng ‘i' as a
character.
<ul>

<li ng-repeat="x in persons | orderBy:'country'">

{{ x.name + ', ' + x.country }}

</li>
</ul>
Similarly the above code will display the name and country of all the elements of persons
array separated by comma in an unordered list, and this list will be sorted by value of country
variable of each object.

▪ Dening funcons in Angular JS

In Angular JS funcons can be dened inside the controller using $scope object. The general
syntax to dene a funcon is,
$scope.funcon_name = funcon(value1, value2, ...) {
the func
}

Implementaon: Modify Praccal 3 and provide a search eld 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 lter.
11
11
 210430116055

Output:

Conclusion:

Quiz:
 11
1. Discuss various lters present in Angular JS with suitable examples.

2. Write Angular JS code to display numbers in Rupee format with Rupee symbol.

Suggested Reference:

1. hps://www.w3schools.com/angular/angular_lters.asp

References used by the students:

hps://www.javaguides.net Assessment
:
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 5

Aim : Write Angular JS code to read Customer’s data in JSON format available in a
Customers.php le using $hp service and display the same on a webpage in
tabular format.

Date:

Competency and Praccal Skills: HTML, JSON (JavaScript), PHP, Services in Angular JS Relevant

CO: CO 1, CO 2

Objecves:

1. To understand the use of services in Angular JS.

Theory:

• Angular JS concepts to be used

▪ Services in Anguar JS : In AngularJS, a service is a funcon, or object, that is available for,

and limited to, your AngularJS applicaon. AngularJS has more than 30 built-in services.
Some of the most commonly used services are,

- $locaon : It is used to get the locaon of the current webpage (URL).

- $hp : It is used to request the resources available on the server and lets your
applicaon handle the response.

- $meout : It is similar to setTimeout( ) funcon of JavaScript. It is used to perform an

acvity when me outs.

- $interval : It is similar to setInterval( ) funcon of JavaScript. It is used to perform some

task repeatedly at some interval.

▪ $hp Service : The AngularJS $hp service makes a request to the server, and returns a
response. The following code demonstrates the general use of $hp service.
<script>

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

app.controller('myCtrl', funcon($scope, $hp) {
$hp.get("MyPage.php").then(funcon(response) {
$scope.myData = response.data.records;
});
});

</script>
 11
Here an object of $hp service needs to be passed in the callback funcon of controller.
Which can further be used to request the resources available on the server. Here it tries to
access MyPage.php. If resource request is handled then the response will be available in
response variable and that can be used to further process the output as per the user’s
need.

Implementaon: Write Angular JS code to read Customer’s data in JSON format available in a
Customers.php le using $hp service and display the same on a webpage in tabular format.

Output:

Conclusion:

Quiz:

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

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

Suggested Reference:

1. hps://www.w3schools.com/angular/angular_services.asp
 11
2. hps://www.w3schools.com/angular/angular_hp.asp

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11

<body ng-app="">

<form name="Form1">

Name: <input name="Name" ng-model="Name" required>

<span ng-show="Form1.Name.$touched && myForm.myName.$invalid">The name

is required.</span>

</form>

</body>

The above code shows an example of using these states / ags. In this code, an input eld Name
of Form1 is validated using Form1.Name.$touched and myForm.myName.$invalid. If the input
control is modied then the value of Form1.Name.$touched will be true, otherwise false.
Similarly if the input control’s content is empty then the value of myForm.myName.$invalid will
be true, otherwise false.

Here, ng-show direcve is used to show / hide the <span> element based on the result of the
ags. Thus, <span> element will be visible only if both the states / ags are true, means the
input control is modied and empty.

Similarly ng-enabled and ng-disabled direcves can be used to enable or disable the controls in
the form. Both of these are assigned boolean values.

Implementaon: Create an Angular JS applicaon for validaon that will accept Email, Username
and Password as required elds from the user. It will enable submit buon only if all the entered
data are valid.
 210430116055
Output:

Figure 1. Filled the value

Figure 2. Show the error

Figure 3. Show Password is required error

 11

Conclusion:

Quiz:

1. Briey discuss the usage of all the Input states and Form states with suitable examples.

2. Discuss various CSS classes present in Angular JS used for these validaon states.

Suggested Reference:

1. hps://www.w3schools.com/angular/angular_validaon.asp

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 7

Aim : Create an example demonstrang the concept of Angular JS Roung.

Date:

Competency and Praccal Skills: HTML, Roung in Angular JS

Relevant CO: CO 2

Objecves:

1. To understand how to create Single Page Applicaon (SPA) using Angular JS Roung.
Theory:

• Angular JS concepts to be used

▪ Roung in Anguar JS : In Angular JS, ngRoute module helps in conguring roung informaon
to create Single Page Applicaons.

In order to use ngRoute module, rst the developer need to include angular-route.js le
using the following line in <head> secon.
<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 applicaon module
using the following line,
var app = angular. module "myApp", ["ngRoute"]);

Now your applicaon has access to the route module, which provides the $routeProvider
object. In the fourth step, use this $routeProvider object to congure roung details in the
Angular JS applicaon. The following code demonstrates the same,
app. ($routeProvider) {
 cong funcon
. uteProvider
en("/" ,{
in.htm"
}) mplateUrl :
.
en( templa ed", {
.htm"
})
.
en( templa reen", {
en.htm"
})
.
when( lue", {
 11
templateUrl : "blue.htm"
});
});
In the above code, in when( ) funcon, two arguments needs to be passed, rst 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 specied by templateUrl, a view needs to be created.
This can be done using ng-view direcve in three dierent ways.

1. Using ng-view direcve can be used as HTML element.

<ng-view></ng-view>

2. Using ng-view direcve as an aribute in HTML element.

<div ng-view></div>

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

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

Once, the view is specied, the pages will be loaded in the view when the links are clicked.

Implementaon: Create an example demonstrang the concept of Angular JS Roung.

Output:

Conclusion:

Quiz:

1. Write a note on : Roung in Angular JS.

2. State the usefulness of ng-view direcve. Explain various ways to use it.

Suggested Reference:
 11
1. hps://www.w3schools.com/angular/angular_roung.asp

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 8

Aim : Study the installaon of Node JS and installaon of various packages in

Node JS.

Date:

Competency and Praccal Skills: Node JS Environment setup

Relevant CO: CO 3

Objecves:

1. To learn installaon of Node JS and the required packages in Node JS.

Theory:

• Node JS Installaon
First, Node JS installaon package needs to be downloaded from,

hps://nodejs.org/en

Aer downloading the package, double click on it to install Node JS in your machine. Follow the
instrucons one by one and act accordingly. This will install Node JS with some basic packages such
as, fs, os, net, dns, url, hp, hps, path etc. in your machine. In order to install addional packages
Node Package Manager (NPM) can be used.

• Node Package Manager

Node Package Manager allows us to install new packages, update exisng packages and uninstall
exisng packages. All can be done by execung following commands on Command Line Interface
provided by the operang 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 ag is used to install package globally

▪ To update exisng 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:
Screenshots of installing Node JS environment:

Screenshots of managing packages using NPM

 11
Conclusion:

Quiz:

1. Write a note on : Roung in Angular JS.

2. State the usefulness of ng-view direcve. Explain various ways to use it.

Suggested Reference:

1. hps://www.geeksforgeeks.org/15-npm-commands-that-every-node-js-developershould-know/

References used by the students:

 11
Assessment :
Node JS installaon Understanding of NPM Presentaon and report Total
process (3 marks) wring (10 marks)
(4 marks) (3 marks)

Detailed Required Paral screenshots

are given, which
screenshots screenshots are 01
are nor sucient
Node JS given, are 04 given, which can 03 to understand the to
are
installaon which be used to process. 02
to
process the
sucient understand the
understand process
process

All the commands Sucient Paral commands

are discussed with
are given with commands are
or without output.
detailed 03 given with 02 01
required
informaon and
Understanding informaon
output.
output. and
of NPM

Unique Ordinary Weak

documentaon of
documentaon (not documentaon of 01
given problem
copied from other given problem
Presentaon 03 with proper 02 to
sources) of given without proper
formang and 02
and report problem with formang and
language
proper formang language
wring
and language.
 11
Experiment No: 9

Aim : Design a webpage with a le input control to browse appropriate le and
four buons Read File Synchronously, Read File Asynchronously, Compress File,
Decompress File. Implement the funconality of all four buons on the browsed
le using Node JS.

Date :

Competency and Praccal Skills: File System (fs) module and zlib modules of Node JS
Relevant CO : CO 3 Objecves:

1. To understand to dierence between synchronous and asynchronous processes.

2. To understand the funcons for compressing and decompressing les and use them.
Theory:

• Node JS concepts to be used

Node JS provides variety of funcons to perform various operaons on les. To use le system
related funcons, le system module must be included in the current code using require( )
funcon. For example, var fs = require("fs");

Now using fs variable, all the funcons dened in le system module can be accessed.

▪ Reading a le synchronously

To read a le synchronously readFileSync( ) funcon is used. It takes only one parameter,
that is the URL / Name of the le (along with the extension). To display read data in
appropriate format, you need to convert it in specic types. When a le is being read
synchronously, other processes will be blocked ll the reading is done.

▪ Reading a le asynchronously

To read a le asynchronously readFile( ) funcon is used. It takes two parameters, rst is
the URL / Name of the le (along with the extension) and second is the callback funcon.
To display read data in appropriate format, you need to convert it in specic types. When
a le is being read asynchronously, other processes will connue their execuon in parallel
while reading is done.

▪ Compressing a le

To compress a le rst of all you need to read the le. createReadStream( ) funcon of le
system module allows you to read a le. It takes a single parameter that is the URL / Name
of the le to be read (along with the extension).

Aer reading a le you can compress it using zlib module’s createGzip( ) funcon.
 11
Then you need to write the compressed le, that can be done using createWriteStream( )
funcon of le system module, again this funcon takes a single parameter, that is the
name of the le to be saved with.

In order to combine these funcon pipe( ) funcon can be used. It allows us to provide
output of one funcon as an input to the other one.

▪ Decompressing a le

Similarly to decompress a le you need to read the le using the same funcon previously
used createReadStream( ).

To decompress a le , use createGunzip( ) funcon of zlib module.

And again use createWriteStream( ) funcon to write a decompressed le.

Implementaon : Design a webpage with a le input control to browse appropriate le and four
buons Read File Synchronously, Read File Asynchronously, Compress File, Decompress File.
Implement the funconality of all four buons on the browsed le using Node JS.
11
11
11
Output:
 11

Conclusion:

Quiz:

1. Enlist various funcons available in fs module and also state their usages.

2. Explain various funcons available in zlib module.

Suggested Reference:

1. hps://www.knowledgehut.com/blog/web-development/compression-decompressionof-data-
using-zlib-in-Nodejs#there-are-two-types-
ofcompression:%E2%80%AFlossless%E2%80%AFand%E2%80%AFlossy.

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (3 marks) (10 marks)
(3 marks) (4 marks)
 11
Experiment No: 10

Aim : Create a Node JS applicaon that will allow a user to browse and upload a le
in localhost.

Date :

Competency and Praccal Skills: File System (fs), hp, and formidable modules of Node JS

Relevant CO : CO 3

Objecves:

1. To understand form processing while uploading any le 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
installaon. Developers can install the formidable module using NPM through the following
command,
npm install formidable

In addion to formidable, le system (fs) and hp modules will be required.

While designing the interface that will allow a user to browse the le to be uploaded, one
important thing to remember is to use post as a method and specify enctype aribute in <form>
tag, like,
<form acon="URL of the page" method="post" enctype="mulpart/form-data">

Aer these modicaons, your form will be able to upload the les 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();

Aer that form variable can be used to parse the request object, elds and les using parse( )
funcon. Using appropriate methods of le system (fs) module, the uploaded le can be stored in
specic directory with appropriate name.
 11
Implementaon : Design a webpage with a le input control to browse appropriate le and four
buons Read File Synchronously, Read File Asynchronously, Compress File, Decompress File.
Implement the funconality of all four buons on the browsed le using Node JS.

Output:

Conclusion:

Quiz:

1. Enlist and explain various methods of formidable module used to manage uploading les.

Suggested Reference:

1. hps://www.w3schools.com/nodejs/nodejs_uploadles.asp

References used by the students:

 11

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 11

Aim : Create a Node JS applicaon that will allow a user to create new le, read le,
write into a le and delete a le.

Date :

Competency and Praccal Skills: File System (fs) module of Node JS

Relevant CO : CO 3

Objecves:

1. To understand the basics of le management in Node JS.

Theory:

• Node JS concepts to be used

To manage les using Node JS applicaons, le system (fs) module is required. It provides various
funcons to manage the les.

Following funcons will be used to manage les using Node JS :

1. readFile( ) : It is used to read a le.

2. appendFile( ) : It is used to append content in a le. If le doesn’t exists, new le will be
created.

3. open( ) : If open( ) is used with ‘w’ ag, it will allow user to write into a le. If le doesn’t
exists empty le will be created.

4. writeFile( ) : It is used to write a le. If le doesn’t exists, new le will be created.

5. unlink( ) : It is used to delete a le.

6. rename( ) : It is used to rename an exisng le.

Implementaon : Create a Node JS applicaon that will allow a user to create new le, read le,
write into a le and delete a le.
11
11
Output:

Fig 1. User creates an empty file

Fig 2. User read 1a.js le

Fig 3. Write content to le
 11
Fig 4. Delete le and Exit

Conclusion:

Praccal Quiz:

1. Create Node JS applicaon that will list all the les available in the browsed directory of a
server.

2. Create Node JS applicaon that will allow a user to create new les and rename exisng
les using the proper interface

Suggested Reference:

1. hps://www.w3schools.com/nodejs/nodejs_lesystem.asp

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (3 marks) (10 marks)
(3 marks) (4 marks)
 11
Experiment No: 12

Aim : Study MongoDB environment setup and write Node JS code to perform
inseron operaon in Mongo DB.

Date :

Competency and Praccal Skills: Operaons on MongoDB Database, Node JS code for inseron in

MongoDB Database. Relevant CO : CO 3, CO 4

Objecves:

1. To understand the installaon of MongoDB.

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

Theory:

• Introducon to MongoDB
MongoDB is a document database which is oen referred to as a non-relaonal database. This
does not mean that relaonal data cannot be stored in document databases. It means that
relaonal data is stored dierently. A beer way to refer to it is as a non-tabular database.

MongoDB stores data in exible documents. Instead of having mulple tables you can simply
keep all of your related data together. This makes reading your data very fast.

You can sll have mulple groups of data too. In MongoDB, instead of tables these are called
collecons.

MongoDB can be used locally or you can use the cloud plaorm for the same.

• Node JS concepts to be used

▪ Aer successful installaon of MongoDB, services of MongoDB will be accessible through

MongoClient object of mongodb package in Node JS.

▪ connect( ) funcon 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 collecon, a collecon is

similar to a table in relaonal databases.

▪ To create a collecon, createCollecon( ) funcon of Database object can be used.

▪ And collecon( ) funcon of Database object can be used to access the collecon.

▪ In MongoDB the records are inserted in terms of documents, therefore the object of
document(s) to be inserted must be dened before performing inseron operaon.
 11
▪ To insert a single document insertOne( ) funcon is used.

▪ In case of inseron of mulple documents, insertMany( ) funcon can be used.

Implementaon : Study MongoDB environment setup and write Node JS code to perform inseron
operaon in Mongo DB.

Output:

Conclusion:

Praccal Quiz:

1. Dierenate between Relaonal Database and Document Database. OR Dierenate

between SQL Database and No SQL Database.

2. Discuss various methods available in Node JS to perform various operaons on MongoDB.

Suggested Reference:
 11
1. hps://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows/

2. hps://www.w3schools.com/nodejs/nodejs_mongodb_insert.asp

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 13

Aim : Write Node JS code to perform deleon operaon from Mongo DB.

Date :

Competency and Praccal Skills: Operaons on MongoDB Database, Node JS code for deleon in

MongoDB Database. Relevant CO : CO 3, CO 4

Objecves:

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( ) funcon of MongoClient will allow a user to connect with a MongoDB database.

▪ Once the connecon with the Database is established, collecon( ) funcon of Database
object can be used to access the collecon.

▪ Aer that create an object containing query data for a document to be deleted.

▪ The use deleteOne( ) funcon of collecon to delete single document.

▪ You can use deleteMany( ) funcon of collecon to delete mulple documents

simultaneously.

Implementaon : Write Node JS code to perform deleon operaon from Mongo DB.
11
 11

Output:
 11

Conclusion:

Suggested Reference:

1. hps://www.w3schools.com/nodejs/nodejs_mongodb_query.asp

2. hps://www.w3schools.com/nodejs/nodejs_mongodb_delete.asp

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 14

Aim : Write Node JS code to perform selecon and updaon operaon to select and
update specic document in Mongo DB.

Date :

Competency and Praccal Skills: Operaons on MongoDB Database, Node JS code for selecon and
updaon of document in MongoDB Database.

Relevant CO : CO 3, CO 4

Objecves:

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( ) funcon of MongoClient will allow a user to connect with the MongoDB
database.

▪ Once the connecon with the Database is established, collecon( ) funcon of Database
object can be used to access the collecon.

▪ Aer that object containing query data for a document to be selected needs to be created.

▪ Using nd( ) method of the collecon object, document can be searched.

▪ If the document is found then it’s details can be printed / used as per need.

▪ For updang documents, use updateOne( ) funcon of collecon to update a single

document and use updateMany( ) funcon of collecon, to update mulple documents.

Implementaon : Write Node JS code to perform selecon and updaon operaon to select and
update specic document in Mongo DB.
11
11
Output:

Conclusion:

Suggested Reference:

1. hps://www.w3schools.com/nodejs/nodejs_mongodb_query.asp

2. hps://www.w3schools.com/nodejs/nodejs_mongodb_update.asp

References used by the students:

 11
Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)
 11
Experiment No: 15

Aim : Create a single page applicaon 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 Praccal Skills: HTML, CSS, Angular JS, Node JS, MongoDB. Relevant

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

Objecves:

1. To learn applicaon development using HTML, CSS, Angular JS and Node JS.

Implementaon : Create a single page applicaon 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. hps://www.w3schools.com/html/default.asp

2. hps://www.w3schools.com/css/default.asp
 11
3. hps://www.w3schools.com/angular/

4. hps://www.w3schools.com/nodejs/

5. hps://www.w3schools.com/mongodb/index.php

References used by the students:

Assessment :
Understanding of Implementaon of Presentaon and report Total
Problem Problem wring (10 marks)
(3 marks) (4 marks) (3 marks)