Unit 1: Network & Architecture Simulator

What is 3-Tier Architecture?

Modern web applications separate concerns into three distinct layers. Each layer runs on its own infrastructure and communicates with the next via a network:

• Presentation Tier — The client (your browser). It renders the UI, handles clicks and keyboard input, and displays data to the user. Never talks directly to the database.
• Application Tier — The web server (Apache, Nginx, Node.js). It receives HTTP requests, runs business logic, queries the database, and returns formatted responses (usually HTML or JSON).
• Data Tier — The database (MySQL, PostgreSQL, MongoDB). It stores and retrieves persistent data. Only the application tier can talk to it.

How the data flows: You click a link → browser sends HTTP request → server processes it → server queries database → database returns results → server builds a response → browser renders the page. This is called the request-response cycle.

Try it yourself

Type any URL into the text box below and click "Send HTTP Request". Watch the animated packet travel from the Client through the Server to the Database and back. The terminal log shows each step in detail.

The Web is a system of interlinked hypertext documents accessed via the Internet. It was invented by Sir Tim Berners-Lee in 1989 while working at CERN. His vision was a collaborative system where researchers could share documents seamlessly across the globe.

A URL (Uniform Resource Locator) identifies the location of a resource on the web. Every URL follows this structure:

scheme://host:port/path?query#fragment

• Scheme — The protocol used (HTTP, HTTPS, FTP). HTTPS encrypts all data via TLS/SSL.
• Host — The domain name or IP address of the server (e.g., beu-bih.ac.in).
• Port — The network port (default: 80 for HTTP, 443 for HTTPS). Usually omitted when using defaults.
• Path — The specific resource location on the server (e.g., /api/students).
• Query — Key-value parameters passed to the server, starting with ? (e.g., ?sem=3&branch=cse).
• Fragment — A section within the page, starting with #. Never sent to the server — used only by the browser.

function parseURL() {
  const url = document.getElementById('urlParserInput').value;
  const parsed = new URL(url);
  document.getElementById('up-scheme').textContent = parsed.protocol.replace(':', '');
  document.getElementById('up-host').textContent = parsed.hostname;
  document.getElementById('up-path').textContent = parsed.pathname;
  document.getElementById('up-query').textContent = parsed.search.replace('?', '') || '(none)';
  document.getElementById('up-fragment').textContent = parsed.hash.replace('#', '') || '(none)';
}

The Domain Name System (DNS) is the phonebook of the Internet. Humans remember names like beu-bih.ac.in, but computers communicate using IP addresses like 103.21.140.84. DNS translates one to the other.

When you type a URL and hit Enter, the browser follows these steps:

1. Browser Cache Check — The browser checks its local cache for a recent DNS record.
2. OS Cache Check — If not found, the operating system's cache is checked.
3. Recursive DNS Resolver — If still not found, the query goes to your ISP's DNS resolver (or a public resolver like 8.8.8.8 — Google DNS).
4. Root Nameserver — The resolver asks the root nameserver which TLD (Top-Level Domain) server to ask (e.g., .in).
5. TLD Nameserver — The TLD server points to the authoritative nameserver for the domain.
6. Authoritative Nameserver — Returns the actual IP address to the resolver, which passes it back to your browser.

MIME (Multipurpose Internet Mail Extensions) types tell the browser the nature of the content being served. The server includes a Content-Type header in the HTTP response. The browser uses this to decide how to render the data.

HTTP defines a set of request methods (also called verbs) that indicate the desired action for a resource. The most common ones are:

Idempotent means making the same request multiple times produces the same result. GET, PUT, and DELETE are idempotent — POST and PATCH are not.

HTTP Status Codes are grouped by category:
1xx — Informational (Request received)
2xx — Success (200 OK, 201 Created)
3xx — Redirection (301 Moved, 304 Not Modified)
4xx — Client Error (400 Bad Request, 403 Forbidden, 404 Not Found)
5xx — Server Error (500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable)

What Each Phase Means

Every HTTP request takes time. The waterfall chart below breaks down where that time is spent:

• DNS Lookup — The browser asks a DNS server: "What IP address does beu-bih.ac.in resolve to?" This requires a chain of queries (browser cache → OS cache → resolver → authoritative nameserver). Takes 20–120ms typically.
• TCP Connection — A three-way handshake (SYN → SYN-ACK → ACK) establishes a reliable connection between your browser and the server. Takes roughly one round-trip time (~30–80ms).
• TLS Handshake — For HTTPS connections, the browser and server negotiate encryption keys. This adds 1–2 round trips of overhead (~50–250ms). This is why HTTPS feels slightly slower than HTTP on first load.
• Request Send — Time taken to transmit the HTTP request bytes from client to server over the network.
• Response Wait (TTFB) — Time to first byte. The server processes the request and starts sending back the response. This includes any database queries the server must run.

Click Simulate Request below to see a realistic timing profile. Notice which phases dominate — in practice, DNS and TLS are usually the slowest.

function drawWaterfall(timings) {
  var phases = [
    { label: 'DNS Lookup', key: 'dns', color: '#f59e0b' },
    { label: 'TCP Connection', key: 'tcp', color: '#3b82f6' },
    { label: 'TLS Handshake', key: 'tls', color: '#8b5cf6' },
    { label: 'Response Wait', key: 'wait', color: '#ec4899' }
  ];
  phases.forEach(function (p) {
    var w = Math.round((timings[p.key] / maxTime) * 100);
    html += '<div style="width:' + w + '%;background:' + p.color + '"></div>';
  });
}

Select an HTTP method and see how the request structure changes. For GET, parameters go in the URL. For POST/PUT, the data goes in the request body.