Back to Activities

Web Architecture Mapping

Tumauini AgriRice System

Activity 1: Introduction to Web Systems and the Internet | July 2, 2026

Click on any component to explore detailed information

CLIENT LAYER (Browser)

HTML5

Document Structure

  • index.html
  • login-buyer.html
  • buyer-dashboard.html

CSS3

Visual Styling

  • style.css
  • notifications.css

JavaScript

Dynamic Behavior

  • main.js
  • login.js
  • dashboard.js
HTTP/HTTPS REQUEST (GET, POST, PUT, DELETE)

WEB SERVER (Apache via XAMPP)

.htaccess Configuration

Security Headers (X-Frame-Options, X-XSS-Protection)
File Protection (database.sql, config.php)
GZIP Compression
Browser Caching
Port 80 (HTTP)

Static Content

Served directly by Apache:

  • HTML files
  • CSS stylesheets
  • JavaScript files
  • Images (WebP)
ROUTES TO PHP

APPLICATION LAYER (PHP 7.4+)

config.php

  • Database Connection (MySQLi)
  • CORS Headers
  • sanitize_input()
  • send_response()
  • Timezone: Asia/Manila

API Endpoints (17 total)

login.php POST
register.php POST
products.php CRUD
cart.php GETPOST
checkout.php POST
orders.php GETPUT
messages.php GETPOST
admin-users.php
seller-stats.php
buyer-stats.php
SQL QUERIES (Prepared Statements)

DATABASE LAYER (MySQL/MariaDB)

tumauini_agririce_system

localhost:3306 | utf8mb4 | InnoDB

users

PK: id

  • username, password
  • role (admin/buyer/seller)
  • email, contact
products

PK: product_id

FK: seller_id

  • rice_name, price
  • stock, category
cart

PK: cart_id

FK: buyer_id, product_id

  • quantity
  • total_price
orders

PK: order_id

FK: buyer_id, product_id

  • status, quantity
  • order_date
transactions

PK: transaction_id

FK: order_id

  • payment_method
  • payment_status
messages

PK: message_id

FK: sender_id, receiver_id

  • message, is_read
  • created_at
JSON RESPONSE {"success": true, "data": {...}}

Network Protocols

DNS

Domain Name System

localhost → 127.0.0.1

HTTP/HTTPS

HyperText Transfer Protocol

Port 80/443

TCP/IP

Transmission Control Protocol

Reliable Connection

SQL

Structured Query Language

Port 3306

Example: Login Request Flow

1

User Action

Enter username and password

2

Browser (JavaScript)

Validate & create JSON payload

3

HTTP POST

Send to php/login.php

4

Apache Server

Check security, route request

5

PHP Processing

Sanitize input, prepare SQL

6

MySQL Query

SELECT * FROM users WHERE...

7

Database Response

Return user record

8

Password Verify

password_verify() hash check

9

JSON Response

Format success response

10

HTTP 200 OK

Send response to browser

11

Browser Update

Store session, redirect

12

User Sees Result

Dashboard loads successfully

Security Features by Layer

Client

Input validation (not relied upon)

Server

.htaccess protection, Security headers

Application

Prepared statements, Password hashing

Database

Foreign keys, ACID transactions

Architecture Summary

4 Layers

Client, Server, Application, Database

4 Protocols

DNS, HTTP/HTTPS, TCP/IP, SQL

6 Tables

users, products, cart, orders, transactions, messages

17 Endpoints

RESTful API for all operations

Three-Tier Client-Server Architecture - This system demonstrates a complete web architecture where DNS resolves addresses, HTTP enables communication, Apache routes requests, PHP processes business logic, and MySQL stores data securely.