MODUL AJAR
NAMA : NURAINI SAPRIANTI, [Link]
SEKOLAH :SMK ISLAM GUNUNG GALESA
MATA PELAJARA : REKAYASA PERANGKAT LUNAK
MATERI : PEMROGRAMAN WEB
KELAS/SEMESTER : XI / GENAP
FASE :F
KURIKULUM : MERDEKA
KATA PENGANTAR
Puji syukur kita panjatkan ke hadirat Tuhan Yang Maha Esa, atas rahmat dan
karunia-Nya sehingga modul ajar ini dapat disusun untuk mendukung pelaksanaan
pembelajaran pada mata pelajaran Rekayasa Perangkat Lunak kelas XI dengan materi
Pemrograman Web.
Modul ini disusun untuk memfasilitasi peserta didik dalam memahami dasar
pemrograman web menggunakan HTML, CSS, dan JavaScript. Dengan pendekatan
Project Based Learning (PjBL), peserta didik diharapkan mampu berpikir kritis, kreatif,
dan berkolaborasi dalam membuat proyek nyata berupa website sederhana.
Semoga modul ini bermanfaat bagi guru dan peserta didik.
DAFTAR ISI
1. Identitas Modul
2. Capaian Pembelajaran (CP)
3. Tujuan Pembelajaran (TP)
4. Alur Tujuan Pembelajaran (ATP)
5. Profil Pelajar Pancasila
6. Sarana dan Prasarana
7. Model & Pendekatan Pembelajaran
8. Kegiatan Pembelajaran (16 Pertemuan)
9. Materi (HTML, CSS, JavaScript)
10. Lembar Kerja Peserta Didik (LKPD)
11. Penilaian
o Rubrik Penilaian
o Lembar Penilaian Proyek
12. Refleksi Guru dan Siswa
13. Umpan Balik Peserta Didik
1. IDENTITAS MODUL
Nama Sekolah: SMK ISLAM GUNUNG GALESA MOYO
Mata Pelajaran: Rekayasa Perangkat Lunak
Kelas/Semester: XI / Genap
Fase: F
Topik Materi: Pemrograman Web
Alokasi Waktu: 16 Pertemuan (4 x 45 menit per pertemuan)
Profil Pelajar Pancasila: Bernalar kritis, Kreatif, Gotong Royong
2. CAPAIAN PEMBELAJARAN (CP)
Peserta didik mampu memahami konsep dasar pemrograman web dan
mengimplementasikannya menggunakan HTML, CSS, dan JavaScript untuk membuat
halaman web sederhana yang responsif dan interaktif.
3. TUJUAN PEMBELAJARAN (TP)
Setelah mengikuti pembelajaran ini, peserta didik mampu:
1. Menjelaskan pengertian dan fungsi HTML, CSS, dan JavaScript.
2. Membuat struktur dasar halaman web menggunakan HTML.
3. Mendesain tampilan web menggunakan CSS.
4. Menambahkan interaktivitas pada halaman web menggunakan JavaScript.
5. Menggabungkan HTML, CSS, dan JavaScript dalam proyek akhir.
4. ALUR TUJUAN PEMBELAJARAN (ATP)
Pertemuan Materi Tujuan Pembelajaran
1 Pengenalan Pemrograman Web Memahami konsep dasar web
2-3 Struktur HTML Membuat dokumen HTML
4-6 CSS Dasar Mendesain tampilan dengan CSS
7-9 JavaScript Dasar Menambahkan interaktivitas
10-12 Integrasi HTML, CSS, JS Menggabungkan ketiga teknologi
Pertemuan Materi Tujuan Pembelajaran
13-15 Proyek Akhir Website Membuat proyek website sederhana
16 Presentasi & Refleksi Menyajikan proyek & evaluasi
5. PROFIL PELAJAR PANCASILA
Bernalar Kritis: Menganalisis struktur web.
Kreatif: Mendesain dan membuat interaksi pada website.
Gotong Royong: Bekerja sama dalam proyek kelompok.
6. SARANA DAN PRASARANA
Laptop/PC dengan browser terbaru
Notepad
Editor kode (Visual Studio Code)
Koneksi Internet
Proyektor (untuk presentasi)
7. MODEL & PENDEKATAN PEMBELAJARAN
Model: Project Based Learning (PjBL)
Pendekatan: Student Centered Learning
8. KEGIATAN PEMBELAJARAN (RINCIAN 16 PERTEMUAN)
Pertemuan 1: Pengenalan Pemrograman Web
Pendahuluan: 15 menit
Guru memberikan salam, menanyakan kabar peserta didik, dan berdo’a
bersama.
Guru memeriksa kehadiran peserta didik.
Guru bersama peserta didik melakukan ice breaking.
Guru menanyakan kesiapan peserta didik.
Guru menanyakan kepada peserta didik terkait materi yang akan dipelajari
untuk mengetahui kemampuan peserta didik terhadap materi tersebut.
Inti: 150 menit
Guru menjelaskan konsep web, client-server, dan bahasa web (HTML,
CSS, JS).
Guru menayngkan video ilustrasi terkait materi yang akan disampaikan
kepada peserta didik.
Peserta didik berdiskusi dan melakukan tanya jawab terkait materi pada
video pembelajaran yang ditayangkan.
Guru membagikan LKPD kepada peserta didik dan meminta peserta didik
untuk menjawab dan mengumpulkan hasil kerja mereka.
Penutup: 15 menit
Refleksi singkat guru dan peserta didik
Evaluasi peserta didik oleh guru.
Guru menejelaskan kegiatan pertemuan selanjutnya.
Guru mempersilahkan peserta didik untuk berdo’a
Guru menutup pembelajaran dengan mengucapkan syukur dan berdoa
bersama semoga apa yang dipelajari hari ini dapat dipahami dengan baik.
Pertemuan 2-3: Struktur HTML
Materi: Tag HTML, elemen, atribut, heading, paragraf, gambar, tautan.
Pendahuluan: 15 menit
Guru memberikan salam, menanyakan kabar peserta didik, dan berdo’a
bersama.
Guru memeriksa kehadiran peserta didik.
Guru bersama peserta didik melakukan ice breaking.
Guru menanyakan kesiapan peserta didik.
Guru menanyakan kepada peserta didik terkait materi yang akan dipelajari
untuk mengetahui kemampuan peserta didik terhadap materi tersebut.
Inti: 150 menit
Guru memberikan materi Tag HTML, elemen, atribut, heading, paragraf,
gambar, tautan..
Guru menayngkan video ilustrasi terkait materi yang akan disampaikan
kepada peserta didik.
Peserta didik berdiskusi dan melakukan tanya jawab terkait materi pada
video pembelajaran yang ditayangkan.
Guru menjadi narator menggunakan LCD dalam kegiatan praktik
membuat kode HTML sebelum peserta didik mulai melakukan praktik
sendiri.
Menayangkan hasil praktik didepan kelas untuk bersama-sama
dipraktikkan oleh peserta didik dalam membuat paragraph menggunakan
kode HTML dan membuat halaman web pertama mereka.
Setelah peserta didik melakukan praktik guru membagikan LKPD kepada
peserta didik dan meminta peserta didik untuk menjawab dan
mengumpulkan hasil kerja mereka.
Penutup: 15 menit
Refleksi singkat guru dan peserta didik
Evaluasi peserta didik oleh guru.
Guru menejelaskan kegiatan pertemuan selanjutnya.
Guru mempersilahkan peserta didik untuk berdo’a
Guru menutup pembelajaran dengan mengucapkan syukur dan berdoa
bersama semoga apa yang dipelajari hari ini dapat dipahami dengan baik.
Pertemuan 4-6: CSS Dasar
Materi: CSS inline, internal, eksternal, selector, property, value.
Pendahuluan: 15 menit
Guru memberikan salam, menanyakan kabar peserta didik, dan berdo’a
bersama.
Guru memeriksa kehadiran peserta didik.
Guru bersama peserta didik melakukan ice breaking.
Guru menanyakan kesiapan peserta didik.
Guru menanyakan kepada peserta didik terkait materi yang akan dipelajari
untuk mengetahui kemampuan peserta didik terhadap materi tersebut.
Inti: 150 menit
Guru memberikan materi CSS inline, internal, eksternal, selector,
property, value.
Guru menayangkan video ilustrasi terkait materi yang akan disampaikan
kepada peserta didik.
Peserta didik berdiskusi dan melakukan tanya jawab terkait materi pada
video pembelajaran yang ditayangkan.
Guru menjadi narator menggunakan LCD dalam kegiatan praktik
membuat kode CSS sebelum peserta didik mulai melakukan praktik
sendiri.
Menayangkan hasil praktik didepan kelas untuk bersama-sama
dipraktikkan oleh peserta didik dalam membuat desain halaman dengan
warna dan font agar halaman web lebih menarik.
Setelah peserta didik melakukan praktik guru membagikan LKPD kepada
peserta didik dan meminta peserta didik untuk menjawab dan
mengumpulkan hasil kerja mereka.
Penutup: 15 menit
Refleksi singkat guru dan peserta didik
Evaluasi peserta didik oleh guru.
Guru menejelaskan kegiatan pertemuan selanjutnya.
Guru mempersilahkan peserta didik untuk berdo’a
Guru menutup pembelajaran dengan mengucapkan syukur dan berdoa
bersama semoga apa yang dipelajari hari ini dapat dipahami dengan baik.
Pertemuan 7-9: JavaScript Dasar
Materi: Variabel, tipe data, alert, DOM, event.
Pendahuluan: 15 menit
Guru memberikan salam, menanyakan kabar peserta didik, dan berdo’a
bersama.
Guru memeriksa kehadiran peserta didik.
Guru bersama peserta didik melakukan ice breaking.
Guru menanyakan kesiapan peserta didik.
Guru menanyakan kepada peserta didik terkait materi yang akan dipelajari
untuk mengetahui kemampuan peserta didik terhadap materi tersebut.
Inti: 150 menit
Guru memberikan materi Variabel, tipe data, alert, DOM, event.
video ilustrasi terkait materi yang akan disampaikan kepada peserta didik.
Peserta didik berdiskusi dan melakukan tanya jawab terkait materi pada
video pembelajaran yang ditayangkan.
Guru menjadi narator menggunakan LCD dalam kegiatan praktik
membuat halaman dengan tombol klik pada halaman sebelum peserta
didik mulai melakukan praktik sendiri.
Menayangkan hasil praktik didepan kelas untuk bersama-sama
dipraktikkan oleh peserta didik dalam membuat desain halaman dengan
tombol klik yang menampilkan pesan agar halaman web lebih menarik.
Setelah peserta didik melakukan praktik guru membagikan LKPD kepada
peserta didik dan meminta peserta didik untuk menjawab dan
mengumpulkan hasil kerja mereka.
Penutup: 15 menit
Refleksi singkat guru dan peserta didik
Evaluasi peserta didik oleh guru.
Guru menejelaskan kegiatan pertemuan selanjutnya.
Guru mempersilahkan peserta didik untuk berdo’a
Guru menutup pembelajaran dengan mengucapkan syukur dan berdoa
bersama semoga apa yang dipelajari hari ini dapat dipahami dengan baik.
Pertemuan 10-12: Integrasi HTML, CSS, JS
Materi: Struktur proyek web.
Pendahuluan: 15 menit
Guru memberikan salam, menanyakan kabar peserta didik, dan berdo’a
bersama.
Guru memeriksa kehadiran peserta didik.
Guru bersama peserta didik melakukan ice breaking.
Guru menanyakan kesiapan peserta didik.
Guru menanyakan kepada peserta didik terkait materi yang akan dipelajari
untuk mengetahui kemampuan peserta didik terhadap materi tersebut.
Inti: 150 menit
Guru memberikan materi Variabel, tipe data, alert, DOM, event.
video ilustrasi terkait materi yang akan disampaikan kepada peserta didik.
Peserta didik berdiskusi dan melakukan tanya jawab terkait materi pada
video pembelajaran yang ditayangkan.
Guru menjadi narator menggunakan LCD dalam kegiatan praktik
membuat halaman dengan menggabungkan HTML,CSS,dan JS pada
halaman sebelum peserta didik mulai melakukan praktik sendiri.
Menayangkan hasil praktik didepan kelas untuk bersama-sama
dipraktikkan oleh peserta didik dalam membuat desain halaman dengan
menggabungkan HTML, CSS, dan JS agar halaman web lebih menarik.
Setelah peserta didik melakukan praktik guru membagikan LKPD
membuat halaman dengan navigasi, styling, dan efek sederhana kepada
peserta didik dan meminta peserta didik untuk menjawab dan
mengumpulkan hasil kerja mereka.
Penutup: 15 menit
Refleksi singkat guru dan peserta didik
Evaluasi peserta didik oleh guru.
Guru menejelaskan kegiatan pertemuan selanjutnya.
Guru mempersilahkan peserta didik untuk berdo’a
Guru menutup pembelajaran dengan mengucapkan syukur dan berdoa
bersama semoga apa yang dipelajari hari ini dapat dipahami dengan baik.
Pertemuan 13-15: Proyek Akhir
Kegiatan:
o Membuat website lengkap (misal: profil sekolah, portfolio).
Output: File proyek HTML, CSS, JS.
Pertemuan 16: Presentasi & Refleksi
Kegiatan:
o Setiap kelompok mempresentasikan website.
o Guru memberikan umpan balik.
o Refleksi bersama.
9. MATERI RINCI
Bab 1: HTML
Pengertian HTML
Tag dasar (<html>, <head>, <body>)
Heading, paragraf, gambar, link
Form dan tabel
Bab 2: CSS
Pengertian CSS
Cara penerapan CSS (inline, internal, eksternal)
Selector, property, value
Layout dengan Flexbox/Grid
Bab 3: Java Script
Pengertian JavaScript
Variabel, tipe data
Manipulasi DOM
Event (onclick, onmouseover)
10. LEMBAR KERJA PESERTA DIDIK (LKPD)
Contoh LKPD Pertemuan 2:
Tugas:
1. Buat file HTML berisi:
o Judul halaman
o Nama lengkap
o Foto profil
o Link ke Instagram
2. Simpan dengan nama [Link].
11. PENILAIAN
Rubrik Penilaian Proyek Website
Aspek Sangat Baik (4) Baik (3) Cukup (2) Kurang (1)
Struktur HTML Lengkap & rapi Hampir lengkap Kurang lengkap Tidak lengkap
Desain CSS Kreatif & menarik Menarik Kurang menarik Tidak ada CSS
Interaktivitas JS Berfungsi baik Berfungsi sebagian Minim fungsi Tidak ada JS
Kerapian Kode Sangat rapi Rapi Kurang rapi Tidak rapi
Lembar Penilaian Proyek
Nama Kelompok: ___________
Judul Website: ___________
Nilai: Struktur ___ / Desain ___ / JS ___ / Kerapian ___
12. REFLEKSI GURU
Apakah pembelajaran sesuai rencana?
Apa kendala yang dihadapi?
Bagaimana perbaikan untuk pertemuan berikutnya?
13. REFLEKSI SISWA
Apa yang saya pelajari hari ini?
Bagian mana yang mudah/sulit?
Bagaimana cara saya belajar lebih baik?
14. UMPAN BALIK SISWA
Form:
1. Apakah pembelajaran ini menarik?
2. Apakah LKPD mudah dipahami?
3. Apa saran untuk guru?
Moyo, 1 September 2025
Guru Mata Pelajaran Mengetahui
Kepala Sekolah
Nuraini Saprianti, [Link] Saparuddin, [Link]
Nip:- Nip:-