A Course File

On

Basic Web Development

(I B. Tech. II Semester)

Submitted to
DEPARTMENT OF COMPUTER SCIENCE& ENGINEERING

By

[Link]

(2024-25)
 CONTENTS

Sl. No. Particulars Page No.

1 Syllabus
2 Student Entry Behavior or Pre-requisites
3 Course Objectives
4 Course Outcomes
5 Mapping Of Course Outcomes with PEOs
6 Mapping Of Course Outcomes with PSOs
7 Mapping Of Course Outcomes with POs
8 Mapping of Course with PEOs-PSOs-POs
9 Direct Course Assessment
10 Indirect Course Assessment
11 Overall Course Assessment and Attainment level
Pi diagrams, Bar charts, Histograms for representing
12
results
13 Lesson/Course Plan
14 Actions and Assessment Plan
15 Lecture Notes
16 Question Bank
17 Internal Examination Question Papers with key
18 External/End Examination Question Papers
 Basic Web Development

Prerequisite:

Course Objectives:

 Be able to read and write HTML5 and CSS3.

 Know the importance of object oriented aspects of Scripting and JavaScript for web page
 Understand of server side script using PHP
 Learn Database programming with PHP and MySQL

Course Outcomes:

 Design web pages using HTML and CSS.

 Apply JavaScript for web page
 Understand of server side script using PHP
 Write a Database program with PHP and MySQL

Module I
INTERNET FUNDAMENTALS:

What is Internet? Introduction to internet and its applications, World Wide Web (WWW) and its evolution,
uniform resource locator (URL), browsers – internet explorer, Netscape navigator, opera, Firefox, chrome,
Mozilla. search engine, web saver – apache, IIS, proxy server, HTTP protocol
WEB DESIGN:

Concepts of effective web design, Web design issues including Browser, Bandwidth and Cache, display
resolution, Look and Feel of the Website, Page Layout and linking, User centric design, Sitemap, Planning
and publishing website, Designing effective navigation.

Module II

BASICS OF HTML:
Structure of HTML page, HTML tags for data formatting, tables, links, images, meta tags, frames, html form
tags, media, APIs, HTML5 tags and validation.

BASICS OF CSS:
Need for CSS, Syntax and structure, CSS rules for Backgrounds, Colors and properties, manipulating texts,
Fonts, borders and boxes, Margins, Padding Lists, CSS Positioning. Animations, Tool-Tips, Style images,
Variables, Media Queries, Wildcard Selectors (*, ^ and $) in CSS.

Programs:
1. Write an HTML page that contains a selection box with a list of 5 countries. When the user selects a
country, its capital should be printed next to the list. Add CSS to customize the properties of the font
of the capital (color, bold and font size).
2. Create a web page using two image files, which switch between one another as the mouse pointer
moves over the images. Use the on Mouse Over and on Mouse Out event handlers.
3. Write a HTML Program to display list of fruits, vegetables and cereals using ordered list.
Module III
INTRODUCTION TO JAVA:
Introduction to object oriented Programming-Features of Java – Data types, variables and arrays – Operators
– Control statements – Classes and Methods – Inheritance. Packages and Interfaces –Exception Handling
CLIENT-SIDE SCRIPTING USING JAVASCRIPT:

Client Side Scripting using JavaScript Syntax of JavaScript, Execution of JavaScript, Internal, Embedded and
External JavaScript, JavaScript: variables, arrays, functions, conditions, loops, Pop up boxes, JavaScript
objects and DOM, JavaScript inbuilt functions, JavaScript validations
Programs:

1. Create a form having number of elements (Textboxes, Radio buttons, Checkboxes, and so on). Write
JavaScript code to count the number of elements in a form.
2. Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade
3. Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX, Gross
pay, Deduction and Net pay

Module- IV

INTRODUCTION TO PHP:
Difference between Client side and Server-side scripting, Structure of PHP page, – Advantages of PHP –
Installation & Configuration PHP Syntax: variables, decision and looping with examples.
SERVER-SIDE SCRIPTING – PHP:
PHP and HTML, Arrays and Functions, String, Form processing, File uploads, Dates and time zone, working
with Regular Expressions, Exception Handling, Basic concepts of Session and State, State management using
query string, hidden form controls, Cookies, Session variables
Programs:

1. Write a PHP program to print Armstrong Number

2. Write a XHTML code to provide a form that collects names and telephone numbers. The phone
numbers must be in the format ddd-ddd-dddd. Write a PHP script that checks the submitted telephone
number to be sure that it confirms to the required format and then returns a response that indicates
whether the number was correct.
3. Write an XHTML document to include an anchor tag, that calls a PHP document also write the called
PHP document which returns a randomly chosen greeting from a list of five different greetings. The
greetings must be stored as constant strings in the script. A random number between 0 and 4 can be
computed with these line. #set the seed for mtrand with the number of microseconds #since the last
full second of the clock mt_strand((double) microtime() * 1000000); $number=mtrand(0,4);
#computes a random integer 0-4 Write the PHP script for above to count the number of visitors and
display that number for each visitor. Hint: Use a file to store

Module V
DATABASE PROGRAMMING WITH PHP AND MYSQL:
Basic MySQL commands, PHP functions for database connectivity, Implementation of CRUD operations
using PHP, Prepared Statement and stored procedure execution in PHP.

ADVANCED WEB PROGRAMMING CONCEPTS:

Asynchronous Web Programming, Difference between synchronous and asynchronous web programming,
AJAX, and JQuery, Web service and API development using PHP
Programs:

1. Write a PHP program to print Palindrome Number or not

2. Create Database using PHP MySQLi
3. Write a PHP program to print fibonacci series.

TEXT BOOKS:

1. Programming the World Wide Web -Robert Sebesta (Pearson Education) (Second Edition).
2. Learning PHP, MySQL, JavaScript, CSS & HTML5, 3rd Edition, Robin Nixon, O'Reilly

REFERENCE BOOKS:

1. PHP: The Complete Reference by Steven Holzer, McGraw-Hill

2. Harvey Deitel, Abbey Deitel, Internet and World Wide Web: How to Program 5th Edition.
3. Web Technology, Moseley and Savaliya, Wiley India
4. PHP and MySQL Web Development - Welling – (Pearson Education)-Fourth Edition.

WEB RESOURCES:
HTML:
a. [Link]
b. [Link]
c. [Link]
CSS:
a. [Link]
b. [Link]
c. [Link] d. [Link]
Java Script:
a. [Link]
b. [Link]
c. [Link] d. [Link]
PHP:
a. [Link]
b. [Link]

CO-PO/PSO Mapping Chart

(3/2/1 indicates strength of correlation)
3 – High; 2 – Medium; 1 – Low
Program Specific
Course Program Outcomes (POs)
Outcomes*
Outcomes
PO PO PO PO PO PO PO PO PO PO PO PO PSO PSO PSO
(COs)
1 2 3 4 5 6 7 8 9 10 11 12 1 2 3
CO1 2 1 2 2
CO2 3 1 2 1
CO3 2 1
CO4 2 1
 1. STUDENT ENTRY BEHAVIOR((List of Pre-Requisite Course if Any from I/II/III/IV Year)

1. Basic of c programming

3. COURSE OBJECTIVES

Course Objectives Course Objective Statements

Objective – 1 Be able to read and write HTML5 and CSS3.

Objective – 2 Know the importance of object oriented aspects of Scripting and JavaScript for web page

Objective – 3 Understand of server side script using PHP

Objective – 4 Learn Database programming with PHP and MySQL

4. LEARNING/COURSE OUTCOMES (Specific Course Outcomes)

The Department of Computer Science at HITAM has the following expected outcomes upon completion
of this course.

Course Outcome Course Outcome Statements

CO – 1 Design web pages using HTML and CSS.

CO – 2 Apply JavaScript for web page

CO – 3 Understand of server side script using PHP

CO – 4 Write a Database program with PHP and MySQL

Course Objective and Course Outcome Mapping

Outcome
CO1 CO2 CO3 CO4
Objective

Objective – 1 ✔

Objective – 2 ✔

Objective – 3 ✔

Objective – 4 ✔
 5. Mapping of Course with PEOs-PSOs-POs

Sl. No. PEOs Name Program Education Objective Statements

1 PEO - 1 To apply core data science concepts and tools to solve societal, and
engineering problems.

2 PEO – 2 To engage in lifelong learning or research opportunities to adapt to

the evolving field of data science and emerging technologies.

3 PEO – 3 To demonstrate leadership by working effectively in

interdisciplinary teams, contributing to the success of projects in
industries or academia

Program Specific Objectives (PSOs)

[Link]. PSOs Name Program Specific Objective Statements

1 PSO - 1 To develop machine learning models and data-driven solutions that

address practical problems in fields such as healthcare, finance,
manufacturing, and more.

2 PSO – 2 To apply ethical standards and critical thinking in data analysis, ensuring
data privacy, security, and responsible use of artificial intelligence.

Program Outcomes (POs)

PO Graduate Attributes PO Statements

Name

PO1 Engineering Apply the knowledge of mathematics, science, engineering fundamentals, and an engineering
knowledge specialization to the solution of complex engineering problems. [PEO’s: 1,2 and 3] [PSO’s: 1,2 and 3]

PO 2 Problem analysis Identify, formulate, review research literature, and analyze complex engineering problems reaching
substantiated conclusions using first principles of mathematics, natural sciences, and engineering
sciences. [PEO’s: 1,2 and 3] [PSO’s: 1,2 and 3]

PO 3 Design/ Design solutions for complex engineering problems and design system components or processes that
development of meet the specified needs with appropriate consideration for the public health and safety, and the
solutions cultural, societal, and environmental considerations. [PEO’s: 1,2 and 3] [PSO’s: 1,2 and 3]

PO 4 Conduct Use research-based knowledge and research methods including design of experiments, analysis and
investigations of interpretation of data, and synthesis of the information to provide valid conclusions. [PEO’s: 1,2 and
complex problems 3] [PSO’s: 1,2 and 3]

PO 5 Modern tool usage Create, select, and apply appropriate techniques, resources, and modern engineering and IT tools
including prediction and modeling to complex engineering activities with an understanding of the
limitations. [PEO’s: 1,2 and 3] [PSO’s: 1,2 and 3]
PO 6 The engineer and Apply reasoning informed by the contextual knowledge to assess societal, health, safety, legal and
society cultural issues and the consequent responsibilities relevant to the professional engineering practice.
[PEO’s: 2 and 3]

PO 7 Environment and Understand the impact of the professional engineering solutions in societal and environmental
sustainability contexts, and demonstrate the knowledge of, and need for sustainable development. [PEO’s: 1,2 and
3]

PO 8 Ethics Apply ethical principles and commit to professional ethics and responsibilities and norms of the
engineering practice. [PEO’s: 1,2 and 3] [PSO’s: 2 and 3]

PO 9 Individual and team Function effectively as an individual, and as a member or leader in diverse teams, and in
work multidisciplinary settings. [PEO’s: 1,2 and 3] [PSO’s: 3]

PO 10 Communication Communicate effectively on complex engineering activities with the engineering community and with
society at large, such as, being able to comprehend and write effective reports and design
documentation, make effective presentations, and give and receive clear instructions. [PEO’s: 1,2 and
3] [PSO’s: 2 and 3]

PO 11 Project management Demonstrate knowledge and understanding of the engineering and management principles and apply
and finance these to one’s own work, as a member and leader in a team, to manage projects and in
multidisciplinary environments. [PEO’s: 1 and 3] [PSO’s: 2 and 3]

PO 12 Life-long learning Recognize the need for, and have the preparation and ability to engage in independent and life-long
learning in the broadest context of technological change. [PEO’s: 1,2 and 3] [PSO’s: 1,2 and 3]

Course Mapping

Course Name PEO1 PEO2 PEO3 PSO1 PSO2 PSO3

√ √ √ √ √ √
Basic Web Development

Course Name Po1 Po2 Po3 Po4 Po5 Po6 Po7 Po8 Po9 Po10 Po11 Po12

Basic Web
√ √ √ √ √ √ √ √ √ √ √ √
Development
 [Link] Of Course Outcomes With PEOs

No Course PEO1 PEO2 PEO3

Outcomes
CO - 1 √ √
1

CO – 2 √ √
2

CO – 3 √ √
3

CO – 4 √ √ √
4

No Course PEO PEO2 PEO3 Average

Outcomes
CO - 1 1 2
1 3 2

CO – 2 1 2
2 2 3

CO – 3 1 2
3 3 2

CO – 4 3
4 3 2 2.3

Average 2.9 2.1 1.2 2.1

 [Link] Of Course Outcomes With PSOs

No Course Outcomes PSO1 PSO2

CO - 1
1 √
CO – 2
2 √
CO – 3
3 √
CO – 4
4 √

No Course Outcomes PSO1 PSO2 Average

CO - 1
1 2 1
CO – 2
2 1 0.5
CO – 3
3 1 0.5
CO – 4
4 1 0.5
Average
1.2 0.6
 8. Mapping Of Course Outcomes With POs

Course
No Po1 Po2 Po3 Po4 Po5 Po6 Po7 Po8 Po9 Po10 Po11 Po12
Outcomes
CO - 1
1   
CO – 2
2   
CO – 3
3 
CO – 4
4 

Course Po1 Po12 Average

No Po1 Po2 Po3 Po4 Po5 Po6 Po7 Po8 Po9 Po11
Outcomes 0

CO - 1 0.4
1 2 1 2
CO – 2 0.5
2 3 1 2
CO – 3 0.1
3 2
0.1
CO – 4
4 2
Average 0.3
1.2 0.5 1 1

9. Direct Course Assessment

 Course
No Description Targeted Performance Actual Performance Remarks
Attainment
1 Internal 60% of Students(18 Students) Exams in Process All Course Outcomes in general Exams in
Marks(40) should Secure 60% of attained & Marks Awarded or Process
Internal Marks i.e., 24 Marks Attainment Level is 3(Strong &
High)
2 External 60% of Students(18 Students) Exams in Process All the Course Outcomes in Exams in
Marks(60) should Secure 70% of general attained & Marks Process
External Marks i.e., 42 Marks Awarded or Attainment Level is
3(Strong & High)
3 Clearing of A minimum of 80% of Exams in Process All Course Outcomes in general Exams in
Subject(60) Students(24 Students) should attained & Marks Awarded or Process
clear this course in first Attainment Level is 3(Strong &
attempt High)
4 Getting First 50% of Students(15 Students) Exams in Process All Course Outcomes in general Exams in
Class should Secure I Class Marks attained & Marks Awarded or Process
i.e., 36 Marks in my course Attainment Level is 3(Strong &
High)
5 Distinction 20% of Students should Exams in Process All the Course Outcomes in Exams in
secure First Class With general attained & Marks Process
Distinction Awarded or Attainment Level is
1.5M(Low)
6 Outstanding 10% of Students should Exams in Process All the Course Outcomes in Exams in
Performance secure 80% and above general attained & Marks Process
Marks. Awarded or Attainment Level is
1.5M(Low)
7 PBL-10M 80% of Students(24 Students) Exams in Process All Course Outcomes in general Exams in
should secure 80% of attained Marks Awarded or Process
Assignment Marks i.e., 8M. Attainment Level is 3(Strong &
High)
8 Quiz-5M 60% of Students(18 Students) Exams in Process All the Course Outcomes in Exams in
should secure 50% of Quiz general attained & Marks Process
Test Marks i.e., 3M. Awarded or Attainment Level is
2.M(Moderate)

Average

HITAM
 Department of Computer Science & Engineering
Direct Methods: Internal Marks Assessment (Sample Copy)

10. Indirect Course Assessment

 (As mentioned-strong (3), moderate (2), weak (1) & no comment (0))

Mission Statement of CSE

 1
 2
 3.

Correlation of Mission Elements with Mission Statement of CSE Department related to the Course (only
Ticking given by faculty)

No
No Mission Elements Strong Moderate Weak
Comment
Departmental Mission 1 (Competency
M-1
Building) √
Departmental Mission 2 (Research and
M-2
Innovation) √
Departmental Mission 3 (Industry
M-3
Collaboration √
M-4
Departmental Mission 4 (Holistic
Growth)
√
 Indirect Course Assessment through Student Satisfaction Survey
(Note for *:Parameters used for course teaching like
a: Classroom teaching b: Simulations c:labs d: Mini_Projects
e: Major Projects f: Conferences g: professional activities
h: Technical Clubs i: Guest Lectures j: Workshops k: Technical Fests l:Tutorials
m:NPTLs n:Digital Library o: Industrial Visits
p: software Tools q: Internship/training r:Technical Seminars
s: NSS t: NSS u: sports etc.
Further assume other parameters if any)

No Question Based on PEO/ PO/PSO/CO Parameters Strong Moderate (2) Weak (1) No comment (0)
(a /b /c…/)* (3)
1 Did the course impart fundamentals
through interactive learning and a,b,c,d,m,p 3
contribute to core competence?
2 Did the course provide the required
knowledge to foster continuous a,c,m,n,r 2
learning?
3 Whether the syllabus content
anticipates & satisfies the industry a,c,h,m,r 2
and societal needs?
4 Whether the course focuses on value
based education to be a socially a,c,h,m,r 2
committed professional?
5 Rate the role of the facilitator in
mentoring and promoting the self
a,c,h,m,r 3
learning abilities to excel
academically and professionally?
6 Rate the methodology adopted and
techniques used in teaching learning a,c,m,n,r
3
processes?
7 Rate the course in applying sciences
& engineering fundamentals in
a,c,h,m,n,r 2
providing research based conclusions
with the help of modern tools?
8 Did the course have any scope to
design, develop and test a system or a,c,h,m,r 2
component?
9 Rate the scope of this course in
addressing cultural, legal, health, d,e 3
environment and safety issues?
10 Scope of applying management
fundamentals to demonstrate effective
technical project presentations & a,c,n,h 3
report writing?

Total
15 10
Average
Total Average 2.5
 11. Overall Course Assessment

Sno Assessment Type Weightage Attainment Level

Direct-Assignment, Quiz, Subjective, University

1
Exams, Results, Bench Marks

2 Indirect-Surveys-Questionnaire

Overall

Course Attainment level: Compiler Design Course=2.92

 12. Pi diagrams, Bar charts, Histograms

Pass % for last 3 Academic Years Appeared Passed Pass%

2024-25

2023-24

2022-23
 13. Lesson/Course Plan

Subject : Basic Web Development

No
S Taug
of Planne Execut
N Planned Topic ht Pedagogy
Hou d Date ed Date
o Topic
rs
What is Internet? Introduction to internet and its applications, Peer
1 World Wide Web (WWW) and its evolution 1 Learning
uniform resource locator (URL), browsers – internet explorer,
Netscape navigator, opera, Firefox, chrome, Mozilla. search Peer
2 engine, 1 Learning
3 web saver – apache, IIS, proxy server, HTTP protocol 1 ppt
Concepts of effective web design, Web design issues including
4 Browser
1 ppt
Bandwidth and Cache, display resolution, Look and Feel of
5 1 ppt
the Website
6 Page Layout and linking, User centric design, Sitemap 1 ppt
, Planning and publishing website, Designing effective
7 navigation
1 ppt
7
UNIT-II
Hands on
8 BASICS OF HTML: 2
programs
Hands on
9 1
Structure of HTML page, HTML tags for data formatting programs
1 Hands on
1
0 tables, links, images, meta tags, programs
1
1 tables, links, images, meta tags, ppt
1 Hands on
2
2 frames, html form tags, programs
1 Hands on
2
3 media, APIs, programs
1 Hands on
1
4 HTML5 tags and validation. programs
1 Hands on
BASICS OF CSS: 2
5 programs
1 Need for CSS, Syntax and structure, CSS rules for Backgrounds, Hands on
6 Colors and properties, programs
1 manipulating texts, Fonts, borders and boxes, Margins, Padding Hands on
2
7 Lists programs
CSS Positioning. Animations, Tool-Tips, Style images,
1 Hands on
Variables, Media Queries, Wildcard Selectors (*, ^ and $) in 2
8 CSS programs
15
UNIT-III
1 Introduction to object oriented Programming-Features of Java –
5 Data types, variables and arrays 2 ppt
1
6 Operators – Control statements – 2 ppt
1 Demonstrati
7 Classes and Methods – Inheritance 2 on
1
2
8 Packages and Interfaces –Exception Handling ppt
1
9 CLIENT SIDE SCRIPTING USING JAVASCRIPT:
2
1
0 Client Side Scripting using JavaScript Syntax of JavaScript, PPT

2
1

Execution of JavaScript,, Embedded and External JavaScript,

JavaScript: variables, 1 ppt
2
2 arrays, functions, conditions, loops, Pop up boxes, 1 ppt
2 JavaScript objects and DOM, JavaScript inbuilt functions,
3 JavaScript validations 1 ppt
7
UNIT-IV
2
INTRODUCTION TO PHP:
4 1 ppt
2 Difference between Client side and Server side scripting, Demonstrati
5 Structure of PHP page, 1 on
2 Advantages of PHP – Installation & Configuration PHP Syntax: Hands on
6 variables 1 program
2 Hands on
7 decision and looping with examples. 2 program
2
SERVER SIDE SCRIPTING – PHP: Hands on
8 2
2
Hands on
9 PHP and HTML, Arrays and Functions, String, Form processing, 1
3 File uploads, Dates and time zone, working with Regular ppt
0 Expressions, 1
3 Exception Handling, Basic concepts of Session and State, State Hands on
1 management using query string, 1 program

3 Hands on
2 hidden form controls, Cookies, Session variables 2 program
10
UNIT-V
3
DATABASE PROGRAMMING WITH PHP AND MYSQL:
3 2 ppt
3 Basic MySQL commands, PHP functions for database Demonstrati
4 connectivity 1 on
3 Demonstrati
5 Implementation of CRUD operations using PHP, 1 on
3
Prepared Statement and stored procedure execution in PHP
6 2 ppt
3 Demonstrati
ADVANCED WEB PROGRAMMING CONCEPTS:
7 1 on
3 Asynchronous Web Programming, Difference between Demonstrati
8 synchronous and asynchronous web programming, 1 on
3 Demonstrati
9 AJAX, and JQuery, 1 on
4 Demonstrati
0 Web service and API development using PHP 1 on
10
14. Actions and Assessment Plan (to improve the course to meet the objectives)
Students have to attend the lectures regularly and Scribe the Lecture notes on the day of the lecture.

There are the requirements other than attending lectures.

Actions
Based on these requirements certain actions are employed to improve the course plan to meet the objectives.

Assignments
Lightweight homework assignments are posted which will be able to cover some related research and
implementation works.

Mini project
Instructions on the Mini-Projects

This is a group project, with two or three students in each group, and of course, all students in a group will
receive the same mark for the project.

Requirements
Students are required to submit

o Project Report: The report must describe the system model: all the major modules
(classes/methods) used in the system, and the relationships among them. Based on the System
Model design the UML nine diagrams. For each diagram, the report must explain how the
solutions were implemented, and list all the components and relationships. The explanation
should be a concise high level description such that the implementation can be easily
understood by its readers. The report should be written in font size 12 and at most 30 pages.

o User Documentation: students must submit an electronic copy of the user documentation. The
user documentation must contain
 The installation guideline that tells the user how to install the software; and
 A user manual for each module.
The document must also be accessible in the web page in the form of help menu.


Each group will be asked to demo the system. The demo will last at most 30 minutes, and
please make sure the project compiles and runs correctly on the lab machine and the web-pages
display correctly using the browser available in the lab machines.
Students must make sure their system is ready before the scheduled demo. No later submission will be
accepted.
[Link] Notes