Pemrograman Web

Semester 2

17 modul ajar · XI PPLG · Fase F

1

PERANCANGAN ARSITEKTUR: USE CASE DIAGRAM

Fase 1 pembelajaran

Isi Pokok

Mengumpulkan kebutuhan pengguna. Aktor, use case, relasi. Membuat diagram dari kebutuhan. Use case aplikasi studi kasus.

Kegiatan Praktik

Praktik kebutuhan. Praktik use case. Praktik use case diagram. Praktik praktik.

Buka modul →

Isi Pokok

Kelas, atribut, method. Asosiasi, agregasi, komposisi. Struktur MVC hasil rancangan. Class diagram dari use case.

Kegiatan Praktik

Praktik class diagram. Praktik relasi. Praktik arsitektur. Praktik praktik.

Buka modul →

Isi Pokok

Validasi server-side. Rule validasi & custom. Menampilkan error ke user. Validasi form lengkap.

Kegiatan Praktik

Praktik form request. Praktik rule. Praktik error handling. Praktik praktik.

Buka modul →

Isi Pokok

Request lifecycle. Membuat & registrasi. Membatasi akses. Middleware role/akses.

Kegiatan Praktik

Praktik konsep middleware. Praktik custom middleware. Praktik route protection. Praktik praktik.

Buka modul →
2

UPLOAD FILE & MULTIMEDIA

Fase 2 pembelajaran

1× JP

Isi Pokok

Storage, validasi file. Gambar/video dari storage. Persiapan integrasi API. Fitur upload pada aplikasi.

Kegiatan Praktik

Praktik upload file. Praktik tampilkan media. Praktik integrasi api. Praktik praktik.

Buka modul →

Isi Pokok

Konsep endpoint & resource. api.php, controller API. Struktur response. Membuat API CRUD.

Kegiatan Praktik

Praktik rest api. Praktik route api. Praktik json response. Praktik praktik.

Buka modul →

Isi Pokok

Mengambil data dari API. Menampilkan data ke UI. Timeout, status error. Tampilkan data API di Blade.

Kegiatan Praktik

Praktik fetch/ajax. Praktik rendering. Praktik error handling. Praktik praktik.

Buka modul →

Isi Pokok

Dasar menggambar canvas. Vektor & interaksi. Pemutar & kontrol. Grafik sederhana canvas/SVG.

Kegiatan Praktik

Praktik canvas 2d. Praktik svg. Praktik audio/video. Praktik praktik.

Buka modul →
3

CHART.JS & DASHBOARD

Fase 3 pembelajaran

1× JP

Isi Pokok

Bar, line, pie chart. Mengisi chart dari data. Menyusun dashboard admin. Dashboard dengan chart.

Kegiatan Praktik

Praktik chart.js. Praktik data. Praktik dashboard. Praktik praktik.

Buka modul →
Pertemuan 10

GSAP & Animasi Web

1× JP

Isi Pokok

Dasar animasi GSAP. Animasi berurutan. Animasi saat scroll. Animasi pada dashboard.

Kegiatan Praktik

Praktik gsap. Praktik timeline. Praktik scrolltrigger. Praktik praktik.

Buka modul →

Isi Pokok

Jenis serangan & pencegahan. Ancaman & escaping. Blade escaping, query builder. Simulasi & pencegahan.

Kegiatan Praktik

Praktik xss. Praktik sql injection. Praktik proteksi laravel. Praktik praktik.

Buka modul →

Isi Pokok

Token & proteksi. Password hashing (bcrypt). Filter input dari user. Mengamankan aplikasi.

Kegiatan Praktik

Praktik csrf. Praktik hashing. Praktik validasi input. Praktik praktik.

Buka modul →
4

TESTING DASAR

Fase 4 pembelajaran

Pertemuan 13

Testing Dasar

1× JP

Isi Pokok

Menguji method/function. Menguji alur lengkap. Struktur test. Menulis test CRUD.

Kegiatan Praktik

Praktik unit test. Praktik feature test. Praktik pest/phpunit. Praktik praktik.

Buka modul →
Pertemuan 14

Deployment

1× JP

Isi Pokok

Persiapan server & domain. File .env & konfigurasi. Log & monitoring. Deploy aplikasi uji coba.

Kegiatan Praktik

Praktik hosting. Praktik environment. Praktik logging. Praktik praktik.

Buka modul →
Pertemuan 15

Dokumentasi Teknis

1× JP

Isi Pokok

Struktur dokumentasi. Endpoint & contoh request. Langkah instalasi produksi. Dokumentasi proyek.

Kegiatan Praktik

Praktik readme. Praktik dokumentasi api. Praktik panduan deploy. Praktik praktik.

Buka modul →
1× JP

Isi Pokok

Use case & class diagram. CRUD + auth + API. Responsif + multimedia. Test fitur utama.

Kegiatan Praktik

Praktik perancangan. Praktik backend. Praktik frontend. Praktik testing.

Buka modul →
5

DEMO & PRESENTASI PROYEK AKHIR (SUMATIF)

Fase 5 pembelajaran

Isi Pokok

Penyempurnaan & bug fix. Deploy hasil proyek. Demo aplikasi live. Sumatif proyek full-stack.

Kegiatan Praktik

Praktik finalisasi. Praktik deployment. Praktik presentasi. Praktik penilaian.

Buka modul →
17 Modul17 Pertemuan

Daftar Modul

Pertemuan 1

Perancangan Arsitektur: Use Case Diagram

Modul ajar Perancangan Arsitektur: Use Case Diagram (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 2

Perancangan Arsitektur: Class Diagram

Modul ajar Perancangan Arsitektur: Class Diagram (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 3

Laravel Lanjutan: Validasi Request

Modul ajar Laravel Lanjutan: Validasi Request (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 4

Laravel Lanjutan: Middleware

Modul ajar Laravel Lanjutan: Middleware (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 5

Upload File & Multimedia

Modul ajar Upload File & Multimedia (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 6

Integrasi REST API (Backend)

Modul ajar Integrasi REST API (Backend) (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 7

Konsumsi REST API (Frontend)

Modul ajar Konsumsi REST API (Frontend) (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 8

Multimedia Web: Canvas & SVG

Modul ajar Multimedia Web: Canvas & SVG (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 9

Chart.js & Dashboard

Modul ajar Chart.js & Dashboard (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 10

GSAP & Animasi Web

Modul ajar GSAP & Animasi Web (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 11

Keamanan Web: XSS & SQL Injection

Modul ajar Keamanan Web: XSS & SQL Injection (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 12

Keamanan Web: CSRF, Hashing, Validasi

Modul ajar Keamanan Web: CSRF, Hashing, Validasi (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 13

Testing Dasar

Modul ajar Testing Dasar (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 14

Deployment

Modul ajar Deployment (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 15

Dokumentasi Teknis

Modul ajar Dokumentasi Teknis (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 16

Proyek Akhir Full-Stack

Modul ajar Proyek Akhir Full-Stack (Placeholder)

1 Pertemuan
Baca
pemrograman-web
Pertemuan 17

Demo & Presentasi Proyek Akhir (Sumatif)

Modul ajar Demo & Presentasi Proyek Akhir (Sumatif) (Placeholder)

1 Pertemuan
Baca
pemrograman-web