3.

PERANCANGAN DAN IMPLEMENTASI

3.1. Gambaran Umum Aplikasi

Aplikasi Penjualan Toko Muti ini merupakan aplikasi penjualan berbasis
desktop yang akan mendukung kinerja kasir, pemilik toko, dan pegawai dalam
melakukan proses jual beli bahan. Aplikasi ini dikhususkan untuk proses penjualan
barang, dimana saat sebelum aplikasi ini dibuat, toko muti masih melakukan transaksi
nya manual, dan pencatatan barang manual, dimana membuat pekerjaan tidak begitu
efisien. Pada aplikasi penjualan ini beberapa menu yang akan dihadirkan dalam
mendukung penjualan barang dan pencatatan penjualan yaitu menu data master,
menu transaksi penjualan, menu laporan penjualan, dan menu ganti password.

3.2. Analisis

Tahap awal dalam pembuatan aplikasi penjualan ini adalah menganalisis

kebutuhan yang dibutuhkan oleh operasional toko. Dengan kasus transaksi yang
masih bersifat manual, tidak memiliki data yang terintegritas satu sama lain membuat
pencatatan dan pelaksanan kegiatan jual beli kurang maksimal, laporan penjualan pun
dicatat secara manual, juga aplikasi ini akan memudahkan pencatatan pelanggan
mana yang masih memiliki hutang dan kapan masa tenggang pembayarannya.

Dengan berkembangnya teknologi, maka penulis memilih untuk membuat

aplikasi penjualan berbasis Desktop. Pemilihan berbasis desktop karena kelengkapan
fitur – fiturnya serta tidak repot harus mengerjakan tugas tugas operasional toko
secara manual. Dan pemilihan Visual Studio untuk digunakan sebagai platform
karena Visual Studio bersifat open source, mudah digunakan, dan tampilan yang
dihasilkan sangat memukau. Dengan begitu diharapkan pengguna dapat lebih mudah
dan tertarik dalam menggunakan aplikasi ini. Pada tahap ini dilakukan analisis

15
 16

mengenai perangkat lunak dan perangkat keras yang dibutuhkan untuk membuat
Aplikasi Penjualan Berbasis Desktop serta komponen lain yang mendukung sistem.

3.2.1. Analisis Kebutuhan Software dan Hardware

Dalam membuat aplikasi penjualan toko muti berbasis desktop membutuhkan

beberapa software dan hardware, antara lain sebagai berikut:
1. Kebutuhan software yang digunakan, antara lain:
a. Visual Studio 2010 untu membuat executable program. Dan
menuliskan koding program
b. XAMPP Control Panel V3.2.2 untuk mengaktifkan apache, mysql
sebagai database program.
c. Crystal Report 8.5 untuk membuat laporan penjualan dan laporan
lainnya.
d. StarUML untuk membuat diagram Use Case Diagram, Activity
Diagram, dan Class Diagram
2. Kebutuhan Hardware yang digunakan, antara lain:
a. Laptop HP 15-ba026AX dengan spesifikasi Sistem Operasi Windows
7 Ultimate 64-bit
b. Processor : AMD A10-9600P RADEON R5, 10 COMPUTE CORES
4C+6G (4 CPUs), ~2.4GHz
c. RAM 8 GB
d. Harddisk 1TB

3.2.2. Analisis Fungsional

Aplikasi Penjualan Berbasis Desktop ini dibuat untuk mengkomputerisasi

proses penjualan dan pencatatan laporan yang awalnya masih bersifat manual. Menu
aplikasi ini memiliki 2 bagian, yaitu untuk user dan admin.
Berikut ini adalah menu pada tampilan umum :
 17

1. Tampilan Form Menu Utama

Form ini berisi keseluruhan pilihan menu dari aplikasi penjualan toko
muti, setiap user atau admin yang berhasi login akan bisa mengakses
lima menu di form ini, yaitu files, master, transaksi, laporan, dan
utility.
2. Tampilan Form Login
Form ini berisikan sistem keamanan untuk bisa menggunakan
aplikasi, membuat level user memiliki peran berbeda dalam aplikasi
penjualan ini.
3. Tampilan Form Transaksi Penjualan
Form ini berisikan sistem penjualan otomatis, terdapat keterangan
waktu, user, pelanggan dan barang apa yang hendak dibeli oleh
pelanggan.
4. Tampilan Form Laporan
Form ini berisikan 2 laporan, yaitu laporan data master, dan laporan
penjualan, dimana laporan ini akan ditampilkan pada window baru
dengan menggunakan crystal report viewer.
5. Tampilan Form Master
Form master ini akan berisikan data data master admin, pelanggan
dan barang, dimana user dapat memasukkan, mengedit dan
menghapus data yang langsung terkoneksi kedalam database.
6. Tampilan Form Utility
Form ini berisikan form untuk mengganti password user atau admin.

3.3. Perancangan
 18

Pada tahap ini dilakukan perancangan aplikasi berdasarkan perencanaan dan

analisis yang telah dilakukan penulis sebelumnya. Perancangan aplikasi meliputi
perancangan struktur navigasi dan perancangan tampilan.

3.3.1. Perancangan Sistem dengan UML

Perancangan sistem aplikasi ini dibuat menggunakan diagram UML
untuk merancang model sistem dan menggambarkan cara kerja program.
Perancangan sistem digambarkan melalui Use Case Diagram, Activity
Diagram, dan Class Diagram. Diagram tersebut menggambarkan secara garis
besar mengenai sistem pada Aplikasi Penjualan Toko Muti.

1. Perancangan Use Case Diagram

Sebuah diagram Use Case adalah sebuah diagram yang menunjukkan
hubungan antara aktor dan kasus penggunaan dalam sistem. Diagram ini
menggambarkan siapa yang menggunakan sistem dan apa saja yang dapat
dilakukannya. Aktor adalah segala hal diluar sistem yang akan menggunakan
sistem tersebut.
 19

Gambar 3.1 Use Case Diagram Aplikasi Penjualan Toko Muti

Pada Gambar 3.1, terdapat 3 aktor yaitu pelanggan, admin atau

pemilik toko, dan user atau pegawai toko. Dimana setiap use case diatas
dihubungkan dengan directed association terhadap aktor aktor yang ada. Pada
aktor admin atau bisa disebut juga sebagai pemiliki toko, hanya dapat
melakukan melihat laporan pada aplikasi penjualan. Untuk aktor user atau
bisa juga disebut pegawai toko, aktor inilah yang memiliki banyak peran, dan
interaksi terhadap aplikasi penjualan, pertama user ini mampu untuk
melakukan penginputan data master pelanggan, barang, dan user langsung
terhubung kedalam database. Setelah itu user ini juga dapat melakukan
interaksi penjualan dengan pelanggan, dengan form transaksi penjualan, struk,
dan pencatatan penjualan akan tersimpan dan dapat dicetak langsung secara
otomatis. Setelah itu user ini juga dapat melihat data barang dan stok barang.
Pada aktor pembeli atau pelanggan mereka dihubungkan dengan use case
transaksi penjualan saja, karena mereka hanya bisa melakukan interaksi
 20

sebatas pembelian barang, dan tidak lebih. Pada transaksi penjualan, pembeli
atau pelanggan akan mendapatkan struk dan nomor pelanggan jika mendaftar
sebagai pelanggan, dimana keuntungan mendaftar pelanggan, pelanggan dapat
mengkredit barang belanjanya, dengan ketentuan toko tersebut.

2. Perancangan Activity Diagram

Activity Diagram adalah diagram yang menggambarkan workflow
(aliran kerja) atau aktivitas dari sebuah sistem yang sedang dibangun. Proses
awal pada Activity Diagram adalah perancangan alur yang digambarkan
dengan initial state. Lalu diakhiri dengan final state. Hubungan setiap actions
dihubungkan dengan control flow, memakai decision untuk membuat
percabangan kondisional. Yang perlu diperhatikan, yaitu Activity Diagram
bukan menggambarkan aktivitas sistem yang dilakukan aktor, tetapi
menggambarkan aktivitas yang dapat dilakukan oleh sistem.
 21

Gambar 3.2 Activity Diagram Aplikasi Penjualan Toko Muti

Pada Activity Diagram sistem (Gambar 3.2) Digambarkan bahwa

sistem akan menampilkan menu utama ketika pertama kali aplikasi
dijalankan, lalu pengguna aplikasi akan diminta untuk login terlebih dahulu
sebelum dapat mengakses menu menu yang tersedia didalamnya. Pada form
login, pengguna aplikasi, harus memasukkan username dan password yang
 22

sesuai dengan database yang ada, jika terdaftar sebagai level user, maka akan
masuk sebagai user, tetapi jika level nya admin, maka akan masuk sebagai
admin. Jika gagal dalam login, user tidak akan dapat masuk kedalam sistem
aplikasi, dan akan diminta login lagi. Setelah login, dan jika level nya terbaca
sebagai admin, maka menu aplikasi yang dapat diakses hanyalah menu
laporan saja. Pada menu laporan admin bisa melihat laporan penjualan, dan
juga laporan data master, termasuk laporan piutang pelanggan.
Jika masuk ke sistem sebagai user atau pegawai toko, maka user
tersebut akan bisa melakukan pengecekan, penginputan dan penghapusan
data yang ada pada database tersebut melalui form master data, sistem akan
menampilkan data data yang sudah ada dan yang bisa dilakukan modifikasi,
jika user ingin melanjutkan, maka transaksi penjualan dapat dilakukan, sistem
akan menampilkan form transaksi penjualan dimana user harus melayani
pelanggan yang akan membeli barang di toko muti, ketika pelanggan ada yang
ingin membayar secara kredit, sistem akan menyimpan data kredit terlebih
dahulu sebelum mencetak struk atau nota penjualan, setelah itu transaksi telah
selesai dan kegiatan jual beli menjadi lebih efisien.

3. Perancangan Class Diagram

Class Diagram merupakan salah satu diagram utama dari Unified
Modelling Language (UML) untuk menggambarkan class atau blueprint
object pada sebuah sistem. Class Diagram adalah model statis yang
menggambarkan struktur dan deskripsi class, serta hubungannya antara class.
Class memiliki 3 bagian utama, yaitu nama kelas, atribut, dan operasi.
 23

Gambar 3.3 Class Diagram Aplikasi Penjualan Toko Muti

Pada Class Diagram yang dapat dilihat pada Gambar 3.3 terdapat 5
class, yaitu tbl_admin, tbl_pelanggan, tbl_barang, tbl_jual, tbl_detailjual yang
masing-masing memiliki atribut dan operasi masing-masing. Class tbl_admin
memiliki hubungan dengan class tbl_pelanggan dan tbl_barang, dengan hubungan
relasi asosiative one to many yaitu class tbl_admin dapat melayani banyak pelanggan,
dan class tbl_admin dapat memasukkan dan menginput banyak barang. Pada class
tbl_pelanggan class ini memiliki hubungan dengan tbl_jual dan tbl_barang, dimana
class ini memiliki hubungan penuh terhadap tbl_barang, karena aktivitas yang dapat
dilakukan sudah pasti membutuhkan class tbl_barang. Pada class tbl_barang, class ini
memiliki hubungan penuh terhadap class tbl_detailjual karena perubahan yang terjadi
akibat transaksi penjualan semua datanya akan dicatat pada class tbl_detailjual. Pada
class tbl_jual, class ini lah yang memiliki banyak relasi terhadap class yang lainnya,
 24

dimana class ini dapat mengambil data dari class tbl_admin, tbl_pelanggan, dan
tbl_detailjual. Oleh karena itu aplikasi ini memusatkan class nya di class tbl_jual.

3.3.2. Perancangan Database

Perancangan database digunakan untuk memudahkan dalam pengertian

struktur database untuk program. Pada perancangan database akan dijelaskan
hubungan antar entitas dan juga struktur dari database. Dalam pembuatan Aplikasi
Penjualan Toko Muti Berbasis Desktop, Penulis menggunakan database MySQL
dengan nama db_penjualan yang terdiri dari 5 tabel, yaitu tabel tbl_admin,
tbl_barang, tbl_pelanggan, tbl_jual, dan tbl_detailjual.

1. tbl_admin
Tabel 3.1 Struktur Tabel tbl_admin

Nama Kolom Tipe Data Keterangan

KodeAdmin varchar(6) Primary Key
NamaAdmin varchar(40)
PasswordAdmin varchar(20)
level varchar(10)

2. tbl_barang
Tabel 3.2 Struktur Tabel tbl_barang

Nama Kolom Tipe Data Keterangan

KodeBarang varchar(6) Primary Key
NamaBarang varchar(40)
HargaBarang integer
SatuanBarang varchar(50)
JumlahBarang integer
 25

3. tbl_pelanggan
Tabel 3.3 Struktur Tabel tbl_pelanggan

Nama Kolom Tipe Data Keterangan

KodePelanggan Varchar(6) Primary Key
NamaPelanggan Varchar(40)
AlamatPelanggan Varchar(100)
TelpPelanggan Varchar(15)
Kredit Integer
JatuhTempo Date

4. tbl_jual
Tabel 3.4 Struktur Tabel tbl_jual

Nama Kolom Tipe Data Keterangan

NoJual Varchar(10) Primary Key
TglJual Date
JamJual Time
ItemJual Integer
Total Integer
Dibayar Integer
Kembali Integer
Kredit Integer
jatuhTempo Date
KodePelanggan Varchar(6)
KodeAdmin Varchar(6)
 26

5. tbl_detailjual
Tabel 3.5 Struktur Tabel tbl_detailjual

Nama Kolom Tipe Data Keterangan

NoJual varchar(10)
KodeBarang varchar(6)
NamaBarang varchar(50)
HargaJual Integer
JumlahJual Integer
Subtotal Integer

3.3.3. Perancangan Tampilan Aplikasi

1. Rancangan Tampilan Form Menu Utama
Pada form menu utama ini adalah form yang pertama kali akan muncul
pada aplikasi penjualan.

Gambar 3.4 Rancangan Tampilan Form Menu Utama

Keterangan Gambar :
 27

1. MenuStrip1 merupakan menu yang dapat di klik dan akan menampilkan

dropdown menu.
2. PictureBox1 merupakan tempat untuk menaruh logo toko muti
3. Label 1 untuk menjelaskan bahwa menu tersebut menu utama aplikasi
penjualan toko muti berbasis desktop
4. Label 2 untuk menjelaskan pengguna aplikasi harus login terlebih dahulu.
5. Button 1 merupakan tombol files
6. Button 2 merupakan tombol master
7. Button 3 merupakan tombol transaksi
8. Button 4 merupakan tombol laporan
9. Butoon 5 merupakan tombol utility

2. Rancangan Tampilan Form Login

Pada form login ini, akan meminta user untuk memasukkan kode user
dan password yang sesuai dengan database yang ada. Tampilan dapat
dilihat pada gambar 3.5 berikut.

Gambar 3.5 Rancangan Tampilan Form Login

Keterangan Gambar :
1. Label 1 merupakan tulisan kode user
2. Label 2 merupakan tulisan password
 28

3. Textfield merupakan tempat untuk input user name

4. Passwordfield merupakan tempat untuk input password
5. Button 1 untuk login
6. Button 2 untuk batal

3. Rancangan Tampilan Form Master Admin

Pada Form Master Admin form ini bertujuan untuk menginput,

merubah, dan menghapus data admin atau user yang ada. Tampilan form
master admin dapat dilihat di gambar 3.6 berikut.

Gambar 3.6 Rancangan Tampilan Form Master Admin

 29

Keterangan Gambar :

1. Label 1 merupakan tulisan kode admin

2. Label 2 merupakan tulisan nama admin
3. Label 3 merupakan tulisan password
4. Label 4 merupakan tulisan level
5. Textfield 1 untuk menuliskan kode admin
6. Textfield 2 untuk menuliskan nama admin
7. Textfield 3 untuk menuliskan password
8. Combobox 1 untuk memilih jenis level
9. Button 1 untuk menginput data kedalam database
10. Button 2 untuk mengedit data yang sudah ada pada database
11. Button 3 untuk menghapus data yang sudah ada pada database
12. Button 4 untuk membatalkan operasi dan keluar dari form master
admin
13. Datagridview 1 untuk melihat data yang sudah ada dalam database

4. Rancangan Tampilan Form Master Barang

Pada tampilan form master barang ini tidak berbeda jauh dengan
tampilan form master admin, hanya penambahan satu buah label, dan
textfield saja. Untuk tampilan form master barang dapat dilihat pada
gambar 3.7 berikut.
 30

Gambar 3.7 Rancangan Tampilan Form Master Barang

Keterangan Gambar :

1. Label 1 merupakan tulisan kode barang

2. Label 2 merupakan tulisan nama barang
3. Label 3 merupakan tulisan harga
4. Label 4 merupakan tulisan level
5. Label 5 merupakan tulisan satuan
6. Textfield 1 untuk menuliskan kode barang
7. Textfield 2 untuk menuliskan nama barang
8. Textfield 3 untuk menuliskan harga
 31

9. Textfield 4 untuk menuliskan jumlah

10. Combobox 1 untuk memilih jenis satuan barang
11. Button 1 untuk menginput data kedalam database
12. Button 2 untuk mengedit data yang sudah ada pada database
13. Button 3 untuk menghapus data yang sudah ada pada database
14. Button 4 untuk membatalkan operasi dan keluar dari form master
barang
15. Datagridview 1 untuk melihat data yang sudah ada dalam database

5. Rancangan Tampilan Form Master Pelanggan

Pada tampilan form master pelanggan ini tidak berbeda jauh dengan
tampilan form master admin, dimana hanya berubah tidak terdapat
combobox dan diganti oleh textfield. Untuk tampilan form master barang
dapat dilihat pada gambar 3.8 berikut.

Gambar 3.8 Rancangan Tampilan Form Master Pelanggan

 32

Keterangan Gambar :

1. Label 1 merupakan tulisan kode pelanggan

2. Label 2 merupakan tulisan nama pelanggan
3. Label 3 merupakan tulisan alamat
4. Label 4 merupakan tulisan telepon
5. Label 5 merupakan tulisan kredit
6. Label 6 merupakan tulisan jatuh tempo
7. Textbox 1 untuk menuliskan kode pelanggan
8. Texbox 2 untuk menuliskan nama pelanggan
9. Textbox 3 untuk menuliskan alamat
10. Textbox 4 untuk menuliskan telepon
11. Textbox 5 menuliskan kredit
12. Datetimepicker 1 untuk menginput jatuh tempo
13. Button 1 untuk menginput data kedalam database
14. Button 2 untuk mengedit data yang sudah ada pada database
15. Button 3 untuk menghapus data yang sudah ada pada database
16. Button 4 untuk membatalkan operasi dan keluar dari form master
pelanggan
17. Datagridview 1 untuk melihat data yang sudah ada dalam database

6. Rancangan Tampilan Form Transaksi Penjualan

Pada form transkasi penjualan ini user dapat melakukan proses
penjualan seperti pada umumnya, dengan bantuan sistem yang dapat
mengambil data langsung dari database membuat data barang dan stok
barang sesuai, sehingga bisa mengetahui apakah barang tersedia untuk
dibeli atau tidak, form ini juga akan menampilkan item jual pembeli dan
akan menghasilkan struk penjualan melalui crystal report viewer. Untuk
tampilan form transaksi penjualan dapat dilihat di gambar berikut.
 33

Gambar 3.9 Rancangan Tampilan Form Transaksi Penjualan

Keterangan Gambar :

1. Label 1 merupakan tulisan no jual

2. Label 2 merupakan tulisan kode pelanggan
3. Label 3 merupakan tulisan nama pelanggan
4. Label 4 merupakan tulisan alamat
5. Label 5 merupakan tulisan telepon
6. Label 6 untuk menampilkan nomor jual otomatis
7. Combobox 1 untuk menampilkan pelanggan yang terdaftar
8. Label 7 untuk menampilkan nama pelanggan dari database
9. Label 8 untuk menampilkan alamat dari database
10. Label 9 untuk menampilkan telepon dari database
 34

11. Label 10 merupakan tulisan kode barang

12. Textbox 1 untuk memasukkan kode barang
13. Label 11 menampilkan tulisan nama barang
14. Label 12 untuk menampilkan nama barang dari database
15. Label 13 menampilkan tulisan satuan barang
16. Label 14 untuk menampilkan satuan barang dari database
17. Label 15 menampilkan tulisan harga barang
18. Label 16 untuk menampilkan harga barang dari database
19. Label 17 menampilkan tulisan stok barang
20. Label 18 untuk menampilkan stok barang dari database
21. Label 19 menampilkan tulisan total : RP
22. Label 20 untuk menampilkan kalkulasi subtotal transaksi
23. Label 21 menampilkan tulisan tanggal
24. Label 22 untuk menampilkan tanggal otomatis
25. Label 23 menampilkan tulisan jam
26. Label 24 untuk menampilkan jam otomatis
27. Label 25 menampilkan tulisan admin
28. Label 26 untuk menampilkan nama admin dari database
29. Label 27 menampilkan tulisan jumlah
30. Textbox 2 untuk menginput jumlah barang
31. Button 1 untuk memasukkan pembelian barang
32. Button 2 untuk menyimpan transaksi dan mencetak nota
33. Button 3 untuk membatalkan transaksi
34. Button 4 untuk menutup form transaksi
35. Datetimepicker 1 untuk menginput jatuh tempo
36. Textbox 3 untuk menginput kredit
37. Textbox 4 untuk menginput pembayaran
38. Label 28 menampilkan tulisan item
 35

39. Label 29 untuk menampilkan jumlah item pembelian

40. Label 30 menampilkan tulisan pembayaran
41. Label 31 menampilkan tulisan kembali
42. Label 32 untuk menampilkan kembalian

7. Rancangan Tampilan Form Laporan Penjualan

Pada form laporan penjualan ini akan menampilkan jenis jenis laporan
sesuai kebutuhan admin, jika admin ingin mencari data penjualan
berdasarkan tanggal, maka bisa memasukkan tanggal yang telah dilewati
pada masa itu, sehingga data akan keluar, jika admin ingin melihat laporan
berdasarkan nota penjualan, maka admin harus memasukkan nomor nota
yang sesuai. Untuk tampilan form laporan penjualan dapat dilihat pada
gambar 3.10 berikut.

Gambar 3.10 Tampilan Form Laporan Penjualan

Keterangan Gambar :
 36

1. Panel 1 merupakan panel untuk menjadi latar menu laporan pernota

2. Panel 2 merupakan panel untuk menjadi latar menu laporan harian
3. Panel 3 merupakan panel untuk menjadi latar menu laporan mingguan
4. Panel 4 merupakan panel untuk menjadi latar menu laporan bulanan
5. Label 1 merupakan tulisan no nota
6. Label 2 merupakan tulisan tanggal
7. Label 3 merupakan tulisan tanggal awal
8. Label 4 merupakan tulisan tanggal akhir
9. Label 5 merupakan tulisan bulan
10. Label 6 merupakan tulisan tahun
11. Textfield 1 untuk memasukkan nomor nota
12. Datetimepicker 1 untuk memilih tanggal harian
13. Datetimepiceker 2 untuk memilih tanggal awal
14. Datetimepicker 3 untuk memilih tanggal akhir
15. Combobox 1 untuk memilih bulan
16. Combobox 2 untuk memilih tahun
17. Button 1 untuk menampilkan laporan berdasarkan nomor nota
18. Button 2 untuk menampilkan laporan berdasarkan tanggal harian
19. Button 3 untuk menampilkan laporan berdasarkan mingguan
20. Button 4 untuk menampilkan laporan berdasarkan bulanan

8. Rancangan Tampilan Form Laporan Data Master

Pada form laporan data master ini, user dapat memilih ingin melihat
data apa saja yang terdapat pada database, khususnya tabel admin, tabel
pelanggan, dan tabel barang. Untuk tampilan form laporan data master
dapat dilihat pada gambar berikut.
 37

Gambar 3.11 Tampilan Form Laporan Data Master

Keterangan Gambar :

1. Button 1 untuk melihat data admin

2. Button 2 untuk melihat data pelanggan
3. Button 3 untuk melihat data barang
4. Button 4 untuk melihat data piutang

9. Rancangan tampilan Form Ganti Password

Pada form ganti password ini, user dapat mengganti passwordnya
dengan memasukkan password lama yang sesuai dan menggantinya
dengan password yang baru. Untuk tampilan form ganti password dapat
dilihat pada gambar berikut.

Gambar 3.12 Tampilan Form Ganti Password

 38

Keterangan Gambar :

1. Label 1 merupakan tulisan nama

2. Label 2 merupakan tulisan password lama
3. Label 3 merupakan tulisan password baru
4. Textfield 1 merupakan field yang otomatis terisi nama user, sesuai
status login sistem aplikasi penjualan
5. Textfield 2 untuk memasukkan password lama
6. Textfield 3 untuk memasukkan password baru
7. Button 1 untuk merubah password
8. Button 2 untuk membatalkan ubah password

3.4. Pembuatan
3.4.1. Pembuatan Database

Sebelum memulai membuat desain halaman aplikasi penjualan toko muti,

yang harus dilakukan adalah membuat database. Database yang dibuat untuk
menyimpan data yang diperlukan ke dalam suatu tabel agar dapat diakses kembali
oleh pengguna. Tabel yang dibuat pada penulisan ini berjumlah 5 tabel.
Pembuatan database menggunakan MySQL adalah sebagai berikut:
1. Pertama buka software XAMPP lalu aktifkan server Apache dan MySQL
dengan memilih tombol “Start” pada actions, seperti pada Gambar 3.13.
 39

Gambar 3.13 Mengaktifkan Apache dan MySQL pada XAMPP

2. Selanjutnya buka browser untuk mengakses phpMyAdmin dengan mengetik

“localhost/phpmyadmin” pada address bar browser, seperti pada Gambar
3.14.
 40

Gambar 3.14 Tampilan PHPMyAdmin

3. Buat database baru dengan memilih “New” yang terletak di bagian kiri atas
daftar database yang sudah pernah dibuat sebelumnya. Kemudian beri nama
database, disini Penulis memberikan nama database dengan nama
db_penjualan, seperti pada Gambar 3.15.

Gambar 3.15 Membuat Database Baru

4. Setelah database baru berhasil dibuat, maka dilanjutkan dengan membuat

tabel-tabel yang akan digunakan untuk menyimpan data di dalam aplikasi.
Tabel-tabel yang akan dibuat antara lain tabel tbl_admin, tbl_pelanggan,
tbl_barang, tbl_jual, tbl_detailjual. Terlebih dahulu pilih database yang akan
dibuatkan tabel baru, kemudian tuliskan nama tabel dan jumlah kolom yang
diinginkan lalu tekan Go untuk membuat tabel, seperti pada Gambar 3.16.

Gambar 3.16 Membuat Tabel Baru pada Database

 41

5. Isi tabel yang dibuat tadi dengan atribut yang diperlukan disertai dengan tipe
data, values, pemilihan primary key dan lain-lain kemudian tekan save.
3.4.1.1. Struktur Tabel tbl_admin
Pada tabel tbl_admin merupakan tabel yang digunakan untuk
menyimpan data pengguna aplikasi, yang nantinya dapat mengakses aplikasi
tergantung level admin tersebut. Untuk struktur tabel tbl_admin dapat dilihat
pada gambar 3.17 berikut :

Gambar 3.17 Struktur tbl_admin

3.4.1.2. Struktur Tabel tbl_pelanggan

Pada tabel tbl_pelanggan merupakan tabel yang digunakan untuk
menyimpan data pelanggan toko muti, yang nantinya dapat melakukan
transaksi dengan cara kredit. Untuk struktur tabel tbl_pelanggan dapat dilihat
pada gambar 3.18 berikut :

Gambar 3.18 Struktur tbl_pelanggan

3.4.1.3. Struktur Tabel tbl_barang

Pada tabel tbl_barang merupakan tabel yang digunakan untuk
menyimpan data barang toko muti dan stok nya, yang nantinya data barang
tersebut akan berubah – ubah sesuai stok yang dibeli, dan harga terbaru dari
 42

barang tersebut. Untuk struktur tabel tbl_barang dapat dilihat pada gambar
3.19 berikut :

Gambar 3.19 Struktur tbl_barang

3.4.1.4. Struktur Tabel tbl_jual

Pada tabel tbl_jual merupakan tabel yang digunakan untuk menyimpan
data transaksi penjualan, yang nantinya data tersebut akan dikumpulkan dan
dicatat sebagai laporan penjualan. Untuk struktur tabel tbl_jual dapat dilihat
pada gambar 3.20 berikut :

Gambar 3.20 Struktur tbl_jual

3.4.1.5. Struktur Tabel tbl_detailjual

Pada tabel tbl_detailjual merupakan tabel yang digunakan untuk
menyimpan data detail penjualan barang, yang nantinya data tersebut
 43

digunakan untuk pengecekan perubahan stok barang yang terjadi. Untuk

struktur tabel tbl_admin dapat dilihat pada gambar 3.21 berikut :

Gambar 3.21 Struktur tbl_detailjual

3.4.2. Pembuatan Tampilan Aplikasi

1. Tampilan Form Menu Utama
Form Menu Utama merupakan halaman yang akan menampilkan
beberapa menu, yaitu Menu Files, Menu Master, Menu Transaksi, Menu
Laporan, dan Menu Utility. Pada form menu utama ini pengguna aplikasi
diharuskan login terlebih dahulu untuk bisa mengakses menu selain menu
Files.
 44

Gambar 3.22 Tampilan Form Menu Utama

Berikut program untuk membuat validasi Form Menu Utama :

Sub Terkunci()
LoginToolStripMenuItem.Enabled = True
LogoutToolStripMenuItem.Enabled = False
MasterToolStripMenuItem.Enabled = False
TransaksiToolStripMenuItem.Enabled = False
LaporanToolStripMenuItem.Enabled = False
UtilityToolStripMenuItem.Enabled = False
STLabel2.Text = ""
STLabel4.Text = ""
STLabel6.Text = ""
LoginToolStripMenuItem1.Enabled = True
LogoutToolStripMenuItem1.Enabled = False
Button2.Enabled = False
Button3.Enabled = False
Button4.Enabled = False
Button5.Enabled = False
Label2.Visible = True
End Sub

Pada baris program diatas, form menu utama memiliki karakterisitik

keamanan, dimana aplikasi membutuhkan validasi dalam memberikan akses
kepada user.

2. Tampilan Form Login

Form Login merupakan halaman yang disediakan untuk pengguna aplikasi
masuk sebagai user atau admin agar dapat mengakses menu menu yang ada
pada halaman menu utama aplikasi.
 45

Gambar 3.23 Tampilan Form Login

Berikut program untuk membuat Form Login :

Private Sub Button1_Click(ByVal sender As System.Object, ByVal

e As System.EventArgs) Handles Button1.Click
If TextBox1.Text = "" Or TextBox2.Text = "" Then
MsgBox("Kode Admin dan Password tidak boleh
kosong")
Else
Call koneksi()
Cmd = New OdbcCommand("select * from tbl_admin
where KodeAdmin='" & TextBox1.Text & "' and passwordadmin = '"
& TextBox2.Text & "'", Conn)
Rd = Cmd.ExecuteReader
Rd.Read()
If Rd.HasRows Then
If StrComp(TextBox2.Text, Rd.GetValue(2), 0) =
0 Then
Me.Close()
Call Terbuka()
FormMenuUtama.STLabel2.Text = Rd!KodeAdmin
FormMenuUtama.STLabel4.Text = Rd!NamaAdmin
FormMenuUtama.STLabel6.Text = Rd!
LevelAdmin
FormGantiPassword.Label4.Text = Rd!
KodeAdmin
FormMenuUtama.Label2.Text = Rd!NamaAdmin
If FormMenuUtama.STLabel6.Text = "ADMIN"
Then

FormMenuUtama.MasterToolStripMenuItem.Visible = False

FormMenuUtama.TransaksiToolStripMenuItem.Visible = False

FormMenuUtama.AdminToolStripMenuItem1.Enabled = False

FormMenuUtama.BarangToolStripMenuItem.Enabled = False

FormMenuUtama.PelangganToolStripMenuItem1.Enabled = False
Else

FormMenuUtama.LaporanToolStripMenuItem.Visible = False

FormMenuUtama.LaporanDataMasterToolStripMenuItem.Enabled =
False

FormMenuUtama.LaporanDataMasterToolStripMenuItem1.Enabled =
False
 46

FormMenuUtama.LaporanPenjualanToolStripMenuItem.Enabled =
False
FormMenuUtama.LaporanPenjualanToolStripMenuItem1.Enabled =
False
End If
Else
MsgBox("Kode Admin atau Password Salah!")
End If
Else
MsgBox("Kode Admin atau Password Salah!")
End If
End If
End Sub

3. Tampilan Form Master Admin

Form master admin ini merupakan halaman untuk memasukkan, mengedit,

dan menghapus data admin yang ada pada database sistem.

Gambar 3.24 Tampilan Form Master Admin

 47

Berikut program untuk membuat proses input pada Form Master Admin :
Call koneksi()
Dim InputData As String = "insert into
tbl_admin values ('" & TextBox1.Text & "','" & TextBox2.Text
& "','" & TextBox3.Text & "','" & ComboBox1.Text & "')"
Cmd = New OdbcCommand(InputData, Conn)
Cmd.ExecuteNonQuery()
MsgBox("Input Data Berhasil !")
Call KondisiAwal()

4. Tampilan Form Master Barang

Form master barang ini merupakan halaman untuk memasukkan, mengedit,

dan menghapus data barang yang ada pada database sistem.

Gambar 3.25 Tampilan Form Master Barang

Berikut baris program untuk membuat kode barang yang dapat digunakan dan
sudah digunakan oleh database sistem :

If e.KeyChar = Chr(13) Then

Call koneksi()
 48

Cmd = New OdbcCommand("Select * From tbl_barang

where KodeBarang = '" & TextBox1.Text & "'", Conn)
Rd = Cmd.ExecuteReader()
Rd.Read()
If Rd.HasRows Then
MsgBox("Kode Barang Sudah Dipakai")
End If
End If

5. Tampilan Form Master Pelanggan

Form master pelanggan ini merupakan halaman untuk memasukkan,
mengedit, dan menghapus data barang yang ada pada database sistem.

Gambar 3.26 Tampilan Form Master Pelanggan

Berikut program untuk membuat proses hapus data pada Form Master
Pelanggan :

Call koneksi()
 49

Dim HapusData As String = "Delete from

tbl_pelanggan where KodePelanggan= '" & TextBox1.Text & "'"
Cmd = New OdbcCommand(HapusData, Conn)
Cmd.ExecuteNonQuery()
MsgBox("Hapus Data Berhasil !")
Call KondisiAwal()

6. Tampilan Form Transaksi Penjualan

Form transaksi penjualan merupakan halaman untuk melakukan transaksi
jual beli yang terjadi di toko muti, dan untuk mencetak nota penjualan secara
otomatis.

Gambar 3.27 Tampilan Form Transaksi Penjualan

Berikut program untuk membuat proses simpan transaksi pada Form

Transaksi Penjualan :
 50

SimpanJual = "insert into tbl_jual values ('" & LBLNoJual.Text

& "','" & TglMySql & "','" & LBLJam.Text & "','" &
LBLItem.Text & "','" & Label7.Text & "','" & TextBox1.Text &
"','" & LBLKembali.Text & "','" & TextBox4.Text & "','" &
Format(DateTimePicker1.Value, "yyyy-MM-dd") & "','" &
ComboBox1.Text & "','" & FormMenuUtama.STLabel2.Text & "')"
Cmd = New OdbcCommand("select * from
tbl_pelanggan where KodePelanggan = '" & ComboBox1.Text & "'",
Conn)
Rd = Cmd.ExecuteReader
Rd.Read()
Dim TotalKredit As String = "update
tbl_pelanggan set Kredit = '" & Rd.Item("Kredit") +
TextBox4.Text & "' where KodePelanggan = '" & ComboBox1.Text &
"'"
Cmd = New OdbcCommand(TotalKredit, Conn)
Cmd.ExecuteNonQuery()
Dim JatuhTempo As String = "update
tbl_pelanggan set JatuhTempo = '" &
Format(DateTimePicker1.Value, "yyyy-MM-dd") & "' where
KodePelanggan = '" & ComboBox1.Text & "'"
Cmd = New OdbcCommand(JatuhTempo, Conn)
Cmd.ExecuteNonQuery()

7. Tampilan Form Laporan Penjualan

Form laporan penjualan merupakan halaman untuk menampilkan laporan
penjualan yang tersedia dalam berbagai format waktu.
 51

Gambar 3.28 Tampilan Form Laporan Penjualan

Baris program untuk menampilkan laporan penjualan berdasarkan nota

penjualan.
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles Button1.Click
AxCrystalReport1.SelectionFormula =
"totext({tbl_Jual.NoJual})='" & TextBox1.Text & "'"
AxCrystalReport1.ReportFileName = "lap-jual-pernota.rpt"
AxCrystalReport1.WindowState =
Crystal.WindowStateConstants.crptMaximized
AxCrystalReport1.RetrieveDataFiles()
AxCrystalReport1.Action = 1
End Sub

Pada baris program diatas jika penulis ingin menampilkan laporan penjual
dengan format lain, penulis membuat pembeda pada selection formulanya
tergantung dengan kebutuhan dengan pengguna aplikasi dan admin yang dapat
melihat laporan tersebut.
8. Tampilan Form Laporan Data Master
Form laporan data master merupakan halaman untuk menampilkan laporan
data pengguna aplikasi, pelanggan, barang dan laporan piutang pelanggan.
 52

Gambar 3.29 Tampilan Form Laporan Data Master

Baris program untuk menampilkan laporan master admin.

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e

As System.EventArgs) Handles Button1.Click
AxCrystalReport1.ReportFileName = "lap-data-admin.rpt"
AxCrystalReport1.WindowState =
Crystal.WindowStateConstants.crptMaximized
AxCrystalReport1.RetrieveDataFiles()
AxCrystalReport1.Action = 1
End Sub

Pada baris program diatas perintah pemanggilan terdapat pada

AxCrystalReport1.ReportFileName = “nama file.rpt” dan penulis tinggal
menggantinya dengan nama crystal report yang ingin ditampilkan pada baris
program lainnya.

9. Tampilan Form Ganti Password

Form ganti password merupakan halaman untuk merubah password admin
atau user pengguna aplikasi.
 53

Gambar 3.30 Tampilan Form Ganti Password

Berikut ini baris program untuk membuat password baru pada form ganti
password :

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e

As System.EventArgs) Handles Button1.Click
If TextBox1.Text = "" Or TextBox2.Text = "" Then
MsgBox("Isi Password Lama dan Baru Dahulu")
Else
Call koneksi()
Cmd = New OdbcCommand("select * from tbl_admin where
KodeAdmin='" & Label4.Text & "' and PasswordAdmin= '" &
TextBox1.Text & "'", Conn)
Rd = Cmd.ExecuteReader
Rd.Read()
If StrComp(TextBox1.Text, Rd.GetValue(2), 0) <> 0
Then
MsgBox("Password Lama Tidak Sesuai")
Call KondisiAwal()
Else
If StrComp(TextBox1.Text, TextBox2.Text, 1) = 0
Then
MsgBox("Ganti dengan Password yang
Berbeda!")
Else
If MessageBox.Show("Yakin akan mengganti
Password Anda?", "", MessageBoxButtons.YesNo) =
Windows.Forms.DialogResult.Yes Then
Call koneksi()
 54

Dim update As String = "update tbl_admin

set PasswordAdmin='" & TextBox2.Text & "' where KodeAdmin = '" &
Label4.Text & "'"
Cmd = New OdbcCommand(update, Conn)
Cmd.ExecuteNonQuery()
MsgBox("Password Berhasil Diganti")
Me.Close()
End If
End If
End If
End If
End Sub

Pada aplikasi penjualan ini, penulis menambahkan modul untuk memanggil

dan mengaktifkan database dengan ODBC. Berikut program untuk memanggil
database db_penjualan yang ada di localhost :

Imports System.Data.Odbc
Module Module1
Public Conn As New OdbcConnection
Public Da As OdbcDataAdapter
Public Ds As DataSet
Public Rd As OdbcDataReader
Public Cmd As OdbcCommand
Public myDB As String
Public Sub koneksi()
myDB = "driver={Mysql ODBC 3.51
Driver};Database=db_penjualan;server=localhost;uid=root"
Conn = New OdbcConnection(myDB)
If Conn.State = ConnectionState.Closed Then Conn.Open()
End Sub
End Module

3.5. Pengujian
3.5.1. Pengujian User Interface

Pengujian user interface bertujuan untuk mengetahui fungsionalitas dari

elemen-elemen interface yang terdapat di dalam halaman sistem. Elemen yang
diujikan adalah elemen button di setiap halaman pada aplikasi. Hasil pengujian dapat
dilihat pada Tabel 3.6.

Tabel 3.6 Hasil Pengujian User Interface

 55

No. Kasus Yang Diuji Hasil Yang Hasil Yang Status

Diharapkan Didapatkan
1 Tombol LOGIN di Sistem dapat Setelah tombol Berhasil
dalam halaman masuk ke LOGIN diklik, sistem
login halaman utama sudah dapat masuk ke
halaman utama
aplikasi
2 Tombol menu di Sistem dapat Setelah tombol diklik, Berhasil
dalam halaman menampilkan muncul halaman
utama halaman yang sesuai dengan nama
sesuai dengan tombol.
nama tombol.
3 Tombol Input Sistem dapat Setelah tombol Berhasil
menampilkan Tambah diklik,
halaman untuk muncul halaman
menambah data tambah data
4 Tombol Edit Sistem dapat Setelah tombol Ubah Berhasil
menampilkan diklik, muncul
halaman untuk halaman ubah data.
mengubah data
yang dipilih.
5 Tombol Hapus Sistem dapat Setelah tombol Hapus Berhasil
menghapus item diklik, sistem
yang dipilih menghapus data yang
dipilih
6 Tombol Simpan Sistem dapat Data baru langsung Berhasil
memproses masuk kedalam
penyimpanan database setelah diklik
 56

data baru tombol simpan

kedalam
database
7 Tombol Batal Sistem dapat Setelah tombol batal Berhasil
membatalkan dikilik, proses
proses yang langsung dibatalkan
hendak
dilakukan

3.5.2. Pengujian Dasar Sistem

Pengujian fungsi dasar sistem bertujuan untuk mengetahui fungsi-fungsi dasar
yang ada di dalam aplikasi. Hasil pengujian dapat dilihat pada Tabel 3.7.

Tabel 3.7 Hasil Pengujian Dasar Sistem

No Kasus Yang diuji Hasil Yang Hasil Yang Status

Diharapkan Didapatkan
1 Pengujian fungsi Sistem dapat Data pembayaran Berhasil
pembayaran kredit dari memasukkan secara kredit
jumlah pembelian pembayaran masuk kedalam
kredit ke dalam basis data
sistem basis data
2 Pengujian fungsi hitung Sistem dapat Sistem otomatis Berhasil
kembalian menghitung menghitung
otomatis berapa kembalian yang
kembalian dari harus diberikan
pembayaran
3 Pengujian fungsi Sistem dapat Data yang Berhasil
 57

tambah atau simpan menyimpan data ditambah sudah

data yang ditambah ke tersimpan ke
dalam basis data dalam basis data
4 Pengujian fungsi ubah Sistem dapat Di dalam basis Berhasil
data mengubah data di data, data sudah
dalam basis data berubah
5 Pengujian fungsi hapus Sistem dapat Di dalam basis Berhasil
data menghapus data data, data sudah
di dalam basis tidak ada
data
6 Pengujian fungsi Sistem dapat Sistem Berhasil
tampilkan dan cetak menampilkan dan menampilkan dan
laporan mencetak output mencetak laporan
laporan sesuai kebutuhan
peranggota dan
laporan bulanan
7 Pengujian fungsi ganti Sistem dapat Sistem merubah Berhasil
password mengganti password setelah
password user password baru
sesuai dengan ditentukan
password
berdasar
password yang
lama

3.5.3. Pengujian Validasi

 58

Pengujian validasi bertujuan untuk mengetahui apakah validasi-validasi yang

di dalam sistem sudah berjalan dengan baik. Hasil pengujian dapat dilihat pada Tabel
3.8.
Tabel 3.8 Hasil Pengujian Validasi
No Kasus Yang diuji Hasil Yang Hasil Yang Status
Diharapkan Didapatkan
1 Validasi jika username Sistem dapat Muncul pesan Berhasil
atau password di menampilkan pesan peringatan yang
halaman login tidak peringatan bahwa memberitahukan
sesuai username atau bahwa username
password yang di atau password
input salah salah
2 Validasi jika password Sistem dapat Muncul pesan Berhasil
lama tidak sesuai menampilkan pesan peringatan bahwa
dengan password baru peringatan bahwa password lama
pada halaman ganti password tidak tidak sesuai
password sesuai dengan
database yang ada
3 Validasi jika salah satu Sistem dapat Muncul pesan Berhasil
input masih kosong menampilkan pesan peringatan yang
peringatan bahwa memberitahukan
user yang salah satu data
dimasukkan salah yang di input salah

3.5.4. Pengujian Validasi Kemanan

Pengujian keamanan sistem bertujuan untuk mengetahui keamanan yang sudah

diterapkan ke dalam sistem. Hasil pengujian dapat dilihat pada Tabel 3.9.

Tabel 3.9 Hasil Pengujian Kemanan Sistem

 59

No Kasus Yang diuji Hasil Yang Hasil Yang Status

Diharapkan Didapatkan
1 Menu di halaman Menu yang muncul Semua menu pada Berhasil
utama dapat aktif dengan halaman utama
hak pengguna dapat diakses
dengan level Admin berdasar level admin
dan User setelah berhasil
login