TUGAS MEMBUAT APLIKASI KAS KELAS

MEMBUAT APLIKASI KAS KELAS

1. Identitas

Nama: EKA RAMDANI

Kelas: XI RPL 2

2. Tujuan Praktikum

Tujuan dari praktikum Flutter pembuatan aplikasi Kas Kelas ini adalah:

1. Memahami dasar pengembangan aplikasi menggunakan Flutter dan bahasa pemrograman Dart.

2. Menerapkan "Form", "TextFormField", dan "GlobalKey<FormState>" untuk membuat formulir input transaksi.

3. Memahami penggunaan "validator" untuk memvalidasi data sebelum disimpan.

4. Mempelajari cara menghitung total pemasukan, pengeluaran, dan saldo kas kelas.

5. Memahami navigasi ant halaman menggunakan "Navigator.push" serta menerapkan animasi transisi menggunakan "Hero".

3. Screenshot Aplikasi

Pada bagian ini, ditampilkan beberapa screenshot hasil praktikum aplikasi Kas Kelas yang telah dibuat menggunakan Flutter di DartPad.

A. Halaman Form Kosong

Halaman form kosong merupakan tampilan awal untuk menambahkan transaksi baru. Pada halaman ini terdapat beberapa kolom input, yaitu Keterangan, Jumlah, Nama, Jenis Transaksi, Tanggal, dan Catatan. Pengguna dapat mengisi data sesuai transaksi kas kelas yang ingin dicatat.

B. Halaman Form Terisi

Halaman form terisi menunjukkan contoh pengisian data transaksi. Pengguna memasukkan keterangan transaksi, nominal uang, nama siswa, jenis transaksi, tanggal, dan catatan tambahan jika diperlukan. Setelah seluruh data wajib diisi dengan benar, pengguna dapat menekan tombol Simpan Transaksi.

C. Halaman List Transaksi dan Ringkasan Saldo

Halaman utama menampilkan ringkasan keuangan yang terdiri dari total pemasukan, total pengeluaran, dan saldo kas kelas. Di bawah ringkasan terdapat daftar riwayat transaksi yang menampilkan keterangan, nama, tanggal, serta nominal transaksi.

Pada halaman ini juga terdapat fitur tambahan berupa filter Semua, Pemasukan, dan Pengeluaran. Fitur tersebut membantu pengguna menampilkan transaksi sesuai jenisnya tanpa mengubah perhitungan saldo keseluruhan.

D. Halaman Detail Transaksi

Halaman detail digunakan untuk melihat informasi transaksi secara lebih lengkap. Informasi yang ditampilkan meliputi keterangan, jumlah uang, nama, jenis transaksi, tanggal, dan catatan. Halaman ini juga menyediakan tombol Edit Transaksi dan Hapus Transaksi agar data dapat dikelola dengan lebih mudah.

E. Screenshot Saat Terjadi Error (Wajib)

Pada saat pengujian aplikasi melalui DartPad menggunakan browser di perangkat HP, muncul pesan error yang memuat "TextInputClient.updateEditingState". Error tersebut terlihat ketika proses input teks sedang berlangsung.

Screenshot ini digunakan sebagai bukti kendala yang ditemukan selama praktikum sebelum dilakukan perbaikan.

F. Screenshot Setelah Error Teratasi

Setelah dilakukan pemeriksaan dan percobaan perbaikan, aplikasi diuji kembali untuk memastikan kolom input dapat digunakan, data dapat divalidasi, dan transaksi dapat disimpan. Screenshot pada bagian ini harus menunjukkan kondisi aplikasi setelah perbaikan benar-benar berhasil.

4. Penjelasan Kode

A. Fungsi Form dan GlobalKey

"Form" digunakan untuk mengelompokkan beberapa komponen input dalam satu formulir. Pada aplikasi Kas Kelas, formulir digunakan untuk memasukkan informasi transaksi seperti keterangan, jumlah, nama, jenis transaksi, tanggal, dan catatan.

Sementara itu, "GlobalKey<FormState>" digunakan untuk mengakses dan mengelola status formulir. Contoh penerapannya adalah:

final formKey = GlobalKey<FormState>();

Key tersebut kemudian dipasang pada widget Form:

Form(

  key: formKey,

  child: ListView(

    children: [

      // Komponen input

    ],

  ),

)

Sebelum data disimpan, aplikasi memeriksa formulir menggunakan:

if (!formKey.currentState!.validate()) return;

Jika terdapat input yang tidak valid, proses penyimpanan dihentikan sampai data diperbaiki.

B. Cara Kerja Validator

"validator" berfungsi untuk memeriksa apakah data yang dimasukkan pengguna telah memenuhi ketentuan. Jika data tidak sesuai, aplikasi menampilkan pesan kesalahan di bawah kolom input.

Contoh validator untuk kolom keterangan:

validator: (value) {

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

    return 'Keterangan wajib diisi';

  }

  return null;

}

Kode tersebut memeriksa apakah kolom keterangan kosong. Jika kosong, aplikasi menampilkan pesan bahwa keterangan wajib diisi. Jika data sudah sesuai, validator mengembalikan "null", yang berarti input tersebut valid.

Pada kolom jumlah, digunakan "int.tryParse()" untuk memastikan bahwa nilai yang dimasukkan berupa angka bulat dan lebih besar dari nol.

C. Cara Menghitung Saldo

Saldo kas dihitung berdasarkan selisih antara total pemasukan dan total pengeluaran.

Rumus yang digunakan adalah:

Saldo = Total Pemasukan − Total Pengeluaran

Pada kode Flutter, perhitungan dilakukan dengan menjumlahkan transaksi berdasarkan jenisnya:

int get pemasukan => transaksiList

    .where((t) => t.jenis == 'Pemasukan')

    .fold(0, (total, t) => total + t.jumlah);

int get pengeluaran => transaksiList

    .where((t) => t.jenis == 'Pengeluaran')

    .fold(0, (total, t) => total + t.jumlah);

int get saldo => pemasukan - pengeluaran;

Metode "where()" digunakan untuk memilih transaksi berdasarkan jenisnya, sedangkan "fold()" digunakan untuk menjumlahkan nominal setiap transaksi.

Sebagai contoh, apabila total pemasukan sebesar Rp100.000 dan total pengeluaran sebesar Rp25.000, saldo kas yang tersisa adalah Rp75.000. Perhitungan saldo tetap menggunakan seluruh transaksi meskipun pengguna sedang memilih salah satu tab filter.

D. Alur Navigasi

Navigasi digunakan untuk berpindah dari satu halaman ke halaman lain. Aplikasi Kas Kelas menggunakan "Navigator.push()" untuk membuka halaman form atau detail transaksi.

Alur navigasinya adalah sebagai berikut:

1. Pengguna membuka halaman utama aplikasi.

2. Pengguna menekan tombol Tambah Transaksi untuk membuka formulir.

3. Setelah formulir diisi dan disimpan, data dikembalikan ke halaman utama.

4. Pengguna memilih salah satu transaksi untuk membuka halaman detail.

5. Pada halaman detail, pengguna dapat memilih Edit Transaksi atau Hapus Transaksi.

6. Setelah proses selesai, halaman utama diperbarui menggunakan "setState()" agar tampilan menyesuaikan perubahan data.

Dengan alur tersebut, pengguna dapat menambah, melihat, mengubah, dan menghapus transaksi melalui halaman yang berbeda.

E. Fungsi Hero Animation

"Hero" merupakan widget Flutter yang digunakan untuk membuat animasi transisi pada elemen yang sama ketika berpindah halaman.

Pada aplikasi Kas Kelas, "Hero" diterapkan pada ikon transaksi di halaman utama dan halaman detail. Saat pengguna membuka detail transaksi, ikon tersebut akan terlihat berpindah dengan animasi sehingga perpindahan halaman terasa lebih halus.

Contoh penggunaannya:

Hero(

  tag: 'transaksi-${identityHashCode(data)}',

  child: CircleAvatar(

    child: Icon(Icons.arrow_downward),

  ),

)

Nilai "tag" digunakan untuk menghubungkan widget Hero yang sesuai pada kedua halaman. Tag tersebut harus sama untuk elemen yang akan dianimasikan.

5. Kendala & Solusi

Salah satu kendala yang ditemukan selama praktikum adalah munculnya pesan error "TextInputClient.updateEditingState" ketika melakukan input melalui DartPad di browser HP.

Error tersebut muncul saat proses input teks berlangsung. Penyebab pastinya tidak dapat dipastikan hanya dari bagian akhir pesan error, sehingga perlu dilakukan pemeriksaan lebih lanjut.

Langkah penanganan yang dicoba adalah:

1. Memeriksa kode pada kolom input, khususnya "TextEditingController", "TextInputType.number", dan fungsi "validator".

2. Memastikan bahwa kolom jumlah menggunakan "int.tryParse()" agar input yang bukan angka dapat ditangani dengan baik.

3. Menjalankan ulang aplikasi melalui tombol Run pada DartPad.

4. Menutup dan membuka kembali keyboard perangkat.

5. Menguji aplikasi kembali untuk memastikan input, validasi, dan penyimpanan transaksi berjalan dengan benar.

Validasi input membantu mencegah data yang tidak sesuai masuk ke aplikasi, tetapi belum tentu menyelesaikan error yang berasal dari interaksi keyboard dan browser. Oleh karena itu, screenshot setelah perbaikan perlu diambil setelah aplikasi benar-benar berhasil diuji kembali.

6. Fitur Kreatif yang Ditambahkan

Fitur tambahan yang dibuat pada aplikasi Kas Kelas adalah filter transaksi menggunakan tab Semua, Pemasukan, dan Pengeluaran.

Fitur ini memudahkan pengguna untuk melihat transaksi berdasarkan jenisnya. Ketika tab Semua dipilih, seluruh transaksi ditampilkan. Ketika tab Pemasukan dipilih, hanya transaksi pemasukan yang terlihat. Begitu juga ketika tab Pengeluaran dipilih, daftar hanya menampilkan transaksi pengeluaran.

Filter dibuat menggunakan widget "ChoiceChip" dan variabel "filterJenis". Perubahan pilihan tab dikelola dengan "setState()" sehingga daftar transaksi diperbarui secara langsung.

Fitur ini tidak mengubah data transaksi maupun perhitungan saldo. Filter hanya memengaruhi transaksi yang ditampilkan pada daftar riwayat.

7. Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa Flutter dapat digunakan untuk membuat aplikasi pencatatan kas kelas dengan tampilan yang interaktif. Melalui praktikum ini, saya mempelajari cara membuat formulir input, menerapkan validasi data, menghitung saldo secara otomatis, menampilkan daftar transaksi, serta mengelola perpindahan halaman menggunakan Navigator.

Saya juga mempelajari penggunaan animasi Hero untuk memperhalus perpindahan halaman dan menerapkan fitur filter agar daftar transaksi lebih mudah digunakan. Selain itu, proses pengujian membantu saya memahami pentingnya membaca pesan error, memeriksa kode, dan menguji kembali aplikasi setelah perbaikan.

Dengan demikian, praktikum ini menambah pemahaman saya mengenai dasar pengembangan aplikasi menggunakan Flutter dan penerapannya dalam pembuatan aplikasi sederhana yang bermanfaat untuk pencatatan keuangan kelas.