Rabu, 10 Juni 2026

Dokumen Pendukung Software Engineering

https://drive.google.com/file/d/1NFG-muFlwC9DMvd5POlbdVFabANKbsQw/view?usp=drive_link

https://drive.google.com/file/d/1RhQu6yhUecODUakBgklea6qEyGqF2gVH/view?usp=drive_link

https://drive.google.com/file/d/15qD6A7hCbdwOcRKt2Vl8JEQ71RmU_FCE/view?usp=drive_link

https://drive.google.com/file/d/1uTpp_b0Txs2L8hJuv-RpRncK_dOdq-wN/view?usp=drive_link

https://drive.google.com/file/d/1w064zztP-2qHCs0E02HEgee9KYXL3O3F/view?usp=drive_link

https://drive.google.com/file/d/1eT2SVFpvllWBXBi-YD-8harEpmYIZy_B/view?usp=drive_link

Arsitektur Design dan Struktur File

Product Documentation

Technical Documentation

User Documentation

API Documentation

Operational Documentation

Project Documentation

Buatkan slide menyerupai PPT dengan ukuran 16:9. Pada pojok kiri ditulisi Slide 1. Tambahkan foto, gambar, ilustrasi, icon, tabel, atau grafik yang releva. Outline Slide 1 – Cover PRODUCT DOCUMENTATION Dokumentasi Produk yang Jelas, Produk yang Sukses Studi Kasus: ShopEasy E-Commerce Platform Ilustrasi: Laptop menampilkan dokumentasi produk Smartphone aplikasi ShopEasy Icon dokumen, user guide, dan knowledge base

Buatkan slide menyerupai PPT dengan ukuran 16:9. Pada pojok kiri ditulisi Slide 1. Tambahkan foto, gambar, ilustrasi, icon, tabel, atau grafik yang relevan. Outline Slide 2 – Apa Itu Product Documentation?

Definisi

Product Documentation adalah kumpulan dokumen yang menjelaskan:

Gambaran produk

Fitur-fitur produk

Cara penggunaan

Cara implementasi

Panduan teknis

Referensi pengguna

Tujuan

Membantu pengguna dan tim memahami produk secara menyeluruh.

Ilustrasi:

Product → Documentation → User → Success

Buatkan slide menyerupai PPT dengan ukuran 16:9. Pada pojok kiri ditulisi Slide 3. Tambahkan foto, gambar, ilustrasi, icon, tabel, atau grafik yang relevan.Outline Slide 3 – Mengapa Product Documentation Penting?

Manfaat

Untuk Pengguna

✓ Memahami fitur lebih cepat

✓ Mengurangi kesalahan penggunaan

✓ Meningkatkan kepuasan pengguna

Untuk Tim

✓ Mengurangi pertanyaan berulang

✓ Mempercepat onboarding

✓ Menjadi sumber pengetahuan utama

Icon:

User

Support

Team

Knowledge

Pengolahan Data Penelitian dengan AI

https://www.youtube.com/watch?v=NVtnm_rrPkI

https://www.youtube.com/watch?v=RnBj-eHkG7E

https://www.youtube.com/watch?v=UmSEkbnMjXM

https://www.youtube.com/watch?v=VbnUjZJPmKY

https://www.youtube.com/watch?v=kfBh2MlY7Lw

https://www.youtube.com/watch?v=4oBGztZA9y8

https://www.youtube.com/watch?v=tptYrsgQesk

https://www.youtube.com/watch?v=CUl6v4KEUCM

https://www.youtube.com/@Reezky11/videos

Selasa, 09 Juni 2026

Jet Pack Compose 1

https://www.youtube.com/watch?v=EuZGaxymME0&list=PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J&index=1

PRD - Membuat PRD ke UI

https://www.youtube.com/watch?v=Ba2IknIS3wA

https://binus.ac.id/bekasi/2025/07/cara-menentukan-product-requirement-document-prd/

https://www.productplan.com/glossary/product-requirements-document

https://kuliahppb.blogspot.com/2026/06/mini-project-untuk-evaluasi-akhir.html

https://drive.google.com/file/d/13p1XTV7fpDuvUfe89g6GvzY2pe3f3jou/view?usp=drive_link

Product Requirement

Tahapan mengubah PRD (Product Requirements Document) menjadi UI (User Interface) dimulai dari membedah fungsionalitas, membuat alur kerja pengguna, merancang kerangka dasar, hingga memvisualisasikannya menjadi desain siap pakai. PRD berfungsi sebagai cetak biru untuk menyelaraskan visi bisnis, pengembangan, dan desain. [1, 2, 3, 4, 5]

Berikut adalah tahapan konkret untuk menerjemahkan PRD menjadi desain UI:

1. Analisis dan Pahami PRD

Pelajari dokumen PRD secara menyeluruh. Fokus pada: [1]

Tujuan Produk (Goals): Masalah apa yang ingin diselesaikan?
Target Pengguna (User Persona): Untuk siapa produk ini dibuat?
Fitur Utama & Batasan (Scope): Fitur apa saja yang wajib ada (MVP) dan batasan teknisnya. [1, 2, 3]

2. Buat User Flow (Alur Pengguna)

Petakan langkah-langkah yang harus dilalui pengguna untuk menyelesaikan tugas tertentu (misal: proses checkout). Gunakan diagram kotak atau panah agar terlihat jelas perpindahan antar layarnya.

3. Buat Wireframe (Kerangka Dasar)

Buat sketsa kasar atau Low-Fidelity Wireframe menggunakan alat bantu seperti Figma atau Balsamiq. Fokuskan pada penempatan elemen (teks, tombol, gambar) berdasarkan skala prioritas, bukan warna atau estetika. [1]

4. Desain Mockup (Tampilan Visual)

Ubah wireframe menjadi High-Fidelity Mockup. Terapkan brand guideline (warna, font, ikon) yang sesuai. Pada tahap ini, pastikan Anda merujuk kembali ke PRD agar tidak ada fitur yang terlewat. [1]

5. Buat Interaksi dan Prototipe (Prototype)

Hubungkan setiap layar dalam desain menggunakan fitur Prototyping di Figma agar UI dapat diklik dan disimulasikan seperti aplikasi sungguhan. Ini membantu memvalidasi alur kerja sebelum masuk ke tahap coding.

6. Uji Coba dan Iterasi

Lakukan evaluasi desain dengan tim internal atau berikan prototipe kepada pengguna (User Testing). Kumpulkan masukan, perbaiki titik kesulitan (pain points), dan sesuaikan desain jika ditemukan celah dari persyaratan PRD.

Senin, 08 Juni 2026

Notebook LM - Slide

Buatkan slide 1-12 style education warna biru. Gunakan kalimat dalam lampiran. Sertakan ilustrasi, gambar, dan foto sebagai pendukung supaya slide menarik.

Desain Visual yang Disarankan (16:9)

Tema: Education Technology
Warna utama: Biru (#1E88E5) dan Hijau (#43A047)
Icon: Database, PDF, Student, QR Code, School
Font: Poppins / Montserrat
Total: 23 Slide
Cocok untuk PowerPoint, Canva, dan Google Slides.

Slide 1 — Cover

MEMBUAT REPORT PDF MENGGUNAKAN PHP & MYSQL

Studi Kasus:

Pencetakan Bukti Pendaftaran Siswa Baru

Mata Kuliah: Web Programming
Teknologi: PHP, MySQL, FPDF, mPDF

Slide 2 — Learning Outcomes

Capaian Pembelajaran

Setelah mempelajari materi ini mahasiswa mampu:

✅ Memahami konsep report PDF pada aplikasi web

✅ Mengintegrasikan PHP dan MySQL

✅ Menggunakan library FPDF

✅ Mengambil data dari database

✅ Menghasilkan dokumen PDF dinamis

✅ Membuat bukti pendaftaran siswa dalam format PDF

Slide 3 — Mengapa Report PDF Penting?

Kebutuhan Dunia Kerja

Banyak aplikasi memerlukan fitur cetak dokumen:

📄 Invoice

📄 Laporan Penjualan

📄 Sertifikat

📄 Kartu Peserta

📄 Raport

📄 Bukti Pendaftaran

Keuntungan PDF

Portable
Mudah dicetak
Tidak mudah diubah
Dapat dikirim melalui email
Standar dokumen digital

Slide 4 — Arsitektur Sistem Report PDF


User
  │
  ▼
Form Pendaftaran
  │
  ▼
PHP Processing
  │
  ▼
MySQL Database
  │
  ▼
Generate PDF
(FPDF/mPDF)
  │
  ▼
Download / Print

Alur

Input data
Simpan ke database
Ambil data
Generate PDF
Cetak atau download

Slide 5 — Library PDF pada PHP

Library	Kelebihan
FPDF	Mudah dipelajari
TCPDF	Sangat lengkap
DomPDF	HTML ke PDF
mPDF	HTML + CSS Modern

Rekomendasi

👨‍🎓 Mahasiswa → FPDF

🏢 Industri → mPDF

Slide 6 — Studi Kasus

Sistem Pendaftaran Siswa Baru

Fitur

Input Biodata
Upload Foto
Simpan Database
Cetak Bukti Pendaftaran PDF

Output

📄 Bukti Pendaftaran

📄 Nomor Registrasi

📄 QR Code

📄 Data Siswa

Slide 7 — Desain Database

Tabel siswa


CREATE TABLE siswa (
 id INT AUTO_INCREMENT PRIMARY KEY,
 nama VARCHAR(100),
 email VARCHAR(100),
 telepon VARCHAR(20),
 alamat TEXT,
 tanggal_lahir DATE,
 jenis_kelamin VARCHAR(20),
 foto VARCHAR(100),
 tanggal_daftar TIMESTAMP
);

Data yang Disimpan

Nama
Email
Telepon
Alamat
Tanggal Lahir
Jenis Kelamin
Foto

Slide 8 — Form Input Data


<form action="simpan.php" method="POST">

<input type="text" name="nama">

<input type="email" name="email">

<input type="text" name="telepon">

<textarea name="alamat"></textarea>

<button type="submit">
Daftar
</button>

</form>

Fungsi

Mengumpulkan data calon siswa.

Slide 9 — Menyimpan Data ke MySQL


$conn = mysqli_connect(
"localhost",
"root",
"",
"db_sekolah"
);

$sql = "INSERT INTO siswa
(nama,email,telepon,alamat)
VALUES
('$nama','$email',
 '$telepon','$alamat')";

Hasil

Data tersimpan ke database dan siap dicetak.

Slide 10 — Mengenal FPDF

Apa itu FPDF?

Library PHP untuk membuat file PDF secara dinamis.

Kelebihan

✅ Gratis

✅ Ringan

✅ Mudah dipelajari

✅ Tidak memerlukan ekstensi tambahan

Instalasi

Download:


www.fpdf.org

Slide 11 — Membuat Objek PDF


require('fpdf/fpdf.php');

$pdf = new FPDF();

$pdf->AddPage();

$pdf->SetFont(
'Arial',
'B',
16
);

Penjelasan

FPDF() → Membuat dokumen
AddPage() → Menambah halaman
SetFont() → Mengatur font

Slide 12 — Menampilkan Judul PDF


$pdf->Cell(
190,
10,
'BUKTI PENDAFTARAN SISWA',
0,
1,
'C'
);

Output


BUKTI PENDAFTARAN SISWA

Slide 13 — Mengambil Data dari Database


$id = $_GET['id'];

$data = mysqli_query(
$conn,
"SELECT * FROM siswa
WHERE id='$id'"
);

$row =
mysqli_fetch_assoc($data);

Fungsi

Mengambil data siswa yang akan dicetak.

Slide 14 — Menampilkan Data ke PDF


$pdf->Cell(
50,
10,
'Nama Lengkap'
);

$pdf->Cell(
100,
10,
$row['nama']
);

Output


Nama Lengkap : Ahmad Fauzi

Slide 15 — Menambahkan Logo Sekolah


$pdf->Image(
'logo.png',
10,
10,
20
);

Hasil

🏫 Logo sekolah tampil pada dokumen PDF.

Slide 16 — Menampilkan Foto Siswa


$pdf->Image(
'uploads/'.$row['foto'],
150,
40,
30
);

Hasil

👦 Foto siswa muncul pada bukti pendaftaran.

Slide 17 — Nomor Registrasi Otomatis


$nomor =
"REG-".
date("Y").
"-".
str_pad(
$row['id'],
4,
"0",
STR_PAD_LEFT
);

Contoh


REG-2026-0015

Slide 18 — Menambahkan QR Code

Library

phpqrcode


QRcode::png(
$nomor,
"qrcode.png"
);


$pdf->Image(
"qrcode.png",
150,
100,
30
);

Fungsi

Validasi dan verifikasi dokumen.

Slide 19 — Hasil Akhir PDF

Komponen PDF

✅ Logo Sekolah

✅ Nomor Registrasi

✅ Biodata Siswa

✅ Foto

✅ QR Code

✅ Tanggal Pendaftaran

✅ Tanda Tangan

Status


TERDAFTAR

Slide 20 — Studi Kasus Praktikum

Mini Project

Buat Sistem Pendaftaran Siswa Baru.

Input

Nama
Email
No HP
Alamat
Tanggal Lahir
Jenis Kelamin
Foto

Output

PDF Bukti Pendaftaran
QR Code
Nomor Registrasi

Slide 21 — FPDF vs mPDF

FPDF	mPDF
Mudah	Lebih Modern
Manual Layout	HTML + CSS
Cepat	Bootstrap Support
Cocok Belajar	Cocok Industri

Kesimpulan

FPDF → Pembelajaran

mPDF → Produksi

Slide 22 — Best Practice Industri

Struktur Project


project/
│
├── assets/
├── uploads/
├── vendor/
├── config/
├── views/
├── report/
│     └── pdf.php
└── index.php

Tips

Gunakan MVC
Gunakan Composer
Gunakan Prepared Statement
Pisahkan Template PDF

Slide 23 — Kesimpulan

Ringkasan

✅ PHP dapat menghasilkan PDF secara dinamis

✅ Data PDF berasal dari MySQL

✅ FPDF cocok untuk pembelajaran

✅ mPDF cocok untuk aplikasi modern

✅ Bukti pendaftaran siswa dapat dibuat secara otomatis dan profesional