Integrasi Fundamental Web

Target Pertemuan

Di akhir kelas, mahasiswa mampu menghubungkan kebutuhan pengguna, proses bisnis, struktur data, dan komunikasi web dalam satu rancangan sistem yang konsisten.

Pertanyaan Pembuka

Tombol “Simpan” sudah diklik dan muncul tulisan “Berhasil”. Apakah itu membuktikan data sudah tersimpan?

Tuliskan jawaban di kertas. Sebutkan komponen yang perlu diperiksa serta bukti yang diperlukan. Bandingkan jawaban tersebut setelah menelusuri seluruh alur.

Rencana 200 menit

1. Menyatukan Pertemuan 1–6

Materi sebelumnya merupakan bagian dari satu sistem. Sekarang hubungkan bagian tersebut agar satu fitur dapat dijelaskan dari awal sampai akhir.

2. Siapa Mengerjakan Apa?

UI membantu pengguna mengisi data, tetapi backend tetap harus memeriksa data yang diterima. FK dapat menolak referensi yang tidak ada; kecukupan stok perlu aturan proses tersendiri.

3. Alur Utuh: Dari Klik sampai Hasil

1. Pengguna mengisi form pada browser.
2. Browser mengirim request ke alamat proses pada server.
3. Backend memeriksa bentuk input dan aturan bisnis.
4. Jika valid, backend menjalankan operasi database.
5. Database mengembalikan hasil atau galat kepada backend.
6. Backend menentukan response berdasarkan hasil proses.
7. Browser menerima response dan menampilkan hasil.

Satu klik dapat melibatkan beberapa tabel dan beberapa operasi CRUD.

4. Studi Kasus — Kasir Mencatat Penjualan

Gunakan konteks penjualan_db dari P6. Fitur yang ditelusuri adalah satu penjualan dengan satu produk, tanpa pembayaran. Sistem project mahasiswa tetap boleh berbeda.

Angka tersebut ditetapkan untuk simulasi ini. Jika memakai database P6, cek kondisi nyata dengan SELECT karena latihan sebelumnya dapat mengubah harga dan stok. Tidak perlu menghapus database.

Input → Process → Output

5. Hubungkan Aktivitas dengan Request–Response

Alamat berikut adalah rancangan endpoint, bukan file PHP yang sudah disediakan. Contoh memakai form HTML biasa dan response HTML.

POST /penjualan/simpan.php HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded

id_pelanggan=1&id_produk=1&jumlah=2

Nama input form menentukan nama data yang dikirim. Backend membaca ID pelanggan, ID produk, serta jumlah, lalu mencari data terkait berdasarkan ID tersebut.

HTTP/1.1 303 See Other
Location: /penjualan/detail.php?id=101

ID 101 hanya ilustrasi; implementasi mengambil ID dari baris yang berhasil dibuat. Browser kemudian meminta halaman detail melalui GET. Pola ini disebut Post/Redirect/Get.

6. Dari Flowchart ke Logika Backend

Gambar ulang alur berikut memakai simbol P3: terminator untuk mulai/selesai, input/output untuk data, persegi panjang untuk proses, belah ketupat untuk keputusan. Beri label Ya/Tidak pada cabang.

MULAI
TERIMA id_pelanggan, id_produk, jumlah dari POST
JIKA ID atau jumlah bukan bilangan bulat positif:
    KIRIM 400 + pesan input tidak valid; SELESAI

MULAI TRANSAKSI DATABASE
COBA:
    BACA pelanggan berdasarkan id_pelanggan
    BACA dan KUNCI baris produk berdasarkan id_produk
    JIKA pelanggan atau produk tidak ditemukan:
        ROLLBACK; KIRIM 400 + pesan referensi tidak valid; SELESAI
    JIKA stok produk < jumlah:
        ROLLBACK; KIRIM 409 + pesan stok tidak cukup; SELESAI

    subtotal = harga produk dari database * jumlah
    total = subtotal  // kasus satu produk
    INSERT penjualan (pelanggan, tanggal server, total)
    AMBIL id_penjualan baru
    INSERT detail_penjualan (id_penjualan, id_produk, jumlah, subtotal)
    UPDATE stok produk = stok lama - jumlah
    COMMIT
JIKA terjadi galat database sebelum COMMIT berhasil:
    ROLLBACK perubahan yang belum disahkan
    CATAT detail galat di server
    KIRIM 500 + pesan umum; SELESAI

KIRIM 303 menuju halaman detail dengan id_penjualan baru
BROWSER mengirim GET halaman detail
BACKEND membaca data; KIRIM 200 + HTML ringkasan
SELESAI

7. Cocokkan Proses dengan Data dan ERD

Struktur inti berikut mengikuti P6. Tabel pembayaran belum terlibat karena fitur yang dianalisis baru mencatat penjualan.

pelanggan (1) ───── (N) penjualan
penjualan (1) ───── (N) detail_penjualan
produk    (1) ───── (N) detail_penjualan

penjualan.id_pelanggan        → pelanggan.id_pelanggan
detail_penjualan.id_penjualan → penjualan.id_penjualan
detail_penjualan.id_produk    → produk.id_produk

penjualan dan produk berhubungan N:M
melalui tabel perantara detail_penjualan.

Label 1:N menunjukkan satu induk dapat terkait banyak anak. Pada proses ini setiap penjualan yang disahkan wajib mempunyai minimal satu detail. Backend menjaga aturan tersebut; FK saja tidak memastikan induk mempunyai anak.

8. CRUD Matrix untuk Satu Fitur

Matriks ini khusus aktivitas Simpan Penjualan, melengkapi matriks seluruh sistem pada P6.

Aktivitas Lihat Detail Penjualan setelah pengalihan mempunyai matriks tersendiri: R pada keempat tabel. Tentukan batas aktivitas dengan jelas.

9. Sistem Juga Harus Menjelaskan Kegagalan

Pesan di layar, status HTTP, dan keadaan database perlu diperiksa bersama.

10. Pola yang Sama pada Berbagai Usaha

Contoh entitas menyesuaikan batas fitur. Mahasiswa harus memperjelas apakah proses sudah mencakup pembayaran atau belum.

11. Praktik — Telusuri Satu Request di Kertas

Kerjakan berpasangan: satu mahasiswa menjadi pengguna/browser, satu menjadi backend/database. Pakai studi kasus bagian 4 dan tukar peran setelah satu skenario selesai.

1. Gambar UI: buat tiga input beserta nama datanya dan tombol Simpan.
2. Buat kartu request: tulis POST, alamat tujuan, serta id_pelanggan=1, id_produk=1, jumlah=2.
3. Jalankan logika manual: cek input, pelanggan/produk, stok, serta sumber harga.
4. Catat perubahan tabel: buat satu baris penjualan dan detail, lalu ubah stok dari 10 menjadi 8. ID baru cukup disimulasikan.
5. Buat kartu response: tulis 303 beserta alamat detail, lalu GET dan 200 berisi ringkasan Rp24.000.
6. Ulangi dari kondisi awal dengan jumlah 12. Tentukan titik penolakan dan buktikan tidak ada perubahan data.
7. Ubah kebutuhan: harga di database menjadi Rp13.000 sebelum request diproses. Tentukan sumber harga dan hitung total baru Rp26.000.

USE penjualan_db;

SELECT id_pelanggan, nama
FROM pelanggan
WHERE id_pelanggan = 1;

SELECT id_produk, nama_produk, harga, stok
FROM produk
WHERE id_produk = 1;

SELECT p.id_penjualan, pl.nama, p.total
FROM penjualan AS p
JOIN pelanggan AS pl ON pl.id_pelanggan = p.id_pelanggan
ORDER BY p.id_penjualan DESC
LIMIT 5;

Buka XAMPP, aktifkan Apache dan MySQL, lalu buka http://localhost/phpmyadmin dan tab SQL. Jika database P6 belum tersedia, praktik kertas tetap dapat diselesaikan tanpa membuat database baru.

12. Prediksi, Uji, dan Amati

Setiap baris dimulai dari stok 10 dan harga Rp12.000. Pengujian dapat berupa walkthrough kertas; tandai sebagai simulasi. Jika memakai aplikasi, lampirkan bukti aktual.

13. Mini Challenge — Perbaiki Rancangan

1. Flowchart menyebut pembayaran, tetapi ERD tidak menyediakan penyimpanan pembayaran. Apa yang perlu ditambahkan atau diperjelas pada batas fitur?
2. CRUD Matrix hanya mencantumkan C penjualan, padahal stok produk berkurang. Operasi apa yang hilang?
3. Form mengirim nama pelanggan, tetapi backend mengharapkan ID pelanggan. Bagaimana menyamakan data yang dikirim dan diproses?
4. UI menampilkan nama produk, sementara detail hanya menyimpan ID produk. Bagaimana mendapatkan nama itu?
5. Request sudah diperiksa backend, tetapi FK tetap menolak. Mengapa batasan database masih diperlukan?
6. Pengguna mengklik Simpan dua kali. Jelaskan risiko data ganda dan usulkan penanda request unik yang diperiksa server. Menonaktifkan tombol saja belum menjamin request tidak terkirim ulang.

Jawab dengan koreksi rancangan dan alasan; belum perlu menulis implementasi.

14. Project Semester — Blueprint Sistem V1

Blueprint Sistem V1 menggabungkan hasil P1–P6 beserta koreksi dari P7. Gunakan sistem pilihan yang sama dan tunjukkan hubungan antarbagian.

15. Template Project Book — Blueprint V1

Salin sebagai panduan, isi dengan sistem sendiri, dan gambar bagian visual secara manual. Hindari jawaban umum yang tidak menyebut proses serta data konkret.

IDENTITAS
Nama / NIM / kelas:
Nama sistem:
Versi: Blueprint V1

1. MASALAH DAN TUJUAN
Proses manual saat ini:
Masalah dan dampaknya:
Tujuan dan manfaat konkret:

2. AKTOR DAN BATAS SISTEM
Aktor → aktivitas utama:
Fitur yang dicakup / di luar cakupan:

3. PROSES BISNIS UTAMA
Nama proses:
Input → langkah proses → output:
Aturan bisnis:
Kondisi berhasil dan gagal:

4. FLOWCHART
[Gambar simbol, alur, cabang Ya/Tidak, alternatif/perulangan]

5. DATA
Entitas → atribut → tipe data → PK:

6. ERD
[Gambar entitas, PK, FK, relasi, kardinalitas]
Tabel perantara N:M (jika ada):
Alasan penempatan FK:
Kebijakan penghapusan induk dan dampaknya:

7. CRUD MATRIX
Entitas → C / R / U / D → alasan:
Data yang tidak boleh dihapus langsung dan alternatifnya:

8. REQUEST–RESPONSE (minimal 5 aktivitas)
Aktivitas → aktor → method → alamat tujuan → input
→ validasi/logika → tabel dan CRUD → status/isi response:

9. ARSITEKTUR DASAR
[Gambar Browser/UI ↔ Web Server/Backend ↔ Database]
Lokasi validasi, aturan, penyimpanan, dan tampilan:

10. TELUSUR SATU FITUR
UI → request → backend → aturan → database → response → UI:
Data sebelum → perubahan → data sesudah:

11. PENGUJIAN
Satu berhasil + minimal dua gagal:
Input → prediksi → hasil/bukti atau simulasi → analisis:
Jenis bukti: simulasi kertas / aplikasi aktual

12. EVALUASI
Mengapa sistem layak digunakan:
Satu risiko/keterbatasan dan penanganannya:
Temuan mini-defense dan revisi V1:

16. Tugas Project Book — Minggu 7

1. Gabungkan dan revisi P1–P6 menjadi Blueprint V1 sesuai bagian wajib.
2. Gambar ulang flowchart dan ERD. Samakan nama entitas, PK, FK, dan data pada proses.
3. Lengkapi CRUD Matrix seluruh entitas serta minimal lima aktivitas request–response.
4. Telusuri satu fitur dari UI sampai response, termasuk tabel dan kolom yang berubah.
5. Dokumentasikan satu berhasil dan minimal dua gagal, keadaan data sebelum/sesudah, serta jenis bukti.
6. Tulis satu risiko dan mitigasinya. Perbaiki rancangan berdasarkan mini-defense.
7. Siapkan Project Book untuk presentasi dan defense. Penyerahan mengikuti arahan dosen.

17. Mini-defense — Persiapan UTS

Latih penjelasan dengan sistem sendiri. Teman atau dosen memilih satu aktivitas dan menanyakan hubungan proses serta datanya.

18. Quis Pertemuan 7

1. Jelaskan komponen yang bekerja sejak klik Simpan sampai hasil ditampilkan.
2. Bedakan peran UI, backend, logika bisnis, dan database dalam aktivitas sistem Anda.
3. Mengapa backend menghitung ulang total walau form sudah menampilkannya?
4. Apakah satu POST selalu berarti satu INSERT? Beri contoh dari kasus penjualan.
5. Jumlah 12, stok 10: siapa menolak dan bagaimana keadaan data akhirnya?
6. Jelaskan fungsi transaksi database saat penjualan dan detail disimpan pada dua tabel.
7. Apa perbedaan status HTTP 400 dengan galat database 1452?
8. Beri satu contoh ketidaksesuaian flowchart, ERD, dan CRUD Matrix serta perbaikannya.
9. Jika response tidak diterima, apakah data pasti belum tersimpan? Jelaskan.
10. Sebutkan isi utama Blueprint V1 dan perannya dalam defense sistem.

Quis dan pengumpulan mengikuti arahan dosen. Jawaban harus dikaitkan dengan sistem dan dapat dipertanggungjawabkan.

19. Ringkasan

Sistem yang dapat dijelaskan mempunyai hubungan jelas antara kebutuhan, proses, data, dan hasil.

Blueprint V1 menyatukan hubungan tersebut. Simpan Project Book, diagram, CRUD Matrix, dan catatan pengujian untuk UTS pada Pertemuan 8.

← Review Pertemuan 6: CRUD & Operasi Data

Glosarium

Istilah bergaris putus-putus dapat diarahkan kursor atau difokuskan untuk menampilkan definisi.