FACULTY OF ENGINEERING & TECHNOLOGY

Effective from Academic Batch: 2022-23

Programme: Bachelor of Technology (Information Technology)

Semester: VI

Course Code: 202046701

Course Title: Advanced Web Development

Course Group: Professional Elective Course -II

Course Objectives: On completion of the course, the students will become familiar with client-server
architecture and able to develop web application using JavaScript based frameworks on client and
server side both. Students will learn the advanced web programming concepts related to MEAN stack
development.

Teaching & Examination Scheme:

Contact hours per week Course Examination Marks (Maximum / Passing)
Credits Theory J/V/P*
Lecture Tutorial Practical Total
Internal External Internal External
3 0 2 4 50/18 50/17 25/9 25/9 150/53
* J: Jury; V: Viva; P: Practical

Detailed Syllabus:
Sr. Contents Hours
1 Introduction to CSS and Java Script: 04
CSS rule, selectors, where to add them, Responsive design, CSS frameworks;
Java Script syntax, Java script inbuilt objects, Error handling, even handling, DOM,
AJAX
2 Introduction to AngularJS: 04
Introduction to AngularJS, MVC Architecture, Basic concepts, Simple application,
Number and String expression, Object binding and expression, Working with Arrays,
Data binding, Understanding Controllers, $scope object, Adding behavior to $scope
object, Passing parameters to method, Arrays as member in controller scope, Nested
controllers and scope inherited, Multiple Controllers and their scope
3 AngularJS Filters, Services, Modules, Directives: 08
Filters: What is filter, Built-in Filters (Uppercase, Lowercase, Currency, Limit,
OrderBy, Filter, Date, Number), Creating Custom Filters; Services: What is service,
Built-in services ($http, $timeout, $interval), Creating Custom Services, Injecting
Dependencies in Services, using service inside a filter; Modules: Why module,
Module loading, Creating Custom Module; Directives: What is directive, Built-in
Directives (ng-repeat, ng-options, ng-disabled, ng-show, ng-hide), Event Directives
(ng-click, ng-change, ng-mouseover, ng-keyup etc. ), ng-include directive, Creating
custom directive
4 AngularJS - Forms, Validation and Routing 05
Using Simple form, working with different input elements, Validation of inputs, Form
Events CSS Classes, Creating Custom Validation, Introduction to Single Page
Application (SPA), HTML template creation, use of routing to make SPA, AJAX using
AngularJS, AngularJS Animation
5 NodeJS: 07
Introduction to NodeJS, Advantages of NodeJS, Traditional Web Server Model,
NodeJS Process Model, Modules in NodeJS, Creating Custom Modules, HTTP
Module, Creating Web Server, Read the Query String, File System Module, URL
Module, Buffer, Streams
Node Package Manager (NPM), Installing packages locally and globally, Events in
NodeJS, Events Module, Event Loop, File Upload, Nodemailer Module, Serving Static
Files, Template Engine, [Link] or Express, Configuring Routes in Express,
Cookies, Session, Networking with NodeJS, NodeJS REST API
6 MongoDB: 05
NoSQL Database, Advantages of NoSQL, Types of NoSQL Databases, what is
MongoDB, Need of MongoDB, Advantages of MongoDB, RDBMS vs NoSQL, Installing
MongoDB, Creating of Database, Collection, Document, Dropping of Database,
Collection and Document, Inserting and Updating of Document, Querying of
Document, Projection, Limiting Records, Sorting Records, Indexing, Aggregation
7 NodeJS and MongoDB: 07
Connect NodeJS with MongoDB, Various operations on database of MongoDB like
Insert, Find, Query, Sort, Delete, Update, Limit, Join and Drop using NodeJS.
Total 40

List of Practicals / Tutorials:

1 Write HTML/Javascript code for the following:
1. When name of the basic color is entered in the textbox and leave the textbox then it
should take that color as background color.
2. Until you enter the complete mobile number (means less than 10 digits) in the textbox,
it should take red color as background and when it becomes complete then show the
alert message.
Write a Javascript code to create user defined object Car with carModelName, carColor,
carPrice, carSpeed properties and with displaySpeed(s),increaseSpeed(s) and
DescreaseSpeed(s) as methods.
2 Write HTML/Javacript code to change the background color of div element periodically. For
example, at every 30 seconds it changes the background color. Hint: use SetInterval function.
Write HTML/Javascript code to make an animation for displaying set of images. It takes
frequency (in milliseconds) of image repetition as input from the user. Also, it shows button
to start/stop (single button which toggles) the animation.
3 Write AJAX script to display the student details like Enrollment number and Name (in tabular
form) from XML file stored on the same web server. After displaying student details, when
enrolment number is clicked then it fetches city, address, pincode and other details for the
student.
4 Design Order Form with a total price updated in real time, which contains name of five
products and their prices. Create a bill amount for all the products and calculate GST on the
billing amount and display total amount. Use AngularJS.
5 Write AngularJS filter to check whether the entered number in the textbox is prime or not.
6 Write AngularJS service which makes the square of the number when it is called.
7 Write AngularJS service which makes the addition/subtraction of two numbers entered in
textboxes when Add/Sub button is clicked.

Enter Number A:
Enter Number B:

Add Sub
Result: ????
8 Write AngularJS script to read the JSON data (Student’s enrolment number and name) from
the server and populate the dropdown list with enrolment number.
9 Write AngularJS validation script to validate the password and confirm password. Password
must contain at least four and maximum 10 characters and must start with number only.
Content of password and confirm password box must be the same otherwise it should display
the appropriate message.
10 Write AngularJS validation script to validate the registration form and submit button gets
enabled if all the validations are passed successfully. The form contains fields like First name,
last name, email address, mobile number, sex (radio button) and department (select box).
11 Write AngularJS script to implement single page web application. Make your own website
which includes the pages like about you, education, hobbies, contact me etc.
12 Write AngularJS script to implement custom directive (reusable component) for calculator
with operations like add, subtraction and multiplication.
13 Write NodeJS code to implement web server to serve the different content based on URL.
14 Write NodeJS code to provide the file upload facility to the user. It also imposes the restriction
of file size to be uploaded.
15 Create a simple web application using AngularJS, NodeJS and MongoDB. For example, you
may design Library Management System, Hospital Management System etc. with minimal
functionalities.
 Reference Books:
1 Angularjs in Action by Ruebbelke, Wiley Publication
2 [Link] in Action by Alex Young, Bradley Meck, Mike Cantelon, Tim Oxley, Marc Harter, T. J.
Holowaychuk, Nathan Rajlich, Wiley Publication
3 [Link] in Practice by Alex Young, Marc Harter, Ben Noordhuis Wiley Publication
4 MongoDB Basics, David HowsPeter MembreyEelco Plugge, Apress Publication

Supplementary learning material:

1 NPTEL - Swayam Courses
2 [Link]

Pedagogy:
● Direct classroom teaching
● Audio Visual presentations/demonstrations
● Assignments/Quiz
● Continuous assessment
● Interactive methods
● Seminar/Poster Presentation
● Industrial/ Field visits
● Course Projects

Suggested Specification table with Marks (Theory) (Revised Bloom’s Taxonomy):

Distribution of Theory Marks in % R: Remembering; U: Understanding;
R U A N E C A: Applying;
15% 20% 25% 10% 10% 20% N: Analyzing; E: Evaluating; C: Creating
Note: This specification table shall be treated as a general guideline for students and teachers. The actual distribution of
marks in the question paper may vary slightly from above table.

Course Outcomes (CO):

Sr. Course Outcome Statements %weightage
CO-1 An ability to learn the concepts of client-side programming. 10
CO-2 Understand the concepts of AngularJS to extend basic HTML features 30
CO-3 Learn Node JS framework to build dynamic server-side applications 30
CO-4 Study the concept of NoSQL database and database connection with web 20
application.
CO-5 Design and implement full featured web application using MEAN stack 10
development tools.

Curriculum Revision:
Version: 2.0
Drafted on (Month-Year): June-2022
Last Reviewed on (Month-Year): -
Next Review on (Month-Year): June-2025