Program Studi Bisnis Digital • FEB

Teknologi Web & Mobile

Pertemuan 2 — Blok Bangunan Web Modern

Tiga bahasa dasar web (HTML, CSS, JavaScript), cara browser & server saling berbicara, serta domain & hosting sebagai fondasi kehadiran digital sebuah bisnis.

RPS minggu 2 · 2x50 menit

Selamat datang kembali di mata kuliah Teknologi Web dan Mobile. Minggu lalu kita sudah melihat gambaran besar ekosistem bisnis digital — hari ini kita masuk lebih dalam ke satu potongan penting dari ekosistem itu, yaitu website. Setiap kali Anda membuka Tokopedia untuk belanja, mengecek profil UMKM kuliner di Instagram yang punya tautan "link in bio" ke katalog online, atau login ke sistem akademik kampus, Anda sedang berhadapan dengan blok-blok bangunan yang sama yang akan kita bedah hari ini. Tujuan pertemuan ini bukan membuat Anda menjadi programmer, tetapi membuat Anda paham arsitektur di baliknya, sehingga kelak sebagai calon manajer produk digital, Anda bisa mengambil keputusan yang tepat — misalnya kapan cukup pakai website builder dan kapan perlu developer khusus. Siapkan catatan Anda, karena istilah-istilah seperti HTML, hosting, dan domain akan terus relevan sampai akhir semester.

Bagian 1 dari 3

Tiga Bahasa Dasar Web

HTML, CSS, dan JavaScript — tiga lapis yang bersama-sama membentuk setiap halaman web yang Anda buka setiap hari.

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda diharapkan mampu menjelaskan blok bangunan teknologi web modern dan infrastruktur pendukungnya (Sub-CPMK 2). Secara rinci:

CAPAIAN 1

TRIO WEB

Menjelaskan peran HTML, CSS, dan JavaScript dalam membentuk sebuah halaman web.

CAPAIAN 2

CLIENT-SERVER

Menggambarkan bagaimana browser (client) dan server saling berkomunikasi setiap kali halaman dibuka.

CAPAIAN 3

DOMAIN & HOSTING

Membedakan fungsi domain, hosting, dan DNS sebagai fondasi kehadiran online bisnis.

CAPAIAN 4

KEPUTUSAN

Mengevaluasi trade-off antara website builder, platform siap pakai, dan kode custom untuk kebutuhan bisnis.

Bayangkan Anda Baru Ditunjuk Mengelola Website UMKM

Pemilik brand fesyen lokal meminta Anda membangun toko online dalam dua minggu. Tiga pertanyaan langsung muncul di kepala Anda:

PERTANYAAN 1

DIBUAT DARI APA?

Halaman produk, tombol "Beli Sekarang", foto katalog — semua itu ditulis dengan bahasa apa?

PERTANYAAN 2

DISIMPAN DI MANA?

Agar bisa diakses 24 jam oleh siapa saja di Indonesia, website harus "tinggal" di suatu tempat.

PERTANYAAN 3

BANGUN SENDIRI ATAU SEWA?

Pakai Shopify langsung jadi, atau bayar developer menulis kode dari nol?

Ketiga pertanyaan itu adalah peta materi hari ini: bahasa pembangun (HTML/CSS/JS), infrastruktur (hosting/domain), dan keputusan bisnis (build vs buy).

Anatomi Halaman Web: Analogi Rumah Tinggal

Setiap halaman web yang Anda buka sebenarnya tersusun dari tiga lapis, persis seperti membangun rumah:

STRUKTUR

HTML

Fondasi, dinding, dan ruangan — kerangka yang menentukan apa saja yang ada di halaman: judul, paragraf, gambar, tombol.

TAMPILAN

CSS

Cat, lantai, dekorasi — mengatur warna, ukuran, jarak, dan tata letak agar rumah enak dipandang.

PERILAKU

JAVASCRIPT

Listrik, pintu otomatis, alarm — membuat rumah merespons saat Anda menekan saklar atau bel.

Ketiganya berdiri sendiri-sendiri, tetapi selalu bekerja bersama di dalam satu halaman web yang sama.

HTML — Kerangka Halaman

HTML (HyperText Markup Language) menyusun konten memakai tag — penanda yang memberi tahu browser "ini judul", "ini paragraf", "ini gambar".

Contoh potongan kode HTML

<h1>Sepatu Kulit Lokal</h1>
<p>Buatan tangan, harga Rp 350.000</p>
<button>Beli Sekarang</button>

Tag <h1> = judul utama, <p> = paragraf, <button> = tombol. Setiap elemen (bagian konten) dibungkus tag pembuka dan penutup.

CSS — Tampilan Halaman

CSS (Cascading Style Sheets) mengatur bagaimana elemen HTML terlihat — warna, ukuran huruf, jarak, dan posisi.

Elemen HTML yang sama, dua gaya CSS berbeda

TANPA CSS

Teks hitam biasa, tombol default browser, tanpa jarak rapi — fungsional tapi terasa mentah.

DENGAN CSS

Judul besar & berwarna, tombol dengan sudut membulat dan warna brand, tata letak rapi — siap dipajang ke pelanggan.

Konten HTML yang sama bisa terlihat sangat berbeda hanya dengan mengganti file CSS — inilah dasar dari template atau tema di website builder.

JavaScript — Perilaku Interaktif

JavaScript membuat halaman merespons aksi pengguna tanpa perlu memuat ulang seluruh halaman.

CONTOH 1

KERANJANG

Klik "+1" dan jumlah barang di keranjang langsung berubah, tanpa reload halaman.

CONTOH 2

VALIDASI

Form pendaftaran langsung memberi peringatan merah saat email diketik salah format.

CONTOH 3

FILTER

Menggeser slider harga di marketplace langsung menyaring daftar produk yang tampil.

Tanpa JavaScript, web hanya bisa "diam" seperti brosur digital; dengan JavaScript, web menjadi aplikasi yang bisa diajak berinteraksi.

Trio Bekerja Bersama di Satu Halaman

HTML + CSS + JAVASCRIPT → HALAMAN WEB DI BROWSER

Browser (Chrome, Safari, Firefox) adalah "penerjemah" yang membaca ketiga bahasa ini lalu menggambarkannya di layar Anda.

Bagian 2 dari 3

Dari Kode ke Layar: Client & Server

Bagaimana browser Anda "meminta" halaman, dan bagaimana komputer di tempat jauh "menjawabnya" dalam hitungan detik.

Model Client-Server: Permintaan & Jawaban

SETIAP KALI ANDA MEMBUKA SEBUAH WEBSITE

Proses ini berlangsung dalam hitungan milidetik — mengetik alamat, menekan enter, dan halaman sudah terisi.

Client adalah istilah untuk perangkat yang Anda pakai untuk meminta halaman web — bisa browser di laptop, aplikasi di HP, siapa pun yang "bertanya". Server adalah komputer khusus, biasanya berada di pusat data yang mungkin lokasinya jauh di Singapura atau Jakarta, yang menyimpan seluruh file HTML, CSS, dan JavaScript sebuah website dan siap "menjawab" permintaan itu kapan saja. Saat Anda mengetik alamat Tokopedia lalu menekan enter, browser Anda mengirim request atau permintaan ke server Tokopedia, dan dalam hitungan milidetik server mengirim balik seluruh file yang dibutuhkan sebagai response atau jawaban. Siklus request-response inilah yang terjadi setiap kali Anda membuka halaman baru, mengklik tombol "beli", atau menggeser feed di media sosial — semuanya percakapan cepat antara client dan server.

Front-End vs Back-End

Peran developer web umumnya terbagi mengikuti sisi client dan server:

Aspek	Front-End	Back-End
Berjalan di	Browser pengguna (client)	Server (jauh dari pengguna)
Bahasa umum	HTML, CSS, JavaScript	PHP, Python, Node.js, Java
Yang dikerjakan	Tampilan & interaksi yang terlihat	Logika bisnis, database, keamanan — tak terlihat
Contoh tugas	Tombol, layout, animasi	Simpan pesanan, proses pembayaran, cek stok

Pengembang yang menguasai keduanya disebut full-stack developer — istilah yang sering Anda temui di lowongan kerja startup.

Sekarang kita hubungkan trio HTML, CSS, JavaScript dengan istilah client-server tadi. Front-end adalah semua yang berjalan di sisi client, yaitu di browser pengguna — inilah domain HTML, CSS, dan JavaScript yang tadi kita bahas, karena tugasnya menampilkan sesuatu yang bisa dilihat dan disentuh pengguna. Back-end adalah semua yang berjalan di sisi server, memakai bahasa seperti PHP, Python, atau Node.js, dan mengurus hal-hal yang tidak terlihat pengguna, seperti menyimpan data pesanan ke database, memproses pembayaran, atau mengecek apakah stok barang masih tersedia. Ketika Anda menekan tombol "Bayar Sekarang" di Tokopedia, front-end menampilkan animasi tombol yang ditekan, sementara back-end di baliknya sedang memverifikasi kartu kredit dan mengurangi stok barang. Istilah full-stack developer, yang sering Anda temui di lowongan kerja startup, merujuk pada orang yang mahir di kedua sisi ini sekaligus.

Hitung dari Nol: Biaya Tahunan Website UMKM

Sebuah UMKM ingin website katalog sederhana. Berapa estimasi biaya infrastrukturnya per tahun?

Langkah	Perhitungan	Nilai
Domain .com per tahun	harga sewa nama domain	~Rp 150.000
Hosting per tahun	~Rp 50.000/bulan × 12 bulan	Rp 600.000
Sertifikat SSL	banyak penyedia hosting sertakan gratis (Let's Encrypt)	Rp 0
Subtotal	150.000 + 600.000 + 0	Rp 750.000
Buffer pemeliharaan 10%	10% × 750.000	Rp 75.000

TOTAL BIAYA TAHUNAN

~Rp 825.000

750.000 + 75.000 • setara ~Rp 68.750/bulan

Mari kita hitung angka nyata supaya materi ini terasa konkret bagi Anda sebagai calon pengelola bisnis digital. Domain, yaitu alamat website seperti tokoanda-dot-com, umumnya disewa sekitar seratus lima puluh ribu rupiah per tahun, tergantung ekstensi dan penyedia. Hosting, yaitu "tempat tinggal" file website, untuk paket dasar sekitar lima puluh ribu rupiah per bulan, dikali dua belas bulan menjadi enam ratus ribu rupiah setahun. Sertifikat SSL, yang membuat alamat website diawali https dan dianggap aman oleh browser, kini umumnya sudah gratis dari penyedia hosting lewat layanan bernama Let's Encrypt. Kita tambahkan juga buffer sepuluh persen untuk pemeliharaan tak terduga, sehingga totalnya mendekati delapan ratus dua puluh lima ribu rupiah per tahun — angka yang sangat terjangkau bagi UMKM dibanding menyewa ruko fisik, dan ini alasan mengapa kehadiran digital sering jadi langkah ekspansi pertama yang paling murah.

Hitung dari Nol: Waktu Muat Halaman

Halaman katalog memuat: HTML 50 KB, CSS 100 KB, JavaScript 350 KB, dan gambar produk 1.500 KB. Koneksi rata-rata pengunjung: 10 Mbps.

Langkah	Perhitungan	Nilai
Total ukuran halaman	50 + 100 + 350 + 1.500 KB	2.000 KB (2 MB)
Ubah kecepatan ke MB/s	10 Mbps ÷ 8 (bit ke byte)	1,25 MB/s
Waktu muat	2 MB ÷ 1,25 MB/s	~1,6 detik

Google menyebut halaman yang muat <3 detik menjaga bounce rate (tingkat pengunjung yang langsung pergi) tetap rendah — ~1,6 detik di sini aman.

Perhitungan ini menunjukkan mengapa desainer dan developer sangat peduli pada ukuran file, terutama gambar. Kita jumlahkan seluruh berkas yang harus dikirim server ke browser Anda: HTML lima puluh kilobyte, CSS seratus kilobyte, JavaScript tiga ratus lima puluh kilobyte, dan gambar produk seribu lima ratus kilobyte, totalnya dua ribu kilobyte atau setara dua megabyte. Kecepatan koneksi biasanya diukur dalam megabit per detik, sedangkan ukuran file dalam megabyte, jadi kita bagi delapan dulu untuk menyamakan satuan, menghasilkan satu koma dua lima megabyte per detik. Dua megabyte dibagi satu koma dua lima megabyte per detik menghasilkan sekitar satu koma enam detik waktu muat. Angka ini penting secara bisnis karena riset Google menunjukkan setiap detik tambahan waktu muat bisa meningkatkan tingkat pengunjung yang langsung pergi tanpa bertransaksi, sehingga mengompres ukuran gambar produk adalah keputusan bisnis, bukan cuma keputusan teknis.

Coba Sendiri: Uji Waktu Muat Halaman Anda

Ubah ukuran file HTML, CSS, JavaScript, dan gambar serta kecepatan koneksi, lalu amati bagaimana waktu muat berubah.

Domain vs Hosting: Alamat vs Tanah & Bangunan

DOMAIN

ALAMAT

Nama yang mudah diingat, mis. tokoanda.com — seperti alamat rumah "Jl. Pandanaran No. 12" yang menggantikan koordinat rumit.

HOSTING

TANAH & BANGUNAN

Ruang penyimpanan fisik (server) tempat file website benar-benar tinggal dan bisa diakses 24 jam.

Domain tanpa hosting = alamat menunjuk ke tanah kosong. Hosting tanpa domain = rumah ada, tapi hanya bisa ditemukan lewat koordinat angka (IP address) yang sulit diingat.

Dua istilah ini paling sering tertukar oleh pemula, padahal fungsinya berbeda dan biasanya dibeli terpisah, walau banyak penyedia menjualnya dalam satu paket. Domain adalah nama yang mudah diingat manusia, seperti tokoanda-dot-com, persis seperti alamat rumah "Jalan Pandanaran nomor dua belas" yang jauh lebih mudah diingat dibanding koordinat GPS. Hosting adalah tempat file website Anda benar-benar disimpan dan dijalankan, seperti tanah dan bangunan fisik rumah tersebut. Kalau Anda hanya membeli domain tanpa hosting, itu seperti punya alamat yang menunjuk ke tanah kosong — orang bisa mendatangi alamatnya tapi tidak ada apa-apa di sana. Sebaliknya kalau Anda hanya punya hosting tanpa domain, rumah Anda tetap ada, tapi orang hanya bisa menemukannya lewat deretan angka rumit yang disebut IP address, yang akan kita bahas lebih lanjut di slide DNS nanti.

Jenis Hosting: Shared, VPS, Cloud

SHARED HOSTING

RUKO PATUNGAN

Satu server dipakai banyak website sekaligus. Termurah, cocok untuk UMKM baru mulai.

VPS

RUKO SENDIRI

Ruang server terpisah & terjamin walau masih satu gedung fisik. Lebih mahal, lebih stabil.

CLOUD

RUANG ELASTIS

Kapasitas otomatis membesar saat traffic melonjak, mis. saat flash sale. Bayar sesuai pemakaian.

Pilihan hosting = keputusan trade-off antara biaya dan ketahanan saat traffic tinggi — bukan sekadar "yang termurah".

Setelah paham konsep hosting, penting bagi Anda sebagai calon pengambil keputusan bisnis untuk mengenal tiga jenis utamanya. Shared hosting seperti ruko yang dipakai patungan banyak penyewa — biayanya paling murah karena sumber dayanya dibagi ke ratusan website sekaligus, tapi kalau salah satu "tetangga" mendapat lonjakan pengunjung besar, website Anda bisa ikut melambat. VPS atau virtual private server seperti punya ruko sendiri di gedung yang sama — Anda punya jatah sumber daya yang dijamin, lebih stabil, dengan harga menengah. Cloud hosting adalah yang paling fleksibel, kapasitasnya otomatis membesar saat dibutuhkan, misalnya ketika brand fesyen Anda mengadakan flash sale dan pengunjung melonjak sepuluh kali lipat dalam semalam, lalu mengecil lagi setelah lonjakan reda, dan Anda hanya membayar sesuai pemakaian aktual. Keputusan memilih ketiganya bukan soal mana yang termurah, melainkan menyeimbangkan anggaran dengan seberapa penting website Anda tidak boleh down saat momen krusial.

DNS: Menerjemahkan Nama Menjadi Alamat

SAAT ANDA MENGETIK "TOKOANDA.COM"

DNS (Domain Name System) bekerja seperti buku telepon: Anda cukup ingat nama, sistem yang mencari nomor/alamat IP-nya.

DNS, singkatan dari Domain Name System, adalah penerjemah yang menjembatani domain yang mudah diingat manusia dengan IP address, yaitu deretan angka unik yang sebenarnya dipakai komputer untuk saling mengenali di internet. Prosesnya seperti ini: begitu Anda mengetik tokoanda-dot-com dan menekan enter, browser Anda bertanya ke server DNS, semacam buku telepon raksasa internet, "alamat IP dari nama ini berapa?". Server DNS menjawab dengan deretan angka, misalnya dua nol tiga titik nol titik satu satu tiga titik empat dua, lalu browser baru bisa mengirim permintaan langsung ke server hosting di alamat angka tersebut. Seluruh proses ini biasanya berlangsung kurang dari sepersekian detik, jauh lebih cepat daripada waktu yang kita hitung untuk memuat gambar produk tadi. Memahami DNS penting secara praktis, karena saat Anda memindahkan website ke penyedia hosting baru, ada jeda waktu yang disebut "propagasi DNS" sebelum semua orang di dunia bisa melihat perubahannya.

Bagian 3 dari 3

Memilih Blok Bangunan yang Tepat

Dari semua opsi yang ada, mana yang paling masuk akal untuk bisnis Anda — dan apa konsekuensi dari tiap pilihan?

Build vs Buy: Tiga Jalur untuk Hadir Online

WEBSITE BUILDER

WIX / WORDPRESS

Susun halaman lewat drag-and-drop, tanpa menulis kode. Cepat & murah, tapi fleksibilitas terbatas.

PLATFORM SIAP PAKAI

TOKOPEDIA / SHOPIFY

Toko langsung jadi & dapat traffic bawaan platform, tapi terikat aturan & biaya komisi platform.

KODE CUSTOM

TIM DEVELOPER

Bebas sepenuhnya sesuai kebutuhan bisnis, tapi biaya & waktu pengembangan paling besar.

Studi kasus: UMKM baru biasanya mulai dari platform siap pakai (traffic instan), lalu pindah ke website builder saat butuh identitas brand sendiri, dan baru pertimbangkan kode custom saat skala bisnis sudah besar.

Ketiga jalur ini mewakili spektrum trade-off antara kecepatan, biaya, dan fleksibilitas yang harus Anda kuasai sebagai calon manajer produk digital. Website builder seperti Wix atau WordPress cocok untuk profil perusahaan atau blog sederhana karena Anda tinggal menyusun elemen lewat drag-and-drop tanpa menulis satu baris kode pun, tapi desainnya terbatas pada template yang tersedia. Platform siap pakai seperti Tokopedia atau Shopify memberi Anda toko yang langsung berfungsi lengkap dengan sistem pembayaran dan pengiriman, plus akses ke jutaan pengunjung yang sudah ada di platform tersebut, tapi Anda harus mengikuti aturan platform dan membayar komisi setiap transaksi. Kode custom, dibuat tim developer dari nol, memberi kebebasan penuh untuk fitur unik yang tidak tersedia di platform manapun, tapi butuh anggaran dan waktu jauh lebih besar. Pola umum yang saya amati di lapangan: UMKM biasanya mulai dari platform siap pakai untuk validasi pasar cepat, lalu berkembang ke website builder saat ingin membangun identitas brand sendiri, dan baru mempertimbangkan kode custom ketika skala bisnis sudah cukup besar untuk membenarkan investasinya.

Diskusi Kelas, Rangkuman & Persiapan Pertemuan 3

Diskusi kelompok (10 menit): Pilih satu UMKM/brand lokal yang Anda kenal. Menurut analisis Anda, jalur mana (builder / platform / custom) yang paling tepat untuk mereka sekarang, dan kenapa?

Istilah	Inti
HTML / CSS / JavaScript	Struktur / tampilan / perilaku halaman web
Client-server	Browser meminta, server menjawab (request-response)
Domain / hosting / DNS	Alamat / tempat tinggal file / penerjemah nama ke IP

Tugas sebelum pertemuan 3: catat 3 website yang sering Anda kunjungi, lalu tebak jalur pembangunannya (builder/platform/custom) berdasarkan ciri yang dipelajari hari ini. Pertemuan berikutnya kita bahas perjalanan dari konsep ke website live.

Sebelum kita tutup, mari lakukan diskusi singkat berkelompok — pilih satu UMKM atau brand lokal yang Anda kenal, bisa dari tetangga, teman, atau akun Instagram yang sering Anda ikuti, lalu diskusikan jalur mana yang paling masuk akal untuk mereka berdasarkan kerangka build-vs-buy yang baru kita pelajari. Tabel ringkasan di layar merangkum tiga blok besar hari ini: trio HTML-CSS-JavaScript sebagai bahan bangunan, model client-server sebagai cara komunikasinya, dan domain-hosting-DNS sebagai infrastrukturnya. Sebagai tugas sebelum pertemuan berikutnya, saya minta Anda mencatat tiga website yang paling sering Anda kunjungi sehari-hari, lalu coba tebak dan jelaskan alasannya, jalur pembangunan mana yang kemungkinan mereka pakai. Pertemuan ketiga nanti kita akan melanjutkan perjalanan ini secara lebih konkret, yaitu bagaimana sebuah ide website benar-benar berubah menjadi situs yang bisa diakses publik dari nol sampai live.