Pengembangan Aplikasi Jadwal Pelajaran Berbasis CRUD dengan setState

Di era digital, pengelolaan jadwal pelajaran tidak lagi harus dilakukan secara manual. Dengan memanfaatkan teknologi seperti React, kita dapat membuat aplikasi sederhana yang mampu mengatur jadwal secara dinamis menggunakan konsep **CRUD (Create, Read, Update, Delete)** dan pengelolaan state melalui `setState`. ### Pendahuluan Aplikasi jadwal pelajaran bertujuan untuk membantu pengguna—baik siswa maupun guru—dalam mencatat dan mengelola kegiatan belajar. Dalam implementasinya, aplikasi ini memanfaatkan state untuk menyimpan data sementara dan memperbarui tampilan secara real-time. --- ### Perancangan Aplikasi Aplikasi ini terdiri dari beberapa komponen utama: 1. Form input jadwal 2. Daftar jadwal 3. Tombol aksi (edit dan hapus) State utama digunakan untuk menyimpan seluruh data jadwal. ```javascript id="d2g7x9" const [jadwal, setJadwal] = useState([]); ``` --- ### Implementasi Fitur CRUD #### 1. Menambahkan Data (Create) Saat pengguna mengisi form dan menekan tombol simpan, data baru akan ditambahkan ke state. ```javascript id="n82ksl" const handleTambah = (dataBaru) => { setJadwal(prev => [...prev, { id: Date.now(), ...dataBaru }]); }; ``` Pendekatan ini menggunakan spread operator untuk menjaga data lama tetap ada. --- #### 2. Menampilkan Data (Read) Data jadwal ditampilkan dalam bentuk list atau tabel. ```javascript id="lm1p0a" {jadwal.map(item => (

{item.hari} - {item.mapel}

{item.jam}

))} ``` Render akan otomatis diperbarui setiap kali state berubah. --- #### 3. Mengedit Data (Update) Untuk mengubah data, kita perlu mengidentifikasi item berdasarkan ID. ```javascript id="q7v3hn" const handleEdit = (id, dataUpdate) => { setJadwal(prev => prev.map(item => item.id === id ? { ...item, ...dataUpdate } : item ) ); }; ``` --- #### 4. Menghapus Data (Delete) Fitur hapus digunakan untuk menghilangkan jadwal yang tidak diperlukan. ```javascript id="8f2kdp" const handleHapus = (id) => { setJadwal(prev => prev.filter(item => item.id !== id)); }; ``` --- ### Penggunaan setState dalam Aplikasi `setState` (melalui `useState`) memainkan peran penting dalam: * Menyimpan data sementara * Mengontrol perubahan data * Memicu render ulang tampilan Dengan pendekatan ini, aplikasi menjadi responsif tanpa perlu reload halaman. --- ### Studi Kasus Sederhana Misalnya: * Siswa menambahkan jadwal “Fisika, Rabu, 10:00” * Data langsung muncul di layar * Siswa mengedit menjadi “Fisika, Rabu, 11:00” * Perubahan langsung terlihat tanpa refresh * Jadwal bisa dihapus kapan saja --- ### Kelebihan dan Kekurangan **Kelebihan:** * Mudah diimplementasikan * Cocok untuk pemula * Responsif (real-time update) **Kekurangan:** * Data hilang saat refresh (tanpa database) * Tidak cocok untuk aplikasi skala besar tanpa state management tambahan --- ### Pengembangan Lanjutan Untuk meningkatkan kualitas aplikasi, kamu bisa menambahkan: * Penyimpanan lokal (LocalStorage) * Integrasi API * Validasi form * UI framework seperti Bootstrap atau Tailwind * Penggunaan Context API atau Redux --- ### Penutup Aplikasi jadwal pelajaran berbasis CRUD dengan `setState` merupakan fondasi yang baik dalam memahami alur data dalam aplikasi modern. Dengan latihan ini, kamu tidak hanya belajar membuat fitur, tetapi juga memahami bagaimana data dikelola secara efisien di sisi frontend. --- Kalau kamu ingin, saya bisa bantu buatkan: * versi **full project siap jalan** * atau **penjelasan per langkah + UI form lengkap**

Jadwal Mata Pelajaran

Membuat Aplikasi Jadwal Pelajaran dengan Flutter Di era digital saat ini, mengatur jadwal pelajaran tidak harus lagi menggunakan buku tulis. Dengan bantuan teknologi, kita bisa membuat aplikasi sederhana yang membantu mengelola jadwal dengan lebih praktis dan menarik. Pada artikel ini, kita akan belajar membuat aplikasi **jadwal pelajaran menggunakan Flutter** yang memiliki fitur lengkap seperti tambah data, edit, hapus, warna berbeda, hingga konfirmasi sebelum menghapus. --- 🎯 Tujuan Aplikasi Aplikasi ini dirancang untuk: * Menyimpan jadwal pelajaran harian * Menampilkan data dengan tampilan menarik * Memudahkan pengguna dalam mengelola jadwal Contoh jadwal: > Senin - Matematika - 08:00-09:45 --- ✨ Fitur Utama Aplikasi yang kita buat memiliki beberapa fitur penting, yaitu: ✅ Tambah jadwal ✅ Edit jadwal ✅ Hapus jadwal dengan konfirmasi ✅ Warna berbeda untuk setiap item ✅ Input hari, pelajaran, dan jam ✅ Tampilan sederhana dan mudah digunakan --- 🧱 Struktur Aplikasi Aplikasi ini terdiri dari: * **Model data** untuk menyimpan jadwal * **Halaman utama (StatefulWidget)** untuk menampilkan daftar * **Dialog input** untuk tambah/edit data * **Konfirmasi dialog** saat menghapus --- 💻 Cara Kerja Singkat 1. Pengguna menekan tombol **+** untuk menambah jadwal 2. Muncul form untuk mengisi: * Hari * Mata pelajaran * Jam 3. Pengguna bisa memilih warna untuk setiap jadwal 4. Data ditampilkan dalam bentuk list 5. Tombol edit untuk mengubah data 6. Tombol hapus akan memunculkan konfirmasi terlebih dahulu --- 🎨 Tampilan Aplikasi Setiap jadwal akan ditampilkan dalam bentuk card dengan warna berbeda, sehingga lebih menarik dan mudah dibedakan. Contoh tampilan: * Senin - Matematika (biru) * Selasa - Bahasa Indonesia (merah) * Rabu - IPA (hijau) --- 🚀 Kelebihan Aplikasi * Mudah digunakan (user friendly) * Tampilan menarik dengan warna * Tidak membutuhkan database (sederhana) * Cocok untuk pemula belajar Flutter --- 🔧 Pengembangan Lanjutan Jika ingin meningkatkan aplikasi ini, kamu bisa menambahkan: * Dropdown pilihan hari otomatis * Time picker untuk memilih jam * Penyimpanan data permanen (SQLite / SharedPreferences) * Notifikasi pengingat pelajaran * Tampilan jadwal per hari --- import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class Schedule { String day; String subject; String time; Color color; Schedule({ required this.day, required this.subject, required this.time, required this.color, }); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Jadwal Pelajaran', theme: ThemeData(primarySwatch: Colors.blue), home: SchedulePage(), ); } } class SchedulePage extends StatefulWidget { @override _SchedulePageState createState() => _SchedulePageState(); } class _SchedulePageState extends State { List schedules = []; void _addOrEditSchedule({Schedule? schedule, int? index}) { TextEditingController dayController = TextEditingController(text: schedule?.day ?? ''); TextEditingController subjectController = TextEditingController(text: schedule?.subject ?? ''); TextEditingController timeController = TextEditingController(text: schedule?.time ?? ''); Color selectedColor = schedule?.color ?? Colors.blue; showDialog( context: context, builder: (context) { return AlertDialog( title: Text(schedule == null ? 'Tambah Jadwal' : 'Edit Jadwal'), content: SingleChildScrollView( child: Column( children: [ TextField( controller: dayController, decoration: InputDecoration(labelText: 'Hari'), ), TextField( controller: subjectController, decoration: InputDecoration(labelText: 'Mata Pelajaran'), ), TextField( controller: timeController, decoration: InputDecoration(labelText: 'Jam (08:00)'), ), SizedBox(height: 10), DropdownButton( value: selectedColor, items: [ Colors.blue, Colors.red, Colors.green, Colors.orange, Colors.purple, ] .map((color) => DropdownMenuItem( value: color, child: Container( width: 50, height: 20, color: color, ), )) .toList(), onChanged: (color) { setState(() { selectedColor = color!; }); }, ), ], ), ), actions: [ TextButton( onPressed: () { Navigator.pop(context); }, child: Text('Batal'), ), ElevatedButton( onPressed: () { if (dayController.text.isNotEmpty && subjectController.text.isNotEmpty && timeController.text.isNotEmpty) { setState(() { if (schedule == null) { schedules.add(Schedule( day: dayController.text, subject: subjectController.text, time: timeController.text, color: selectedColor, )); } else { schedules[index!] = Schedule( day: dayController.text, subject: subjectController.text, time: timeController.text, color: selectedColor, ); } }); Navigator.pop(context); } }, child: Text('Simpan'), ), ], ); }, ); } void _deleteSchedule(int index) { showDialog( context: context, builder: (context) { return AlertDialog( title: Text('Konfirmasi'), content: Text('Yakin ingin menghapus jadwal ini?'), actions: [ TextButton( onPressed: () => Navigator.pop(context), child: Text('Batal'), ), ElevatedButton( onPressed: () { setState(() { schedules.removeAt(index); }); Navigator.pop(context); }, child: Text('Hapus'), ), ], ); }, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Jadwal Pelajaran'), ), body: schedules.isEmpty ? Center(child: Text('Belum ada jadwal')) : ListView.builder( itemCount: schedules.length, itemBuilder: (context, index) { final item = schedules[index]; return Card( color: item.color.withOpacity(0.2), child: ListTile( title: Text('${item.day} - ${item.subject}'), subtitle: Text(item.time), trailing: Row( mainAxisSize: MainAxisSize.min, children: [ IconButton( icon: Icon(Icons.edit), onPressed: () => _addOrEditSchedule(schedule: item, index: index), ), IconButton( icon: Icon(Icons.delete), onPressed: () => _deleteSchedule(index), ), ], ), ), ); }, ), floatingActionButton: FloatingActionButton( onPressed: () => _addOrEditSchedule(), child: Icon(Icons.add), ), ); } }