"Aplikasi Biodata Siswa" — Fokus Form, Validasi & Layout

 

📚 MODUL AJAR FLUTTER

"Aplikasi Biodata Siswa" — Fokus Form, Validasi & Layout

---

📋 IDENTITAS MODUL

Item	Keterangan
Mata Pelajaran	Pemrograman Mobile (Flutter)
Kelas / Semester	XI PPLG / Ganjil
Alokasi Waktu	14 JP (3 x pertemuan @ 1 pekan jadwal Blok)
Materi Pokok	Form, Validasi, Navigasi & Layout Lanjutan
Model Pembelajaran	Project Based Learning (PjBL) + Pair Programming

---

🎯 TUJUAN PEMBELAJARAN

Setelah mengikuti praktikum ini, peserta didik mampu:

1. Kognitif (C2-C3)

   • Menjelaskan fungsi Form, GlobalKey<FormState>, dan TextFormField

   • Mengidentifikasi jenis-jenis validator pada form Flutter

   • Menjelaskan alur navigasi antar halaman (Navigator.push & Navigator.pop)

2. Psikomotorik (C4-C6)

   • Membuat form input biodata dengan validasi lengkap

   • Mengimplementasikan showDatePicker untuk input tanggal

   • Menampilkan data ke ListView menggunakan Card dan ListTile

   • Menerapkan Hero animation pada transisi antar halaman

   • Membuat fitur edit & hapus data

3. Afektif

   • Menumbuhkan ketelitian dalam validasi input

   • Mengembangkan inisiatif dengan menambah fitur kreatif

   • Berpikir kritis dalam menyelesaikan error (debugging)

---

🧩 CAPAIAN PEMBELAJARAN (CP)

Peserta didik mampu mengembangkan aplikasi mobile sederhana menggunakan framework Flutter dengan menerapkan konsep widget, state management, form handling, dan navigasi antar halaman sesuai kebutuhan pengguna.

---

📦 FITUR YANG HARUS DIBUAT

✅ Fitur Wajib

No	Fitur	Widget/Konsep
1	Form input biodata (Nama, NIS, Kelas, Alamat, Tanggal Lahir, Jenis Kelamin)	Form, TextFormField, Radio
2	Validasi tiap field	validator, GlobalKey<FormState>
3	Date picker untuk tanggal lahir	showDatePicker
4	Foto profil dengan Image.network + placeholder	CircleAvatar, ClipOval
5	Simpan ke List → tampil di ListView	ListView.builder, Card, ListTile
6	Tap item → Detail Page	Navigator.push, Hero
7	Edit & Hapus data	showDialog, setState

⭐ Fitur Nilai Tambahan (pilih minimal 1)

• 🔍 Search / filter berdasarkan nama

• 🎨 Dark mode toggle

• 📊 Counter jumlah siswa

• 🖼️ Ambil foto dari kamera (image_picker)

• 💾 Simpan data ke shared_preferences

• 🎬 Animasi transisi custom

---

🗂️ STRUKTUR PROJECT

text

biodata_siswa/
├── lib/
│   ├── main.dart
│   ├── models/
│   │   └── siswa.dart
│   ├── pages/
│   │   ├── form_page.dart
│   │   ├── list_page.dart
│   │   └── detail_page.dart
│   └── widgets/
│       └── custom_textfield.dart
└── pubspec.yaml

---

🚀 STARTER CODE

⚠️ Catatan Kode Starter : Starter code ini sebagai awal / codingan dasar. Siswa wajib mengembangkan per-bagian secara mandiri. 

📄 1. lib/models/siswa.dart

dart

class Siswa {
  String nama;
  String nis;
  String kelas;
  String alamat;
  DateTime tanggalLahir;
  String jenisKelamin;
  String? fotoUrl;

  Siswa({
    required this.nama,
    required this.nis,
    required this.kelas,
    required this.alamat,
    required this.tanggalLahir,
    required this.jenisKelamin,
    this.fotoUrl,
  });
}

---

📄 2. lib/main.dart

dart

import 'package:flutter/material.dart';
import 'pages/list_page.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Biodata Siswa',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        useMaterial3: true,
      ),
      home: const ListPage(),
    );
  }
}

---

📄 3. lib/pages/list_page.dart (Starter)

dart

import 'package:flutter/material.dart';
import '../models/siswa.dart';
import 'form_page.dart';
import 'detail_page.dart';

class ListPage extends StatefulWidget {
  const ListPage({super.key});

  @override
  State<ListPage> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  // TODO 1: Buat List<Siswa> kosong untuk menampung data

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Daftar Biodata Siswa')),
      body: /* TODO 2: Tampilkan ListView.builder
               - Jika list kosong, tampilkan ikon + tulisan "Belum ada data"
               - Jika ada data, tampilkan Card + ListTile
             */
          const Center(child: Text('Belum ada data')),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () async {
          // TODO 3: Navigasi ke FormPage dan tunggu hasilnya
          // Jika hasil != null, tambahkan ke list dan setState
        },
      ),
    );
  }
}

---

📄 4. lib/pages/form_page.dart (Starter)

dart

import 'package:flutter/material.dart';
import '../models/siswa.dart';

class FormPage extends StatefulWidget {
  final Siswa? siswaEdit; // null = tambah baru, != null = edit

  const FormPage({super.key, this.siswaEdit});

  @override
  State<FormPage> createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  final _formKey = GlobalKey<FormState>();

  // TODO 1: Buat TextEditingController untuk nama, nis, kelas, alamat
  // TODO 2: Buat variabel DateTime? _tanggalLahir
  // TODO 3: Buat variabel String _jenisKelamin = 'Laki-laki'

  @override
  void initState() {
    super.initState();
    // TODO 4: Jika widget.siswaEdit != null, isi controller dengan data lama
  }

  @override
  void dispose() {
    // TODO 5: Dispose semua controller
    super.dispose();
  }

  Future<void> _pilihTanggal() async {
    // TODO 6: Gunakan showDatePicker
    // Hint: firstDate: DateTime(2000), lastDate: DateTime.now()
  }

  void _simpan() {
    // TODO 7: Validasi form dengan _formKey.currentState!.validate()
    // Jika valid, buat objek Siswa baru
    // Kembalikan ke halaman sebelumnya dengan Navigator.pop(context, siswa)
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.siswaEdit == null ? 'Tambah Biodata' : 'Edit Biodata'),
      ),
      body: Form(
        key: _formKey,
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            // TODO 8: TextFormField Nama (validator: tidak boleh kosong)
            // TODO 9: TextFormField NIS (validator: min 4 digit, angka)
            // TODO 10: TextFormField Kelas
            // TODO 11: TextFormField Alamat (maxLines: 3)
            // TODO 12: Field Tanggal Lahir → InkWell + showDatePicker
            // TODO 13: Radio button Jenis Kelamin
            // TODO 14: Tombol Simpan
          ],
        ),
      ),
    );
  }
}

---

📄 5. lib/pages/detail_page.dart (Starter)

dart

import 'package:flutter/material.dart';
import '../models/siswa.dart';

class DetailPage extends StatelessWidget {
  final Siswa siswa;

  const DetailPage({super.key, required this.siswa});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detail Siswa')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // TODO 1: Hero animation untuk foto profil
            // Hint: Hero(tag: siswa.nis, child: CircleAvatar(...))
            // TODO 2: Card berisi info lengkap siswa menggunakan ListTile
            // TODO 3: Format tanggal dengan intl (dd MMMM yyyy)
          ],
        ),
      ),
    );
  }
}

---

✅ CHECKLIST FITUR (Centang Sendiri)

Tandai / centang fitur yang sudah dikerjakan.

🟩 Fitur Wajib

• □

  Halaman list menampilkan data dari List<Siswa>

• □

  Halaman list menampilkan pesan "Belum ada data" saat kosong

• □

  Form memiliki 4 TextFormField (nama, NIS, kelas, alamat)

• □

  Validator nama: tidak boleh kosong

• □

  Validator NIS: minimal 4 karakter, hanya angka

• □

  Validator kelas: tidak boleh kosong

• □

  Validator alamat: minimal 5 karakter

• □

  Field tanggal lahir menggunakan showDatePicker

• □

  Radio button jenis kelamin (Laki-laki / Perempuan)

• □

  Tombol Simpan memvalidasi form sebelum menyimpan

• □

  Data baru muncul di ListView setelah disimpan

• □

  Tap item → navigasi ke Detail Page

• □

  Detail Page menampilkan foto + semua field biodata

• □

  Tombol Edit → membuka Form dengan data terisi

• □

  Tombol Hapus → konfirmasi dengan AlertDialog

• □

  Hapus → data hilang dari list

• □

  Foto profil menggunakan Image.network + placeholder

• □

  Menggunakan Card dan ListTile di list

• □

  Menggunakan Hero animation di foto profil

⭐ Fitur Nilai Tambahan (pilih minimal 1)

• □

  Search/filter berdasarkan nama

• □

  Dark mode toggle

• □

  Counter jumlah siswa di AppBar

• □

  Ambil foto dari kamera (image_picker)

• □

  Simpan data ke shared_preferences

• □

  Animasi transisi custom

---

🎓 PANDUAN CODE REVIEW (10 Menit Akhir)

Persiapkan jawaban terbaik untuk 3 pertanyaan acak:

1. "Coba jelaskan apa fungsi GlobalKey<FormState> di kodemu?"

2. "Kenapa TextEditingController harus di-dispose?"

3. "Apa bedanya Navigator.push dan Navigator.pop?"

4. "Bagaimana caramu menampilkan data dari Form ke ListView?"

5. "Apa fungsi setState di tombol hapus?"

Penilaian sikap: siswa yang bisa menjawab = bonus poin partisipasi.

---

📝 TUGAS PENGUMPULAN

📌 Format Artikel Blog (Wajib)

text

Judul: Praktikum Flutter — Aplikasi Biodata Siswa

1. Identitas
   Nama  : ................
   Kelas : ................

2. Tujuan Praktikum
   (tulis 3-5 poin tujuan sesuai modul)

3. Screenshot Aplikasi
   - Halaman Form Kosong
   - Halaman Form Terisi
   - Halaman List Biodata
   - Halaman Detail
   - Screenshot saat terjadi ERROR (WAJIB ADA!)
   - Screenshot setelah error teratasi

4. Penjelasan Kode
   - Jelaskan fungsi Form & GlobalKey
   - Jelaskan cara kerja validator
   - Jelaskan alur navigasi
   - Jelaskan fungsi Hero animation

5. Kendala & Solusi
   (ceritakan minimal 1 error yang kamu alami + cara mengatasinya)

6. Fitur Kreatif yang Ditambahkan
   (jelaskan fitur tambahan yang kamu buat)

7. Kesimpulan
   (apa yang kamu pelajari dari praktikum ini)

📤 Format Kirim ke Kometar Postingan ini

text

Nama    :
Kelas   :
Link Blog : https://...
Fitur Kreatif : (sebutkan)
Status  : ✅ Selesai

---

🚫 KEBIJAKAN PENGGUNAAN AI

PENTING DIBACA SISWA!

1. ✅ Boleh: Bertanya ke AI tentang konsep, error handling, atau penjelasan widget.

2. ✅ Boleh: Minta AI menjelaskan kode yang sudah kamu tulis sendiri.

3. ❌ Dilarang: Copy-paste 100% kode dari AI.

4. ❌ Dilarang: Submit tanpa memahami kode.

5. 📸 Wajib: Sertakan screenshot proses error + solusinya di blog. Ini bukti kamu benar-benar mengerjakan.

Sanksi: Jika terbukti copy-paste dan tidak bisa menjelaskan saat code review → nilai dianggap 0 dan wajib remedial.

---

📊 RUBRIK PENILAIAN

Aspek	Bobot	Kriteria
Kelengkapan Fitur Wajib	40%	Semua ✅ checklist terpenuhi
Validasi Form	15%	Validator berjalan & pesan error jelas
UI/UX & Layout	15%	Rapi, konsisten, menggunakan Card/ListTile
Navigasi & Hero	10%	Perpindahan halaman halus, Hero berfungsi
Artikel Blog	10%	Lengkap, ada screenshot error & penjelasan
Fitur Kreatif	5%	Ada fitur tambahan original
Code Review	5%	Bisa menjelaskan kode sendiri

Nilai Akhir = Total Skor (maks 100)

---

🧠 REFERENSI BELAJAR

• 📘 Flutter Form Docs

• 📘 Navigator & Routing

• 📘 Hero Animation

• 📘 DatePicker

• 🎥 YouTube: "Flutter Form Validation Tutorial"

---

Salam: Redaksi

Read More