Membuat Aplikasi Biodata Siswa Menggunakan Fluter
1. Identitas
Nama: Rizkya Amelia
Kelas: XI RPL 2
Mata Pelajaran: Pemrograman Mobile
2. Tujuan Praktikum 🎯
1. Memahami cara membuat aplikasi menggunakan Flutter dan bahasa pemrograman Dart.
2. Memahami penggunaan widget "Form", "TextFormField", dan "GlobalKey".
3. Membuat validasi input agar nama, kelas, dan alamat web wajib diisi.
4. Memahami cara menampilkan, menyimpan, dan menghapus biodata siswa.
5. Memahami navigasi halaman dan penggunaan animasi "Hero" pada aplikasi Flutter.
3. Screenshot Aplikasi 📸
Pada bagian ini, lampirkan screenshot hasil praktikum sesuai dengan aplikasi yang telah dibuat.
a. Halaman Formulir Kosong
Menampilkan halaman utama aplikasi sebelum pengguna memasukkan biodata siswa. Terdapat kolom Nama Lengkap, Kelas, dan Alamat serta tombol Simpan Biodata.
b. Halaman Formulir Terisi
Menampilkan form yang telah diisi dengan nama lengkap, kelas, dan alamat siswa sebelum tombol Simpan Biodata ditekan.
c. Halaman Daftar Biodata
Menampilkan daftar siswa yang berhasil disimpan. Setiap data menampilkan nama siswa, kelas, ikon profil, dan tombol hapus.
d. Halaman Detail Biodata
Menampilkan informasi lengkap siswa yang dipilih, yaitu nama lengkap, kelas, dan alamat.
e. Tangkapan Layar Saat Terjadi Error
Menampilkan screenshot error yang benar-benar terjadi ketika proses pembuatan atau pengujian aplikasi. Jika mengalami error, sertakan pesan error yang muncul pada terminal atau aplikasi. (TIDAK ADA EROR)
F. Tangkapan Layar Setelah Error diatasi
Menampilkan tangkapan layar setelah kesalahan diperbaiki dan aplikasi dapat berjalan kembali dengan baik.
4. Penjelasan Kode
A. Fungsi Form dan GlobalKey
Pada aplikasi ini, widget "Form" digunakan untuk mengelompokkan kolom input biodata siswa, yaitu nama lengkap, kelas, dan alamat.
Kode yang digunakan:
final _formKey = GlobalKey<FormState>();
"GlobalKey<FormState>" digunakan untuk mengakses dan mengelola kondisi form, termasuk menjalankan validasi menggunakan metode "validate()".
Contoh penggunaan:
Membentuk(
kunci: _formKey,
anak: Kolom(
anak-anak: [
// Kolom input biodata siswa
],
),
)
Dengan adanya "GlobalKey", aplikasi dapat memeriksa apakah semua kolom sudah terisi sebelum data disimpan.
B. Cara Kerja Validator
Validator digunakan untuk memeriksa apakah pengguna telah mengisi setiap kolom input.
Contoh kode:
validator: (nilai) {
jika (nilai == null || nilai.trim().isEmpty) {
kembalikan 'Nama wajib diisi';
}
kembalikan null;
},
Penjelasan:
- "value == null" memeriksa apakah nilai input tidak tersedia.
- "value.trim().isEmpty" memeriksa apakah kolom kosong atau hanya berisi spasi.
- "return 'Nama wajib diisi'" menampilkan pesan kesalahan jika input belum diisi.
- "return null" berarti input sudah memenuhi aturan validasi.
Validasi yang sama diterapkan pada kolom kelas dan alamat. Dengan demikian, biodata tidak dapat disimpan apabila masih ada kolom wajib yang kosong.
C. Alur mengutak-atik
Navigasi digunakan untuk berpindah dari halaman daftar siswa ke halaman detail biodata.
Kode yang digunakan:
Navigator.push(
konteks,
RuteHalamanMaterial(
pembangun: (konteks) => Halaman Detail(
siswa: siswa,
),
),
);
Penjelasan alurnya:
1. Pengguna memilih salah satu data siswa pada daftar.
2. Aplikasi menjalankan "Navigator.push()".
3. Data siswa dikirim melalui parameter "siswa".
4. Halaman "DetailPage" dibuka.
5. Informasi nama, kelas, dan alamat ditampilkan pada halaman detail.
D. Fungsi Animasi Hero
Widget "Hero" digunakan untuk memberikan animasi perpindahan elemen yang sama antara dua halaman.
Pada aplikasi ini, animasi diterapkan pada ikon profil siswa.
Kode pada halaman utama:
Pahlawan(
tag: 'siswa-$id',
anak: konstanta CircleAvatar(
Warna latar belakang: Warna.indigo,
anak: Ikon(
Ikon.orang,
warna: Warna.putih,
),
),
)
Pada halaman detail digunakan tag yang sama, yaitu "'siswa-$id'".
Fungsi "tag" adalah menghubungkan elemen pada kedua halaman agar animasi dapat berjalan. ID yang berbeda untuk setiap siswa membantu membedakan elemen masing-masing.
E. Fungsi menghapus dan menghapus Biodata
Fungsi "_simpanBiodata()" digunakan untuk menyimpan data ke dalam daftar "_daftarSiswa" setelah validasi berhasil.
Sementara itu, fungsi "_hapusBiodata(int index)" digunakan untuk menghapus data siswa berdasarkan posisi data di dalam daftar.
Keduanya menggunakan "setState()" agar tampilan aplikasi diperbarui setelah data berubah.
5. Kendala dan Solusi
Salah satu kendala yang mungkin terjadi saat membuat aplikasi adalah data tidak dapat disimpan karena kolom input belum terisi.
Penyebab: Validator pada "TextFormField" mendeteksi bahwa kolom nama, kelas, atau alamat masih kosong.
Solusi: Mengisi seluruh kolom yang diwajibkan sebelum menekan tombol Simpan Biodata.
Kendala lain yang mungkin terjadi adalah kesalahan penulisan nama variabel atau tanda kurung pada kode Dart.
Solusi: Periksa kembali kode program, pastikan konsistensi nama variabel, kemudian jalankan aplikasi kembali.
Catatan: Sesuaikan bagian ini dengan kendala yang benar-benar alami selama praktikum.
6. Fitur Kreatif yang Ditambahkan ✨
Pada aplikasi Biodata Siswa ini terdapat beberapa fitur tambahan yang membuat aplikasi lebih menarik dan mudah digunakan.
1. 🎨 Tema Warna Indigo: Menggunakan warna indigo pada AppBar, ikon, dan tombol untuk memberikan tampilan yang konsisten.
2. 🔔 Notifikasi SnackBar: Menampilkan pesan setelah biodata berhasil disimpan atau dihapus.
3. 👤 Ikon Profil Siswa: Menggunakan "CircleAvatar" sebagai identitas visual setiap siswa.
4. 🎬 Hero Animation: memberikan animasi perpindahan ikon profil ketika pengguna membuka halaman detail.
5. 🗑️ Tombol Hapus: menandakan pengguna menghapus biodata yang tidak diperlukan.
6. 📊 Jumlah Data Otomatis: Menampilkan jumlah siswa berdasarkan data yang tersedia pada daftar.
7. 📭 Tampilan Data Kosong: Menampilkan ikon dan pesan “Belum ada biodata siswa” ketika daftar belum memiliki data.
8. 🧹 Form Otomatis Kosong: Setelah data berhasil disimpan, seluruh kolom input dibersihkan agar pengguna dapat memasukkan biodata berikutnya.
7. Kesimpulan
Berdasarkan praktikum yang telah dilakukan, saya dapat memahami cara membuat aplikasi biodata siswa menggunakan Flutter dan bahasa pemrograman Dart.
Saya mempelajari penggunaan widget "Form", "TextFormField", "GlobalKey", dan "TextEditingController" untuk membuat serta memvalidasi input. Selain itu, saya juga mempelajari penggunaan "setState()" untuk memperbarui tampilan, "Navigator.push()" untuk berpindah halaman, serta "Hero" untuk menambahkan animasi.
Aplikasi ini dapat digunakan untuk memasukkan biodata siswa, menampilkan daftar siswa, melihat detail biodata, dan menghapus data. Namun, data masih disimpan sementara di dalam memori sehingga belum tersimpan secara permanen setelah aplikasi ditutup.
Dengan praktikum ini, saya memperoleh pemahaman yang lebih baik mengenai pembuatan antarmuka, pengelolaan data sederhana, form validasi, dan navigasi halaman pada aplikasi Flutter.
✨ Demikian laporan praktikum Flutter tentang Aplikasi Biodata Siswa. Semoga praktikum ini dapat menambah pengetahuan dan keterampilan dalam mengembangkan aplikasi mobile.
Comments
Post a Comment