Cara Membuat Aplikasi Kasir Menggunakan Visual Studio 2010

Halo Sobat Nongkrong! Balik lagi bareng Bang Tekno.

Bagi kalian yang baru terjun ke dunia pemrograman atau sekadar ingin melatih logika dasar, membuat aplikasi kasir (Point of Sales) adalah salah satu "proyek wajib". Dari proyek sederhana ini, kita bisa belajar banyak tentang penggunaan variabel, percabangan logika (If-Else), dan operasi matematika langsung di dalam script.

Nah, di artikel kali ini Bang Tekno mau berbagi tutorial fundamental cara meracik aplikasi kasir buatan sendiri menggunakan Visual Studio 2010. Tenang saja, kodingannya sangat simple dan mudah dipahami. Yuk, langsung kita bedah cara bikinnya!

---

🛠️ Langkah-Langkah Membuat Aplikasi Kasir

1. Silakan buka Visual Studio 2010 kalian, buat project baru (Windows Form Application), lalu buatlah desain tata letak (User Interface) Form kasir seperti referensi gambar di bawah ini:

2. Agar kodingan kita nanti bisa tersambung dengan tombol dan kotak teks yang ada di layar, kita wajib mengubah Properties dari masing-masing komponen. Klik komponennya satu per satu di layar Form, lalu ubah nilainya di jendela Properties sebelah kanan menjadi seperti tabel berikut:

Jenis Komponen	Ubah Name	Ubah Text / Caption
Label Tanggal	lblTanggal	Kosongkan (-)
Label Jam	lblJam	Kosongkan (-)
TextBox ID Menu	txtId	Kosongkan (-)
TextBox Nama Menu	txtMenu	Kosongkan (-)
TextBox Satuan	txtSatuan	Kosongkan (-)
TextBox Harga	txtHarga	Kosongkan (-)
TextBox Pesanan (Qty)	txtPesanan	Kosongkan (-)
TextBox Total	txtTotal	Kosongkan (-)
TextBox Bayar	txtBayar	Kosongkan (-)
TextBox Kembali	txtKembali	Kosongkan (-)
Button Baru	cmdBaru	Menu Baru
Button Tutup	cmdTutup	Tutup
Timer	Timer1	Interval : 1

💻 Tahap Coding (Source Code)

3. Sekarang saatnya memasukkan nyawa ke dalam aplikasi kita. Tulislah source code di bawah ini sesuai dengan fungsinya masing-masing.

Caranya: Klik dua kali (double-click) pada komponen yang dimaksud di halaman Form UI, lalu copas kodenya ke area editor yang terbuka.

' === KLIK 2x PADA KOMPONEN: Timer1 ===
Private Sub Timer1_Timer()
    lblTanggal.Caption = Format(Date, "dd mmmm yyyy")
    lblJam.Caption = Format(Time, "hh:mm:ss")
End Sub


' === KLIK 2x PADA KOMPONEN: txtId ===
' (Logika Pemanggilan Menu Berdasarkan Kode ID)
Private Sub txtId_KeyPress(KeyAscii As Integer)
    If KeyAscii = 13 Then ' Jika tombol Enter ditekan
        
        If txtId.Text = "101" Then
            txtMenu.Text = "Sate Manusia"
            txtSatuan.Text = "Porsi"
            txtHarga.Text = 15000
            
        ElseIf txtId.Text = "102" Then
            txtMenu.Text = "Kebab"
            txtSatuan.Text = "Porsi"
            txtHarga.Text = 10000
            
        ElseIf txtId.Text = "103" Then
            txtMenu.Text = "Soto Indomie"
            txtSatuan.Text = "Porsi"
            txtHarga.Text = 17000
            
        ElseIf txtId.Text = "104" Then
            txtMenu.Text = "Dodol Garut Yahut"
            txtSatuan.Text = "Porsi"
            txtHarga.Text = 20000
            
        Else
            MsgBox ("Menu yang dipesan belum ada...!")
        End If
        
        ' Pindahkan kursor ke kolom jumlah pesanan
        txtPesanan.SetFocus 
    End If
End Sub


' === KLIK 2x PADA KOMPONEN: txtPesanan ===
' (Menghitung Total: Harga dikali Jumlah Pesanan)
Private Sub txtPesanan_Change()
    txtTotal.Text = Val(txtHarga.Text) * Val(txtPesanan.Text)
End Sub


' === KLIK 2x PADA KOMPONEN: txtBayar ===
' (Menghitung Kembalian: Uang Bayar dikurangi Total)
Private Sub txtBayar_Change()
    txtKembali.Text = Val(txtBayar.Text) - Val(txtTotal.Text)
End Sub


' === KLIK 2x PADA KOMPONEN: cmdBaru ===
' (Tombol Reset/Bersihkan Form untuk transaksi baru)
Private Sub cmdBaru_Click()
    txtId.Text = ""
    txtMenu.Text = ""
    txtSatuan.Text = ""
    txtHarga.Text = ""
    txtPesanan.Text = ""
    txtTotal.Text = ""
    txtBayar.Text = ""
    txtKembali.Text = ""
    
    txtId.SetFocus
End Sub


' === KLIK 2x PADA KOMPONEN: cmdTutup ===
' (Tombol untuk keluar dari aplikasi)
Private Sub cmdTutup_Click()
    Unload Me
End Sub

🚀 Pengujian Aplikasi

4. Terakhir, tinggal kalian jalankan aplikasinya dengan klik ikon Start Debugging (Play) di menu atas, atau cukup tekan tombol F5 di keyboard.

Coba ketikkan ID Menu (misalnya 101), lalu tekan Enter. Otomatis nama menu dan harganya akan muncul. Masukkan jumlah pesanan dan uang bayarnya, maka sistem akan langsung menghitung kembaliannya secara otomatis. Ini adalah hasilnya saat dijalankan:

Sangat mudah, bukan? Semoga tutorial ini bisa jadi batu loncatan yang asyik buat memperdalam logika pemrograman kalian. Kalau ada kode yang error atau kendala teknis saat di-run, tinggalkan jejak di kolom komentar aja!

Keep coding & stay update bareng Teknongkrong!