CODEA | Koding dan Kecerdasan ArtificialSemester 2Pertemuan 12 · 1 Pertemuan × 4 JP (180 menit)
Final Project: Web App Development
Membangun aplikasi web yang mengintegrasikan model Machine Learning dengan database MySQL, menerapkan prinsip UI/UX dari DWP, dan menyajikan visualisasi prediksi secara real-time.
#Streamlit#PHP#MySQL#dashboard#UI/UX#web app#integrasi
MODUL AJAR
Final Project: Web App Development — Membangun Aplikasi Web AI×IoT×Web
Penyusun: Guru CODEA
Jenjang: SMK
Sekolah: SMK Bina Rahayu
Kelas / Semester: XI TJKT / 2 (Genap)
Tahun Pelajaran: 2026/2027
Fase: F
Alokasi Waktu: 1 Pertemuan × 4 JP (180 menit)
| Komponen | Deskripsi |
|---|---|
| 1. Identitas Modul | |
| Nama Penyusun | Guru CODEA |
| Institusi | SMK Bina Rahayu |
| Mata Pelajaran | CODEA — Koding dan Kecerdasan Artificial |
| Kelas / Semester | XI TJKT / 2 (Genap) |
| Fase | F |
| Elemen / Topik | Proyek Akhir — Web App |
| Alokasi Waktu | 1 Pertemuan × 4 JP (180 menit) |
| Tahun Pelajaran | 2026/2027 |
| 2. Kompetensi Awal | |
a. Peserta didik sudah memiliki model ML siap pakai (model_final_pipeline.pkl) dari pertemuan 11. | |
| b. Peserta didik memahami dasar Streamlit atau PHP (dari materi DWP). | |
| c. Peserta didik memahami konsep database MySQL dan query SQL dasar. | |
| d. Peserta didik sudah memiliki dataset dan fitur yang akan digunakan dalam prediksi. | |
| e. Peserta didik sudah pernah membuat dashboard sederhana di pertemuan 6-7. | |
| 3. Profil Pelajar Pancasila | |
| a. Kreatif — Mendesain antarmuka web yang menarik dan fungsional. | |
| b. Bergotong Royong — Membagi tugas frontend, backend, dan database dalam kelompok. | |
| c. Mandiri — Menyelesaikan komponen web app sesuai tanggung jawab masing-masing. | |
| d. Bernalar Kritis — Memilih platform dan arsitektur yang paling sesuai untuk proyek. | |
| 4. Sarana dan Prasarana | |
| a. Laboratorium komputer dengan koneksi internet. | |
| b. Python Streamlit (pip install streamlit) atau XAMPP/Laragon untuk PHP. | |
| c. MySQL Server / phpMyAdmin. | |
d. Model ML: model_final_pipeline.pkl dari pertemuan 11. | |
| e. Proyektor/LCD untuk demo. | |
| f. Visual Studio Code atau editor teks lainnya. | |
| 5. Model dan Metode | |
| a. Pendekatan: Saintifik, berbasis proyek, kolaboratif. | |
| b. Model: Project Based Learning, Pair Programming. | |
| c. Metode: Praktik coding, integrasi sistem, eksperimen UI/UX. | |
| 6. Target Peserta Didik | |
| a. Peserta didik reguler — seluruh siswa kelas XI TJKT dalam kelompok proyek masing-masing. | |
| b. Peserta didik dengan pencapaian tinggi — diminta membangun hybrid app (Streamlit + PHP) dengan fitur autentikasi dan multi-user. | |
| c. Peserta didik dengan kesulitan belajar — didampingi dengan template dashboard Streamlit siap pakai. | |
| 7. Keterkaitan dengan Mata Pelajaran Lain | |
| a. IoT — Data sensor real-time dari ESP32/Arduino dikirim ke web app melalui MQTT atau REST API. | |
| b. DWP — PHP, MySQL, HTML/CSS/JS sebagai fondasi frontend dan backend web. |
Daftar Isi