Bagian 2: Implementasi Komponen

Wireframe dan daftar komponen dari Bagian 1 kini diterjemahkan menjadi berkas aplikasiAnalisis.m — satu berkas fungsi yang membangun seluruh jendela lewat kode. Kita menyusunnya bertahap: state dan jendela dulu, lalu grid layout, lalu komponen baris demi baris mengikuti wireframe. Seluruh sintaks GUI di bagian ini adalah MATLAB-only, ditulis mengikuti dokumentasi resmi uifigure dan komponen pendukungnya. Cakupannya:

• kerangka berkas fungsi: state, jendela, dan uigridlayout,
• lima komponen pada empat baris grid: judul, tombol, dropdown, UIAxes, label ringkasan,
• gaya visual: FontSize, FontWeight, FontColor,
• prinsip layout: 'fit', '1x', span kolom, dan perilaku saat jendela diubah ukurannya.

Kerangka Berkas Fungsi #

App programatik kita berupa satu fungsi utama aplikasiAnalisis() — bukan script — karena callback-nya nanti berupa nested functions yang berbagi workspace fungsi utama. Bagian pembuka berkas mendeklarasikan state lalu menciptakan jendela dan grid-nya:

% ---- State aplikasi (dibagi dengan nested functions) ----
dataMatriks = [];          % matriks data hasil muat ([] = belum ada data)
namaKolomCell = {};        % nama kolom dari header CSV
hasilAnalisis = struct();  % hasil analisisInti terakhir

% ---- Jendela dan grid layout ----
fig = uifigure('Name', 'Aplikasi Analisis Data', ...
    'Position', [100 100 720 520]);

layout = uigridlayout(fig, [4 3]);
layout.RowHeight = {'fit', 'fit', '1x', 'fit'};
layout.ColumnWidth = {'fit', 'fit', '1x'};

Mari kita bedah baris-baris kode di atas:

1. Baris 2-4 (dataMatriks … hasilAnalisis): tiga variabel state persis seperti tabel desain Bagian 1. Karena nested functions hidup di dalam fungsi utama, mereka membaca dan menulis ketiga variabel ini tanpa global dan tanpa guidata.
2. Baris 7-8 (uifigure(...)): fungsi pembuat jendela modern; Name menjadi judul di bilah jendela, Position [kiri bawah lebar tinggi] dalam piksel menempatkannya di 100,100 dengan ukuran 720 x 520 — cukup lebar untuk grafik dan ringkasan satu layar.
3. Baris 10 (uigridlayout(fig, [4 3])): grid 4 baris x 3 kolom menjadi parent seluruh komponen — pengganti perhitungan piksel manual.
4. Baris 11 (RowHeight = {'fit', 'fit', '1x', 'fit'}): empat baris wireframe. 'fit' berarti tinggi mengikuti isi (judul, kontrol, ringkasan); '1x' berarti memakan seluruh sisa ruang (grafik).
5. Baris 12 (ColumnWidth): kolom 1 dan 2 mengikuti lebar tombol dan label; kolom 3 '1x' menampung dropdown yang melebar mengikuti jendela.

Mengisi Grid Baris demi Baris #

Setiap komponen dibuat dengan parent layout, lalu ditempatkan lewat properti Layout.Row dan Layout.Column — angka sama seperti wireframe Bagian 1. Baris 1 dan 2 (judul + kontrol):

% ---- Baris 1: judul aplikasi ----
lblJudul = uilabel(layout, 'Text', 'Analisis Data Penjualan', ...
    'FontSize', 16, 'FontWeight', 'bold');
lblJudul.Layout.Row = 1;
lblJudul.Layout.Column = [1 3];

% ---- Baris 2: kontrol (tombol + dropdown kolom Y) ----
btnMuat = uibutton(layout, 'push', 'Text', 'Muat Data', ...
    'FontWeight', 'bold', 'ButtonPushedFcn', @muatDataButtonPushed);
btnMuat.Layout.Row = 2;
btnMuat.Layout.Column = 1;

lblKolom = uilabel(layout, 'Text', 'Kolom Y:');
lblKolom.Layout.Row = 2;
lblKolom.Layout.Column = 2;

ddKolom = uidropdown(layout, 'Enable', 'off', ...
    'ValueChangedFcn', @kolomYChanged);
ddKolom.Layout.Row = 2;
ddKolom.Layout.Column = 3;

Baris 3 dan 4 (grafik + ringkasan):

% ---- Baris 3: grafik ----
axGrafik = uiaxes(layout);
axGrafik.Layout.Row = 3;
axGrafik.Layout.Column = [1 3];

% ---- Baris 4: ringkasan statistik ----
lblRingkasan = uilabel(layout, 'Text', 'Klik "Muat Data" untuk memulai.', ...
    'FontWeight', 'bold', 'FontColor', [0.15 0.15 0.15]);
lblRingkasan.Layout.Row = 4;
lblRingkasan.Layout.Column = [1 3];

Mari kita bedah baris-baris kode di atas:

1. Baris 2-3 (uilabel(layout, 'Text', ...)): label judul dibuat langsung di grid; FontSize 16 dan FontWeight bold menjadikannya elemen paling menonjol — hierarki visual dimulai dari ukuran, bukan warna mencolok.
2. Baris 4-5 (Layout.Column = [1 3]): judul melebar span kolom 1 sampai 3 — komponen boleh menempati banyak sel sekaligus; pola yang sama dipakai axes dan label ringkasan di bawahnya.
3. Baris 8-9 (uibutton(layout, 'push', ...)): tombol bertipe 'push'; properti ButtonPushedFcn diisi function handle @muatDataButtonPushed — nama nested function yang didefinisikan di bagian bawah berkas (dibahas di Bagian 3). MATLAB mem-parse seluruh berkas lebih dulu sehingga handle itu sah meski fungsinya baru muncul belakangan.
4. Baris 16-17 (uidropdown(layout, 'Enable', 'off', ...)): dropdown lahir dinonaktifkan — persis keputusan Bagian 1: tidak ada data, tidak ada pilihan kolom. ValueChangedFcn menunggu pengguna mengganti pilihan.
5. Baris 20-22 (uiaxes(layout)): UIAxes dibuat dengan parent grid lalu ditempatkan di baris '1x' span tiga kolom; plot dan kawan-kawan akan menargetkannya secara eksplisit.
6. Baris 25-27 (lblRingkasan): label ringkasan memakai FontColor [0.15 0.15 0.15] (RGB 0-1) — abu gelap yang lembut di mata; teks awalnya memandu pengguna ke tombol.

Ketika aplikasiAnalisis() dijalankan di desktop MATLAB (dari folder src/), jendela 720 x 520 terbuka: judul tebal di atas, tombol Muat Data dan dropdown pucat (nonaktif) di baris kedua, area grafik kosong yang memenuhi tengah jendela, dan label “Klik “Muat Data” untuk memulai.” di bawah. Menekan tombol pun belum mengubah apa pun — nested functions callback-nya baru dibangun di Bagian 3.

Gaya Visual dan Keterbacaan #

Properti gaya seragam lintas komponen — FontSize, FontWeight, FontColor — cukup untuk membentuk hierarki tiga tingkat:

Satu aturan yang dijaga: FontSize terkecil tetap 12 — keterbacaan minimum yang direkomendasikan section App Designer. Untuk ringkasan yang kelak berisi tiga baris, dokumentasi uilabel menyatakan teks multi-baris dapat dibentuk dengan sprintf yang menyisipkan line break — pola yang kita pakai di Bagian 3.

Prinsip Layout yang Dipatuhi #

Kerangka grid membawa tiga prinsip sekaligus. Pertama, 'fit' mencegah komponen saling menimpa di jendela sempit: baris kontrol selalu setinggi tombolnya. Kedua, '1x' memastikan grafik — area terpenting — memakan semua ruang sisa; memperbesar jendela hanya memperbesar grafik. Ketiga, span [1 3] menjaga judul, grafik, dan ringkasan tetap satu bidang penuh sementara baris kontrol terbagi tiga kolom. Saat menguji nanti, periksa juga urutan fokus Tab: pengguna keyboard harus bisa mencapai tombol dan dropdown tanpa mouse.

Jendela lengkap berdiri dalam satu berkas fungsi. Bagian 3 menghidupkannya: logika muatCSV dan analisisInti yang teruji, lalu callback yang merangkai keduanya sampai grafik dan ringkasan terisi.