Selamat Datang di Praktikum Desain & Pemrograman Web

Jobsheet 13

SISALON - Snapshot Deployment & Dokumentasi

Snapshot akhir SISALON dengan pengelolaan data salon, autentikasi petugas, transaksi layanan, panduan deployment Supabase/Vercel, dan manual pengguna.

PHP PDO Supabase PostgreSQL Vercel

Buka Jobsheet 13 → Dokumentasi

Jobsheet 12

SISALON - Integrasi Transaksi Layanan

Mengintegrasikan data pelanggan, layanan, dan karyawan dalam transaksi layanan, termasuk penyelesaian layanan dan riwayat transaksi per pelanggan.

PHP PDO Supabase PostgreSQL Database Transaction

Buka Jobsheet 12 →

Jobsheet 11

Keamanan Web Dasar

Melindungi aplikasi SISALON dengan output escaping untuk mencegah XSS, token CSRF di setiap form, dan regenerasi session setelah login.

Buka Jobsheet 11 →

Jobsheet 10

SISALON - Autentikasi Petugas

Pengembangan Jobsheet 9 dengan register, login, logout, dan perlindungan session untuk fitur tambah, edit, serta hapus data.

PHP PDO Supabase PostgreSQL Session Auth

Buka Jobsheet 10 →

Jobsheet 9

SISALON - CRUD Lengkap

Pengembangan data SISALON dari Jobsheet New dengan fitur tambah, tampil, ubah, hapus aman, pencarian server-side, dan pagination untuk layanan, pelanggan, serta karyawan.

PHP PDO Supabase PostgreSQL CRUD

Buka Jobsheet 9 →

Jobsheet New

SISALON - Salon Management System

Sistem informasi salon kecantikan modern dengan pengelolaan multi-entitas (Layanan, Pelanggan, Karyawan). Menggunakan koneksi cloud Supabase PostgreSQL dan arsitektur serverless Vercel.

PHP PDO Supabase Cloud PostgreSQL Vercel PHP

Buka SiSalon Web →

JOBSHEET 8

SIMPUS-Mini: PostgreSQL Database

Migrasi penyimpanan data dari state sementara (session) ke database relasional PostgreSQL menggunakan ekstensi PHP Data Objects (PDO) untuk modul Buku dan Anggota.

PHP Native PostgreSQL PDO Prepared CSS Custom

Buka Jobsheet 8 →

JOBSHEET 7

PHP Sisi Server & Session State

Pengenalan pemrograman backend PHP murni, pemisahan komponen modular (header, footer), form handling, dan pengelolaan data sementara berbasis $_SESSION.

PHP 8 $_SESSION Modular Template

Buka Jobsheet 7 →

JOBSHEET 6

Integrasi Data & Komponen Web

Penyempurnaan arsitektur halaman depan dengan modularitas data JSON, perbaikan antarmuka interaktif, dan pemisahan logika tampilan dari data.

HTML5 Modern CSS JSON Data

Buka Jobsheet 6 → Handbook lengkap

JOBSHEET 5

Interaktivitas DOM & Form Validation

Penerapan JavaScript modern untuk manipulasi Document Object Model (DOM), penanganan event tombol, pencarian dinamis, dan validasi form sebelum submit.

JavaScript ES6 DOM Manipulation Client Validation

Buka Jobsheet 5 → Handbook lengkap

JOBSHEET 4

Wireframing & Desain Responsif

Penerapan prinsip wireframing untuk merancang hierarki informasi, layout responsif multi-device, serta navigasi yang ramah pengguna.

Wireframe Responsive Design Media Queries

Buka Jobsheet 4 → Handbook lengkap

JS 3 BOOTSTRAP Bootstrap 5

Implementasi Framework Bootstrap 5

Transformasi antarmuka SIMPUS-Mini menggunakan Bootstrap 5: Responsive Grid System, Komponen Card, Navbar responsif, dan utilitas tata letak modern.

Bootstrap 5 Component Based Responsive Grid

Buka JS 3 Bootstrap →

JOBSHEET 3

Layouting CSS Flexbox & Grid

Teknik tata letak web modern menggunakan CSS Flexbox dan CSS Grid tanpa framework. Penataan kartu buku, statistik ringkasan, dan navbar responsif.

CSS Flexbox CSS Grid Semantics

Buka Jobsheet 3 → Handbook lengkap

JOBSHEET 2

Dasar Styling & Box Model CSS

Pemberian gaya visual pada dokumen web: implementasi CSS Box Model (margin, border, padding, content), typography, styling tabel, dan form input.

CSS3 Box Model Color & Fonts

Buka Jobsheet 2 → Handbook lengkap

JOBSHEET 1

Struktur Fondasi HTML Semantik

Pembangunan fondasi halaman web menggunakan elemen HTML semantik murni (<header>, <nav>, <main>, <table>, <form>) untuk SIMPUS-Mini.

HTML5 Semantic Tags Web Accessibility

Buka Jobsheet 1 → Handbook lengkap

PROTOTIPE

SIMPUS-Mini Standalone Prototype

Prototipe terintegrasi Sistem Informasi Perpustakaan Mini berbasis frontend statis untuk simulasi alur penambahan dan tampilan daftar koleksi.

HTML5 CSS Custom Prototype UI

Buka Prototipe →