A Laboratory Manual for

Web Development
(3151606)

B.E. Semester 5
(Information Technology)
 L.D. COLLEGE OF ENGINEERING, AHMEDABAD

Certificate

This is to certify that Mr./Ms. ___________________________________ ________

Enrollment No. _______________ of B.E. Semester _____ Information
Technology of this Institute (GTU Code: 028) has satisfactorily completed
the Practical / Tutorial work for the subject Web Development
(3151606) for the academic year 2023-24.

Place: __________________
Date: __________________

Name and Sign of Faculty member

Head of the Department

Dr. H.M.Diwanji
Web Development (3151606)

Preface

Main motto of any laboratory/practical/field work is for enhancing required skills as well
as creating ability amongst students to solve real time problem by developing relevant
competencies in psychomotor domain. By keeping in view, GTU has designed competency
focused outcome-based curriculum for engineering degree programs where sufficient
weightage is given to practical work. It shows importance of enhancement of skills amongst
the students, and it pays attention to utilize every second of time allotted for practical
amongst students, instructors and faculty members to achieve relevant outcomes by
performing the experiments rather than having merely study type experiments. It is must
for effective implementation of competency focused outcome-based curriculum that every
practical is keenly designed to serve as a tool to develop and enhance relevant competency
required by the various industry among every student. These psychomotor skills are very
difficult to develop through traditional chalk and board content delivery method in the
classroom. Accordingly, this lab manual is designed to focus on the industry defined
relevant outcomes, rather than old practice of conducting practical to prove concept and
theory.

By using this lab manual students can go through the relevant theory and procedure in
advance before the actual performance which creates an interest and students can have
basic idea prior to performance. This in turn enhances pre-determined outcomes amongst
students. Each experiment in this manual begins with competency, industry relevant skills,
course outcomes as well as practical outcomes (objectives). The students will also achieve
safety and necessary precautions to be taken while performing practical.

This manual also provides guidelines to faculty members to facilitate studentcentric lab
activities through each experiment by arranging and managing necessary resources in
order that the students follow the procedures with required safety and necessary
precautions to achieve the outcomes. It also gives an idea that how students will be assessed
by providing rubrics.

In the era of digitization, the demand of Internet based applications is increasing day by
day. Web Development is one of the required skills for IT Engineer. This focuses on front-
end and back-end design. After learning Web Development students can advance their
career in the field of web development.

Utmost care has been taken while preparing this lab manual however always there is
chances of improvement. Therefore, we welcome constructive suggestions for
improvement and removal of errors if any.
Web Development (3151606)

Practical – Course Outcome matrix

Course Outcomes (COs):

CO-1: Understand the concepts of WWW, HTTP protocol and client-server
architecture.
CO-2: Learn and apply various HTML tags to build the user-friendly web pages.
CO-3: Explore the new features of CSS to define and apply CSS rules in the web
pages for rich User Interface.
CO-4: Create interactive web pages to improve the user experience using client-
side scripting with JavaScript.
CO-5: Design and develop fully functional dynamic web applications using the
concepts of PHP, MySQL,
CO-6: Learn and apply advanced asynchronous web communication mechanisms
like REST API, AJAX and jQuery for building highly interactive webpages.

Sr. CO CO CO CO CO CO
Objective(s) of Experiment
No. 1 2 3 4 5 6
Draw and explain architecture of the web browser.
1. List and explain various HTML request and response √
headers.
Create your resume using HTML (Suggested
sections of resume are Personal Information,
2. Educational Information, Professional Skills, √
Experience, Achievements, Hobbies), Experiment
with text, colors, link and lists.
Create your class time table using table tag,
3. experiment with row span, colspan, cellspacing and √
cellpadding attributes.
Design static web pages for your college containing
a description of the courses, departments, faculties,
4. √
library etc. Provide links for navigation among
pages.
Create User Registration Form in HTML (Suggested
to use fields like Name, Date of Birth, Gender, Email
5. Id, Mobile No., Address, State , Education , Image √
Upload etc.) using textbox, text area, checkbox, radio
button, select box, button, file upload etc.
Create two web pages, one contains audios and
other page contains videos (using HTML5 audio and
6 √
video tags). Also provide link for navigation
between pages.
Create a web page using frame. Divide the page into
7. two parts with Navigation links on left hand side of √
page (width=20%) and content page on right hand
Web Development (3151606)

side of page (width = 80%). On clicking the

navigation Links corresponding content must be
shown on the right-hand side.
Design a web page of your home town with an
8. attractive background color, text color, an Image, √
font etc. (use internal CSS).
Use Inline CSS to format your resume that you
9. √
created in practical no 02.
Use External, Internal, Inline CSS to format
10. Information Technology Department Web Pages √
that you created in Practical No.04

11. Develop a java script to display today’s date. √

Develop simple calculator for addition, subtraction,

12. multiplication and division operation using java √
script.
Write a java script code to combine and display the
information in textbox when the button is clicked √
13.
use registration page that you created in Practical
No.5.

Use JavaScript to Implement validation in Practical √

14.
No.5.

Write a PHP program to check if number is prime

15. √
or not.
Use Registration Form from practical number 5 to
store user registration details in MySql database. On
16. submission next page displays all registration data √
in in html table using php. Also provide feature to
update and delete the registration data.
Write a PHP script for user authentication using
17. √
PHP-MYSQL. Use session for storing username.
Using AJAX Create visual search feature to search
18. using name for practical number 16 which list name, √
mobile number and email id of matching users.

19. Create a REST API using php. √

20. Create an Image slider using jQuery. √

21 Cookie Example √
Web Development (3151606)

Industry Relevant Skills

The following industry relevant competency are expected to be developed in the student
by undertaking the practical work of this laboratory.
1. HTML/CSS Skills : HTML is used extensively by web developers to build web
pages. CSS is used to implement different fonts, colors and layouts in the design
of a website.
2. Javascript Skills : Java Script is used for creating interactive web pages to improve
the user experience.
3. PHP/MySql Skills : PHP/MySql is used extensively by web developers to create
fully functional dynamic web applications.
4. REST API,AJAX,JQuery Skills : RESTAPI,AJAX,JQuery are advanced asynchronous
web communication mechanisms and used by web developers for building highly
interactive webpages.
Guidelines for Faculty members
1. Teacher should provide the guideline with demonstration of practical to the
students with all features.
2. Teacher shall explain basic concepts/theory related to the experiment to
the students before starting of each practical
3. Involve all the students in performance of each experiment.
4. Teacher is expected to share the skills and competencies to be developed in the
students and ensure that the respective skills and competencies are developed in
the students after the completion of the experimentation.
5. Teachers should give opportunity to students for hands-on experience after the
demonstration.
6. Teacher may provide additional knowledge and skills to the students even
though not covered in the manual but are expected from the students by
concerned industry.
7. Give practical assignment and assess the performance of students based on task
assigned to check whether it is as per the instructions or not.
8. Teacher is expected to refer complete curriculum of the course and follow the
guidelines for implementation.

Instructions for Students

1. Students have to write answers / solutions of QUIZ in separate file page. The
quiz of corresponding practical must be attached just behind each practical.
2. Students are expected to carefully listen to all the theory classes delivered by the
faculty members and understand the COs, content of the course, teaching and
examination scheme, skill set to be developed etc.
3. Students shall organize the work in the group and make record of all observations.
4. Students shall develop maintenance skill as expected by industries.
5. Student shall attempt to develop related hand-on skills and build confidence.
6. Student shall develop the habits of evolving more ideas, innovations, skills etc. apart
from those included in scope of manual.
Web Development (3151606)

7. Student shall refer technical magazines and data books.

8. Student should develop a habit of submitting the experimentation work as per the
schedule and s/he should be well preparedfor the same.
Web Development (3151606)

Sample Rubrics for Practical Evaluation

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10
(3 marks) (4 marks) (3 marks) marks)

Excellent Moderate level Problem not

understanding of understanding of understood and
problem and 03 problem and 02 can't establish 01
Understanding
relevance with relevance with the relation with
of Problem
the theory clearly the theory clearly the theory.
understood. understood.
Efficient Moderate level of Partial
implementation implementation. implementation 01
Implementation with proper 04 Poor naming 03 with poor to
of Problem naming convention. understanding. 02
convention and
understanding
Unique Ordinary Weak
documentation documentation of documentation 01
(not copied from 03 given problem 02 of given problem to
Presentation
other sources) of with proper without proper 02
and report
given problem formatting and formatting and
writing
with proper language language
formatting and
language.
 Web Development (3151606)

Index
(Progressive Assessment Sheet)

Sr. No. Objective(s) of Experiment Page Date of Date of Assessm Sign. of Remar
No. perfor submis ent Teacher ks
mance sion Marks with
date
1 Draw and explain architecture of the web
browser. List and explain various HTML
request and response headers.
2 Create your resume using HTML (Suggested
sections of resume are Personal
Information, Educational Information,
Professional Skills, Experience,
Achievements, Hobbies), Experiment with
text, colors, link and lists.
3 Create your class time table using table tag,
experiment with rowspan, colspan,
cellspacing and cellpadding attributes.
4 Design static web pages for your college
containing a description of the courses,
departments, faculties, library etc. Provide
links for navigation among pages.
5 Create User Registration Form in HTML
(Suggested to use fields like Name, Date of
Birth, Gender, Email Id, Mobile No.,Address,
State , Education , Image Uploadetc) using
textbox, textarea, checkbox, radio button,
select box, button, file upload etc.
6 Create two web pages, one contains audios and
other page contains videos (using HTML5
audio and video tags). Also provide link for
navigation between pages.
7 Create a web page using frame. Divide the
page into two parts with Navigation links on
left hand side of page (width=20%) and
content page on right hand side of page
(width = 80%). On clicking the navigation
Links corresponding content must be
shown on the right-hand side.
8 Design a web page of your home town with
an attractive background color, text color,
an Image, font etc. (use internal CSS).
Web Development (3151606)

9 Use Inline CSS to format your resume that

you created in practical no 02.
10 Use External, Internal, Inline CSS to format
Information Technology Department Web
Pages that you created in Practical No.04
11 Develop a java script to display today’s date.

12 Develop simple calculator for addition,

subtraction, multiplication and division
operation using java script.
13 Write a java script code to combine and
display the information in textbox when the
button is clicked use registration page that
you created in Practical No.5.
14 Use JavaScript to Implement validation in
Practical No.5.

15 Write a PHP program to check if number is

prime or not.
16 Use Registration Form from practical
number 5 to store user registration details
in MySql database. On submission next page
displays all registration data in in html table
using php. Also provide feature to update
and delete the registration data.
17 Write a PHP script for user authentication
using PHP-MYSQL. Use session for storing
username.
18 Using AJAX Create visual search feature to
search using name for practical number 16
which list name, mobile number and email
id of matching users.
19 Create a REST API using php.
20 Create an Image slider using jQuery.
21 Create HTML form with one textbox and
button. Keep button label as SAVE. User will
enter color name in textbox and click on save
button.
On save, the value of textbox color name should
be saved in COOKIE.
Whenever user opens page again, the
background color should be same as saved in
cookie.
Web Development (3151606)

Total