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

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

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

-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

undefined and null type

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 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

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

defining no-argument and orgument based functions
function that return something
default value of an argument

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

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 - 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-dataapplication/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

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

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