COURSEPACK

SCHEME
The scheme is an overview of work-integrated learning opportunities and gets students outinto the real
world.Thiswillgive whata courseentails.
Web Technology Comprehensive
CourseTitle CourseType
MCA – General and All
CourseCode Class
specialization (Semester-
III)
Weekly
Activity Credits TotalNumberofClasses Assessment
Hours
inWeightage
Lecture 3 3 perSemester

Tutorial 0 0
Instruction 1 2
Practical

Self-study
Practical
delivery Self- 1 3

Tutorial
Theory
stud

SEE
CIE
y*
5 8
Total 45 0 30 15 50% 50%
*Assignment,Quiz,C l a s s Test, SWAYAM/NPTEL/MOOCsetc.
Cours CourseCoor
Dr. Pramod Kumar Soni
e Lead dinator

Theory Practical
 Dr. Vishwadeepak Singh  Dr. Vishwadeepak Singh
bhagela bhagela
 Dr. Pramod Kumar Soni  Dr. Pramod Kumar Soni
 Mr. Ankur Chaturvedi  Mr. Ankur Chaturvedi
Names of
CourseInstruc
tors

COURSEPACK|
 COURSEOVERVIEW

The focus in this course is on the World Wide Web as a platform for interactive applications, content
publishing and social services. The development of web-based applications requires knowledge about the
underlying technology and the formats and standards the web is based upon. In this course you will learn
about the markup languages HTML, DHTML, CSS and XML for formatting and transforming web content,
interactive graphics and multimedia content on the web, client-side programming using Javascript and
PHP.

PREREQUISITECOURSE
Prerequisite Yes Object Oriented Programming,
Corequisite (If Database Management Systems,
yes, mention Computer Programming and Problem
course name) Solving

COURSE OBJECTIVE

 Enable the students to understand web-based site planning, management and maintenance.
 Explain the concept of developing advanced HTML,CSS,JavaScript, PHP pages.
 This course enables students to develop web sites which are secure and dynamic in nature.
 Design and implement an internet database application using existing tools and techniques

COURSE OUTCOMES(COs)

CO1 Understand the web development strategies and identify the problems.
CO2 Develop the SRS document of the project.
CO3 To develop web page using HTML with formatting, links, tables, list and frames
CO4 Design a visual representation of web application.
CO5 Implement and establish database connectivity with front end.

COURSEPACK|
 BLOOM’SLEVELOFTHECOURSEOUTCOMES
Bloom's taxonomy is a set of hierarchical models used for the classification of educational
learningobjectives into levels of complexity and specificity. The learning domains are cognitive,
affective, andpsychomotor.

COMPREHENSIVE

Remember Understand Apply Analyse Evaluate Create

CONo.
KL1 KL2 KL3 KL4 KL2 KL6
CO1 √ √
CO2 √
CO3 √ √
CO4 √ √
CO5 √ √

PROGRAMOUTCOMES(POs):

1. Computational Knowledge: Apply knowledge of computing fundamentals, computing

specialization, mathematics, and domain knowledge appropriate for the computing specialization to the
abstraction and conceptualization of computing models from defined problems and requirements.

2. Problem Analysis: Identify, formulate, research literature, and solve complex computing problems
reaching substantiated conclusions using fundamental principles of mathematics, computing sciences,
and relevant domain disciplines.

3. Design /Development of Solutions: Design and evaluate solutions for complex computing problems,
and design and evaluate systems, components, or processes that meet specified needs with appropriate
consideration for public health and safety, cultural, societal, and environmental considerations.

4. Conduct investigations of complex Computing problems: Use research-based knowledge and

research methods including design of experiments, analysis and interpretation of data, and synthesis of
the information to provide valid conclusions.

5. Modern Tool Usage: Create, select, adapt and apply appropriate techniques, resources, and modern
computing tools to complex computing activities, with an understanding of the limitations.

6. Professional Ethics: Understand and commit to professional ethics and cyber regulations,
responsibilities, and norms of professional computing practices.

7. Life-long Learning: Recognize the need, and have the ability, to engage in independent learning for
continual development as a computing professional.

8. Project management and finance: Demonstrate knowledge and understanding of the computing
and management principles and apply these to one’s own work, as a member and leader in a team, to
manage projects and in multidisciplinary environments.
COURSEPACK|
 9. Communication Efficacy: Communicate effectively with the computing community, and with
society at large, about complex computing activities by being able to comprehend and write effective
reports, design documentation, make effective presentations, and give and understand clear instructions.

10. Societal and Environmental Concern: Understand and assess societal, environmental, health,
safety, legal, and cultural issues within local and global contexts, and the consequential responsibilities
relevant to professional computing practices.

11. Individual and Team Work: Function effectively as an individual and as a member or leader in
diverse teams and in multidisciplinary environments.

12. Innovation and Entrepreneurship: Identify a timely opportunity and using innovation to pursue
that opportunity to create value and wealth for the betterment of the individual and society at large.

PROGRAMMESPECIFICOUTCOME(PSO):

The students of Computer Applications shall :

PSO1: Have the ability to work with contemporary technologies in computing requisite to Industry 4.0
developing and implementing solutions to real life problems.

PSO2: Demonstrate applications development skills learned through technical training and projects to solve
real world problems.

COURSEARTICULATIONMATRIX

The Course articulation matrix indicates the correlation between Course Outcomes and Program Outcomes and their
expected strength of mapping in three levels (low, medium, and high).

COs#/ POs
PSO1

PSO2
PO10

PO11

PO12
PO1

PO2

PO3

PO4

PO5

PO6

PO7

PO8

PO9

CO1 3 1 3 3 3 3 1 - - 1 3 1 2 3
CO2 3 1 2 3 3 3 1 - - 1 1 1 3 3
CO3 3 1 2 2 2 3 1 - - 1 1 2 3 3
CO4 3 1 2 2 2 3 1 - - 1 1 2 3 3
CO5 3 1 2 2 2 3 1 - - 1 1 2 3 3

Note: 1-Low, 2-Medium, 3-High

COURSEPACK|
 COURSE ASSESSMENT
Project Components Presentation Languages Quiz Total- IA ETE ETE(30)
(ER1) (ER2) (ER1+ER2)
(70)
Problem Specification 10 HTML & 5 Presentations 10
15
XHTML
Concept Development 10 CSS 5 15 Demo 10
Content Planning 10 JS 5 15 ETE Quiz(30 10
MCQ)
Creative Design (Database 10 XML 5 15
Connectivity)
Testing 5 PHP 5 10
TOTAL 45 TOTAL 25 70 30

TEACHING PEDAGOGY:

Pedagogy Description
1 Lecture Delivery Normal lecture delivery through chalk and duster and PPT
2 Group/ Individual Through group / individual projects, students will learn practical
Projects implementation
3 Flipped Classroom Will share some video on selected topics before the class, based on
the study materials students will share their understanding during
class
4 Interactive Interactive demonstration through lab classes
Demonstration
5 Problem based Students will be given some practice problem and assignment and
learning through this they will acquire new skills

Slow Learner and Fast Learner Selection Process:

We shall evaluate the students with following process:

i) By analyzing the result of Mid Term Examination(MTE)
ii) By evaluating the assignment submitted by the students
iii) By analyzing continuous assessment – through Lab viva or and / or through quiz asked during theory
classes.

COURSE CONTENT
(THEORY+PRACTICAL)

Introduction to web and HTML

Introduction to Web Designing , web development strategies – Web Server, Web Client –
COURSEPACK|
Browser & Web Server, identify the problems, Develop the SRS document of the project,
 HTML Document, Basic Structure –basic tag, elements, attributes, formatting, comments,
marquee, text, image and email, list, Creating Links between Documents – Creating Tables
– Creating Forms – The Input Element – Select Element – Text Area Element

Introduction to Styles sheets(CSS) and Frameworks

Introduction to DHTML, advantages and disadvantages of DHTML, Object Model –
Underlying Principles of the DHTML, Basic Components of DHTML, XHTML: Syntax
and Semantics, Introduction to Styles sheets and Frameworks Cascading Style Sheets: Levels
of Style Sheets – Style , Specification Formats, Selector Forms, Property-Value, Forms, Font
Properties, List Properties, Alignment of Text, Color, The Box Model, Background Images,
The span and div Tags. Frameworks: Overview and Basics of Responsive CSS Frameworks

JavaScript
Java script: Introduction, documents, forms, statements, functions, objects; Event and event
handling; Error handling; validation.

Introduction to Data Interchange Formats (XML)

XML: The Syntax of XML, XML Document Structure, Namespaces, XML Schemas,
Displaying Raw XML Documents, Displaying XML Documents with CSS, XSLT Style
Sheets, XML Applications.

JSON(Basics Only): Overview, Syntax, Datatypes, Objects, Schema, Comparison with

XML.
XML: DTD, XML schemes, presenting and using XML.

PHP
PHP (Hypertext Preprocessor): Introduction, syntax, variables, strings, operators, if-else,
loop, switch, array, function, form ,mail, file upload, session, error, exception, filter, PHP-
ODBC

LESSON PLAN FOR COMPREHENSIVE COURSES COURSEPACK|

FOR THEORY 15 weeks * 3 Hours = 45 Classes) (1credit = 1 Lecture Hour)
FOR PRACTICAL 15 weeks * 2 Hours = 30 Hours lab sessions (1 credit = 2 lab hours)

L-No Topic for Delivery Theory

Skills
1 Points To Covered Theory Understand the basics
2 Introduction to web: WWW, Web Browsers Theory of web technology
3 Web development strategies Theory
4 HTML introduction Theory
5 HTML: basic tag, elements, attributes
6 HTML: formatting, comments, marquee, list Theory Understanding the basic
7 HTML: table concepts of HTML
8 HTML: images Theory
9 HTML: frames, forms Theory
10 HTML: links: text, image and email
11 Creating Links between Documents – Creating Theory
Tables – Creating Forms – The Input Element –
Select Element – Text Area Element
10 Introduction to DHTML Theory
11 advantages and disadvantages of DHTML Theory
12 Object Model – Underlying Principles of the Theory
DHTML
13 Basic Components of DHTML Theory
14 XHTML: Syntax and Semantics Theory
15 Introduction to CSS Theory
16 Levels of Style Sheets – Style , Specification Theory
Formats
Selector Forms, Property-Value, Forms, Font Theory Understanding the CSS
Properties concepts which are
17 List Properties, Alignment of Text, , Theory applied on HTML pages
18 Color, The Box Model, Background Images Theory
19 The span and div Tags Theory
20 Frameworks: Overview and Basics of Responsive Theory
CSS Frameworks
21 Java script: Introduction Theory
22 documents, forms Theory
statements, functions Theory
23 objects; Event Theory Understanding JAVA
24 objects: Event handling script to validate the web
25 Error handling Theory pages
26 validation Theory
27 XML: The Syntax of XML, XML Document
Structure
28 Namespaces, XML Schemas, Displaying Raw Theory
XML Documents
Displaying XML Documents with CSS
29 XSLT Style Sheets Theory Understanding the
30 XML Applications Theory concepts of XML and
31 JSON(Basics Only): Overview, Syntax, Datatypes Theory PHP to create dynamics
32 Objects, Schema, Comparison with XML Theory web pages
COURSEPACK|
33 XML: DTD, XML schemes Theory
 34 presenting and using XML Theory
35 PHP (Hypertext Preprocessor): Introduction Theory
36 syntax, variables, strings Theory
37 operators, if-else, loop, switch Theory
38 array, function, form Theory
39 mail, file upload, session, error Theory
40 exception, filter Theory
41 PHP-ODBC Theory
42 Points To Covered Theory
43 Introduction to web: WWW, Web Browsers Theory
44 Web development strategies Theory
45 HTML introduction Theory

List of Practicals of java programming

S. No Program
1 Write html code to create a basic web page consisting of various HTML tags.
2 Create an html document with HTML links
3 Write an HTML code to design a page containing text, in form of paragraphs giving suitable
heading style
4 Create a Web page with appropriate content and insert CSS in HTML
5 Create a Web page, containing HTML Forms.
6 create HTML lists
7 Create a Web page that contains HTML frames
8 Create XML with DTD.
9 Create a Web page, which contains HTML embedded with Java Script results
10 Create HTML with JavaScript to perform basic operations and to show how try catch works.
11 Write a program Using Java Script validation in HTML Forms.
12 Create a dynamic webpage with the help of JavaScript events.
13 Introduction to JSP- Demo program
14 Introduction to JSP Life cycle
15 Develop JSP code to show the database access derived from c_polygon and they have area() to
calculate and return the area of rectangle and triangle respectively
16 Write a PHP code using function to find the sum of two integers
17 (a) Perform from validation using PHP
.(b) Write a PHP program to validate Name, Email and password
18 File Handling in PHP (a)Create a PHP program to demonstrate opening and closing a file. (b)
Create a PHP program to demonstrate reading a file.
19 Create an HTML form that has a number of text boxes. The user fills the textboxes with data.
Write a script that verifies that all textboxes have been filled. If a text box has been left empty pop
up an alert message indicating the box that has been left empty. When OK button is clicked, set
focus to that specific textbox. If all the textboxes are filled, display thank you.
20 Create a program to verify whether email address provided by the user is valid or invalid.
21 Write a JSP code to generate dynamic webpage using server response
22 Install and configure PHP: web server, MYSQL
Write a program in PHP to display content on a web page.
Write a simple PHP program using expressions and operators.
23 Write a program using PHP and HTML to create a form and display the details entered by the user
24 Write a PHP code to upload a file and store at a given location. COURSEPACK|
25 Create a PHP page for login system using session
26 Write simple PHP program to set cookies and read it
27 Write a PHP program for sending e-mail
28 Design a responsive web page displaying your profile using bootstrap
29 Write a JSP code to generate dynamic webpage using server response
30 Install and configure PHP: web server, MYSQL
Write a program in PHP to display content on a web page.
Write a simple PHP program using expressions and operators.

BIBLIOGRAPHY

Text Book (s)

T1. Ivan Bayross -Web Enabled Commercial Application Development Using HTML,
DHTML, Java Script, Perl, CGI-2000
T2. Uttam/Roy,” WEB Technology”, Oxford Publication.

Reference Book (s)

R1. Xavier, C, “ Web Technology and Design” , New Age International
R2. Deitel, “Java for programmers”, Pearson Education
R3. Ramesh Bangia, “Internet and Web Design” , New Age International
R4. Jackson, “Web Technologies” Pearson Education
R5. Patel and Barik, ”Introduction to Web Technology & Internet”, Acme Learning

Webliography
1. https://www.javatpoint.com/web-application
2. https://www.tutorialspoint.com/web_developers_guide/web_basic_concepts.htm

SWAYAM/NPTEL/MOOCs Certification (One from Each Platform, Max 3 Platforms)

1. https://www.coursera.org/courses?query=web%20technologies
2. https://archive.nptel.ac.in/courses/106/106/106106246/

PROBLEM-BASED LEARNING
COURSEPACK|
Exercises in Problem-based Learning (Practice Problems)
SNo Problem KL
1 What is the use of HTML Forms? Create a HTML Form page for Railway
Registration Form
2 Develop a html web page for the following design using frame and frameset.
<frame 1> DEMONSTRATION OF FRAMES
<frame2>
<linRemember>
<linUnderstand>
<linApply> <frame3>

<content to be displayed in this frame>

What is the use of HTML Forms? Create a HTML Form page for Railway
Registration Form
3 What are HTML tags? List the commonly used HTML
commands
4 Using suitable HTML tags, create user login page.
Using suitable HTML tags, create Online student course registration form.
Create a HTML page for a suitable application with labels, text box, text area and
buttons embedded.
5 Briefly discuss how password can be hidden in a HTML page with suitable
example.
Discuss the use of <meta> tag with suitable example.

COURSEPACK|
6 Create a HTML file for online voting system using elements like labels, textbox,
buttons, listdown, radio button and check box.
Discuss how CSS can be linked to a HTML document. Also illustrate the usage of
different HTML tags.
7 Demonstrate how table tag can be used in HTML by providing suitable complex
enough example for a sample scenario.
8 Using suitable HTML tags, create a homepage for your university with appropriate
design output.
What is HTML? Explain in detail about the following tags:
<html>
<head>
<title>
<body>
<h1> to <h6>
<p>
<br>
<hr>
<b>
<strong>
<table>
<tr>
<td>
9 What are HTML tags? List the commonly used HTML
commands
10 Using suitable HTML tags, create user login page.
Using suitable HTML tags, create Online student course registration form.
11 Create a HTML page for a suitable application with labels, text box, text area and
buttons embedded.
Briefly discuss how password can be hidden in a HTML page with suitable
example.
12 Discuss the use of <meta> tag with suitable example.
Create a HTML file for online voting system using elements like labels, textbox,
buttons, listdown, radio button and check box.
13 Discuss how CSS can be linked to a HTML document. Also illustrate the usage of
different HTML tags.
14 Using suitable HTML tags,
create a homepage for your
university with appropriate
design output.

15 What is HTML? Explain in detail about the following tags:

<html>
<head>
<title>
<body>
<h1> to <h6>
<p>
<br>
<hr>
<b>
<strong> COURSEPACK|
<table>
 <tr>
<td>

16

Write a simple java script embedded with html to declare an array of size ‘5’ and
the values are assigned to each index which is the combination of integer and string
values. Next, using ‘For loop’, the value present at each index is to be displayed
with the help of a message box.

17
Write a JavaScript to display a welcome button of an html form is pressed

18
Using a JavaScript create a web page using two image files , which switch between
one another as the mouse pointer moves over the images

19 Develop a simple online shopping application using JavaScript(Assume your own

data)

20
develop the web page for employee management system and validate all the fields
using java script

21
Develop a JavaScript program to display a message “HI ! GOOD MORNING TO
YOU”

22 Write a JavaScript program to demonstrate the JavaScript events

23 Identify the issue in the below code:

<?php
$str1 = "Hello, ";
$str2 = "world!";
$str3 = $str1 - $str2;
echo $str3;
?>
24 You need to write a PHP script that will convert temperatures between Celsius
and Fahrenheit. The input parameters should be the temperature value and the
unit (Celsius or Fahrenheit). The script will return the converted value in the
other unit.
25 Create a PHP script that shows a list of products in a simple e-commerce
catalog. Each product will have a name, description, price and featured image.
You can store the product data in an array, a JSON file or a database. The script
should generate an HTML page that will display the product details in a user-
friendly format.
26 What is the issue in the below code: COURSEPACK|
 <?php
class A {
public static function who() {
echo __CLASS__;
}

public static function test() {

self::who();
}
}
class B extends A {
public static function who() {
echo __CLASS__;
}
}
B::test();
?>
27 Will the below code throw any error? If yes, identify the error.

<?php
$num = 5;
if $num > 0 {
echo "Positive";
}
?>
28 Write a PHP program to compute the sum of the two given integer values. If the
two values are the same, then returns triple their sum.
Sample Input
1, 2
3, 2
2, 2
Sample Output:
3
5
12
29 Write a PHP program to remove the character in a given position of a given
string. The given position will be in the range 0..string length -1 inclusive.
Sample Input:
"Python", 1
"Python", o
"Python", 4
Sample Output:
Pthon
ython
Pythn
30 Write a PHP program to create a new string taking the first 3 characters of a
given string and return the string with the 3 characters added at both the front
and back. If the given string length is less than 3, use whatever characters are
there.
Sample Input:
"Python" COURSEPACK|
"JS"
 "Code"
Sample Output:
PytPythonPyt
JSJSJS
CodCodeCod
31 Write a PHP program to check if a given string starts with 'C#' or not.
Sample Input:
"PHP"
"C#"
"C++"
Sample Output:
bool(true)
bool(true)
bool(false)
32 Write a PHP program to check if two given non-negative integers have the same
last digit.
Sample Input:
123, 456
12, 512
7, 87
12, 45
Sample Output:
bool(false)
bool(true)
bool(true)
bool(false)
33 Write a PHP script to display the following strings.
Sample String :
'Tomorrow I \'ll learn PHP global variables.'
'This is a bad command : del c:\\*.*'
Expected Output :
Tomorrow I 'll learn PHP global variables.
This is a bad command : del c:\*.*
34 Create a simple HTML form and accept the user name and display the name
through PHP echo statement.

35 Write a simple PHP program to check that emails are valid.

Hints : Use FILTER_VALIDATE_EMAIL filter that validates value as an e-mail
address.
Note : The PHP documentation does not say that FILTER_VALIDATE_EMAIL
should pass the RFC5321.

COURSEPACK|
STUDENT-CENTEREDLEARNING (SELF-LEARNING
TOWARDS LIFE-LONG- LEARNING)
Self-Learning (It’s a typical course-based project to be carried out by a whole class in
different groups that they should exhibit higher level KLs). The students, in a group,
are expected conceive an idea based on the content (objectives/outcomes) and apply the
suitable knowledge to demonstrate their learning. They can attend Oracle courses
for this segment.

Online Certification Course Link

https://www.codechef.com/practice/
https://skillsforall.com/course/

COURSEPACK|