Fundamental Web Development
Pengenalan HTML, CSS, JavaScript, konsep client-server, frontend vs backend, dan REST API.
Version Control & Kolaborasi
Dasar Git, GitHub, workflow branching, dan kerja tim dalam project.
Membangun Aplikasi CRUD
Studi kasus CRUD sederhana untuk mengelola data di Laravel.
Pengembangan UI Modern
Penerapan komponen UI dengan shadcn/ui, React Hook Form, Zod, toast notification, dan datatable.
Fullstack CRUD Produk
CRUD lengkap produk dari React ke Laravel dengan validasi dan notifikasi real-time.
Integrasi Pembayaran Digital
Setup pembayaran Xendit: eWallet, QRIS, Virtual Account, dan webhook notifikasi.
Keamanan Aplikasi Fullstack
Validasi data (frontend & backend), CSRF protection, error handling, dan fallback UI.
Penggunaan Tools Developer
Instalasi Visual Studio Code, extension penting, terminal dasar, dan navigasi proyek.
Belajar Backend dengan Laravel
Membuat routing, controller, model, migration, validasi, hingga middleware tanpa starter kit.
Integrasi Frontend React + Backend Laravel
Setup Laravel Breeze + React, Vite, TailwindCSS, dan pengaturan routing halaman.
Sistem Autentikasi dan Proteksi Akses
Implementasi login, register, token session, proteksi route, dan redirect user.
Fitur Checkout dan Pembuatan Invoice
Sistem checkout produk, generate invoice, format harga & tanggal lokal Indonesia.
Manajemen Transaksi
Dashboard transaksi pengguna/admin, filter pencarian, dan update status pembayaran.
Deploy Project ke Hosting
Migrasi ke hosting online, setting domain, database, dan konfigurasi SSL.
Tersedia
Pendaftaran
1 Mei 2025 - 13 Mei 2025
Start
16 Mei 2025
Week 1 : Pengantar Web & Tools yang akan digunakan + Laravel Dasar (Blade)
📆 Day 1 – Pengantar Web & Tools
- Apa itu Web Development? Frontend vs Backend
- Peran HTML, CSS, JS dalam web
- Instalasi tools:
- VS Code & extensions (Prettier, Live Server, GitLens, REST Client/Postman)
- PHP minimal v.8.2 (XAMPP atau Laragon), Composer, Node.js, Git, MySQL
📆 Day 2 - Laravel Dasar (Blade) + GitHub
- Instalasi Laravel + penjelasan struktur folder
- Konsep MVC (Model-View-Controller)
- Routing dasar (GET) + Controller
- View dengan Blade Template
- Model & Migration sederhana
- Menampilkan data dari database ke tampilan Blade
- Pengenalan Git dan GitHub:
- Inisialisasi repo, git add/commit/push
- Buat repo GitHub, push project
- Kolaborasi dasar (clone, pull, branch)
Week 2 : CRUD Laravel + Validasi + Relasi
📆 Day 1 – Membuat Blog
- Membuat Model, Migration, Controller & Route
- Menambahkan Mass Assignment dan Accessor di Model
- Read dan Create blog menggunakan form (Blade)
- Validasi input (menggunakan Form Request atau langsung di Controller)
- Menampilkan notifikasi error dan success di tampilan Blade
📆 Day 2 – Lanjutan CRUD
- Update dan Delete data
- Validasi input (menggunakan Form Request atau langsung di Controller)
- Menampilkan notifikasi error dan success di tampilan Blade
Week 3 : Integrasi Laravel + React Starter Kit + UI Dasar
📆 Day 1 – Membuat E-commerce
- Pengenalan Laravel dengan React Starter Kit
- Instalasi React Starter Kit
- Struktur folder Laravel & React
- Setup routing & layout dasar
- Penggunaan komponen dasar (button, input, card, dll)
- Desain dashboard User
📆 Day 2 - Lanjutan Pembuatan E-commerce
- Membuat halaman admin
- Membuat migration produk
- Membuat tampilan tabel
- Menyesuaikan endpoint backend Laravel
- Form validation dengan React Hook Form + Zod
- Protected Routes (hanya login user bisa akses dashboard)
Week 4 : Pembuatan Dashboard Admin + CRUD Produk
📆 Day 1 - Membuat Dashboard Admin
- Membuat UI dashboard admin (layout, sidebar, datatable)
- Tambah Produk dengan modal
- Menampilkan data produk dari backend
- Validasi input (Form Request di Laravel + Zod di React)
- Handling error dan success feedback di UI
📆 Day 2 - CRUD pada Admin
- Form Edit dan Hapus
- Notifikasi toast jika sukses/gagal
- Upload gambar produk (opsional, pakai file input + storage Laravel)
Week 5 : Pembuatan Checkout, Invoice & Pembayaran
📆 Day 1 - Pembuatan Checkout, Invoice & Pembayaran
- Membuat halaman checkout dari produk
- Membuat migration untuk invoice dan transaction
- Simpan transaksi dan generate invoice (dengan nomor unik)
- Relasi antar tabel: users, products, transactions
- Format mata uang (Rp) dan tanggal lokal
📆 Day 2 - Lanjutan Pembuatan Checkout, Invoice & Pembayaran
- Pengenalan Xendit + setup API key
- Membuat request pembayaran (eWallet/VA/QRIS)
- Menangkap webhook dari Xendit
- Update status invoice otomatis (paid/pending)
Week 6 : Manajemen Transaksi & Riwayat Pembayaran
📆 Day 1 - Pembuatan Manajemen Transaksi & Riwayat Pembayaran
- Halaman “Transaksi Saya” (user)
- Halaman “Semua Transaksi” (admin)
- Filter transaksi (tanggal, status, user)
📆 Day 2 - Lanjutan Pembuatan Manajemen Transaksi & Riwayat Pembayaran
- Export transaksi ke Excel/PDF (opsional)
- Tambahkan fitur pencarian
- Implementasi status transaksi (badge: success, pending, failed)
Week 7 : Keamanan, Validasi, & Deployment
📆 Day 1 - Keamanan & Validasi
- Validasi form backend (Laravel FormRequest) & frontend (Zod)
- Proteksi route (middleware auth, admin)
- Error boundary + fallback UI di React
📆 Day 2 - Deployment
- Deploy ke hosting gratis (Railway, Render, Vercel via SSR)
- Setup database MySQL cloud (PlanetScale, Supabase, dsb)
- Migrasi database ke production
- Setup domain + SSL (opsional)
Week 8 : Final Project
📆 Day 1 - Planning Final Project
- Kick-off final project (briefing + pembagian tugas tim 2-3 orang)
- Studi kasus: membuat sistem mirip Mayar (invoice + pembayaran)
- Project plan (webinar, bootcamp, kelas online, product digital)
Week 9 : Presentasi Final Project
📆 Day 1 - Finalisasi Final Project
- Finalisasi project
- Presentasi project
- Code review, dokumentasi & publish ke GitHub
