📚 Membuat Aplikasi Jadwal Mengajar dengan Flutter + REST API
Di era digital saat ini, kebutuhan untuk mengelola jadwal sekolah atau perkuliahan semakin penting. Guru, murid, maupun admin sekolah sering kali kewalahan jika jadwal hanya ditulis di papan tulis atau buku catatan. Oleh karena itu, saya membuat sebuah aplikasi Flutter sederhana bernama “Jadwal Mengajar” yang terhubung dengan REST API (MockAPI) agar data bisa diakses secara online, fleksibel, dan bisa di-update kapan saja.
---
✨ Fitur Utama Aplikasi
1. Login Multi Role
Admin → bisa menambah, mengubah, dan menghapus jadwal.
Guru → hanya melihat dan logout/login.
Murid → langsung masuk tanpa login untuk melihat jadwal.
2. Pengelolaan Jadwal per Hari
Senin – Jumat dengan list pelajaran yang bisa di-expand.
Menampilkan jam, ruangan, pakaian, dan catatan tambahan.
3. Integrasi API (CRUD)
C (Create) → Tambah jadwal baru.
R (Read) → Menampilkan jadwal per hari dari MockAPI.
U (Update) → Edit jadwal yang sudah ada.
D (Delete) → Hapus jadwal tertentu.
4. UI Modern dengan Material Design
Menggunakan ikon sesuai mata pelajaran (Matematika, Bahasa, Sejarah, dll).
Warna khusus tiap mapel agar lebih mudah dikenali.
---
📂 Struktur Project
Aplikasi ini hanya menggunakan 2 file utama:
lib/main.dart → kode utama aplikasi.
pubspec.yaml → dependency dan konfigurasi Flutter.
---
📝 Kode Lengkap main.dart
// file: lib/main.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
// Entry point aplikasi
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Jadwal Mengajar',
theme: ThemeData(
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
),
home: const HomePage(userRole: 'murid'),
);
}
}
// ==== LOGIN PAGE ====
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final TextEditingController usernameController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
void login() {
String username = usernameController.text;
String password = passwordController.text;
if (username == "admin" && password == "admin123") {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const HomePage(userRole: 'admin')),
);
} else if (username == "guru" && password == "guru123") {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const HomePage(userRole: 'guru')),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Username atau password salah!")),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Login Jadwal Mengajar")),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 40),
const Icon(Icons.school, size: 80, color: Colors.blue),
const SizedBox(height: 20),
const Text(
"Login Admin/Guru",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
TextField(
controller: usernameController,
decoration: const InputDecoration(
labelText: "Username",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person),
),
),
const SizedBox(height: 16),
TextField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: login,
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, 50),
),
child: const Text("Login"),
),
const SizedBox(height: 20),
TextButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const HomePage(userRole: 'murid')),
);
},
child: const Text("Masuk sebagai Murid (Tanpa Login)"),
),
],
),
),
);
}
}
// ==== HOMEPAGE ====
class HomePage extends StatefulWidget {
final String userRole;
const HomePage({super.key, required this.userRole});
@override
State<HomePage> createState() => _HomePageState();
}
// ... [kode lanjutan sama seperti yang kamu tulis di atas]
// CRUD: fetchJadwal, createJadwal, updateJadwal, deleteJadwal
// UI: List jadwal per hari, tombol tambah/edit/delete untuk admin
// Ikon + warna otomatis sesuai mata pelajaran
> (Kode lengkap sudah kamu miliki di atas, jadi saya ringkas agar blog tidak terlalu panjang. Untuk publikasi, kamu bisa tempel full code-nya.)
---
⚙️ Konfigurasi pubspec.yaml
name: jadwal_mengajar
description: Aplikasi Jadwal Mengajar dengan Flutter
publish_to: "none"
version: 1.0.0+1
environment:
sdk: ">=2.18.0 <4.0.0"
dependencies:
flutter:
sdk: flutter
http: ^0.13.6
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
---
🚀 Cara Menjalankan Aplikasi
1. Buat project Flutter baru:
flutter create jadwal_mengajar
2. Salin kode main.dart ke folder lib/.
3. Ganti pubspec.yaml dengan kode di atas lalu jalankan:
flutter pub get
4. Jalankan aplikasi:
flutter run
---
🎯 Penutup
Dengan aplikasi Jadwal Mengajar ini, pengelolaan jadwal sekolah jadi lebih mudah dan efisien. Admin bisa menambah atau mengubah jadwal kapan saja, guru bisa melihat jadwal dengan jelas, dan murid bisa langsung mengakses tanpa ribet.
Kamu bisa mengembangkan aplikasi ini lebih lanjut, misalnya dengan menambahkan autentikasi Firebase, notifikasi pengingat pelajaran, atau fitur export ke PDF agar makin bermanfaat.🚀
Comments
Post a Comment