Model Web Tiga Lapisan — Pembagian Tugas antara Web, Aplikasi, dan Database

Artikel ini adalah bagian dari kursus Dasar-Dasar Teknologi Informasi, yang membangun dari nol pengetahuan TI praktis yang minimal kamu butuhkan untuk memprogram dan melakukan vibe coding.
Frontend dan backend hanyalah sebutan lain untuk salah satu dari tiga lapisan: Web, aplikasi, dan database. Alur yang melintasi lapisan-lapisan itu kita periksa lewat diagram.

Artikel ini membahas model Web tiga lapisan.

Ini adalah cara memandang aplikasi Web sebagai tiga peran: Web, aplikasi, dan database.

Frontend dan backend di buku pemula hanyalah sebutan lain untuk salah satu dari ketiga peran ini.

Kaitan istilah buku pemula dengan tiga lapisan
===FrontendBackendDatabaseLapisan WebLapisan AppLapisan DBTampilan danpenerimaan inputLogika, perhitunganinstruksi baca/tulisPenyimpanan danpembacaan dataRequestBaca/tulis
Baris atas berisi istilah yang muncul di buku dan kursus pemula, baris tengah nama yang dipakai di artikel ini, dan baris bawah tugas yang ditangani tiap lapisan. Dua kotak yang dihubungkan garis ganda adalah hal yang sama dengan sebutan berbeda.

Teks utama memakai nama lengkap; karena ruang diagram sempit, di diagram disingkat menjadi lapisan Web, lapisan App, dan lapisan DB.

Model tiga lapisan membagi satu aplikasi ke dalam peran Web, aplikasi, dan database

Model tiga lapisan (three-tier architecture; susunan yang dibangun sebagai tiga peran: Web, aplikasi, dan database) adalah bentuk dasar aplikasi Web, dan tiap bagian yang dipisahkan disebut lapisan (tier).

Nama di artikel iniIstilah bahasa InggrisYang ditanganiNama di buku pemula
Lapisan server Webpresentation tierMengembalikan file untuk layarFrontend
Lapisan Appapplication tierMembuat keputusan dan menghitungBackend
Lapisan DBdata tierMenyimpan dan membaca dataDatabase

File yang dikembalikan lapisan server Web dijalankan oleh browser pengguna untuk menggambar layar.

Susunan itu sendiri — bagian mana saja aplikasi dipisah dan bagaimana bagian-bagian itu disambungkan — adalah arsitektur (architecture), dan "arsitektur 3 lapisan" di buku pemula sama dengan model tiga lapisan di artikel ini.

Isi dari satu my-app
my-app (aplikasi reservasi khusus anggota)
Lapisan Web (frontend)
  • Menampilkan formulir reservasi dan daftar reservasi
  • Menerima input seperti 2 orang pada 12/24 18:00
  • Berjalan di browser pengguna
Lapisan App (backend)
  • Memeriksa apakah 12/24 18:00 masih kosong
  • Menetapkan reservasi lalu mengembalikan hasilnya ke lapisan server Web
  • Berjalan di server
Lapisan DB (database)
  • Menyimpan catatan reservasi dan anggota
  • Membaca catatan yang diminta lalu mengembalikannya
  • Berada di server database
Bingkai luar adalah satu my-app. Tiga kotak di dalamnya adalah lapisan, diurutkan dari atas menurut kedekatannya dengan pengguna. Butir-butirnya adalah tugas tiap lapisan dalam aplikasi reservasi.

Ketiga lapisan tersusun dari atas ke bawah menurut kedekatannya dengan pengguna.

Yang dioperasikan pengguna secara langsung hanyalah layar yang dikembalikan lapisan server Web, sedangkan dua lapisan sisanya tidak terlihat.

Layar yang dikembalikan lapisan server Web berjalan di dalam browser, satu untuk tiap pengguna.

Kalau penggunanya tiga orang, layarnya ada tiga, dan dua lapisan sisanya dipakai bertiga.

Ketiga layar di sebelah kiri masing-masing berjalan di komputer atau ponsel yang berbeda.

Dari A dan B yang memilih waktu sama, yang diproses belakangan ditolak karena catatannya terkumpul di satu lapisan database.

Berapa pun jumlah layarnya, tujuannya tetap satu dan catatannya juga satu.

Model tiga lapisan adalah pembagian tugas di dalam satu aplikasi

Model tiga lapisan adalah cara membagi satu aplikasi ke dalam tiga tanggung jawab: Web, aplikasi, dan database.

Frontend di buku pemula adalah lapisan server Web dan backend adalah lapisan server aplikasi; layar yang dikembalikan lapisan server Web ada satu untuk tiap pengguna, sedangkan lapisan server aplikasi dan lapisan database dipakai bersama oleh semua orang.

Mengapa dibagi menjadi lapisan — tempat perbaikan cukup satu, dan keputusan untuk semua orang diambil di satu tempat

Ada 2 alasan untuk membaginya.

Pertama, saat ada yang ingin diubah, tempat yang diperbaiki tetap berada di dalam satu lapisan.

Satu perubahan yang sama menyentuh area berbeda tergantung cara pembagiannya
Ingin mengubahwarna tombolSudah dibagiubah lapisan Web sajaMenyatu jadi satucari lokasi warnaLapisan App dan DBtidak disentuhPeriksa ulangproses tak terkait
Bagian atas adalah hal yang ingin diubah. Kiri untuk kasus yang dibagi menjadi lapisan, kanan untuk kasus yang menyatu jadi satu, dan baris bawah adalah area yang harus diperiksa ulang pada tiap kasus.

Kalau sudah dibagi, yang disentuh hanya file di lapisan server Web.

Kalau menyatu jadi satu, kamu harus mencari dulu tempat yang menentukan warnanya, lalu memeriksa ulang apakah proses yang tidak terkait masih berjalan.

Alasan kedua, diperlukan tempat untuk menilai permintaan semua orang sekaligus dan menyimpan hasilnya.

Layar yang dikembalikan lapisan server Web berjalan di browser satu pengguna dan tidak tahu apa yang diinput orang lain.

Aturan keputusan yang khas untuk aplikasi itu adalah logika bisnis (business logic), dan aturan itu ditempatkan di lapisan server aplikasi.

Yang diperiksa lapisan server Web, dan aturan yang ditempatkan di lapisan server aplikasi
my-app (aplikasi reservasi khusus anggota)
Yang diperiksa di layar
  • Apakah kolom tanggal dikirim dalam keadaan kosong
  • Apakah jumlah orang diisi dengan angka
  • Bisa memberi tahu di tempat, sebelum dikirim
Aturan di lapisan App (logika bisnis)
  • Apakah ada reservasi yang bertabrakan pada 12/24 18:00
  • Apakah anggota itu melewati batas jumlah reservasinya
  • Bisa memutuskan setelah membaca catatan semua orang
Bingkai luar adalah satu my-app. Kotak atas adalah hal yang diperiksa lapisan server Web di tempat, kotak bawah adalah logika bisnis yang ditempatkan di lapisan server aplikasi.

Layar yang dikembalikan lapisan server Web juga memeriksa hal seperti apakah kolom tanggal kosong.

Hanya saja, yang melakukan pemeriksaan itu adalah file yang sudah sampai di browser pengguna, sehingga pengguna bisa mengubahnya atau melewatinya.

Karena itu hal yang sama diperiksa sekali lagi di lapisan server aplikasi.

Mari kita lihat situasi ketika dua orang mengirim 12/24 18:00 yang sama pada saat bersamaan, lalu bandingkan bagaimana hasilnya berubah tergantung di mana keputusan ini ditempatkan.

Bedanya ada pada apa yang dilihat saat keputusan diambil.

Sisi layar hanya melihat daftar di browsernya sendiri, sedangkan lapisan server aplikasi membaca catatan semua orang sebelum memutuskan.

Kalau ditempatkan di sisi layar, pengguna A dan B sama-sama hanya melihat daftarnya sendiri, sehingga keduanya menilai waktunya masih kosong.

Kalau ditempatkan di lapisan server aplikasi, request semua orang sampai ke satu tempat, dan catatan bisa dibaca lalu diperiksa berurutan.

Pembagian itu demi tempat memperbaiki dan tempat memutuskan

Kalau sudah dibagi menjadi lapisan, saat ingin memperbaiki sesuatu kamu cukup menyentuh satu tempat.

Alasan yang satu lagi adalah perlunya melihat dan memutuskan untuk semua orang di satu tempat: layar yang terpisah untuk tiap pengguna tidak tahu apa yang dikirim orang lain.

Bagaimana data melintasi lapisan sampai satu reservasi tersimpan

Lapisan server Web dan lapisan server aplikasi terhubung lewat request dan response, sedangkan lapisan server aplikasi dan lapisan database terhubung lewat instruksi baca dan tulis.

LapisanYang dikerjakan di sanaDiteruskan keYang diteruskan
Lapisan WebMenerima inputLapisan App12/24 18:00 2 orang
Lapisan AppMemeriksa apakah masih kosongLapisan DBInstruksi membaca reservasi hari itu
Lapisan DBMembaca catatanLapisan App0 reservasi pada 12/24

Tiap lapisan hanya mengerjakan bagiannya sendiri lalu meneruskannya ke lapisan berikutnya.

Lapisan server Web tidak terhubung langsung ke lapisan database, dan di antaranya selalu ada lapisan server aplikasi.

Setelah catatan kembali dari lapisan database, lapisan server aplikasi yang menentukan hasilnya.

Jalurnya bercabang dua di lapisan server aplikasi, dan balasannya kembali menjadi satu
12/24 18:00request 2 orangLapisan Appbaca catatanMasih kosong→ tulisSudah ada 1→ tidak ditulisKirim responseke lapisan Web
Satu request yang datang dari kiri bercabang ke atas atau ke bawah menurut hasil pembacaan catatan. Meski bercabang, response yang kembali ke lapisan server Web tetap satu.

Ke mana pun jalurnya bercabang, yang kembali ke lapisan server Web tetap satu response.

Tiga lapisan adalah bentuk dasar di artikel ini, dan pada aplikasi nyata ada pengecualiannya.

Ada susunan yang tidak membuat lapisan server aplikasi sendiri dan langsung terhubung ke layanan eksternal, ada pula susunan yang lapisan server aplikasinya terpecah menjadi beberapa bagian.

Meski begitu, susunan itu tetap bisa dibaca dengan melihat bagian mana yang menangani Web, aplikasi, atau database.

Satu jalur turun dan kembali

Input pengguna turun dari lapisan server Web ke lapisan server aplikasi lalu ke lapisan database, dan kembali lewat jalur yang sama.

Lapisan server Web tidak terhubung langsung ke lapisan database; lapisan server aplikasi membaca catatan, menentukan hasilnya, lalu mengembalikan satu balasan saja.

Mana yang lapisan apa di aplikasimu — tiga lapisan belum tentu tiga mesin

Kalau kamu menentukan lebih dulu file dan framework di buku pemula itu milik lapisan mana, makna tiap langkahnya jadi bisa dibaca.

Tiga lapisan yang sama, dibuat dengan JavaScript dan dibuat dengan Python
==Lapisan server WebLapisan serveraplikasiLapisan databaseindex.htmlscript.jsserver.js(Express)PostgreSQLindex.htmlscript.jsviews.py(Django)PostgreSQL
Tiap baris adalah satu lapisan. Kolom tengah dan kanan adalah file atau produk untuk lapisan itu. Baris atas dan bawah sama pada keduanya, dan yang berbeda hanya baris tengah.

Lapisan server Web memakai file yang sama pada kedua kasus.

Yang bisa dibaca langsung oleh browser adalah HTML, CSS, dan JavaScript, sehingga kamu baru bisa memilih bahasa mulai dari lapisan server aplikasi.

Lapisan adalah cara membagi peran, bukan jumlah komputer.

Tiga lapisan yang berjalan di dalam satu komputer kamu sendiri
Komputer kamu
Browser (lapisan Web)
  • Membuka http://localhost:3000 memunculkan formulir reservasi
  • Membaca index.html dan script.js lalu menggambar layar
Server lokal (lapisan App)
  • Dijalankan dengan node server.js
  • Menunggu di port 3000 dan menerima request
Database (lapisan DB)
  • Menyimpan catatan reservasi dan anggota di reserve.db
  • Berjalan di dalam komputer yang sama
Bingkai luar adalah komputer kamu. Ketiga lapisan berjalan di dalam satu mesin ini, dan cara pembagian lapisannya tidak berbeda dengan setelah dipublikasikan.

Saat kamu membuka http://localhost:3000 di komputer sendiri, ketiga lapisan ada di dalam komputer itu.

Setelah dipublikasikan, tiap lapisan sering ditempatkan di server yang berbeda, dan pekerjaan itu dibahas di artikel "Deploy dan Environment Variable — dari Berjalan di Komputer Sendiri sampai Dipublikasikan".

Hanya layar yang dikembalikan lapisan server Web yang berjalan di perangkat pengguna; lapisan server aplikasi dan lapisan database ada di sisi server publik.

Meski lapisan database dipindahkan ke mesin lain, hubungannya tidak berubah: lapisan server aplikasi tetap mengirimkan instruksi baca dan tulis ke lapisan itu.

Jumlah lapisan berbeda dengan jumlah komputer

Terbagi menjadi tiga lapisan bukan berarti ada tiga komputer yang berjalan.

Di komputer sendiri ketiganya ada di dalam satu mesin, dan setelah dipublikasikan tiap lapisan sering ditempatkan di server yang berbeda.

QUIZ

Cek Pemahaman

Jawab setiap pertanyaan satu per satu.

Soal 1Proses yang memeriksa apakah ada reservasi yang bertabrakan pada waktu yang sama ditempatkan di lapisan mana?

Soal 2Apa yang lewat di antara lapisan server Web dan lapisan server aplikasi?

Soal 3Kamu membuka http://localhost:3000 di komputer sendiri dan menjalankan database di komputermu juga. Di mana ketiga lapisan itu berada?