Web Tech Basics: Models, Protocols & Architecture

TAKEAWAYS:

• The client-server model is the core architecture of the web, where clients (browsers) request resources from servers.
• HTTP/HTTPS are the protocols that define how data is exchanged between clients and servers, with HTTPS adding security via encryption.
• A URL is a structured address that identifies resources on the web, consisting of protocol, domain, path, and query parameters.
• Web browsers interpret HTML, CSS, and JavaScript to render web pages, with each having unique features (e.g., Chrome’s DevTools, Firefox’s privacy tools).
• The OSI and TCP/IP models explain how data is transmitted across networks, with TCP/IP being the practical implementation for the web.
• Web services (like APIs) enable communication between different software systems, powering modern apps like eSewa and Daraz.

1. The Client-Server Model: How the Web Works

The web operates on a client-server architecture, where:

• Clients (e.g., web browsers like Chrome, Firefox) request resources (web pages, images, videos).
• Servers (e.g., Apache, Nginx) store and deliver these resources.

How It Works

1. A user types a URL (e.g., https://www.esewa.com.np) into a browser.
2. The browser sends an HTTP request to the server hosting the website.
3. The server processes the request and sends back an HTTP response (e.g., HTML, CSS, or JSON data).
4. The browser renders the response into a visual webpage.

Real-World Example: eSewa Transactions

When you pay a bill via eSewa:

1. Your phone (client) sends a request to eSewa’s server.
2. The server verifies your credentials, processes the payment, and sends a confirmation.
3. Your phone displays the transaction status. This relies entirely on the client-server model and HTTP/HTTPS protocols.

sequenceDiagram
    participant User as User (Browser)
    participant Client as Client (eSewa App)
    participant Server as eSewa Server
    participant Bank as Bank Server

    User->>Client: Enters payment details
    Client->>Server: Sends HTTP POST request (with encrypted data)
    Server->>Bank: Verifies funds via HTTPS
    Bank-->>Server: Returns approval/rejection
    Server-->>Client: Sends HTTP response (success/failure)
    Client->>User: Displays confirmation

2. HTTP vs. HTTPS: The Protocols Behind Web Communication

HTTP (Hypertext Transfer Protocol)

• Definition: A stateless, application-layer protocol for transferring data over the web.
• How it works:
  • Uses request-response cycles (e.g., GET, POST, PUT, DELETE).
  • Operates over TCP/IP (port 80 by default).
  • Stateless: Each request is independent (no server-side memory of past requests).

HTTPS (HTTP Secure)

• Definition: HTTP + TLS/SSL encryption for secure communication.
• Key Features:
  • Encrypts data using asymmetric (public/private key) and symmetric encryption.
  • Uses digital certificates (issued by Certificate Authorities like Let’s Encrypt) to verify server identity.
  • Operates on port 443.
• Why It Matters:
  • Prevents man-in-the-middle attacks (e.g., hackers intercepting your Khalti login).
  • Essential for e-commerce (Daraz, eSewa), banking, and login pages.

Comparison Table: HTTP vs. HTTPS

Real-World Example: Daraz Checkout

When you buy something on Daraz:

1. Your browser sends an HTTPS request to Daraz’s server.
2. The server encrypts your payment details (credit card info) before sending them to the bank.
3. The bank verifies the payment and sends back an encrypted response. This HTTPS handshake ensures your data isn’t stolen by hackers.

3. URL Structure: Decoding Web Addresses

A URL (Uniform Resource Locator) is a structured address that identifies a resource on the web. It consists of:

Protocol://Domain:Port/Path?Query#Fragment

Breakdown of a URL Example

https://www.esewa.com.np:443/bill-payment?amount=500&service=electricity#top

Real-World Example: NTC Bill Payment via eSewa

When you pay an NTC bill:

• The URL might look like: https://www.esewa.com.np/bill-payment?biller=NTC&account=123456&amount=2000
• Here:
  • biller=NTC tells eSewa which utility bill to pay.
  • account=123456 is your NTC customer ID.
  • The https: ensures your payment details aren’t intercepted.

4. Web Browsers: The Client-Side Interface

Web browsers (Chrome, Firefox, Edge, Safari) are the client-side software that:

1. Send HTTP/HTTPS requests to servers.
2. Interpret HTML (structure), CSS (style), and JavaScript (interactivity).
3. Render the final webpage.

Key Browser Features

Real-World Example: Pathao’s Web App

When you use Pathao’s web version to track a ride:

1. Your browser sends a GET request to Pathao’s server for real-time location data.
2. The server responds with JSON data (e.g., {"driver": "ABC123", "location": [27.7172, 85.3240]}).
3. JavaScript in your browser updates the map dynamically. This relies on the browser’s ability to fetch data, parse JSON, and render updates.

5. Network Models: OSI vs. TCP/IP

The web relies on networking models to transmit data reliably.

OSI Model (7 Layers)

A theoretical model for understanding network functions:

Application (HTTP, FTP) → Presentation (SSL, encryption) → Session (NetBIOS) →
Transport (TCP, UDP) → Network (IP, routing) → Data Link (MAC, switches) →
Physical (cables, signals)

• Purpose: Helps standardize communication between devices.
• Limitation: Mostly theoretical; real-world networks use TCP/IP.

TCP/IP Model (4 Layers)

The practical implementation used by the web:

Application (HTTP, DNS) → Transport (TCP, UDP) → Internet (IP, routing) →
Network Access (Ethernet, Wi-Fi)

• Why It Matters:
  • TCP ensures reliable data delivery (used by HTTP).
  • IP handles addressing and routing (e.g., 192.168.1.1).
  • DNS translates domains (e.g., esewa.com.np) to IPs.

Real-World Example: Ncell Internet

When you browse the internet on Ncell’s 4G:

1. Your phone uses TCP/IP to send packets to a website.
2. Ncell’s network routes these packets via IP addresses.
3. The website’s server responds using HTTP/HTTPS over TCP.

6. Web Services and APIs: The Backbone of Modern Apps

Web services enable communication between software systems. APIs (Application Programming Interfaces) are the tools that make this possible.

How APIs Work

1. A client (e.g., your phone app) sends a request to an API endpoint (e.g., https://api.esewa.com.np/payment).
2. The server processes the request and returns a response (e.g., JSON data).
3. The client uses this data to update the UI.

Real-World Example: Khalti’s API Integration

When you use Khalti to pay on Daraz:

1. Daraz’s website sends a request to Khalti’s API with payment details.
2. Khalti’s server verifies the payment and returns a success/failure response.
3. Daraz’s website updates your order status based on the API response.

sequenceDiagram
    participant Daraz as Daraz Website
    participant KhaltiAPI as Khalti API Server
    participant Bank as Bank Server

    Daraz->>KhaltiAPI: POST /payment (amount=1000, user=ABC123)
    KhaltiAPI->>Bank: Verify funds
    Bank-->>KhaltiAPI: Approval
    KhaltiAPI-->>Daraz: {"status": "success", "txn_id": "KH123"}
    Daraz->>User: Show "Payment Successful!"

7. The Role of Standards: Why HTML, TCP/IP, and HTTP Matter

The web’s success depends on open standards:

• HTML/CSS/JavaScript: Define how web pages are structured, styled, and made interactive.
• HTTP/HTTPS: Define how data is exchanged.
• TCP/IP: Ensures data travels reliably across networks.
• DNS: Translates human-readable domains to machine-readable IPs.

Why Standards Are Important

• Interoperability: Any browser can display any website (as long as it follows standards).
• Innovation: Developers can build on top of existing protocols (e.g., REST APIs for mobile apps).
• Security: Standards like HTTPS protect users from attacks.

Real-World Example: YouTube’s Global Reach

YouTube works because:

1. Your browser uses HTTP/HTTPS to request videos.
2. DNS resolves youtube.com to Google’s servers.
3. TCP/IP ensures the video streams smoothly across continents.
4. HTML5/CSS3 render the video player in your browser.

In the Real World

1. eSewa Payments

   • Idea Used: Client-server model + HTTPS encryption
   • How: When you pay a bill, your phone (client) sends an encrypted request to eSewa’s server. The server processes the payment via HTTPS (secure) and returns a confirmation. Without HTTPS, hackers could steal your credentials.

2. Daraz Order Tracking

   • Idea Used: HTTP requests + JSON responses
   • How: When you check your order status, Daraz’s website sends a GET request to its server. The server responds with JSON data (e.g., {"order_id": "DZ123", "status": "shipped"}), which JavaScript in your browser uses to update the tracking page.

3. Ncell Internet Browsing

   • Idea Used: TCP/IP model
   • How: When you load a webpage on your phone, your device uses TCP/IP to break data into packets, route them via Ncell’s network, and reassemble them at the destination server. If TCP weren’t reliable, pages would load incorrectly or not at all.

4. Khalti API in Pathao

   • Idea Used: Web services (APIs)
   • How: Pathao’s app uses Khalti’s API to handle payments. When you book a ride and pay via Khalti, Pathao’s app sends your payment details to Khalti’s API, which processes the transaction and returns a response. This decouples payment logic from ride-booking logic.

5. NTC Website (HTTP vs. HTTPS)

   • Idea Used: HTTPS for security
   • How: NTC’s official website (https://ntc.gov.np) uses HTTPS to ensure that when you log in or pay bills, your credentials aren’t intercepted. If it used HTTP, cybercriminals could eavesdrop on your connection.

Exam Tip

This unit is conceptual but heavily tested in TU exams. Focus on:

1. Definitions:

   • Clearly explain client-server model, HTTP vs. HTTPS, and URL components.
   • Example: "HTTP is a stateless protocol meaning each request is independent, while HTTPS adds encryption via TLS."

2. Diagrams:

   • Draw TCP/IP vs. OSI layers (label each layer and protocol).
   • Sketch a sequence diagram for HTTP request-response (e.g., loading a webpage).
   • Show a URL breakdown (protocol, domain, path, query).

3. Real-World Applications:

   • Relate concepts to Nepali apps (eSewa, Khalti, Daraz, NTC).
   • Example: "When you pay a bill on eSewa, HTTPS ensures your bank details aren’t stolen during transmission."

4. Short Answer Tips:

   • For HTTP methods, list GET, POST, PUT, DELETE with one use case each.
   • For browser differences, compare Chrome (speed) vs. Firefox (privacy).

5. Common Pitfalls:

   • Don’t confuse OSI (7 layers) with TCP/IP (4 layers). TCP/IP is what’s actually used.
   • Remember: HTTP is stateless, but cookies/sessions can simulate state.
   • HTTPS ≠ HTTP + S: It’s HTTP + TLS/SSL encryption.

Pro Tip: Practice drawing layered models and sequence diagrams—they fetch full marks in TU exams! Also, memorize the HTTP status codes (e.g., 200 OK, 404 Not Found, 500 Server Error) as they often appear in short-answer questions.