Kita Cuma Mau Menampilkan Tulisan#

Bayangkan kita ingin membuat sebuah halaman web sederhana.

Isinya cuma:

BapakGabut

Ngoding, main game, dan ngulik apa saja.

Belum ada tombol aneh-aneh, belum ada login, belum ada data pengguna. Kita cuma ingin membuka browser dan melihat tulisan tersebut.

Untuk membuat halaman seperti ini, kita bisa memulainya hanya dengan sebuah file bernama:

index.html

Nah, sekarang kita bertemu dengan istilah pertama: HTML.

HTML atau HyperText Markup Language digunakan untuk mendefinisikan struktur dan isi sebuah halaman web.

flowchart LR
    A[index.html] --> B[Browser]
    B --> C[Halaman Web]

Kita membuat file HTML, kemudian browser seperti Chrome, Firefox, Edge, dan lainnya membaca file tersebut lalu menampilkannya sebagai halaman web.

Di dalam HTML kita bisa menentukan bahwa bagian tertentu adalah judul, paragraf, gambar, tombol, link, tabel, form, dan berbagai elemen lainnya.

Kalau dianalogikan dengan rumah, untuk sementara kita bisa menganggap HTML sebagai struktur rumahnya.

Ada pintu di sini, jendela di sana, kamar di sebelah sini, dan ruang tamu di sebelah sana.

Sebenarnya dengan ini saja kita sudah punya halaman web.

Masalahnya, tampilannya mungkin masih sangat sederhana.

Kita ingin menentukan warna, ukuran tulisan, posisi elemen, jarak antarbagian, dan sebagainya.

Berarti kita membutuhkan sesuatu untuk mengatur tampilannya.

Halamannya Sudah Ada, Sekarang Bikin Lebih Enak Dilihat#

Di sinilah kita bertemu dengan istilah berikutnya: CSS.

CSS atau Cascading Style Sheets digunakan untuk mengatur bagaimana elemen-elemen halaman tadi ditampilkan.

Misalnya kita ingin:

• warna latar belakang tertentu;
• tulisan BapakGabut dibuat lebih besar;
• tombol diberi warna;
• gambar memiliki sudut membulat;
• beberapa elemen ditampilkan berdampingan;
• tampilan tetap nyaman ketika dibuka dari HP.

Hal-hal seperti itu bisa kita atur menggunakan CSS.

flowchart LR
    HTML[HTML - Struktur] --> Browser
    CSS[CSS - Tampilan] --> Browser
    Browser --> Page[Halaman Web]

Untuk sementara, gampangnya:

HTML menentukan apa yang ada di halaman.

CSS menentukan bagaimana tampilannya.

Sampai di sini sebenarnya kita sudah bisa membuat banyak jenis halaman web.

Company profile sederhana, halaman informasi, landing page, dokumentasi, blog statis, dan berbagai halaman lainnya bisa dibuat dengan kombinasi keduanya.

Tapi kemudian kita mulai punya keinginan lain.

Bagaimana kalau ketika tombol diklik, sebuah menu terbuka?

Bagaimana kalau pengguna memilih kategori tertentu, kemudian isi halaman berubah?

Atau bagaimana kalau kita ingin menghitung sesuatu secara otomatis?

Halaman kita sekarang tidak cukup hanya ada dan terlihat bagus.

Kita ingin halaman tersebut bisa melakukan sesuatu.

Sekarang Kita Bikin Halamannya Bisa Bereaksi#

Di sinilah kita mulai berkenalan dengan JavaScript.

Untuk pengenalan awal ini, kita bisa menganggap JavaScript sebagai bagian yang mengatur perilaku atau interaksi pada halaman.

Misalnya kita punya tombol:

Tampilkan Produk

Ketika tombol itu diklik, kita ingin daftar produk muncul.

JavaScript dapat mendeteksi bahwa pengguna menekan tombol tersebut, kemudian menjalankan perintah yang sudah kita buat.

flowchart LR
    HTML[HTML - Struktur] --> Browser
    CSS[CSS - Tampilan] --> Browser
    JS[JavaScript - Interaksi] --> Browser
    Browser --> Page[Halaman Interaktif]

Tentunya kemampuan JavaScript jauh lebih luas daripada sekadar menangani tombol.

Tapi kita belum perlu membahas semuanya sekarang.

Untuk sementara, cukup pegang tiga gambaran sederhana:

HTML → struktur

CSS → tampilan

JavaScript → interaksi

Nanti kita akan mengulik masing-masing lebih dalam di tulisan tersendiri.

Sekarang halaman kita sudah punya struktur, tampilannya sudah bagus, dan bahkan sudah bisa berinteraksi dengan pengguna.

Tapi kita akan menemukan masalah baru.

Dari mana datanya?

Kalau Datanya Cuma Sedikit, Taruh Langsung Saja#

Anggap kita sedang membuat halaman daftar produk.

Untuk aplikasi sederhana, kita bisa saja menulis datanya langsung seperti ini:

1
const produk = [
2
  { nama: "Keyboard", harga: 300000 },
3
  { nama: "Mouse", harga: 150000 }
4
];

Tidak ada masalah.

Kita punya dua produk, kemudian JavaScript menampilkan keduanya ke halaman.

Selesai.

Tapi bagaimana kalau aplikasinya mulai berkembang?

Produknya bukan dua, tetapi 10.000.

Ada produk baru.

Ada produk yang dihapus.

Harga berubah.

Stok berubah.

Ada pengguna baru.

Ada transaksi baru setiap hari.

Apakah setiap ada perubahan harga kita akan membuka kode aplikasi, mencari produknya, mengganti nilainya, lalu menerbitkan ulang aplikasi?

Sepertinya kita mulai membutuhkan tempat yang memang dirancang untuk menyimpan dan mengelola data.

Kita Butuh Tempat untuk Menyimpan Data#

Nah, kebutuhan inilah yang membawa kita ke istilah berikutnya: database.

Database digunakan untuk menyimpan dan mengelola data yang dibutuhkan aplikasi.

Kalau sebelumnya kita menulis:

1
const produk = [
2
  { nama: "Keyboard", harga: 300000 }
3
];

nantinya informasi produk tersebut bisa disimpan sebagai data di database.

Bukan cuma produk.

Aplikasi bisa memiliki data pengguna, transaksi, pesanan, komentar, artikel, dan berbagai data lainnya sesuai kebutuhan.

Ketika harga berubah, kita memperbarui datanya.

Ketika ada produk baru, kita menambahkan data baru.

Ketika pengguna membuka aplikasi, aplikasi bisa mengambil data yang saat itu tersedia.

Sampai sini mungkin kelihatannya sederhana:

“Kalau begitu halaman web tinggal mengambil data dari database, kan?”

Nah, tidak sesederhana itu.

Kita masih membutuhkan satu bagian lagi.

Siapa yang Mengambil Data dari Database?#

Bayangkan database kita berisi data pengguna.

Ada nama, email, password, transaksi, dan berbagai informasi lainnya.

Tentu kita tidak ingin browser pengguna bebas membuka database lalu berkata:

“Saya minta semua datanya, ya.”

😅

Selain mengambil data, aplikasi juga punya berbagai aturan.

Misalnya:

• apakah pengguna sudah login?
• apakah pengguna boleh melihat data tersebut?
• apakah data yang dikirim valid?
• bagaimana transaksi harus diproses?
• data mana yang boleh dikirim kembali?

Kita membutuhkan bagian yang menangani proses-proses tersebut di belakang layar.

Bagian inilah yang mulai memperkenalkan kita pada backend.

flowchart LR
    User[Pengguna] --> Browser
    Browser --> Backend[Backend / API]
    Backend --> DB[(Database)]
    DB --> Backend
    Backend --> Browser

Misalnya Gabuters membuka halaman produk.

Browser bisa meminta:

“Tolong kasih saya daftar produk.”

Permintaan tersebut dikirim ke backend.

Backend memproses permintaan itu dan mengambil data yang diperlukan dari database.

Database mengembalikan datanya ke backend.

Backend kemudian mengirimkan data yang diperlukan kembali ke browser.

Barulah browser menampilkannya kepada pengguna.

Bagian aplikasi yang berhubungan langsung dengan apa yang dilihat dan digunakan pengguna biasanya kita sebut frontend.

Sementara bagian yang bekerja di belakang layar tadi kita sebut backend.

Nanti kita akan bertemu lagi dengan istilah seperti server dan API.

Untuk sekarang belum perlu dipusingkan.

Yang penting Gabuters sudah punya gambaran:

ada bagian yang dilihat pengguna, ada bagian yang bekerja di belakang, dan ada tempat untuk menyimpan datanya.

Sekarang Kita Lihat Gambaran Besarnya#

Kita mulai tadi hanya dengan keinginan menampilkan sebuah tulisan.

Lalu kita membutuhkan struktur.

Kita bertemu HTML.

Kita ingin tampilannya lebih bagus.

Kita bertemu CSS.

Kita ingin halaman bisa melakukan sesuatu.

Kita bertemu JavaScript.

Kita mulai punya banyak data yang harus disimpan.

Kita bertemu database.

Dan ketika aplikasi perlu mengambil serta memproses data tersebut, kita mulai mengenal backend.

flowchart LR
    User[Pengguna] --> Browser

    subgraph Frontend
        HTML[HTML]
        CSS[CSS]
        JS[JavaScript]
    end

    Browser --> Frontend
    Frontend --> API[Backend / API]
    API --> DB[(Database)]
    DB --> API
    API --> Frontend

Gabuters membuka aplikasi melalui browser.

Di sisi frontend, HTML membentuk struktur halaman, CSS mengatur tampilannya, dan JavaScript menangani berbagai interaksi serta logika di sisi browser.

Ketika membutuhkan data atau proses dari server, frontend berkomunikasi dengan backend.

Backend menjalankan proses yang diperlukan dan dapat berkomunikasi dengan database.

Hasilnya kemudian dikembalikan ke frontend untuk ditampilkan kepada pengguna.

Apakah semua aplikasi web di dunia persis seperti diagram tersebut?

Tentu tidak.

Ketika nanti belajar lebih jauh, Gabuters akan menemukan banyak istilah dan teknologi lain.

Tapi tidak perlu buru-buru ke sana.

Untuk sekarang, kalau Gabuters sudah memahami gambaran di atas, itu sudah cukup.

Lalu, Belajarnya Mulai dari Mana?#

Setelah membaca sampai sini, istilah-istilah yang tadi belum kita kenal mulai punya tempatnya masing-masing.

HTML.

CSS.

JavaScript.

Frontend.

Backend.

Database.

Nanti akan ada istilah lain lagi. Banyak malah. 😅

Tapi kita tidak perlu mempelajari semuanya sekaligus.

Saya lebih suka melihat proses belajar web development sebagai sebuah perjalanan.

Dan perjalanan akan lebih mudah kalau kita punya peta.

flowchart TD
    WEB[Belajar Web Development]
    WEB --> HTML[HTML]
    WEB --> CSS[CSS]
    WEB --> JS[JavaScript]
    WEB --> BE[Backend / API]
    WEB --> DB[Database]

Detailnya tidak perlu dimasukkan ke diagram agar tetap mudah dibaca, terutama dari HP.

Terus, Kalau Ada AI Ngapain Belajar Semua Ini?#

Sekarang kita kembali ke pertanyaan di awal.

Kalau AI sudah bisa membantu membuat aplikasi, buat apa kita belajar cara kerjanya?

Justru menurut saya AI membuat pemahaman dasar menjadi semakin berguna.

Misalnya kita meminta AI membuat aplikasi dan kemudian muncul error.

Kalau kita sama sekali tidak memahami struktur aplikasi, mungkin yang bisa kita lakukan hanya:

“Masih error, tolong perbaiki.”

Masih error.

“Belum bisa.”

Masih error lagi.

“Coba perbaiki lagi.”

Kadang berhasil.

Kadang error-nya malah pindah ke tempat lain. 😅

Tapi setelah memahami gambaran yang baru saja kita bahas, kita setidaknya bisa mulai mempersempit masalah.

Tampilannya berantakan?

Mungkin kita perlu melihat bagian yang mengatur tampilannya.

Tombol bisa diklik tapi tidak terjadi apa-apa?

Mungkin kita perlu melihat bagian yang menangani interaksinya.

Halaman sudah benar tetapi data tidak muncul?

Mungkin kita perlu melihat komunikasi ke backend.

Backend berjalan tetapi datanya salah?

Mungkin kita perlu melihat prosesnya atau data yang tersimpan.

Kita belum tentu langsung tahu cara memperbaikinya.

Dan itu tidak masalah.

Bedanya, sekarang kita punya gambaran harus mulai melihat ke mana.

AI tetap bisa membantu.

Bahkan mungkin AI akan menulis sebagian besar kode yang kita gunakan.

Tapi sekarang Gabuters punya peta untuk memahami apa yang sedang dikerjakan bersama AI tersebut.

Jadi menurut saya kita tidak perlu memilih antara:

“belajar ngoding” atau “pakai AI”.

Kita bisa melakukan keduanya.

Gunakan AI untuk membantu dan mempercepat pekerjaan, tapi tetap pelajari dasar-dasarnya supaya kita memahami apa yang sedang kita bangun.

Kita Baru Mulai#

Kalau setelah membaca sampai sini Gabuters merasa:

“Oh, ternyata kira-kira begitu bagian-bagian sebuah aplikasi web saling terhubung.”

Berarti tujuan tulisan ini sudah tercapai.

Kita memang belum benar-benar belajar membuat HTML.

Belum mengatur tampilan dengan CSS.

Belum belajar JavaScript.

Belum membuat backend.

Dan belum menyimpan data ke database.

Itu memang disengaja.

Tulisan ini adalah peta awal sebelum kita mulai berjalan.

Di tulisan-tulisan berikutnya, kita akan mulai membongkar bagian-bagian tersebut satu per satu. Mulai dari membuat halaman web sederhana, mempercantik tampilannya, membuatnya interaktif, sampai akhirnya membuat aplikasi yang bisa menyimpan dan mengambil data.

Tidak perlu buru-buru.

Kita ulik pelan-pelan.

Namanya juga BapakGabut. 😄