TUGAS MEMBUAT APLIKASI BIODATA

TUTORIAL MEMBUAT APLIKASI BIODATA SISWA MENGGUNAKAN FLUTTER DAN DARTPAD

1. Pendahuluan

Perkembangan teknologi membuat aplikasi mobile semakin banyak digunakan untuk membantu aktivitas sehari-hari, termasuk dalam pengelolaan data siswa. Salah satu contoh aplikasi sederhana yang dapat dibuat adalah aplikasi Biodata Siswa.

Aplikasi Biodata Siswa merupakan aplikasi yang digunakan untuk menyimpan dan menampilkan informasi pribadi siswa, seperti nama, Nomor Induk Siswa (NIS), kelas, alamat, tanggal lahir, dan jenis kelamin.

Pada tutorial ini, kita akan membuat aplikasi Biodata Siswa menggunakan Flutter dengan bahasa pemrograman Dart. Aplikasi ini memiliki beberapa fitur, seperti menambahkan data siswa, menampilkan daftar biodata, melihat detail siswa, mengedit data, dan menghapus data.

Pembuatan aplikasi dilakukan menggunakan DartPad sehingga tidak memerlukan instalasi aplikasi pemrograman tambahan di komputer.

2. Tujuan Pembuatan Aplikasi

Tujuan dari pembuatan aplikasi Biodata Siswa ini adalah:

Mempelajari dasar-dasar pengembangan aplikasi menggunakan Flutter dan Dart.

Membuat formulir untuk memasukkan biodata siswa.

Memahami cara menyimpan dan menampilkan data menggunakan list.

Menerapkan fitur tambah, edit, hapus, dan detail biodata siswa.

Membuat tampilan aplikasi yang menarik dan mudah digunakan.

3. Mengenal Teknologi yang Digunakan

Sebelum membuat aplikasi, kita perlu mengetahui beberapa teknologi yang digunakan dalam proses pengembangan.

A. Flutter

Flutter adalah framework yang digunakan untuk membuat aplikasi dengan antarmuka interaktif. Flutter menyediakan berbagai widget yang dapat digunakan untuk menyusun tampilan aplikasi, seperti tombol, kolom input, kartu, dan daftar data.

B. Dart

Dart merupakan bahasa pemrograman yang digunakan dalam pengembangan aplikasi Flutter. Dalam aplikasi Biodata Siswa, Dart digunakan untuk mengelola data, memproses input, melakukan validasi, dan mengatur navigasi antarhalaman.

C. DartPad

DartPad merupakan editor kode berbasis web yang memungkinkan pengguna menulis dan menjalankan kode Dart maupun Flutter melalui browser.

DartPad dapat diakses melalui tautan berikut:

https://dartpad.dev/⁠�

Untuk membuat aplikasi, pilih mode Flutter, kemudian tuliskan kode pada editor yang tersedia.

4. Perancangan Aplikasi Biodata Siswa

Sebelum menulis kode program, kita perlu menentukan fitur dan tampilan yang akan dibuat.

Aplikasi Biodata Siswa ini memiliki tiga halaman utama.

A. Halaman Daftar Siswa

Halaman daftar siswa merupakan halaman utama yang menampilkan seluruh data siswa yang telah dimasukkan.

Pada halaman ini terdapat judul aplikasi, kolom pencarian, jumlah siswa, daftar biodata, dan tombol tambah.

Jika belum ada siswa yang ditambahkan, aplikasi akan menampilkan pesan "Belum ada data".

B. Halaman Form Biodata

Halaman form digunakan untuk memasukkan informasi siswa.

Formulir memiliki beberapa kolom, yaitu:

Nama lengkap.

NIS.

Kelas.

Alamat.

Tanggal lahir.

Jenis kelamin.

Pada halaman ini, pengguna dapat memasukkan biodata baru atau mengubah data yang sudah ada.

C. Halaman Detail Biodata

Halaman detail digunakan untuk menampilkan informasi lengkap dari siswa yang dipilih.

Informasi yang ditampilkan meliputi foto profil, nama, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin.

Halaman ini juga menyediakan tombol untuk mengedit atau menghapus biodata.

5. Langkah-Langkah Membuat Aplikasi

A. Membuat Struktur Data Siswa

Langkah pertama adalah membuat class Siswa untuk menentukan data yang dimiliki setiap siswa.

class Siswa {

  String nama;

  String nis;

  String kelas;

  String alamat;

  DateTime tanggalLahir;

  String jenisKelamin;

  Siswa({

    required this.nama,

    required this.nis,

    required this.kelas,

    required this.alamat,

    required this.tanggalLahir,

    required this.jenisKelamin,

  });

}

Class tersebut memiliki enam properti yang digunakan untuk menyimpan informasi siswa.

Dengan menggunakan class, data setiap siswa dapat dikelompokkan dalam satu objek sehingga lebih mudah dikelola.

B. Membuat Form Biodata

Setelah membuat model data, langkah berikutnya adalah membuat formulir untuk memasukkan biodata siswa.

Flutter menyediakan widget TextFormField yang dapat digunakan untuk menerima input teks dari pengguna.

Contoh kode:

TextFormField(

  decoration: const InputDecoration(

    labelText: 'Nama Lengkap',

    border: OutlineInputBorder(),

  ),

)

Kode tersebut menghasilkan kolom input yang memiliki label Nama Lengkap dan garis pembatas.

Untuk membuat formulir yang lengkap, widget TextFormField digunakan kembali untuk kolom NIS, kelas, dan alamat.

C. Menambahkan Validasi Form

Validasi diperlukan agar data yang dimasukkan sesuai dengan ketentuan.

Contohnya, nama tidak boleh kosong dan NIS harus berupa angka dengan panjang minimal empat karakter.

Validasi nama dapat dibuat menggunakan kode berikut:

validator: (value) {

  if (value == null || value.trim().isEmpty) {

    return 'Nama tidak boleh kosong';

  }

  return null;

},

Jika pengguna tidak mengisi nama, aplikasi akan menampilkan pesan kesalahan.

Untuk melakukan validasi seluruh formulir, kita dapat menggunakan GlobalKey<FormState>.

final _formKey = GlobalKey<FormState>();

Ketika tombol Simpan ditekan, aplikasi memeriksa apakah semua kolom telah memenuhi aturan validasi. Jika terdapat kesalahan, data tidak akan disimpan.

D. Menambahkan Tanggal Lahir dan Jenis Kelamin

Tanggal lahir dapat dipilih menggunakan fungsi showDatePicker.

Fungsi ini menampilkan kalender sehingga pengguna dapat menentukan tanggal lahir siswa.

Sementara itu, pilihan jenis kelamin dibuat menggunakan radio button yang menyediakan pilihan Laki-laki dan Perempuan.

Kedua fitur tersebut membuat pengisian biodata menjadi lebih mudah dan terstruktur.

E. Menyimpan Data ke Dalam List

Data siswa yang sudah diisi akan disimpan dalam sebuah list.

Contoh kode:

final List<Siswa> daftarSiswa = [];

List tersebut digunakan untuk menampung objek siswa yang ditambahkan melalui formulir.

Ketika pengguna menekan tombol Simpan, aplikasi membuat objek Siswa baru dan memasukkannya ke dalam list.

Setelah itu, tampilan daftar siswa diperbarui sehingga data baru dapat langsung terlihat.

Catatan: Dalam implementasi ini, data hanya disimpan sementara di memori. Untuk mempertahankan data setelah aplikasi dimulai ulang, diperlukan penyimpanan permanen.

F. Menampilkan Daftar Biodata

Untuk menampilkan data siswa, kita dapat menggunakan widget ListView.builder.

Contoh kode:

ListView.builder(

  itemCount: daftarSiswa.length,

  itemBuilder: (context, index) {

    final siswa = daftarSiswa[index];

    return Card(

      child: ListTile(

        title: Text(siswa.nama),

        subtitle: Text(

          'NIS: ${siswa.nis}\n'

          'Kelas: ${siswa.kelas}',

        ),

      ),

    );

  },

)

ListView.builder digunakan untuk membuat daftar berdasarkan jumlah data yang tersedia.

Widget Card memberikan tampilan berbentuk kartu, sedangkan ListTile digunakan untuk menyusun informasi siswa.

Dengan cara ini, daftar biodata dapat ditampilkan secara rapi.

G. Membuat Halaman Detail

Ketika pengguna memilih salah satu siswa, aplikasi akan membuka halaman detail.

Navigasi antarhalaman dapat dilakukan menggunakan Navigator.push().

Halaman detail menerima objek siswa yang dipilih, kemudian menampilkan seluruh informasi yang tersimpan di dalam objek tersebut.

Dengan demikian, pengguna dapat melihat biodata secara lengkap tanpa memenuhi halaman daftar dengan terlalu banyak informasi.

H. Menambahkan Fitur Edit dan Hapus

Fitur Edit digunakan untuk mengubah informasi siswa yang sudah tersimpan.

Ketika tombol Edit ditekan, formulir dibuka kembali dengan data sebelumnya sudah terisi. Pengguna dapat mengubah informasi yang diperlukan dan menyimpan perubahan tersebut.

Sementara itu, fitur Hapus digunakan untuk menghilangkan data siswa dari daftar.

Sebelum data dihapus, aplikasi menampilkan dialog konfirmasi menggunakan AlertDialog. Jika pengguna mengonfirmasi penghapusan, data akan dihapus dari list dan tidak lagi muncul pada halaman daftar.

6. Penjelasan Komponen Penting dalam Kode

A. Fungsi Form dan GlobalKey

Form digunakan untuk mengelompokkan beberapa kolom input agar dapat dikelola dan divalidasi secara bersamaan.

GlobalKey<FormState> digunakan untuk mengakses status Form dari bagian kode lain.

Pada aplikasi Biodata Siswa, kedua komponen tersebut membantu memastikan bahwa data telah diisi sesuai aturan sebelum disimpan.

B. Fungsi Validator

Validator merupakan fungsi untuk memeriksa input pengguna.

Pada aplikasi ini, validator digunakan untuk memastikan bahwa nama dan kelas tidak kosong, NIS terdiri atas minimal empat angka, serta alamat memiliki minimal lima karakter.

Jika input tidak sesuai, aplikasi menampilkan pesan kesalahan agar pengguna dapat memperbaikinya.

C. Alur Navigasi

Navigasi digunakan untuk berpindah dari satu halaman ke halaman lain.

Aplikasi menggunakan Navigator.push() untuk membuka halaman baru dan Navigator.pop() untuk kembali ke halaman sebelumnya.

Alur navigasi dimulai dari halaman daftar, dilanjutkan ke halaman form ketika pengguna menambahkan data, kemudian kembali ke daftar setelah data disimpan.

Pengguna juga dapat membuka halaman detail dengan menekan salah satu siswa.

D. Hero Animation

Hero merupakan widget Flutter yang digunakan untuk memberikan animasi transisi pada elemen visual ketika berpindah halaman.

Pada aplikasi Biodata Siswa, Hero animation digunakan pada foto profil. Foto akan terlihat berpindah dari halaman daftar ke halaman detail secara halus.

Penggunaan animasi ini membuat tampilan aplikasi terasa lebih interaktif.

7. Dokumentasi Screenshot Aplikasi

Setelah aplikasi selesai dibuat, lakukan pengujian dan ambil screenshot untuk mendokumentasikan hasilnya.

A. Halaman Form Kosong

Halaman ini menampilkan formulir biodata yang belum diisi. Pengguna dapat memasukkan nama, NIS, kelas, alamat, tanggal lahir, dan jenis kelamin.

B. Halaman Form Terisi

Halaman ini menunjukkan formulir yang telah diisi dengan data siswa sebelum disimpan.

C. Halaman List Biodata

Halaman ini menampilkan data siswa yang berhasil disimpan. Setiap siswa ditampilkan dalam bentuk kartu yang berisi informasi singkat.

D. Halaman Detail

Halaman ini menampilkan informasi lengkap siswa, termasuk foto profil dan seluruh biodata.

E. Screenshot Saat Terjadi Error

Screenshot ini digunakan untuk menunjukkan kesalahan yang ditemukan ketika proses pembuatan atau pengujian aplikasi.

F. Screenshot Setelah Error Teratasi

Screenshot ini menunjukkan bahwa aplikasi sudah dapat dijalankan kembali setelah kesalahan berhasil diperbaiki.

Catatan: Screenshot harus berasal dari aplikasi yang benar-benar kamu jalankan. Jika tidak mengalami error, lakukan pengujian yang relevan dan dokumentasikan kendala nyata yang ditemukan.

8. Kendala dan Solusi

Dalam proses pembuatan aplikasi, beberapa kendala mungkin terjadi.

Salah satunya adalah kesalahan ketika menggunakan widget yang tidak didukung oleh versi Flutter pada DartPad. Hal ini dapat menyebabkan kode tidak dapat dijalankan.

Untuk mengatasinya, periksa pesan error yang ditampilkan oleh editor. Selanjutnya, periksa dokumentasi Flutter dan sesuaikan kode dengan widget atau API yang didukung.

Kendala lainnya adalah foto profil tidak muncul karena alamat gambar tidak dapat diakses atau koneksi internet bermasalah.

Solusinya adalah memeriksa alamat gambar dan menambahkan errorBuilder pada Image.network agar aplikasi tetap dapat menampilkan ikon pengganti ketika gambar gagal dimuat.

Setelah perbaikan dilakukan, jalankan kembali aplikasi dan uji fitur yang sebelumnya mengalami masalah.

9. Fitur Kreatif yang Ditambahkan

Aplikasi Biodata Siswa dilengkapi dengan fitur tambahan untuk meningkatkan kenyamanan pengguna.

A. Pencarian Nama Siswa

Fitur pencarian memungkinkan pengguna menemukan siswa berdasarkan nama.

Pengguna cukup mengetikkan nama pada kolom pencarian. Aplikasi kemudian menyaring daftar dan menampilkan data yang sesuai dengan kata kunci.

Fitur ini berguna ketika jumlah data siswa semakin banyak.

B. Counter Jumlah Siswa

Counter digunakan untuk menampilkan jumlah siswa yang tersimpan pada bagian AppBar.

Jumlah siswa diperoleh dari banyaknya elemen dalam daftarSiswa.

Ketika data ditambahkan atau dihapus, jumlah tersebut ikut diperbarui sehingga pengguna dapat mengetahui jumlah siswa yang sedang tersimpan.

C. Animasi Foto Profil

Hero animation digunakan untuk membuat perpindahan foto profil lebih menarik ketika pengguna membuka halaman detail.

Animasi ini memberikan efek transisi yang halus dan membuat pengalaman penggunaan aplikasi menjadi lebih interaktif.

10. Kesimpulan

Pembuatan aplikasi Biodata Siswa menggunakan Flutter memberikan pemahaman mengenai dasar pengembangan aplikasi mobile dengan bahasa pemrograman Dart.

Melalui aplikasi ini, kita dapat mempelajari cara membuat formulir input, menerapkan validasi data, menyimpan data ke dalam list, serta menampilkan biodata menggunakan ListView.

Selain itu, aplikasi ini menerapkan navigasi antarhalaman, fitur tambah, edit, hapus, pemilihan tanggal lahir, pilihan jenis kelamin, dan tampilan foto profil dengan Hero animation.

Fitur pencarian nama dan penghitung jumlah siswa juga membuat aplikasi lebih mudah digunakan.

Secara keseluruhan, aplikasi Biodata Siswa merupakan contoh sederhana penerapan Flutter dalam membangun aplikasi pengelolaan data yang memiliki antarmuka interaktif dan mudah dipahami.

Penutup

Demikian tutorial pembuatan aplikasi Biodata Siswa menggunakan Flutter dan DartPad. Semoga tutorial ini bermanfaat bagi pembaca yang ingin mempelajari dasar-dasar pengembangan aplikasi mobile.

Dengan terus berlatih dan mencoba fitur baru, kita dapat mengembangkan aplikasi sederhana menjadi aplikasi yang lebih lengkap dan bermanfaat.