Arsitektur Aplikasi Web

 


Arsitektur aplikasi web adalah struktur bagaimana komponen-komponen web saling terhubung untuk memberikan fungsi tertentu kepada pengguna. Tujuannya adalah memastikan aplikasi mudah dikembangkan, aman, cepat, dan dapat diperluas.

1.Presentation Layer (Front-End)

Bagian yang dilihat dan digunakan oleh user.
Teknologi:

  • HTML → struktur konten

  • CSS → tampilan

  • JavaScript → interaksi

  • Framework modern: React, Vue, Angular (opsional untuk perkuliahan)

Tanggung jawab:

  • Menampilkan UI

  • Mengirim request ke server

  • Menampilkan response dari server

Contoh alur:
User klik “Login” → browser mengirim data ke backend.

2. Application Layer (Back-End / Logic Layer)

Bagian yang menjalankan logika bisnis.

Teknologi:

  • PHP, Node.js, Python (Django/Flask), Java Spring, Go, dll.

  • Framework PHP: Laravel, CodeIgniter, Slim

Tanggung jawab:

  • Memproses request dari front-end

  • Validasi data

  • Autentikasi & otorisasi

  • Mengakses database

  • Mengembalikan response (HTML/JSON)

Contoh:
Validasi username & password → cek ke database → kembalikan status login.

3. Data Layer (Database Layer)

Tempat penyimpanan data permanen.

Teknologi:

  • MySQL, PostgreSQL, MariaDB

  • MongoDB (NoSQL)

  • Redis (cache)

Tanggung jawab:

  • Menyimpan dan mengambil data

  • Menjaga konsistensi & integritas data

Contoh:
Tabel users, produk, transaksi.


Bentuk Arsitektur Lainnya

1. Client–Server Architecture
Browser (client) berkomunikasi dengan server menggunakan HTTP.

2. MVC Architecture (Umum pada PHP/Laravel/CI)
Memisahkan aplikasi ke:
Model → data & logika database
View → tampilan
Controller → penghubung model–view

3. Microservices Architecture
Aplikasi dipecah menjadi layanan kecil:
Service User
Service Product
Service Order
Komunikasi menggunakan REST/Message Queue.

Contoh Arsitektur Web Modern





Studi Kasus







Absensi



Video Kuliah






Latihan

1. STUDI KASUS: Aplikasi Manajemen Data Siswa

Aplikasi Manajemen Data Siswa Berbasis Web (CRUD + Upload Foto)
Teknologi:
Front-End: HTML, CSS, JavaScript (Fetch API)
Back-End: PHP Native
Database: MySQL
Arsitektur: Three-Tier (Presentation – Logic – Data Layer)

Deskripsi Singkat
Aplikasi ini digunakan untuk mengelola data siswa, meliputi:
Input data siswa baru
Menampilkan daftar siswa
Update data siswa
Hapus data siswa
Upload foto profil siswa


Monitoring


Referensi :

Share this

Related Posts

Previous
Next Post »