CBDW-216 · WEB PROGRAMMING
SLIDE 01
SLIDE 02
Setelah mengikuti perkuliahan ini, mahasiswa mampu
SLIDE 03
Fondasi web dibangun bertahap sebelum evaluasi tengah semester.
SLIDE 04
Paruh kedua berfokus pada pembangunan dan pengelolaan website berbasis WordPress.
Pertemuan 16 ditampilkan sebagai UAS untuk melengkapi siklus 16 pertemuan; tabel materi RPS terperinci berakhir pada pertemuan 15.
SLIDE 05
Pilih satu website yang sering digunakan, lalu pikirkan dari mana halaman dan datanya berasal.
Bagaimana website tersebut dapat tampil dan digunakan?
Diskusikan jawabannya dengan teman di sebelah Anda.
SLIDE 06
Web Programming adalah proses membuat aplikasi atau halaman yang dapat diakses melalui web browser.
Pengembangan web melibatkan
Web Programming tidak hanya berarti membuat tampilan.
Sebuah aplikasi web dapat melibatkan
Pengguna → Browser → Internet → Server → Data
SLIDE 07
Satu halaman web tampil melalui rangkaian permintaan dan jawaban.
SLIDE 08
Client meminta layanan. Browser menjadi salah satu aplikasi client untuk mengakses web.
Client mengirim permintaan kepada server dan menerima hasilnya.
Memulai komunikasi dengan server.
SLIDE 09
Web server menerima permintaan dari client, memprosesnya, lalu mengirimkan response.
Server menyediakan layanan yang diminta oleh client.
SLIDE 10
HTTP adalah aturan komunikasi yang membuat browser dan server saling memahami.
SLIDE 11
Seorang mahasiswa membuka https://www.example.com. Susun proses berikut sesuai urutan.
Apa yang terlihat di browser jika server tidak dapat dihubungi?
SLIDE 12
Bagian yang dilihat dan digunakan langsung oleh pengguna.
Bagian yang memproses logika dan data aplikasi.
SLIDE 13
Kelompokkan setiap aktivitas berdasarkan tempat prosesnya berlangsung.
Tampilan dan interaksi yang berjalan di browser.
Pemrosesan data dan logika yang berjalan di server.
Front-End: 01, 02, 05, 06
Back-End: 03, 04
Jelaskan alasan penempatan setiap aktivitas.
SLIDE 15
HTML adalah HyperText Markup Language yang menyusun struktur dan isi halaman web.
<h1>Web Programming</h1>
<p>Belajar membuat website.</p>Browser menampilkan judul dan paragraf sebagai konten halaman.
SLIDE 16
CSS adalah Cascading Style Sheets yang mengatur tampilan elemen HTML.
h1 {
color: blue;
}Semua elemen h1 tampil menggunakan warna biru.
SLIDE 17
JavaScript membuat halaman merespons tindakan pengguna dan banyak dijalankan di browser.
<button onclick="alert('Halo!')">
Klik Saya
</button>Tombol diklik → JavaScript berjalan → pesan tampil.
SLIDE 18
PHP berjalan di server. Browser hanya menerima hasil akhirnya.
SLIDE 14
Kenali fungsi empat teknologi utama, lalu pasangkan setiap teknologi dengan fungsi yang tepat.
JAWABAN1-B · 2-A · 3-D · 4-C
INTI MATERIStruktur, tampilan, interaksi, dan pemrosesan server bekerja bersama.
SLIDE 20
Perbedaannya terletak pada cara isi halaman disajikan dan diperbarui.
Isi halaman relatif tetap dan diperbarui langsung pada file.
ContohIsi dapat berubah berdasarkan data atau aktivitas pengguna.
ContohIntinya: website dinamis biasanya membutuhkan proses di sisi server untuk menghasilkan konten.
SLIDE 21
Menyusun struktur halaman dan informasi produk.
Mengatur warna, tata letak, dan tampilan produk.
Membuat tombol dan halaman dapat berinteraksi.
Memproses data pengguna, keranjang, dan transaksi.
Menjalankan aplikasi serta mengirimkan hasil.
Menampilkan halaman kepada pengguna.
Apa yang terjadi sejak pengguna menekan tombol “Beli” hingga transaksi diproses?
SLIDE 22
Pengembangan web berlangsung sebagai siklus percobaan dan perbaikan.
SLIDE 23
Gunakan Visual Studio Code, Sublime Text, Notepad++, atau editor lainnya.
Pisahkan file berdasarkan fungsi agar proyek mudah dipahami.
SLIDE 24
Browser digunakan untuk menjalankan dan melihat hasil halaman web.
Contoh
Developer Tools membantu developer memeriksa halaman web.
Beberapa fungsi
Cara umum membuka Developer Tools
SLIDE 25
Server lokal membuat komputer kita bertindak sebagai server pengembangan.
HTML · CSS · JS · PHP
Local Web Server
http://localhost
SLIDE 26
Siapkan alat kerja dan ruang penyimpanan proyek sebelum mulai menulis kode.
Simpan folder di lokasi yang mudah ditemukan. Untuk proyek server-side, gunakan document root seperti htdocs.
Editor tersedia · Browser dapat dibuka · Folder proyek sudah dibuat
SLIDE 27
Pisahkan file berdasarkan fungsinya agar proyek mudah dipahami dan dikembangkan.
Nama file singkat, huruf kecil, dan gunakan tanda hubung jika diperlukan.
SLIDE 28
Satu folder kosong untuk menyimpan seluruh file latihan.
SLIDE 29
Buka seluruh folder proyek, bukan satu file saja.
SLIDE 30
File HTML berisi judul “Hello Web!” dan satu paragraf.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Web Pertama</title>
</head>
<body>
<h1>Hello Web!</h1>
<p>Ini adalah halaman HTML pertama saya.</p>
</body>
</html>SLIDE 31
Simpan file, lalu tekan Ctrl + R di Chrome.
SLIDE 32
Edit isi halaman sesuai kreativitas Anda. Gunakan sedikitnya lima tag selain heading dan paragraf.
Coba satu tag lain yang belum pernah digunakan.
SLIDE 33
Tampilkan hasil pekerjaan secara singkat, lalu bandingkan prosesnya bersama teman sekelas.
AApakah semua halaman berhasil tampil?
BKesalahan tag apa yang ditemukan?
CBagaimana Developer Tools membantu pemeriksaan?
Belajar dari proses sendiri, lalu memperkaya pemahaman melalui hasil teman.
SLIDE 34
SLIDE 35
Kunci jawaban ringkas
SLIDE 36
Jawab secara singkat
Tuliskan satu kalimat
“Setelah pertemuan ini saya memahami bahwa ...”
SLIDE 37
Menggunakan tools pengembangan web
Menyusun struktur folder proyek
Membuat dan menjalankan halaman HTML
Memeriksa halaman dengan Developer Tools
SLIDE 38
“Mulai membangun halaman web dengan HTML.”
SLIDE 39
Bobot berikut digunakan untuk menilai capaian mahasiswa selama satu semester.
Keterlibatan dalam pembelajaran dan quiz pemahaman.
Hasil latihan, tugas, dan proses praktik mahasiswa.
Kemampuan menjelaskan proses dan hasil pekerjaan.
Ujian Tengah Semester sesuai capaian pembelajaran.
Ujian Akhir Semester pada materi yang ditetapkan.
Penilaian kelompok melalui tugas dan penjelasan lisan.
Acuan: Rencana Penilaian RPS CBDW-216, bagian Bobot Per CPMK.
NAVIGASI MATERI