Pernahkah kamu penasaran apa yang terjadi ketika kamu mengklik tombol Login di sebuah website? Dari luar, prosesnya terlihat sederhana. Kamu hanya perlu memasukkan email dan password, lalu menekan tombol login. Namun, di balik tampilan tersebut terdapat proses komunikasi antara frontend, backend, API, dan database. Setiap bagian memiliki tugas masing-masing untuk memproses permintaan pengguna.
Mengenal Frontend, Backend, dan Database
Sebuah aplikasi web memiliki beberapa bagian utama yang menjalankan tugas berbeda. Frontend menjadi bagian yang langsung kamu lihat dan gunakan. Halaman website, formulir, tombol, dan berbagai tampilan lainnya termasuk dalam frontend. Kamu bisa mengibaratkan frontend seperti pelayan restoran yang berinteraksi langsung dengan pelanggan.
Selanjutnya, backend menjalankan logika dan proses di balik aplikasi. Backend memeriksa data yang kamu kirim dan menyiapkan jawaban sesuai permintaan. Jika menggunakan analogi restoran, backend berperan seperti dapur yang mengolah pesanan.
Kemudian, database menyimpan berbagai data yang aplikasi perlukan. Data pengguna dan informasi aplikasi dapat tersimpan dan terkelola melalui database. Dalam analogi restoran, database berperan seperti gudang yang menyimpan berbagai bahan.
Apa Itu API?
Frontend dan backend membutuhkan penghubung agar keduanya dapat berkomunikasi. API (Application Programming Interface) menyediakan jalur komunikasi tersebut. API membantu frontend mengirim permintaan kepada backend dan menerima hasil dari proses tersebut.
Dalam pola aplikasi web pada umumnya, browser tidak mengakses database secara langsung. Browser mengirim request melalui API kepada backend. Setelah itu, backend menjalankan proses yang diperlukan dan berkomunikasi dengan database.
Salah satu gaya desain API yang populer yaitu REST API. REST berfokus pada resource atau data yang aplikasi kelola. Misalnya, aplikasi dapat mengelola resource berupa data pengguna melalui endpoint /api/users. Kamu juga dapat mengakses pengguna tertentu melalui endpoint /api/users/7.
Bagaimana HTTP Bekerja?
Ketika frontend membutuhkan data atau ingin menjalankan suatu proses, browser mengirim HTTP Request kepada server. Request tersebut memberi tahu server tentang tindakan yang ingin aplikasi jalankan.
Setelah menerima request, backend membaca permintaan tersebut dan menjalankan logika aplikasi. Kemudian, server mengirim HTTP Response yang berisi status dan hasil proses kepada browser.
Secara sederhana, alurnya seperti berikut:
Browser → HTTP Request → Backend → HTTP Response → Browser
Untuk proses yang membutuhkan keamanan seperti login, gunakan HTTPS. HTTPS mengenkripsi komunikasi sehingga dapat memberikan perlindungan yang lebih baik ketika pengguna mengirim data sensitif.
Mengenal Request dan Response
HTTP Request memiliki beberapa bagian penting. URL menunjukkan alamat tujuan request. Method menunjukkan tindakan yang ingin aplikasi jalankan. Header membawa informasi tambahan, sedangkan body membawa data jika request membutuhkannya.
Contohnya, proses login dapat mengirim email dan password melalui body request. Setelah backend memeriksa data tersebut, server mengirim response dengan status tertentu dan data dalam format JSON.
Dengan memahami bagian-bagian tersebut, kamu dapat melihat bahwa satu klik pada website sebenarnya dapat memicu beberapa proses komunikasi di belakang layar.
JSON sebagai Format Pertukaran Data
Frontend dan backend membutuhkan format yang sama agar keduanya dapat bertukar data dengan mudah. Salah satu format yang umum digunakan yaitu JSON (JavaScript Object Notation).
JSON menggunakan struktur key-value dan dapat menampilkan data dalam bentuk object maupun array. Contohnya:
{
"name": "Agil",
"age": 22
}
JSON juga dapat menampilkan beberapa object dalam sebuah array:
[
{
"name": "Agil",
"age": 22
}
]
Struktur JSON membantu frontend membaca data dari backend dengan lebih mudah. Kamu dapat menganggap JSON seperti format struk pesanan yang membantu pelayan dan dapur memahami informasi yang mereka tukarkan.
GET, POST, PUT, dan DELETE
HTTP menyediakan beberapa method untuk menentukan tindakan terhadap data. Empat method dasar yang sering muncul dalam API yaitu GET, POST, PUT, dan DELETE.
GET meminta server mengambil data. Misalnya, GET /api/users meminta daftar pengguna.
POST mengirim data atau menjalankan proses tertentu. Misalnya, aplikasi dapat menggunakan POST /api/users untuk mengirim data pengguna baru. Endpoint login juga dapat menggunakan POST.
PUT meminta server mengubah data dengan penggantian penuh. Contohnya, aplikasi dapat menggunakan PUT /api/users/7 untuk memperbarui data pengguna tertentu.
DELETE meminta server menghapus data. Contohnya, DELETE /api/users/7 meminta server menghapus pengguna dengan ID 7.
Kamu bisa mengingat keempat method tersebut melalui analogi daftar kontak: GET untuk melihat, POST untuk menambahkan, PUT untuk mengganti, dan DELETE untuk menghapus.
Bagaimana Proses Login Terjadi?
Sekarang mari kita lihat perjalanan data ketika pengguna melakukan login.
Pertama, pengguna membuka halaman login dan mengisi email serta password. Frontend membaca input tersebut ketika pengguna menekan tombol login. Setelah itu, frontend mengirim data kepada backend melalui API.
Backend kemudian memeriksa kredensial pengguna. Sistem membandingkan password yang pengguna masukkan dengan hash password yang tersimpan. Jika data sesuai, sistem dapat memberikan session atau token. Jika data tidak sesuai, backend mengirim informasi kegagalan dan frontend menampilkan pesan error kepada pengguna.
Jadi, ketika website menampilkan pesan “password salah”, backend sudah melakukan pemeriksaan terhadap data yang pengguna kirim. Frontend hanya menampilkan hasil yang backend berikan.
Contoh Komunikasi Frontend dan Backend
Frontend dan backend dapat berkomunikasi melalui kode. Dalam contoh pada materi, React berperan sebagai frontend, sedangkan Laravel/PHP menjalankan fungsi backend.
React memanggil endpoint /api/users menggunakan fetch(). Setelah itu, Laravel menerima request tersebut dan mengirim data dalam format JSON. React kemudian membaca response tersebut dan menampilkan data kepada pengguna.
Alurnya menjadi:
React → GET /api/users → Laravel → JSON Response → React
Contoh tersebut menunjukkan bagaimana frontend meminta data dan bagaimana backend memberikan jawaban melalui API.
Full Flow: Dari Klik Sampai Data Tampil
Jika kita gabungkan seluruh proses, perjalanan data dalam sebuah aplikasi web dapat terlihat seperti berikut:
User → React → HTTP Request → API → Laravel → MySQL → Response JSON → React → UI
Misalnya, seorang pengguna melakukan pemesanan melalui aplikasi. React mencatat tindakan pengguna dan mengirim request melalui API. API meneruskan permintaan tersebut kepada backend. Laravel kemudian menjalankan logika aplikasi dan berkomunikasi dengan MySQL untuk mengelola data.
Setelah proses selesai, backend mengirim response dalam format JSON. React menerima response tersebut, mengolah datanya, lalu menampilkan hasilnya pada UI.
Dengan alur tersebut, setiap tindakan pengguna dapat melewati beberapa bagian sebelum website menampilkan hasil akhirnya.
Kesimpulan
Website yang terlihat sederhana sebenarnya menjalankan banyak proses di belakang layar. Frontend berinteraksi langsung dengan pengguna, backend menjalankan logika aplikasi, database menyimpan data, dan API menghubungkan frontend dengan backend.
HTTP membantu browser dan server bertukar request serta response. Sementara itu, JSON membantu frontend dan backend bertukar data dengan struktur yang mudah dibaca.
Dengan memahami frontend, backend, database, API, HTTP, JSON, serta method GET, POST, PUT, dan DELETE, kamu dapat memahami bagaimana sebuah website bekerja dari balik layar. Jadi, ketika kamu mengklik sebuah tombol di website, sebenarnya ada banyak proses yang bekerja sebelum halaman menampilkan hasilnya.