MEMBUAT APLIKASI BIODATA SISWA MENGGUNAKAN FLUTTER DI DARTPAD

1. Pendahuluan

Perkembangan teknologi informasi dan komunikasi pada zaman sekarang mengalami kemajuan yang sangat pesat. Teknologi telah memberikan banyak kemudahan dalam berbagai bidang kehidupan, salah satunya adalah bidang pendidikan. Pemanfaatan teknologi di lingkungan pendidikan dapat membantu proses pembelajaran menjadi lebih efektif, efisien, dan menarik. Salah satu bentuk pemanfaatan teknologi adalah penggunaan aplikasi untuk mengelola data siswa.

Data siswa merupakan informasi penting yang dibutuhkan oleh sekolah untuk mendukung kegiatan administrasi dan pembelajaran. Data tersebut biasanya meliputi nama lengkap, Nomor Induk Siswa (NIS), kelas, alamat, tanggal lahir, dan jenis kelamin. Jika data siswa dikelola secara manual menggunakan kertas, proses pencarian, perubahan, dan pengelolaan informasi dapat membutuhkan waktu yang cukup lama. Oleh karena itu, diperlukan sebuah sistem digital yang dapat membantu pengelolaan data tersebut dengan lebih praktis.

Dalam kegiatan pembelajaran pemrograman, pembuatan aplikasi sederhana menjadi salah satu cara untuk memahami konsep dasar pengembangan perangkat lunak. Melalui kegiatan ini, siswa dapat mempelajari cara membuat tampilan aplikasi, menerima masukan dari pengguna, mengolah data, menampilkan informasi, serta membuat fitur interaktif.

Salah satu teknologi yang dapat digunakan untuk membuat aplikasi adalah Flutter. Flutter merupakan framework yang dikembangkan oleh Google untuk membangun aplikasi dengan satu basis kode. Flutter menggunakan bahasa pemrograman Dart dan menyediakan berbagai widget yang dapat digunakan untuk membuat tampilan aplikasi.

Dalam praktikum ini, aplikasi dikembangkan menggunakan DartPad, yaitu lingkungan pemrograman berbasis web yang mendukung penulisan dan pengujian kode Dart, termasuk aplikasi Flutter. Dengan DartPad, pengguna dapat mencoba program tanpa harus memasang seluruh perangkat pengembangan Flutter pada komputer.

Aplikasi yang dibuat dalam praktikum ini adalah aplikasi Biodata Siswa. Aplikasi tersebut dirancang untuk memasukkan, menampilkan, mencari, mengubah, dan menghapus data siswa. Selain itu, aplikasi dapat dilengkapi dengan fitur tanggal lahir, foto profil, halaman detail siswa, penghitung jumlah siswa, dan pilihan tema gelap.

Melalui pembuatan aplikasi ini, diharapkan siswa dapat memahami penerapan konsep pemrograman Flutter dalam sebuah proyek sederhana yang berkaitan dengan kebutuhan di lingkungan pendidikan.

2. Pengertian Biodata Siswa

Biodata siswa adalah kumpulan informasi mengenai identitas seorang siswa yang digunakan untuk keperluan administrasi, pendataan, dan pengelolaan informasi di lingkungan pendidikan.

Biodata siswa biasanya berisi informasi dasar, seperti nama lengkap, Nomor Induk Siswa (NIS), kelas, alamat tempat tinggal, tanggal lahir, dan jenis kelamin. Informasi tersebut dapat membantu pihak sekolah dalam mengenali siswa dan mengelola data yang berkaitan dengan kegiatan pendidikan.

Dalam sistem digital, biodata siswa dapat disimpan dan ditampilkan melalui aplikasi. Pengguna dapat memasukkan informasi melalui formulir, kemudian aplikasi akan memproses dan menampilkan data tersebut dalam bentuk daftar atau halaman detail.

Pengelolaan biodata secara digital memiliki beberapa manfaat, antara lain mempermudah pencarian data, mempercepat proses perubahan informasi, mengurangi penggunaan kertas, dan membantu penyajian informasi secara lebih terstruktur.

Dalam aplikasi yang dibuat pada praktikum ini, biodata siswa menjadi data utama yang dikelola. Setiap siswa memiliki identitas berupa nama, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin. Data tersebut dapat ditampilkan dalam daftar siswa dan dibuka untuk melihat informasi secara lebih lengkap.

Meskipun demikian, aplikasi sederhana ini masih menggunakan penyimpanan sementara di dalam memori program. Oleh sebab itu, data yang dimasukkan belum tersimpan secara permanen ketika aplikasi dimulai ulang.

3. Pengertian Flutter

Flutter adalah framework pengembangan aplikasi yang dibuat oleh Google. Flutter digunakan untuk membangun aplikasi dengan tampilan antarmuka yang interaktif menggunakan bahasa pemrograman Dart.

Flutter menyediakan berbagai komponen yang disebut widget. Widget merupakan bagian dasar yang digunakan untuk menyusun tampilan aplikasi. Contoh widget Flutter adalah Text untuk menampilkan tulisan, Container untuk membuat area tampilan, Column untuk menyusun elemen secara vertikal, Row untuk menyusun elemen secara horizontal, dan Scaffold untuk menyediakan struktur dasar halaman aplikasi.

Selain widget dasar, Flutter juga menyediakan widget untuk membuat formulir, tombol, daftar data, navigasi halaman, animasi, serta berbagai komponen antarmuka lainnya.

Salah satu keunggulan Flutter adalah kemampuannya menggunakan satu basis kode untuk membangun aplikasi pada berbagai platform yang didukung. Hal tersebut dapat membantu pengembang mengurangi pengulangan penulisan kode.

Flutter menggunakan bahasa pemrograman Dart. Dart mendukung konsep pemrograman berorientasi objek, fungsi, variabel, kondisi, perulangan, dan berbagai konsep pemrograman modern lainnya.

Dalam pembuatan aplikasi Biodata Siswa, Flutter digunakan untuk membangun tampilan halaman utama, formulir input biodata, daftar siswa, halaman detail, tombol edit dan hapus, serta fitur pencarian.

Flutter juga menyediakan fitur setState() yang dapat digunakan untuk memperbarui tampilan ketika data berubah. Contohnya, ketika siswa baru ditambahkan, aplikasi dapat memperbarui daftar siswa dan jumlah data yang ditampilkan.

4. Pengertian DartPad

DartPad adalah lingkungan pemrograman berbasis web yang dapat digunakan untuk menulis, menjalankan, dan menguji kode Dart. DartPad juga mendukung pembuatan serta pengujian aplikasi Flutter pada mode yang sesuai.

DartPad dapat diakses melalui peramban web tanpa harus memasang editor kode atau perangkat pengembangan Flutter secara lengkap pada komputer. Hal ini menjadikan DartPad sebagai salah satu sarana yang praktis untuk mempelajari bahasa Dart dan Flutter.

Alamat situs DartPad adalah https://dartpad.dev/.

Dalam penggunaan DartPad, pengguna dapat menuliskan kode program pada editor yang tersedia, kemudian menekan tombol Run untuk menjalankan program. Apabila terdapat kesalahan pada kode, DartPad akan menampilkan informasi kesalahan yang dapat digunakan untuk membantu proses perbaikan.

DartPad sangat berguna bagi pemula karena memungkinkan proses belajar dilakukan secara langsung melalui peramban. Pengguna dapat mengubah kode, menjalankan kembali program, dan mengamati hasil perubahan tanpa harus melakukan proses instalasi yang rumit.

Dalam praktikum ini, DartPad digunakan sebagai tempat menulis dan menguji kode aplikasi Biodata Siswa. Melalui platform tersebut, proses pembelajaran Flutter dapat dilakukan dengan lebih sederhana dan mudah diakses.

Perlu diketahui bahwa DartPad merupakan alat untuk menulis dan menjalankan kode, bukan layanan basis data. Oleh karena itu, penyimpanan permanen dan fitur perangkat tertentu memerlukan pendekatan atau layanan tambahan di luar kemampuan dasar kode yang dijalankan.

5. Tujuan Pembuatan Aplikasi

Pembuatan aplikasi Biodata Siswa menggunakan Flutter di DartPad memiliki beberapa tujuan, baik dari sisi pembelajaran pemrograman maupun penerapan teknologi dalam pengelolaan data.

Tujuan pertama adalah memahami dasar-dasar penggunaan Flutter sebagai framework pengembangan aplikasi. Melalui praktikum ini, siswa dapat mempelajari cara membuat struktur aplikasi, menyusun widget, dan mengatur tampilan antarmuka.

Tujuan kedua adalah memahami penggunaan bahasa pemrograman Dart. Pembuatan aplikasi melibatkan penggunaan variabel, class, objek, fungsi, kondisi, daftar data, dan pengelolaan nilai yang dimasukkan oleh pengguna.

Tujuan ketiga adalah mempelajari cara membuat formulir input data. Formulir digunakan untuk menerima informasi siswa, kemudian memvalidasi masukan sebelum data disimpan ke dalam daftar.

Tujuan keempat adalah memahami konsep CRUD, yaitu Create, Read, Update, dan Delete. Konsep tersebut meliputi penambahan data, penampilan data, perubahan data, dan penghapusan data.

Tujuan kelima adalah mempelajari navigasi antarhalaman. Pengguna dapat berpindah dari halaman utama menuju halaman formulir dan halaman detail siswa.

Tujuan keenam adalah mempelajari cara membuat aplikasi yang lebih interaktif melalui fitur pencarian, penghitung jumlah siswa, foto profil, pemilihan tanggal lahir, dan pengaturan tema.

Tujuan ketujuh adalah melatih kemampuan memecahkan masalah dalam pemrograman. Apabila terjadi kesalahan sintaks atau kesalahan saat program dijalankan, siswa diharapkan mampu membaca pesan kesalahan, mencari penyebabnya, dan memperbaiki kode.

Tujuan terakhir adalah menghasilkan proyek aplikasi sederhana yang dapat digunakan sebagai latihan dasar pengembangan perangkat lunak dan menjadi landasan untuk membuat aplikasi yang lebih kompleks.

6. Alat dan Bahan

Dalam pembuatan aplikasi Biodata Siswa, diperlukan beberapa alat dan bahan yang mendukung proses pengembangan.

6.1 Perangkat yang Digunakan

1. Laptop atau komputer

Laptop atau komputer digunakan untuk membuka DartPad, menulis kode program, menjalankan aplikasi, dan memeriksa hasil pengembangan. Perangkat dengan peramban modern dapat digunakan untuk menjalankan DartPad.

2. Ponsel pintar

Ponsel pintar dapat digunakan sebagai perangkat alternatif untuk mengakses DartPad melalui peramban. Namun, penggunaan layar yang lebih besar dapat membantu proses penulisan dan pemeriksaan kode.

3. Peramban web

Peramban seperti Google Chrome digunakan untuk membuka situs DartPad. Peramban berfungsi sebagai tempat menjalankan editor dan melihat hasil aplikasi.

4. Koneksi internet

Koneksi internet diperlukan untuk mengakses DartPad dan memuat sumber daya daring, termasuk gambar profil yang menggunakan alamat internet.

6.2 Perangkat Lunak

1. DartPad

DartPad digunakan untuk menulis dan menjalankan kode Dart serta Flutter.

2. Flutter

Flutter merupakan framework yang menyediakan widget dan berbagai fitur untuk membangun antarmuka aplikasi.

3. Bahasa pemrograman Dart

Dart digunakan untuk menulis logika aplikasi, mengolah data siswa, melakukan validasi, dan mengatur interaksi pengguna.

6.3 Bahan Pengembangan

Bahan yang digunakan meliputi rancangan tampilan aplikasi, daftar fitur yang akan dibuat, struktur data siswa, dan kode program Flutter.

Data yang digunakan dalam pengujian sebaiknya berupa data contoh atau data yang telah mendapat izin untuk digunakan. Hal ini bertujuan menjaga privasi informasi pribadi siswa.

7. Fitur Aplikasi Biodata Siswa

Aplikasi Biodata Siswa memiliki beberapa fitur utama yang dirancang untuk mempermudah pengelolaan data.

7.1 Formulir Input Biodata

Formulir input merupakan halaman yang digunakan untuk memasukkan informasi siswa. Informasi yang dimasukkan meliputi nama lengkap, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin.

Pada Flutter, formulir dapat dibuat menggunakan widget Form dan TextFormField. Setiap kolom memiliki fungsi yang berbeda sesuai dengan informasi yang dibutuhkan.

Nama digunakan untuk mencatat identitas siswa, NIS digunakan sebagai nomor identitas siswa, kelas menunjukkan kelas tempat siswa belajar, sedangkan alamat digunakan untuk mencatat alamat tempat tinggal.

Tanggal lahir dipilih melalui fitur kalender, sementara jenis kelamin dipilih menggunakan komponen Radio.

7.2 Validasi Data

Validasi merupakan proses pemeriksaan data yang dimasukkan sebelum disimpan. Validasi bertujuan mencegah data kosong dan membantu memastikan bahwa pengguna mengisi informasi yang diperlukan.

Dalam Flutter, validasi dapat dilakukan menggunakan GlobalKey<FormState> dan properti validator pada TextFormField.

Jika pengguna belum mengisi nama, NIS, kelas, atau alamat, aplikasi akan menampilkan pesan bahwa kolom tersebut wajib diisi.

Tanggal lahir dan jenis kelamin juga perlu diperiksa secara terpisah karena keduanya menggunakan komponen pemilihan, bukan kolom teks biasa.

Dengan validasi tersebut, data yang dimasukkan menjadi lebih teratur dan kesalahan pengisian dapat dikurangi.

7.3 Pemilihan Tanggal Lahir

Fitur tanggal lahir digunakan untuk memilih tanggal, bulan, dan tahun kelahiran siswa.

Flutter menyediakan fungsi showDatePicker() yang menampilkan kalender interaktif. Pengguna dapat memilih tanggal yang diinginkan, kemudian tanggal tersebut ditampilkan pada formulir.

Fitur ini lebih praktis daripada meminta pengguna mengetik tanggal secara manual. Penggunaan date picker juga membantu mengurangi kesalahan penulisan format tanggal.

7.4 Foto Profil Siswa

Foto profil digunakan sebagai identitas visual siswa pada daftar maupun halaman detail.

Widget Image.network digunakan untuk mengambil gambar dari alamat internet. Gambar kemudian dapat ditampilkan dalam bentuk lingkaran menggunakan CircleAvatar atau ClipOval.

Jika gambar gagal dimuat, aplikasi dapat menampilkan ikon pengguna sebagai pengganti. Dengan demikian, tampilan aplikasi tetap dapat digunakan meskipun gambar tidak tersedia.

Pada versi awal aplikasi, foto profil menggunakan gambar contoh yang sama untuk setiap siswa. Pengembangan berikutnya dapat menambahkan fitur unggah foto atau pengambilan gambar dari kamera.

7.5 Daftar Data Siswa

Daftar siswa merupakan halaman utama yang menampilkan data yang telah dimasukkan oleh pengguna.

Widget ListView.builder digunakan untuk membangun daftar berdasarkan jumlah data yang tersedia. Setiap siswa ditampilkan dalam bentuk kartu menggunakan Card dan ListTile.

Informasi yang ditampilkan pada daftar dapat berupa nama, NIS, kelas, dan foto profil.

Penggunaan daftar membuat data lebih mudah dibaca dibandingkan jika semua informasi ditampilkan dalam satu halaman tanpa pengelompokan.

7.6 Halaman Detail Siswa

Halaman detail digunakan untuk menampilkan seluruh informasi siswa secara lebih lengkap. Pengguna dapat membuka halaman ini dengan mengetuk salah satu siswa pada daftar.

Navigasi antarhalaman dapat dibuat menggunakan Navigator.push() dan MaterialPageRoute.

Widget Hero dapat digunakan untuk memberikan animasi transisi pada foto profil ketika pengguna berpindah dari halaman daftar menuju halaman detail. Agar animasi berjalan dengan benar, nilai tag pada kedua widget Hero harus sama.

7.7 Fitur Edit Data

Fitur edit memungkinkan pengguna memperbaiki atau memperbarui informasi siswa yang telah dimasukkan sebelumnya.

Ketika pengguna memilih menu Edit, aplikasi membuka kembali formulir yang sudah terisi dengan data siswa tersebut. Setelah perubahan disimpan, data lama pada daftar digantikan dengan data baru.

Fitur ini penting karena informasi siswa dapat berubah, misalnya ketika terjadi perubahan alamat atau kesalahan penulisan nama.

7.8 Fitur Hapus Data

Fitur hapus digunakan untuk menghilangkan data siswa yang tidak diperlukan dari daftar.

Untuk mengurangi risiko penghapusan yang tidak disengaja, aplikasi dapat menampilkan dialog konfirmasi menggunakan showDialog() dan AlertDialog.

Jika pengguna memilih Hapus, data dikeluarkan dari daftar. Jika memilih Batal, data tetap dipertahankan.

7.9 Fitur Pencarian

Fitur pencarian memungkinkan pengguna mencari siswa berdasarkan nama.

Pengguna mengetikkan nama pada kolom pencarian, kemudian aplikasi menyaring daftar agar hanya menampilkan siswa yang namanya sesuai dengan kata kunci.

Pencarian membantu pengguna menemukan data dengan lebih cepat, terutama ketika jumlah siswa semakin banyak.

7.10 Penghitung Jumlah Siswa

Counter jumlah siswa menampilkan banyaknya data siswa yang tersimpan pada daftar aplikasi.

Jumlah tersebut diperbarui ketika pengguna menambahkan atau menghapus data. Pada implementasi sederhana, jumlah siswa dapat diperoleh dari properti length pada List.

Fitur ini membantu pengguna mengetahui jumlah data yang sedang dikelola.

7.11 Dark Mode

Dark mode merupakan fitur untuk mengubah tampilan aplikasi menjadi tema gelap.

Pada Flutter, pengaturan tema dapat dilakukan menggunakan ThemeData, ThemeMode, dan ColorScheme.

Tema gelap dapat menjadi alternatif tampilan bagi pengguna. Pada aplikasi ini, pengguna dapat mengganti tema melalui tombol pada bagian atas halaman.

8. Penjelasan Struktur Kode Program

Kode aplikasi Biodata Siswa dibagi menjadi beberapa bagian yang memiliki fungsi masing-masing.

8.1 Import Library

Program diawali dengan perintah:

import 'package:flutter/material.dart';

Perintah tersebut digunakan untuk mengakses berbagai widget dan komponen Flutter Material Design, seperti Scaffold, AppBar, TextFormField, ListView, Card, AlertDialog, dan tombol.

8.2 Fungsi Main

Fungsi main() merupakan titik awal program dijalankan.

Di dalamnya terdapat perintah runApp() yang digunakan untuk menampilkan widget utama aplikasi.

Widget utama kemudian mengatur tema dan menampilkan halaman awal Biodata Siswa.

8.3 Class Data Siswa

Class Siswa digunakan untuk mendefinisikan struktur data setiap siswa. Class ini memiliki beberapa atribut, yaitu nama, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin.

Dengan menggunakan class, data seorang siswa dapat dikelompokkan menjadi satu objek. Cara ini membuat proses penambahan, penampilan, perubahan, dan penghapusan data menjadi lebih teratur.

8.4 StatefulWidget dan setState

StatefulWidget digunakan pada bagian aplikasi yang tampilannya dapat berubah selama program berjalan.

Contohnya adalah halaman utama yang menampilkan daftar siswa. Ketika siswa baru ditambahkan, aplikasi menggunakan setState() untuk memperbarui tampilan.

Hal yang sama dilakukan ketika data diedit, dihapus, atau ketika kata kunci pencarian berubah.

8.5 Form dan GlobalKey

Widget Form berfungsi mengelompokkan beberapa kolom input. GlobalKey<FormState> digunakan untuk mengakses keadaan formulir, termasuk menjalankan validasi melalui validate().

Jika validasi berhasil, data dapat diproses dan dikembalikan ke halaman sebelumnya.

8.6 TextEditingController

TextEditingController digunakan untuk membaca dan mengatur isi kolom teks.

Pada aplikasi ini, controller digunakan untuk kolom nama, NIS, kelas, dan alamat. Ketika formulir dibuka untuk mengedit siswa, controller diisi menggunakan data yang sudah tersedia.

Controller juga perlu dibersihkan menggunakan dispose() ketika halaman formulir tidak lagi digunakan.

8.7 List dan ListView.builder

List digunakan untuk menampung objek siswa selama aplikasi berjalan. Sementara itu, ListView.builder digunakan untuk menampilkan data tersebut dalam bentuk daftar.

Ketika data berubah, aplikasi memperbarui daftar melalui setState() sehingga informasi yang tampil sesuai dengan data terbaru.

8.8 Navigator dan MaterialPageRoute

Navigator.push() digunakan untuk berpindah dari halaman utama ke halaman formulir atau detail siswa.

Ketika formulir selesai digunakan, Navigator.pop() dapat mengembalikan hasil berupa objek siswa ke halaman sebelumnya.

Dengan demikian, penambahan dan perubahan data dapat dikelola dari halaman utama.

8.9 Date Picker

Fungsi showDatePicker() menampilkan kalender untuk memilih tanggal lahir. Hasil pilihan disimpan pada variabel bertipe DateTime.

Tanggal tersebut kemudian diubah menjadi teks agar dapat ditampilkan dan disimpan sebagai bagian dari data siswa.

8.10 Dialog Konfirmasi

showDialog() digunakan untuk menampilkan jendela dialog. Dalam fitur hapus, dialog memberikan pilihan kepada pengguna untuk membatalkan atau mengonfirmasi penghapusan.

Penggunaan dialog membuat interaksi aplikasi menjadi lebih jelas dan mengurangi kemungkinan tindakan yang tidak disengaja.

9. Langkah-Langkah Pembuatan Aplikasi

Proses pembuatan aplikasi Biodata Siswa dilakukan melalui beberapa tahapan.

Langkah 1: Menyiapkan Perangkat

Siapkan laptop atau ponsel yang memiliki peramban web. Pastikan perangkat terhubung ke internet agar dapat mengakses DartPad.

Langkah 2: Membuka DartPad

Buka alamat https://dartpad.dev/?mode=flutter melalui peramban.

Setelah halaman terbuka, pastikan mode Flutter aktif. DartPad akan menyediakan editor untuk menulis kode dan area untuk menampilkan hasil program.

Langkah 3: Membuat Struktur Program

Buat struktur dasar menggunakan fungsi main() dan widget utama aplikasi.

Pada tahap ini, aplikasi diatur agar dapat menampilkan halaman awal dengan judul Biodata Siswa.

Langkah 4: Membuat Class Siswa

Buat class yang menampung data nama, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin.

Class ini menjadi dasar pengelolaan data yang digunakan pada seluruh halaman aplikasi.

Langkah 5: Membuat Halaman Utama

Halaman utama dibuat menggunakan Scaffold dan AppBar.

Tambahkan kolom pencarian, informasi jumlah siswa, daftar siswa, dan tombol untuk menambahkan biodata baru.

Langkah 6: Membuat Formulir Biodata

Buat halaman formulir menggunakan Form, TextFormField, dan GlobalKey<FormState>.

Tambahkan semua kolom biodata yang diperlukan. Berikan validasi agar kolom wajib tidak boleh kosong.

Langkah 7: Menambahkan Date Picker dan Radio

Tambahkan tombol yang menjalankan showDatePicker() untuk memilih tanggal lahir.

Selanjutnya, tambahkan pilihan jenis kelamin menggunakan RadioListTile atau komponen Radio yang sesuai dengan versi Flutter yang digunakan.

Langkah 8: Membuat Proses Simpan Data

Setelah pengguna mengisi formulir, jalankan validasi. Jika semua data wajib sudah lengkap, buat objek Siswa dan kembalikan hasilnya ke halaman utama.

Halaman utama kemudian menambahkan objek tersebut ke dalam List dan memperbarui tampilan.

Langkah 9: Membuat Daftar dan Detail Siswa

Gunakan ListView.builder untuk menampilkan semua siswa.

Tambahkan navigasi ketika pengguna mengetuk salah satu data. Halaman detail kemudian menampilkan informasi siswa secara lengkap.

Langkah 10: Membuat Fitur Edit dan Hapus

Tambahkan menu Edit dan Hapus pada setiap data siswa.

Fitur Edit membuka formulir dengan informasi lama, sedangkan fitur Hapus menampilkan dialog konfirmasi sebelum mengeluarkan data dari daftar.

Langkah 11: Menambahkan Fitur Tambahan

Tambahkan pencarian nama dan penghitung jumlah siswa.

Selanjutnya, buat tombol pengaturan tema untuk mengaktifkan atau menonaktifkan dark mode.

Langkah 12: Menguji Aplikasi

Tekan tombol Run di DartPad untuk menjalankan program.

Uji setiap fitur dengan memasukkan beberapa data contoh, melakukan pencarian, mengubah data, dan menghapus data. Pastikan semua proses bekerja sesuai dengan tujuan.

Jika terdapat kesalahan, periksa pesan error yang ditampilkan oleh DartPad dan perbaiki bagian kode yang bermasalah.

10. Desain dan Pemilihan Warna

Desain aplikasi merupakan salah satu aspek penting dalam pengembangan perangkat lunak. Tampilan yang rapi dan konsisten dapat membantu pengguna memahami fungsi setiap bagian aplikasi.

Pada aplikasi Biodata Siswa, warna utama yang dipilih adalah indigo atau biru keunguan. Warna ini digunakan sebagai warna dasar antarmuka untuk memberikan kesan modern, teratur, dan profesional.

Warna putih atau warna netral digunakan pada latar belakang tema terang agar tulisan dan informasi mudah dibaca. Sementara itu, tema gelap menggunakan latar yang lebih gelap untuk memberikan alternatif tampilan.

Pemilihan warna dilakukan dengan mempertimbangkan keterbacaan teks, kejelasan tombol, dan kenyamanan penggunaan. Warna pada tombol utama dibuat konsisten agar pengguna mudah mengenali tindakan penting, seperti menyimpan data dan menambahkan siswa.

Foto profil ditampilkan dalam bentuk lingkaran agar tampilan daftar siswa lebih menarik. Informasi siswa disusun menggunakan kartu sehingga setiap data memiliki batas visual yang jelas.

Jarak antarbagian juga diperhatikan untuk menghindari tampilan yang terlalu padat. Formulir disusun secara vertikal agar pengguna dapat mengisi biodata dari atas ke bawah dengan mudah.

Secara keseluruhan, desain aplikasi mengutamakan kesederhanaan, keterbacaan, dan kemudahan penggunaan. Desain ini juga dapat dikembangkan lebih lanjut dengan menambahkan ikon, ilustrasi, animasi, atau variasi warna sesuai kebutuhan.

11. Hasil Penerapan

Setelah proses pembuatan dan pengujian dilakukan, aplikasi Biodata Siswa diharapkan dapat menjalankan fungsi utama pengelolaan data.

Pada halaman utama, pengguna dapat melihat daftar siswa dan jumlah data yang tersedia. Jika belum ada data, aplikasi menampilkan informasi bahwa daftar masih kosong.

Ketika tombol Tambah Siswa ditekan, aplikasi membuka halaman formulir. Pengguna dapat memasukkan nama, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin.

Jika ada kolom wajib yang belum diisi, aplikasi menampilkan pesan validasi. Setelah data dilengkapi, pengguna dapat menyimpannya dan kembali ke halaman utama.

Data yang berhasil disimpan akan muncul dalam daftar siswa. Pengguna dapat mengetuk data tersebut untuk melihat halaman detail yang berisi informasi lengkap.

Apabila terdapat kesalahan pada data, pengguna dapat membuka menu Edit dan memperbaiki informasi yang diperlukan. Perubahan yang disimpan akan menggantikan data sebelumnya.

Pengguna juga dapat menghapus data melalui menu Hapus. Sebelum penghapusan dilakukan, aplikasi menampilkan dialog konfirmasi.

Fitur pencarian memungkinkan pengguna menemukan siswa berdasarkan nama. Sementara itu, counter jumlah siswa akan menunjukkan jumlah objek siswa yang terdapat dalam daftar.

Pengguna dapat mengganti tema aplikasi melalui tombol dark mode. Dengan adanya fitur tersebut, tampilan aplikasi dapat disesuaikan dengan preferensi pengguna.

Hasil penerapan ini menunjukkan bahwa Flutter dapat digunakan untuk membangun aplikasi pengelolaan data sederhana dengan formulir, daftar, navigasi, dan interaksi pengguna.

Namun, hasil akhir tetap perlu diuji secara langsung pada DartPad. Keberhasilan setiap fitur bergantung pada kode yang digunakan dan kondisi lingkungan pengujian.

Pada versi sederhana, data hanya disimpan dalam memori selama aplikasi berjalan. Oleh karena itu, data belum dapat dipertahankan setelah aplikasi dimulai ulang.

12. Kelebihan dan Kekurangan Aplikasi

12.1 Kelebihan Aplikasi

1. Mudah digunakan

Aplikasi memiliki tampilan sederhana dengan tombol dan formulir yang mudah dipahami.

2. Pengelolaan data lebih praktis

Pengguna dapat menambah, menampilkan, mengubah, dan menghapus biodata siswa melalui satu aplikasi.

3. Memiliki validasi input

Validasi membantu mengurangi kesalahan akibat kolom wajib yang belum diisi.

4. Dilengkapi pencarian

Pengguna dapat mencari data berdasarkan nama tanpa harus membaca seluruh daftar.

5. Tampilan interaktif

Aplikasi menggunakan kartu, ikon, foto profil, dan animasi navigasi untuk meningkatkan pengalaman penggunaan.

6. Dapat dibuat melalui DartPad

Pengembangan dan pengujian kode dapat dilakukan melalui peramban tanpa instalasi Flutter lengkap pada perangkat.

7. Mendukung pembelajaran pemrograman

Proyek ini membantu siswa memahami widget, class, objek, fungsi, navigasi, validasi, dan pengelolaan state.

12.2 Kekurangan Aplikasi

1. Penyimpanan belum permanen

Data yang tersimpan dalam List hanya berada di memori program. Data dapat hilang ketika aplikasi dimulai ulang.

2. Foto membutuhkan internet

Foto profil yang berasal dari Image.network membutuhkan koneksi internet. Jika alamat gambar tidak dapat diakses, gambar tidak akan tampil.

3. Belum menggunakan basis data

Aplikasi belum menggunakan basis data seperti SQLite atau layanan penyimpanan daring. Akibatnya, data belum dapat dikelola secara permanen dan terpusat.

4. Belum memiliki sistem login

Aplikasi belum menyediakan akun pengguna atau autentikasi untuk membatasi akses terhadap data.

5. Belum memiliki validasi data yang lengkap

Validasi dasar dapat memeriksa kolom kosong, tetapi belum tentu mendeteksi semua masalah, seperti NIS yang sama atau format data yang tidak sesuai.

6. Belum memiliki pengelolaan hak akses

Semua pengguna yang dapat membuka aplikasi dapat mengakses fitur pengelolaan data. Untuk penggunaan nyata, diperlukan pembatasan hak akses.

7. Bergantung pada lingkungan pengujian

DartPad memiliki keterbatasan dibandingkan proyek Flutter lengkap, terutama untuk fitur yang membutuhkan akses kamera, penyimpanan perangkat, dan plugin eksternal.

13. Pengembangan Aplikasi

Aplikasi Biodata Siswa masih dapat dikembangkan agar menjadi lebih lengkap, aman, dan bermanfaat.

13.1 Menambahkan Penyimpanan Permanen

Pengembangan pertama adalah menambahkan penyimpanan permanen menggunakan shared_preferences, SQLite, atau basis data lain.

shared_preferences dapat digunakan untuk menyimpan data sederhana secara lokal, sedangkan SQLite lebih sesuai untuk pengelolaan data terstruktur. Untuk aplikasi yang digunakan banyak perangkat, basis data daring dapat dipertimbangkan.

Dengan penyimpanan permanen, data siswa tidak langsung hilang ketika aplikasi dimulai ulang.

13.2 Menambahkan Fitur Kamera

Aplikasi dapat dikembangkan dengan menambahkan fitur pengambilan foto siswa melalui kamera atau pemilihan gambar dari galeri.

Pada proyek Flutter yang mendukung plugin, fitur tersebut dapat dibuat menggunakan package image_picker. Namun, implementasinya memerlukan konfigurasi tambahan dan tidak dapat langsung digunakan pada DartPad standar tanpa dukungan yang sesuai.

13.3 Menambahkan Validasi NIS

Validasi dapat ditingkatkan dengan memeriksa apakah NIS sudah digunakan oleh siswa lain.

NIS yang sama sebaiknya tidak diperbolehkan agar setiap siswa memiliki identitas yang berbeda dalam aplikasi.

13.4 Menambahkan Sistem Login

Fitur login dapat digunakan untuk membatasi akses aplikasi. Misalnya, hanya pengguna yang memiliki akun tertentu yang dapat menambah, mengubah, atau menghapus data siswa.

Pengembangan ini akan membuat aplikasi lebih sesuai untuk penggunaan administrasi sekolah.

13.5 Mengembangkan Tampilan Antarmuka

Tampilan aplikasi dapat diperbaiki dengan menambahkan ilustrasi, ikon yang konsisten, animasi transisi, dan susunan halaman yang lebih menarik.

Selain itu, desain dapat disesuaikan agar tetap nyaman digunakan pada layar ponsel maupun tablet.

13.6 Menambahkan Ekspor Data

Aplikasi dapat dikembangkan agar data siswa dapat diekspor ke format CSV atau PDF. Fitur tersebut dapat membantu pengguna membuat laporan dan menyimpan salinan data.

13.7 Meningkatkan Keamanan Data

Karena biodata siswa berisi informasi pribadi, aplikasi perlu dikembangkan dengan memperhatikan keamanan dan privasi. Data harus digunakan sesuai tujuan, akses perlu dibatasi, dan penyimpanan harus dirancang agar tidak mudah diakses pihak yang tidak berwenang.

Penggunaan data siswa sungguhan harus memperhatikan izin dan kebijakan privasi yang berlaku.

14. Kesimpulan

Berdasarkan kegiatan pembuatan aplikasi Biodata Siswa menggunakan Flutter di DartPad, dapat disimpulkan bahwa Flutter merupakan framework yang dapat digunakan untuk membangun aplikasi dengan tampilan interaktif dan struktur kode yang terorganisasi.

Melalui proyek ini, berbagai konsep dasar pemrograman dapat diterapkan secara langsung, seperti penggunaan class dan objek, pengelolaan List, formulir input, validasi, pemilihan tanggal, navigasi halaman, dan pembaruan tampilan menggunakan setState().

Aplikasi Biodata Siswa dirancang untuk mempermudah proses penambahan, penampilan, pencarian, perubahan, dan penghapusan data siswa. Fitur foto profil, halaman detail, penghitung jumlah siswa, dan dark mode juga memberikan pengalaman penggunaan yang lebih menarik.

DartPad membantu proses pembelajaran karena memungkinkan kode ditulis dan diuji melalui peramban. Dengan demikian, siswa dapat mempelajari dasar pengembangan aplikasi tanpa harus mempersiapkan lingkungan pengembangan yang terlalu rumit.

Meskipun demikian, aplikasi masih memiliki keterbatasan, terutama pada penyimpanan data yang belum permanen, penggunaan foto daring, dan belum adanya sistem autentikasi. Keterbatasan tersebut dapat menjadi bahan pengembangan pada tahap berikutnya.

Secara keseluruhan, proyek ini memberikan pengalaman praktis dalam membuat aplikasi sederhana dan menjadi langkah awal untuk mempelajari pengembangan aplikasi mobile secara lebih mendalam.

15. Penutup

Demikian laporan pembuatan aplikasi Biodata Siswa menggunakan Flutter di DartPad ini disusun sebagai dokumentasi kegiatan pembelajaran pemrograman.

Melalui kegiatan ini, diharapkan siswa dapat memahami dasar-dasar pengembangan aplikasi, mulai dari perancangan tampilan, penulisan kode, pengelolaan data, hingga pengujian fungsi aplikasi.

Pembuatan aplikasi ini juga mengajarkan pentingnya ketelitian dalam menulis kode, kemampuan menyelesaikan masalah, dan kemauan untuk terus belajar ketika menghadapi kesalahan dalam proses pengembangan.

Penulis menyadari bahwa aplikasi yang dibuat masih memiliki kekurangan dan memerlukan pengembangan lebih lanjut, khususnya pada aspek penyimpanan data, keamanan, dan kelengkapan fitur.

Oleh karena itu, kritik dan saran yang membangun sangat diharapkan agar aplikasi ini dapat diperbaiki dan dikembangkan menjadi lebih baik.

Semoga laporan dan proyek ini dapat memberikan manfaat bagi penulis maupun pembaca, serta menjadi motivasi untuk terus mempelajari Flutter dan teknologi pengembangan perangkat lunak lainnya.

Terima kasih.