HTML PHP RESTful API Flutter Laravel MySQL Git JSON
Tahun Ajaran 2025/2026 · Kelas XI RPL

Roadmap Web & Mobile

Developer — Kelas XI

Dari PHP dasar kelas X menuju aplikasi mobile yang terhubung API buatan sendiri.

PHP Dasar CI3 / Laravel REST API Flutter
0
Semester
0
Fase Belajar
0
Milestone
0
Pertemuan
Lihat Perjalananmu
Bekal dari Kelas X

Fondasi yang Sudah Kalian Punya

Semua yang dipelajari tahun lalu adalah fondasi, bukan sia-sia.

🌐

HTML Dasar

Struktur halaman web, tag semantik, form, link, gambar. Pondasi tampilan di browser.

HTML CSS Browser
🐘

PHP Dasar

Variabel, kondisi, perulangan, fungsi, koneksi MySQL. Logika di balik layar.

PHP MySQL XAMPP

Kalian sudah di titik start yang tepat. Sekarang waktunya naik level!

Semester 1

Web Development

Bangun aplikasi web nyata dari nol — CI3 atau langsung Laravel.

Fase 1 · 4–6 pertemuan

Fondasi MVC

📝 Kuis MVC

Review PHP OOP, MySQL relasi tabel, konsep arsitektur Model-View-Controller yang menjadi dasar semua framework modern.

PHP OOP MySQL MVC
Porsi dari total semester~25%
Fase 2 · 8–10 pertemuan

CI3 / Laravel + Project Kas

🏆 Aplikasi Kas

CRUD, Query Builder, login + session, validasi form, Bootstrap, laporan filter tanggal.

CI3 Laravel Bootstrap CRUD MySQL
A
Versi Ajar (Bersama)

Dikerjakan bersama di kelas. Fokus pada alur CRUD dan logika transaksi.

  • users + transaksi_kas (2 tabel)
  • Saldo sekarang & Dashboard
  • Laporan PDF cashflow + filter tanggal
★ Mandiri
B
Kas Versi Nyata
rekomendasi: Laravel
  • Tabel rekening multi-sumber (Kas, BRI, BCA)
  • Tabel kategori_transaksi (masuk/keluar)
  • Transfer antar rekening (transfer_group)
  • Running balance (saldo_setelah) per baris
  • Void/reversal — bukan delete!
  • Cashflow report per rekening & periode
Porsi dari total semester~45%
Fase 3 · 4–6 pertemuan + mandiri

CMS Bebas

🏆 Project CMS

Upload gambar, multi-level user, halaman publik + admin. Tugas akhir semester — minimal 3 tabel berelasi, tema bebas.

Upload File Multi-Role Admin Panel
Porsi dari total semester~30%
Semester 2

REST API & Flutter

Buka web kalian sebagai API — lalu buat aplikasi mobile-nya.

Fase 4 · 6–8 pertemuan

REST API dari Project Kas

🏆 Koleksi Postman

Konsep REST, JSON, endpoint CRUD + login token, testing dengan Postman. Kas web semester 1 dibuka sebagai API.

RESTful API JSON Postman HTTP Token Auth

// Endpoint yang kalian buat sendiri

GET/api/transaksi
POST/api/transaksi
POST/api/login
DELETE/api/transaksi/{id}
Porsi dari total semester~35%
Fase 5 · 6–8 pertemuan

Flutter Dasar

📱 App Statis

Dart, widget dasar, navigasi antar halaman, setState, async/await. Belajar berpikir mobile-first.

Flutter Dart Widget setState Mobile
Porsi dari total semester~35%
Fase 6 · 6–8 pertemuan

Integrasi Flutter + API

🏆 Kas Mobile

http package, parsing JSON, login token + shared_preferences, CRUD via API. Frontend mobile terhubung ke backend buatan sendiri.

http package JSON Token Auth Flutter Mobile
Porsi dari total semester~30%
Benang Merah

Satu Data, Dua Wajah

Project Kas adalah poros dari seluruh perjalanan. Dibangun semester 1, dibuka sebagai API, dikonsumsi Flutter.

Kas Web CI3 / Laravel Semester 1 buka API REST API JSON · Postman Semester 2 konsumsi Kas Mobile Flutter · Dart Semester 2 Aplikasi Web Jembatan Data Aplikasi Mobile
🌐

Web App

Dibangun dengan CI3 atau Laravel. Data tersimpan di MySQL server.

🔌

REST API

Web yang sama, dibuka pintunya lewat endpoint JSON. Testing pakai Postman.

📱

Mobile App

Flutter baca data lewat API. Satu backend, dua tampilan.

Penilaian

4 Milestone Besar

Setiap milestone = bukti nyata kalian bisa membuat sesuatu yang bekerja.

M1 Semester 1

Aplikasi Kas Web ✓

CRUD transaksi, login session, laporan PDF cashflow dengan filter periode.

M2 Semester 1

Project CMS ✓

Minimal 3 tabel berelasi, upload gambar, multi-level user, admin panel.

M3 Semester 2

API + Koleksi Postman ✓

Endpoint CRUD + login token terdokumentasi lengkap di Postman collection.

M4 Semester 2

Aplikasi Kas Mobile ✓

Flutter app yang login dan CRUD transaksi via API buatan sendiri. Project akhir tahun.

Komponen Nilai

70%
Praktik
20%
Tugas
10%
Presentasi
Ekosistem

Tools yang Akan Kalian Pakai

💻

VS Code

Editor kode

🦎

XAMPP

Server lokal

🔥

CI3

Framework MVC

🌿

Laravel

★ Mandiri

🎨

Bootstrap

CSS Framework

📮

Postman

Test API

📱

Flutter

Mobile SDK

🐙

GitHub

Version control

FAQ

Pertanyaan Umum

CI3 dipilih karena paling ringan dan mudah dipahami untuk pertama kali — konfigurasi minimal, fokus ke konsep MVC.

Namun, jika kalian mampu belajar mandiri, sangat disarankan langsung ke Laravel — konsepnya sama persis (MVC, routing, ORM), tapi Laravel adalah standar industri. Semua yang dipelajari di CI3 100% transferable, dan Laravel jauh lebih enak digunakan setelah paham dasarnya.

Tidak wajib — komputer lab sekolah sudah cukup untuk pembelajaran. Namun laptop sendiri sangat membantu untuk belajar di luar jam pelajaran. Untuk Flutter: minimal RAM 8GB, storage bebas ~10GB.

Dengan menguasai roadmap ini kalian bisa melamar sebagai Web Developer, Mobile Developer (Flutter), Backend Developer, atau Full-Stack Developer. Kuasai Laravel secara mandiri — kombinasi Laravel + Flutter adalah skill yang sangat dicari perusahaan lokal dan startup Indonesia.