Handbook Praktikum Desain & Pemrograman Web

Repository ini merangkum evolusi pembelajaran bertahap dari mahasiswa selama semester 3, mulai dari penyusunan struktur dokumen web murni tanpa styling hingga perancangan aplikasi manajemen salon terdistribusi (SISALON) yang berjalan secara live pada infrastruktur cloud serverless.

Secara umum platform Vercel dioptimalkan untuk aplikasi frontend statis dan runtime Node.js. Agar modul backend PHP (Jobsheet 7, Jobsheet 8, dan SISALON) dapat berjalan tanpa server VPS/Apache konvensional, proyek ini mengadopsi pola arsitektur Unified Serverless Gateway.

Komponen Arsitektur:

• CDN Edge Static (JS 1 - 6): Menangani file statis HTML, CSS, dan JS dengan latensi ultra-rendah langsung dari cache global Vercel.
• Unified PHP Gateway (api/index.php): Bertindak sebagai router runtime yang menangkap permintaan dinamis PHP, melakukan manipulasi direktori kerja (chdir()), dan mengeksekusi script secara transparan.
• Cloud Database (Supabase PostgreSQL): Menggantikan PostgreSQL lokal (localhost:5432). Dihubungkan melalui connection pooler AWS Singapura dengan mode keamanan SSL wajib (sslmode=require).

// Potongan konfigurasi koneksi PDO ke Supabase dengan SSL (includes/koneksi.php)
$host = "aws-0-ap-southeast-1.pooler.supabase.com";
$port = "5432";
$db   = "postgres";
$user = "postgres.miqwkcgjrjvqivmrluve";
$pass = "Salbila2506";

$dsn = "pgsql:host=$host;port=$port;dbname=$db;sslmode=require";
$pdo = new PDO($dsn, $user, $pass, [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]);

Fokus utama Jobsheet 1 adalah membangun struktur dokumen berbasis standar W3C tanpa ketergantungan pada styling visual.

Konsep Kunci:

• Penggunaan elemen semantik: <header>, <nav>, <main>, <section>, <article>, dan <footer>.
• Penyusunan tabel tabular untuk daftar koleksi buku dan anggota dengan elemen <table>, <thead>, <tbody>, dan <th>.
• Pembuatan form input data dengan atribut wajib action, method="POST", serta relasi <label for="..."> terhadap input terkait demi aksesibilitas.

Jobsheet 2 memperkenalkan styling dasar untuk mempercantik struktur HTML tanpa mengubah hierarki dokumen.

Konsep Kunci:

• CSS Box Model: Pemahaman perbedaan antara content, padding (jarak dalam), border (garis tepi), dan margin (jarak luar elemen).
• Pengaturan tipografi modern menggunakan font sistem sans-serif dan kontras warna yang nyaman dibaca.
• Penataan form dengan styling border focus dan hover state pada tombol navigasi.

Mengubah penataan layout tradisional (seperti float dan inline-block) ke standar CSS modern satu dimensi (Flexbox) dan dua dimensi (CSS Grid).

Analisis Kode Kunci:

/* Pengaturan summary-list dengan Flexbox fleksibel */
.summary-list {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.summary-card {
    flex: 1 1 250px; /* grow, shrink, basis */
    background: #ffffff;
    border-radius: 8px;
    padding: 1.25rem;
}

Membangun ulang antarmuka SIMPUS-Mini menggunakan Bootstrap 5 melalui CDN untuk membandingkan efisiensi antara CSS manual murni vs framework berbasis komponen siap pakai.

Keunggulan Implementasi:

• Penggunaan 12-Column Grid System (container, row, col-md-4) yang otomatis berubah saat dibuka di layar smartphone.
• Komponen bawaan: navbar navbar-expand-lg, card, serta utilitas spacing (mb-3, p-4, d-flex).

Menjembatani fase perancangan ide antarmuka ke kode fungsional dengan dokumen wireframe terstruktur.

• Penyusunan hirarki informasi (Visual Hierarchy): elemen yang paling penting memiliki ukuran font, kontras, dan posisi paling dominan.
• Penerapan Media Queries (@media (max-width: 768px)) untuk mengubah layout multi-kolom desktop menjadi kolom tunggal pada perangkat mobile.

Menghidupkan antarmuka web menggunakan JavaScript murni (Vanilla JS) tanpa library eksternal.

Fitur & Kodingan Kunci:

• Mobile Navigation Toggle: Menangkap event click pada tombol hamburger menu untuk menampilkan/menyembunyikan navigasi.
• Pencarian Real-Time (Live Search): Membaca input ketikan user via event input lalu menyembunyikan baris tabel yang tidak cocok secara dinamis.
• Validasi Form Sisi Klien: Mencegah input kosong atau format data yang tidak valid sebelum form dikirimkan.

// Contoh logika pencarian dinamis pada tabel
const searchInput = document.getElementById('search-input');
if (searchInput) {
    searchInput.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        const rows = document.querySelectorAll('tbody tr');
        rows.forEach(row => {
            const text = row.innerText.toLowerCase();
            row.style.display = text.includes(query) ? '' : 'none';
        });
    });
}

Membahas pemisahan data dengan template presentasi melalui format data objek dan JSON. Mempersiapkan mahasiswa sebelum beralih ke dynamic backend di Jobsheet 7.

Langkah awal memasuki ranah backend. Pada modul ini mahasiswa membangun aplikasi dinamis berbasis PHP Native tanpa database, di mana state aplikasi disimpan dalam memori sesi server.

Konsep Kunci:

• Templating Modular: Memecah file menjadi header.php, footer.php, dan memanggilnya dengan include atau require.
• Pengelolaan State dengan $_SESSION: Menyimpan data buku dan anggota dalam array asosiatif di sesi pengguna (session_start()).
• Form Processing: Menerima data melalui superglobal $_POST dan melakukan redirect via header HTTP Location.

Tahap krusial: Mengganti penyimpanan sementara ($_SESSION) yang hilang saat browser ditutup menjadi penyimpanan persisten di sistem database PostgreSQL.

Perubahan Utama dari JS 7 ke JS 8:

Jobsheet 9 melanjutkan data SISALON dari Jobsheet New. Modul layanan, pelanggan, dan karyawan memakai database PostgreSQL yang sama sehingga data awal dan perubahan tetap tersimpan.

Fitur & Kodingan Kunci:

• Create, Read, Update: Form tambah, tabel daftar, dan halaman edit memakai prepared statements PDO.
• Delete melalui POST: Tombol hapus adalah form POST dengan dialog konfirmasi pada event submit; handler menolak metode selain POST.
• Pencarian server-side: Parameter q memfilter nama dengan ILIKE dan query terparameterisasi.
• Pagination: Daftar dibatasi 5 baris per halaman dengan LIMIT dan OFFSET; nilai pencarian dipertahankan saat berpindah halaman.
• Deploy Vercel: Route Jobsheet9 diteruskan ke PHP gateway dan koneksi menggunakan konfigurasi SISALON yang sama.

Jobsheet New adalah fondasi aplikasi SiSalon yang dilanjutkan pada Jobsheet 9. Modul ini memperkenalkan pengelolaan beberapa entitas dengan PHP dan PostgreSQL.

Fitur & Struktur Entitas:

• Entitas Layanan: Mengelola treatment (nama, kategori rambut/kuku/perawatan, tarif harga dengan constraint CHECK (harga >= 0), durasi menit).
• Entitas Pelanggan: Data klien setia (nama, nomor anggota unik PLGxxx, alamat, telepon).
• Entitas Karyawan: Data staf kapster dan beautician (nama, nomor identitas KRYxxx, jabatan, kontak).
• Operasi CRUD Lengkap: Create, Read, Update, Delete di semua modul dengan konfirmasi hapus interaktif.
• Flash Messages: Notifikasi feedback sukses/gagal operasi menggunakan session flash.
• Peran dalam urutan jobsheet: Struktur tabel dan data awal di sini menjadi landasan CRUD di Jobsheet 9, lalu autentikasi di Jobsheet 10 dan pengamanan form di Jobsheet 11.

Jobsheet 10 melanjutkan aplikasi SISALON dari Jobsheet 9 dengan autentikasi petugas. Beranda dan halaman daftar data tetap dapat diakses publik, sedangkan operasi perubahan data membutuhkan login.

Fitur & Kodingan Kunci:

• Registrasi: Username harus unik; password disimpan sebagai hash menggunakan password_hash(), bukan teks biasa.
• Login: Kredensial diverifikasi dengan password_verify(). Setelah berhasil, ID, nama, dan role petugas disimpan di session.
• Logout: Mengosongkan data session dan mengakhirinya dengan session_destroy().
• Guard autentikasi: includes/auth.php memulai session bila diperlukan dan mengalihkan tamu ke Login sebelum halaman terlindungi menghasilkan output.
• Halaman terlindungi: Form tambah/edit, handler proses, dan hapus untuk layanan, pelanggan, dan karyawan. Beranda serta halaman daftar tetap publik.
• Skema database: Jalankan sql/01_sisalon.sql untuk tabel SISALON, lalu sql/02_users.sql untuk tabel akun petugas pada database PostgreSQL yang sama.
• Role: Role petugas disimpan pada akun dan session, tetapi pembatasan akses berdasarkan role belum diterapkan.

Jobsheet 11 memperkuat aplikasi SISALON dari Jobsheet 10. Tujuannya adalah mencegah eksekusi skrip dari data pengguna, memastikan permintaan perubahan berasal dari form aplikasi, dan memperbarui identitas session setelah login.

Perubahan dari Jobsheet 10

• Helper output: includes/helpers.php menyediakan e() untuk mengubah nilai menjadi teks HTML aman dengan htmlspecialchars(). Gunakan saat mencetak data database, input pencarian, nilai $_GET, dan nama petugas.
• Perlindungan XSS: Semua data dinamis yang dimasukkan ke halaman di-escape di titik keluaran; validasi input saja tidak menggantikan escaping.
• Token CSRF: includes/csrf.php menyediakan csrf_token(), csrf_field(), dan csrf_verify(). Token sesi dikirim sebagai input tersembunyi di setiap form POST.
• Verifikasi perubahan: Handler tambah, edit, hapus, login, dan registrasi memeriksa metode HTTP serta token CSRF sebelum menjalankan perubahan database.
• Urutan guard: Halaman operasi yang membutuhkan autentikasi memuat includes/auth.php lebih dulu, kemudian memverifikasi token. Pengunjung tanpa login tetap diarahkan ke halaman login.
• Session fixation: Setelah kredensial login berhasil diverifikasi, session_regenerate_id(true) mengganti ID session lama sebelum data pengguna disimpan.
• SQL Injection: Query tetap menggunakan prepared statements PDO dan parameter binding, sama seperti modul sebelumnya.

Struktur berkas keamanan

Cara menguji keamanan

1. Uji XSS: Masukkan judul atau nama seperti <script>alert(1)</script>. Daftar harus menampilkan karakter sebagai teks, bukan menjalankan JavaScript.
2. Uji CSRF: Login, kirim form perubahan data tanpa field csrf_token, dan pastikan server menolak permintaan dengan HTTP 403.
3. Uji urutan guard: Kirim permintaan ke handler yang dilindungi saat belum login. Aplikasi harus mengarahkan ke login sebelum pemeriksaan CSRF.
4. Uji session: Login dengan akun valid dan pastikan aplikasi meregenerasi ID session; logout harus mengakhiri session.
5. Uji SQL: Cari atau kirim teks khusus SQL; masukan harus diperlakukan sebagai nilai parameter dan tidak mengubah struktur query.

Konfigurasi dan privasi kredensial

• Ekstensi PHP pdo_pgsql harus aktif untuk koneksi PostgreSQL.
• Konfigurasi lokal dapat disimpan di Jobsheet11/includes/.env; file tersebut diabaikan Git dan tidak boleh dipublikasikan.
• Untuk deployment, atur variabel SUPABASE_DB_HOST, SUPABASE_DB_PORT, SUPABASE_DB_NAME, SUPABASE_DB_USER, dan SUPABASE_DB_PASSWORD pada pengaturan Environment Variables Vercel. Jangan masukkan password ke source code atau handbook.
• Gunakan parameter koneksi Session Pooler persis seperti yang diberikan dashboard Supabase. Jaringan lokal yang hanya memiliki IPv6 dapat membutuhkan jaringan IPv4 untuk Session Pooler.
• Pastikan tabel SISALON dan users sudah dibuat dengan skrip di direktori Jobsheet11/sql/.

Checklist rinci tersedia pada dokumen audit Jobsheet 11.

Jobsheet 12 melanjutkan aplikasi SISALON dari Jobsheet 11 dengan mengintegrasikan data pelanggan, layanan, dan karyawan ke dalam satu transaksi layanan. Karena SISALON tidak mengelola stok buku, alur peminjaman dan pengembalian pada jobsheet referensi disesuaikan menjadi memulai dan menyelesaikan layanan.

Fitur & Kodingan Kunci:

• Relasi transaksi: Tabel transaksi_layanan menghubungkan pelanggan, layanan, dan karyawan menggunakan foreign key.
• Harga dan durasi historis: harga_saat_transaksi dan durasi_saat_transaksi menyimpan snapshot agar transaksi lama tidak ikut berubah ketika data layanan diperbarui.
• Transaksi baru: Form memilih pelanggan, layanan, dan karyawan. Proses penyimpanan memeriksa data dalam transaksi database dan mengunci baris pilihan dengan SELECT ... FOR UPDATE.
• Penyelesaian layanan: Daftar layanan berlangsung hanya menampilkan status berlangsung. Handler mengunci transaksi dan mengubah status serta waktu selesai secara atomik untuk mencegah penyelesaian ganda.
• Riwayat per pelanggan: JOIN transaksi dengan layanan dan karyawan menampilkan waktu, harga, durasi, dan status historis.
• Integrasi antarmuka: Menu transaksi hanya tampil setelah petugas login, dan kartu beranda menghitung layanan berstatus berlangsung.
• Skema database: Jalankan Jobsheet12/sql/03_transaksi_layanan.sql sekali pada database SISALON yang sama sebelum menggunakan fitur transaksi.
• Deployment: Jobsheet 12 dapat dibuka dari portal Vercel melalui route /Jobsheet12/.

Source code tersedia pada aplikasi Jobsheet 12 dan panduan penggunaan ada di dokumentasi Jobsheet 12.

Jobsheet 13 adalah snapshot akhir SISALON setelah integrasi transaksi layanan. Aplikasi menggabungkan data layanan, pelanggan, karyawan, akun petugas, transaksi aktif, dan riwayat transaksi dengan deployment PHP serverless di Vercel serta PostgreSQL Supabase.

Stack dan alur data

• Frontend: HTML, CSS, dan JavaScript untuk tampilan serta interaksi aplikasi.
• Backend: PHP native dengan PDO dan ekstensi pdo_pgsql.
• Database: PostgreSQL Supabase menggunakan koneksi SSL. Konfigurasi production diberikan melalui Vercel Environment Variables, bukan disimpan di repository.
• Entitas: layanan, pelanggan, karyawan, users, dan transaksi_layanan. Transaksi menyimpan snapshot harga/durasi, status, serta waktu mulai dan selesai.
• Akses: Tamu dapat melihat beranda dan daftar data; perubahan data serta transaksi membutuhkan login petugas.

Deployment dan verifikasi

1. Siapkan skema database dengan menjalankan skrip SQL dalam urutan yang didokumentasikan. Jika tabel sudah tersedia di Supabase, jangan jalankan ulang seed data yang tidak diperlukan.
2. Atur variabel SUPABASE_DB_HOST, SUPABASE_DB_PORT, SUPABASE_DB_NAME, SUPABASE_DB_USER, dan SUPABASE_DB_PASSWORD pada environment Vercel. Jangan commit berkas .env.
3. Deploy dari root repository portal dan buka aplikasi melalui route /Jobsheet13/.
4. Uji login, operasi data, pembuatan transaksi, penyelesaian layanan, serta riwayat setelah deployment.

Buka aplikasi Jobsheet 13, panduan deployment, atau manual pengguna. Dokumen ringkasan snapshot tersedia di Jobsheet 13.

Berikut adalah 10 pembahasan konsep teknis penting seputar implementasi kode pada proyek ini. Klik pada setiap pertanyaan untuk membuka pembahasan lengkap:

// Contoh aman di proses_tambah.php
$stmt = $pdo->prepare("INSERT INTO layanan (nama_layanan, kategori, harga, durasi) VALUES (:nama, :kategori, :harga, :durasi)");
$stmt->execute([
    ':nama'     => $nama,
    ':kategori' => $kategori,
    ':harga'    => $harga,
    ':durasi'   => $durasi
]);

harga INTEGER NOT NULL CHECK (harga >= 0),
durasi INTEGER NOT NULL CHECK (durasi > 0)