Universitas ASA Indonesia

Program Studi: Teknologi Informasi

Mata Kuliah: Pengembangan Aplikasi Web Lanjut

SKS: 3 (2 teori, 1 praktikum)

Dosen Pengampu: Istiqomah Sumadikarta, S.T., M.Kom.

Beranda Mundur Maju

Pertemuan 14: Presentasi Final Project

Tentang Capstone Project
Panduan Capstone Project
Proposal Capstone Project
Laporan Capstone Project

Mengapa Matkul Ini Menggunakan Capstone Project?

Mata kuliah Pengembangan Aplikasi Web Lanjutan (React.js & Laravel) ideal menggunakan capstone project sebagai evaluasi autentik berbasis produk nyata.

1) Aplikasi nyata lebih penting daripada teori Praktis

Level lanjutan menekankan end-to-end development (frontend + backend) dibanding latihan terpisah.
Capstone menghasilkan produk nyata alih-alih potongan kode.

2) Mengintegrasikan banyak kompetensi Integratif

React.js: SPA, state management, UI interaktif.
Laravel: REST/GraphQL API, database, autentikasi.
Integrasi: komunikasi API, security, deployment.

3) Relevansi dengan dunia kerja Industri

Meniru workflow profesional: kolaborasi tim, Git, issue tracker, code review.
Menunjukkan kemampuan membangun solusi yang dapat digunakan.

4) Selaras dengan Outcome-Based Education (OBE) OBE

Mengukur CPL/CPMK: perancangan arsitektur, implementasi API, kualitas UI/UX.
Menjadi alat ukur autentik ketercapaian kompetensi.

5) Mendorong kreativitas & portofolio Kreatif

Mengembangkan ide (e-commerce, SI kampus, booking, e-learning, dsb.).
Produk akhir dapat menjadi portofolio profesional.

Panduan Resmi Capstone Project

Mata Kuliah Pengembangan Aplikasi Web Lanjutan – React.js (Frontend) & Laravel (Backend)

Tujuan Dokumen. Memberikan arahan menyeluruh terkait ruang lingkup, output, penilaian, aturan, dan timeline pelaksanaan capstone project agar mahasiswa bekerja terarah dan adil.

1. Tujuan & Keterkaitan OBE Outcome-Based

Capstone project dirancang untuk mengintegrasikan kompetensi frontend (React.js) dan backend (Laravel) dalam konteks aplikasi web modern, menyelaraskan Capaian Pembelajaran Mata Kuliah (CPMK) dan kebutuhan industri.

Mampu merancang arsitektur aplikasi web end-to-end.
Mampu mengimplementasikan API aman, terukur, dan terdokumentasi.
Mampu membangun antarmuka modern, responsif, dan beraksesibilitas baik.
Mampu menerapkan praktik software engineering (Git, testing, CI/CD, dokumentasi).

2. Ruang Lingkup & Minimum Feature Set Scope

Mahasiswa memilih topik (mis. e-commerce, sistem informasi kampus, reservasi, e-learning, dsb.) dengan cakupan minimal:

Autentikasi & Otorisasi (login/registrasi, role-based access).
CRUD inti pada minimal 2 entitas utama.
API (REST atau GraphQL) yang konsisten dan tervalidasi.
UI responsif dan alur pengguna yang jelas.
Persistensi database & relasi yang benar.
Deployment (opsional jika lab tidak mewajibkan, namun direkomendasikan).

Catatan: Gunakan stack yang ditetapkan: React (frontend) dan Laravel (backend).

3. Deliverables (Output Wajib) Output

A. Artefak Teknis

Repo Frontend (React) & Backend (Laravel) terpisah (publik/Private + akses dosen).
README lengkap: deskripsi, arsitektur singkat, cara setup, akun demo.
Dokumentasi API (OpenAPI/Swagger/Insomnia export).
ERD/diagram skema database (PNG/SVG/PDF).
Seeder & contoh data untuk uji coba.
Pengujian minimal: unit/feature test (backend) atau testing komponen (frontend).

B. Artefak Presentasi

Demo Video 7–10 menit (alur utama + fitur unggulan).
Laporan Ringkas 5–8 halaman (PDF): latar belakang, tujuan, arsitektur, hasil, pembahasan.
Slide Presentasi (PDF/PPTX) untuk sidang kelas.
URL Deployment (jika ada): domain/frontend & endpoint backend.

4. Timeline & Milestone Mingguan

Minggu	Aktivitas & Target	Keluaran
10	Pemilihan topik, studi singkat kebutuhan, definisi scope & user story.	Dokumen project brief, backlog awal.
11	Perancangan arsitektur, ERD, rancangan API, wireframe UI.	ERD, daftar endpoint, wireframe.
12	Implementasi struktur project, autentikasi, entitas inti (CRUD 1).	Repo berjalan, auth berfungsi.
13	Implementasi CRUD 2, integrasi frontend–backend, validasi & error handling.	Fitur inti terhubung API.
14	Hardening: keamanan dasar, seeder, pengujian, perbaikan UI/UX.	Test minimal & seeder tersedia.
15	Deployment (opsional), dokumentasi API & README, perekaman demo video.	URL/Preview & dokumentasi lengkap.
16	Presentasi/Sidang, pengumpulan final artefak.	Slide, laporan, link repos & video.

5. Ketentuan Tim & Peran Kolaborasi

Format: Kelompok 2–4 mahasiswa (atau sesuai instruksi dosen).
Pembagian peran disarankan: Lead, Frontend, Backend, QA/Docs (boleh rangkap).
Wajib membuat log kontribusi individu (commit history + ringkasan mingguan).
Pergantian anggota hanya dengan persetujuan dosen pengampu.

6. Persyaratan Teknologi Stack

Frontend: React 18+ (Vite/CRA), state management (Context/Redux/Zustand), routing, form handling.
Backend: Laravel 10+ (Sanctum/JWT untuk auth), Resource/Policy, Validation, Migration & Seeder.
Database: MySQL/MariaDB atau PostgreSQL.
Dokumentasi API: OpenAPI/Swagger/Insomnia/ Postman Collection.
Linting & Format: ESLint + Prettier (FE), Laravel Pint/PHPCS (BE).
Deployment (opsional): Frontend (Vercel/Netlify), Backend (VPS/Render), DB (managed/local).

7. Kualitas Kode & Workflow Git Engineering

Gunakan Git branching (mis. main, dev, feature/*), PR & code review.
Pesan commit deskriptif dalam Bahasa Indonesia/Inggris yang konsisten.
Struktur folder rapi, separation of concerns, komponen reusable.
Tambahkan unit/feature tests minimum & error handling yang jelas.
Aktifkan env sample (.env.example) & instruksi setup.

8. UI/UX & Aksesibilitas Desain

Responsif (mobile–desktop), navigasi jelas, konsistensi komponen.
Form dengan validasi & pesan kesalahan yang membantu.
Dasar aksesibilitas: label form, kontras memadai, fokus terlihat, alt text.
Dokumentasikan akun demo (role & kredensial) di README.

9. Keamanan, Privasi & Etika Data OWASP

Validasi input di server; hindari mass assignment; gunakan Policy/Guard.
Hash kata sandi (bcrypt), simpan rahasia di .env (jangan di-commit).
Sanitasi output; tangani CORS, rate limiting (jika publik).
Gunakan seed data fiktif; hindari data pribadi nyata tanpa izin.

10. Rubrik Penilaian Evaluasi

Aspek	Deskripsi Singkat	Bobot
Fungsionalitas	Kelengkapan fitur, reliabilitas, integrasi frontend–backend.	30%
Kualitas Kode	Struktur, praktik baik, testing, dokumentasi teknis.	20%
UI/UX	Desain, responsivitas, aksesibilitas dasar, konsistensi.	15%
Dokumentasi & Presentasi	README, API docs, ERD, laporan, kejelasan demo.	20%
Inovasi/Kompleksitas	Fitur tambahan bermakna, solusi kreatif, kinerja.	15%

Skor akhir dapat disesuaikan dengan kebijakan program studi.

11. Mekanisme Pengumpulan Submission

Kumpulkan tautan repositori FE & BE (GitHub/GitLab) + akses dosen.
Unggah laporan PDF, slide, ERD, dan tautan video (YouTube/Drive).
(Opsional) Sertakan URL deployment dan akun uji.
Gunakan format nama berkas: Capstone_NamaTim_JudulProyek.pdf.

12. Kebijakan Keterlambatan & Orisinalitas Etika

Keterlambatan: -10% per hari kalender (maks. 3 hari), setelah itu tidak diterima kecuali dengan izin.
Orisinalitas: Wajib orisinal. Diperbolehkan memakai library/templat dengan atribusi & modifikasi bermakna.
Plagiarisme: Menyalin kode/artefak signifikan tanpa atribusi akan mendapat skor 0 dan proses etik.

13. Komunikasi, Konsultasi & Dukungan Support

Gunakan kanal resmi kelas (LMS/Group) untuk pengumuman & tanya jawab.
Jadwal konsultasi ditetapkan mingguan (by appointment).
Laporkan kendala kritis (blocking issue) maksimal 24 jam setelah ditemukan.

14. FAQ Pertanyaan Umum

Bolehkah memakai UI library (MUI/Tailwind/AntD)?

Boleh. Pastikan konsistensi desain & aksesibilitas dasar terpenuhi.

Haruskah dideploy?

Direkomendasikan namun opsional jika laboratorium tidak mewajibkan. Siapkan panduan local setup yang lancar.

Bolehkah topik di luar daftar contoh?

Boleh, selama scope realistis dan memenuhi minimum feature set.

Bagaimana pembagian nilai individu dalam tim?

Nilai tim menjadi dasar, lalu disesuaikan kontribusi individu (log commit, tugas khusus, presentasi).

15. Checklist Sebelum Submit Final Check

✔️ Fitur inti berjalan & teruji skenario utama.
✔️ README jelas + .env.example tersedia.
✔️ API docs & ERD tercantum.
✔️ Video demo 7–10 menit.
✔️ Laporan PDF 5–8 halaman & slide presentasi.
✔️ Link repos FE/BE dan (jika ada) URL deployment.

Proposal Capstone Project

Mata Kuliah: Pengembangan Aplikasi Web Lanjutan (React.js & Laravel)

1. Identitas Kelompok

Nama	NIM	Tugas
Mahasiswa 1	123456	Frontend (React.js)
Mahasiswa 2	123457	Backend (Laravel)
Mahasiswa 3	123458	Database & Dokumentasi

2. Judul Proyek

Contoh: Sistem Reservasi Ruangan Kampus Berbasis Web

3. Latar Belakang

Jelaskan masalah atau kebutuhan yang mendorong ide proyek ini. Misalnya, banyak mahasiswa kesulitan memesan ruang kelas/ruang rapat karena sistem masih manual.

4. Tujuan

Mengembangkan aplikasi web berbasis React.js & Laravel.
Menyediakan sistem reservasi ruang yang praktis dan transparan.
Meningkatkan pengalaman pengguna melalui UI responsif.

5. Ruang Lingkup & Fitur

Autentikasi pengguna (login/registrasi).
CRUD data (buat, baca, ubah, hapus) untuk entitas utama.
Integrasi API Laravel dengan React.js.
Laporan/pencarian data.

6. Arsitektur Sistem

Gambarkan arsitektur (React.js di frontend → API Laravel → Database MySQL). Sertakan diagram sederhana bila perlu.

7. Rencana Kerja & Timeline

Minggu	Kegiatan
10	Penyusunan proposal & desain sistem
11	Pembuatan database & API backend Laravel
12	Pengembangan frontend React.js
13	Integrasi frontend-backend
14	Testing & debugging
15	Penyusunan dokumentasi
16	Presentasi & demo aplikasi

8. Output yang Dihasilkan

Aplikasi web React.js & Laravel yang berfungsi penuh.
Dokumentasi teknis (ERD, API, manual pengguna).
Presentasi/demo proyek.

9. Referensi

Daftar sumber pustaka, tutorial, atau artikel yang menjadi acuan pengembangan.

LAPORAN CAPSTONE PROJECT

Pengembangan Aplikasi Web Lanjutan – React.js (Frontend) & Laravel (Backend)

Judul Proyek:

Kelompok: | Kelas:

Anggota:
1) Nama (NIM) – Peran
2) Nama (NIM) – Peran
3) Nama (NIM) – Peran

Program Studi / Fakultas / Universitas • Tahun: 2025

BAB I – Pendahuluan Latar Belakang

1.1 Latar Belakang

1.2 Rumusan Masalah

1.3 Tujuan

1.4 Manfaat

BAB II – Tinjauan Pustaka Landasan Teori

2.1 Dasar Teori

2.2 Penelitian/Proyek Terkait

2.3 Kerangka Teori / Model Konseptual

BAB III – Metodologi Proses

3.1 Metode Pengembangan

3.2 Kebutuhan Sistem

3.2.1 Kebutuhan Fungsional

Kode	Deskripsi	Prioritas
F-01	Pengguna dapat registrasi & login.	Must
F-02	CRUD entitas utama.	Must

3.2.2 Kebutuhan Non-Fungsional

Keamanan (auth, otorisasi, validasi, sanitasi).
Performa (respon API < 500ms pada data uji).
UI/UX (responsif, aksesibilitas dasar).

3.3 Desain Sistem

Arsitektur: React (FE) → API Laravel (BE) → DB (MySQL/PostgreSQL).
Use Case Diagram:
ERD/Skema DB:
Daftar Endpoint API:

Method	Endpoint	Request	Response	Auth
POST	/api/login	{ email, password }	{ token }	—
GET	/api/items	—	Array<Item>	Bearer

3.4 Tools

Frontend: React 18+, Router, State mgmt (Context/Redux/Zustand).
Backend: Laravel 10+, Auth (Sanctum/JWT), Validation, Resource.
Database: MySQL/MariaDB atau PostgreSQL.
Manajemen versi: Git (GitHub/GitLab), isu & PR.
Dokumentasi API: Swagger/OpenAPI/Insomnia/Postman.

BAB IV – Implementasi dan Hasil Realisasi

4.1 Implementasi Frontend (React)

Struktur proyek, komponen utama, routing.
Manajemen state, form, validasi.
Cuplikan kode penting (secukupnya).

4.2 Implementasi Backend (Laravel)

Struktur controller, model, resource, policy.
Autentikasi (Sanctum/JWT), validasi, middleware.
Seeder & contoh data.

4.3 Integrasi & Deployment

Integrasi FE–BE (alur request/response, CORS).
Konfigurasi environment (.env, .env.example).
Deployment (opsional): FE (Vercel/Netlify), BE (VPS/Render), DB (managed/local).

4.4 Pengujian

Kode Uji	Skenario	Langkah	Hasil Diharapkan	Hasil Aktual	Status
TC-01	Login valid	Masukkan kredensial benar	Masuk dashboard
TC-02	CRUD entitas	Tambah–Edit–Hapus	Data sesuai

4.5 Hasil Akhir

Cuplikan tampilan antarmuka (sisipkan gambar).
URL demo/deployment (jika ada).
Repository FE & BE.

BAB V – Penutup Kesimpulan & Saran

5.1 Kesimpulan

5.2 Saran

Lampiran

README & Panduan Instalasi (ringkas).
Dokumentasi API (tautan file/Swagger).
ERD/Diagram (gambar).
Link Repository Frontend & Backend.
Akun Demo: role, email, kata sandi dummy.

Catatan: Hindari mencantumkan rahasia di laporan (token, kunci API, kredensial nyata). Gunakan data fiktif dan file .env yang tidak di-commit.

Beranda Mundur Maju