Session 1.2 – Client-Server Architecture

Module 1: Introduction to Web Design | Duration: 1 hr

Learning Objectives

By the end of this session, students will be able to:

Understand the fundamental principles of client-server architecture
Differentiate between client-side and server-side components
Explain the request-response cycle in web applications
Identify different types of server architectures
Recognize the advantages and limitations of client-server model

Introduction to Client-Server Architecture

Client-server architecture is a computing model where tasks are distributed between service providers (servers) and service requesters (clients). This architecture forms the foundation of modern web applications and Internet services.

Key Concept

In the client-server model, clients request services and resources, while servers provide them. This separation of concerns allows for scalability, maintainability, and efficient resource utilization.

Client-Server Architecture Overview

Basic Client-Server Model

Figure: Multiple clients connecting to a single server

Client

A computer or device that requests services and resources from the server. Examples include web browsers, mobile apps, and desktop applications.

Server

A powerful computer that provides services, resources, and data to clients. It processes requests and sends back responses.

Client-Side Components

The client-side refers to everything that happens on the user's device:

HTML

Defines the structure and content of web pages

                                        <div>

                                          <h1>Title</h1>

                                          <p>Content</p>

                                        </div>

CSS

Controls the presentation and styling of web pages

                                        body {

                                          color: blue;

                                          font-size: 16px;

                                        }

JavaScript

Adds interactivity and dynamic behavior to web pages

                                        function greet() {

                                          alert('Hello!');

                                        }

Client-Side Characteristics

User Interface: What users see and interact with
Browser Processing: Code executes in the user's browser
Immediate Feedback: Quick interactions without server round-trips
Limited Security: Code is visible and can be manipulated
Device Dependent: Performance varies by device capabilities

Server-Side Components

The server-side handles processing, database operations, and business logic:

PHP

Server-side scripting

Python

Django, Flask

Node.js

JavaScript runtime

Java

Enterprise applications

Server-Side Responsibilities

Data Processing: Handle business logic and calculations
Database Operations: Store and retrieve data
Authentication: Verify user credentials
Security: Protect sensitive information
Session Management: Track user state across requests
API Services: Provide data to clients

Request-Response Cycle

Understanding how clients and servers communicate is fundamental to web development:

The Request-Response Cycle

1. User Action
User clicks a link or submits a form

2. Client Sends Request
Browser sends HTTP request to server

3. Server Processes
Server executes code, queries database

4. Server Sends Response
Server returns HTML, JSON, or other data

5. Client Displays Result
Browser renders the response

Example HTTP Request:

GET /products/123 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

Example HTTP Response:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html><body>Product Details...</body></html>

Types of Client-Server Architectures

2-Tier Architecture

Direct communication between client and database server.

Client application connects directly to database
Business logic in client or database
Faster performance for simple applications
Less scalable, harder to maintain

Client ↔ Database Server

3-Tier Architecture

Separation of presentation, logic, and data layers.

Presentation Layer (Client)
Application/Business Logic Layer
Data Layer (Database)
Better security and scalability

Client ↔ Application Server ↔ Database

N-Tier Architecture

Multiple layers with specialized responsibilities for complex enterprise applications.

Client

Web Server

App Server

Business Logic

Data Access

Database

Advantages and Disadvantages

Advantages

Centralized data management
Easy to maintain and update
Better security control
Scalable and flexible
Resource sharing

Disadvantages

Server dependency (single point of failure)
Network congestion possible
Higher infrastructure costs
Requires network connectivity
Server maintenance required

Session Summary

Key Points

Client-server architecture separates concerns between clients (requesters) and servers (providers)
Client-side handles presentation using HTML, CSS, and JavaScript
Server-side manages business logic, data processing, and security
The request-response cycle defines how clients and servers communicate
Different architecture tiers (2-tier, 3-tier, N-tier) suit different application needs
This model provides scalability, security, and centralized management

Next Session Preview

In the next session, we will explore HTTP and HTTPS Protocols in detail, understanding how data is transferred between clients and servers securely.

Previous Session Course Home Next Session