Web Lanjut · Pertemuan 1

Bagaimana Web Bekerja?

Pahami alurnya dulu. Kode bisa dibantu AI, tetapi cara kerja sistem tetap harus Anda pahami.

Semester 3 4 SKS · 200 menit Paper First → AI Later
Trisna Wibawa, S.Kom Praktisi IT sejak 2013 · berpengalaman mengelola ratusan client dalam dan luar negeri · WA 089671696478
01

Kontrak Kuliah

Yang dinilai bukan hanya UTS dan UAS. Proses belajar setiap pertemuan juga diperhitungkan.

Setiap Pertemuan

Ada aktivitas, analisis, atau latihan yang dinilai dan menjadi bagian dari Project Book.

Quis

Ada pertanyaan konsep untuk melihat apakah mahasiswa benar-benar memahami materi.

Project Semester

Satu sistem pilihan akan dikembangkan sedikit demi sedikit sampai UTS dan UAS.

Aturan Dasar

  • Berpakaian sopan dan rapi sesuai aturan kampus.
  • Ketidakhadiran mengikuti ketentuan kampus.
  • Jika tidak hadir, materi dan tugas pertemuan tersebut tetap wajib dipelajari dan dikerjakan.
  • Kehadiran saja tidak otomatis berarti memperoleh nilai aktivitas.

Komponen Penilaian

  • Kehadiran: 20%
  • Latihan / Tugas / Quis: 25%
  • UTS: 25%
  • UAS: 30%
02

Aturan Penggunaan AI

AI boleh dipakai. Yang tidak boleh hilang adalah pemahaman Anda sendiri.

AI boleh membantu

  • menulis contoh kode;
  • mencari dokumentasi;
  • debugging;
  • refactoring;
  • membuat prototype.

Mahasiswa tetap wajib bisa

  • menjelaskan alur sistem;
  • menentukan data yang dibutuhkan;
  • menjelaskan request dan response;
  • menemukan kesalahan;
  • mempertahankan keputusan desain.
Prinsip kelas: AI boleh menulis kode untuk Anda. Tetapi Anda harus memahami sistem yang Anda buat.
03

Project Semester

Pilih satu sistem. Sistem yang sama digunakan sampai UAS.

Contoh sistem

  • Laundry
  • Kasir / toko
  • Perpustakaan
  • Bengkel
  • Presensi
  • Rental kendaraan
  • Booking lapangan
  • Klinik / antrean
  • Kos
  • Sistem organisasi

Boleh memilih sistem lain selama prosesnya jelas dan bisa dianalisis.

Perjalanan project

P1–P7
Analisis→ UTS
Blueprint→ P9–P15
Pendalaman→ UAS
Demo + Defense

Blueprint = rancangan sistem. Defense = menjelaskan dan mempertahankan sistem.

04

Target Pertemuan Hari Ini

Di akhir kelas, Anda harus bisa menggambar dan menjelaskan alur dasar sebuah aplikasi web.

Membedakan client dan server.
Membedakan frontend dan backend.
Menjelaskan request dan response.
Menjelaskan posisi database.
Mulai menganalisis satu sistem pilihan sendiri.
?

Pertanyaan Pembuka

Ketika Anda mengetik alamat sebuah website lalu menekan Enter, apa yang sebenarnya terjadi?

Tulis jawaban awal Anda di buku. Tidak perlu takut salah. Jawaban ini akan dibandingkan dengan pemahaman Anda setelah materi selesai.
05

Ilustrasi: Restoran

Web pada dasarnya adalah proses meminta, memproses, lalu memberikan hasil.

Pelanggan→ Pelayan→ Dapur→ Makanan→ Pelanggan
Pelanggan
≈ User
Pelayan
≈ Browser / Client
Pesanan
≈ Request
Dapur
≈ Server / Backend
Arsip / stok
≈ Database
Makanan
≈ Response
06

Client & Server

Client meminta. Server melayani.

Browser / Client→ Request→ Server→ Response→ Browser

Browser seperti Chrome, Firefox, dan Edge adalah contoh client.

07

Request → Process → Response

Banyak fitur web dapat dibaca dengan pola sederhana ini.

Login

Email + password → verifikasi user → dashboard / gagal.

Pencarian

Kata kunci → cari data → tampilkan hasil.

Tambah Data

Isi form → validasi + simpan → berhasil / gagal.

08

Frontend, Backend, dan Database

Yang terlihat pengguna hanya sebagian dari keseluruhan sistem.

Frontend

  • halaman;
  • menu;
  • form;
  • tombol;
  • tabel;
  • interaksi pengguna.

Backend

  • memeriksa login;
  • validasi data;
  • aturan bisnis;
  • mengambil / menyimpan data;
  • memeriksa hak akses.

Database

Menyimpan data aplikasi secara terstruktur, misalnya user, transaksi, produk, status, dan riwayat.

09

Contoh Alur Login SIAKAD

Ikuti perjalanan satu klik tombol LOGIN.

User mengisi NIM dan password.
Browser mengirim request ke server.
Backend menerima dan memvalidasi data.
Backend mencari user di database.
Password diperiksa.
Jika benar, sistem membuat session dan masuk ke dashboard.
Jika salah, server mengirim response bahwa login gagal.
10

Latihan Kertas

Analisis tanpa laptop.

Kasus: Andi membuka toko online, mencari Mouse Wireless, lalu sistem menampilkan 20 produk.

Identifikasi

  • User = ...
  • Client = ...
  • Request = ...
  • Server / Backend = ...
  • Process = ...
  • Database = ...
  • Response = ...

Gambarkan alurnya

User→?→?→User

Gunakan pemahaman Anda sendiri, bukan sekadar menyalin diagram.

11

Tugas Hari Ini — Project Book Minggu 1

Dikerjakan dengan tulisan tangan di buku. Setelah selesai, foto atau scan lalu unggah ke Google Drive.

Pilih satu sistem yang benar-benar Anda pahami. Tidak harus rumit. Yang penting prosesnya jelas dan bisa dianalisis sampai akhir semester.

A. Tulis identitas sistem

B. Gambar satu alur utama

Pilih satu proses utama dari sistem Anda, misalnya login, transaksi, pencarian data, atau pemesanan.

User→ Browser / Frontend→ Request→ Backend→ Database→ Response

Diagram ini hanya contoh struktur. Sesuaikan dengan sistem yang Anda pilih.

Cara Mengumpulkan

  1. Kerjakan di Project Book dengan tulisan tangan.
  2. Pastikan tulisan dan diagram jelas terbaca.
  3. Foto setiap halaman dengan pencahayaan yang baik atau gunakan aplikasi scan.
  4. Pastikan tidak ada halaman yang terpotong dan urutannya benar.
  5. Unggah hasil foto/scan ke folder Google Drive yang diberikan dosen.
  6. Simpan buku aslinya karena akan dipakai kembali pada pertemuan berikutnya, UTS, dan UAS.
12

Quis Pertemuan 1

Jawab dengan bahasa sendiri. Yang dinilai adalah pemahaman, bukan hafalan istilah.

1. Apa perbedaan client dan server?
2. Apa perbedaan frontend dan backend?
3. Apa yang dimaksud request dan response?
4. Mengapa aplikasi web membutuhkan backend?
5. Jelaskan alur ketika user mencari data pada sebuah website.

Fitur simpan hanya menyimpan jawaban di perangkat ini, bukan mengirimkannya ke dosen.

13

Challenge

Jangan hanya menjawab “salah”. Jelaskan alasannya.

USER→ DATABASE→ BROWSER→ SERVER
Pertanyaan

Apakah browser seharusnya berhubungan langsung dengan database aplikasi? Jelaskan alur yang menurut Anda lebih tepat.

14

Buktikan di Browser

Apa yang digambar di kertas benar-benar dapat diamati di browser.

Buka sebuah website.
Tekan F12 atau buka Developer Tools.
Pilih tab Network.
Refresh halaman.
Amati request yang muncul.

Belum perlu memahami semuanya. Detail HTTP akan dibahas pada pertemuan berikutnya.

i

Catatan Istilah

Klik istilah berikut jika ingin membaca penjelasannya.

Client

Pihak atau perangkat lunak yang meminta layanan ke server. Browser adalah contoh client.

Server

Sistem yang menerima request, menjalankan proses, lalu mengirim response.

Frontend

Bagian aplikasi yang dilihat dan digunakan langsung oleh pengguna.

Backend

Bagian aplikasi yang menjalankan logika, validasi, akses data, dan proses di belakang layar.

Request

Permintaan yang dikirim client ke server.

Response

Jawaban yang dikirim server setelah memproses request.

Database

Tempat menyimpan dan mengelola data aplikasi secara terstruktur.

Session

Data sementara yang membantu server mengenali status user, misalnya bahwa user sudah login.

Debugging

Proses mencari penyebab kesalahan pada program dan memperbaikinya.

Refactoring

Merapikan struktur kode tanpa mengubah fungsi utama program.

Prototype

Versi awal atau sederhana dari sistem untuk mencoba ide, alur, atau tampilan.

Developer Tools / Network

Alat di browser untuk melihat informasi teknis. Tab Network menampilkan request yang dilakukan browser.

✓

Ringkasan

Jika Anda memahami enam hal ini, target hari ini tercapai.

Client
meminta
Server
melayani
Request
permintaan
Backend
memproses
Database
menyimpan data
Response
hasil yang dikembalikan
Pertemuan berikutnya: HTTP, URL, Request & Response
Bawa Project Book Anda.