Government of Pakistan

National Vocational and Technical Training Commission

Prime Minister’s Hunarmand Pakistan Program

"Skills for All"

Course Contents / Lesson Plan

Course Title: Advance Web Application Development
Duration: 3 Months

Revised Edition
Trainer Name

Course Title Advance Web Application Development

Objectives of Course provides participants an opportunity to build a Great Career in web

Course application development world, a best web development program in KICS
UET to learn web development all in one, course start from basic level and
moved toward advanced tools and techniques of web development. Program
is covering HTML5, CSS, JS, jQuery, PHP, MySQL, AJAX, LARAVEL and
Website Design Concepts and common tasks need for development and
administration of a website.

Entry-level of
Intermediate / Matric Science
trainees
Learning Knowledge Proficiency Details
Outcomes of  Knowledge to build REAL world creative and modern website from
the course very scratch using modern web technologies
 Knowledge to new ways of coding, tips & tricks and modern best
practices to build a professional website.
 Knowledge of wire-framing, HTML5, CSS3, jQuery and Bootstrap (+BS
5) Framework
 Knowledge to build a fully responsive website which will look perfect on
all the small & wide screens.
 Knowledge of PHP, OOP, AJAX, MySQL
 The basic of Laravel such as installation, routing, template, controller,
model, migration, seeder etc.
 You will make your first crud app with Laravel
 You will make Restful API
 You will make Gallery app with Laravel and jQuery
 You will learn blade template in Laravel

Skills Proficiency Details

 Students of web development
 Anyone who wants to learn how to build websites using PHP
 Anyone interested in a proper certification in PHP course in Lahore or
any other city
 People already working as web developers who want to learn the latest
techniques and tricks in PHP based web development
 Employees of web development companies and software houses who
want to polish their skills further in Web Development especially with
focus on PHP
 Business owners who want to build and run their own websites
themselves
Course The total duration of the course: 3 months (12 Weeks)
Execution Plan Class hours: 5 hours per day
Theory: 20%
Practical: 80%
Weekly hours: 25 hours per week
 Total contact hours: 300 hours
Companies 1. Upwork
offering jobs in 2. Freelancing
the respective 3. Fiverr
trade 4. Government Institutes
5. Software Houses
6. Crossover
7. All Private Institutes who are managing software

Job
Opportunities All over the world there is a high demand in the Information Technology
industry for developers in various field such as mobile application developer,
web developer and graphic designer. Smartphone have brought about
revolution; Animation technology has come a long way since the early days
of hand-drawn cartoons. Nowadays you will find websites and apps on
everything. This increase in usage of websites, apps android smart devices
has created new opportunities for all to earn big and make a career out of
this field. With the help of this course, we will be able to give technical
trainings of Information Technology to our youth. There are also
opportunities for start-up entrepreneurship due to the high demand in the
market in following designated jobs;
 Software Engineers
 Mobile App Developers
 DBAs
 Web Developers
 Network Administrator
 IT Support Officer
 Manager / Assistant Manager IT

No of Students 25
Learning Place Classroom / Lab
Instructional  https://www.php.net/
Resources  https://www.w3schools.com/
 https://www.tutorialspoint.com/
 https://laravel.com/
 Beginning Laravel
 Build Websites with Laravel 8
Scheduled Module Title Days Learning Units Home
Weeks Assignment
Motivational Lecture
Week 1
Course Introduction
Day 1 Job market

Course Applications

Introduction to World Wide Web

Website
Day 2 Web Pages

Different types of websites

Architecture of static and

dynamic Webpages
Day 3
Compare Static websites with
Dynamic websites

Introduction Difference between Frontend &

& Backend Language
Front-End
Development Install Chrome Browser
(Basics) Chrome Web Developer Tools
Install VS Code Editor
Day 4
What Is HTML?
HTML building blocks
Basic HTML Page Structure
Headings & Paragraphs

HTML Formatting
Day 5 HTML Attributes

Block Level Element vs Inline

 Task 1
Week 2 Element
To
HTML Tag vs. Element  Task 17
Day 1
HTML Image & Link
 HTML Table
Day 2 HTML Lists

Day 3 HTML Forms

HTML Layout Elements

Day 4 HTML Iframe

HTML & CSS HTML Media Elements

What is CSS?
Day 5 CSS Syntax
Selector Types

Inclusion
Week 3
CSS Rules Overriding
CSS Comments
Day 1 CSS Colors

CSS Backgrounds
CSS Borders

CSS Margins
CSS &  Task 18
Bootstrap Day 2 CSS Padding To
CSS Height/Width  Task 25

CSS Lists
CSS Tables
Day 3 CSS Display
CSS Float

What Is Bootstrap?
Bootstrap Grid System
Day 4 Bootstrap Colors
Bootstrap Buttons
 Bootstrap Navbar
Bootstrap Modal
Day 5 Bootstrap Tables
Bootstrap Forms

What is JavaScript?
Week 4
Day 1 JavaScript Output Statements
JavaScript Variables

JavaScript Operators
 Task 26
Day 2 Conditional Statements
To
 Task 29
JavaScript Loop Types
 for-loop
Day 3
 while loop
 do While loop

Day 4 JavaScript Functions

Day 5 JavaScript Objects & Arrays

What Is jQuery?
Week 5
Day 1 jQuery Selectors

jQuery Events
Day 2 jQuery Effects

Overview of PHP
 Task 30
jQuery & PHP Variables
Day 3 Constants
Output Statements

Operators
Day 4 Decision Making

Day 5 Loop Types

Day 1 Functions  Task 31

Week 6 To
PHP & Midterm Day 2 Arrays  Task 34
Exam
Day 3 PHP Forms
 Day 4 Midterm Exam

Day 5 Midterm Exam

Day 1 Object Oriented Programming

Week 7
Class
Object
Day 2 Member Variable
Member function
Inheritance

Parent class  Task 35

To
Child Class
PHP  Task 37
Polymorphism
Day 3 Overloading
Data Abstraction
Encapsulation
Destructors

Day 4 Session

Day 5 Cookies

MYSQL basics.
Week 8
Day 1 Creating a database using
Console and PHP MY ADMIN.

PHP & MYSQL Day 2 DDL, DML & DRL operations in  Task 38
SQL

Day 3 DB Integration with PHP

Day 4 CRUD Operations using MYSQL

Day 5

Day 1 Introduction to Laravel

Week 9
Day 2 Architecture Concepts
 Task 39
Day 3 Routing
 Laravel Day 4 Blade Template

Day 5 MVC

Day 1 Migrations
Week 10
Day 2 Relationships

Laravel Day 3 Relationships  Task 40

Day 4 Security

Day 5 Security

Day 1 [Project 1] crud application

Week 11
Day 2 [Project 2] Rest API
Project Day 3 [Project 3] Gallery App

Day 4 Final Project

Day 5 Final Project

Day 1 Project Evaluation

Week 12
Project Day 2 Project Evaluation
Evaluation
& Day 3 Project Evaluation
Final Term
Exam Day 4 Project Evaluation

Day 5 Final Term Exam

MODULES
 Annexure-I:Tasks for Advance Web Application Development

Task no. Task Description Week

1 Using Heading, Write an HTML code that displays all 6 headings with
Paragraph, Line
Break,and Horizontal each Week 2
Rule Tags heading on new line having paragraphs and the end
of each paragraph; place a line (Horizontal Rule).
2 Use Comments and Make a webpage Comment.html having text “I am
Include Tags in a
single code. Internal Text” with having commented text “I am
Comment” that will
not display in the webpage. Make another webpage
with

name IIncluded.html containing the text “I am

External Text” and

display its contents in Comment.html webpage.

3 Use Image Tag with Insert image in the webpage with height=30,
attributes.
width=30 having 3 border size and when we bring
mouse on the image, it displays text “I am Image in
Webpage”.
4 Use of Hyperlink Use <A HREF> . . . </A> Tag with all attributes to
create a Local Link to any file.
Make second link which is used to link High Level
Directory. Make third link which is used to link any
Internet website.
Lastly make fourth link which contains an email
address and when user clicks the link, email editor
opens up.
5 Background image Make a webpage with image as a Background and
when we scroll this webpage, the image stays fix and
only the top of the webpage scrolls.
 6 Make a complete html Make the following Report Form (The Country
form
Dropdown
List must contain 7 Countries in Ascending Order but
when form is loaded, by default Pakistan is Selected.

Task Task Description Week

No.
7 Buttons with Make the Submit and Reset buttons in the form having
images
pictures on it instead of simple text.

External Style Call an External Style Sheet in the webpage in which Font
8 Sheet
Size of the text must be 77 points Color of the text must be
green and background of the webpage must be yellow.
9 Use of on Click Change the color of the text when it is clicked.
Event
Use of on Mouse When we bring the mouse on the image, the image
10 Over
Event changes its position.
11 Navigation bar Make two navigation bars with CSS using class and id
using CSS
attribute. One should be on the top of the page and the
second should be displayed on left of the page in shape of
a column.
12 Forms Make a login and signup form on different pages that
should be displayed in the center of the page using CSS
and html.
13 Dropdowns Make dropdowns with nested HTML tags and CSS.

14 Bootstrap based Make different sizes of columns using bootstrap classes.

columns
15 Forms using Make a form using Bootstrap classes for buttons and
bootstrap
forms.
16 Progress Bar A progress bar for student’s skills in coding languages
using bootstrap.
17 Bootstrap based Make 3 pages of home page, admission form, and about
pages
us page using bootstrap classes with navigation bars,
headers, footers and forms.
18 Use Output Display your name on the screen using JavaScript. Week –3
Statement
of JavaScript
19 Use of If…else Use If...else statement of JavaScript to write a code to
Condition
Display “Good Morning” or “Good Afternoon” according to
current Time.
 20 Use of switch Use the switch statement to display “today is (whatever day
statement
it is)” according to the current day.
21 Use of for loop Use of loop to display a string of all the names of months
using JS functions and variables.
22 Alert message Make an alert message display on the screen if the user
clicks a button.
23 JavaScript Make a JavaScript calculator that should answer addition,
calculator
multiplication and subtraction question using JavaScript
variables.
24 Hide and show in Make a paragraph line and two buttons named “hide” and
jQuery “show” using HTML and hide the paragraph if the button
“hide” is clicked, and show the paragraph if the button
“show” is clicked.

25 Slide down Make a button that slides down some content when clicked
button using jQuery.

26 Use of Switch Use the Switch statement of PHP to display the current day Week-4
Statement of the
week.
Loops to display Write a Program to display count, from 5 to 15 (as shown
27 numbers on below) using following:
screen  For Loop
 While Loop
 Do…while Loop

28 Use Output Display your name on the screen using PHP.

Statement
of PHP
Use of Use the If...else statement of PHP to write a code to Display
29 If…else “Good Morning” or “Good Afternoon” according to current
Conditi time.
on
30 Using Create a web page that includes a button and a paragraph Week-5
JQuery element. When the button is clicked, use jQuery to change
the text of the paragraph to a predefined message.
31 Factorial of Write a program to calculate factorial of a number using for Week-6
Number loop in PHP.
32 While Loop to Write a Program to create following pattern using while
display
the pattern loop:
*
**
***
****
*****
******
*******
********
33 Do…while Loop to Write a Program to display count, from 1 to 5 using PHP
display the
numbers do...while loop as given below:
1
2
3
4
5
34 Using Array and You need to write a program in PHP using for...each
for…each loop
loop to remove specific elements by value from an array
using PHP program.
Hint:
 Take an array with list of month names.
 Take a variable with the name of value to be deleted

Task Task Description Week

No.
35 Sort the Array Write a function to sort an array Week-7
Elements
36 Find the case of Write a PHP function that checks whether a string
string
is all
lowercase.
37 Find String Length Write a PHP program to find the length of the
string. Hint:
 You have to use one variable.
 You must use a built-in PHP String Function.
38 CRUD in PHP Create a PHP web application with CRUD functionality Week-8
for managing user information, including fields for id,
first name, last name, email, and phone number,
enabling users to create, read, update, and delete
records stored in a MySQL database.
39 Laravel Task 1 Integrate a master template into a Laravel web Week-9
application to ensure consistent layout and design
across multiple pages, utilizing HTML, CSS, and
JavaScript, extending the master template in individual
views, and populating dynamic content sections with
data retrieved from the database or external sources.
40 Laravel Task 2 Create a Laravel web application that demonstrates Week-10
one-to-one, one-to-many, one-to-many inverse, and
polymorphic (one-to-many) relationships, allowing
CRUD operations and proper data management for
each relationship type.
Annexure-II
SUGGESTIVE FORMAT AND SEQUENCE ORDER OF MOTIVATIONAL
LECTURE.
Mentor
Mentors are provided an observation checklist form to evaluate and share their observational
feedback on how students within each team engage and collaborate in a learning environment.
The checklist is provided at two different points: Once towards the end of the course. The
checklists are an opportunity for mentors to share their unique perspective on group dynamics
based on various team activities, gameplay sessions, pitch preparation, and other sessions, giving
insights on the nature of communication and teamwork taking place and how both learning
outcomes and the student experience can be improved in the future.

Session- 1 (Communication):
Please find below an overview of the activities taking place Session plan that will support your
delivery and an overview of this session’s activity.

Session- 1 OVERVIEW
Aims and Objectives:
 To introduce the communication skills and how it will work
 Get to know mentor and team - build rapport and develop a strong sense of a
team
 Provide an introduction to communication skills
 Team to collaborate on an activity sheet developing their communication,
teamwork, and problem-solving
 Gain an understanding of participants’ own communication skills rating at the
start of the program

Activity: Participant Time Teacher Time Mentor Time

Intro Attend and
contribute to the
scheduled.
Understand good
communication
skills and how it
works.
Understand what
good
communication
skills mean
Understand what
skills are important
for good
communication
skills
Key learning Resources: Enterprise skills
outcomes: developed:
 Understand the  Podium  Communication
 communication  Projector  Self Confidence
skills and how it  Computer  Teamwork
works.  Flip Chart
 Understand what  Marker
communication
skills mean
 Understand what
skills are
important for
communication
skills

Schedule Mentor Should do

Welcome: Short welcome and ask the Mentor to introduce
5 min him/herself.
Provide a brief welcome to the qualification for the class.
Note for Instructor: Throughout this session, please
monitor the session to ensure nothing inappropriate is
being happened.
Icebreaker: Start your session by delivering an icebreaker, this will
10 min enable you and your team to start to build rapport and
create a team presentation for the tasks ahead.
The icebreaker below should work well at introductions
and encouraging communication, but feel free to use
others if you think they are more appropriate. It is
important to encourage young people to get to know
each other and build strong team links during the first
hour; this will help to increase their motivation and
communication throughout the sessions.
Introduction & Provide a brief introduction of the qualification to the
Onboarding: class and play the “Onboarding Video or Presentation”.
20mins In your introduction cover the following:
1. Explanation of the program and structure. (Kamyab
jawan Program)
2. How you will use your communication skills in your
professional life.
3. Key contacts and key information – e.g. role of
teacher, mentor, and SEED. Policies and procedures
(user agreements and “contact us” section). Everyone to
go to the Group Rules tab at the top of their screen,
read out the rules, and ask everyone to verbally agree.
Ensure that the consequences are clear for using the
platform outside of hours. (9am-8pm)
4. What is up next for the next 2 weeks ahead so young
people know what to expect (see pages 5-7 for an
overview of the challenge). Allow young people to ask
any questions about the session topic.
Team Activity Planning: MENTOR: Explain to the whole team that you will now
30 minutes be planning how to collaborate for the first and second
collaborative Team Activities that will take place outside
of the session. There will not be another session until
 the next session so this step is required because
communicating and making decisions outside of a
session requires a different strategy that must be
agreed upon so that everyone knows what they are
doing for this activity and how.
 “IDENTIFY ENTREPRENEURS” TEAM
ACTIVITY
 “BRAINSTORMING SOCIAL PROBLEMS” TEAM
ACTIVITY”
As a team, collaborate on a creative brainstorm on
social problems in your community. Vote on the areas
you feel most passionate about as a team, then write
down what change you would like to see happen.
Make sure the teams have the opportunity to talk about
how they want to work as a team through the activities
e.g. when they want to complete the activities, how to
communicate, the role of the project manager, etc.
Make sure you allocate each young person a specific
week that they are the project manager for the weekly
activities and make a note of this.
Type up notes for their strategy if this is helpful - it can
be included underneath the Team Contract.

Session Close: MENTOR: Close the session with the opportunity for
5 minutes anyone to ask any remaining questions.
Instructor:
Facilitate the wrap-up of the session. A quick reminder
of what is coming up next and when the next session
will be.
MOTIVATIONAL LECTURES LINKS.

TOPIC SPEAKER LINK

How to Face Qasim Ali Shah https://www.youtube.com/watch?v=OrQte08Ml90
Problems In
Life
Just Control Qasim Ali Shah https://www.youtube.com/watch?v=JzFs__yJt-w
Your
Emotions
How to Qasim Ali Shah https://www.youtube.com/watch?v=PhHAQEGehKc
Communicate
Effectively
Your Tony Robbins https://www.youtube.com/watch?v=5fS3rj6eIFg
ATTITUDE is Les Brown
Everything David Goggins
Jocko Willink
Wayne Dyer
Eckart Tolle
Control Your Jim Rohn https://www.youtube.com/watch?v=chn86sH0O5U
EMOTIONS Les Brown
TD Jakes
Tony Robbins
Defeat Fear, Shaykh Atif https://www.youtube.com/watch?v=s10dzfbozd4
Build Ahmed
Confidence
Wisdom of Learn Kurooji https://www.youtube.com/watch?v=bEU7V5rJTtw
the Eagle
The Power of Titan Man https://www.youtube.com/watch?v=r8LJ5X2ejqU
ATTITUDE
STOP Arnold https://www.youtube.com/watch?v=kzSBrJmXqdg
WASTING Schwarzenegger
TIME
Risk of Denzel https://www.youtube.com/watch?v=tbnzAVRZ9Xc
Success Washington
 Annexure-III
SUCCESS STORY

S. No Key Information Detail/Description

1. Self & Family background Danyal Saleem, who lives in Mirpur (AJK), is an
example of how hard work and perseverance can reap
rich rewards when bidding for projects online.
The graphic designer works exclusively on an online
freelancing platform and has earned, on average,
US$20,000 per month for the past several months. But
this isn’t a story of overnight success – Danyal has had
to work hard to differentiate himself and stay true to his
goal.

It was a full year later, in May 2017, when Danyal finally

decided to jump in. He signed up for one of the
numerous sites that connect designers or coders with
people or companies that have small projects, like
designing a logo or building a website.
He had already started a small business to help pay for
his college education, so he was nervous and
apprehensive about the decision. “I gave myself two or
three months at most. If I didn’t succeed, then I would
go back to running the business as it was showing
potential,” he says.
If at first, you don’t succeed, try try again

2. How he came on board Certification in graphic designing from STEPS(NAVTTC

NAVTTC Training/ or got partner institute)
trained through any other
source

3. Post-training activities Danyal’s area of expertise is in graphic design. In his

first month using Fiverr, he pitched mostly for projects
centered around logo designing. But it wasn’t so simple.
In the first few weeks, he didn’t hear back from even a
single client, despite pitching for dozens of projects.

“I needed to understand what worked, so I read blogs,

participated in forums, and analyzed profiles of
successful freelancers. It was an uphill struggle, but I
didn’t want to give up,” he explains.

Danyal says he understands why clients would be

apprehensive giving projects to untested freelancers.
They have hundreds of options to choose from, he
 explains, and to give a project to someone with no
experience requires a strong leap of faith.

A slow stream of projects started to come Danyal’s way.

Within a few months, he was landing an average of a
hundred projects every month, with a large number of
repeat clients. He also expanded the range of his
professional services, branching out from logo design to
business cards, banners, Facebook cover pages,
letterheads, and stationery.

But he’s had to face his fair share of challenges too.

The shoddy state of internet infrastructure in his city,
Mirpur, threatened to derail his freelancing career.
“Sometimes I haven’t had connectivity for two days
straight,” he explains. “That’s unthinkable for someone
who makes his livelihood on the internet.”

4. Message to others Take the training opportunity seriously

Impose self-discipline and ensure regularity
(under training) Make Hard work pays in the end so be always ready for
the same.

Note: Success story is a source of motivation for the trainees and can be presented in several
ways/forms in a NAVTTC skill development course as under: -

1. To call a passed out successful trainee of the institute. He will narrate his success story to
the trainees in his own words and meet trainees as well.
2. To see and listen to a recorded video/clip (5 to 7 minutes) showing a successful trainee
Audio-video recording that has to cover the above-mentioned points.*
3. The teacher displays the picture of a successful trainee (name, trade, institute,
organization, job, earning, etc) and narrates his/her story in the teacher’s own motivational
words.

* The online success stories of renowned professional can also be obtained from Annex-II
 Annexure-IV:
Workplace/Institute Ethics Guide

Work ethic is a standard of conduct and values for job performance. The modern definition of what
constitutes good work ethics often varies. Different businesses have different expectations. Work
ethic is a belief that hard work and diligence have a moral benefit and an inherent ability, virtue, or
value to strengthen character and individual abilities. It is a set of values-centered on the
importance of work and manifested by determination or desire to work hard.

The following ten work ethics are defined as essential for student success:
1. Attendance:
Be at work every day possible, plan your absences don’t abuse leave time. Be punctual
every day.
2. Character:
Honesty is the single most important factor having a direct bearing on the final success of
an individual, corporation, or product. Complete assigned tasks correctly and promptly.
Look to improve your skills.
3. Team Work:
The ability to get along with others including those you don’t necessarily like. The ability to
carry your weight and help others who are struggling. Recognize when to speak up with an
idea and when to compromise by blend ideas together.
4. Appearance:
Dress for success set your best foot forward, personal hygiene, good manner, remember
that the first impression of who you are can last a lifetime
5. Attitude:
Listen to suggestions and be positive, accept responsibility. If you make a mistake, admit it.
Values workplace safety rules and precautions for personal and co-worker safety. Avoids
unnecessary risks. Willing to learn new processes, systems, and procedures in light of
changing responsibilities.
6. Productivity:
Do the work correctly, quality and timelines are prized. Get along with fellows, cooperation
is the key to productivity. Help out whenever asked, do extra without being asked. Take
pride in your work, do things the best you know-how. Eagerly focuses energy on
accomplishing tasks, also referred to as demonstrating ownership. Takes pride in work.
7. Organizational Skills:
 Make an effort to improve, learn ways to better yourself. Time management; utilize time and
resources to get the most out of both. Take an appropriate approach to social interactions
at work. Maintains focus on work responsibilities.
8. Communication:
Written communication, being able to correctly write reports and memos.
Verbal communications, being able to communicate one on one or to a group.
9. Cooperation:
Follow institute rules and regulations, learn and follow expectations. Get along with fellows,
cooperation is the key to productivity. Able to welcome and adapt to changing work
situations and the application of new or different skills.
10. Respect:
Work hard, work to the best of your ability. Carry out orders, do what’s asked the first time.
Show respect, accept, and acknowledge an individual’s talents and knowledge. Respects
diversity in the workplace, including showing due respect for different perspectives,
opinions, and suggestions.