Skip to content
Home ยป Memahami Arsitektur Client-Server pada Aplikasi Web

Memahami Arsitektur Client-Server pada Aplikasi Web

Aplikasi web modern umumnya menggunakan arsitektur Client-Server. Dalam arsitektur ini, beban kerja dibagi antara pihak yang meminta data atau layanan (Client) dan pihak yang menyediakan data atau layanan (Backend & Database).

Berikut adalah penjelasan sepintas mengenai arsitektur, mekanisme kerja, serta pilihan tech stack yang biasa digunakan untuk membangunnya.

1. Arsitektur dan Komponen Utama

Secara garis besar, aplikasi ini terbagi menjadi tiga lapisan utama (Three-Tier Architecture):

A. Client Side (Front-End)

Ini adalah bagian aplikasi yang berinteraksi langsung dengan pengguna.

  • Tugas: Menampilkan Antarmuka Pengguna (UI), menangani input/interaksi, melakukan validasi dasar di sisi klien, dan mengirimkan permintaan (request) ke backend.
  • Karakteristik: Berjalan di perangkat lokal pengguna (menggunakan CPU dan RAM milik user). Contoh: app yang biasa Anda gunakan sehari-hari di ponsel seperti Instagram, Whatsapp, dan sebagainya.

B. Backend Side (Server/Cloud)

Ini adalah otak dari aplikasi yang berada di server atau infrastruktur cloud.

  • Tugas: Menerima permintaan dari client, menjalankan logika bisnis (proses data, perhitungan, dll.), mengatur keamanan (otentikasi dan otorisasi), serta berkomunikasi dengan database.
  • Karakteristik: Tidak terlihat oleh pengguna (invisible), berjalan secara terpusat di server.

C. Database Layer

Tempat penyimpanan data aplikasi secara permanen (persistent).

  • Tugas: Menyimpan, membaca, mengubah, dan menghapus data berdasarkan perintah dari backend.
  • Karakteristik: Sangat dioptimalkan untuk keamanan data dan kecepatan akses (query).

2. Mekanisme Kerja (Alur Komunikasi)

Bagaimana ketiganya saling terhubung? Mari kita ambil contoh sederhana: Proses Login Pengguna.

  1. User Input (Client): Pengguna memasukkan username dan password di halaman login aplikasi (baik di browser PC atau aplikasi mobile), lalu klik tombol “Login”.
  2. Sending Request: Client membungkus data tersebut ke dalam sebuah HTTP Request (biasanya menggunakan metode POST) dan mengirimkannya melalui internet ke URL endpoint API backend (contoh: https://api.aplikasi.com/v1/login).
  3. Processing (Backend): Server backend menerima request tersebut. Backend akan melakukan sanitasi data untuk keamanan, lalu mencocokkan username dan password yang dikirim dengan data yang ada di database.
  4. Query Data (Database): Backend melakukan query (perintah) ke Database untuk mencari data user tersebut. Database memprosesnya dan mengembalikan data user ke backend.
  5. Validation & Token Generation (Backend): Backend memverifikasi apakah password cocok (biasanya menggunakan teknik hashing seperti bcrypt). Jika cocok, backend akan membuat sebuah token sesi (seperti JWT – JSON Web Token).
  6. Sending Response: Backend mengirimkan token tersebut kembali ke client dalam bentuk HTTP Response dengan status sukses (200 OK).
  7. Rendering (Client): Client menerima respons tersebut, menyimpan token di penyimpanan lokal (seperti LocalSession atau Shared Preferences), dan mengubah tampilan halaman (mengalihkan pengguna ke halaman Dashboard).

3. Tech Stack yang Diperlukan

Untuk membangun ekosistem ini, Anda memerlukan kombinasi teknologi di setiap lapisannya. Berikut adalah beberapa pilihan populer saat ini:

A. Client-Side Tech Stack

Tergantung pada target perangkat pengguna:

  • Web Browser (PC & Mobile Web):
    • Dasar: HTML5, CSS3, JavaScript (ES6+).
    • Framework Modern: React.js, Vue.js, atau Angular.
  • Mobile App (Native / Cross-Platform):
    • Native: Kotlin / Jetpack Compose (Android), Swift (iOS).
    • Cross-Platform (Satu basis kode untuk Android & iOS): Flutter (Dart) atau React Native (JavaScript/TypeScript).

B. Backend-Side Tech Stack

Di sinilah logika bisnis ditulis. Anda memerlukan bahasa pemrograman server dan framework-nya:

  • Node.js (JavaScript/TypeScript): Menggunakan framework Express.js atau NestJS. Sangat populer dan cepat.
  • Python: Menggunakan framework FastAPI (sangat cepat untuk API) atau Django (lengkap dengan fitur bawaan).
  • Java / Kotlin: Menggunakan Spring Boot. Sangat kuat untuk skala perusahaan besar (enterprise).
  • Go (Golang): Terkenal dengan performa tinggi dan efisiensi memori untuk microservices.

C. Database Tech Stack

Pemilihan database disesuaikan dengan struktur data aplikasi:

  • Relational / SQL (Data terstruktur, butuh relasi antar tabel):
    • PostgreSQL (Sangat direkomendasikan untuk fitur lanjutannya).
    • MySQL atau MariaDB.
  • Non-Relational / NoSQL (Data fleksibel, berbasis dokumen atau key-value):
    • MongoDB (Berbasis dokumen JSON).
    • Redis (Sangat cepat, biasanya digunakan untuk caching data atau manajemen sesi).

D. Cloud & Infrastructure (Tempat Backend & Database Berada)

Agar aplikasi bisa diakses 24/7 di internet, Anda perlu menaruh backend dan database di penyedia layanan cloud:

  • Penyedia Cloud Utama (layanan standar yang digunakan oleh perusahaan dan startup yang besar dan ‘serius’): AWS (Amazon Web Services), Google Cloud Platform (GCP), atau Microsoft Azure.
  • Opsi VPS / Cloud Server yang Lebih Simpel: DigitalOcean, Linode, atau Vultr.
  • Platform-as-a-Service (PaaS – Tinggal deploy kode tanpa pusing urus server): Heroku, Render, atau Railway.

Catatan Tambahan untuk Aplikasi Mobile: Berbeda dengan web browser yang bisa langsung mengunduh file HTML/JS dari server saat dibuka, aplikasi mobile (Client) harus diunduh terlebih dahulu melalui Play Store atau App Store. Setelah terinstal, aplikasi mobile tersebut hanya akan berkomunikasi dengan backend murni menggunakan data mentah (biasanya berformat JSON) melalui API.

Leave a Reply

Your email address will not be published. Required fields are marked *