TUGAS DEMONSTRASI KONTEKSTUAL MODUL 2.

1
MODUL PEMBELAJARAN BERDIFERENSIASI

MODUL AJAR
PEMROGRAMAN WEB
Pembuatan Form Input Data

KURIKULUM MERDEKA

Semester Ganjil
Tahun Pelajaran 2023 / 2024

SMK
FASE F
(KELAS XI)

Danar Widyanugroho, M.Pd.T

CGP A 9 LIMA PULUH KOTA

SMK NEGERI 2 KEC. GUGUAK

Jl. Tuanku Nan Biru, VII Koto Talago, Guguak
Kab. 50 Kota, Prov. Sumatera Barat

Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 1

1. INFORMASI UMUM
Nama Sekolah : SMK Negeri 2 Kec. Guguak
Mata Pelajaran : Pemrograman Web
Penyusun : Danar Widyanugroho, M.Pd.T
Penelaah Industri : -
Tahun Penyusunan : 2023
Fase / Kelas : F / XI
Elemen : Pemrograman Web
Capaian Pembelajaran : Pada akhir fase F peserta didik mampu memahami konsep
dan menerapkan perintah HTML, CSS, pemrograman
Javascript, bahasa pemrograman server-side serta
implementasi framework pada pembuatan web statis dan
dinamis untuk beragam kebutuhan yang kontekstual. Selain
itu, peserta didik juga mampu mendokumentasikan serta
mempresentasikan web statis dan dinamis yang telah
dikembangkan.
Materi Pokok : Pembuatan Form Input Data
Jumlah Peserta Didik : 15 Siswa
Alokasi Waktu : 6 JP (1 x pertemuan)
Kompetensi Awal : Sebelum mempelajari modul ini peserta didik harus
memahami pemrograman dasar pengembangan perangkat
lunak dan gim
Profil Pelajar Pancasila : Bernalar Kritis, Mandiri dan Kreatif
Sarana dan Prasarana :
a. Sarana
• Alat • Gawai (Laptop / handphone)
• Bahan • Kertas HVS, buku tulis
• Perkiraan Biaya • Biaya kuota internet dana alat tulis
b. Prasarana
• Sumber Ajar • Buku paket, modul
• Media Ajar • Internet, LMS
• Lingkungan Belajar • Ruang laboratorium web desain
• Alternatif
Target Peserta Didik : • Peserta didik reguler/tipikal
• Peserta didik dengan kesulitan belajar
• Pesera didik dengan pencapaian tinggi
Program Keahlian : Pengembangan Perangkat Lunak dan Gim
Model Pembelajaran : Project Base Learning(PjBL)
Moda Pembelajaran : Luring(Tatap Muka)
Metode Pembelajaran :
Diskusi, presentasi
Pendekatan Pembelajaran :
Berdiferensiasi

Modul Ajar – Pemrograman Web | 2

2. KEBUTUHAN BELAJAR SISWA
Untuk mengidentifikasi dan memetakan kebutuhan belajar siswa, saya menggunakan
Teknik observasi yang dilakukan dengan pengamatan secara langsung dalam proses
pembelajaran sehari-hari. Hasil yang diperoleh adalah sebagai berikut :
a. Kesiapan Belajar siswa
1) Ada 3 siswa yang sudah sangat menguasai pemrograman PHP dan HTML yang
terkoneksikan dengan database(Memiliki imajinasi tersendiri dalam merancang
tugasnya)
2) Ada 3 siswa juga yang kurang menguasai pemrograman PHP dan HTML yang
terkoneksikan dengan database(sehingga perlu bimbingan yang lebih ditambah melihat
literatur dari berbagai sumber dalam merancang tugasnya)
3) Selebihnya siswa tersebut jika diterangkan akan lebih mudah dalam mempelajari
pemrograman PHP dan HTML yang terkoneksikan dengan database(melihat literatur
dari berbagai sumber dalam merancang tugasnya)
b. Minat Belajar Siswa
Peserta didik dapat membuat form untuk menambahkan data pada database dengan jumlah
field 3 atau lebih dan bentuk form nya dapat berupa Form untuk pendaftaran Siswa Baru,
Form untuk melamar kerja, data barang dll.
c. Profil Belajar Siswa
Dalam profil belajar siswa terdapat 3 karakteristik belajar siswa yaitu Visual, Audio dan
Kinestetik. Sehingga dalam mengerjakan tugasnya mereka saya beri kebebasan untuk
mengekspresikan dirinya: Visual : Mengerjalan tugas sambil membca literasi pendukung
atau Video tutorialnya. Audio : Mengerjakan Tugas sambil mendengarkan musik.
Kinestetik : Mengerjakan Tugas sambil sesekali keluar ruangan dan bermain mengerjakan
kegiatan yang lain. Mereka saya izinkan melakukan hal tersebut dengan syarat apa yang
menjadi tugasnya dapat diselesaikan dengan baik.

3. STRATEGI BERDIFERENSIASI
a. Strategi Konten
1) Siswa diberikan pertanyaan pemantik untuk menggali pemahaman mereka akan tugas
yang akan mereka kerjakan.
2) Siswa diberikan kebebasan dalam mencari sumber belajar yang sesuai dengan tugas yang
ingin dikerjakan.
3) Desain Form mereka buat sebagai tugas berbeda-beda begitu juga dengan jumlah field 3
atau lebih dan bentuk form nya
b. Strategi Proses
1) Dalam mengerjakan tugasnya mereka saya beri kebebasan untuk mengekspresikan
dirinya: Visual : Mengerjalan tugas sambil membca literasi pendukung atau Video
tutorialnya. Audio : Mengerjakan Tugas sambil mendengarkan musik. Kinestetik :
Mengerjakan Tugas sambil sesekali keluar ruangan dan bermain mengerjakan kegiatan
yang lain. Mereka saya izinkan melakukan hal tersebut dengan syarat apa yang menjadi
tugasnya dapat diselesaikan dengan baik.
2) Siswa yang sudah sangat menguasai pemrograman PHP dan HTML yang terkoneksikan
dengan database diarahkan untuk membuat tugas dengan tingkat kesulitan yang lebih
dibandingkan teman yang lain.

Modul Ajar – Pemrograman Web | 3

 3) Siswa yang masih kurang menguasai pemrograman PHP dan HTML yang terkoneksikan
dengan database dilakukan bimbingan yang lebih agar mereka dapat menyelesaikan tugas
tepat waktu.
c. Strategi Produk
Peserta didik dapat membuat form untuk menambahkan data pada database dengan
jumlah field 3 atau lebih dan bentuk form nya dapat berupa Form untuk pendaftaran Siswa
Baru, Form untuk melamar kerja, data barang dll

4. KOMPONEN INTI

A. Tujuan Pembelajaran : Menerapkan Script HTML dan PHP untuk pembuatan Form
yang terkoneksikan dengan Database
Peserta didik dapat menerapkan script HTML dan PHP
B. Pemahaman Bermakna : untuk membuat Form yang terkoneksikan dengan Database

1. Pernahkah anda mengisi sebuah formulir di halaman

web?
2. Untuk keperluan apa saja anda mengisi formulir pada
C. Pertanyaan Pemantik :
halaman web?

D. Kegiatan Pembelajaran
1. Kegiatan Pendahuluan
a. Peserta didik menjawab salam guru
b. Peserta didik berdo’a sebelum memulai kegiatan pembelajarandengan dipimpin
salahsatu peserta didik untuk memimpin do’a dilanjutkan dengan mengaji.
c. Peserta didik menyimak cerita inspiratif yang dapat motivasinya dari guru atau teman
sejawat
d. Peserta didik menyimak capaian pembelajaran, tujuan pembelajaran yang akan
dicapai yang disampaikan oleh guru
e. Peserta didik menyimak garis besar cakupan materi dan kegiatan yang akan
dilakukan
f. Peserta didik dan guru membuat kesepakatan kelas.
2. Kegiatan Inti

LANGKAH KERJA AKTIVITAS GURU AKTIVITAS PESERTA DIDIK

Pertanyaan Mendasar Guru menyampaikan topik Mengajukan pertanyaan mendasar

dan mengajukan pertanyaan
pemantik tentang pembuatan
form yang terkoneksikan
dengan database
apa yang harus dilakukan peserta
didik terhadap topik/ pemecahan
masalah :
Apakah Jumlah Field yang
digunakan harus sama?

Modul Ajar – Pemrograman Web | 4


Mendesain Guru meminta siswa
Perencanaan Produk bergabung dengan kelompok
kecil mereka dan
memastikan setiap peserta
didik dalam kelompok
memilih dan mengetahui
prosedur pembuatan
proyek/produk yang akan
dihasilkan.
Peserta didik dapat membuat
form untuk menambahkan data
pada database dengan jumlah
field 3 atau lebih dan bentuk
form nya dapat berupa Form
untuk pendaftaran Siswa Baru,
Form untuk melamar kerja,
data barang dll.
Menyusun Jadwal Guru dan peserta didik
Pembuatan membuat kesepakatan
tentang jadwal pembuatan
proyek :
1. Mencari referensi
tugas : 15”
2. Berdiskusi untuk
menyepakati tugas
yang akan dibuat :
15”
3. Membuat
Perancangan : 50”.
4. Mengerjakan Tugas
Proyek : 50”
5. Membuat laporan :
50”
6. Presentasi : 60” @15”
Memonitor Keaktifan Guru memantau keaktifan
dan Perkembangan peserta didik selama
Proyek melaksanakan proyek,
memantau realisasi
perkembangan dan
membimbing bagi kelompok
Modul Ajar – Pemrograman Web | 5
Apakah dalam membuat desain
form bisa menggunakan
Framework CSS seperti
Bootstrap?
Peserta didik berdiskusi menyusun
rencana pembuatan proyek
pemecahan masalah meliputi
pembagian tugas, persiapan alat,
bahan, media, sumber yang
dibutuhkan.
Peserta didik menyusun jadwal
penyelesaian proyek dengan
memperhatikan batas waktuyang
telah ditentukan bersama.
Dalam mengerjakan tugasnya Peserta
didik diberi kebebasan untuk
mengekspresikan dirinya: Visual :
Mengerjalan tugas sambil membca
literasi pendukung atau Video
tutorialnya. Audio : Mengerjakan
Tugas sambil mendengarkan musik.
Kinestetik : Mengerjakan Tugas
sambil sesekali keluar ruangan dan
bermain mengerjakan kegiatan yang
lain. Mereka saya izinkan melakukan
hal tersebut dengan syarat apa yang
menjadi tugasnya dapat diselesaikan
dengan baik
Peserta didik melakukan
pembuatan proyek sesuai jadwal,
mencatat setiap tahapan,
mendiskusikan masalah yang
muncul selama penyelesaian
proyek dengan guru.
 yang mengalami kesulitan.
Menguji Hasil Guru berdiskusi tentang
proyek yang sedang
dikerjakan dan memantau
keterlibatan peserta didik,
mengukur ketercapaian
proyek yang dikerjakan
sudah sesuai standar.
Evaluasi Pengalaman Guru membimbing proses
Belajar pemaparan proyek,
menanggapi hasil,
3. Kegiatan Penutup
Refleksi Peserta didik
1. Peserta didik membuat rangkuman / 1.
simpulan terkait dengan materi yang
dipelajari pada hari ini dengan penuh 2.
antusias, cermat dan tepat
2. Peserta didik menjawab soal post test
dengan cermat dan tepat Melalui 3.
Kahoots
3. Peserta didik menerima penilaian /
refleksihasil kegiatan yang sudah
dilaksanakan dengan beberapa
pertanyaan:
a. Apa yang menyenangkan dalam
kegiatan pembelajaran hari ini?
b. Apa yang Anda lakukan untuk
memperbaiki hasil belajar Anda?
c. Dengan pembelajaran hari ini,
hidupsaya lebih bermakna.
(ya/tidak)
4. Peserta didik menyimak rencana
pembelaran pada pertemuan
berikutnya.
Modul Ajar – Pemrograman Web | 6
Membahas kelayakan proyek yang
telah dibuat dan membuat laporan
produk/ karya untuk dipaparkan
kepada kelompok lain.
Sebelum Kegiatan Presentasi
siswa Melakukan Ice Breaking
Setiap peserta didik memaparkan
laporan, peserta didik yang lain
memberikan tanggapan,.
Refleksi Guru
Apakah ada kendala pada
kegiatanpembelajaran?
Apakah semua peserta didik
aktifdalam kegiatan
pembelajaran?
Apa saja kesulitan peserta
didikyang dapat
diidentifikasi pada kegiatan
pembelajaran?
4. Apakah siswa yang memiliki
kesulitan ketika berkegiatan
dapatteratasi dengan baik?
5. Apa level pencapaian rata-
ratapeserta didik dalam
kegiatan pembelajaran ini?
6. Apakah seluruh peserta didik
dapat dianggap tuntas dalam
pelaksanaanpembelajaran?
7. Apakah ada kendala pada
kegiatanpembelajaran?
8. Apakah semua peserta didik
 5. Peserta didik membuat rangkuman /
simpulan terkait dengan materi yang
dipelajari pada hari ini dengan penuh 9.
antusias, cermat dan tepat
6. Peserta didik menjawab soal post test
dengan cermat dan tepat
7. Peserta didik menerima penilaian /
refleksihasil kegiatan yang sudah
dilaksanakan dengan beberapa
pertanyaan:
a. Apa yang menyenangkan dalam
kegiatan pembelajaran hari ini?
b. Apa yang Anda lakukan untuk
memperbaiki hasil belajar Anda?
c. Dengan pembelajaran hari ini,
hidupsaya lebih bermakna.
(ya/tidak)
8. Peserta didik menyimak rencana
pembelaran pada pertemuan
berikutnya
9. Peserta didik mengakhiri
pembelajaran dengan do’a dan salam
penutup
aktifdalam kegiatan
pembelajaran?
Apa saja kesulitan peserta
didikyang dapat
diidentifikasi pada kegiatan
pembelajaran?
10. Apakah siswa yang memiliki
kesulitan ketika berkegiatan
dapatteratasi dengan baik?
11. Apa level pencapaian rata-
ratapeserta didik dalam
kegiatan pembelajaran ini?
12. Apakah seluruh peserta didik
dapat dianggap tuntas dalam
pelaksanaanpembelajaran?
13. Apa strategi agar seluruh peserta
didik dapat menuntaskan
kompetensi?

E. Asesmen
Bentuk
Jenis
Profil Pelajar Pancasila Tertulis Unjuk Kerja
Diagnostik Penilaian diri Jawaban singkat
Formatif Pilihan ganda di Presentasi dan simulasi
kahoots proyek
Sumatif

Modul Ajar – Pemrograman Web | 7

F. Pengayaan dan Remedial
a. Pengayaan
Bagi peserta didik yang sudah mencapai nilai ketuntasan, diberikan pembelajaran
pengayaan sebagai berikut:
1. Peserta yang mencapai nilai n (ketuntasan) > n > n (maksimum) diberikan materi
masih dalam cakupan CP dengan pendalaman sebagai pengetahuan tambahan.
2. Peserta didik yang mencapai nilai n > n (maksimum) diberikan materi melebihi
cakupan CP dengan pendalaman sebagai pengetahuan tambahan. Soal-soal yang
diberikan untuk mereka jawab adalah soal-soal yang belum mampu mereka tuntaskan
pada saat mengikuti Penilaian Harian dan soal lainya yang relevan yang diberikan oleh
guru. Nilai yang diberikan sebagai nilai akhir pada CP ini bagi para peserta didik yang
menempuh perbaikan adalah nilai akhir yang berhasil diraih dan dengan pertimbangan
lainnya dari guru
b. Remedial
Program remedial diberikan kepada peserta didik yang belum tuntas atau belum mencapai
nilai standar Kriteria Ketuntasan Minimal (KKM). Bagi para peserta didik ini, bila
memungkinkan akan diberikan “review” pembelajaran atau bahkan pembelajaran ulang
sehingga lebih memantapkan mereka untuk menempuh perbaikan pada tahap remedial.
Soal-soal yang diberikan untuk mereka jawab adalah soal-soal yang belum mampu
mereka tuntaskan pada saat mengikuti Penilaian Harian. Nilai yang diberikan sebagai nilai
akhir pada CP ini bagi para peserta didik yang menempuh remedial adalah nilai akhir yang
berhasil diraih dan dengan pertimbangannya dari guru.

LAMPIRAN

Glosarium
HTML adalah bahasa standar pemrograman yang digunakan untuk membuat halaman website,
yang diakses melalui internet.
PHP adalah sebuah bahasa pemrograman server side scripting yang bersifat open source.
Database adalah umpulan data yang dikelola sedemikian rupa berdasarkan ketentuan tertentu
yang saling berhubungan sehingga mudah dalam pengelolaannya. Melalui pengelolaan
tersebut pengguna dapat memperoleh kemudahan dalam mencari informasi, menyimpan
informasi dan membuang informasi.

Modul Ajar – Pemrograman Web | 8

Daftar Pustaka
Buku Bahan Ajar Rekayasa Perangkat Lunak.Kemendikbudristek, 2021
Buku Bahan Ajar Pemrograman Web dan Perangkat Bergerak.
Kemendikbudristek, 2021

Modul Ajar – Pemrograman Web | 9

 RINGKASAN MATERI HTML, PHP dan Database

Pengertian HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang
digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis
website (Web Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file
HTML di simpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses
menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain).
seperti yang sudah di jelaskan, HTML adalah dasar dari sebuah website. untuk membuat
sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS,
JavaScript dan PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat
hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena
tidak memiliki aksi atau fungsifungsi yang dapat mengelola website. tentu developer akan
sangat di sibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya
masing-masing. seperti tag heading, paragraf, pembuatan form, tombol, list, membuat
hyperlink atau link yang menghubungkan antar halaman website dan banyak lagi lainnya yang
akan kita bahas.

Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di
lakukan dengan HTML adalah sebagai berikut :
1. Membungkus element-element tertentu sesuai kebutuhan
2. Membuat heading atau format judul
3. Membuat Tabel
4. Membuat List
5. Membuat Paragraf
6. Membuat Form
7. Membuat Tombol
8. Membuat huruf tebal
9. Membuat huruf miring
10. Menampilkan gambar
11. Menampilkan video
12. Dan banyak lainnya.

Modul Ajar – Pemrograman Web | 10

 Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak
sekali fitur tambahan salah satunya, dengan HTML5 memungkinkan kita untuk membuat
streaming video tanpa bantuan adobe flash. untuk tutorial cara membuat streaming video
dengan HTML5 juga akan kita bahas pada buku tutorial belajar HTML dasar ini.
Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar
dari pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html harus
menggunakan web browser dan file html di simpan dengan ekstensi .html (dot html).

Memilih Text Editor

Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode
program, disini khususnya untuk penulisan kode program HTML itu sendiri. Text editor sendiri
sangatlah banyak yang bisa digunakan untuk penulisan kode HTML, contohnya seperti
Notepad yang disediakan oleh sistem operasi windows, Textedit yang disediakan oleh sistem
operasi Mac dan Nano yang disediakan oleh sistem operasi linux. Text editor berbeda dengan

Word Processor (Microsoft Word, King Soft, WordPerfect). Itu dikarenakan text editor tidak
bisa digunakan untuk mengatur format document serta tidak disediakan fitur-fitur yang bisa
digunakan untuk desktop publishing.
Browser merupakan aplikasi yang akan kita gunakan untuk menjalankan code program
html yang sudah kita tulis. browser ini ialah syarat yang harus anda penuhi jika anda belajar
web programing. untuk browser itu sendiri bisa digunakan yang sudah disediakan oleh sistem
operasi langsung ataupun bisa juga digunakan aplikasi browser yang lain seperti: Mozilla
Firefox, Opera, Chrome dan sebagainya.
Berikut beberapa text editor yang digunakan dalam penulisan code program bagi anda
yang baru belajar bahasa pemrograman.
1. Sublime text editor
Sublime Text editor adalah text editor yang paling banyak digunakan oleh programer, text
editor ini memiliki tampilan yang elegan, yang khas dengan warna kecoklatannya. Text
Editor ini tersedia untuk windows, Mac, dan Linux, yang ingin menggunakan sublime bisa
di download dari situs resminya langsung, yaitu di ttps:// www.sublimetext.com/

Modul Ajar – Pemrograman Web | 11

 Gambar 1 Sublime Text Editor
2. Notepad ++
Text editor ini bisa digunakan untuk windows dan free licence (dalam artian bebas
digunakan tanpa mengeluarkan biaya). Text Editor ini memiliki ciri khas tersendiri dan
banyak fitur-fitur yang bisa di instal di text editor ini, yang ingin menggunakan text editor
notepad++ bisa di download pada situs resminya, yaitu https://notepad-plus-plus.org/.

Gambar 2 Notepad ++

Modul Ajar – Pemrograman Web | 12

Mengenal Tag, Element, Atribut HTML
a. Tag HTML
Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa
text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis
didalamnya kepada web browser. baik text itu berupa list, paragraf, link dan sebagainya
disinilah di gunakan tag, dalam penulisan tag hampir semua menggunakan pembuka dan
penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag.
Berikut penulisan tag yang digunakan dalam HTML
<tag> Objek yang diisi </tag>
Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung
sudut pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag
penutup, diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup
kurung sudut (</>).
Berikut beberapa jenis tag HTML yang akan sering di jumpai :
Tag Fungsi
<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan
<!DOCTYPE html> Digunakan untuk mendefinisikan tipe document HTML5
Mendefinisikan sebuah anchor, digunakan untuk saling
<a>link</a> menautkan satu dokumen HTML ke dokumen HTML yang lain
(membuat link)
<b> .. </b> Membuat teks menjadi tebal
<p> .. </p> Membuat paragraf
<h1> .. </h1> Membuat heading satu
<h2> .. </h2> Membuat heading dua
<body> Mendefinisikan body/ isi document html
<head> Mendefinisikan bagian kepala document html
<title> Mendefinisikan judul halaman
<div> Mendefinisikan halaman
<link> Mendefinisikan hubungan antar document
<script> Mendefinisikan clinet-side script
<table> Mendefinisikan tabel
<th> Mendefinisikan sel header di dalam sebuah tabel
<td> Mendefinisikan sel di dalam sebuah tabel
<tr> Mendefinisikan baris di dalam sebuah tabel
<ul> Mendefinisikan daftar dalam format bullet
<li> Mendefinisikan list
Modul Ajar – Pemrograman Web | 13
b. Element HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi yang
ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>

Pada contoh diatas <h2> adalah heading dua <h2> merupakan element h2 dan isinya ini
adalah heading dua. dalam element ini bisa berupa text ataupun tag lain misalnya <link>
dan sebagainya.

c. Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi
ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. atribut bisanya
memiliki 2 bagian yaitu nama dan nilai, dapat ditulis dengan ( name=”value” ). penulisan
nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua).
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikanatribut dan
element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>

Modul Ajar – Pemrograman Web | 14

Perhatikan pada syntax di atas :
1. <h2> adalah tag heading 2
2. align adalah nama dari atribut
3. center adalah nilai/value dari atribut
4. “Pengenalan atribut HTML” adalah element dari tag h2
Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang bergelut di
web programing akan sering menjumpai tag yang didalamnya terdapat atribut.

CRUD dengan PHP dan Database

Pengertian CRUD
Crud singkatan dari proses Create, Read, Update, dan Delete digunakan untuk mengelola
data pada sistem atau aplikasi pengolah data. Ini biasanya digunakan dalam sistem informasi,
aplikasi web, atau aplikasi mobile untuk mengatur interaksi dengan database. Setiap operasi CRUD
memiliki peran dan fungsi khusus dalam pengelolaan data.
Fungsi CRUD
Create (Buat)
Pada langkah ini, data baru dibuat dan dimasukkan ke dalam database. Misalnya, orang dapat
membuat informasi baru di sistem pendaftaran dengan mengisi formulir pendaftaran. Database
akan menyimpan data sehingga dapat diakses dan digunakan kemudian. Contoh penggunaan
bahasa pemrograman PHP untuk operasi “Create”:php
INSERT INTO namatabel (kolom1, kolom2, kolom3) VALUES (nilai1, nilai2, nilai3);
Read (Baca)
Operasi “Read” berfungsi untu kmembaca atau menampilkan data yang sudah ada di database.
Setelah data dibuat dengan operasi “Read”, operasi “Read” memungkinkan sistem mengambil data
dan menampilkannya kepada pengguna. Contoh penggunaan bahasa pemrograman PHP untuk
operasi “Read”: php
SELECT * FROM namatabel WHERE kondisi;
Update (Perbarui)
Operasi “Update” digunakan untuk memperbarui atau mengedit data yang sudah ada di dalam
database. Dengan menggunakan operasi ini, pengguna dapat mengubah informasi yang salah atau
mengisi data yang kurang lengkap. Contoh penggunaan bahasa pemrograman PHP untuk operasi
“Update”: php
UPDATE namatabel SET kolom1 = nilai1, kolom2 = nilai2 WHERE kondisi;
Delete (Hapus)
Operasi “Delete” berfungsi untuk digunakan untuk menghapus data dari database. Jika data
tidak relevan atau tidak diperlukan lagi, pengguna dapat menggunakan operasi “Delete” untuk
menghapusnya.

Modul Ajar – Pemrograman Web | 15

 Contoh penggunaan bahasa pemrograman PHP untuk operasi “Delete”:php
DELETE FROM namatabel WHERE kondisi;
Cara Kerja CRUD
Sistem CRUD bekerja dengan cara yang sama seperti yang kita lakukan setiap hari untuk
mengelola catatan. Misalnya, ketika kita ingin menambahkan informasi baru, kita melakukan
operasi “Create” dengan menulis nama dan nomor telepon teman-teman baru dalam buku telepon.
Sementara itu, ketika ingin melihat daftar teman-teman yang sudah tercatat, kita melakukan operasi
“Read” dengan membuka buku telepon dan melihat informasi yang sudah ada. Demikian pula, jika
nomor atau alamat teman telah berubah, kita melakukan operasi “Update” dengan mengganti data
sebelumnya.
Di sisi lain, jika pengguna ingin menghapus akun atau data tertentu, aplikasi melakukan
operasi “Delete” dengan menghapus data tersebut dari database. Yang terpenting, sistem ini
memungkinkan kita untuk mengelola informasi dengan mudah dan efisien, serupa dengan cara kita
mengelola catatan sehari-hari.
Contoh Program CRUD PHP
Berikut ini adalah contoh program CRUD (Create, Read, Update, Delete) PHP yang
melibatkan pembuatan database. Program ini menggunakan MySQL sebagai sistem manajemen
basis data.
Langkah 1: Membuat Database dan Tabel
Sebelum menjalankan contoh program CRUD, pertama, kita harus membuat database dan tabel
yang akan digunakan. Di bawah ini adalah contoh SQL untuk membuat database dengan nama
“contoh_db” dan tabel “pengguna”:
CREATE DATABASE contoh_db;

USE contoh_db;

CREATE TABLE pengguna (

id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(50),
email VARCHAR(100),
umur INT
);
Langkah 2: Program PHP CRUD
<?php
// Konfigurasi koneksi ke database
$host = "nama_host";
$username = "nama_pengguna";
$password = "kata_sandi";
$database = "contoh_db";

// Membuat koneksi ke database

$koneksi = mysqli_connect($host, $username, $password, $database);

Modul Ajar – Pemrograman Web | 16

// Cek koneksi
if (!$koneksi) {
die("Koneksi gagal: " . mysqli_connect_error());
}

// Operasi Create (Buat)

if (isset($_POST['submit'])) {
$nama = $_POST['nama'];
$email = $_POST['email'];
$umur = $_POST['umur'];

$sql = "INSERT INTO pengguna (nama, email, umur) VALUES ('$nama', '$email', '$umur')";
mysqli_query($koneksi, $sql);
}

// Operasi Read (Baca)

$sql_read = "SELECT * FROM pengguna";
$data_pengguna = mysqli_query($koneksi, $sql_read);

// Operasi Update (Perbarui)

if (isset($_POST['update'])) {
$id = $_POST['id'];
$nama_baru = $_POST['nama_baru'];
$email_baru = $_POST['email_baru'];
$umur_baru = $_POST['umur_baru'];

$sql_update = "UPDATE pengguna SET nama='$nama_baru', email='$email_baru',

umur='$umur_baru' WHERE id='$id'";
mysqli_query($koneksi, $sql_update);
}

// Operasi Delete (Hapus)

if (isset($_POST['delete'])) {
$id_hapus = $_POST['id_hapus'];

$sql_delete = "DELETE FROM pengguna WHERE id='$id_hapus'";

mysqli_query($koneksi, $sql_delete);
}

?>

<!DOCTYPE html>
<html>
<head>
<title>Contoh Program Create,READ,UPDATE,DELETE PHP</title>
</head>
<body>

<h2>Form Tambah Pengguna</h2>

<form method="post">
<label for="nama">Nama:</label>
<input type="text" name="nama" required>
<br>

Modul Ajar – Pemrograman Web | 17

<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="umur">Umur:</label>
<input type="number" name="umur" required>
<br>
<input type="submit" name="submit" value="Tambah">
</form>

<h2>Daftar Pengguna</h2>
<table border="1">
<tr>
<th>Nama</th>
<th>Email</th>
<th>Umur</th>
<th>Aksi</th>
</tr>
<?php while ($row = mysqli_fetch_assoc($data_pengguna)) { ?>
<tr>
<td><?php echo $row['nama']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['umur']; ?></td>
<td>
<form method="post">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<input type="text" name="nama_baru" placeholder="Nama Baru">
<input type="email" name="email_baru" placeholder="Email Baru">
<input type="number" name="umur_baru" placeholder="Umur Baru">
<input type="submit" name="update" value="Update">
<input type="submit" name="delete" value="Hapus">
</form>
</td>
</tr>
<?php } ?>
</table>

</body>
</html>

Catatan:
Pastikan untuk mengganti nilai variabel $host, $username, $password, dan $database dengan
informasi yang sesuai dengan pengaturan database Anda.
Dengan implementasi CRUD, pengguna dapat dengan mudah mengelola data pada sistem atau
aplikasi. Selanjutnya, pengguna akan dipermudah dalam menyimpan, membaca, memperbarui, dan
menghapus informasi yang relevan.

Modul Ajar – Pemrograman Web | 18

 LEMBAR ASESMEN DIAGNOSTIK NON KOGNITIF

1. Lembar amati lingkungan rumahmu saat ini, lalu pilih emoji berikut yang mewakili
perasaanmu. (silang pada gambar)

2. Berikan pendapatmu tentang bagaimana kondisi lingkungan akan berdampak pada

semangat belajarmu?

3. Apa saja yang dapat kamu lakukan untuk menciptakan kenyamanan lingkungan
belajar dirumah

4. Apa yang kamu rasakan saat menggunakan aplikasi perangkat lunak dan gim?

5. Apa harapanmu saat kamu mempelajari tentang pemrograman web dan perangkat
bergerak?

Link Google Form Asessmen Diagnostik non kognitif : https://forms.gle/oJmmDGnFMYzDY4kb9

Modul Ajar – Pemrograman Web | 19

 RUBRIK PENSKORAN TUGAS PROYEK

Nama Siswa :
Nama Kelompok :
Kelas :

Petunjuk : Berilah tanda cek (√) pada kolom skor

Skor
No Komponen / Subkomponen
7 8 9 10
Persiapan :
1 Ketepatan aplikasi dan peralatan yang
perlukan serta kesesuaian ide yang
dipilih berdasarkan tujuan pembelajaran
Proses Kerja :
2
Sistematika Kerja sesuai dengan jadwal
kegiatan yang telah direncanakan
Hasil :
3 a. Produk yang dihasilkan berjalan sesuai
dengan perencanaan.
b. Laporan sesuai dengan produk yang
dibuat
c. Presentasi Produk disajikan dengan baik
Waktu :
4
Ketepatan waktu dalam melaksanakan
kegiatan sesuai jadwal yang telah ditentukan.

Persiapan Proses Hasil Waktu Total

Skor Perolehan
Skor Maksimal
Bobot 10 35 45 10 100
Total

𝑠𝑘𝑜𝑟 𝑝𝑒𝑟𝑜𝑙𝑒ℎ𝑎𝑛
Nilai Total = ∑( x bobot )
𝑠𝑘𝑜𝑟 𝑚𝑎𝑘𝑠𝑖𝑚𝑎𝑙
Keterangan :
Siswa yang belum kompeten maka harus mengikuti pembelajaran remedial,
Siswa yang cukup kompeten diperbolehkan untuk memperbaiki pekerjaannya sehingga
mencapai level kompeten.

Modul Ajar – Pemrograman Web | 20

 PEDOMAN PENSKORAN TUGAS PROYEK

Nama Sekolah : SMK Negeri 2 Kec. Guguak

Kelas / Semester : XI / Ganjil
Tahun Pelajaran : 2023 / 2024
Mata Pelajaran : Pemrograman Web

Komponen / Sub Komponen Indikator / Kriteria Unjuk Kerja Skor

Persiapan (skor maksimal 10)
Referensi tentang pemrogram web dan
perangkat bergerak
Proses Kerja (skor maksimal 35)
Sistematika kerja
Hasil (skor maksimal 45)
Produk yang dihasilkan berjalan sesuai Produk yang dibuat dapat berjalan sesuai
dengan perencanaan.
Laporan sesuai dengan produk yang
dibuat
Konsep ide yang dipilih sangat tepat
10
dan sesuai
Konsep ide yang dipilih tepat dan sesuai 9
Konsep ide yang dipilih kurang tepat
8
dan sesuai
Konsep ide yang dipilih tidak tepat dan
7
Sesuai
Sistematika kerja dalam membuat
10
laporan efektif dan sesuai
Sistematika kerja dalam membuat
9
laporan efektif dan kurang sesuai
Sistematika kerja dalam membuat
8
laporan kurang efektif namun sesuai
Sistematika kerja dalam membuat
7
laporan kurang efektif dan sesuai
10
rencana(Dapat memasukan data dari
form yang dibuat, data dapat ditampilkan
lagi, desain menarik)
Produk yang dibuat dapat berjalan sesuai
9
rencana(Dapat memasukan data dari
form yang dibuat, data dapat ditampilkan
lagi, desain kurang menarik)
Produk yang dibuat dapat berjalan
8
kurang sesuai rencana(Dapat memasukan
data dari form yang dibuat, data tidak
dapat ditampilkan lagi, desain kurang
menarik)
Produk yang dibuat tidak dapat berjalan
7
sesuai rencana(tidak Dapat memasukan
data dari form yang dibuat, data tidak
dapat ditampilkan lagi, desain kurang
menarik)
Laporan rapi dan menarik, dilengkapi
10
cover dan lampiran serta sesuai dengan
produk yang dikerjakan
Modul Ajar – Pemrograman Web | 21
 Laporan rapi dan menarik, dilengkapi
9
Cover serta sesuai dengan produk yang
dikerjakan
Laporan dilengkapi cover dan lampiran,
8
namun kurang rapi dan menarik kurang
sesuai
Laporan kurang rapi dan menarik, tidak
7
dilengkapi cover dan lampiran
Presentasi Produk disajikan dengan baik Dapat menyajikan presentasi produk 10
dengan lengkap, baik dan mudah
dipahami oleh peserta
Dapat menyajikan presentasi produk
9
dengan lengkap, baik dan kurang dapat
dipahami oleh peserta
Dapat menyajikan presentasi produk
8
dengan baik namun kurang lengkap dan
kirang dapat dipahami oleh peserta
Menyajikan presentasi produk
7
sekedarnya saja.
Waktu (skor maksimal 10)
Ketepatan waktu dalam melaksanakan Tepat atau Kurang dari waktu yang 10
kegiatan sesuai jadwal yang telah ditetapkan
ditentukan
Lebih ±10 Menit 9
Lebih ±20 Menit 8
Lebih dari 30 Menit 7

Modul Ajar – Pemrograman Web | 22

Soal Evaluasi Menggunakan Kahoot

Modul Ajar – Pemrograman Web | 23

 REMEDIAL DAN PENGAYAAN

A. Pembelajaran Remedial
1. Pemberian pembelajaran ulang dengan metode dan media yang berbeda,
menyesuaikan dengan gaya belajar peserta didik.
2. Pemberian bimbingan secara perorangan.
3. Pemberian tugas-tugas atau latihan secara khusus, dimulai dengan tugas-tugas atau
latihan sesuai dengan kemampuannya
4. Pemanfaatan tutor sebaya, yaitu peserta didik dibantu oleh teman sekelas yang telah
mencapai ketuntasan belajar.

B. Pembelajaran Pengayaan
1. Belajar kelompok, yaitu sekelompok peserta didik diberi tugas pengayaan untuk
dikerjakan Bersama pada dan/atau di luar jam-jam pelajaran sekolah.
2. Belajar mandiri, yaitu peserta didik diberi tugas pengayaan untuk dikerjakan
sendiri/individual.
3. Pemberian pembelajaran hanya untuk kompetensi/materi yang belum diketahui peserta
didik. Dengan demikian tersedia waktu bagi peserta didik untuk memperoleh
kompetensi/materi baru atau bekerja dalam proyek secara mandiri sesuai dengan
kemampuan masing-masing.

Modul Ajar – Pemrograman Web | 24