CXT WEB PROGRAMMING CATEGORY L T P CREDIT YEAR OF

305 INTRODUCTION

PCC 3 1 0 4

Preamble: This course helps the learners to understand the web programming concepts. It
includes the essential frontend and backend technologies needed for the development of web
applications. The learners will have an opportunity to gain necessary web development skills
such as HTML, CSS, JavaScript, PHP, MySQL integration, JSON and Laravel framework.

Prerequisite: Knowledge of Programming is required.

Course Outcomes: After the completion of the course the student will be able to

CO1 Explain Hypertext Markup Language (HTML) concepts and fundamentals of WWW.
(Cognitive Knowledge Level: Understand)
CO2 Design responsive and interactive web pages using CSS and JavaScript (JS)
(Cognitive Knowledge Level: Apply)
CO3 Construct websites using advanced sever side programming tool PHP (Cognitive
Knowledge Level: Apply)
CO4 Develop dynamic web applications using PHP and perform MySQL database
operations. (Cognitive Knowledge Level: Apply)
Illustrate the importance of object exchange formats using JSON and the MVC based
CO5 web application development frameworks (Laravel) (Cognitive Knowledge Level:
Apply)

Mapping of course outcomes with program outcomes

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO1 PO11 PO1
0 2

CO1

CO2

CO3

CO4

CO5
 Abstract Pos defined by National Board of Accreditation

PO# Broad PO PO# Broad PO

PO1 Engineering Knowledge PO7 Environment and Sustainability

PO2 Problem Analysis PO8 Ethics

PO3 Design/Development of solutions PO9 Individual and team work

Conduct investigations of complex

PO4 PO10 Communication
problems

PO5 Modern tool usage PO11 Project Management and Finance

PO6 The Engineer and Society PO12 Life long learning

Assessment Pattern

Bloom’s Continuous Assessment Tests End Semester

Category Examination
Test1(Marks) Test2(Marks)
Marks

Remember 20 20 20

Understand 40 40 40

Apply 40 40 40

Analyze

Evaluate

Create
Mark Distribution

Total Marks CIE ESE Marks ESE Duration

Marks

150 50 100 3 hours

Continuous Internal Evaluation Pattern:

Attendance :10 marks
Continuous Assessment-Test :25 marks
Continuous Assessment -Assignment :15 marks

Internal Examination Pattern:

Each of the two internal examinations has to be conducted out of 50 marks. The first series test
shall be preferably conducted after completing the first half of the syllabus and the second
series test shall be preferably conducted after completing the remaining part of the syllabus.
There will be two parts: Part A and Part B. Part A contains 5 questions (preferably, 2 questions
each from the completed modules and 1 question from the partly completed module), having 3
marks for each question adding up to 15 marks for part A. Students should answer all questions
from Part A. Part B contains 7 questions (preferably, 3 questions each from the completed
modules and 1 question from the partly completed module), each with 7 marks. Out of the 7
questions, a student should answer any 5.

End Semester Examination Pattern:

There will be two parts; Part A and Part B. Part A contains 10 questions with 2 questions from
each module, having 3 marks for each question. Students should answer all questions. Part B
contains 2 questions from each module of which a student should answer any one. Each
question can have maximum 2 sub-divisions and carries 14 marks.
 Syllabus

Module – 1 (WWW, HTML)

Introduction to the Internet & WWW: Evolution of Internet & World Wide Web-Web Basics,
URI’s & URL-MIME.
Introduction to HTML5: Structuring & editing an HTML5 document, Fundamentals of HTML-
Headings-Hyper Links-Images-Special Characters & Horizontal Rules-Lists-Tables-Forms-Internal
Linking-Meta Elements-HTML5 Form input types-Input and Data List Elements and autocomplete
attribute-Page Structure Elements-Multimedia-HTML5 Audio & video elements, HTML graphics,
HTML APIs.

Module -2 (CSS, JavaScript)

Introduction to Stylesheets: Introduction to CSS-Basic syntax and structure-Inline Styles, Embedded
Style Sheets, Conflict Resolution, Linking External Style Sheets-Exploring CSS Selectors-Properties,
values, Positioning Elements: Absolute Positioning, Relative Positioning - Backgrounds-List Styles-
Element Dimensions- Table Layouts-Box Model and Text Flow-div and span -Basics of Responsive
CSS, CSS forms, Media port & Media Queries.
Introduction to JavaScript: Introduction to Scripting- Programming fundamentals of JavaScript-
Obtaining User Input with prompt Dialogs-Arithmetic-Decision Making -Control Statements-
Functions -Arrays-classes, Objects -Document Object Model (DOM) -Form processing.

Module- 3 (PHP Basics)

PHP Language Structure: Introduction- Building blocks of PHP-Variables, Data Types -simple PHP
program-Converting between Data Types- PHP numbers, Operators and Expressions -Flow Control
functions - Control statements- Working with Functions- Initializing and Manipulating Arrays-- Objects-
String Comparisons-String processing with Regular Expression

Module -4 (PHP- MySQL)

Advanced PHP: Form processing and Business Logic-PHP filters, Cookies- Sessions & MySQL
Integration- Connecting to MySQL with PHP- Performing CREATE, DELETE, INSERT, SELECT
and UPDATE operations on MySQL table -Working with MySQL data-Reading from Database-
Dynamic Content.
Module- 5 (JSON, Laravel)
JSON Data Interchange Format: Syntax, Data Types, arrays, Object, JSON Schema, JSON server,
Manipulating JSON data with PHP
Web Development Frameworks: Laravel Overview-Features of Laravel-Setting up a Laravel
Development Environment-Application structure of Laravel-Routing -Middleware-Controllers- Route
Model Binding-Views-Redirections-Request and Responses.
Textbook

1 Paul J. Deitel, Harvey M. Deitel, Abbey Deitel, Internet & World Wide Web How to Program 5th
Edition Pearson Education.
2. Lindsay Bassett, Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON 1st Edition,
O’Reilly.
3. Julie C. Meloni, PHP, MySQL & JavaScript All in One, Sams Teach Yourself, 5th Ed, Sams Publishing.
4. Matt Stauffer,” LARAVEL up and Running, A framework for building modern PHP apps” 1st Edition,
O’Reilly.

Reference Books

1. Robert W Sebesta, Programming the World Wide Web, 7/e, Pearson Education Inc,8th Edition
2. Larry Ullman, PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide, Peachpit Press
3. Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet, Wrox- Professional
Web 2.0 Programming, Wiley-India edition

Course Level Assessment Questions

Course Outcome 1 (CO1):

1. Construct a valid HTML document for your personal Profile registration page for a Job Site
www.123Jobs.com. Add relevant HTML elements in a table, to accept a minimum of 10 different fields
which includes your name, address, phone, email address, your picture, your college; your branch, fields
for your personal history (Minimum 3 fields), favourite theory and practical subjects (Checkbox),
Username, Password(password)
2. What is MIME? Give the expansion of MIME. List four examples for MIME types. State the reason
why MIME type specification is necessary in a request-response transaction between a browser and server.
3. What is codec? Recognize the role of controls attribute in <video>&<audio> tag in HTML. Use the
COVID vaccination promotional video ‘MySafety.mp4’ in a web page with suitable HTML code,
‘autoplay’ option enabled and displayed in a standard dimension 750 X500.

Course Outcome 2 (CO2):

1. Organize a sample web page for the event ‘Raagam2021’ at your campus and use embedded Style
sheets to apply a minimum 5 styles. State the Style Specification format of embedded style sheets.
2. Write CSS style rules to implement the following in a web page:
a. To display the content of hyperlinks with yellow background color and in italics.
b. To display the contents of unordered lists in bold and in Arial font.
c. To display a background image titled “birds.jpg” with no tiling.

3. Write the code for an HTML document with embedded JavaScript scripts, which initially displays a
paragraph with text "Welcome" and a button titled "Click". When the button is clicked, the message
"Hello from JavaScript" in bold should replace the paragraph text.
Course Outcome 3 (CO3):

1. Write a PHP program to store the name and roll no of 10 students in an Associative Array and Use
foreach loop to process the array and perform asort, rsort and ksort in the array. Illustrate with suitable
output data.
2. Design an HTML page which enters a given number, write a PHP program to display a message
indicating, whether the number is odd or even, when clicking on the submit button.
3. Write a PHP program to compute the sum of the positive integers up to 100 using do while.

Course Outcome 4 (CO4):

1. Write a PHP form handling program to verify the user authentication credentials of a web page using
MySQL connection and store the userid value as a Session variable if the userid is valid.
2. Create a valid HTML document for yourself, including your name, address, and email address. Also add
your college; your major and the course. Perform form handling in PHP and process the output using
POST method.
3. Write an embedded PHP script which displays the factorial of all numbers from 1 to 10 in a table in the
web page. The factorial should be calculated and returned from a function. The table headings should be
"Number" and "Factorial"

Course Outcome 5 (CO5):

1. What is Route Model Binding in Laravel? Which types of route model binding are supported in Laravel?
2. Explain how Laravel performs route handling using routes calling controller methods.
3. List the data types used in JSON. Explain the use of parse () and stringify() functions in JSON with
examples.
 Model Question Paper
QP CODE:
Reg No: _______________
Name: _________________ PAGES: 4
APJ ABDUL KALAM TECHNOLOGICAL UNIVERSITY
FIFTH SEMESTER B. TECH DEGREE EXAMINATION, MONTH & YEAR

Course Code: CXT 305

Course Name: Web Programming
Max. Marks: 100 Duration: 3 Hours
PART A
Answer All Questions. Each Question Carries 3 Marks

1. Define WWW. List any two examples of web server & web browser. Differentiate
between URL and a domain.

2. Write the syntax of the URL? Rewrite the default URL of your university website by
adding a subdomain named ‘Research’ and a web page named ‘FAQ.html’. Also link
this URL through the logo of ‘kturesearch.png’ placed in a web page. The FAQ page
should be opened in a new window.

3. Illustrate the implementation of a JavaScript function greeting () using external .js

file, to display a welcome message, when you click on a Button in an HTML page.

4. What are different ways of adjusting spacing in a text with suitable example.

5. Discuss the various CSS style sheet levels with suitable examples. How are conflicts
resolved when multiple style rules apply to a single web page element?

6. Describe how input from an HTML form is retrieved in a PHP program, with an
example.

7. Write a PHP program to check whether a number is prime number or not.

 8. Discuss the various steps for establishing PHP-MySQL connection with a MySQL
database.

9. Describe the schema of a document implemented in JSON with suitable examples.

10. Explain the role of Resource controllers in Laravel.

(10x3=30)

Part B

(Answer any one question from each module. Each question carries 14 Marks)

11. (a) Design a webpage that displays the following table. (6)

(b) What is the difference between radio buttons and checkboxes when implemented (8)
using HTML? Write HTML code to implement a form that has the following elements:
i. A textbox that can accept a maximum of 25 characters.
ii. Three radio buttons with valid Label, Names, and values.
iii. Three check boxes buttons with valid Label, Names, and values.
iv. A selection list containing four items, two of which are always visible.
v. A submit button clicking on which will prompt the browser to send the form data to the server
“http://www..mysite.com/reg.php” using the “POST” method and reset button to clear its contents.
You can use any text of your choice to label the form elements.

OR

12. (a) Write the equivalent HTML code to implement the following in a web page: (6)
(i) An image titled “birds.jpg” with a height of 100 pixels and width of 200 pixels. If the
image cannot be accessed, a message “No image available” should be displayed (ii) A
hyperlink to the URL “www.mysite.com/birds.jpg”. The hyperlink should have the label
“Click Here”.

(b) Create a static HTML document for your portfolio, which includes the following contents: your
name, address, Mobile Number, and email address. Also add the details about your college,
university, major and the batch of study. Include a picture of yourself and at least one other image
(friend/pet/role model) to the document with a short description about that. Add three paragraphs
about your personal history, with links to your social media profile. Also, create an ordered list for
describing your Skill Set & an unordered list showing your Strengths & Weaknesses.
(8)

13. (a) Illustrate the usage of JavaScript DOM in event handling and explain any three methods
with examples. (8)

(b) Write CSS and the corresponding HTML code for the following:
i. Set the background color for the hover and active link states to "green"
ii. Set the list style for unordered lists to "square".
iii. Set "Flower.png" as the background image of the page and set a 3% margin for the
pages
iv. Set a dashed border for the left and right and a double border for the top & bottom of a
table with 2 rows. (6)

OR

14. (a) List the order of precedence of style levels. Organize a sample web page for providing
‘KTU BTech Honours Regulation 19’ for KTU and use an embedded Style sheet to apply
minimum 5 styles for list, tables and pages.
(6)

(b) Illustrate the different ways of Array declaration in JavaScript. Describe the function of the
following JavaScript Array object methods with examples. (i) join (ii) slice. (8)

15. (a) Explain any six-string handling functions used in PHP with example. (6)
(b) How does a PHP array differ from an array in C? List the different ways to create an array in
PHP with an example. Explain any 4 functions that deals with PHP array. (8)

OR

16. (a) During the process of fetching a web page from a web server to a client browser, at what
point does an embedded PHP script get executed? What are the two modes that the PHP processor
operates in? Explain. (6)

(b) Why is PHP considered to be dynamically typed? Distinguish between (8)

implode and explode function in PHP with suitable examples.
17. (a) Write equivalent PHP statements corresponding to the following: (8)
i. Declare an associative array named “ages” to store the key-value pairs (“Alice”, 30),
(“Bob”, 30), (“Harry”, 35), (“Mary”, 32).
ii. Modify the value associated with the key “Mary” to 28.
iii. Sort the array according to values maintaining the key-value relationships and print
the sorted key-value pairs.
iv. The entry identified by the key “Bob”

(b) What are the uses of cookies in web pages? Describe the syntax for setting cookies in PHP.
How can you access and delete the cookie using setcookie() function?
 (6)

OR

18. (a) Write a PHP form handling program to perform the user registration of any website with a
minimum of 5 different fields and insert the data into a MySQL table after establishing necessary
connections with the DB.
(8)

(b) Design the HTML page which enters a given number and embeds the PHP code to display a
message indicating, whether the number is odd or even, when clicking on the ‘CHECK NUMBER’ button.
(6)

19. (a) With a neat diagram, explain about Laravel MVC Framework. (6)
(b) Discuss in detail Laravel’s Routing mechanisms. (8)

OR
20. (a) Enumerate the data types in JSON. Illustrate the document definition of a ‘Student document ‘using
JSON Schema. (8)
(b) Discuss the following in Laravel Views (6)
i. Creating & Rendering Views.
ii. Passing Data to Views.
iii. Sharing Data with All Views.
 Teaching Plan

No Contents No of
Lecture Hrs
(45 hrs)
Module 1 (9 hrs)
1.1 1
Introduction to the Internet & WWW: Evolution of Internet & World
Wide Web-Web Basics, URI’s & URL-MIME.
1.2 1
Introduction to HTML5: Structuring & editing an HTML5 document
1.3 Fundamentals of HTML- Headings 1
1.4 Hyper Links-Images-Special Characters & Horizontal Rules 1
1.5 Lists-Tables-Forms- 1
1.6 Internal Linking-Meta Elements 1
1.7 HTML5 Form input types-Input and Data List Elements and 1
autocomplete attribute
1.8 Page Structure Elements-Multimedia-HTML5 Audio & video elements 1
1.9 HTML graphics, HTMl APIs 1
Module 2 (12 hrs)
2.1 1
Introduction to Stylesheets: Introduction to CSS-Basic syntax and
structure
2.2 1
Inline Styles, Embedded Style Sheets
2.3 1
Conflict Resolution, Linking External Style Sheets
2.4 1
Exploring CSS Selectors-Properties, values
2.5 1
Positioning Elements: Absolute Positioning, Relative Positioning
2.6 1
Backgrounds-List Styles-Element Dimensions
2.7 1
Table Layouts-Box Model and Text Flow-div and span
2.8 1
Basics of Responsive CSS, CSS forms, Media port & Media Queries.

2.9 Introduction to JavaScript: Introduction to Scripting- Programming 1

fundamentals of JavaScript
2.10 Obtaining User Input with prompt Dialogs- Arithmetic-Decision Making 1
2.11 -Control Statements- Functions -Arrays-classes 1

2.12 Objects -Document Object Model (DOM) -Form processing. 1

Module 3 (8 hrs)
3.1 1
PHP Language Structure: Introduction- Building blocks of PHP

3.2 Variables, Data Types -simple PHP program 1

3.3 Converting between Data Types- PHP numbers 1
3.4 Operators and Expressions -Flow Control functions 1
3.5 Control statements- Working with Functions 1
3.6 Initializing and Manipulating Arrays 1
3.7 Objects- String Comparisons 1
3.8 String Comparisons-String processing with Regular Expression 1

Module 4 (8 hrs)
4.1 Advanced PHP: Form processing and Business Logic 1

4.2 1
PHP filters
4.3 Cookies 1
4.4 Sessions & MySQL Integration 1
4.5 Connecting to MySQL with PHP 1
4.6 Performing CREATE, DELETE, INSERT 1
4.7 SELECT and UPDATE operations on MySQL table 1
4.8 Working with MySQL data-Reading from Database- Dynamic Content. 1

Module 5 (8 hrs)
5.1 JSON Data Interchange Format: Syntax, Data Types 1

5.2 1
arrays, Object
5.3 1
JSON Schema, JSON server
5.4 1
Manipulating JSON data with PHP
5.5 1
Web Development Frameworks: Laravel Overview
5.6 1
Features of Laravel-Setting up a Laravel Development Environment
5.7 Application structure of Laravel-Routing 1

5.8 Middleware-Controllers- Route Model Binding-Views-Redirections- 1

Request and Responses.