Web Foundations: How the Web Works

What is Client-Server Architecture?

The web operates on a client-server model. Think of it like a restaurant:

• Client (your browser) = The customer who places an order
• Server (web server) = The kitchen that prepares and delivers the food
• Request = The order you place
• Response = The food delivered to your table

When you type a URL in your browser, you are the client making a request to a server that hosts the website. The server processes your request and sends back the web page.

The Key Players

How a Browser Loads a Web Page

1. You type https://magento-store.com/catalog/product/1 in the browser
2. Browser checks its cache for a stored copy
3. Browser asks DNS to resolve magento-store.com to an IP address
4. Browser opens a TCP connection to the server's IP on port 443
5. Browser sends an HTTPS request: GET /catalog/product/1
6. Server processes the request (PHP executes Magento code)
7. Server sends back HTML, CSS, JavaScript
8. Browser renders the page

PHP Code: Making a Client Request

<?php
// PHP acting as a CLIENT making a request to another server
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'https://api.magento-store.com/rest/V1/products/1');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'Authorization: Bearer ' . $apiToken
]);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if ($httpCode === 200) {
    $product = json_decode($response, true);
    echo "Product Name: " . $product['name'];
} else {
    echo "Request failed with HTTP code: " . $httpCode;
}

curl_close($ch);

PHP Code: Building a Simple Server

<?php
// Simple server that responds to requests
// Run with: php -S localhost:8000 server.php

$uri = $_SERVER['REQUEST_URI'];
$method = $_SERVER['REQUEST_METHOD'];

// Log incoming request
class RequestLogger {
    public static function log(string $method, string $uri): void {
        $timestamp = date('Y-m-d H:i:s');
        error_log("[$timestamp] $method $uri");
    }
}

RequestLogger::log($method, $uri);

// Route the request
switch ($uri) {
    case '/':
        header('Content-Type: text/html');
        echo '<h1>Welcome to Our Store</h1>';
        break;
    case '/api/products':
        header('Content-Type: application/json');
        echo json_encode([
            'products' => [
                ['id' => 1, 'name' => 'Widget', 'price' => 29.99],
                ['id' => 2, 'name' => 'Gadget', 'price' => 49.99]
            ]
        ]);
        break;
    default:
        http_response_code(404);
        echo '404 Not Found';
        break;
}

Key Takeaway

Every interaction on the web follows this pattern: a client sends a request, a server processes it, and a response comes back. Magento is a server-side application that receives requests from browsers and generates HTML responses dynamically.

Understanding DNS

DNS (Domain Name System) is the phonebook of the internet. It translates human-readable domain names into IP addresses that computers use to identify each other.

How DNS Resolution Works

When you type magento-store.com, this happens:

1. Browser cache    -> Is the IP cached? If yes, use it.
2. OS cache         -> Check operating system DNS cache
3. Router cache     -> Check router's DNS cache
4. ISP DNS server   -> Query your Internet Service Provider's DNS
5. Recursive lookup  -> ISP queries root servers -> .com servers -> magento-store.com's DNS
6. Response         -> Returns IP: 93.184.216.34

Types of DNS Records

IP Addresses and Ports

• IP Address: Unique numerical label assigned to each device (like a street address)
• Port: A number identifying a specific service on a server (like an apartment number)

Common ports:

• 80 = HTTP
• 443 = HTTPS
• 3306 = MySQL
• 6379 = Redis
• 22 = SSH

A full address looks like: 93.184.216.34:443 (IP + Port)

PHP: Working with Hostnames and IPs

<?php
// Resolve a domain name to an IP
$ip = gethostbyname('magento-store.com');
echo "IP Address: $ip\n";

// Get all IPs for a domain (DNS round-robin)
$ips = gethostbyname('magento-store.com');
echo "Resolved IP: $ips\n";

// Get fully qualified domain name of the current server
$fqdn = php_uname('n');
echo "Server hostname: $fqdn\n";

// Check if a port is open on a host
function isPortOpen(string $host, int $port, int $timeout = 3): bool {
    $connection = @fsockopen($host, $port, $errno, $errstr, $timeout);
    if (is_resource($connection)) {
        fclose($connection);
        return true;
    }
    return false;
}

// Check if MySQL is running
if (isPortOpen('localhost', 3306)) {
    echo "MySQL is running on port 3306\n";
}

// Check if Redis is running
if (isPortOpen('127.0.0.1', 6379)) {
    echo "Redis is running on port 6379\n";
}

Analogy: Sending a Letter

Think of DNS like a postal system:

• Domain name = Recipient's name (John Smith)
• IP address = Street address (123 Main St, City, ZIP)
• Port = Apartment number (Apt 4B)
• DNS = The post office that looks up the address for you

Just as you write a letter with a name but the post office needs the full address to deliver it, your browser uses DNS to find the exact IP address of the server.

Magento as a Web Server Application

Magento sits between the web server (Apache/Nginx) and the database. Here is the complete request flow:

Browser (Client)
    |
    v
[DNS Resolution] -> Domain to IP
    |
    v
[Web Server - Apache/Nginx]
    |
    v
[PHP-FPM] -> Processes PHP code
    |
    v
[Magento Application]
    |-- Reads configuration
    |-- Routes the request
    |-- Loads modules
    |-- Executes controllers
    |-- Renders templates
    |
    v
[Database - MySQL] -> Product data, orders, customers
    |
    v
[Cache - Redis/Varnish] -> Full page cache, session cache
    |
    v
Response back to Browser

The Role of Each Layer

PHP Code: Understanding Request Lifecycle

<?php
// This is how Magento's entry point works (simplified)
// File: pub/index.php

// 1. Autoloader loads classes on demand
require __DIR__ . '/../vendor/autoload.php';

// 2. Create the application
$bootstrap = \Magento\Framework\App\Bootstrap::create(
    BP,
    new \Magento\Framework\ObjectManager\Config\Config(
        [/* di configuration */]
    )
);

// 3. Create and run the application
$application = $bootstrap->createApplication(
    \Magento\Framework\App\Http::class
);

$application->run();

// 4. The application:
//    - Reads the URL
//    - Finds the matching route
//    - Instantiates the controller
//    - Executes the action method
//    - Returns a response object

Understanding Response Objects

Every web request produces a response. In Magento, this is typically:

<?php
namespace Magento\Catalog\Controller\Product;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\Page;

class View extends Action
{
    public function execute(): Page
    {
        // Magento builds a Page object
        $page = $this->resultPageFactory->create();
        
        // Set page title
        $page->getConfig()->getTitle()->set(__('Product View'));
        
        // This page object eventually becomes:
        // 1. An HTML string
        // 2. Sent as an HTTP response
        // 3. With Content-Type: text/html header
        // 4. With a 200 OK status code
        
        return $page;
    }
}

Real-World Analogy

Magento is like a department store:

• The entrance (web server) greets customers
• The directory board (Magento router) tells you which floor to go to
• Each department (module) handles specific products
• The sales floor (blocks/templates) displays items
• The inventory system (database) tracks stock
• The loyalty system (cache) speeds up repeat visits