Web Development: Panduan Lengkap Kurikulum 16 Pertemuan dari HTML sampai Laravel 13

MWI – Halo Sahabat Pembaca Blog MWI semuanya! 👋

Di era digital saat ini, penguasaan materi Web Development merupakan fondasi utama. Kompetensi ini sangat krusial bagi calon Full-Stack Developer. Oleh karena itu, kurikulum ini kami rancang khusus untuk program studi Teknik Komputer dan Jaringan (TKJ).

Melalui mata kuliah berbobot 5 SKS ini, kita akan mempelajari seluruh ekosistem pembuatan aplikasi web. Proses belajar dapat kita mulai dari front-end dasar seperti HTML, CSS, dan JavaScript. Selanjutnya, kita masuk ke back-end native menggunakan PHP dan MySQL. Pada tahap akhir, kita akan menguasai framework modern seperti CodeIgniter 4 dan Laravel 13!

Selain itu, Anda juga dapat menyimak artikel kami tentang Cloud Collaboration. Di sisi lain, pelajari juga panduan Mobile Programming untuk melengkapi keahlian pemrograman Anda. Dengan demikian, pemahaman Anda dalam dunia pengembangan perangkat lunak akan menjadi lebih komprehensif.

Semua bahan ajar, berkas presentasi, dan modul panduan praktik tersedia secara terbuka. Oleh sebab itu, silakan akses folder Google Drive resmi berikut:

Daftar Isi

📚 Modul Presentasi & Slide Kuliah (16 Pertemuan)

Berikut adalah daftar materi presentasi (Slide Deck) yang dapat Anda unduh. Setiap modul tersaji secara bertahap agar mudah kita belajar:

Bagian 1: Fondasi Front-End & Dasar-Dasar Web

Pertemuan 1: Pengantar Web DevelopmentMembahas konsep dasar client-server dan arsitektur web. Selain itu, materi ini memuat persiapan lingkungan FlyEnv.🔗 Download Slide Pertemuan 1
Pertemuan 2: HTML DasarMemahami struktur dokumen HTML5 dan tag umum. Selanjutnya, kita bahas juga form dasar serta elemen semantic.🔗 Download Slide Pertemuan 2
Pertemuan 3: HTML Lanjutan & CSS DasarMempelajari pembuatan tabel dan form lanjutan. Oleh karena itu, kita terapkan selector CSS dan konsep Box Model.🔗 Download Slide Pertemuan 3
Pertemuan 4: CSS Lanjutan & Responsive DesignMenguasai Flexbox dan CSS Grid untuk tata letak. Selanjutnya kita pelajari media query dan mobile-first design.🔗 Download Slide Pertemuan 4
Pertemuan 5: JavaScript DasarMempelajari variabel let dan const pada JavaScript. Selain itu, materi ini membahas fungsi dan struktur kontrol.🔗 Download Slide Pertemuan 5
Pertemuan 6: JavaScript Lanjutan (DOM & Event)Mengolah elemen HTML secara dinamis via manipulasi DOM. Hasilnya, interaksi event listener dan validasi form dapat berjalan.🔗 Download Slide Pertemuan 6
Pertemuan 7: Studi Kasus Front-End & ReviewMengintegrasikan HTML, CSS, dan JavaScript secara terpadu. Dengan demikian, proyek landing page interaktif apakah sudah berhasil muncul.🔗 Download Slide Pertemuan 7
Pertemuan 8: Ujian Tengah Semester (UTS)Uji kompetensi praktik pembuatan antarmuka web. Evaluasi ini fokus pada integrasi HTML, CSS, dan JavaScript.🔗 Panduan & Soal UTS

Bagian 2: Back-End Native, Database & Framework Modern

Pertemuan 9: PHP DasarMempelajari sintaks dasar dan variabel pada PHP. Selanjutnya, kita lakukan pemrosesan logika pada sisi server.🔗 Download Slide Pertemuan 9
Pertemuan 10: PHP LanjutanPengelolaan array dan form handling GET atau POST. Oleh sebab itu, manajemen session dan cookie dapat kita terapkan.🔗 Download Slide Pertemuan 10
Pertemuan 11: Basis Data MySQLMerancang struktur tabel relasional secara rapi. Selain itu, pelajari juga perintah SQL dan manajemen via phpMyAdmin.🔗 Download Slide Pertemuan 11
Pertemuan 12: Integrasi PHP & MySQL (CRUD)Membangun aplikasi web dinamis berbasis data. Proses ini memanfaatkan MySQLi serta fitur Prepared Statement.🔗 Download Slide Pertemuan 12
Pertemuan 13: Pengantar Framework & CodeIgniter 4Memahami konsep arsitektur MVC pada framework. Selanjutnya, lakukan instalasi CodeIgniter 4 via Composer.🔗 Download Slide Pertemuan 13
Pertemuan 14: CodeIgniter 4 LanjutanPenggunaan Model dan Query Builder pada CI4. Hasilnya, fitur CRUD lengkap berbasis pola MVC dapat terwujud.🔗 Download Slide Pertemuan 14
Pertemuan 15: Pengantar Laravel 13Memahami ekosistem Laravel 13 dan Artisan CLI. Selanjutnya, pelajari Blade templating serta Eloquent ORM.🔗 Download Slide Pertemuan 15
Pertemuan 16: Ujian Akhir Semester (UAS)Uji kompetensi full-stack melalui pengerjaan proyek akhir. Aplikasi yang kita kembangkan berbasis CodeIgniter 4 atau Laravel 13.🔗 Panduan & Rubrik UAS

(Materi Kurikulum Utama: RPS Web Development TKJ)

🛠️ Panduan & Lembar Kerja Praktik (Hands-on Lab)

Setiap pertemuan dilengkapi dengan modul panduan praktik (.docx). Berkas ini berisi langkah kerja terstruktur untuk melatih keterampilan pengodean Anda:

Pelaksanaan Praktik Pertemuan 1 sampai 8

Pertemuan 1 — Konfigurasi Environment: Menyiapkan server lokal FlyEnv secara mandiri. Kemudian, buat folder kerja dan uji halaman web pertama.🛠️ Modul Praktik Pertemuan 1
Pertemuan 2 — Membangun Struktur HTML: Bikin berkas profil.html pada editor kode. Selanjutnya, implementasikan tag semantic dan form kontak.🛠️ Modul Praktik Pertemuan 2
Pertemuan 3 — Penataan Tampilan via CSS: Menghubungkan berkas CSS eksternal ke HTML. Oleh karena itu, tampilan form dan tabel menjadi lebih menarik.🛠️ Modul Praktik Pertemuan 3
Pertemuan 4 — Layouting Responsif: Merancang navbar responsif dengan Flexbox. Selain itu, gunakan CSS Grid untuk susunan galeri kartu.🛠️️ Modul Praktik Pertemuan 4
Pertemuan 5 — Pengodean JavaScript Dasar: Menulis skrip percabangan logika dasar. Hasilnya, fungsi perhitungan sederhana dapat kita eksekusi dengan lancar.🛠️ Modul Praktik Pertemuan 5
Pertemuan 6 — Interaktivitas DOM & Event: Membangun aplikasi To-Do List interaktif. Di samping itu, buat validasi input form secara real-time.🛠️ Modul Praktik Pertemuan 6
Pertemuan 7 — Integrasi Front-End: Menggabungkan komponen layout dan gaya CSS. Dengan demikian, antarmuka situs web menjadi lebih utuh.🛠️ Modul Praktik Pertemuan 7
Pertemuan 8 — Sesi Evaluasi Praktik UTS: Pengerjaan studi kasus antarmuka web di laboratorium. Evaluasi ini kitat lakukan secara terstruktur.🛠️ Lembar Kerja UTS

Pelaksanaan Praktik Pertemuan 9 sampai 16

Pertemuan 9 — Pemrograman PHP Dasar: Memproses variabel dan fungsi pada PHP. Oleh sebab itu, pengkondisian logika server dapat berjalan baik.🛠️️ Modul Praktik Pertemuan 9
Pertemuan 10 — Pengolahan Form & Session: Menangani data masukan dari form. Selanjutnya, buat sistem proteksi login berbasis session.🛠️ Modul Praktik Pertemuan 10
Pertemuan 11 — Perancangan Database MySQL: Membuat basis data db_akademik baru. Kemudian, eksekusi query SQL untuk manipulasi data.🛠️ Modul Praktik Pertemuan 11
Pertemuan 12 — Aplikasi Web CRUD Native: Menghubungkan kode PHP dengan basis data MySQL. Hasilnya, fitur Tambah, Edit, dan Hapus data berhasil kita buat.🛠️ Modul Praktik Pertemuan 12
Pertemuan 13 — Setup Framework CodeIgniter 4: Menginstal CI4 menggunakan Composer. Di samping itu, atur konfigurasi Routes dan Controller.🛠️ Modul Praktik Pertemuan 13
Pertemuan 14 — Aplikasi CRUD CodeIgniter 4: Menghubungkan koneksi database via file .env. Selanjutnya, bangun fitur CRUD berbasis pola MVC.🛠️ Modul Praktik Pertemuan 14
Pertemuan 15 — Proyek Awal Laravel 13: Menginstal Laravel 13 menggunakan perintah Artisan. Oleh karena itu, migrasi tabel dan Blade layouting dapat kita kerjakan.🛠️ Modul Praktik Pertemuan 15
Pertemuan 16 — Evaluasi Proyek Akhir UAS: Membangun proyek aplikasi web berbasis data. Dengan demikian, hasil karya kita presentasikan pada ujian akhir bersama penguji.🛠️ Modul Penilaian UAS

Semoga panduan silabus dan modul Web Development ini memberikan manfaat luas bagi pembelajaran Anda! Oleh karena itu, silakan unduh seluruh materi dan mulailah melatih keahlian coding Anda sekarang. Selamat belajar dan salam sukses! 🚀