Tutorial GUI MATLAB : Program Kasir pada Toko Komputer

 

Matlab merupakan salah satu aplikasi atau software yang bisa digunakan untuk membuat program sederhana bahkan sampai program yang advance sekalipun. Software ini tentunya sangat membantu para pecinta matematika karena bisa membuat program perhitungan, sehingga tidak perlu menghitung secara manual. Matlab berbeda dengan bahasa pemrograman pendahulunya seperti Delphi, Basic, Java ataupun C++ karena Matlab termasuk ke dalam kategori bahasa pemrograman yang sangat mudah dipahami, seperti saya yang noob juga ternyata langsung paham, hehe.

Sesuai dengan janji saya postingan sebelumnya, saya kan mengajak teman-teman sekalian untuk membuat program MATLAB lainnya, yak, dan kali ini saya akan mencoba membuat sebuah program kasir. Kalian pasti sudah pernah melihat program yang dipakai seorang kasir bukan? Sangat berguna sekali karena dengan program itu mbak-mbak kasir tidak perlu lagi menghitung belanjaan kalian yang banyak, apalagi di saat banyak Diskon 12.12 seperti sekarang, wkwk.

Oke, berikut ini tahapan-tahapan pembuatannya :

1.      Buka Aplikasi Matlab

Gambar 1

2.      Buka lembar kerja GUI Matlab dengan cara ketik “guide” (tanpa tanda “ ”) pada command window dan tekan enter, sehingga akan muncul interace seperti berikut ini

Gambar 2

Atau bisa juga dibuka dengan cara klik icon GUIDE pada Menu Bar seperti gambar di bawah ini (versi terbaru bisa lewat New >> Graphical User Interface)

Gambar 3

3.      Klik “Ok” pada GUIDE Quick Start >> Create New GUI >> Blank GUI (default)

Gambar 4

4.      Untuk menampilkan nama-nama palet komponen, agar memudahkan penggunaan bisa dengan klik menu File >> Preferences

Gambar 5

Kemudian beri tanda centang (√) pada pilihan Show names in compoenent pallete lalu klik “Ok”

Gambar 6

Sehingga akan menghasilkan tampilan seperti ini

Gambar 7

5.      Buatlah desain program kasir sesuai dengan kebutuhan, pastikan desain yang kalian buat memuat jumlah barang, harga, jumlah harga dan total pembayaran, serta jumlah uang kembalian. Kira-kira seperti ini hasilnya

Gambar 8

6.      Edit property ­masing-masing component dengan cara double klik pada tiap component lalu edit property-nya sesuai dengan tabel berikut :

No	Nama Component	Property	Nilai
1	Static Text	FontSize	16
		String	KASIR TOKO "PRAMS KOMPUTER"
		Tag	text1
2	Static Text	FontSize	14
		String	Komputer
		Tag	text2
3	Static Text	FontSize	14
		String	Monitor
		Tag	text3
4	Static Text	FontSize	14
		String	Printer
		Tag	text4
5	Static Text	FontSize	14
		String	pcs
		Tag	text5,text6,text7
6	Static Text	FontSize	14
		String	Harga
		Tag	text8,text9,text10
7	Static Text	FontSize	14
		String	Jumlah
		Tag	text11,text12,text13
8	Static Text	FontSize	12
		String	------------sedang proses-------------
		Tag	text14
9	Static Text	FontSize	14
		String	Total Pembayaran
		Tag	text15
10	Static Text	FontSize	14
		String	Jumlah Uang
		Tag	text16
11	Static Text	FontSize	14
		String	Jumlah Kembalian
		Tag	text17
12	Edit Text	FontSize	14
		String	<kosongkan saja>
		Tag	edit1,edit2,edit3,edit4,edit5, edit6,edit7,edit8,edit9,edit10, edit11,edit12
13	Push Button	FontSize	14
		String	HITUNG TOTAL PEMBAYARAN
		Tag	pushbutton1
14	Push Button	FontSize	14
		String	HITUNG KEMBALIAN
		Tag	pushbutton2
15	Panel	FontSize	14
		String	Prams Tech
		Backgr	#ffb6c1
16	PopUp Menu	FontSize	14
		String	Harga Normal Harga Update Harga Diskon 12.12 12%
		Tag	popupmenu1

Sehingga interface desain GUI-nya akan menjadi seperti ini

Gambar 9

7.      Jalankan program dengan cara klik tombol play berwarna hijau kecil, kemudian save dengan nama “Kasir_Toko” (spasi diganti dengan “_”)

Gambar 10

Sehingga akan menghasilkan interface seperti ini

Gambar 11

8.      Isikan script atau rumus pada program kasir

Sintaks-sintaks yang saya gunakan saya bagi ke dalam beberapa opsi :

a.       Opsi pertama adalah dengan menggunakan harga awal yang sudah ditentukan ke dalam perhitungannya

b.      Opsi kedua adalah dengan menggunakan harga yang sudah update—kalian bisa memasukkan nominal harga secara custom

c.       Opsi ketiga adalah dengan menggunakan harga diskon 12.12 yaitu harga awal mendapat diskon sebesar 12%

Baca Juga : Tutorial Program GUI MATLAB : Aplikasi Kalkulator Mod (Sisa Pembagian) Sederhana

Tahap 1

Buka M-File program kasir tersebut, lalu cari sintaks di bawah ini dengan kombinasi tombol CTRL+F :

guidata(hObject, handles);

 

Kemudian sisipkanlah sintaks ini tepat di bawah sintaks di atas

set(handles.pushbutton1,'Enable','off')

set(handles.pushbutton2,'Enable','off')

set(handles.edit4,'Enable','off')

set(handles.edit5,'Enable','off')

set(handles.edit6,'Enable','off')

 Maka, hasilnya akan seperti ini

guidata(hObject, handles);

set(handles.pushbutton1,'Enable','off')

set(handles.pushbutton2,'Enable','off')

set(handles.edit4,'Enable','off')

set(handles.edit5,'Enable','off')

set(handles.edit6,'Enable','off')

 Penjelasan

Sintaks berwarna merah adalah sintaks bawaan M-File

Sintaks berwarna biru adalah sintaks yang digunakan untuk menonaktifkan tombol pushbutton1,pushbutton2,edit4,edit5,edit6 atau tombol “HITUNG TOTAL PEMBAYARAN”, tombol “HITUNG KEMBALIAN”, edit text “HARGA” pada gambar

Gambar 12

Tahap 2

Buka lembar kerja GUI Matlab lalu klik kanan pada “kotak Komputer” kemudian pilih view callbacks >> callback, akan muncul sintaks :

% Hints: get(hObject,'String') returns contents of edit2 as text

%        str2double(get(hObject,'String')) returns contents of edit2 as a double

 Kemudian sisipkanlah sintaks ini tepat di bawah sintaks di atas

set(handles.pushbutton1,'Enable','on')

 Maka, hasilnya akan seperti ini

% Hints: get(hObject,'String') returns contents of edit2 as text

%        str2double(get(hObject,'String')) returns contents of edit2 as a double

set(handles.pushbutton1,'Enable','on')

 Penjelasan

Sintaks berwarna merah adalah sintaks bawaan M-File

Sintaks berwarna biru adalah sintaks yang digunakan untuk menaktifkan tombol pushbutton1 atau tombol “HITUNG TOTAL PEMBAYARAN” pada gambar

Gambar 13

Tahap 3

Buka lembar kerja GUI Matlab lalu klik kanan pada “kotak Jumlah Uang” kemudian pilih view callbacks >> callback, akan muncul sintaks :

% Hints: get(hObject,'String') returns contents of edit2 as text

%        str2double(get(hObject,'String')) returns contents of edit2 as a double

 Kemudian sisipkanlah sintaks ini tepat di bawah sintaks di atas

set(handles.pushbutton2,'Enable','on')

 Maka, hasilnya akan seperti ini

% Hints: get(hObject,'String') returns contents of edit2 as text

%        str2double(get(hObject,'String')) returns contents of edit2 as a double

set(handles.pushbutton2,'Enable','on')

 Penjelasan

Sintaks berwarna merah adalah sintaks bawaan M-File

Sintaks berwarna biru adalah sintaks yang digunakan untuk menonaktifkan tombol pushbutton1 atau tombol “HITUNG KEMBALIAN” pada gambar

Gambar 14

Tahap 4

Buka lembar kerja GUI Matlab lalu klik kanan pada “popupmenu Harga” kemudian pilih view callbacks >> callback, akan muncul sintaks :

% Hints: contents = get(hObject,'String') returns popupmenu1 contents as cell array

%        contents{get(hObject,'Value')} returns selected item from popupmenu1

Kemudian sisipkanlah sintaks ini tepat di bawah sintaks di atas

set(handles.edit4,'Enable','on')

set(handles.edit5,'Enable','on')

set(handles.edit6,'Enable','on')

 Maka, hasilnya akan seperti ini

% Hints: contents = get(hObject,'String') returns popupmenu1 contents as cell array

%        contents{get(hObject,'Value')} returns selected item from popupmenu1

set(handles.edit4,'Enable','on')

set(handles.edit5,'Enable','on')

set(handles.edit6,'Enable','on')

 Penjelasan

Sintaks berwarna merah adalah sintaks bawaan M-File

Sintaks berwarna biru adalah sintaks yang digunakan untuk menaktifkan edit4,edit5,edit6 atau edit text 4,5,dan 6 pada gambar

 

Gambar 15

Tahap 5

Buka lembar kerja GUI Matlab lalu klik kanan pada “tombol HITUNG TOMBOL PEMBAYARAN” kemudian pilih view callbacks >> callback, akan muncul sintaks :

function pushbutton1_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton1 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA) 

Kemudian sisipkanlah sintaks ini tepat di bawah sintaks di atas

global total_bayar

km=str2double(get(handles.edit1,'String'));

mn=str2double(get(handles.edit2,'String'));

pr=str2double(get(handles.edit3,'String'));

up_km=str2double(get(handles.edit4,'String'));

up_mn=str2double(get(handles.edit5,'String'));

up_pr=str2double(get(handles.edit6,'String'));

harga_km=4000000;

harga_mn=550000;

harga_pr=750000;

harga=get(handles.popupmenu1,'Value');

if harga==1

jumlah_km=km*harga_km;

jumlah_mn=mn*harga_mn;

jumlah_pr=pr*harga_pr;

total_bayar=jumlah_km+jumlah_mn+jumlah_pr;

elseif harga==2

    jumlah_km=km*up_km;

    jumlah_mn=mn*up_mn;

    jumlah_pr=pr*up_pr;

    total_bayar=jumlah_km+jumlah_mn+jumlah_pr;

elseif harga==3

    jumlah_km=(km*harga_km)-(12/100*(km*harga_km));

    jumlah_mn=(mn*harga_mn)-(12/100*(mn*harga_mn));

    jumlah_pr=(pr*harga_pr)-(12/100*(pr*harga_pr));

    total_bayar=jumlah_km+jumlah_mn+jumlah_pr;

end

set(handles.edit7,'string',sprintf('%.0f',jumlah_km));

set(handles.edit8,'string',sprintf('%.0f',jumlah_mn));

set(handles.edit9,'String',sprintf('%.0f',jumlah_pr));

set(handles.edit10,'String',sprintf('%.0f',total_bayar));

 Maka, hasilnya akan seperti ini

function pushbutton1_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton1 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

global total_bayar

km=str2double(get(handles.edit1,'String'));

mn=str2double(get(handles.edit2,'String'));

pr=str2double(get(handles.edit3,'String'));

up_km=str2double(get(handles.edit4,'String'));

up_mn=str2double(get(handles.edit5,'String'));

up_pr=str2double(get(handles.edit6,'String'));

harga_km=4000000;

harga_mn=550000;

harga_pr=750000;

harga=get(handles.popupmenu1,'Value');

if harga==1 

jumlah_km=km*harga_km;

jumlah_mn=mn*harga_mn;

jumlah_pr=pr*harga_pr;

total_bayar=jumlah_km+jumlah_mn+jumlah_pr;

elseif harga==2

    jumlah_km=km*up_km;

    jumlah_mn=mn*up_mn;

    jumlah_pr=pr*up_pr;

    total_bayar=jumlah_km+jumlah_mn+jumlah_pr;

elseif harga==3

    jumlah_km=(km*harga_km)-(12/100*(km*harga_km));

    jumlah_mn=(mn*harga_mn)-(12/100*(mn*harga_mn));

    jumlah_pr=(pr*harga_pr)-(12/100*(pr*harga_pr));

    total_bayar=jumlah_km+jumlah_mn+jumlah_pr;

end

set(handles.edit7,'string',sprintf('%.0f',jumlah_km));

set(handles.edit8,'string',sprintf('%.0f',jumlah_mn));

set(handles.edit9,'String',sprintf('%.0f',jumlah_pr));

set(handles.edit10,'String',sprintf('%.0f',total_bayar));

 Penjelasan

Sintaks berwarna merah adalah sintaks bawaan M-File

Sintaks berwarna biru

Sintaks global total_bayar digunakan unutk mendefinisikan bahwa total_bayar dapat dioperasikan ke pehitungan selanjutnya

Sintaks km=str2double(get(handles.edit1,'String')); dst digunakan untuk mendefinisikan bahwa input km dapat diubah menjadi angka dan digunakan untuk perhitungan selanjutnya (double disarankan karena lebih cepat dari fungsi num)

Sintaks up_km=str2double(get(handles.edit4,'String')); dst digunakan untuk mendefinisikan bahwa input up_km dapat diubah menjadi angka dan digunakan untuk perhitungan selanjutnya (double disarankan karena lebih cepat dari fungsi num)

Sintaks harga_km=4000000; dst digunakan untuk mendefinisikan bahwa harga normal dari komputer (km) adalah 4000000

Sintaks harga=get(handles.popupmenu1,'Value'); digunakan untuk mendefinisikan bahwa harga memiliki beberapa value di dalam popup menu

Sintaks if harga==1 dst digunakan untuk memilih value dari menu yang disedikana di dalam popupmenu

Sintaks jumlah_km=km*harga_km; dst digunakan untuk mendefinisikan perhitungan jumlah harga komputer (harga normal)

Sintaks jumlah_km=km*up_km; dst digunakan untuk mendefinisikan perhitungan jumlah harga komputer (harga update yang bisa diedit)

Sintaks jumlah_km=(harga_km)-(12/100*(km*harga_km)); dst digunakan untuk mendefinisikan perhitungan jumlah harga komputer yang mendpat diskon 12% (harga diskon 12.12 12%)

Sintaks total_bayar=jumlah_km+jumlah_mn+jumlah_pr; dst digunakan untuk mendefinisikan perhitungan total pembayaran

Sintaks set(handles.edit10,'String',sprintf('%.0f',total_bayar)); digunakan untuk menampilkan hasil dari perhitungan total pembayaran ke dalam angka format long

Gambar 16

Gambar 17

Tahap 6

Buka lembar kerja GUI Matlab lalu klik kanan pada “tombol HITUNG KEMBALIAN” kemudian pilih view callbacks >> callback, akan muncul sintaks :

function pushbutton2_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton3 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

 Kemudian sisipkanlah sintaks ini tepat di bawah sintaks di atas

global total_bayar

K=str2double(get(handles.edit11,'String'));

uang_kembali=K-total_bayar;

set(handles.edit12,'String',sprintf('%.0f',uang_kembali));

 Maka, hasilnya akan seperti ini

function pushbutton2_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton3 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

global total_bayar

K=str2double(get(handles.edit11,'String'));

uang_kembali=K-total_bayar;

set(handles.edit12,'String',sprintf('%.0f',uang_kembali));

 Penjelasan

Sintaks berwarna merah adalah sintaks bawaan M-File

Sintaks berwarna biru

Sintaks global total_bayar digunakan unutk mendefinisikan bahwa total_bayar dapat dioperasikan ke pehitungan selanjutnya

Sintaks K=str2double(get(handles.edit2,'String')); digunakan untuk mendefinisikan bahwa input K dapat diubah menjadi angka dan digunakan untuk perhitungan selanjutnya (double disarankan karena lebih cepat dari fungsi num)

Sintaks uang_kembali=K-total_bayar; digunakan untuk menghitung sisa uang kembalian

Sintaks set(handles.edit16,'String',sprintf('%.0f',uang_kembali)); digunakan untuk menampilkan hasil dari pengurangan jumlah uang dengan total pembayaran ke dalam angka format long

Gambar 18

9.      Run atau Jalankan script sehingga muncul interface seperti gambar di bawah ini

Gambar 19

10.  Uji coba Program dengan memasukkan angka dan harga, kemudian klik tombol “HITUNG TOTAL PEMBAYARAN ” untuk memulai proses perhitungan dan melihat hasil program kasir toko komputer

Uji Coba untuk Harga Normal

Gambar 20

Uji Coba untuk Harga Update

Gambar 21

Uji Coba untuk Harga Diskon 12.12 12%

Gambar 22

Demikian penjelasan singkat tentang Tutorial GUI MATLAB : Program Kasir pada Toko Komputer. Apabila terdapat pertanyaan silakan bisa langsung ketik di kolom komentar di bawah.

Untuk men-download contoh program yang sudah saya buat di atas, bisa cek di link berikut >> Download Contoh Data

Untuk pembahasan aplikasi lainnya akan segera saya publish, stay terus di sini, Enjoy...

Tutorial Matlab GUI