ITE1002 Web Technologies L T P J C

2 0 2 0 3
Pre-requisite CSE1001 Syllabus version
1.1
Course Objectives:
 To understand the web architecture and web languages.
 To program for web client and web server objects.
 To understand web development environment and methodology

Expected Course Outcome:

1) Implement interactive and responsive web pages using HTML and CSS.
2) Use Java script language to transfer data and add interactive components to web pages.
3) Develop a sophisticated web application that appropriately employs the MVC architecture
4) Demonstrate a client server application using HTTP protocol and access web services for
dynamic content using AJAX.
5) Exhibit the working of server-side scripts.
6) Understand the fundamental working of data using open source databases
7) Develop advanced web frameworks by combining multiple web technologies
8) Implement Client side and Server side programming.

Student Learning Outcomes (SLO): 6, 7

Module:1 Web Essentials 4 hours

Evolution of Web – Web architecture – HTML –XHTML- CSS

Module:2 Client-Side Scripting 5 hours

Javascript Basics –Arrays- Functions - Javascript objects – HTML DOM - DOM methods –
Events- Regular Expressions – Form Validation-JSON-Jquery

Module:3 Web Applications 5 hours

Web applications- Web Application Frameworks-MVC framework-Angular JS – Single Page
Applications-Responsive Web Design

Module:4 Client/Server Communication 4 hours

HTTP- Request/Response Model- HTTP Methods- RESTful APIs-AJAX-AJAX with JSON

Module:5 Web Servers 5 hours

Node.js-NPM- Callbacks -Events- Express framework-Cookies-Sessions-Scaling

Module:6 Storage 3 hours

MongoDB-Manipulating and Accessing MongoDB Documents from Node js

Module:7 Reactive frameworks 2 hours

Meteor JS framework – Templates – Events – Sessions – Publish & Subscribe –Accounts

Module:8 Contemporary issues: 2 hours

 Total Lecture hours: 30 hours

Text Book(s)
1. Brad Dayley, Node.js, MongoDB, and AngularJS Web Development, Addison Wesley, 2014
2. Morris Mano, Digital logic and Computer design, 4th Edition, Pearson, 2008.
Reference Books
1. Jon Duckett,HTML&CSSDesign and Build Websites,Wiley, 2011
2. Jon Duckett,JavaScript and JQuery: Interactive Front-End Web Development,Wiley,2014
3. Holdener, Ajax: The Definitive Guide,Oreilly,2010
List of Challenging Experiments (Indicative)
1. Use DHTML to perform the following.
a) Design the spotlight section of VIT home page. Use Box properties of CSS.

b) To create a web page which includes a map and display the related information when
a hot spot is clicked in the map
c) Create a web page which displays an image “ganesha.jpg” and the text “This is image
of Lord Ganesh”. Place three buttons in the web page which performs the following
on clicking them
 To right align the image.
 To change the height, width and border of the image to 250, 350 and 3 pixels
respectively
 To change the source and alternate text of the image to “vinayaga.jpg” and “The
image cannot be loaded” respectively.
1. Design a web page with image gallery and sliding menu for movie reviews
2. Design the following using JavaScript and DOM
a) Given an array of words, write a javascript code to count the number of vowels and
number of consonants in each word. Use Regular Expressions.
b) Include Image Slide Show Digital clock, Survey Poll to make your webpage
i) Dynamic.
Develop a web application to implement online quiz system. The application includes only
client side script
3. Create a popup Login form using jQuery which appears at the center of screen on loading the
page after a specified time interval. Include Captcha text in the login page.
4. a) Validate the Event Registration Form given below using Jquery for the following
conditions.
  All fields are mandatory
 Zip code should be exactly five digits
 Email validation

b) Create a JSON file for a list of cities. Provide autocomplete option for city field using the
JSON file as source.
5. Using Angular JS, add names that are entered in textbox to the list and clear the textbox once
the name is added to list.

6. Design a shopping cart application using AngularJS. Your shopping webpage should have
the provisions for selecting the list of items from different category, Once the items are
selected on clicking the submit button the items in the cart with its price should be displayed.
Sample design is given below.
7. Create a MongoDB collection of “books” with the following details: Title, ISBN(unique id),
Authors, Publication ,Year of Publication and Price.
Write commands for the following:
a) Insert a new document with multiple authors.
b) Update a document with change in price
c) Remove documents with year of publication lesser than 1990.
8.d) A MongoDB collection of words has the document structure as:
{
word:<word>,
first:<first_letter>,
last:<last_letter>,
size: <character_count>
}
Perform the following operations on those documents using Nodejs.
 Find the set of words which starts with letters ‘a’,’b’ or ‘c’.
 Find the set of words which exactly has 12 letters.
 Count the number of words that starts and ends with a vowel.
 Find the first ten words that end with the letter ‘e’ and display it in descending order.

9.e) Develop an Online banking Web application over MEAN stack with the following scenarios.
 Initially the login page should contain only user id field. On entering the user id, if only the
user id exists, password field should be displayed.
 On successful login, display the account summary with the following details retrieved from
the database: Account no, Account type and Available Balance.
 On the left side top of the page display the Current date, Last Login date and UserName and
User Id.
 The session should expire on logout or if the page is idle for more than 2 minutes.

10.
f) Create an application in node.js for employee management. The application should manage
the following details of an employee: ID, name, surname, cadre and salary. Name and
surname are strings, while ID, cadre and Salary are integers.
The application should have the following functionalities:
 To search an employee using his/her ID If the employee exists, it will show his/her data in a
form, otherwise an pop message should be displayed stating the employees does not exist.
 To delete an employee, by specifying his/her ID.
 To insert a new employee using a form. By default, the form is hidden, by pressing a button
the form should appear. If the same button is clicked the form should disappear. Every time
the form is shown, it should be empty. The form should allow to specify all data of an
 employee. If the ID field is left empty, the system will assign the next available ID. If the ID
is already associated to an employee, the employee data are overwritten. If the ID is not
associated to any employee, the employee is created. All the other fields cannot be empty.

11. . Design an online book store using ExpressJS which has the following features (use the
MongoDB database created in Question.No.9):
a) Search option based on Title , Author or ISBN
b) On retrieving the results , display the book details in table format with the Price field
in sorted order using AngularJS
12. Design a student registration form which takes student name, register number, DOB,
program, email id, temporary address, permanent address, phone number. Validate the
following using jquery: a. Mobile number should be exactly 10 digits b. Register number
should have alphabets and numbers only c. Name should not exceed 30 characters and can
be only alphabets. d. Email validation e. Provide a checkbox saying “Permanent address is
same as temporary address”. If checked, the value of permanent address should be added
automatically from temp address. And should be in disabled mode.
Total Laboratory Hours 30 hours
Recommended by Board of Studies 12-08-2017
Approved by Academic Council No. 47 Date 05-10-2017