Dark - IT - Tech

Pendahuluan

Banyak orang bisa membuat website, tetapi tidak semua benar-benar memahami bagaimana website bekerja dari awal sampai tampil di layar pengguna. Artikel ini akan membahas secara lengkap bagaimana sistem website modern bekerja, perbedaan peran developer, serta apa itu API dan bagaimana penggunaannya.

Setelah membaca artikel ini, kamu akan memahami:

• Bagaimana website bekerja dari sisi user sampai server
• Peran frontend dan backend
• Fungsi database
• Konsep request dan response
• Apa itu API dan bagaimana cara kerjanya
• Perbedaan Frontend, Backend, dan Fullstack Developer

Bagaimana Website Bekerja?

Ketika kamu mengetik alamat website di browser dan menekan Enter, proses berikut terjadi:

1. Browser mengirim request ke server
2. Server menerima dan memproses permintaan
3. Server mengambil data dari database (jika diperlukan)
4. Server mengirim response kembali ke browser
5. Browser menampilkan hasil dalam bentuk website

Semua proses ini terjadi dalam waktu kurang dari 1 detik.

Penjelasan Sederhana: Website Seperti Restoran

• User = Pelanggan
• Browser = Pelayan
• Server = Dapur
• Database = Gudang bahan makanan

Pelanggan memesan makanan → pelayan menyampaikan ke dapur → dapur mengambil bahan dari gudang → makanan dikirim kembali ke pelanggan.

Apa Itu Frontend?

Frontend adalah bagian website yang bisa dilihat dan digunakan langsung oleh pengguna.

Contoh Komponen Frontend:

• Halaman login
• Tombol submit
• Form pendaftaran
• Animasi
• Menu navigasi

Teknologi Frontend:

• HTML
• CSS
• JavaScript
• React, Vue, atau framework lainnya

Tugas frontend developer adalah memastikan tampilan menarik, responsive, dan mudah digunakan.

Apa Itu Backend?

Backend adalah bagian yang bekerja di belakang layar. Pengguna tidak melihatnya secara langsung.

Tugas Backend:

• Mengelola sistem login
• Menyimpan data user
• Mengatur keamanan
• Membuat API
• Berkomunikasi dengan database

Bahasa Backend Populer:

• PHP
• Node.js
• Python
• Java

Apa Itu Database?

Database adalah tempat penyimpanan data website.

Contoh data yang disimpan:

• Email dan password
• Data produk
• Artikel blog
• Komentar

Database Populer:

• MySQL
• PostgreSQL
• MongoDB

Request dan Response

Request adalah permintaan dari browser ke server.

Response adalah jawaban dari server ke browser.

Contoh:

• User membuka halaman produk
• Browser mengirim request GET
• Server mengambil data produk dari database
• Server mengirim response dalam bentuk HTML/JSON

Apa Itu API?

API (Application Programming Interface) adalah jembatan komunikasi antara frontend dan backend.

Frontend tidak langsung mengambil data dari database. Semua permintaan data dilakukan melalui API.

Contoh Endpoint API:

  GET /api/products
  POST /api/login
  PUT /api/user/1
  DELETE /api/product/5
  

Jenis-Jenis Request HTTP

• GET → Mengambil data
• POST → Mengirim data
• PUT → Mengupdate data
• DELETE → Menghapus data

Contoh Alur Login Menggunakan API

1. User memasukkan email dan password
2. Frontend mengirim POST request ke /api/login
3. Backend memeriksa database
4. Jika cocok → server kirim token
5. Frontend menyimpan token dan login berhasil

Perbedaan Frontend vs Backend vs Fullstack Developer

Frontend Developer

• Fokus tampilan dan interaksi
• Menguasai HTML, CSS, JavaScript
• Memastikan website responsive

Backend Developer

• Fokus logika sistem
• Mengatur server dan database
• Membuat API

Fullstack Developer

• Menguasai frontend dan backend
• Mampu membangun sistem lengkap

Struktur Website Modern

  User
    ↓
  Browser
    ↓
  Frontend (HTML, CSS, JS)
    ↓
  API
    ↓
  Backend (Server)
    ↓
  Database
  

Roadmap Belajar Developer

Frontend:

1. HTML
2. CSS
3. JavaScript
4. Framework (React/Vue)

Backend:

1. Bahasa server
2. Database
3. API
4. Security

Fullstack:

Gabungkan keduanya dan buat project nyata.

Kesalahan Umum Pemula

• Langsung belajar framework tanpa memahami dasar
• Tidak memahami konsep request-response
• Tidak mengerti peran API

Kesimpulan

Website modern bekerja melalui komunikasi antara frontend dan backend menggunakan sistem request dan response. API menjadi jembatan komunikasi antara keduanya.

Frontend bertugas mengurus tampilan, backend mengurus logika dan database, sedangkan fullstack menguasai semuanya.

Memahami konsep ini adalah fondasi penting sebelum masuk ke framework atau teknologi lanjutan.