Web Development Course 1

Web Development Course 1 consists of two parts. Part 1 covers the client side of the web application and Part 2 focus on server side programming, related protocols and web application deployment.

Following are the topics of Part 1:

1. HTML
2. CSS
3. Bootstrap
4. Java Script
5. JQuery
6. AJAX
7. JSON and XML

Following topics would be covered in Part 2.

1. PHP | Language Basics
2. PHP | Forms, Session and Cookies Handling
3. PHP | Database Connectivity
4. HTTP Protocol
5. HTTPS Protocol
6. DNS Protocol
7. WHOIS Protocol
8. Domain Registration and Hosting

Part 1

Below is the detailed outline of each topic you would learn and practice in this course.

HTML Basics

Basic tags: paragraph, image, link, headings, break, horizontal line, table, tr, td 

Block and inline elements

Semantic tags: section, nav etc.

Head section: link, style, script, meta, open graph tags and their benefits

Viewport

HTML Forms

Form tag, method and action attribute

Defining text input field

URL format: filename.php?param1=value&param2-value&param3=value

Input fields: checkbox, radio button, password field

Drop down list and textarea input fields

Using hidden input field

Submitting multiple parameters of same name

Placeholder and 'required' attributes

New types in HTML5: email, number, color, URL, etc.

Different types of buttons: submit, reset, cancel and standard button

Using submit button as input control

CSS

Basic CSS properties: width, height, color, background-color

Background image and related CSS propertise e.g. positon and repeat etc.

Styling Links and Lists. Making navigation bars using list 

Units e.g. px, em, rem, etc.

Important Properties for Layouts

-Box Model and box-sizing

-Position and Float

-Media Queries

-Display: none, inline, block, inline-block, list-item,  flex ... todo: prepare flex

Bootstrap

-Layout: Container, container-fluid, row, col and col variants

-Cards, images, tables, form, buttons, alerts, etc.

-Basic colors and how to overwrite them, img-fluid, table-bordered, table-hover and table-responsive,

-Card, card-header, card-body, card-footer, etc.

Basics of JavaScript

JS core objective and background

Rise in JS demand -> single page apps using AJAX. and client side MVC

Specification and language are two different things. ECMA Script and JavaScript

Dynamic vs static language concepts

How to write and run: in browser, on CLI and using Visual Studio Code

Data Types: Primitive and Reference Types

undefined, null, string, number, boolean

object, array, function and symbol

constants

undefined and null type

string

declaration and assignment

string literals. defining single line and multi-line string literals

functions: length, toLowerCase, toUpperCase, substring, trim, concat, indexOf, lastIndexOf, charAt

using string as array - for reading. since ES5

comparing strings. using relations operator and localeCompare()

primitive string and String object. How to create each? use typeof to see, what is difference. what to prefer

converting one form to another. e.g. new keyword and valueof method

auto-boxing: Automatic conversion of primitive to String object depending on context

unboxing -> implicit convertion of String object to string literal. as per context e.g. concat

primitive is pointer to a raw memory location i.e. fast speed/random-access

they are not same. demo uisng eval() method takes expression in primitive string

use instanceof and typeof to check each case

number

number and Number

create and convert

comparing, comparing primtive and objects are different things... use of === operator

implicit conversion (e.g. relational expressions) and explicit conversion

what is NaN

boolean

primitive boolean and Boolean object

true and false keywords

concept of falsy and truthy. all things are truthy, if they are not falsy.

list of falsy is fix: false, 0, "", null, undefined, NaN

expressions may consist of truthy or falsy. e.g. priceList example

functions

defining no-argument and orgument based functions

function that return something

default value of an argument

objects

creating an object using object literal i.e. {} 

printing object values. all and individual 

dot notation and bracket notation, when to use each

using factory functions and constructor functions to create objects

Arrays

creating arrays using new Array() and array literal i.e. []

size, index and elements types are dynamic

adding and removing elements from array

iterate using standard for loop, for-in and for-of loop

sort, reverse arrays

using array as stack using push and pop functions 

using array as queue using push and shift functions

adding element at front using unshift method

Events Handling, Manipulating Forms and DOM using JavaScript

Introduction to Document Object Model for XML

Defining event handlers and binding with components

Reading and changing HTML elements' attribute values, and inner content

Reading and changing CSS Styles

Reading and updating form field values

Submiting form using JS and stopping submit default behaviour ... for validation or other purpose

Reading form attributes e.g. method, action, enctype, etc.

Creating new elements and adding to DOM, updating and removing elements

Introduction to JQuery. how to add/edit elements & their properties

Creating new form fields and adding into form - dynamically

AJAX, JSON, and XML

AJAX - Interacting with server without page refresh

AJAX - concept of callback function, request processing stages, synchronuous and async calls, sending data in request

What is JSON and XML format

Creating and parsing XML and JSON data formats

AJAX - handling different type of response data (XML / JSON)

How to make AJAX simple: using JQuery API

Part 2

Hands-on knowledge of all topics covered in Part 1 is required before starting Part 2. Part 2 gives you a comprehensive knowledge and practical skill about how the server side of the web application work. How servers interpret web requests, how they generate response and send to browser. How session and cookies work and why they are important to make login system. How we can save and update user data given at a webpage in database and how we can show data on web pages that is stored in database server. After discussing these basics, you would see how the core web related protocls work e.g. HTTP, HTTPS, DNS and WHOIS.

After Part 2, you shall be able to create small to medium scale web applications with in-depth understanding of how it works.

Below is the detailed outline of above topics that you would learn in this course.

Introduction to Server Side Programming

Introduction to XAMPP. IP/localhost, port#. Why we need to start the server?

On which port Apache listen? Access XAMPP dashboard at localhost:80/

Where to place content of our web projects i.e. htdocs/folder-name

Hello World in PHP. How server differentiate among php, html, css, js code

How HTML and PHP work together e.g. generate HTML from PHP e.g. h1-h6

PHP Basics

Using single and double quote. echo and print function

Variable Names, Scope & Types (string, integer, double, boolean, array, object)

Boolean: what is true and false in PHP. false is not printed

Using Functions: isset, unset, convert var type, gettype, is_* and string processing

Undefined and NULL type. NULL NOT PRINTED

if/else and loops (for, while, do-while, foreach)

Define Function: return types, parameter types, default values

Arrays in PHP

Create, initialize and iterate single and multi-dimension arrays

Add and remove elements from array. Array object type & element type

Create, initialize and iterate associative array of single and multi dimension

Array functions: print_r(array), array_reverse(array), sort(array), array_slice(array, offset, length)

Using array as Stack and queue using array_push(array, element),  array_shift(array) etc.

File Handling

Reading Files, Reading Files Line by Line, Writing content on files,
Updating selected lines, Deleting Files,
Making Directories, Traversing Directories, etc.

Regular Expressions in PHP and Server Side Form Validations *

Objective of Regular Expressions
Basic Building Blocks of Regular Expressions and Building Validation Rules
How to Accept or Reject User Form Input Based on Validation Rules
How to make number, string, email, CNIC, website name validators

Form Handling - Introduction

Create form of two fields and a submit button

Use action attribute to specify form handler

Fetch data at server side from $_REQUEST array

Method attribute. Submit with GET/POST and read from $_GET/$_POST. Whats difference?

Using $_ENV and $_SERVER super global variables/arrays

Add more input fields of different types

Form Handling - Postback, Redirect, and PRG Pattern

Postback... how it work. with example

Redirect ... when we use it, Location header, Status codes: 301, 302

What if user refresh POST request? Use Post Redirect Get Pattern: PRG Pattern

GET, POST, REQUEST are initialized for each request, separately

*Escape HTML

Uploading Files at Server

Uploading single file at server

Read upload file information from $_FILES array

Files are stored temporarily at server and removed if we don't process them

Move uploaded file to a folder, make folder, set new filename and extension

Why we store some uploaded files related information on database

HTTP payload structure for request containing files e.g. details of multipart/form-data

Content-Type header: multipart/form-data, application/x-www-form-urlencoded, image/jpg.

Content-Length Header

Process multiple uploaded files iteratively

Creating Update Form

Checkbox, hidden field, radio button and option list

Making update form: hard-coded and dynamic (using data from associative array)

Passing request parameters in links to make dynamic pages e.g. products listing by category ID

HTTP Methods and Status Codes

Method shows what operation the HTTP request intend

GET is for resource identification. POST for creating new resource

PUT for update. DELETE is used to delete something at server

What are idempotent and non-idempotent methods

What are safe methods

Form Validation

Client side validation: using tag attribute

Server side validation: using built-in functions and regular expressions

Pos and cons of each type of validations

Cookies Handling

What are cookies? temporary storage of data at browser side

What type of data is stored in cookies? Some examples: 

    Related products, visited items, remember me, ads targetting, recommended products.

How to create cookies in PHP. Role of Set-Cookie header

How to create cookie with expiry time

How to read cookies values at server (send by browser). Role of Cookie header

How to update and delete a cookie in browser

Some examples where cookies can be used

Tracking cookies*?

Session Management

The stateless natture of HTTP help to serve more request in less resources

What is session, why we need it, what is session ID

Role of cookies in session tracking. session_start() and session_destroy() functions

When $_SESSION array is initialized? How to add and get data from $_SESSION array

Create a login and logout using using session

Restrict certain pages from open access. Redirect if unauthorized person access

How we may track session without cookies

Database Connectivity

Different types of database APIs
Connecting with database: make connection and check error...
Run select statement. what is fetch_strategy and result_types
Prepared statement to add and update records

Delete records from database

Procedural vs object oriented style: mysqli with example
Connection pooling benefits
TODO: Error logging, log levels, log files, debugging and exception handling
Database Connectivity using PDO libraries

HTTP Protocol

Server and client/brower creates HTTP packet, putting headers & contents

What information is put into which part of HTTP packet e.g. headers, payload

GET, POST method detail

Content-type and content-length headers and type/sub-type

Different Status Codes

x-www-form-urlencoded and multipart-form-data details

Cache control headers

Basic authentication and related headers

TODO - HTTPS 

Whats HTTPS does to a website?

Basics of Cryptography

What are SSL certificats, How they work?

How to setup an SSL certificate on Nginx or Apache

Domains and Domain Name System

What is a domain, TLD, 1st, 2nd level, sub-domain, domain registry

Who is Domain Registrar, Domain Reseller/Agent and Domain Registrant

Domain Registraion Information: Profile Info and Name Server Address

What is Domain Name Server, TLD Name Server and Root Name Server

There are multiple IPs/servers not one. TTL and Cache working

What Root Server contain i.e. Root Zone Database

Where Root Servers are Located and What are their IP addresses

What information TLD NS and Domain NS contain

TLD NS contains domain name, registration, expiration and updation dates, domain status, registrar name, whois server, domain name servers, registry id of domain, registrar IANA ID

Types of NS records: NS, A/AAAA, CNAME, MX, TXT

WHOIS

How to check domain availability and other registration related information?    

Registrar and Registry runs WHOIS server instance

WHOIS is TCP based request/reply protocol. Submit a domain, get some info about it

What WHOIS record contain? ... example use cases of WHOIS info

Thin and Thick WHOIS data

Domain information privacy issues