Building Web Applications

Learning Objectives

Understand web protocols and communication
Learn HTTP fundamentals
Understand JSON data format
Build client-server applications
Transition from websites to web apps

Section 21.1: How the Web Works?

Request-Response Model

Client sends request
Server processes request
Server sends response
Browser displays response

Web Architecture

Client (Browser)
        |
        | HTTP Request
        ↓
Server (Node.js/Express)
        |
        | Database Query
        ↓
Database
        |
        | Results
        ↓
Server
        |
        | HTTP Response
        ↑
Client (Browser)

Section 21.2: HTTP, the Web Protocol

HTTP Methods

GET     - Retrieve data
POST    - Create data
PUT     - Update data
DELETE  - Delete data
PATCH   - Partial update

HTTP Status Codes

2xx - Success
  200 OK
  201 Created
  204 No Content

3xx - Redirection
  301 Moved Permanently
  304 Not Modified

4xx - Client Error
  400 Bad Request
  401 Unauthorized
  404 Not Found

5xx - Server Error
  500 Internal Server Error
  503 Service Unavailable

URL Structure

https://api.example.com:8080/users/123?page=1&limit=10#section

|-------|-----|------|--------|-------|-------------|----------|
Protocol|Host |Port  |Path    |Query  |Parameters   |Fragment

Section 21.3: HTTP Status Codes & URL

Common Status Codes

// Success
200 - OK: Request succeeded
201 - Created: New resource created
204 - No Content: Success, no response body

// Client errors
400 - Bad Request: Invalid input
401 - Unauthorized: Authentication needed
403 - Forbidden: Access denied
404 - Not Found: Resource doesn't exist

// Server errors
500 - Server Error: Internal problem
503 - Service Unavailable: Temporary problem

Query Parameters

/search?q=javascript&sort=recent&limit=20

Extract query values:
let url = new URL("https://example.com/search?q=javascript");
let query = url.searchParams.get("q");  // "javascript"

URL Encoding

// Special characters must be encoded
let search = "hello world";
let encoded = encodeURIComponent(search);  // "hello%20world"

// Build URL
let url = "https://api.example.com/search?q=" + encoded;

Section 21.4: From Web Sites to Web Apps

Website vs Web App

Website:

Static content
Server renders HTML
Simple interaction

Web App:

Dynamic content
Client-side rendering
Rich interactivity
APIs for data

Single Page Application (SPA)

// Traditional: Each page request reloads
// SPA: Update views without page reload

class Router {
    constructor() {
        this.routes = {};
        this.currentRoute = null;
    }

    addRoute(path, component) {
        this.routes[path] = component;
    }

    navigate(path) {
        if (this.routes[path]) {
            this.currentRoute = path;
            this.render();
        }
    }

    render() {
        let content = this.routes[this.currentRoute];
        document.getElementById("app").innerHTML = content;
    }
}

Section 21.5: JSON, a Data Format for the Web

JSON Basics

// JSON is JavaScript Object Notation
let person = {
    "name": "Alice",
    "age": 30,
    "email": "alice@example.com",
    "skills": ["JavaScript", "React", "Node.js"]
};

// Convert to JSON string
let json = JSON.stringify(person);
console.log(json);

// Parse JSON string
let parsed = JSON.parse(json);
console.log(parsed.name);  // Alice

JSON Data Types

{
    "string": "text",
    "number": 42,
    "boolean": true,
    "null": null,
    "array": [1, 2, 3],
    "object": {
        "nested": "value"
    }
}

Common JSON Patterns

// API Response
{
    "success": true,
    "data": {
        "id": 1,
        "name": "Product",
        "price": 19.99
    }
}

// Array of objects
[
    { "id": 1, "name": "Item 1" },
    { "id": 2, "name": "Item 2" }
]

Learning Outcomes

After this module, you understand:

✅ How web requests work
✅ HTTP methods and status codes
✅ JSON data format
✅ Client-server architecture
✅ Websites vs Web Apps

Next Module: Module 22 - Query a Web Server