4.1 Membuat Project Laravel

Pada tahap ini, dilakukan pembuatan project, konfigurasi environment, dan logika sistem.

4.2 Pembuatan Project dan Konfigurasi Database

Langkah pertama adalah membuat project Laravel. Setelah project berhasil dibuat, jalankan perintah npm install dan npm run build untuk menginstal dependensi frontend dan membangun aset.

Setelah project selesai, dilakukan konfigurasi database pada file .env. Hal ini bertujuan agar aplikasi dapat terkoneksi ke database MySQL yang telah dibuat melalui interface (phpMyAdmin).

4.2 Implementasi Autentikasi

Untuk fitur login dan register, digunakan package laravel/ui dengan framework Bootstrap. Hal ini mempermudah proses scaffolding halaman autentikasi.

Setelah berhasil, silakan buka halaman login dan register. Jika berhasil maka akan menampilkan seperti berikut.

4.3 Kustomisasi Database dan Seeding

Dilakukan penambahan kolom pada tabel users untuk mengakomodasi kebutuhan sistem informasi sekolah. Penambahan kolom username, level, dan nama dilakukan melalui migration baru.

a. Custom Table Users

Authentication Laravel secara otomatis akan menggunakan table Users yang berisi tentang informasi data user, berikut struktur table users. Dengan menggunakan perintah php artisan make:migration create_table_users, maka ada pada tabel pada database dengan struktur berikut.

Selanjutnya buka folder migration yang sudah di buat dan tulis kode berikut.

b. Seeder untuk Admin

Langkah selanjutnya setelah mengisikan tabel users adalah mengisi data pengguna melalui fitur seeding. Untuk menguji, buatlah seeder bernama AdminSeeder, dengan menggunakan perintah php artisan make:seeder AdminSeeder.

Setelah perintah dijalankan, file AdminSeeder.php pada folder database/seeders. Selanjutnya, silakan akses file tersebut dan masukkan kode berikut untuk menambahkan data administrator.

Selanjutnya untuk menjalankan seeding dengan cara menggunakan perintah berikut: php artisan db:seed --class=AdminSeeder. Jika berhasil maka akan muncul seperti gambar berikut.

4.4 Integrasi Template SB Admin 2

Setelah autentikasi Laravel berhasil diimplementasikan untuk menampilkan dashboard, langkah selanjutnya adalah melakukan kustomisasi template aplikasi agar sesuai dengan desain yang diinginkan. Pada studi kasus ini, kami menggunakan template SB Admin 2 berbasis framework Bootstrap. Proses pengimplementasian dilakukan dengan mengunduh template dari situs resmi, mengekstrak berkas tersebut, kemudian membuat direktori baru bernama sb-admin di dalam folder public project Laravel untuk menyimpan seluruh aset template tersebut.

a. Halaman Login Aplikasi

Maka output yang akan di hasilkan adalah sebagai berikut.

b. Layout Global

Tahap berikutnya adalah membuat layout global yang berfungsi sebagai kerangka utama bagi keseluruhan aplikasi. Mengingat file app.blade.php sudah digunakan untuk halaman autentikasi (login), maka diperlukan pembuatan layout alternatif. Oleh karena itu, dibuatlah file main.blade.php di dalam direktori views/layouts sebagai layout utama yang akan digunakan oleh seluruh halaman yang membutuhkan tampilan dashboard. Kode program untuk layout global adalah sebagai berikut.

c. Sidebar

Buat file pada folder layouts dengan nama sidebar.blade.php dengan kode program berikut.

d. Topbar

Buat file pada folder layouts dengan nama topbar.blade.php dan isi dengan kode program berikut.

e. Hasil Konfigurasi Template

Jika konfigurasi berhasil maka tampilan nya akan menjadi seperti berikut ini.

4.5 Manajemen Users

Tahap berikutnya adalah membangun fitur manajemen pengguna. Mengingat fitur ini menerapkan fungsi CRUD (Create, Read, Update, dan Delete) secara penuh, maka kita akan menggunakan Resource Controller. Langkah ini dilakukan melalui terminal dengan menjalankan perintah php artisan make:controller UserController --resource.

Selanjutnya ini kode program berikut pada route web.

4.6 File UserController

Setelah rute sudah berhasil di buat, selanjutnya adalah isi file tersebut seperti pada gambar.

4.7 Create Users

Route untuk menampilkan view form tambah data user adalah user/create. Silahkan buka file UserController kemudian pada action create edit kode program menjadi seperti berikut.

Jika sudah, silahkan di cek apakah hasilnya sudah sama dengan gambar berikut.

4.8 Read / List Users

Selanjutnya setelah fungsi create selesai, kita akan menyimpan dan menampilkan data user. Untuk menampilkan data user kita akan menggunakan method GET pada rute localhost/users yang mana rute ini merupakan action index pada UserController. Buka action index kemudian edit menjadi seperti kode program berikut.

Selanjutnya buat file dengan nama index.blade.php pada folder views/user dan isi dengan kode program berikut.

Untuk mengecek apakah sudah berhasil, coba lakukan penginputan data seperti pada gambar.

Setelah di tambahkan kode ini maka tampilan list user akan menjadi seperti berikut.

4.9 Update User

Tahap berikutnya dalam proses pengelolaan data pengguna adalah menyediakan antarmuka untuk mengedit data pengguna. Langkah ini dimulai dengan mengimplementasikan logika pada file edit.blade.php di dalam direktori views/user, yang akan memanfaatkan method edit pada UserController serta menggunakan method HTTP PUT untuk proses pengiriman perubahan.

Saat pengguna mengakses URL dengan format users/{user}/edit, di mana {user} merepresentasikan ID unik dari data yang dipilih. Langkah berikut adalah mengimplementasikan logika perubahan data pada method edit di dalam UserController.

Tampilan form jika sudah akan menjadi seperti ini.

4.10 Delete Users

Tambahkan tombol atau link pada list user, silahkan buka view user index.blade.php dan tambahkan kode program berikut di bawah link edit.

Untuk mengecek apakah sudah berhasil, coba lakukan penghapusan data seperti pada gambar.

4.1 Mengecek Kebutuhan Sistem Laravel

Sebelum membuat project Laravel, terlebih dahulu dilakukan pengecekan terhadap beberapa tools yang dibutuhkan. Laravel membutuhkan PHP, Composer, Git, Node JS, dan NPM agar proses pembuatan serta pengembangan project dapat berjalan dengan baik.

Bisa dilihat pada gambar untuk bagaimana cara mengecek kebutuhan system dari Laravel.

Setelah perintah tersebut dijalankan, terminal akan menampilkan versi dari masing-masing tools. Jika seluruh tools sudah menampilkan versi, maka tools tersebut sudah berhasil terpasang dan dapat digunakan.

4.2 Membuat Project Laravel

Setelah semua kebutuhan sistem terpenuhi, langkah selanjutnya adalah membuat project Laravel. Pada praktikum ini, project Laravel dapat dibuat menggunakan Composer atau Laravel Installer.

Gunakan perintah composer create-project laravel/laravel:^12 PraktWeb1 --prefer-dist.

4.3 Masuk ke Folder Project

Setelah project berhasil dibuat, langkah berikutnya adalah masuk ke dalam folder project menggunakan perintah cd PraktWeb1.

4.4 Menjalankan Project Laravel

Untuk menjalankan project Laravel, digunakan perintah Artisan php artisan serve. Setelah perintah dijalankan, Laravel akan menjalankan server lokal. Biasanya aplikasi dapat diakses melalui browser dengan alamat http://127.0.0.1:8000. Jika berhasil, maka halaman awal Laravel akan tampil pada browser.

4.5 Menampilkan Halaman Hello World

Setelah project Laravel berhasil dijalankan, langkah berikutnya adalah mencoba menampilkan halaman sederhana. Hal ini dilakukan untuk memastikan bahwa routing dan tampilan pada Laravel dapat berjalan dengan baik.

Route sederhana dapat dibuat untuk menampilkan teks Hello World pada browser.

4.6 Challenge

• Buat controller, beri nama UserController.
• Di dalam controller, buat sebuah function dengan nama index.
• Buat view di dalam folder resources dengan struktur user/index.
• Dalam file index, buat tampilan HTML sederhana.
• Buatkan routing /user menggunakan view tersebut.

4.1 Konfigurasi Database

Langkah pertama yang dilakukan adalah mengaktifkan Apache dan MySQL melalui XAMPP Control Panel. Apache digunakan untuk menjalankan server lokal, sedangkan MySQL digunakan sebagai database pada project Laravel.

Setelah MySQL aktif, buka phpMyAdmin melalui browser dengan alamat http://localhost/phpmyadmin. Kemudian buat database baru dengan nama praktikum_laravel. Database ini akan digunakan untuk menyimpan tabel dan data yang dibuat melalui Laravel.

Setelah database dibuat, langkah berikutnya adalah membuka file .env pada project Laravel. Pada file tersebut, bagian konfigurasi database diubah agar project Laravel dapat terhubung dengan database yang sudah dibuat sebelumnya.

Konfigurasi yang digunakan adalah DB_CONNECTION=mysql, DB_HOST=127.0.0.1, DB_PORT=3306, DB_DATABASE=praktikum_laravel, DB_USERNAME=root, dan DB_PASSWORD=. Pada XAMPP, username database biasanya menggunakan root, sedangkan password dikosongkan.

4.2 Membuat Migration Table Products

Setelah konfigurasi database selesai, langkah berikutnya adalah membuat migration. Migration digunakan untuk membuat dan mengelola struktur tabel database melalui kode program. Dengan migration, pembuatan tabel dapat dilakukan langsung dari Laravel tanpa harus membuat tabel secara manual melalui phpMyAdmin.

Untuk membuat migration tabel products, digunakan perintah php artisan make:migration create_products_table pada terminal. Setelah perintah dijalankan, Laravel akan membuat file migration baru di dalam folder database/migrations.

4.3 Mengisi Struktur Tabel pada Migration

Setelah file migration berhasil dibuat, langkah berikutnya adalah mengatur struktur tabel pada file migration tersebut. File migration yang dibuat digunakan untuk menentukan kolom apa saja yang akan ada di dalam tabel products.

Pada bagian function up(), ditambahkan struktur tabel seperti id, name, price, description, created_at, dan updated_at. Kolom-kolom tersebut digunakan untuk menyimpan data produk yang nantinya akan ditampilkan pada halaman web.

Selanjutnya, pada bagian function down(), dituliskan perintah Schema::dropIfExists('products'). Function down() digunakan untuk menghapus tabel jika migration dibatalkan atau dilakukan rollback.

4.4 Menjalankan Migration

Setelah struktur tabel selesai dibuat pada file migration, langkah berikutnya adalah menjalankan migration. Perintah yang digunakan adalah php artisan migrate. Perintah tersebut digunakan untuk menjalankan file migration yang sudah dibuat, sehingga tabel products secara otomatis terbentuk pada database praktikum_laravel.

Untuk memastikan tabel berhasil dibuat, database dapat dicek melalui phpMyAdmin. Jika berhasil, maka tabel products akan muncul di dalam database.

4.5 Membuat Seeder

Setelah tabel berhasil dibuat, langkah selanjutnya adalah membuat seeder. Seeder berfungsi untuk mengisi data awal ke dalam database. Dengan menggunakan seeder, data contoh dapat dimasukkan ke tabel tanpa harus menambahkannya secara manual melalui phpMyAdmin.

Untuk membuat seeder ProductSeeder, digunakan perintah php artisan make:seeder ProductSeeder. Setelah perintah dijalankan, file seeder akan dibuat pada folder database/seeders.

4.6 Mengisi Data pada ProductSeeder

Setelah file ProductSeeder dibuat, langkah berikutnya adalah mengisi data awal yang akan dimasukkan ke dalam tabel products. Isi file ProductSeeder dapat ditulis dengan menggunakan perintah insert ke tabel products.

Data yang dimasukkan berupa contoh produk, seperti Laptop dan Mouse. Masing-masing data berisi nama produk, harga, deskripsi, serta waktu pembuatan dan pembaruan data. Data tersebut nantinya akan tersimpan di database setelah seeder dijalankan.

4.7 Memanggil ProductSeeder pada DatabaseSeeder

Agar ProductSeeder dapat dijalankan, seeder tersebut perlu dipanggil terlebih dahulu pada file DatabaseSeeder.php. Pada bagian function run(), ditambahkan pemanggilan $this->call(ProductSeeder::class).

Kode tersebut digunakan untuk memberi tahu Laravel bahwa ProductSeeder adalah seeder yang akan dijalankan ketika proses seeding dilakukan.

4.8 Menjalankan Seeder

Setelah seeder dipanggil pada file DatabaseSeeder, langkah berikutnya adalah menjalankan seeder. Perintah yang digunakan adalah php artisan db:seed. Perintah tersebut digunakan untuk memasukkan data awal ke dalam tabel products.

Setelah perintah seeder dijalankan, data dapat dicek melalui phpMyAdmin pada tabel products. Jika berhasil, maka data produk seperti Laptop dan Mouse akan muncul pada tabel tersebut.

4.9 Membuat Routing

Setelah proses migration dan seeding selesai, langkah berikutnya adalah membuat routing. Routing digunakan untuk menentukan alamat URL yang dapat diakses oleh pengguna, serta menentukan respon apa yang akan ditampilkan oleh aplikasi.

Pada Laravel, routing untuk halaman web berada pada file web.php yang terdapat di dalam folder routes. File ini menjadi tempat untuk mendefinisikan hubungan antara URL dan proses yang dijalankan oleh aplikasi.

4.10 Routing Dasar

Routing dasar digunakan untuk menampilkan respon sederhana ketika sebuah URL diakses. Contohnya, ketika pengguna membuka halaman utama, Laravel dapat menampilkan teks atau halaman tertentu sebagai respon.

Kode routing dasar dapat dituliskan pada file routes/web.php. Setelah server Laravel dijalankan dengan perintah php artisan serve, halaman dapat dibuka melalui alamat http://127.0.0.1:8000.

4.11 Routing Parameter

Routing parameter digunakan untuk menangkap nilai tertentu dari URL. Parameter ini biasanya digunakan ketika ingin menampilkan data berdasarkan id atau kode tertentu.

Contohnya, route /produk/{id} dapat digunakan untuk menangkap nilai id produk. Jika pengguna membuka alamat /produk/1, maka Laravel akan mengambil nilai 1 dari URL dan menampilkannya sebagai bagian dari respon.

4.12 Named Route

Named route digunakan untuk memberikan nama pada sebuah route. Dengan named route, pemanggilan URL dapat dilakukan menggunakan nama route, bukan langsung menuliskan alamat URL secara lengkap.

Hal ini dapat membantu ketika route digunakan pada banyak bagian aplikasi. Jika alamat URL berubah, bagian lain yang menggunakan nama route tetap lebih mudah disesuaikan.

4.13 Route Group

Route group digunakan untuk mengelompokkan beberapa route yang memiliki awalan URL yang sama. Dengan menggunakan route group, penulisan route menjadi lebih rapi dan tidak perlu mengulang awalan URL berkali-kali.

Contohnya, beberapa route yang berada di bawah awalan /admin dapat dimasukkan ke dalam satu group. Dengan begitu, route seperti dashboard dan products dapat dikelola dalam kelompok route yang sama.

4.14 Membuat Model Product

Setelah memahami routing, langkah berikutnya adalah membuat model. Model digunakan untuk berinteraksi dengan database. Pada Laravel, model bekerja dengan Eloquent ORM sehingga proses mengambil, menambahkan, mengubah, dan menghapus data dari database dapat dilakukan dengan lebih mudah.

Untuk membuat model Product, digunakan perintah php artisan make:model Product. Model ini nantinya digunakan untuk mengambil data dari tabel products.

4.15 Mengatur Isi Model Product

Setelah file Product.php dibuat, langkah berikutnya adalah mengatur model agar dapat digunakan untuk mengelola data pada tabel products. Pada model, dapat ditentukan kolom yang boleh diisi secara massal menggunakan properti $fillable.

Kolom yang dapat dimasukkan ke dalam $fillable antara lain name, price, dan description. Dengan pengaturan ini, Laravel mengetahui data apa saja yang boleh diproses melalui model Product.

4.16 Membuat Folder Layout

Langkah pertama dalam membuat Blade Layout adalah membuat folder baru di dalam folder resources/views. Folder tersebut diberi nama layouts. Folder ini digunakan untuk menyimpan file layout utama yang dapat digunakan oleh beberapa halaman view.

4.17 Membuat File app.blade.php

Setelah folder layout dibuat, langkah berikutnya adalah membuat file app.blade.php. File ini berfungsi sebagai template utama untuk tampilan aplikasi. Di dalam file ini terdapat struktur HTML dasar seperti html, head, dan body.

Pada bagian tertentu digunakan directive Blade seperti @yield('title') dan @yield('content'). Bagian @yield('title') digunakan sebagai tempat untuk menampilkan judul halaman, sedangkan @yield('content') digunakan sebagai tempat untuk menampilkan isi utama dari halaman.

4.18 Menggunakan Layout pada View Products

Setelah layout utama dibuat, langkah berikutnya adalah menggunakan layout tersebut pada view products. Pada bagian atas file view, dituliskan @extends('layouts.app') untuk menggunakan layout utama.

Selanjutnya, @section('title', 'Products') digunakan untuk mengisi judul halaman, sedangkan @section('content') digunakan untuk menulis isi utama halaman. Dengan cara ini, file products tidak perlu menuliskan struktur HTML lengkap karena struktur utama sudah diambil dari file layout.

4.19 Menampilkan Data Produk Menggunakan Blade

Untuk menampilkan data produk dari database, digunakan perulangan Blade. Data produk yang dikirim dari controller dapat ditampilkan menggunakan @foreach. Setiap data produk kemudian ditampilkan pada halaman, misalnya nama produk, harga, dan deskripsi.

Dengan menggunakan Blade, proses menampilkan data menjadi lebih sederhana karena Laravel menyediakan sintaks khusus untuk menulis logika tampilan di dalam file view.

4.20 Tugas

Pada bagian tugas, dibuat fitur CRUD sederhana untuk data mahasiswa. Langkah pertama adalah membuat database baru melalui phpMyAdmin, kemudian mengatur koneksi database pada file .env. Setelah koneksi berhasil, dibuat model mahasiswa, migration untuk tabel mahasiswa, seeder data awal, route, controller, dan view untuk mengelola data.

Setelah database terhubung, dibuat model Mahasiswa pada folder app/Models. Pada model tersebut, properti $fillable diisi dengan kolom nim, nama, dan jurusan agar data dapat diproses secara massal.

Selanjutnya, dibuat file migration untuk menyusun struktur tabel mahasiswa. Migration dibuat melalui terminal, kemudian struktur tabel diatur pada file migration yang telah dibuat. Kolom yang digunakan antara lain nim, nama, dan jurusan.

Setelah struktur tabel selesai dibuat, migration dijalankan menggunakan perintah php artisan migrate. Jika berhasil, tabel mahasiswa akan dibuat di dalam database sesuai struktur yang sudah ditentukan.

Setelah tabel dibuat, dibuat seeder dengan nama MahasiswaSeeder. Seeder ini digunakan untuk memasukkan data akademik sebagai data awal. Agar seeder dapat dijalankan, MahasiswaSeeder dipanggil pada file DatabaseSeeder.php, kemudian dijalankan menggunakan perintah php artisan db:seed.

Setelah data awal siap, dibuat route resource pada file web.php dengan controller MahasiswaController. Controller ini berisi beberapa method utama, yaitu index untuk menampilkan data, create untuk membuka form tambah data, store untuk menyimpan data baru, edit untuk membuka form edit, update untuk memperbarui data, dan destroy untuk menghapus data.

Kemudian dibuat beberapa file view di dalam folder resources/views/mahasiswa, yaitu index.blade.php, create.blade.php, dan edit.blade.php. Halaman index digunakan untuk menampilkan daftar mahasiswa, halaman create digunakan untuk menambah data, sedangkan halaman edit digunakan untuk mengubah data yang sudah ada.

Output dari tugas ini adalah halaman daftar mahasiswa yang menampilkan data dari database, tombol tambah data, form tambah mahasiswa baru, form edit data mahasiswa, serta tombol untuk menghapus data. Dengan demikian, fitur CRUD sederhana berhasil dibuat menggunakan Laravel.

4.1 Membuat Migration

Langkah pertama yang dilakukan adalah membuat migration. Migration digunakan untuk membuat struktur tabel pada database. Pada praktikum ini terdapat beberapa tabel yang dibuat, yaitu tabel majors, students, subjects, dan student_subject. Tabel-tabel tersebut saling berhubungan untuk membentuk sistem akademik sederhana.

a. Migration untuk Tabel Majors

Migration pertama yang dibuat adalah tabel majors. Tabel ini digunakan untuk menyimpan data jurusan mahasiswa.

Tabel majors berfungsi untuk menyimpan nama jurusan yang nantinya akan dihubungkan dengan tabel mahasiswa.

b. Migration untuk Tabel Students

Selanjutnya dibuat migration untuk tabel students. Tabel ini digunakan untuk menyimpan data mahasiswa seperti NIM, nama, alamat, dan jurusan.

Kolom major_id digunakan sebagai foreign key untuk menghubungkan data mahasiswa dengan data jurusan. Pada bagian NIM dibuat unique agar setiap mahasiswa memiliki NIM yang berbeda.

c. Migration untuk Tabel Subjects

Tabel subjects digunakan untuk menyimpan data mata kuliah. Data yang disimpan meliputi nama mata kuliah dan jumlah SKS.

d. Migration untuk Tabel Student Subject

Migration berikutnya adalah tabel student_subject. Tabel ini merupakan tabel pivot yang digunakan untuk menghubungkan tabel students dan subjects.

Bagian unique digunakan agar kombinasi mahasiswa dan mata kuliah tidak terduplikasi. Setelah seluruh migration selesai dibuat, migration dijalankan menggunakan perintah php artisan migrate.

4.2 Membuat Model dengan Relationship

Setelah tabel database dibuat, langkah berikutnya adalah membuat model. Model digunakan untuk menghubungkan aplikasi Laravel dengan tabel database. Selain itu, model juga digunakan untuk mendefinisikan relationship antar tabel.

a. Model Major

Model Major digunakan untuk mengelola data pada tabel majors. Pada model Major, ditambahkan properti $fillable agar kolom name dapat diisi secara massal. Relasi yang dibuat adalah students() untuk menunjukkan bahwa satu jurusan dapat memiliki banyak mahasiswa.

b. Model Student

Model Student digunakan untuk mengelola data mahasiswa. Pada model ini terdapat relationship major() untuk menghubungkan mahasiswa dengan jurusan, serta relationship subjects() untuk menghubungkan mahasiswa dengan mata kuliah.

c. Model Subject

Model Subject digunakan untuk mengelola data mata kuliah. Kolom yang dapat diisi adalah name dan sks. Relationship students() digunakan untuk menunjukkan bahwa satu mata kuliah dapat diambil oleh banyak mahasiswa.

4.3 Membuat Seeder untuk Data Sample

Setelah model dan relationship dibuat, langkah berikutnya adalah membuat seeder. Seeder digunakan untuk mengisi data awal ke dalam database agar aplikasi memiliki data contoh yang dapat ditampilkan.

a. Seeder untuk Major

MajorSeeder digunakan untuk mengisi data jurusan ke dalam tabel majors. Data jurusan yang dimasukkan adalah Teknik Informatika, Sistem Informasi, Teknik Komputer, dan Manajemen Informatika.

b. Seeder untuk Subject

SubjectSeeder digunakan untuk mengisi data mata kuliah ke dalam tabel subjects. Data mata kuliah yang dimasukkan terdiri dari nama mata kuliah dan jumlah SKS.

c. Seeder untuk Student

StudentSeeder digunakan untuk mengisi data mahasiswa ke dalam tabel students. Setelah data mahasiswa dibuat, setiap mahasiswa diberikan mata kuliah secara acak menggunakan hubungan melalui tabel pivot student_subject.

d. Update DatabaseSeeder

Setelah semua seeder dibuat, seluruh seeder tersebut dipanggil di dalam file DatabaseSeeder agar dapat dijalankan secara berurutan.

4.4 Membuat Controller

Setelah data dan relationship selesai dibuat, langkah berikutnya adalah membuat controller. Controller digunakan untuk mengatur proses pengambilan, penyimpanan, perubahan, dan penghapusan data mahasiswa.

Controller yang dibuat adalah StudentController. Pada controller ini terdapat beberapa function, seperti index, show, create, store, edit, update, dan destroy.

4.5 Membuat Routes

Setelah controller dibuat, langkah berikutnya adalah membuat route. Route digunakan untuk menentukan alamat URL yang akan mengarah ke controller tertentu.

4.6 Membuat Views

Setelah controller dan route dibuat, langkah selanjutnya adalah membuat view. View digunakan untuk menampilkan data ke halaman web. Pada praktikum ini, view dibuat menggunakan Blade dan Bootstrap agar tampilan lebih rapi.

a. Layout Utama

Layout utama digunakan sebagai template dasar untuk halaman lainnya. Di dalam file ini terdapat struktur HTML, link Bootstrap, navbar, alert success, dan bagian @yield('content').

b. Index Student

View index digunakan untuk menampilkan data mahasiswa dalam bentuk tabel. Data yang ditampilkan meliputi NIM, nama, jurusan, mata kuliah, total SKS, dan aksi.

c. Create Student

View create adalah halaman tambah mahasiswa. Form ini berisi input NIM, nama, alamat, pilihan jurusan, dan pilihan mata kuliah.

4.7 Latihan Query dengan Relationship

Pada bagian latihan ini dilakukan pembuatan query menggunakan Eloquent Relationship. Query yang dibuat tidak menggunakan SQL secara langsung, tetapi menggunakan model dan relasi yang sudah dibuat sebelumnya.

a. Menampilkan Semua Mahasiswa Beserta Jurusan dan Mata Kuliahnya

Method with() digunakan untuk mengambil data relasi dari model Student. Relasi major digunakan untuk mengambil data jurusan mahasiswa, sedangkan relasi subjects digunakan untuk mengambil data mata kuliah yang diambil oleh mahasiswa.

b. Menampilkan Jurusan yang Memiliki Mahasiswa Terbanyak

Method withCount('students') digunakan untuk menghitung jumlah mahasiswa pada setiap jurusan. Setelah itu data diurutkan dari jumlah mahasiswa terbanyak.

c. Menampilkan Mata Kuliah yang Diambil oleh Mahasiswa Tertentu

Query berikut mencari mahasiswa berdasarkan NIM, kemudian mengambil data mata kuliah yang berhubungan dengan mahasiswa tersebut melalui relasi subjects.

d. Menampilkan Total SKS yang Diambil Setiap Mahasiswa

Setelah data mahasiswa dan mata kuliahnya diambil, total SKS dapat dihitung dengan menjumlahkan kolom SKS dari setiap mata kuliah yang diambil mahasiswa.

e. Output

4.1 Persiapan Project

Langkah pertama adalah mengunduh project ke folder mana saja di laptop, lalu membuka terminal atau command prompt dan masuk ke folder project tersebut dengan perintah cd lokasi/folder/project/kamu.

4.2 Membuat Virtual Environment

Untuk menjaga dependensi tetap rapi, dibuat virtual environment dengan perintah python -m venv venv. Virtual environment ini akan mengisolasi paket Python yang digunakan oleh skrip dari sistem utama.

4.3 Menginstall Playwright

Setelah virtual environment tersedia, lakukan instalasi Playwright dengan perintah pip install playwright. Playwright merupakan library yang digunakan untuk mengotomatisasi browser sehingga proses login dapat berjalan secara terprogram.

Penting untuk selalu mengaktifkan venv sebelum menjalankan skrip. Jika virtual environment tidak diaktifkan, skrip akan gagal dengan error ModuleNotFoundError: No module named 'playwright'.

4.4 Menyiapkan Daftar Akun

Daftar akun disimpan pada file akun.txt dengan format email|password per baris. Setiap baris mewakili satu akun Google yang akan diloginkan secara berurutan oleh skrip.

Contoh isi akun.txt:

akun1@gmail.com|passwordakun1
akun2@gmail.com|passwordakun2

4.5 Cara Menjalankan

Cara cepat: Klik run.bat (Windows) atau jalankan ./run.sh (Git Bash) untuk langsung menjalankan skrip tanpa membuka terminal.

Cara manual: Aktifkan virtual environment terlebih dahulu dengan venv\Scripts\activate (Windows), lalu jalankan python login_google.py setiap kali ingin menggunakan skrip.

✨ Core Features

• Input URL Google Form — Dukungan link Google Form apa saja
• Otomatis Login Google — Opsi login otomatis ke akun Google dengan dukungan 2FA manual
• Stealth Mode — Bypass bot detection dengan advanced anti-detection techniques
• Headless Mode — Jalankan browser tanpa GUI untuk performa lebih cepat
• Incognito Mode — Operasi dalam mode incognito untuk privasi
• Form Analyzer — Deteksi otomatis tipe pertanyaan (10+ tipe didukung)
• Smart Answer Generator — Generate jawaban otomatis berdasarkan konteks
• Human-like Behavior — Simulasi perilaku manusia untuk menghindari detection

🛡️ Stealth Mode Features

• Hapus properti webdriver untuk menyembunyikan automasi
• Mock browser features (plugins, languages, chrome object)
• Canvas fingerprinting protection untuk menghindari tracking
• AudioContext fingerprinting protection
• Random user agents dan viewport sizes untuk variasi
• Human-like mouse movement dengan bezier curves
• Natural typing delays dengan randomized timing

✅ Fully Supported

• Short Answer — Jawaban singkat
• Paragraph Text — Teks paragraf panjang
• Multiple Choice — Pilihan ganda
• Checkbox — Kotak centang multiple
• Dropdown — Menu dropdown
• Date — Pemilihan tanggal
• Time — Pemilihan waktu
• File Upload — Upload file (tanpa response)

🔄 Partially Supported

• Linear Scale
• Grid Pilihan Ganda
• Grid Kotak Centang
• Date & Time
• Duration

⚠️ Not Supported

• Complementary question (Data Duplicate)
• Phone with digits validation
• Personal data detection
• Captcha (Google reCAPTCHA, hCaptcha, etc.)

1. Instalasi

Clone atau download repository:

git clone https://github.com/ArmnskBamban/AutoFillGform.git

cd AutoFillGform

Install dependencies:

npm install

2. Penggunaan Interaktif (Terminal UI)

Jalankan script:

npm start atau node src/gform-automator.js

Ikuti prompt di terminal:

• Masukkan URL Google Form
• Tentukan apakah form memerlukan login Google
• Masukkan email dan password Google (jika perlu)
• Aktifkan Stealth Mode (rekomendasi: ON)
• Aktifkan Headless Mode (opsional: OFF untuk debugging)

Script akan otomatis:

• Mengisi URL yang dimasukkan
• Login ke Google jika diminta (support 2FA manual)
• Menganalisis struktur form dan mendeteksi tipe pertanyaan
• Mengisi semua pertanyaan dengan jawaban yang sesuai
• Menyubmit form dan menampilkan log detail

3. Konfigurasi via JSON

data/config.json — aturan global:

Atur stealthMode, headlessMode, incognitoMode, dan timing delays.

data/answers.json — template jawaban:

Definisikan template jawaban untuk berbagai tipe pertanyaan (name, email, age, feedback, dll).

data/user-profile.json — profil pengguna:

Simpan data profil untuk pengisian otomatis (nama, NIM, kelas, jurusan, dll).

✨ Search Modes

• General Search — Mencari semua jenis file dari berbagai sumber web
• Academic Mode — Cari paper akademik dari arXiv dan CrossRef API (10+ PDF papers garansi)
• Dataset Mode — Cari dataset dalam format CSV, XLSX, ZIP untuk analisis data
• Official Mode — Cari dokumen resmi dari domain .gov, .edu, .org

🛡️ File Verification System

• Link Verification — HEAD request untuk verifikasi file accessibility
• Size Detection — Mendeteksi ukuran file (KB/MB) dari HTTP headers
• File Type Detection — Mengidentifikasi tipe file dari extension dan content-type
• Deduplication — Menghapus duplikat berdasarkan URL hash dan similarity

🎯 Smart Features

• Query Optimization — Keyword expansion untuk hasil lebih relevan
• Relevance Scoring — Skor relevansi berdasarkan keyword match dan authority domain
• File Type Filtering — Filter PDF, DOCX, XLSX, PPTX, CSV, ZIP
• Result Sorting — Urutkan berdasarkan relevansi, size, atau verification status

1. Prerequisites

• Python 3.12+
• Node.js 22.x+
• Git Bash (recommended) atau Command Prompt

2. Startup - Two Terminal Setup

Terminal 1 (Backend - Python FastAPI):

cd project-folder/backend

venv312/Scripts/python -m uvicorn main:app --host 0.0.0.0 --port 8000 --reload

Terminal 2 (Frontend - React):

cd project-folder/frontend

npm run dev

3. Access & Verification

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• API Docs (Swagger): http://localhost:8000/docs
• Health Check: curl http://localhost:8000/api/health

4. Search Workflow

1. Buka http://localhost:3000 di browser
2. Masukkan query pencarian (misal: "machine learning")
3. Pilih mode: Academic (recommended), Dataset, Official, atau General
4. Klik Settings (⚙️) untuk filter file types (opsional)
5. Klik "Search" dan tunggu ~3-5 detik
6. Hasil muncul dengan badges: ✓ Verified atau ⚠ Unverified
7. Klik card atau tombol ↗ untuk membuka file langsung

Backend (Python FastAPI)

• Search Orchestrator — Koordinasi antara search engines
• Verification Module — File verification dan metadata extraction
• Scoring Engine — Relevansi scoring dan result ranking
• Search Engines Integration — Bing, DuckDuckGo, arXiv API, CrossRef API

Frontend (React + Vite)

• React Query — Data fetching dan caching
• TailwindCSS v4 — Utility-first styling
• Axios — HTTP client untuk API calls
• Lucide React — Icon library

📱 Aplikasi Info Saldo dengan Toggle Visibility

dashboard_screen.dart

a. Fungsi main() dan runApp

Pertama, dibuat fungsi main() yang menjadi titik awal eksekusi aplikasi Flutter. Di dalamnya, dipanggil fungsi runApp() yang akan menjalankan widget utama aplikasi, yaitu MyApp.

b. Class MyApp sebagai StatelessWidget

Selanjutnya, dibuat kelas MyApp yang merupakan StatelessWidget. Widget ini berfungsi sebagai akar dari seluruh aplikasi yang mengatur tema, judul, dan halaman awal yang akan ditampilkan.

c. DashboardScreen dengan Scaffold

Langkah berikutnya adalah membuat halaman utama aplikasi melalui kelas DashboardScreen. Widget ini menggunakan Scaffold yang menyediakan kerangka dasar aplikasi seperti AppBar dan body. AppBar menampilkan judul praktikum dengan warna latar biru, sedangkan body diisi dengan padding dan tata letak Column yang vertikal.

d. GreetingWidget (StatelessWidget)

Untuk bagian sapaan pengguna, dibuat GreetingWidget yang merupakan StatelessWidget. Widget ini menggunakan tata letak Row untuk menyusun ikon avatar dan teks sapaan secara horizontal. Ikon avatar dibuat dengan CircleAvatar berwarna biru, sementara teks sapaan diatur dalam Column untuk penyusunan vertikal.

e. BalanceCardWidget (StatefulWidget)

Komponen yang membutuhkan interaktivitas dikembangkan menggunakan StatefulWidget. Didefinisikan kelas BalanceCardWidget yang memiliki kelas state terpisah bernama _BalanceCardWidgetState. Di dalam state class, variabel _isBalanceVisible digunakan untuk menyimpan status tampilan saldo, sementara fungsi _toggleVisibility() bertugas mengubah nilai variabel tersebut.

f. Build Method dengan Card dan Kondisional

Dalam metode build() dari state class, dibuat kartu saldo menggunakan widget Card dengan desain melengkung (border radius) dan warna biru. Kartu ini memiliki dua bagian utama: baris atas berisi label "Saldo Utama" dan tombol ikon mata yang dapat ditekan. Logika kondisional (ternary operator) diterapkan untuk menentukan ikon yang ditampilkan (Icons.visibility atau Icons.visibility_off) dan teks saldo yang ditampilkan (nominal atau sensor).

g. Implementasi setState() dan _toggleVisibility

Fungsi setState() memegang peranan kunci dalam pembaruan tampilan. Saat tombol ikon mata ditekan, fungsi _toggleVisibility() dipanggil dan di dalamnya setState() digunakan untuk mengubah nilai _isBalanceVisible. Flutter kemudian secara otomatis memicu rebuild pada widget BalanceCardWidget, sehingga tampilan diperbarui sesuai dengan status terbaru. Mekanisme ini memungkinkan UI menjadi responsif terhadap interaksi pengguna tanpa perlu memuat ulang halaman.

h. Hasil Akhir Aplikasi

Setelah semua komponen dibuat, hasil akhir aplikasi menampilkan dua widget utama secara terintegrasi. Bagian atas layar menampilkan sapaan pengguna yang statis, sementara bagian bawah menampilkan kartu saldo yang interaktif. Pengguna dapat menekan ikon mata pada kartu saldo untuk menyembunyikan atau menampilkan nominal saldo, memberikan pengalaman interaksi yang sederhana namun efektif dalam memahami konsep state management pada Flutter.

📝 Tugas 1: Modifikasi Warna Theme

Ubah warna BalanceCard dari Colors.blueAccent menjadi Colors.teal

Implementasi

Pada tugas pertama, dilakukan perubahan warna pada BalanceCard dari warna biru (Colors.blueAccent) menjadi warna hijau emerald (Colors.teal). Perubahan ini dilakukan dengan menambahkan properti color: Colors.teal pada widget Card. Properti color pada widget Card berfungsi untuk mengatur warna background dari kartu tersebut. Dengan mengubah nilai properti ini menjadi Colors.teal, maka tampilan kartu saldo akan berubah menjadi hijau emerald sesuai dengan permintaan tugas.

📝 Tugas 2: Penambahan Teks Statis

Tambahkan teks "No. Rekening: 1234-5678" di bawah nominal saldo

Implementasi

Pada tugas kedua, ditambahkan teks statis berupa nomor rekening di bagian bawah nominal saldo di dalam kartu. Penambahan ini dilakukan dengan menambahkan widget Text baru setelah widget Text yang menampilkan nominal saldo. Sebelum teks nomor rekening, ditambahkan widget SizedBox(height: 8) untuk memberikan jarak vertikal sebesar 8 pixel antara teks nominal saldo dengan teks nomor rekening. Teks nomor rekening menggunakan styling dengan ukuran font 14 dan warna Colors.white70 agar terlihat lebih subtle dan tidak mendominasi tampilan nominal saldo.

Verifikasi Hasil Tugas

Jalankan program nya, dan lihat hasil dari tugas apakah sudah terpenuhi dengan memastikan kedua modifikasi tampil dengan benar di aplikasi.

📱 Expense Tracker Dashboard

dashboard_screen.dart

a. Widget MyApp sebagai Root Aplikasi

Langkah pertama adalah membuat widget utama sebagai root aplikasi. Widget ini menggunakan StatelessWidget karena tidak memerlukan perubahan state. Di dalam widget MyApp, dikonfigurasi MaterialApp sebagai wrapper aplikasi dengan tema berwarna biru dan menghilangkan banner debug.

b. DashboardScreen dengan SingleChildScrollView

Selanjutnya, dibuat halaman utama DashboardScreen yang berfungsi sebagai container untuk seluruh komponen aplikasi. Halaman ini menggunakan Scaffold sebagai struktur dasar dengan AppBar di bagian atas. Agar halaman dapat di-scroll ketika konten melebihi tinggi layar, seluruh body dibungkus dengan SingleChildScrollView. Di dalamnya terdapat Padding untuk memberi jarak dari tepi layar, kemudian Column untuk menyusun widget-widget secara vertikal.

c. GreetingWidget dengan Row

Lalu dibuat komponen sapaan pengguna menggunakan StatelessWidget. Widget ini menampilkan avatar pengguna dan teks sapaan. Layout disusun menggunakan Row agar avatar dan teks berada dalam satu baris horizontal. Avatar dibuat dengan CircleAvatar berisi ikon person, sedangkan teks sapaan disusun vertikal menggunakan Column dengan dua baris teks: nama pengguna dan kalimat sambutan.

d. BalanceCardWidget dengan Toggle Visibility

Kemudian dibuat komponen kartu saldo menggunakan StatefulWidget karena memerlukan state untuk mengatur visibilitas saldo. Di dalam state class, terdapat variabel boolean _isBalanceVisible yang mengontrol apakah saldo ditampilkan atau disembunyikan. Fungsi _toggleVisibility() menggunakan setState() untuk memperbarui state ketika tombol visibility ditekan. Tampilan kartu menggunakan widget Card dengan elevasi dan border radius untuk efek bayangan. Layout internal menggunakan Column dan Row untuk menyusun label, tombol toggle, dan nominal saldo.

e. Tombol Aksi dengan Row.spaceEvenly

Berikutnya dibuat widget tombol aksi yang menampilkan tiga tombol: Pemasukan, Pengeluaran, dan Transfer. Widget ini menggunakan Row dengan mainAxisAlignment.spaceEvenly agar jarak antar tombol terbagi rata secara horizontal. Untuk menghindari pengulangan kode, dibuat fungsi helper _buildActionButton() yang menerima parameter ikon, label, dan warna. Setiap tombol disusun vertikal menggunakan Column, berisi Container dengan background transparan sebagai wadah ikon, dan Text sebagai label tombol.

f. Daftar Transaksi dengan ListTile

Terakhir, dibuat widget untuk menampilkan daftar transaksi terakhir. Widget ini menggunakan Column untuk menyusun judul dan daftar transaksi secara vertikal. Judul "Transaksi Terakhir" diberi style bold dengan ukuran font 18. Daftar transaksi dibungkus dengan Card untuk memberikan efek bayangan dan bingkai. Di dalam Card, terdapat beberapa ListTile yang masing-masing merepresentasikan satu item transaksi. Setiap ListTile memiliki tiga komponen utama: leading berupa CircleAvatar dengan ikon, title dan subtitle untuk nama dan tanggal transaksi, serta trailing untuk menampilkan nominal dengan warna sesuai jenis transaksi. Antar item transaksi dipisahkan dengan Divider.

📝 Tugas 1: Styling Warna Trailing Text

Ubah warna nominal transaksi berdasarkan jenis (merah untuk pengeluaran, hijau untuk pemasukan)

Implementasi Warna Hijau untuk Pemasukan

Untuk transaksi pemasukan seperti "Gaji Bulanan" dan "Bonus Proyek", diberikan style dengan warna hijau untuk menunjukkan arus uang masuk. Pada properti trailing, widget Text menggunakan TextStyle dengan color: Colors.green dan fontWeight: FontWeight.bold agar nominal terlihat jelas.

Implementasi Warna Merah untuk Pengeluaran

Sementara itu, untuk transaksi pengeluaran seperti "Makan Siang", "Isi Bensin", dan "Belanja Bulanan", diberikan style dengan warna merah untuk menunjukkan arus uang keluar. Pada properti trailing, widget Text menggunakan TextStyle dengan color: Colors.red dan fontWeight: FontWeight.bold.

📝 Tugas 2: Menambahkan Transaksi Baru

Tambahkan dua transaksi fiktif baru ke dalam daftar "Transaksi Terakhir"

Transaksi Keempat: Belanja Bulanan

Transaksi pertama yang ditambahkan adalah "Belanja Bulanan" yang merupakan transaksi pengeluaran. Item ini disisipkan setelah transaksi "Isi Bensin" dengan menambahkan Divider terlebih dahulu sebagai pemisah. ListTile ini memiliki leading berupa CircleAvatar dengan background warna orange dan ikon shopping_bag, title dengan teks "Belanja Bulanan", subtitle dengan tanggal "15 Sep 2026", dan trailing menampilkan nominal "- Rp 350.000" dengan warna merah untuk menunjukkan pengeluaran.

Transaksi Kelima: Bonus Proyek

Transaksi kedua yang ditambahkan adalah "Bonus Proyek" yang merupakan transaksi pemasukan. Item ini disisipkan setelah transaksi "Belanja Bulanan" dengan menambahkan Divider terlebih dahulu. ListTile ini memiliki leading berupa CircleAvatar dengan background warna hijau dan ikon card_giftcard, title dengan teks "Bonus Proyek", subtitle dengan tanggal "18 Sep 2026", dan trailing menampilkan nominal "+ Rp 1.500.000" dengan warna hijau untuk menunjukkan pemasukan.

Verifikasi Hasil Tugas

Jalankan program nya, dan lihat hasil dari tugas apakah sudah terpenuhi dengan memastikan kedua transaksi baru tampil dengan benar di daftar transaksi beserta styling warna yang sesuai.

📄 Main.dart

File entry point aplikasi

a. Import Library dan Entry Point

Langkah pertama, kita menyiapkan file main.dart sebagai titik awal (entry point) aplikasi. Kita mengimpor library material yang berisi widget-widget dasar Flutter, serta file add_transaction_screen.dart yang berisi halaman form transaksi yang akan kita buat.

b. Fungsi main()

Selanjutnya, kita membuat fungsi main() sebagai fungsi utama yang pertama kali dijalankan. Fungsi ini memanggil runApp() untuk menjalankan aplikasi Flutter dengan widget MyApp di dalamnya.

c. Class MyApp

Kita membuat class MyApp yang merupakan StatelessWidget sebagai root dari aplikasi. Di dalamnya terdapat MaterialApp yang berisi pengaturan tema dengan warna dasar Colors.deepPurple sesuai tema Modul 3, serta home yang langsung mengarahkan aplikasi membuka halaman AddTransactionScreen.

📄 add_transaction_screen.dart

Halaman form transaksi

a. StatefulWidget

Halaman form transaksi dibuat menggunakan StatefulWidget karena isi formulir (teks dan dropdown) akan terus berubah saat pengguna mengetik, sehingga membutuhkan state yang bisa diperbarui. Di sinilah kita mengelola seluruh logika form transaksi.

b. Persiapan GlobalKey dan Controller

Sebelum membangun tampilan, kita menyiapkan beberapa hal penting. Pertama, GlobalKey<FormState> yang digunakan untuk mengontrol dan memicu validasi seluruh form. Kedua, TextEditingController untuk judul dan nominal yang berfungsi menangkap teks dari input pengguna. Ketiga, variabel state untuk dropdown beserta daftar kategorinya.

c. Method dispose()

Agar tidak terjadi kebocoran memori (memory leak), kedua controller dibersihkan menggunakan metode dispose() saat halaman ditutup.

d. Scaffold dan AppBar

Kita membangun tampilan halaman dengan Scaffold dan AppBar berjudul "Catat Transaksi Baru". Body dibungkus SingleChildScrollView agar tidak terjadi error layout saat keyboard muncul, kemudian seluruh kolom input dibungkus dengan widget Form yang terhubung dengan _formKey untuk keperluan validasi.

e. TextFormField untuk Judul

Kita membuat input pertama yaitu TextFormField untuk judul transaksi. Field ini dihubungkan dengan _titleController agar teks yang diketik bisa ditangkap. Selain itu, diberikan validator yang merupakan inti dari sistem validasi: jika nilai kosong, fungsi mengembalikan pesan error "Judul transaksi tidak boleh kosong", sebaliknya jika terisi, mengembalikan null yang berarti data valid.

f. TextFormField untuk Nominal

Selanjutnya, input untuk nominal uang. Field ini menggunakan keyboardType: TextInputType.number sehingga keyboard yang muncul khusus angka, mempermudah pengguna saat mengisi nominal. Validatornya memastikan field tidak boleh kosong dan hanya menerima input berupa angka.

g. DropdownButtonFormField

Kemudian kita membuat DropdownButtonFormField<String> untuk pilihan kategori. Daftar _categories dipetakan menjadi DropdownMenuItem sebagai pilihan yang tampil. Saat pengguna memilih kategori lain, onChanged akan memperbarui state _selectedCategory menggunakan setState().

h. Tombol Submit

Terakhir, kita membuat tombol ElevatedButton "Simpan Transaksi". Tombol ini menjadi pengeksekusi validasi keseluruhan form melalui _formKey.currentState!.validate(). Jika semua field lolos validasi, muncul SnackBar hijau berisi ringkasan transaksi yang tersimpan. Jika ada field yang kosong atau tidak valid, aplikasi otomatis menampilkan pesan error merah di bawah field yang bermasalah.

i. Hasil Running

Jalankan program nya pada main.dart dan akan tampil seperti ini

📄 add_transaction_screen.dart

Implementasi lengkap dengan date picker

a. Class AddTransactionScreen sebagai StatefulWidget

Class AddTransactionScreen dibuat sebagai StatefulWidget karena form memerlukan perubahan state saat user berinteraksi dengannya, seperti mengetik teks pada input field, memilih opsi dari dropdown, atau memilih tanggal dari date picker. Widget ini memiliki state yang berubah-ubahan sehingga dibuat sebagai StatefulWidget, dan method createState() digunakan untuk membuat instance dari state class _AddTransactionScreenState yang berisi logic dan UI dari form.

b. Deklarasi GlobalKey dan Controllers

Di dalam state class _AddTransactionScreenState, beberapa komponen penting disiapkan. GlobalKey<FormState> dibuat sebagai _formKey untuk mengakses state form dan memicu validasi ketika tombol submit ditekan. TextEditingController untuk _titleController, _amountController, dan _dateController digunakan untuk mengambil nilai input yang diketik user pada masing-masing field. Variabel _selectedCategory digunakan untuk menyimpan pilihan kategori yang dipilih dari dropdown, dengan nilai default 'Makanan', dan _categories adalah list yang berisi semua opsi kategori yang tersedia di dropdown yaitu Makanan, Transportasi, Hiburan, dan Lainnya.

c. Method dispose()

Method dispose() dipanggil secara otomatis saat widget dihancurkan, seperti saat user meninggalkan halaman. Dengan memanggil .dispose() pada setiap controller, memory yang digunakan oleh controller dibebaskan sehingga tidak terjadi memory leak yang dapat memengaruhi kinerja aplikasi.

d. Scaffold dan AppBar

Pada method build(), struktur halaman dibuat menggunakan Scaffold yang menyediakan kerangka dasar Material Design. Bagian AppBar ditempatkan di bagian atas halaman dengan judul 'Catat Transaksi Baru', background warna Deep Purple, dan teks berwarna putih. Tampilan AppBar ini memberikan identitas visual yang konsisten dengan tema aplikasi dan memberikan informasi jelas tentang fungsi halaman kepada user.

e. SingleChildScrollView dan Form

SingleChildScrollView digunakan sebagai wrapper agar konten bisa di-scroll jika ukurannya melebihi tinggi layar, terutama saat keyboard muncul dan memenuhi sebagian layar. Form adalah widget wrapper yang menghubungkan semua input field dan memungkinkan penggunaan validasi secara keseluruhan. Key pada Form diisi dengan _formKey agar bisa dipicu validasinya nanti. Column digunakan untuk mengatur layout vertikal dengan crossAxisAlignment: CrossAxisAlignment.stretch agar semua child memiliki lebar yang sama dengan lebar layar.

f. TextFormField untuk Judul

TextFormField untuk input judul menggunakan _titleController untuk mengambil nilai input. Tampilan input diatur melalui decoration yang mencakup label text, hint text dengan contoh pengisian, dan icon title di awal input. Validasi diterapkan di validator dengan memeriksa apakah nilai yang dimasukkan null atau kosong. Jika kosong, pesan error 'Judul transaksi tidak boleh kosong' akan ditampilkan, sedangkan jika ada isinya, validator mengembalikan null yang berarti input valid.

g. TextFormField untuk Nominal

Input nominal menggunakan _amountController dan keyboardType: TextInputType.number yang membuat keyboard yang muncul saat user mengklik field ini adalah numeric keyboard agar user hanya bisa memasukkan angka. Tampilan diatur dengan label, hint text, dan icon uang untuk memperjelas fungsi field. Validator memeriksa apakah field kosong dan menampilkan pesan error jika belum diisi.

h. DropdownButtonFormField untuk Kategori

DropdownButtonFormField memungkankan user memilih salah satu kategori dari daftar yang tersedia. value menampilkan kategori yang saat ini dipilih. Tampilan dropdown diatur dengan label text dan border menggunakan OutlineInputBorder. items diisi dengan hasil mapping dari _categories list menjadi DropdownMenuItem agar bisa ditampilkan dalam dropdown. Ketika user memilih opsi baru, onChanged dipanggil dan setState() digunakan untuk update nilai _selectedCategory sehingga tampilan dropdown berubah sesuai pilihan user.

i. Input Tanggal dengan Date Picker

Input tanggal dibuat dengan readOnly: true agar user tidak bisa mengetik manual, melainkan harus memilih dari date picker. Tampilan input menggunakan label, hint text, dan icon kalender. suffixIcon berisi IconButton dengan icon tambah untuk membuka dialog date picker. Ketika tombol ditekan, showDatePicker() dipanggil secara async dengan tanggal saat ini sebagai nilai awal, rentang tanggal dari tahun 2000 hingga hari ini, dan jika user memilih tanggal, nilai tersebut diformat menjadi format DD/MM/YYYY menggunakan padLeft(2, '0') untuk memastikan angka dua digit, lalu disimpan ke _dateController dengan setState(). Validator memeriksa apakah field kosong.

j. Tombol Submit dengan SnackBar

Tombol ElevatedButton digunakan untuk submit form. Ketika ditekan, onPressed dipanggil dan _formKey.currentState!.validate() digunakan untuk memicu validasi semua field dalam form sekaligus. Jika semua field valid (validator tidak mengembalikan pesan error), maka ScaffoldMessenger.of(context).showSnackBar() dipanggil untuk menampilkan SnackBar di bagian bawah layar dengan background hijau sebagai indikator keberhasilan. SnackBar menampilkan ringkasan data yang telah diinput oleh user yaitu judul, nominal, dan tanggal transaksi.

k. Hasil Running

Jalankan program nya

📁 Main.dart

File utama aplikasi Flutter

1. Pertama - Import library & main()

Pertama, buat dan siapkan file main.dart sebagai file utama untuk menjalankan aplikasi Flutter. Pada tahap ini, program mengimpor library material.dart untuk menyediakan komponen antarmuka Flutter dan dashboard_screen.dart agar halaman dashboard dapat digunakan sebagai halaman awal aplikasi. Selanjutnya, fungsi main() menjalankan aplikasi dengan memanggil runApp(const MyApp()).

2. Selanjutnya - Class MyApp & MaterialApp

Selanjutnya, buat class MyApp sebagai StatelessWidget yang bertugas membangun konfigurasi utama aplikasi. Di dalam MaterialApp, debugShowCheckedModeBanner diatur menjadi false sehingga label debug tidak ditampilkan, sedangkan title menetapkan nama aplikasi sebagai Expense Tracker - Modul 4. Tema aplikasi menggunakan ThemeData dengan primarySwatch berwarna merah agar komponen utama memiliki tema warna yang sesuai dengan implementasi praktikum.

3. Kemudian - DashboardScreen sebagai home

Kemudian, tentukan DashboardScreen sebagai nilai home melalui const DashboardScreen(). Pengaturan ini menjadikan dashboard sebagai halaman pertama yang dimuat ketika aplikasi dijalankan. Setelah halaman tersebut tampil, proses navigasi ke halaman lain dilakukan dari dashboard sesuai dengan alur yang diterapkan pada program.

📁 dashboard_screen.dart

Halaman utama aplikasi dengan navigasi

1. Selanjutnya - Import & class DashboardScreen

Selanjutnya, buat file dashboard_screen.dart sebagai halaman utama aplikasi. Pada bagian awal, program mengimpor material.dart untuk menggunakan komponen Flutter, kemudian mengimpor add_transaction_screen.dart dan transaction_detail_screen.dart karena dashboard akan digunakan untuk berpindah ke halaman pencatatan transaksi dan halaman detail transaksi. Class DashboardScreen dibuat sebagai StatelessWidget, sehingga halaman ini tidak memiliki state yang berubah secara langsung.

2. Kemudian - Scaffold, AppBar, FloatingActionButton

Kemudian, buat struktur tampilan utama menggunakan Scaffold yang terdiri dari AppBar, FloatingActionButton, dan body. AppBar menampilkan judul "Dashboard Keuangan" dengan tema warna merah dan teks putih. Pada bagian body, digunakan SingleChildScrollView dan Column untuk menyusun sapaan pengguna, kartu saldo, serta bagian daftar transaksi secara vertikal.

3. Setelah itu - FloatingActionButton Navigator.push

Setelah itu, tambahkan FloatingActionButton sebagai tombol untuk menambahkan transaksi. Ketika tombol ditekan, program menjalankan Navigator.push dengan MaterialPageRoute untuk membuka AddTransactionScreen. Dengan demikian, halaman form dapat ditambahkan ke dalam stack navigasi dari dashboard.

4. Selanjutnya - Method _buildBalanceCard()

Selanjutnya, buat method _buildBalanceCard() untuk menampilkan informasi saldo utama. Widget ini menggunakan Card dengan warna Colors.redAccent dan menampilkan teks "Saldo Utama" serta nominal "Rp 5.000.000". Method tersebut kemudian dipanggil pada bagian body dashboard untuk menampilkan kartu saldo.

5. Berikutnya - Method _buildTransactionList "Makan Siang"

Berikutnya, buat method _buildTransactionList(BuildContext context) untuk menampilkan daftar transaksi yang dapat dipilih oleh pengguna. Pada transaksi "Makan Siang", ListTile memiliki onTap yang menjalankan Navigator.push untuk membuka TransactionDetailScreen. Data title, amount, category, dan date dikirim melalui constructor sesuai dengan transaksi yang dipilih.

6. Kemudian - Transaksi "Gaji Bulanan"

Kemudian, tambahkan transaksi kedua yaitu "Gaji Bulanan" dengan mekanisme navigasi yang sama. Saat transaksi dipilih, program kembali menggunakan Navigator.push dan mengirimkan data transaksi melalui TransactionDetailScreen, yaitu judul "Gaji Bulanan", nominal "Rp 5.000.000", kategori "Pemasukan", dan tanggal "1 September 2026". Dengan demikian, setiap transaksi pada dashboard dapat membuka halaman detail dengan data yang sesuai dengan baris yang dipilih.

7. Terakhir - Kesimpulan alur navigasi

Terakhir, alur pada dashboard_screen.dart menghubungkan halaman utama dengan dua halaman lainnya. Tombol tambah transaksi mengarahkan pengguna ke AddTransactionScreen, sedangkan pemilihan transaksi mengarahkan pengguna ke TransactionDetailScreen sekaligus membawa data transaksi melalui constructor. Hal ini menunjukkan penerapan navigasi dan passing data yang menjadi fokus utama praktikum.

📁 add_transaction_screen.dart

Form input transaksi

1. Selanjutnya - StatefulWidget & controller

Selanjutnya, buat file add_transaction_screen.dart sebagai halaman untuk mencatat transaksi baru. Pada file ini, program menggunakan StatefulWidget karena halaman memiliki data input yang dikelola melalui controller. Terdapat _formKey untuk mengelola validasi form, _titleController untuk menampung input judul transaksi, dan _amountController untuk menampung input nominal transaksi.

2. Kemudian - Scaffold & AppBar

Kemudian, buat struktur tampilan halaman menggunakan Scaffold dan AppBar. AppBar menampilkan judul "Catat Transaksi" dengan latar belakang berwarna merah dan teks berwarna putih. Bagian isi menggunakan Padding dan Form, dengan _formKey sebagai kunci untuk mengatur proses validasi seluruh input yang terdapat di dalam form.

3. Setelah itu - Input Judul

Setelah itu, tambahkan TextFormField pertama untuk menerima input judul transaksi. Field tersebut menggunakan _titleController sebagai penampung data dan memiliki validasi yang memeriksa apakah nilai input kosong. Apabila kosong, validator akan menampilkan pesan "Tidak boleh kosong" sehingga pengguna diwajibkan mengisi judul sebelum transaksi dapat disimpan.

4. Selanjutnya - Input Nominal

Selanjutnya, tambahkan TextFormField kedua untuk menerima input nominal transaksi. Field nominal menggunakan _amountController dan TextInputType.number sehingga input diarahkan untuk memasukkan data berupa angka. Sama seperti judul, field nominal memiliki validasi wajib diisi dengan pesan "Tidak boleh kosong" ketika input tidak diberikan.

5. Kemudian - ElevatedButton "Simpan"

Kemudian, tambahkan tombol ElevatedButton dengan label "Simpan" untuk menjalankan proses penyimpanan transaksi. Ketika tombol ditekan, program memanggil _formKey.currentState!.validate() untuk memeriksa seluruh aturan validasi pada form. Apabila validasi berhasil, program menampilkan SnackBar dengan pesan "Transaksi Berhasil Disimpan!" sebagai pemberitahuan kepada pengguna.

6. Terakhir - Navigator.pop()

Terakhir, setelah validasi berhasil dan pesan berhasil ditampilkan, program menjalankan Navigator.pop(context). Perintah ini menutup halaman form dan mengembalikan pengguna ke halaman sebelumnya, yaitu DashboardScreen. Penerapan tersebut merupakan penggunaan Navigator.pop untuk kembali dari halaman yang sebelumnya dibuka menggunakan Navigator.push.

📁 transaction_detail_screen.dart

Halaman detail transaksi dengan passing data

1. Selanjutnya - Import & class TransactionDetailScreen

Selanjutnya, buat file transaction_detail_screen.dart sebagai halaman yang bertugas menampilkan informasi detail transaksi. Pada tahap awal, program mengimpor material.dart agar komponen antarmuka Flutter dapat digunakan. Kemudian dibuat class TransactionDetailScreen yang merupakan StatelessWidget karena data transaksi diterima dari halaman sebelumnya dan digunakan untuk ditampilkan.

2. Kemudian - Variabel final

Kemudian, deklarasikan variabel final untuk menampung data transaksi yang dikirim dari DashboardScreen. Variabel yang digunakan terdiri dari title untuk judul transaksi, amount untuk nominal, category untuk kategori, dan date untuk tanggal transaksi. Penggunaan final sesuai dengan karakteristik StatelessWidget, karena nilai tersebut diterima melalui constructor dan tidak diubah selama halaman ditampilkan.

3. Setelah itu - Constructor required

Setelah itu, buat constructor TransactionDetailScreen dengan parameter required untuk memastikan seluruh data transaksi wajib dikirim ketika halaman detail dibuat. Constructor menerima title, amount, category, dan date, sehingga halaman detail dapat memperoleh informasi yang sesuai dengan transaksi yang dipilih pada dashboard.

4. Selanjutnya - Scaffold & AppBar

Selanjutnya, bangun tampilan halaman detail menggunakan Scaffold dan AppBar. AppBar diberi judul "Detail Transaksi", menggunakan warna merah sebagai latar belakang dan warna putih pada teks maupun elemen navigasinya. Hal ini membuat tampilan halaman detail tetap konsisten dengan halaman dashboard dan form transaksi.

5. Kemudian - Body Padding & Column

Kemudian, tambahkan bagian body untuk menampilkan informasi transaksi secara terstruktur. Padding digunakan untuk memberikan jarak dari tepi layar, sedangkan Column digunakan untuk menyusun komponen detail secara vertikal dan menempatkannya di tengah secara horizontal.

6. Setelah itu - Ikon & data utama (title, amount)

Setelah itu, tampilkan ikon transaksi dan data utama berupa judul serta nominal transaksi. Ikon receipt_long digunakan sebagai representasi visual detail transaksi. Variabel title digunakan untuk menampilkan judul transaksi yang diterima melalui constructor, sedangkan amount digunakan untuk menampilkan nominal transaksi dengan ukuran teks yang lebih besar sehingga menjadi informasi utama pada halaman detail.

7. Selanjutnya - Divider & informasi tambahan

Selanjutnya, tambahkan garis pemisah menggunakan Divider dan tampilkan informasi tambahan transaksi. Setelah nominal ditampilkan, Divider digunakan sebagai pemisah antara informasi utama dengan informasi detail. Data kategori ditampilkan melalui _buildDetailRow, kemudian diikuti data tanggal dan status transaksi. Nilai category dan date berasal dari data yang dikirim melalui constructor, sedangkan status ditetapkan secara langsung sebagai "Berhasil".

8. Kemudian - Widget _buildDetailRow()

Kemudian, buat widget pembantu _buildDetailRow() untuk menyusun setiap informasi detail dalam format baris. Method ini menerima dua parameter, yaitu label sebagai nama informasi dan value sebagai nilainya. Keduanya ditempatkan dalam Row dengan MainAxisAlignment.spaceBetween, sehingga label berada di satu sisi dan nilai berada di sisi lainnya. Pendekatan ini digunakan agar tampilan kategori, tanggal, dan status memiliki susunan yang konsisten.

9. Terakhir - Kesimpulan passing data

Terakhir, seluruh bagian pada transaction_detail_screen.dart saling terhubung untuk menerima dan menampilkan data transaksi yang dikirim dari dashboard. Ketika pengguna memilih salah satu transaksi, DashboardScreen membuat TransactionDetailScreen dan mengirimkan title, amount, category, serta date melalui constructor. Halaman detail kemudian menggunakan data tersebut untuk menampilkan informasi transaksi yang sesuai. Dengan demikian, file ini menjadi penerapan utama konsep passing data melalui constructor yang dipelajari pada praktikum.

▶️ Sekarang jalankan program dan lihat hasil

Eksekusi aplikasi

1. Screenshot hasil akhir aplikasi

Sekarang jalankan program dan lihat hasil yang sudah di buat

📝 Tugas: add_transaction_screen.dart Enhanced

Penambahan input tanggal dengan DatePicker

1. Selanjutnya - StatefulWidget dengan 3 controller

Selanjutnya, buat file add_transaction_screen.dart sebagai halaman untuk mencatat transaksi baru. Pada tahap ini, program menggunakan StatefulWidget untuk membangun halaman form transaksi. Di dalam state-nya disiapkan _formKey untuk menangani validasi form serta tiga TextEditingController, yaitu _titleController, _amountController, dan _dateController untuk menampung input judul, nominal, dan tanggal transaksi.

2. Kemudian - Scaffold & AppBar

Kemudian, bangun struktur utama halaman menggunakan Scaffold dan AppBar. AppBar digunakan untuk menampilkan judul "Catat Transaksi", sedangkan body menggunakan Padding dan Form agar seluruh input dapat dikelompokkan dalam satu form yang dikendalikan oleh _formKey.

3. Setelah itu - Input Judul

Setelah itu, tambahkan input Judul untuk menerima nama atau keterangan transaksi. Input menggunakan _titleController sebagai penampung nilai dan dilengkapi validator yang memeriksa apakah field dalam keadaan kosong. Apabila tidak diisi, program menampilkan pesan "Tidak boleh kosong".

4. Selanjutnya - Input Nominal

Selanjutnya, tambahkan input Nominal untuk menerima jumlah transaksi. _amountController digunakan untuk menampung nilai nominal, sedangkan TextInputType.number mengatur jenis keyboard yang digunakan agar pengguna dapat memasukkan data berupa angka. Field ini juga memiliki validasi wajib diisi.

5. Kemudian - Input Tanggal (readOnly)

Kemudian, tambahkan input Tanggal sebagai bagian dari data transaksi. Field tanggal menggunakan _dateController dan diatur dengan readOnly: true, sehingga tanggal tidak diketik secara langsung. Pada bagian decoration, diberikan hintText "DD/MM/YYYY" dan suffixIcon berupa tombol tambah yang digunakan untuk membuka pemilih tanggal.

6. Setelah itu - showDatePicker

Setelah itu, gunakan showDatePicker ketika tombol tambah pada field tanggal ditekan. Fungsi tersebut membuka kalender sehingga pengguna dapat memilih tanggal. initialDate menggunakan tanggal saat ini, sedangkan firstDate dan lastDate menentukan rentang tanggal yang dapat dipilih, yaitu dari tahun 2000 sampai 2100.

7. Selanjutnya - Format DD/MM/YYYY

Selanjutnya, periksa apakah pengguna benar-benar memilih tanggal. Apabila selectedDate tidak bernilai null, tanggal tersebut diformat menjadi bentuk DD/MM/YYYY. Fungsi padLeft(2, '0') digunakan agar nilai hari dan bulan selalu terdiri dari dua digit. Setelah format selesai dibuat, setState() digunakan untuk memasukkan hasilnya ke dalam _dateController sehingga tanggal pilihan tampil pada field tanggal.

8. Kemudian - Validasi tanggal

Kemudian, tambahkan validasi pada input tanggal agar pengguna wajib memilih tanggal sebelum menyimpan transaksi. Validator memeriksa isi _dateController, dan apabila masih kosong akan menampilkan pesan "Tanggal wajib diisi!". Dengan demikian, ketiga data utama pada form, yaitu judul, nominal, dan tanggal, memiliki pemeriksaan sebelum proses penyimpanan dijalankan.

9. Setelah seluruh input - Tombol Simpan

Setelah seluruh input tersedia, tambahkan tombol Simpan untuk menjalankan proses validasi form. Tombol menggunakan ElevatedButton dengan warna merah dan padding vertikal agar tampil sesuai dengan tema aplikasi. Ketika tombol ditekan, _formKey.currentState!.validate() memeriksa seluruh validator pada form.

10. Selanjutnya - SnackBar keberhasilan

Selanjutnya, apabila seluruh validasi berhasil, tampilkan pesan keberhasilan menggunakan SnackBar. Program menampilkan pesan "Transaksi Berhasil Disimpan!" sebagai pemberitahuan bahwa data telah melewati proses validasi. Setelah itu, Navigator.pop(context) dijalankan untuk menutup halaman form dan kembali ke halaman sebelumnya, yaitu dashboard.

11. Terakhir - dispose() controller

Terakhir, tambahkan method dispose() untuk memanggil dispose() pada seluruh TextEditingController yang digunakan. Ketiga controller, yaitu _titleController, _amountController, dan _dateController, dilepaskan sebelum super.dispose() dipanggil sehingga pengelolaan controller pada halaman form tetap ditangani secara lengkap.

12. Dengan demikian - Kesimpulan implementasi

Dengan demikian, add_transaction_screen.dart telah menerapkan form transaksi yang terdiri dari input judul, nominal, dan tanggal. Input tanggal menggunakan showDatePicker, hasil pilihan diformat menjadi DD/MM/YYYY, seluruh field memiliki validasi wajib diisi, dan setelah validasi berhasil halaman kembali ke dashboard menggunakan Navigator.pop. Implementasi ini sesuai dengan latihan pada modul yang meminta penambahan input tanggal transaksi dan validasi wajib diisi.

📱 File Pertama: Implementasi Basic Form dengan TextField

form-textfield.dart

a. Import Package dan Main Function

Langkah pertama adalah membuat file baru form-textfield.dart di dalam folder lib dan mengimport package Flutter Material Design yang menyediakan widget-widget dasar untuk membangun UI.

b. Class MyApp

Selanjutnya, dibuat class MyApp sebagai root widget yang menggunakan StatelessWidget karena tidak memerlukan perubahan state. Widget ini mengembalikan MaterialApp dengan Scaffold yang berisi AppBar dan body.

c. Class MyForm StatefulWidget

Kemudian dibuat class MyForm yang extends StatefulWidget karena form ini akan mengelola state berupa input text dari pengguna. StatefulWidget memerlukan class State yang terpisah untuk mengelola logika dan state-nya.

d. Deklarasi TextEditingController

Di dalam class _MyFormState, dideklarasikan variabel _textEditingController yang berfungsi sebagai controller untuk mengambil dan mengelola nilai input dari TextField. Controller ini sangat penting untuk mendapatkan nilai yang diinputkan pengguna.

e. Method dispose()

Method dispose() dioverride untuk membersihkan TextEditingController ketika widget dihapus dari widget tree. Ini penting untuk mencegah memory leak karena controller perlu di-dispose secara manual.

f. Method build() dengan Padding dan Column

Pada method build(), dibuat layout menggunakan Padding untuk memberikan jarak dari tepi layar, dan Column untuk menyusun widget secara vertikal dengan crossAxisAlignment.start agar konten rata kiri.

g. Widget Text dan SizedBox

Ditambahkan widget Text sebagai label instruksi untuk pengguna, diikuti dengan SizedBox untuk memberikan jarak vertikal sebesar 10 pixel sebelum TextField.

h. TextField dengan InputDecoration

Dibuat widget TextField dengan berbagai properti decoration untuk tampilan visual yang menarik. InputDecoration berisi labelText sebagai label, hintText sebagai placeholder, border: OutlineInputBorder() untuk border kotak, dan prefixIcon untuk icon di sebelah kiri.

i. Properti controller, keyboardType, dan onChanged

Pada TextField yang sama, ditambahkan properti controller yang menghubungkan dengan _textEditingController, keyboardType untuk menentukan jenis keyboard yang muncul (text), dan onChanged sebagai event listener yang akan dijalankan setiap kali ada perubahan input.

j. SizedBox untuk Jarak

Ditambahkan SizedBox dengan height 20 untuk memberikan jarak antara TextField dan button.

k. ElevatedButton dengan SnackBar

Dibuat ElevatedButton dengan method onPressed yang akan mengambil nilai dari controller, kemudian menampilkan nilai tersebut menggunakan SnackBar. Button ini juga diberi styling menggunakan styleFrom dengan background amber dan foreground hitam.

l. Hasil Running Aplikasi TextField

Jalankan programnya dan akan terlihat seperti pada gambar di bawah ini.

📱 File Kedua: Implementasi Form Validation dengan TextFormField

form-textformfield.dart

a. Import Package dan Main Function

Sama seperti file sebelumnya, langkah pertama adalah mengimport package Material dan membuat main function yang menjalankan aplikasi.

b. Class MyApp

Dibuat class MyApp sebagai root widget dengan judul AppBar "Basic Form TextFormField" untuk membedakan dengan implementasi TextField sebelumnya.

c. Class MyFormText StatefulWidget

Dibuat class MyFormText yang extends StatefulWidget karena form ini akan mengelola state yang lebih kompleks dengan mekanisme validasi.

d. Deklarasi GlobalKey dan Controllers

Di dalam class _MyFormTextState, dideklarasikan _formKey bertipe GlobalKey<FormState> yang berfungsi untuk mengakses state dari Form dan memanggil method validasi. Kemudian dideklarasikan dua controller untuk field nama dan email.

e. Method dispose()

Method dispose() dioverride untuk membersihkan kedua controller (name dan email) ketika widget dihapus dari widget tree.

f. Method _submitForm() dengan Validasi

Dibuat method _submitForm() yang akan dipanggil ketika button submit ditekan. Method ini menggunakan _formKey.currentState!.validate() untuk menjalankan validasi pada semua TextFormField. Jika validasi berhasil (return true), maka nilai dari kedua controller diambil dan ditampilkan menggunakan SnackBar.

g. Widget Form dengan Key

Pada method build(), layout dibungkus dengan widget Form dan diberi key _formKey untuk menghubungkan dengan GlobalKey yang telah dideklarasikan. Form ini kemudian berisi Padding dan Column untuk layout.

h. SizedBox untuk Jarak dari Atas

Ditambahkan SizedBox dengan height 10 untuk memberikan jarak dari atas.

i. TextFormField untuk Input Nama

Dibuat TextFormField pertama untuk input nama dengan controller _nameController dan decoration yang sesuai. Yang membedakan dengan TextField adalah adanya properti validator yang berisi logika validasi. Validator ini menerima parameter value dan mengembalikan String jika ada error, atau null jika valid.

j. SizedBox untuk Jarak Antar Field

Ditambahkan SizedBox untuk jarak antar TextFormField.

k. TextFormField untuk Input Email

Dibuat TextFormField kedua untuk input email dengan controller _emailController. Validator pada field ini lebih kompleks karena memeriksa dua kondisi: apakah field kosong dan apakah format email valid (mengandung '@').

l. SizedBox untuk Jarak Sebelum Button

Ditambahkan SizedBox untuk jarak sebelum button submit.

m. ElevatedButton Submit dengan Full Width

Dibuat SizedBox dengan width double.infinity agar button memenuhi lebar layar, kemudian di dalamnya terdapat ElevatedButton yang onPressed-nya memanggil method _submitForm yang telah dibuat sebelumnya.

n. Hasil Running Aplikasi TextFormField

Jalankan programnya dan akan terlihat seperti pada gambar di bawah ini.

🧮 TUGAS PRAKTIKUM

Aplikasi Kalkulator Sederhana

📱 File Ketiga: Main Application

main.dart

a. Import Package dan Calculator Page

Import material.dart dan calculator_page.dart

b. Fungsi main() dengan runApp(MyApp())

Fungsi main sebagai entry point aplikasi

c. Class MyApp

Class MyApp sebagai root widget aplikasi dengan MaterialApp, theme, dan home

📱 File Keempat: Calculator Page Implementation

calculator_page.dart

a. Import Material Package dan CalculatorPage Class

Import material package dan class CalculatorPage

b. Deklarasi Variabel-Variabel yang Diperlukan

Deklarasi variabel untuk mengelola state kalkulator

c. Method dispose() untuk Membersihkan Memory

Method dispose untuk cleanup resource

d. Fungsi Utama untuk Melakukan Perhitungan

Fungsi ini pertama-tama mengambil text dari kedua controller, lalu melakukan validasi untuk memastikan kedua field tidak kosong. Jika ada yang kosong, akan muncul SnackBar peringatan berwarna merah.

Selanjutnya, kita mengubah text menjadi angka menggunakan double.tryParse(). Jika parsing gagal (input bukan angka), akan muncul peringatan.

Pada bagian ini, kita menggunakan switch-case untuk menentukan operasi yang akan dilakukan.

Setelah perhitungan selesai, kita gunakan setState() untuk mengupdate tampilan hasil, dan menampilkan SnackBar hijau sebagai konfirmasi perhitungan berhasil.

e. Kemudian, kita membuat tampilan UI aplikasi kalkulator

Scaffold menyediakan struktur dasar halaman dengan AppBar berwarna deep purple dan judul "Kalkulator Kalkulator".

Bagian header menampilkan icon kalkulator berbukuran besar, judul aplikasi, dan instruksi singkat untuk pengguna. Kita menggunakan SingleChildScrollView agar konten bisa di-scroll jika layar kecil.

TextField pertama menggunakan _firstNumberController sebagai controller, dengan keyboard tipe numeric. Decoration meliputi label, hint text, icon angka 1, dan border dengan rounded corners. Saat di-focus, border akan berubah menjadi deep purple dengan ketebalan 2 pixel.

TextField kedua memiliki struktur yang sama dengan TextField pertama, namun menggunakan _secondNumberController dan icon angka 2.

Pada bagian ini, kita membuat 4 tombol operasi matematika yang disusun dalam Row dengan spacing merata (spaceEvenly).

Bagian terakhir menampilkan hasil perhitungan. Pertama ada Divider sebagai pemisah visual, kemudian label "Hasil Perhitungan", dan terakhir Container yang menampilkan nilai _result.

f. Jalankan Program dan Coba

Hasil running aplikasi kalkulator