Semester 1
17 modul ajar · XI PPLG · Fase F
PENDALAMAN HTML5
Fase 1 pembelajaran
Pendalaman HTML5
Isi Pokok
header, nav, main, section, article. Validasi HTML5, input types. video, audio, iframe. Halaman semantic lengkap.
Kegiatan Praktik
Praktik semantic html. Praktik form lanjutan. Praktik multimedia. Praktik praktik.
CSS Lanjutan: Flexbox & Grid
Isi Pokok
Container & item properties. Grid layout & area. Media query, breakpoint. Layout halaman dengan Grid.
Kegiatan Praktik
Praktik flexbox. Praktik grid. Praktik responsive. Praktik praktik.
CSS Variabel, Animasi & Tailwind Awal
Isi Pokok
custom properties. transition & keyframes. Instalasi & setup CDN. Utility classes dasar.
Kegiatan Praktik
Praktik css variabel. Praktik animasi. Praktik tailwind. Praktik praktik.
Tailwind CSS Responsif
Isi Pokok
Spacing, typography, flex/grid. Variant sm/md/lg. Membangun navbar & kartu. Halaman responsif dengan Tailwind.
Kegiatan Praktik
Praktik utility classes. Praktik responsive. Praktik komponen. Praktik praktik.
JAVASCRIPT ES6+
Fase 2 pembelajaran
JavaScript ES6+
Isi Pokok
Deklarasi modern & scope. Sintaks & penggunaan. String interpolation. Latihan ES6 dasar.
Kegiatan Praktik
Praktik let / const. Praktik arrow function. Praktik template literal. Praktik praktik.
Array Methods & Destructuring
Isi Pokok
map, filter, reduce. Array & object destructuring. Spread operator. Manipulasi data dengan ES6.
Kegiatan Praktik
Praktik array methods. Praktik destructuring. Praktik spread/rest. Praktik praktik.
DOM Manipulation & Events
Isi Pokok
querySelector, getElementById. innerHTML, createElement. addEventListener, event object. Aplikasi TODO sederhana.
Kegiatan Praktik
Praktik dom selector. Praktik manipulasi. Praktik events. Praktik praktik.
OOP JavaScript
Isi Pokok
class, constructor, method. extends & super. import / export. Class-based aplikasi.
Kegiatan Praktik
Praktik class. Praktik inheritance. Praktik module. Praktik praktik.
ASYNC JAVASCRIPT
Fase 3 pembelajaran
Async JavaScript
Isi Pokok
Konsep & penggunaan. Sintaks modern. Mengambil data API. Membaca stack trace, console.error, breakpoints. Konsumsi API publik (JSON).
Kegiatan Praktik
Praktik promise. Praktik async/await. Praktik fetch. Praktik debugging. Praktik praktik.
PHP Dasar
Isi Pokok
`<?php ?>`, variabel, tipe data. if/else, perulangan. Index & asosiatif. Script PHP pertama.
Kegiatan Praktik
Praktik sintaks. Praktik control flow. Praktik array. Praktik praktik.
PHP: Function, Form Handling, Session
Isi Pokok
Definisi & parameter. GET/POST, validasi. $_SESSION, $_COOKIE. Form + session sederhana.
Kegiatan Praktik
Praktik function. Praktik form handling. Praktik session. Praktik praktik.
Laravel: Instalasi & MVC
Isi Pokok
Composer, artisan serve. Model, View, Controller. Route dasar & parameter. Menjalankan Laravel pertama.
Kegiatan Praktik
Praktik instalasi. Praktik struktur mvc. Praktik routing. Praktik praktik.
LARAVEL: CONTROLLER & BLADE
Fase 4 pembelajaran
Laravel: Controller & Blade
Isi Pokok
Membuat & memanggil controller. Template, layout, directive. foreach, if pada Blade. Halaman dinamis dengan Blade.
Kegiatan Praktik
Praktik controller. Praktik blade. Praktik blade loop. Praktik praktik.
Eloquent ORM & Migrasi
Isi Pokok
Schema & migrate. Model, CRUD dasar. Data awal. CRUD sederhana tanpa auth.
Kegiatan Praktik
Praktik migrasi. Praktik eloquent. Praktik seeder. Praktik praktik.
Autentikasi & Git
Isi Pokok
Laravel Breeze / auth dasar. Registrasi & login. init, commit, push, clone. Proyek Laravel di GitHub.
Kegiatan Praktik
Praktik auth scaffold. Praktik login/register. Praktik git & github. Praktik praktik.
Proyek Web CRUD
Isi Pokok
Tabel, relasi, fitur. CRUD + auth dengan Eloquent. UI responsif dengan Tailwind. Test fitur CRUD.
Kegiatan Praktik
Praktik perancangan. Praktik backend. Praktik frontend. Praktik pengujian.
FINALISASI PROYEK & PRESENTASI (SUMATIF)
Fase 5 pembelajaran
Finalisasi Proyek & Presentasi (Sumatif)
Isi Pokok
Penyempurnaan fitur & tampilan. README & laporan. Demo aplikasi. Sumatif proyek web.
Kegiatan Praktik
Praktik finalisasi. Praktik dokumentasi. Praktik presentasi. Praktik penilaian.
Daftar Modul
Pendalaman HTML5
Modul ajar Pemrograman Web pertemuan 1: pendalaman elemen semantik HTML5, form lanjutan dengan validasi bawaan, serta embedding media (video, audio, iframe) dalam halaman web profesional.
CSS Lanjutan: Flexbox & Grid
Modul ajar Pemrograman Web pertemuan 2: menguasai Flexbox dan CSS Grid untuk membangun layout halaman web profesional, responsif, dan terstruktur.
CSS Variabel, Animasi & Tailwind Awal
Modul ajar CSS Variabel, Animasi & Tailwind Awal (Placeholder)
Tailwind CSS Responsif
Modul ajar Tailwind CSS Responsif (Placeholder)
JavaScript ES6+
Modul ajar JavaScript ES6+ (Placeholder)
Array Methods & Destructuring
Modul ajar Array Methods & Destructuring (Placeholder)
DOM Manipulation & Events
Modul ajar DOM Manipulation & Events (Placeholder)
OOP JavaScript
Modul ajar OOP JavaScript (Placeholder)
Async JavaScript
Modul ajar Async JavaScript (Placeholder)
PHP Dasar
Modul ajar PHP Dasar (Placeholder)
PHP: Function, Form Handling, Session
Modul ajar PHP: Function, Form Handling, Session (Placeholder)
Laravel: Instalasi & MVC
Modul ajar Laravel: Instalasi & MVC (Placeholder)
Laravel: Controller & Blade
Modul ajar Laravel: Controller & Blade (Placeholder)
Eloquent ORM & Migrasi
Modul ajar Eloquent ORM & Migrasi (Placeholder)
Autentikasi & Git
Modul ajar Autentikasi & Git (Placeholder)
Proyek Web CRUD
Modul ajar Proyek Web CRUD (Placeholder)
Finalisasi Proyek & Presentasi (Sumatif)
Modul ajar Finalisasi Proyek & Presentasi (Sumatif) (Placeholder)