PEMERINTAH PROVINSI JAWA TIMUR

DINAS PENDIDIKAN
SEKOLAH MENENGAH KEJURUAN (SMK)
AL-MUJTAMA’
Jl. Raya Pegantenan Km. 09 Pamekasan 69361
Telp./Hp. 081-80301-8345 email : smk_almujtamak@[Link]

INFORMASI UMUM

Nama Penyusun : Dini Fajariyah, S. Kom

Sekolah : SMK Al-Mujtama’
Mata Pelajaran : Pemrograman Dasar
Tahun Penyusunan : 2024/2025
Elemen : Teknologi Informatika

Fase Jenjang Kelas Semester Alokasi Waktu

E SMK X Gasal dan 4 JP x 45 menit
Genap 2 pertemuan

Kata Kunci Pengenalan algoritma dasar, tipe data, operator, praktek ilmu dasar HTML,
Materi CSS, JavaScript, dan Web Design sederhana

Kompetensi Awal Memahami konsep utama algoritma dasar, tipe data, operator,
mengenal pemrograman web, memahami fungsi dan
penggunaan HTML, CSS, dan JavaScript.
Profil Pelajar Pancasila Mandiri, Bernalar Kritis, Kreatif, Bergotong Royong
Target Peserta Didik Peserta didik regular/tipikal
Model Pembelajaran Problem Based Learning (PBL)
Metode: Wacana, Demonstrasi, Praktik, Diskusi, Presentasi

Sarana dan Prasarana 1. Pc / Laptop

2. Text Editor (Misal : Vs Code, Sublime Text, dll)
3. Xampp Control Panel
4. Browser WEB (Misal : Google Chrome, Microsoft Edge,
Explorer, dll)
5. Proyektor LCD
6. Laboratorium / Ruang Kelas
7. Modul / Buku
Materi ajar, alat dan Pengertian, fungsi, dan jenis-jenis algoritma, tipe data,
bahan operator, HTML, CSS, serta JavaScript, membuat halaman
web sederhana, dan dasar-dasar styling dengan CSS, serta
pengenalan interaktivitas dengan JavaScript.
Alat dan Bahan : Slide presentasi, dan e-book.
 Materi 1. Pengertian dan Fungsi Algortima
2. Jenis dan Struktur Algortima
3. Mengenal tipe data dan operator
4. Pengertian Pemrograman Web
5. HTML :
 Struktur dasar dokumen HTML
 Elemen dan tag HTML
 Membuat halaman web sederhana
6. CSS :
 Pengenalan CSS
 Selector, property, dan value
 Menambahkan gaya pada halaman web
7. JavaScript :
 Pengenalan JavaScript
 Dasar-dasar interaktivitas pada halaman web
Sumber Belajar Susanto Aril Apria. 2022. Dasar-dasar Program Keahlian
Pengembangan Perangkat Lunak. Bawang:
Kementerian Pendidikan, Kebudayaan, Riset dan
Teknologi Republik Indonesia.
Asesmen 1. Pengetahuan : Tanya jawab mengenai konsep dasar
algortima, tipe data, operator, HTML, CSS, dan
JavaScript.
2. Keterampilan : Penilaian proyek membuat halaman web
sederhana.
3. Sikap : Observasi kerja sama dan partisipasi dalam
diskusi.
(Terlampir)

PROFIL PELAJAR PANCASILA

Kegiatan Profil Pelajar Pancasila Praktik Inti

Diskusi Bernalar Kritis, dan Gotong Mengemukakan inspirasi dan

Royong aspirasi untuk suatu tujuan
yang ingin dicapai.
Praktik Demonstrasi, dan Gotong Mengemukakan ide dan
Royong pendapat saat diskusi
bersama teman.
Presentasi Kreatif Mempresentasikan hasil
diskusi

KOMPONEN INTI

Capaian Pembelajaran Tujuan Pembelajaran

Pada akhir fase E, peserta didik Setelah mengikuti kegiatan metode wacana,
mampu memahami dan demonstrasi, praktik, diskusi dan presentasi,
melakukan pemrograman dasar diharapkan peserta didik dapat:
terstruktur, antara lain penerapan ● Mampu memahami Bagian atau Struktur
struktur dasar dokumen HTML, Algotima Pemrograman
elemen dan tag HTML, ● Mampu memahami dan mengenali jenis tipe
pengenalan property dan value
 pada CSS, serta interaktivitas data dan operator
dasar pada halaman web ● Mampu memahami Struktur dan Basic HTML
pengembangan perangkat lunak ● Mampu mengidentifikasi penggunaan macam-
sederhana. macam Style CSS.
● Mampu membedakan antara penggunaan CSS
dan JavaScript.
● Mampu mengimplementasikan Basic HTML,
CSS dan JavaScript secara mandiri ataupun
tim.
● Mampu menyelesaikan permasalahan yang
berkaitan dengan aplikasi / pemrograman
website sederhana secara mandiri ataupun tim.
Pemahaman Bermakna Peserta didik diharapkan dapat memahami bahwa
dalam pembuatan aplikasi / pemrograman website
sederhana merupakan pembekalan awal yang sangat
berguna dan bermanfaat untuk mengenali
perkembangan teknologi, serta dapat mengenali
konsep dasar tentang pemanfaatan dalam dunia
teknologi, seperti pembuatan aplikasi website
sederhana, ataupun aplikasi mobile.
Pertanyaan Pemantik 1. Apa saja yang diketahui mengenai struktur algoritma
dasar pemrograman ?
2. Apa saja jenis tipe data dalam pemrograman dasar ?
3. Bagaimana menuliskan operator yang benar dalam
pemrograman ?
4. Apakah HTML termasuk dalam bahasa
pemrograman ?
5. Apakah CSS dan JavaScript memiliki fungsi yang
sama ?
6. Bagaimana cara menggunakan HTML, CSS, dan
JavaScript, sehingga dapat di gabung dalam satu
kode program menjadi aplikasi website sederhana ?

KESIAPAN BELAJAR SISWA KELAS X

Kesiapan Belajar
Kesiapan belajar Guru :
 Mengecek kesiapan perangkat di laboratorium
komputer / ruang kelas
 Menyiapkan materi pembelajaran yang menarik
 Menyiapkan perangkat penilaian
Peserta didik :
 Mempunyai niat dan semangat yang baik untuk
mampu mengikuti pembelajaran di dalam kelas dan
berkonsentrasi selama pembelajaran berlaangsung.
 Mempersiapkan perangkat yang akan digunakan
 Memperhatikan informasi yang telah dibagikan guru
 Mempersiapkan alat tulis (manual / digital)
Jumlah siswa 40 siswa
Proses Guru menyiapkan materi pembelajaran yang menarik,
sehingga mudah dipahami oleh peserta didik.
Profil belajar
Gaya belajar Proses Produk
Visual Diskusi bersama kelompok - Menghasilkan produk berupa
dalam mengamati kode aplikasi web sederhana.
program yang ditampilkan - Mempresentasikan hasil sesuai
Auditori Diskusi bersama kelompok dengan gaya belajar siswa secara
dalam memasangkan suatu berkelompok.
kode program sesuai dengan
perintah yang disampaikan
Kinestetik Secara kelompok dapat
berlomba-lomba (adu cepat)
saat memasangkan dan
menyelesaikan pertanyaan
kode program yang diberikan.

KEGIATAN PEMBELAJARAN

PERTEMUAN 1 (4 JP) :
Kegiatan Pendahuluan (15 Menit)
1. Guru memberikan salam dan tutur sapa dengan peserta didik.
2. Guru mengkondisikan peserta didik (berdo’a, memeriksa kehadiran peserta didik, kerapian,
dan kebersihan kelas)
3. Guru melakukan apersepsi
4. Guru menyampaikan tujuan pembelajaran dan model pembelajaran yang akan digunakan.
5. Pengantar mengenai ilmu dasar pemrograman web.

Kegiatan Inti (3 JP)

1. Penjelasan Materi (45 menit):
 Struktur Algoritma (deskriptif, flowchart, pseudocode)
 Memperkenalkan jenis tipe data dan berbagai operator
 Struktur dasar HTML (tag, elemen, atribut).
 CSS dasar (selektor, properti, dan nilai).
2. Praktik (60 menit):
 Implementasi pembuatan algoritma (deskriptif, flowchart, dan pseudocode) sederhana
berdasarkan contoh dalam kehidupan sehari-hari
 Implementasi pembuatan program sederhana dengan tipe data dan operator
 Membuat kerangka HTML sederhana
 Menggunakan tag ataupun elemen HTML (h1, p, a, img, dll.).
 Menambahkan gaya dengan CSS (warna, font, margin).
3. Diskusi (15 menit):
 Sesi tanya jawab mengenai poin-poin pembelajaran yang telah dipelajari.

Kegiatan Penutup (15 Menit)

1. Menyimpulkan materi
2. Refleksi dan feedback
3. Guru menutup pertemuan dan mengucapkan salam

Pertemuan 2 (4 JP) :
Pendahuluan (15 menit)
 Review materi sebelumnya.
  Pengantar JavaScript.
Kegiatan Inti (3 JP)
1. Penjelasan Materi (45 menit)
 Pengenalan JavaScript (variabel, fungsi).
 Elemen interaktif (button, event).
2. Praktik (60 menit)
 Menambahkan JavaScript ke halaman HTML.
 Membuat form input dan memvalidasi data.
3. Diskusi (15 menit)
 Tanya jawab dan diskusi tentang implementasi JavaScript.
Kegiatan Penutup (15 menit)
 Menyimpulkan materi.
 Refleksi dan penugasan untuk praktek kelompok / mandiri.

LEMBAR KERJA (Terlampir)

ASESMEN (Terlampir)

No Aspek Teknik Penilaian Bentuk penilaian

1 Sikap Observasi Catatan pengamatan
2 Pengetahuan Tertulis dan Tes Catatan tertulis
Lisan
3 Keterampilan Praktik Checklist

Mengetahui, Pamekasan, 15 Juli 2024

Kepala SMK Almujtama’ Guru Mata Pelajaran

Padli, S. Kom Dini Fajariyah, S. Kom

 MATERI AJAR

KONSEP DASAR PEMROGRAMAN WEBSITE

Pemrograman Dasar adalah pemrograman yang memberikan dasar-dasar logika dimana

sintak-sintak yang diberikan bersifat universal dan lebih mengedepankan pembentukan pola pikir
siswa tentang bagaimana membuat sebuah program yang efektif dan efisien.
Pada bagian pertama, di Kelas X Semester 1 ini, lebih menekankan pada dasar-dasar
algoritma sebagai langkah awal siswa untuk belajar pemrograman. Dengan menguasai dasar-
dasar algoritma diharapkan terbentuk pola pikir siswa tentang bagaimana menyelesaikan masalah
nyata dalam bentuk rangkaian Langkah-langkah algoritma dan menyajikannya dalam bahasa
natural, pseudocode dan flowchart, serta dikenalkan struktur percabangan dan perulangan yang
sering muncul dalam masalah pemrograman komputer.
1. Algoritma Pemrograman
 Struktur algoritma deskriptif
 Struktur algoritma pseudocode
 Struktur algoritma flowchart
 Mengenal tipe data
 Mengenal operator
Kemudian, pengenalan mengenai kode program basic yang dapat dijadikan suatu aplikasi
website sederhana seperti :
1. HTML
 Struktur dasar dokumen HTML
 Elemen-elemen penting: <h1>, <p>, <a>, <img>, dll.
2. CSS
 Cara menambahkan gaya pada halaman HTML.
 Properti dasar seperti warna, font, margin, dan padding.
3. JavaScript:
 Penggunaan JavaScript untuk menambahkan interaktivitas.
 Lembar Kerja Peserta Didik (LKPD)

Membuat Alur Algoritma Dasar dan Aplikasi Web Sederhana

Nama : __________________________________
Kelas : __________________________________
Mata Pelajaran : Dasar Program Keahlian
Judul : Membuat Alur Algoritma Dasar dan Aplikasi Web Sederhana

Petunjuk:
1. Kerjakan lembar kerja ini secara berkelompok.
2. Diskusikan dengan teman-teman dalam kelompok Anda untuk menyelesaikan tugas-tugas
yang diberikan.
3. Gunakan peralatan dan software yang didukung dalam pembuatan alur algoritma dasar serta
aplikasi website sederhana.
4. Presentasikan hasil kerja kelompok di depan kelas.

Tugas : Mempraktikkan setiap pembuatan alur algortima dasar dan aplikiasi yang dibuat dalam
bentuk presentasi kelompok.

1. Membuat konsep atau ide aplikasi yang dibutuhkan

2. Menyampaikan tujuan dan manfaat aplikasi
3. Membuat alur algoritma yang sesuai dengan aplikasi yang dimaksud
4. Demo aplikasi secara kelompok

ALUR PENILAIAN : PROPOSAL KEGIATAN SEKOLAH

Kriteria
Nilai 4 (Sangat Baik) Nilai 3 (Baik) Nilai 2 (Cukup) Nilai 1 (Kurang)
Penilaian
Membuat Jelas, menarik, dan Cukup jelas dan Kurang jelas, Tidak jelas, tidak
konsep / ide mencerminkan isi menarik, tetapi belum menarik, dan tidak menarik, dan tidak
aplikasi aplikasi yang dibuat mencerminkan isi mencerminkan isi mencerminkan isi
dengan baik. aplikasi yang dibuat aplikasi yang dibuat. aplikasi yang dibuat.
dengan baik.
Menyampaikan Jelas, padat, efisien, Cukup jelas, padat, Kurang jelas, padat, Tidak jelas, tidak
tujuan dan dan informatif, serta efisien dan informatif, tidak efisian dan tidak efisien, tidak padat,
manfaat menjelaskan manfaat tetapi belum informatif, serta tidak dan tidak informatif,
aplikasi aplikasi yang dibuat menjelaskan manfaat dapat menjelaskan serta tidak
dengan baik. aplikasi yang dibuat. manfaat aplikasi yang menjelaskan manfaat
dibuat. aplikasi yang dibuat.
Membuat alur Jelas, terstruktur, Cukup jelas, Kurang jelas, Tidak jelas, tidak
algoritma teratur, serta sesuai terstruktur, teratur, terstruktur, tidak terstruktur, tidak
aplikasi dengan konsep/ide tetapi belum sesuai teratur, dan tidak teratur, dan tidak
aplikasi yang dengan konsep/ide sesuai dengan sesuai dengan
dibutuhkan dengan aplikasi yang konsep/ide aplikasi konsep/ide aplikasi
baik dibutuhkan. yang dibutuhkan. yang dibutuhkan.
Demo Aplikasi Semua anggota Sebagian besar Sebagian kecil Tidak ada anggota
(Kelompok) kelompok memiliki anggota kelompok anggota kelompok kelompok yang
peran dalam bekerja memiliki peran dalam memiliki peran dalam berperan dalam
sama dengan baik bekerja sama dengan bekerja sama dengan bekerja sama untuk
untuk menyelesaikan baik untuk baik untuk menyelesaikan tugas.
tugas. menyelesaikan tugas. menyelesaikan tugas.
PENILAIAN SIKAP

LEMBAR PENGAMATAN PENILAIAN SIKAP

Mata Pelajaran : Program Dasar Keahlian

Kelas/Semester : X/RPL/B/1 dan 2
Tahun Pelajaran : 2024/2025
Waktu Pengamatan : ............

 Indikator sikap aktif dalam pembelajaran konsep dasar pemrograman website

1. Kurang baik : Tidak menunjukkan sikap atau peran dalam pembelajaran
2. Baik : Menunjukkan sudah ada usaha berperan aktif dalam pembelajaran tetapi
belum konsisten.
3. Sangat baik : Menunjukkan sudah berperan aktif dalam pembelajaran secara
mandiri ataupun kelompok secara terus menerus dan konsisten.
 Indikator sikap bekerjasama dalam kegiatan kelompok
1. Kurang baik : Sama sekali tidak berusaha untuk bekerjasama dalam kegiatan
kelompok.
2. Baik : Menunjukkan sudah ada usaha untuk bekerjasama dengan baik dalam
kegiatan kelompok tetapi masih belum konsisten.
3. Sangat baik : Menunjukkan adanya usaha bekerjasama dengan baik dalam kegiatan
kelompok secara terus menerus dan konsisten.
 Indikator sikap toleran terhadap proses pemecahan masalah yang berbeda dan kreatif.
1. Kurang baik : Sama sekali tidak bersikap toleran terhadap pemecahan masalah
yang berbeda dan kreatif.
2. Baik : Sudah ada usaha untuk bersikap toleran terhadap proses pemecahan
masalah yang berbeda dan kreatif tetapi masih belum konsisten.
3. Sangat baik : Menunjukkan sudah ada usaha untuk bersikap toleran terhadap
pemecahan masalah yang berbeda dan kreatif secara terus menerus dan konsisten.

Bubuhkan tanda √ (centang/checklist) pada kolom-kolom sesuai hasil pengamatan

Sikap
No Nama Siswa Aktif Kerja sama Toleran
KB B SB KB B SB KB B SB