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

TujuanTools
Kode editorVisual Studio Code
Web server lokalXAMPP / Laragon
BrowserChrome, Firefox
DatabasephpMyAdmin, MySQL
Desain responsifBootstrap, 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

Komentar

Posting Komentar

Postingan populer dari blog ini

Materi Pemrograman Perangkat Bergerak

-
Gambar
  💻 Materi Pemrograman Perangkat Bergerak SMK (PPB) 🧩 Kelas 11 – Dasar Pemrograman Mobile 📱 1. Pengenalan Perangkat Bergerak Jenis perangkat bergerak (smartphone, tablet, wearable) Sistem operasi mobile: Android, iOS Perbedaan pemrograman desktop dan mobile 🛠 2. Lingkungan Pengembangan Aplikasi Mobile Android Studio (untuk Android) Flutter SDK atau Java/Kotlin Emulator dan pengujian perangkat 💡 3. Dasar Pemrograman Mobile Struktur project Android Activity, layout XML Lifecycle aplikasi UI sederhana (TextView, Button, ImageView) 🎮 4. Interaksi Pengguna (Event Handling) OnClickListener Input pengguna (EditText) Toast dan AlertDialog 🧾 5. Intent dan Navigasi Intent eksplisit dan implisit Navigasi antar Activity Mengirim data antar halaman 🗂 6. Layout dan Komponen UI LinearLayout, RelativeLayout, ConstraintLayout ScrollView, ListView, RecyclerView (pengenalan) Adapter dasar 🧩 Kelas 12 – Lanjutan dan ...
Baca selengkapnya

Materi Matematika

-
Gambar
  Materi Matematika SMK Kelas 10, 11, dan 12 🧮 Kelas 10 SMK A. Bilangan dan Operasinya Bilangan bulat, pecahan, desimal Operasi hitung campuran Pangkat dan akar B. Aljabar Dasar Bentuk aljabar (penjumlahan, pengurangan, perkalian, pembagian) Faktorisasi dan bentuk akar Persamaan dan pertidaksamaan linear satu variabel Sistem persamaan linear dua dan tiga variabel C. Fungsi dan Relasi Pengertian relasi dan fungsi Grafik fungsi linear dan kuadrat D. Statistika Data tunggal dan berkelompok Ukuran pemusatan: mean, median, modus E. Peluang Dasar Konsep peluang Peluang kejadian sederhana 🧮 Kelas 11 SMK A. Barisan dan Deret Barisan dan deret aritmatika Barisan dan deret geometri B. Persamaan Kuadrat Akar-akar persamaan kuadrat Rumus kuadrat dan diskriminan C. Fungsi Kuadrat Bentuk grafik parabola Titik puncak dan sumbu simetri D. Matriks dan Operasinya Penjumlahan dan pengurangan matriks Perkalia...
Baca selengkapnya

Materi Pendidikan Pancasila Dan Kewarganegaraan

-
Gambar
  📘 Materi PPKn SMK Kelas X (10) 1. Nilai-Nilai Pancasila dalam Kehidupan Sehari-hari Pancasila sebagai dasar negara dan pandangan hidup bangsa Implementasi sila-sila Pancasila dalam lingkungan keluarga, sekolah, dan masyarakat 2. Norma dan Hukum dalam Kehidupan Bermasyarakat Pengertian norma (agama, hukum, kesopanan, kesusilaan) Pentingnya menaati norma hukum 3. Peran Warga Negara dalam Negara Kesatuan Republik Indonesia (NKRI) Hak dan kewajiban warga negara Upaya bela negara 4. Demokrasi dan Budaya Politik di Indonesia Prinsip-prinsip demokrasi Pancasila Peran pemuda dalam demokrasi 📗 Materi PPKn SMK Kelas XI (11) 1. Konstitusi dan Undang-Undang Dasar Negara Republik Indonesia Tahun 1945 Sejarah UUD 1945 Amandemen UUD 1945 Lembaga negara menurut UUD 1945 2. Wawasan Nusantara dan Ketahanan Nasional Konsep dan tujuan wawasan nusantara Aspek geopolitik dan geostrategi Indonesia 3. Hak Asasi Manusia (HAM) Pengertian HAM...
Baca selengkapnya