Modul Pemrograman Web Lanjut

 📘 Modul Pemrograman Web Lanjut (14 Pertemuan)

Untuk: Mahasiswa Semester 4–6

Stack: PHP + MySQL

Proyek Akhir: Website E-Commerce Sederhana

---

🧩 Struktur Pertemuan

Pertemuan 1 – Pengantar Pemrograman Web Lanjut

🎯 Tujuan:

Mahasiswa memahami arsitektur web modern, peran frontend–backend, dan setup lingkungan kerja.

📚 Materi:

Arsitektur client-server

Review HTML5, CSS3, JavaScript dasar

Instalasi XAMPP, phpMyAdmin, dan VS Code

💻 Praktik:

Membuat folder project di htdocs

Menjalankan server lokal (localhost)

Uji file index.php sederhana

🧠 Tugas:

Tuliskan diagram arsitektur web (frontend–backend–database).

---

Pertemuan 2 – Dasar PHP Lanjutan

🎯 Tujuan:

Mahasiswa memahami konsep PHP lanjutan dan struktur aplikasi modular.

📚 Materi:

Variabel global ($_GET, $_POST, $_SESSION)

Include & require

Penanganan form

💻 Praktik:

Form input produk dan tampilkan hasilnya

Gunakan include("header.php") & footer.php

🧠 Tugas:

Buat form biodata dengan validasi sederhana.

---

Pertemuan 3 – Database MySQL dan Integrasi PHP

🎯 Tujuan:

Mahasiswa dapat menghubungkan PHP dengan MySQL dan menampilkan data.

📚 Materi:

Koneksi database (mysqli_connect)

Query SELECT, INSERT, UPDATE, DELETE

💻 Praktik:

Buat database db_toko

Buat tabel produk(id, nama, harga, stok)

Koneksi dan tampilkan data produk

🧠 Tugas:

Tambahkan kolom kategori dan tampilkan di tabel.

---

Pertemuan 4 – CRUD Produk

🎯 Tujuan:

Mahasiswa dapat membuat fitur CRUD data produk.

💻 Praktik:

Halaman tambah.php, edit.php, hapus.php

Form tambah produk

Tabel daftar produk

🧠 Tugas:

Lengkapi form edit produk.

---

Pertemuan 5 – Upload Gambar & Validasi

🎯 Tujuan:

Mahasiswa dapat mengunggah gambar produk ke server.

💻 Praktik:

Form upload gambar

Validasi ukuran & tipe file

Simpan path gambar di database

🧠 Tugas:

Tambahkan kolom “gambar” di tabel produk.

---

Pertemuan 6 – Session, Cookie & Login System

🎯 Tujuan:

Mahasiswa memahami autentikasi user.

💻 Praktik:

Buat tabel users

Form login & logout

Proteksi halaman admin

🧠 Tugas:

Tambahkan validasi username dan password hash (MD5/bcrypt).

---

Pertemuan 7 – Modul Admin Dashboard

🎯 Tujuan:

Mahasiswa membuat tampilan dashboard admin.

💻 Praktik:

Template HTML Bootstrap

Menu navigasi (Produk, Pesanan, Logout)

Tampilkan data produk dari database

🧠 Tugas:

Tambahkan jumlah produk & pesanan di dashboard.

---

Pertemuan 8 – AJAX & Interaksi Dinamis

🎯 Tujuan:

Mahasiswa menggunakan AJAX untuk interaksi data tanpa reload.

💻 Praktik:

AJAX untuk pencarian produk realtime

Tampilkan hasil pencarian di tabel

🧠 Tugas:

Tambahkan filter berdasarkan kategori.

---

Pertemuan 9 – Modul Keranjang Belanja

🎯 Tujuan:

Mahasiswa memahami sesi transaksi belanja.

💻 Praktik:

Gunakan $_SESSION untuk menyimpan keranjang

Fitur tambah & hapus dari keranjang

🧠 Tugas:

Tambahkan total harga otomatis.

---

Pertemuan 10 – Modul Checkout & Transaksi

🎯 Tujuan:

Mahasiswa memahami proses checkout dan simpan data transaksi.

💻 Praktik:

Form checkout (nama, alamat, metode bayar)

Simpan ke tabel transaksi dan detail_transaksi

🧠 Tugas:

Tambahkan status pesanan: pending, selesai.

---

Pertemuan 11 – Keamanan Aplikasi Web

🎯 Tujuan:

Mahasiswa memahami praktik keamanan dasar.

📚 Materi:

Sanitasi input

SQL Injection & XSS

Password hashing

🧠 Tugas:

Perkuat sistem login dengan password hash dan filter input.

---

Pertemuan 12 – Desain UI/UX & Responsif

🎯 Tujuan:

Mahasiswa memahami tampilan profesional.

💻 Praktik:

Gunakan Bootstrap 5

Responsif di HP & laptop

Gaya tombol dan navigasi

🧠 Tugas:

Perbaiki tampilan dashboard & halaman produk.

---

Pertemuan 13 – Integrasi & Uji Coba

🎯 Tujuan:

Mahasiswa menguji integrasi modul dari awal hingga checkout.

💻 Praktik:

Tes semua fitur: login, CRUD, keranjang, checkout

Debug error & validasi form

🧠 Tugas:

Laporkan bug & solusinya.

---

Pertemuan 14 – Presentasi & Evaluasi Proyek Akhir

🎯 Tujuan:

Mahasiswa mempresentasikan hasil proyek e-commerce sederhana.

📚 Output:

Folder project e-commerce

Laporan singkat (desain, database, fitur, hasil uji)

---

🏁 Proyek Akhir: Website E-Commerce Sederhana

Fitur Minimal:

Halaman utama menampilkan produk

Login admin

CRUD produk

Keranjang belanja

Checkout transaksi

Database: users, produk, keranjang, transaksi

---

Kalau Anda mau, saya bisa bantu lanjut ke tahap berikutnya: 1️⃣ Buatkan template folder + struktur file project e-commerce

2️⃣ Sertakan kode contoh CRUD + login + keranjang

3️⃣ Lengkap dengan database SQL siap import ke phpMyAdmin