COMPUTER SCIENCE AND ENGINEERING

YEAR OF
CATEGORY L T P CREDIT INTRODUCTION
CST463 WEB PROGRAMMING
PEC 2 1 0 3 2019

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 Use HyperText Markup Language (HTML) for authoring web pages and understand
the fundamentals of WWW. (Cognitive Knowledge Level: Understand)

CO2 Construct and visually format responsive, 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)

CO5 Explain the importance of object exchange formats using JSON and the MVC based
web application development frameworks (Laravel) (Cognitive Knowledge Level:
Understand)

Mapping of course outcomes with program outcomes

PO PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
1

CO1

CO2

CO3

CO4

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

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
PO4 complex problems PO10 Communication

PO5 Modern tool usage PO11 Project Management and Finance

PO6 The Engineer and Society PO12 Life long learning

Assessment Pattern

Continuous Assessment Tests

Bloom’s End Semester Examination
Category Marks (%)
Test 1 (%) Test 2 (%)

Remember 20 20 20

Understand 40 40 40

Apply 40 40 40

Analyze

Evaluate
Create

Mark Distribution

Total Marks CIE Marks ESE Marks ESE Duration

150 50 100 3

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

Continuous Internal Evaluation Pattern:

Attendance 10 marks
Continuous Assessment Tests (Average of Internal Tests 1 & 2) 25 marks
Continuous Assessment Assignment 15 marks

Internal Examination Pattern

Each of the two internal examinations has to be conducted out of 50 marks.
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 full questions from each module of which student should answer any one. Each
question can have a maximum of 2 subdivisions 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..

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 -

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

Backgrounds-List Styles-Element Dimensions- Table Layouts-Box Model and Text Flow-div and
span -Basics of Responsive CSS, 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 -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- Operators and Expressions -Flow Control
functions - Control statements- Working with Functions- Initialising and Manipulating Arrays--
Objects- String Comparisons-String processing with Regular Expression

Module -4 (PHP- MySQL, JSON)

Advanced PHP: Form processing and Business Logic-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, Object, JSON Schema, 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.

Text Books

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

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

Reference Books

1. Robert W Sebesta, Programming the World Wide Web, 7/e, Pearson Education Inc,8th Edition
2. Larry Ullman, Pearson- PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide
3. Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet",Wrox-
Professional Web 2.0 Programming, Wiley-India edition
4. Web Technologies Black Book 2018(As per Mumbai University Syllabus) HTML, CSS3,
JavaScript, iQuery, AJAX,PHP,XML,MVC and Laravel DT Editorial Services (ISBN:
9789386052490)

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

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

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.

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

Model Question Paper

QP CODE:

Reg No: _______________

Name: _________________ PAGES : 4

APJ ABDUL KALAM TECHNOLOGICAL UNIVERSITY

SEVENTH SEMESTER B.TECH DEGREE EXAMINATION, MONTH & YEAR

Course Code: CST463

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

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

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 (8)
implemented using HTML? Write HTML code to implement a form which
has the following elements:
i. A textbox which 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 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 “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 (8)
following contents: your name, address, Mobile Number and email address.
Also add the details about your college, university, your major and the batch

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

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.

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

(b) Write CSS and the corresponding HTML code for the following: (6)
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 3%
margin for the pages
iv. Set dashed border for left and right and double border for top & bottom
of a table with 2 rows.

OR

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

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

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 (8)
create an array in PHP with an example. Explain any 4 functions that deals
with PHP array.

OR

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

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

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

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 syntax for setting (6)
cookies in PHP. How can you access and delete the cookie using setcookie()
function?

OR

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

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

19. (a) With a neat diagram, explain about Laravel MVC Framework. (6)

(b) Discuss in detail about Laravel’s Routing mechanisms. (8)

OR

20. (a) Enumerate the data types in JSON. Illustrate the document definition of a (8)
‘Student document ‘using JSON Schema.

(b) Discuss the following in Laravel Views (6)

i. Creating & Rendering Views
ii. Passing Data to Views
iii. Sharing Data with All Views

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

Teaching Plan

No of
Lecture
No Contents
Hrs (35
hrs)

Module 1 (7 hours)

Introduction to Internet and WWW

1.1 Evolution of Internet &World Wide Web- Web Basics URI’s & URL -MIME 1
[Book 1 - Chapter 1]

Introduction to HTML5

1.2 Structuring & editing an HTML5 document- Fundamentals of HTML, Headings- 1

Images [Book 1 - Chapter 2]

1.3 Hyper Links, Internal Linking- Lists [Book 1 - Chapter 2] 1

1.4 Special Characters & Horizontal Rules- meta Elements- div and span 1
[Book 1 - Chapter 2]

1.5 Tables- Forms [Book 1 - Chapter 2] 1

1.6 HTML5 Form input types, input and data list Elements and autocomplete 1
attributes-Page Structure Elements [Book 1 - Chapter 3]

1.7 Multimedia-HTML5 Audio & video elements [Book 1 - Chapter 9] 1

Module 2 (10 hours)

Introduction to Cascading Style Sheets(CSS)

2.1 Introduction to CSS3-Basic syntax and structure-Inline Styles [Book 1 - Chapter 4] 1

2.2 Embedded Style Sheets-Linking External Style Sheets [Book 1 - Chapter 4] 1

2.3 Exploring CSS Selectors-Properties-values [Book 1 - Chapter 4] 1

2.4 Positioning Elements: Absolute Positioning- Relative Positioning -Backgrounds- 1

List Styles- Table Layouts [Book 1 - Chapter 4]

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

2.5 Box Model and Text Flow, Basics of Responsive CSS-Media port & Media 1
Queries [Book 1 - Chapter 4]

Introduction to JavaScript

2.6 Introduction to Scripting- Programming fundamentals of JavaScript -Obtaining 1

User Input with prompt Dialogs [Book 1 - Chapter 6]

2.7 Arithmetic-Decision Making [Book 1 - Chapter 6] 1

2.8 Control Statements [Book 1 - Chapter 7]- Functions [Book 1 - Chapter 9] 1

2.9 Arrays [Book 1 - Chapter 10] - Objects [Book 1 - Chapter 11] 1

2.10 Document Object Model (DOM)- Form processing [Book 1 - Chapter 12,13] 1

Module 3 (6 hours)

Introduction to PHP

3.1 Building blocks of PHP-Variables, Data Types simple PHP program [Book 3- 1
Chapters 4]

3.2 Converting between Data Types, Operators and Expressions -Flow Control 1
functions [Book 1- Chapters 19]

3.3 Control Statements -Working with Functions [Book 3- Chapters 6] 1

3.4 Initialising and Manipulating Arrays- Objects [Book 1- Chapters 19] 1

3.5 Working with Strings-String processing with Regular expression, Pattern Matching 1
[Book 1- Chapters 19]

3.6 Form processing and Business Logic [Book 1- Chapters 19] 1

Module 4 (6 hours)

PHP -MYSQL

4.1 Cookies- Sessions [Book 1- Chapters 19] 1

4.2 PHP& MySQL Integration-Connecting to MySQL with PHP . 1

[Book 4- Chapters 18]

Downloaded from Ktunotes.in

 COMPUTER SCIENCE AND ENGINEERING

4.3 Working with MySQL data [Book 4- Chapters 18] 1

4.4 Performing CREATE, DELETE, INSERT operations on MySQL table from PHP 1
Program. [Book 4- Chapters 16]

4.5 Performing SELECT and UPDATE operations on MySQL table from PHP 1
Program. [Book 4- Chapters 16]

4.6 Building Dynamic Content in PHP application [Book1- Chapter19] 1

Module 5 (6 hours)

JSON

5.1 JSON Data Interchange Format -Syntax, Data Types, Object 1

[Book 2 - Chapters 1-2]

5.2 JSON Schema, Manipulating JSON data with PHP [Book 2 - Chapter 3,4] 1

LARAVEL

5.3 Laravel Overview- Design Pattern- Laravel Features [Book 4- Chapters 1] 1

Setting up a Laravel Development Environment-Application structure of Laravel
[Book 4- Chapters 2]

5.4 Laravel Basics Routing -middleware - Controllers [Book 4- Chapters 3] 1

5.5 Route Model Binding-Views-Redirections [Book 4- Chapters 3] 1

5.6 Blade Templating-echoing data, control structures [Book 4- Chapters 4] 1

Downloaded from Ktunotes.in