Course Objectives

• Understand client server architecture and able to use the skills for web project development
• Create job opportunities as a web developer..

Course Outcomes

• • COs
  • CO1
  • CO2
  • CO3

• Course Outcomes
• Able to gain the knowledge for designing and developing web applications
• Apply PHP7 to improve accessibility of a web document
• Develop a static, interactive and wellformed webpage using JavaScript, CSS3
  and HTML5

• Mapping COs with POs (High-3, Medium-2, Low-1)
• PO1 (3)
• PO2 (3)
• PO3(3), PO5(1)

Course Syllabus

Module I: Web Programming concepts (7 hrs)
Architecture of the Web (1)
HTTP Protocols(1)
Difference HTTP1.0 and HTTP 1.1,Stateless nature of the protocol,Methods (GET, POST, HEAD, PUT, DELETE),HTTP session,Status codes,Persistent connections,HTTPS
HTML(1)
Document Object Model (DOM),Elements,Events
HTML 5(2)
Elements,Objects,Events,Canvas,Audio & Video Support,Geo-location Support
CSS(2)
Styling HTML with CSS,Inline Styling (Inline CSS),External Styling (External CSS),CSS Fonts,The CSS Box Model,The id Attribute,The class Attribute,HTML Style Tags

Practice
1. Write an HTML code to display your CV on a web page.
2. Write an HTML code to create a Home page having three links: About Us, Our Services and Contact Us. Create separate web pages for the three links.
3. Write an HTML code to create a Registration Form. On submitting the form, the user should be asked to login with this new credentials.
4. Write an HTML code to create your Institute website, Department Website and Tutorial website for specific subject.
5. Write an HTML code to create a frameset having header, navigation and content sections.
6.Write an HTML code to demonstrate the usage of inline CSS.
7. Write an HTML code to demonstrate the usage of internal CSS.
8. Write an HTML code to demonstrate the usage of external CSS.
9: Design your own website using HTML and CSS
10: Design form using HTML and apply CSS

Module II : JavaScript & jQuery(14 hrs)
JavaScript (10)

Introduction to JavaScript:Variable, statements, Operators, Comments, constructs, Functions, expressions,Javascript console,Scope, Events, Strings, String Methods, Numbers, Number Methods, Dates, Date Formats, Date,Methods,Arrays, Array Methods,Booleans, Comparisons
Control Structures:Conditions, Switch,Loop For, Loop While, Break

Functions: Function Definitions, Function Parameters, Function Invocation, Function Closures

Objects: Object Definitions, Object Properties, Object Methods, Object Prototypes

Object Oriented Programming: Method,Constructor,Inheritance,Encapsulation,Abstraction,Polymorphism,Javascript Validations,Document Object Model, Document and Events (DOM Manipulation)

HTML DOM: DOM Intro, DOM Methods, DOM Document, DOM Elements, DOM HTML, DOM CSS,DOM Animations, DOM Events, DOM EventListener, DOM Navigation, DOM Nodes, DOM Nodelist,Debugging,Type Conversion, Regular expressions, Errors, Debugging

Forms: Forms Validation, Forms API,JS Browser BOM, Window, Screen, Location, History, Navigator, Popup Alert, Timing, Cookies,Javascript Windows,Pushing code quality via JSLint tool,Security in Java Script

jQuery(4)
Basics of jQuery,jQuery selection and events, jQuery Effects,jquery traversal and manipulation,Data attributes and templates, jQuery Plugins,Jquery / Google Web Toolkit
Practice:
1.Write a Java script to prompt for users name and display it on the screen.
2. Design HTML form for keeping student record and validate it using Java script.
3. Write programs using Java script for Web Page to display browsers information.
4: Validate form page using JavaScript
5: use JQuery effect in page

6. Write a jQuery Code to Find the data passed with the on() method for each element.
7.Find the position of the mouse pointer relative to the left and top edges of the document.
8.Count the number of milliseconds between the two click events on a paragraph
9.Find all the text nodes inside a paragraph and wrap them with an italic tag

Module III: AJAX & JSON(8hrs)
AJAX(3)
Design Introduction to Ajax,Web services and Ajax,Ajax using HTML, CSS, JavaScript,Ajax Framework and DOM,XMLHttpRequest,Ajax Architecture
Working with JSON (5)
JSON – Introduction,Need of JSON,JSON Syntax Rules,JSON Data - a Name and a Value,JSON Objects,JSON Arrays,JSON Uses JavaScript Syntax,JSON Files,JSON & Security Concerns, Cross Site Request Forgery (CSRF), Injection Attacks,JS XMLHttpRequest functions,JavaScript XMLHttpRequest & Web APIs,JSON & Client Side Frameworks,JSON & Server Side Frameworks,Replacing XML with JSON,JSON parsing,AJAX using JSON and jQuery

Practice:
1.Create an simple application using AJAX to show the table of numbers given by user at runtime.
2.Access web service using Ajax and handle using JSON

Module IV:Responsive Web Design (5hrs)
Introduction
The Best Experience for All Users
• Desktop
• Tablet
• Mobile
Bootstrap
Overview of Bootstrap
Need to use Bootstrap
Bootstrap Grid System, Grid Classes, Basic Structure of a Bootstrap Grid
Typography
Tables, Images, Jumbotron, Wells, Alerts, Buttons, Button Groups, Badges/Labels, Progress Bars,
Pagination, List Groups, Panels, Dropdowns, Collapse, Tabs/Pills, Navbar, Forms, Inputs
Bootstrap Grids, Grid System, Stacked/Horizontal
Bootstrap Themes, Templates

Practice:
1.Create a responsive website using bootstap

Module V: PHP(10 hrs)
PHP(10):
Introduction to PHP,Working with arrays,Functions,Forms,Handling date and Times,Working with Files,Session and state management,Database operations from PHP

Practice:
1.Develop student registration web appication using PHP
2.Write a PHP database application that collects comments from users and makes it possible for users to view all the comments that have been submitted. You will need three files: an HTML page with a form where the user can enter a comment; a PHP program to process the input from this form by adding the comment to the database; and a PHP program that displays all the comments.

Module VI:Introduction to Drupal (5hrs)
Drupal Basics, Content Management System, Content Management Framework, Web Application,Framework,Drupal Workflow, Bootstrap, hooks, callbacks, output,Modules (Core and Contributed), Nodes, Blocks, Regions,The Admin Interface (Overview),Content Management, Site Building, Site Configuration, User Management, Reports, Help,Content Translation,User Contributed Modules,Layouts in Drupal, File Systems

Practice:
1.Setup Drupal server and develop a site on it

Module VII : XML & Web Security (6 hrs)
XML (2)
Introduction to XML,XML Validation,Reason for XML,XML Tree Structure, XML DOM,XML DTD,XML Schema
XML style language(2)
XML and XSLT, XML Parsing,XML parsers (DOM & SAX),XML WSDL,RSS Feed
Web Security(2)
SQL Injection,Cross-Site Scripting (XSS),Security standards (OWASP)

Practice:
1. Creating XML Document
2.DTD creation
3.Test SQL Injection for student resgistration application

Text/Reference Books

1.Web Technologies: HTML, JAVASCRIPT, PHP, JAVA, JSP, XML and AJAX, Black Book Kindle Edition,by Kogent Learning Solutions Inc.
2.HTML 5 Black Book, Covers CSS 3, JavaScript, XML, XHTML, AJAX, PHP and jQuery, 2ed Kindle Edition,by DT Editorial Services
3.Programming PHP: Creating Dynamic Web Pages, Third Edition, by Kevin Tatroe, O'REILLY
4.Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON kindle Edition by Lindsay Bassett,O'REILLY
5.Bootstrap: Responsive Web Development  by Jake Spurlock, Paperback

Project Work

1.Online Quiz System
2.Online Student feedback System
3.. Online Tutorial System
4.Restaurant Billing System
5.Online MCQ Database Bank System

Session Plan

Session 1

Topic:Architecture of the Web

Youtube Link:
Web Architecture1
Web Architecture2

Tutorial link:

Lecture Notes: Web Architecture

Session 2

Topic: HTTP Protocols

Youtube Link:HTTP Protocol

Tutorial Link:HTTP Protocol

Session 3

Topic: HTML

Practice

1. Write an HTML code to display your CV on a web page.
2. Write an HTML code to create a Home page having three links: About Us, Our Services and Contact Us. Create separate web pages for the three links.
3. Write an HTML code to create a Registration Form. On submitting the form, the user should be asked to login with this new credentials

Youtube Link:HTML

Tutorial Link:HTML tutorial

Session 4

Topic: HTML5

Practice

1.Write an HTML code to create your Institute website, Department Website and Tutorial website for specific subject.
2. Write an HTML code to create a frameset having header, navigation and content sections.

Youtube Link:HTML5

Tutorial Link:HTML5

Session 5

Topic: HTML5

Practice

1.creating your own video playback controller in html with java script on a webpage using video element in Html5.
Implement your own Video Playback Controller on a Webpage using "video" element
and java script with the Following Controlling Buttons:
1. Play (>)
2. Pause (|| ) :
3. Restart (|>)
4. Forward with interval value 10 (>>)
5. Rewind with interval value -10 (<) with toggled Pause (||) :
If currently playing, show “Pause”
Else, show “Play”
Notes:
For this lab, you need a web browser with HTML5 (IE9 or higher,
Chrome, Firefox)

Youtube Link:HTML5

Tutorial Link:HTML5

Session 6

Topic: CSS

Practice

1.Write an HTML code to demonstrate the usage of inline CSS.
2. Write an HTML code to demonstrate the usage of internal CSS.
3. Create user Student registration form (use textbox, text area , checkbox, radio button, select box etc.) (use internal CSS) to format website.

Youtube Link:CSS

Tutorial Link:Tutorial link:

Session 7

Topic: CSS

Practice

1.Create your class timetable using table tag (use CSS) to format website
2.Design a web page to create your resume use color, textcolor, an Image, font etc. (use CSS) to format website.

Youtube Link:CSS

Tutorial Link:Tutorial link:

Session 8

Topic: Java Script

Practice

1.Write a Java script to prompt for users name and display it on the screen.
2. Design HTML form for keeping student record and validate it using Java script.

Youtube Link:Java Script

Tutorial Link:Tutorial link:

Session 9

Topic: Java Script

Practice

1. Write programs using Java script for Web Page to display browsers information.
2: Validate form page using JavaScript

Youtube Link:Java Script

Tutorial Link:Tutorial link:

Session 10

Topic: Java Script

Practice

1.Develop simple calculator for addition, subtraction , multiplication and division operation using JavaScript
2. Create a login form which will check for username and password. If login successful then go to next form- Student registration form that contains form with fields Name, Email, Mobile No , Gender and a button .write a JavaScript code to validate data of above form.

Youtube Link:Java Script

Tutorial Link:Tutorial link:

Session 11

Topic: JQuery

Practice

1. use Jquery effect in page

2. Write a jQuery Code to Find the data passed with the on() method for each element.
3.Find the position of the mouse pointer relative to the left and top edges of the document.

Youtube Link:JQuery

Tutorial Link:Tutorial link:

Session 12

Topic: JQuery

Practice

1.Count the number of milliseconds between the two click events on a paragraph
2.Find all the text nodes inside a paragraph and wrap them with an italic tag

Youtube Link:JQuery

Tutorial Link:Tutorial link:

Session 13

Topic: Ajax

Practice

1.Create an simple application using AJAX to show the table of numbers given by user at runtime.

Youtube Link:Ajax

Tutorial Link:Tutorial link:

Session 14

Topic: JSON

Practice

1.Access web service using Ajax and handle using JSON

Youtube Link:JSON

Tutorial Link:Tutorial link:

Notes: JSON Notes

Session 15

Topic: Responsive web design

Practice

1.Create a responsive website using bootstap

Youtube Link:Responsive website design

Tutorial Link:Tutorial

Session 16

Topic: PHP:Array

Practice

1. Write a PHP script which decodes the following JSON string.
Sample JSON code :
{"Title": "The Cuckoos Calling",
"Author": "Robert Galbraith",
"Detail": {
"Publisher": "Little Brown"
}}
Expected Output :
Title : The Cuckoos Calling
Author : Robert Galbraith
Publisher : Little Brown

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 17

Topic: PHP:Array

Practice

1.Write a PHP script to calculate and display average temperature, five lowest and highest temperatures.
Recorded temperatures : 78, 60, 62, 68, 71, 68, 73, 85, 66, 64, 76, 63, 75, 76, 73, 68, 62, 73, 72, 65, 74, 62, 62, 65, 64, 68, 73, 75, 79, 73
Expected Output :
Average Temperature is : 70.6
List of seven lowest temperatures : 60, 62, 63, 63, 64,
List of seven highest temperatures : 76, 78, 79, 81, 85,

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 18

Topic: PHP:Function

Practice

1.Write a PHP function to generate a random password (contains uppercase, lowercase, numeric and other) using shuffle() function
2.Write a PHP function to compares two multidimensional arrays and returns the difference

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 19

Topic: PHP:Form

Practice

1.Write PHP Scripts that will interact with their clients using one of the two HTTP methods.
The methods are GET and POST
 When a form is submitted using the GET method, its values are encoded
directly in the query string portion of the URL
 When a form is submitted using the POST method, its values will not be
displayed the query string portion of the URL

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 20

Topic: PHP:Form

Practice

1.write an HTML file that contains a form and a PHP program that processes the data from the form. The form should contain some questions that the user can answer, and the PHP program should produce a response that incorporates the user's answers in some way

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 21

Topic: PHP:Session Management

Practice

1. Create a login form with a username and password. Once the user logs in the second form should be displayed to accept user details (name, city,phone no). If the user doesn’t enter information within a specified time limit,expire his session and give a warning.
2. Write a script to keep track of number of times the web page has been accessed.

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 22

Topic: PHP:Session Management

Practice

1. Write a program to create a shopping mall. User must be allowed to do purchase from two pages. Each page should have a page total. The third page should display a bill, which consists of a page total of what ever the purchase has been done and print the total. (Use http session tracking).

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 23

Topic: PHP:Data Base

Practice

1.In this assignment you will create three MySQL database tables and write php scripts to read, insert & delete data.
The first database table will contain the names of your favorite four movies. The second table will be a list of actors who appear in the movies. The third table will be an associative table that describes the relationship between actors and movies (which actors appear in which movies). Actors and movies have a many-to-many relationship (an actor can be in multiple movies and a movie can have multiple actors).

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 24

Topic: PHP: Data Base

Practice

1.Write a PHP database application that collects comments from users and makes it possible for users to view all the comments that have been submitted. You will need three files: an HTML page with a form where the user can enter a comment; a PHP program to process the input from this form by adding the comment to the database; and a PHP program that displays all the comments.

Youtube Link:PHP

Tutorial Link:Tutorial link PHP

Session 25

Topic: Drupal

Practice

1.Setup Drupal server and develop a site on it

Youtube Link: Drupal

Tutorial Link:Tutorial Link Drupal

Session 26

Topic:XML,DTD

Practice

1.Create XML file to store student information like Roll No, Name, Address.
2.Create Internal or external DTD to validate above XML File.

Youtube Link:XML

Tutorial Link:XML,...

Session 27

Topic:XML Style language

Practice

1.Create XSL file to convert XML file of student information into HTML table

Youtube Link:XML

Tutorial Link:XML,...

Session 28

Topic: Web Security

Practice

1.Test SQL Injection for student resgistration application

Youtube Link:SQL Injection

Tutorial Link:SQL Injection

Lab Experiments

Link: Lab Experiment