Materi Pemrograman Berbasis Web

 

🌐 Materi Pemrograman Web SMK

📘 Kelas 10 – Dasar Desain Web (Frontend)

1. Pengenalan Web dan Internet

• Apa itu website, domain, dan hosting

• Client-server dan HTTP/HTTPS

• Jenis-jenis website (statis, dinamis)

2. HTML (HyperText Markup Language)

• Struktur dasar HTML

• Tag teks: <h1>, <p>, <a>, <img>, <ul>, <table>

• Formulir: <form>, <input>, <select>, <button>

3. CSS (Cascading Style Sheets)

• Selektor dasar dan internal/eksternal style

• Properti umum: color, background, padding, margin, border

• Layout dasar: flexbox, grid, dan positioning

4. Desain Responsif

• Viewport dan media queries

• Mobile-first design

• Framework: pengenalan Bootstrap

5. Proyek Mini

• Website profil pribadi

• Website toko sederhana (halaman produk, kontak)

---

📗 Kelas 11 – Dasar Pemrograman Web Dinamis (Backend)

1. Bahasa Pemrograman PHP Dasar

• Sintaks dasar PHP

• Variabel, array, kondisi, dan perulangan

• Form handling dengan $_POST dan $_GET

2. Pengantar Database MySQL

• Konsep database, tabel, record

• Query dasar: SELECT, INSERT, UPDATE, DELETE

• Koneksi PHP ke MySQL (mysqli/PDO)

3. CRUD Web Dinamis

• Menampilkan data (read)

• Form input (create), edit (update), hapus (delete)

• Validasi input sederhana

4. Struktur File dan Routing Sederhana

• Folder views, includes, dan controllers

• Penggunaan require dan include

• File .htaccess (opsional)

5. Proyek CRUD

• Sistem buku tamu

• Sistem data siswa

• Aplikasi daftar tugas (todo list)

---

📕 Kelas 12 – Pengembangan Web Lanjut dan Proyek Akhir

1. Login dan Manajemen Pengguna

• Login, register, session login/logout

• Role user (admin/user)

• Password hash dan keamanan dasar

2. Upload File dan Gambar

• Form upload

• Validasi dan penyimpanan gambar

• Menampilkan thumbnail gambar

3. Pengenalan AJAX dan jQuery

• Refresh data tanpa reload (AJAX dasar)

• jQuery untuk manipulasi DOM

• Validasi form dengan jQuery

4. Framework PHP (Opsional)

• Pengantar Laravel / CodeIgniter 4

• Routing, controller, view

• CRUD menggunakan Laravel

5. Proyek Akhir Pemrograman Web

• Sistem manajemen sekolah

• Sistem kasir online

• Website toko online dengan shopping cart

---

🛠 Tools yang Umum Digunakan

Tujuan	Tools
Kode editor	Visual Studio Code
Web server lokal	XAMPP / Laragon
Browser	Chrome, Firefox
Database	phpMyAdmin, MySQL
Desain responsif	Bootstrap, Tailwind (opsional)

---

📌 Hasil Pembelajaran

• Membuat website statis dan dinamis

• Mengelola database dan membangun aplikasi CRUD

• Mengamankan data dan membuat sistem login

• Membangun proyek akhir berbasis web