UNIVERSITAS GUNADARMA

FAKULTAS ILMU KOMPUTER & TEKNOLOGI INFORMASI

APLIKASI MANAJEMEN INVENTORY DAN PENCATATAN

TRANSAKSI KEUANGAN PT. GAMEHOUSE CYBER
BERBASIS WEBSITE MENGGUNAKAN FRAMEWORK
LARAVEL DAN DATABASE MYSQL

Disusun Oleh:

Nama : Muhammad Rizky Pratama R

NPM : 13118898
Jurusan : Sistem Informasi
Pembimbing : Dr. Ravi Ahmad Salim., SSi.

Diajukan Guna Melengkapi Sebagian Syarat

Dalam Mencapai Gelar Sarjana Strata Satu (S1)

JAKARTA
2022
 PERNYATAAN ORISINALITAS DAN PUBLIKASI

Saya yang bertanda tangan di bawah ini,

Nama : Muhammad Rizky Pratama R

NPM : 17118190
Judul Penulisan : APLIKASI MANAJEMEN INVENTORY DAN
PENCATATAN TRANSAKSI KEUANGAN PT.
GAMEHOUSE CYBER BERBASIS WEBSITE
MENGGUNAKAN FRAMEWORK LARAVEL DAN
DATABASE MYSQL
Tanggal Sidang : 24 November 2022
Tanggal Lulus : 24 November 2022

Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan dapat
dipublikasikan sepenuhnya oleh Universitas gunadarma. Segala kutipan dalam
bentuk apapun telah mengikuti kaidah dan etika yang berlaku. Mengenai isi dan
tulisan adalah merupakan tanggun jawab penulis, bukan Universitas Gunadarma.

Demikian Pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran.

Jakarta, 24 November 2022

(Muhammad Rizky Pratama R)

ii
 LEMBAR PENGESAHAN

KOMISI PEMBIMBING

NO NAMA KEDUDUKAN
1 Dr. Ravi Ahmad Salim., SSi. Ketua
2 Dr. Dra. Henny Widowati Farida., MM.. Anggota
3 Dr. Ety Sutanty., SKom., MMSI. Anggota
Tanggal Sidang : 24 November 2022

PANITIA UJIAN

NO NAMA KEDUDUKAN
1 Dr. Ravi Ahmad Salim., SSi. Ketua
2 Prof. Dr. Wahyudi Priyono Sekertaris
3 Dr. Ravi Ahmad Salim., SSi. Anggota
4 Dr. Dra. Henny Widowati Farida., MM.. Anggota
5 Dr. Ety Sutanty., SKom., MMSI. Anggota
Tanggal Lulus : 24 November 2022

Mengetahui:
Pembimbing Bagian Sidang Ujian

( Dr. Ravi Ahmad Salim., SSi. ) ( Dr. Edi Sukirman, SSi., MM., M.I.Kom. )

iii
 ABSTRAK

Muhammad Rizky Pratama R. 13118898

APLIKASI MANAJEMEN INVENTORY DAN PENCATATAN

TRANSAKSI KEUANGAN PT. GAMEHOUSE CYBER BERBASIS
WEBSITE MENGGUNAKAN FRAMEWORK LARAVEL DAN
DATABASE MYSQL
Skripsi. Jurusan Sistem Informasi. Fakultas Ilmu Komputer dan Teknologi
Informasi. Universitas Gunadarma. 2022.
Kata kunci: Inventory, Manajemen, Laravel, MySQL, Website.
(xvi + 147 + Lampiran)

Manajemen Inventory dan pencatatan transaksi keuangan merupakan faktor penting

bagi perusahaan. PT. Gamehouse Cyber merupakan perusahaan yang bergerak
dibidang manufaktur komponen otomotif. Dalam proses pencatatan persediaan
barang dan transaksi keuangan perusahaan saat ini masih secara manual.
Melakukan pencatatan secara manual dapat menimbulkan human error dan
membutuhkan waktu lama dalam pembuatan laporan persediaan maupun keuangan
perusahaan. Oleh karena itu penulis membuat aplikasi manajemen inventory dan
pencatatan transaksi keuangan untuk menangani human error dan menjadi lebih
efektif dalam membuat laporan. Pembuatan aplikasi berbasis website ini
menggunakan framework Laravel dan database MySQL dan metode penelitian
yang digunakan yaitu System Development Life Cycle (SDLC) model waterfall.
Adanya sistem ini membuat proses pencatatan persediaan barang dan pencatatan
laporan transaksi keuangan menjadi lebih cepat, terstruktur dan akurat. Dalam
sistem diberikan akses login untuk memvalidasikan pengguna yang dapat
melakukan manipulasi data yang ada pada aplikasi ini.
Daftar Pustaka (2007-2020)

iv
 ABSTRACT

Muhammad Rizky Pratama R. 13118898

INVENTORY MANAGEMENT AND FINANCIAL TRANSACTION

REGISTRATION APPLICATION FOR PT. GAMEHOUSE CYBER
WEBSITE BASED USING FRAMEWORK LARAVEL AND MYSQL
DATABASE
Thesis. Department of Information System. Faculty of Computer Science and
Information Technology. Gunadarma University. 2022.
Keywords: Inventory, Management, Laravel, MySQL, Website.
(xvi + 147 + Lampiran)

Inventory management and financial transaction is an importan factor for the

company. PT. Gamehouse Cyber is a company engaged in the manufacturing of
automotive components. In the process of registration inventory and financial
transactions, the company is currently still manually. Doing manual registration can
cause human error and takes a long time in making inventory and company financial
reports. Therefore, the author makes an inventory management and financial
transactions registration application to handle human errors and become more
effective in making reports. Making this website-based application using the
Laravel framework dan MySQL database. The research method used is the System
Development Life Cycle (SDLC) waterfall model. The existence of this system to
make the process of registration inventory and financial transaction reports faster,
structured and accurate. In the system, login access is given to validate users who
can manipulate data in this application.
Bibliography (2007-2020)

v
 KATA PENGANTAR

Segala puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang
telah memberikan berkat, anugrah, dan karunia yang melimpah, sehingga
penulis dapat menyelesaikan tugas akhir ini.

Tugas akhir ini disusun guna melengkapi Sebagian syarat dalam mencapai
gelar Setara Sarjana Strata Satu pada Jurusan Sistem Informasi, Fakultas Ilmu
Komputer dan Teknologi Informasi, Universitas Gunadarma. Adapun judul
skripsi ini adalah “Aplikasi Manajemen Inventory dan Pencatatan Transaksi
Keuangan PT. Gamehouse Cyber Berbasis Website Mnggunakan Framework
Laravel dan Database MySQL”.

Walaupun banyak kesulitan yang penulis harus hadapi ketika Menyusun

tugas akhir ini, namun berkat bantuan dan dorongan dari berbagai pihak
akhirnya tugas ini dapat diselesaikan dengan baik. Untuk itu penulis
mengucapkan terimakasih kepada:

1. Prof. Dr. E. S. Margianti, SE., MM., selaku Rektor Universitas

Gunadarma.
2. Prof. Dr. Rer. Nat. Achmad Benny Mutiara, SSi., SKom., selaku Dekan
Fakultas Ilmu Komputer dan Teknologi Informasi Universitas
Gunadarma.
3. Dr. Setia Wirawan, SKom., MMSI., selaku Kepala Jurusan Sistem
Informasi Universitas Gunadarma.
4. Dr. Edi Sukirman, SSi., MM., selaku Kapala Bagian Sidang Ujian
Universitas Gunadarma.
5. Dr. Ravi Ahmad Salim., SSi., selaku Dosen Pembimbing yang telah
memberikan arahan dan waktunya kepada penulis selama penulisan ini
berlangsung hingga selesai.
6. Bapak dan Ibu Dosen Universitas Gunadarma yang telah memberikan
ilmu pengetahuan kepada penulis.

vi
 7. Orang tua tercinta yang telah memberikan kasih sayang, semangat, dan
doa sehinggapenulisan ini berjalan dengan baik.
8. Saudara tercinta yang telah memberikan dukungan semangat dan doa
sehingga penulisan ini berjalan dengan baik.
9. Teman 1 pembimbing yang telah memberikan semangat dan masukan
positif kepada penulis.
10. Teman-teman seperjuangan saat bimbingan, teman-teman kelas 1KA27,
dan 4KA23 yang telah bejuang bersama dalam menyelesaikan studi di
Universitas Gunadarma.
11. Semua pihak yang tidak dapat disebutkan satu persatu, terimakasih atas
kerja samanya sehingga penulisan ini dapat diselesaikan dengan tepat
waktu.

Penulis menyadari dalam penulisan tugas akhir ini banyak kekurangannya.

Walaupun penulis ini jauh dari sempurna, penulis berharap agar penulisan ini
bermanfaat dan menambah wawasan bagi pihak-pihak membutuhkan. Akhir
kata penulis mengharapkan kritik dan saran yang bersidat membangun untuk
menjadi perbaikan di masa yang akan mendatang.

Depok, 24 November 2022

(Muhammad Rizky Pratama R)

vii
 DAFTAR ISI

COVER… ................................................................................................... i

PERNYATAAN ORISINALITAS DAN PUBLIKASI.............................. ii

LEMBAR PENGESAHAN ....................................................................... iii

ABSTRAK ................................................................................................. iv

ABSTRACT .................................................................................................v

KATA PENGANTAR ............................................................................... vi

DAFTAR ISI ............................................................................................ viii

DAFTAR TABEL ..................................................................................... xii

DAFTAR GAMBAR ............................................................................... xiii

DAFTAR LAMPIRAN ............................................................................ xvi

BAB 1 PENDAHULUAN ...........................................................................1

1.1. Latar Belakang Masalah .................................................................1

1.2. Ruang Lingkup ...............................................................................2
1.3. Tujuan Penelitian ............................................................................2
1.4. Metode Penelitian ...........................................................................3
1.5. Sistematika Penulisan .....................................................................4

BAB 2 TINJAUAN PUSTAKA ..................................................................5

2.1. Pengertian Inventory ..........................................................................5

viii
 2.2. Pengertian Manajemen .......................................................................5
2.3. Pengertian Manajemen Inventory.......................................................6
2.4. Website ...............................................................................................6
2.4.1. Bahasa Pemrograman Web ......................................................7
2.4.2. Jenis-Jenis Website ..................................................................8
2.4.3. Istilah-Istilah Pemrograman Web ............................................8
2.5. Internet ................................................................................................9
2.6. Framework Laravel ............................................................................9
2.6.1. Fitur pada Framework Laravel ................................................11
2.6.2 Tools pada Framework Laravel ...............................................12
2.7. Database ...........................................................................................14
2.8. MySQL .............................................................................................15
2.9. XAMPP ............................................................................................15
2.10. phpMyAdmin .................................................................................17
2.11. Visual Studio Code ........................................................................18
2.12. Struktur Navigasi ...........................................................................18
2.13. UML ...............................................................................................20

BAB 3 ANALISIS DAN PERANCANGAN ............................................26

3.1. Analisis Masalah ..............................................................................26

3.2. Tahap Penelitian ...............................................................................26
3.3. Tahap Analisis ..................................................................................26
3.3.1. Analisis Kebutuhan Data .......................................................27
3.3.2. Analisis Kebutuhan Sistem ....................................................27
3.3.2.1. Kebutuhan Fungsional .....................................................27
3.3.2.2. Kebutuhan Non-Fungsional .............................................28
3.4. Perancangan Sistem .........................................................................29
3.4.1. Perancangan Struktur Navigasi .............................................29
3.4.2. Perancangan Use Case Diagram ............................................31
3.4.3. Perancangan Activity Diagram ..............................................33
3.4.4. Perancangan Class Diagram ..................................................35
3.5. Struktur Basis Data ..........................................................................36
3.5.1. Struktur Tabel users ...............................................................36
3.5.2. Struktur Tabel suppliers.........................................................37

3.5.3. Struktur Tabel clients.............................................................38

3.5.4. Struktur Tabel payment_methods
ix ..........................................39
 3.5.5. Struktur Tabel product_categories.........................................39
3.5.6. Struktur Tabel products .........................................................40
3.5.7. Struktur Tabel receipts...........................................................41
3.5.8 Struktur Tabel Transactions ...................................................42
3.5.9. Struktur Tabel sales ...............................................................43
3.5.10. Struktur Tabel transfers .......................................................44
3.5.11. Struktur Tabel received_products ........................................45
3.5.12. Struktur Tabel sold_products...............................................45
3.6. Rancangan Tampilan Antarmuka .....................................................46
3.6.1. Rancangan Tampilan Antarmuka Login................................47
3.6.2. Rancangan Tampilan Antarmuka Main Menu ......................47
3.6.3. Rancangan Tampilan Antarmuka Dashboard ........................48
3.6.4. Rancangan Tampilan Antarmuka Statistic Transactions ......49
3.6.5. Rancangan Tampilan Antarmuka Sales .................................50
3.6.6. Rancangan Tampilan Antarmuka Expenses ..........................54
3.6.7. Rancangan Tampilan Antarmuka Income .............................56
3.6.8. Rancangan Tampilan Antarmuka Transfers ..........................57
3.6.9. Rancangan Tampilan Antarmuka Payments..........................59
3.6.10. Rancangan Tampilan Antarmuka Statistics Inventory ........61
3.6.11. Rancangan Tampilan Antarmuka Categories ......................62
3.6.12. Rancangan Tampilan Antarmuka Products .........................63
3.6.13. Rancangan Tampilan Antarmuka Receipts .........................65
3.6.14. Rancangan Tampilan Antarmuka Clients ............................68
3.6.15. Rancangan Tampilan Antarmuka Suppliers ........................69
3.6.16. Rancangan Tampilan Antarmuka Payment Methods ..........71
3.6.17. Rancangan Tampilan Antarmuka Users ..............................73

BAB 4 IMPLEMENTASI DAN UJI COBA .............................................75

4.1. Implementasi ....................................................................................75

4.2. Implementasi Database ....................................................................75
4.2.1. XAMPP ...................................................................................75
4.2.2. Pembuatan Migration Database ..............................................76

4.3. Implementasi Website ......................................................................78

4.4. Pembuatan Halaman.........................................................................79
4.4.1. Halaman Login ........................................................................80
4.4.2. Halaman Menu Utama ............................................................81
x
 4.4.3. Halaman Dashboard ................................................................83
4.4.4. Halaman Transaction Statistics ...............................................84
4.4.5. Halaman Sales .........................................................................85
4.4.6. Halaman Expenses ..................................................................89
4.4.7. Halaman Income .....................................................................91
4.4.8. Halaman Transfers ..................................................................93
4.4.9. Halaman Payments ..................................................................95
4.4.10. Halaman Inventory Statistics ................................................97
4.4.11. Halaman Categories ..............................................................98
4.4.12. Halaman Products ...............................................................101
4.4.13. Halaman Receipts................................................................104
4.4.14. Halaman Clients ..................................................................108
4.4.15. Halaman Suppliers ..............................................................111
4.4.16. Halaman Payment Methods ................................................114
4.4.17. Halaman Users ....................................................................117
4.5. Proses Hosting Website..................................................................119
4.6. Uji Coba .........................................................................................123
4.6.1. Black Box Testing .................................................................123
4.6.2. Uji Coba Website ..................................................................143

BAB 5 PENUTUP....................................................................................145

5.1. Kesimpulan ....................................................................................145

5.2. Saran ...............................................................................................145

DAFTAR PUSTAKA ..............................................................................146

xi
 DAFTAR TABEL

Tabel 3.1. users ................................................................................................36

Tabel 3.2. Suppliers..........................................................................................37
Tabel 3.3. clients ..............................................................................................38
Tabel 3.4. Tabel payment_methods .................................................................39
Tabel 3.5. Tabel product_categories ................................................................39
Tabel 3.6. Tabel products .................................................................................40
Tabel 3.7. Tabel receipts ..................................................................................41
Tabel 3.8. Tabel transactions ...........................................................................42
Tabel 3.9. Tabel sales .......................................................................................43
Tabel 3.10. Tabel transfers ...............................................................................44
Tabel 3.11. Tabel received_products ...............................................................45
Tabel 3.12. Tabel sold_products ......................................................................46
Tabel 4.1. Uji Coba Login..............................................................................124

Tabel 4.2. Uji Coba Payment Methods ..........................................................124

Tabel 4.3. Uji Coba Suppliers ........................................................................125
Tabel 4.4. Uji Coba Clients ............................................................................127
Tabel 4.5. Uji Coba Users ..............................................................................129
Tabel 4.6. Uji Coba Categories ......................................................................130
Tabel 4.7. Uji Coba Products .........................................................................131
Tabel 4.8. Uji Coba Receipts .........................................................................133
Tabel 4.9. Uji Coba Transactions Statistics ...................................................135
Tabel 4.10. Uji Coba Sales .............................................................................136
Tabel 4.11. Uji Coba Expenses ......................................................................138
Tabel 4.12. Uji Coba Income .........................................................................140
Tabel 4.13. Uji Coba Transfers ......................................................................141
Tabel 4.14. Uji Coba Payments......................................................................142
Tabel 4.15. Uji Coba Browser........................................................................144

xii
 DAFTAR GAMBAR

Gambar 3.1. Struktur Navigasi Aplikasi ..........................................................29

Gambar 3.2. Rancangan Use Case Diagram ....................................................32
Gambar 3.3. Rancangan Activity Diagram ......................................................33
Gambar 3.4. Rancangan Class Diagram ..........................................................35
Gambar 3.5. Tampilan Antarmuka Login ........................................................47
Gambar 3.6. Tampilan Antarmuka Main Menu ...............................................48
Gambar 3.7. Tampilan Antarmuka Dashboard ................................................49
Gambar 3.8. Tampilan Antarmuka Statistic Transactions ...............................50
Gambar 3.9 .Tampilan Antarmuka Sales .........................................................51
Gambar 3.10. Tampilan Antarmuka Add Sale .................................................52
Gambar 3.11. Tampilan Antarmuka Show Sale...............................................53
Gambar 3.12. Tampilan Antarmuka Add Product Sale ...................................54
Gambar 3.13. Tampilan Antarmuka Expenses ................................................55
Gambar 3.14. Tampilan Antarmuka Add Expenses.........................................56
Gambar 3.15. Tampilan Antarmuka Income....................................................56
Gambar 3.16. Tampilan Antarmuka Add Income ............................................57
Gambar 3.17. Tampilan Antarmuka Transfer ..................................................58
Gambar 3.18. Tampilan Antarmuka Add Transfer ..........................................59
Gambar 3.19. Tampilan Antarmuka Payments ................................................60
Gambar 3.20. Tampilan Antarmuka Add Payment ..........................................61
Gambar 3.21.Tampilan Antarmuka Statistic Inventory ...................................62
Gambar 3.22. Tampilan Antarmuka Categories ..............................................62
Gambar 3.23. Tampilan Antarmuka Add Category .........................................63
Gambar 3.24. Tampilan Antarmuka Products..................................................64
Gambar 3.25. Tampilan Antarmuka Add Product ...........................................65
Gambar 3.26. Tampilan Antarmuka Receipts ..................................................65
Gambar 3.27. Tampilan Antarmuka Add Receipts ..........................................66

xiii
Gambar 3.28. Tampilan Antarmuka Show Receipt .........................................67
Gambar 3.29. Tampilan Antarmuka Add Product Receipt ..............................68
Gambar 3.30. Tampilan Antarmuka Clients ....................................................68
Gambar 3.31. Tampilan Antarmuka Add Client ..............................................69
Gambar 3.32. Tampilan Antarmuka Supplier ..................................................70
Gambar 3.33. Tampilan Antarmuka Add Supplier ..........................................71
Gambar 3.34. Tampilan Antarmuka Payment Methods...................................72
Gambar 3.35. Tampilan Antarmuka Add Method ...........................................72
Gambar 3.36. Tampilan Antarmuka Users ......................................................73
Gambar 3.37. Tampilan Antarmuka Add User ................................................74
Gambar 4.1. XAMPP Control Panel ............................................................... 75

Gambar 4.2. Konfigurasi Database ..................................................................77

Gambar 4.3. Database Migrate.........................................................................77
Gambar 4.4. Composer Install .........................................................................78
Gambar 4.5. Membuat Folder Laravel .............................................................78
Gambar 4.6. Menjalankan Folder Laravel .......................................................79
Gambar 4.7. Tampilan Awal Laravel ...............................................................79
Gambar 4.8. Halaman Login ............................................................................80
Gambar 4.9 .Halaman Utama Sidebar..............................................................82
Gambar 4.10. Halaman Utama Navbar ............................................................83
Gambar 4.11. Halaman Dashboard ..................................................................84
Gambar 4.12. Halaman Transaction Statistics .................................................85
Gambar 4.13. Halaman Sales ...........................................................................86
Gambar 4.14. Halaman Register Sale ..............................................................87
Gambar 4.15. Halaman Sale Detail ..................................................................88
Gambar 4.16. Halaman Add Product Sale .......................................................89
Gambar 4.17. Halaman Expenses ....................................................................90
Gambar 4.18. Halaman Register Expenses ......................................................91
Gambar 4.19. Halaman Income .......................................................................92
Gambar 4.20. Register Income.........................................................................93
Gambar 4.21. Halaman Transfers ....................................................................94

xiv
Gambar 4.22. Register Transfer .......................................................................95
Gambar 4.23. Halaman Payments ....................................................................96
Gambar 4.24. Halaman New Payment .............................................................97
Gambar 4.25. Halaman Inventory Statistic ......................................................98
Gambar 4.26. Halaman Categories ..................................................................99
Gambar 4.27. Halaman New Category ..........................................................100
Gambar 4.28. Halaman Show Category .........................................................101
Gambar 4.29. Halaman Products ...................................................................102
Gambar 4.30. Halaman New Product ............................................................103
Gambar 4.31. Halaman Show Product ...........................................................104
Gambar 4.32. Halaman Receipts ....................................................................105
Gambar 4.33. Halaman New Receipt .............................................................106
Gambar 4.34. Halaman Show Receipt ...........................................................107
Gambar 4.35. Halaman Add Product Receipt ................................................108
Gambar 4.36. Halaman Clients ......................................................................109
Gambar 4.37. Halaman Add Client ................................................................110
Gambar 4.38. Halaman Show Client..............................................................111
Gambar 4.39. Halaman Suppliers ..................................................................112
Gambar 4.40. Halaman New Supplier ...........................................................113
Gambar 4.41. Halaman Show Supplier ..........................................................114
Gambar 4.42. Halaman Payment Methods ....................................................115
Gambar 4.43. Halaman New Method ............................................................116
Gambar 4.44. Halaman Show Method ...........................................................117
Gambar 4.45. Halaman Users ........................................................................118
Gambar 4.46. Halaman New User .................................................................119
Gambar 4.47. Struktur Database damaiaba_db_laravel .................................120
Gambar 4.48. Mengunggah file laravel ..........................................................121
Gambar 4.49. Mengekstrak Folder Inventory ................................................121
Gambar 4.50. Mengubah Data File .env ........................................................122
Gambar 4.51. Tampilan Website Inventory ...................................................122

xv
 DAFTAR LAMPIRAN

LAMPIRAN OUTPUT PROGRAM ........................................................ L1

xvi
 BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Perkembangan teknologi, informasi dan komunikasi dalam era sekarang ini
semakin berkembang dan sudah banyak perubahan, terutama dibidang
komputer dan teknologi informasi. pada saat ini hampir semua kegiatan
manusia dilakukan bersama dengan bantuan komputer. Teknologi sangat
membantu manusia untuk menyelesaikan pekerjaannya dalam hampir disegala
aspek bidang, seperti melakukan perdaganan, bisnis, pendidikan, perkantoran,
perbankan dan lain – lain. Komputer memiliki media penyimpanan dan
informasi dengan atau mampu menyelesaikan pekerjaan dengan ketelitian
tinggi.

Saat ini masih banyak perusahaan yang masih melakukan pencatatan data
transaksi dari mulai pemasukan barang sampai barang dikirim ke pelanggan
masih secara manual. Pencatatan data transaksi secara manual sudah tidak
efektif karena banyak terjadi Human error, sehingga terjadinya data yang
tercatat tidak sesuai. Data yang tercatat tidak sesuai dapat menyebabkan
kerugian yang cukup besar terhadap perusahaan itu sendiri.

PT. Gamehouse Cyber merupakan perusahaan yang bergerak dibidang

manufaktur komponen otomotif. Proses pencatatan persediaan barang dan
transaksi perusahaan saat ini masih manual menggunakan aplikasi Microsoft
excel, sedangkan pembukuan persediaan barang masih dilakukan secara manual
dalam bentuk arsip. Hal ini menyebabkan pembuatan laporan persediaan barang
dan transaksi perusahaan membutuhkan waktu yang lama dan tidak efektif.

Maka berdasarkan uraian diatas dibutuhkan sebuah sistem atau aplikasi

yang dapat membatu dan mempermudah pekerjaan dalam proses pencatatan
data sehingga dapat menanani terjadinya Human error dan menjadi lebih efektif

1
 2

dalam membuat laporan. Oleh karena itu tercipta tema “Aplikasi manajemen
inventory dan pencatatan transaksi keuangan PT. Gamehouse Cyber berbasis
websites menggunakan framework Laravel dan database mysql”. Aplikasi ini
diharapkan dapat membantu dan mempermudah pengguna dalam melakukan
pekerjaan, terutama dalam hal pencatatan persediaan barang mulai dari
pembelian persediaan barang hingga barang terjual kepada klien perusahaan.

1.2. Ruang Lingkup

Terdapat beberapa Batasan masalah pada penelitian ini, sebagai berikut :

a. Aplikasi ini dirancang untuk menyimpan data persediaan barang

dengan minimal 0 barang.
b. Aplikasi ini dirancang untuk menyimpan transaksi persediaan stok
barang, laporan pembelian ke penyedia barang atau bahan baku,
laporan penjualan barang ke pelanggan, data pelanggan, data transaksi
pengeluaran dan pemasukan keuangan perusahaan.
c. Aplikasi ini berbasis website dengan menggunakan framework
Laravel.

1.3. Tujuan Penelitian

Tujuan dari penelitian ini membuat aplikasi untuk mempermudah dan
mempercepat melakukan proses kegiatan pendataan persediaan barang dan
pencatatan laporan keuangan di PT. Gamehouse Cyber dengan menyediakan
sistem dan aplikasi untuk proses manajemen inventory dan untuk
mengorganisasi data transaksi lebih baik dan efesien dengan menyimpan secara
digital melalui aplikasi berbasis website.
 3

1.4. Metode Penelitian

Metode penelitian yang digunakan pada penelitian ini yaitu menggunakan
metode SDLC (System Development Life Cycle) dengan menerapkan model
waterfall yang meliputi sebagai berikut :

1. Analis
Proses menganalisa dan pengumpulan kebutuhan sistem yang sesuai
dengan kebutuhan dalam penelitian ini, juga mengumpulkan data yang
penting dan akurat melalui sumber terpercaya dengan menggunakan
analisis kebutuhan user dan analisis kebutuhan system.
2. Desain
Membuat desain untuk rancangan program yang akan digunakan
untuk data – data yang telah didapatkan dan dimodelkan dalam
arsitektur sistem informasi informasi dan manajemen berbasis website
yang akan dibuat menggunakan struktur navigasi, perancangan sistem,
perancangan database dan perancangan tampilan.
3. Implementasi
Membuat program dengan pemrograman tersetruktur. Bahasa
pemrograman PHP dan MySQL sebagai database yang digunakan
dalam pembuatan program ini. Implementasi yang digunakan berupa
hasil yang berhasil dibuat dan langkah langkah percobaan yang
dilakukan oleh user dari awal hingga akhir untuk melihat tampilan hasil
awal hingga akhir yang dikeluarkan oleh sistem.
4. Testing
Pada proses ini merupakan pengujian sistem yang dibuat apakah
berjalan dengan baik atau tidak. Untuk itu proses pengujian yang
digunakan adalah blackbox testing. Dikarenakan dengan metode ini
dapat memastikan apakah setiap bagian sudah sesuai dengan alur proses
yang ditetapkan dan memastikan kesalahan masukan yang dilakukan
oleh user dapat ditangani oleh sistem.
 4

1.5. Sistematika Penulisan

Sistematika penulisan ini adalah sebagai berikut:

• BAB I PENDAHULUAN
Pada pendahuluan menjelaskan tentang latar belakang, rumusan
masalah, ruang lingkup, tujuan penelitian, metodologi penelitian,
dan sistematika penulisan.
• BAB II LANDASAN TEORI
Pada lanadasan teori menjelaskan teori teori yang berhubungan
dan mendukung dalam penelitian ini.
• BAB III ANALISIS DAN PERANCANGAN
Pada analisis dan perancangan menjelaskan perancangan dalam
pembuatan aplikasi yang terdiri dari struktur navigasi, perancangan
sistem, perancangan database dan perancangan tampilan.
• BAB IV IMPLEMENTASI DAN TESTING
Pada implementasi dan testing menjelaskan cara
mengimplementasikan dan penggunaan aplikasi, serta hasil dari
testing yang dilakukan terhadap aplikasi yang telah dibuat.
• BAB V PENUTUP
Pada penutup menjelaskan kesimpulan yang berisikan dari hasil
materi yang telah disajikan dan keberhasilan dari tujuan pembuatan
aplikasi ini. Serta saran yagn berguna untuk memaksimalkan peneliti
dalam penelitian selanjutnya.
 BAB II

TINJAUAN PUSTAKA

2.1. Pengertian Inventory

Secara umum Inventory atau persediaan dapat berbentuk berupa bahan baku
yaitu bahan mentah yang masih menunggu untuk dilakukan proses produksi,
kemudian barang dalam proses yaitu bahan baku yang sedang melalui proses
produksi, dan barang jadi yaitu bahan baku yang telah melalui proses produksi.
Semua barang tadi, yaitu bahan baku, barang dalam proses dan barang jadi itu
tersimpan di dalam perusahaan, setiap barang yang tersimpan pada perusahaan
dianggap sebagai kekayaan (asset) yang memiliki harga dan nilai, sehingga
setiap barang yang tersimpan pada perusahaan sangat lah penting dan berharga.

Uraian di atas merupakan kesimpulan yang dapat ditarik dari sebuah teori
menurut beberapa ahli seperti yang dikemukakan oleh Ahmad Syafi’i Syukur
(2009), persediaan adalah barang-barang yang diadakan (dibeli) untuk dijual
kembali. Menurut Rudianto (2009), persediaan merupakan sejumlah barang
jadi, bahan baku, barang dalam proses yang dimiliki perusahaan dengan tujuan
untuk dijual atau diproses lanjut. Menurut Zaki Baridwan (2013), Persediaan
adalah barang yang dimilki untuk dijual kembali atau digunakan untuk
memproduksi barang-barang yang akan dijual.

2.2. Pengertian Manajemen

Menurut Stoner dan Wankel (2011), manajemen merupakan serangkaian
proses mulai dari proses perencanaan, pengorganisasian, kepemimpinan, serta
upata pengendalian anggota dan menggunkan semua sumber daya organisasi
tersebut untuk mencapai sebuah tujuan bersama. Menurut Assauri (2008), suatu
kegiatan maupun usaha yang dilakukan guna mencapai suatu tujuan dengan
menggunakan atau mengkoordinasikan suatu kegiatan bersama dengan orang
lain.

5
 6

Dari penjelasan di atas dapat disimpulkan, manajemen merupakan

serangkai kegiatan dari proses perencanaan, pengorganisasian, pengendalian
oleh seseorang. Semua kegiatan tersebut bertujuan untuk menentukan dan
mencapai target dengan sumber daya yang ada agar efektif dan efisien.

2.3. Pengertian Manajemen Inventory

Manejemen inventory (persediaan) merupakan kegiatan mengelola
persediaan, mulai dari mengamati, mengontrol dan menjaga agar persediaan
barang tetap pada level optimal. Sehingga dengan menejemen inventory
(persediaan) tidak terjadi kelebihan persediaan maupun kekurangan yang dapat
menimbulkan masalah baru bagi perusahaan, terutama pada keuangan
perusahaan. Tujuan dari manajemen persediaan yaitu mengendalikan
persediaan barang dengan pelayanan pelanggan. Uraian ini didapat kesimpulan
dari teori para ahli yang terdapat di bawah.

Menurut Prawirosentono (2007), manajemen persediaan (inventory)

merupakan sebuah aktiva lancer dalam suatu perusahaan dalam bentuk
persediaan bahan mentah atau bahan baku (raw material), bahan dalam proses
(work in process), dan barang jadi (finished goods). Menurut pendapat lain dari
Heizer & Render (2014), manajemen persediaan merupan sistem-sitem untuk
mengelola persediaan. Bagaimana barang persediaan dapat diklasifikasikan,
diamati, dikontrol, dan dijaga karena persediaan sangat penting bagi
perusahaan. Anda tidak akan pernah mencapai sebuah strategi berbiaya rendah
tanpa manajemen persediaan yang baik.

2.4. Website
Menurut Hikmah, dkk (2015), “Website atau situs dapat diartikan kumpulan
halaman yang digunakan untuk menampilkan informasi berupa teks, gambar
diam atau gerak, animasi, suara, dan/atau gabungan dari semuanya, baik bersifat
statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling
terkaitan, yang masing – masing dihubungkan dengan jaringan – jaringan
halaman”.
 7

Menurut Yuhefizar (2013), “Website adalah kesuluran halaman – halaman

web yang terdapat di dalam sebuah domain yang isinya mengandung informasi.
Sebuah website biasanya dibangun yang terdiri dari banyak halaman yang
saling berhubungan. Hubungan antar halaman web yang lainnya disebut dengan
hyperlink, sedangkan teks yang dijadikan media penghubung disebut
hypertext”.

Berdasarkan kesimpulan dari pengertian para ahli di atas dapat disimpukan

bahwa website adalah kumpulan dari seluruh halaman web yang berisikan
sebuah data atau informasi yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling berkaitan, yang masing –
masing dihubungkan dengan jaringan – jaringan halaman.

2.4.1. Bahasa Pemrograman Web

Menurut Abdulloh (2018) Bahasa pemrograman web terdiri dari beberapa
unsur bahasa, setidaknya terdapat 5 bahasa utama yang biasanya digunakan oleh
programmer untuk membuat sebuah website dinamis, di mana masing-masing
unsur bahasa tersebut memiliki fungsi atau perannya sendiri, yaitu sebagai
berikut.

1. HTML, memiliki fungsi untuk pembentuk struktur halaman website yang

menempatkan setiap elemen website sesuai dengan tampilan yang
diinginkan.
2. PHP, memiliki fungsi untuk memproses data pada sisi server yang diminta
oleh client menjadi informasi yang siap ditampilkan pada halaman, juga
sebagai penghubung aplikasi website dengan database. Selain PHP juga
dapat menggunakan bahasa ASP, Java, dan sebagainya.
3. CSS, berperan sebagai pembentuk desain pada tampilan website dengan
mengatur setiap elemen yang ada pada HTML sehingga tampilan dari
semenarik mungkin pada website.
4. SQL, memiliki fungsi untuk mengatur transaksi dan menyimpan data ke
dalam database. Database yang digunakan biasanya yaitu MySQL, Oracle,
SQL Server, dan sebagainya.
 8

5. JavaScript, berperan sebagai bahasa yang memproses data pada sisi client
serta dapat memanipulasi HTML dan CSS secara dinamis.

2.4.2. Jenis-Jenis Website

Menurut Abdulloh (2018), Secara umum website dikategorikan menjadi
tiga jenis, yaitu website statis, dinamis, dan interaktif :

1. Website Statis, yaitu jenis website yang isinya tidak diperbaharui secara
berkala sehingga isinya dari waktu ke waktu akan selalu sama atau tetap.
Website jenis ini biasanya hanya digunakan untuk menampilkan profil atau
informasi dari pemilik website seperti profil perusahaan atau organisasi.
2. Website Dinamis, yaitu jenis website yang isi informasinya terus
diperbaharui secara berkala oleh pengelola atau pemilik website itu sendiri.
Website ini banyak dimiliki oleh perusahaan atau perorangan yang memiliki
aktifitas bisnis yang mempunyai kaitan dengan internet. Salah satu contoh
dari jenis website dinamis yaitu website berita.
3. Website interaktif, pada dasarnya termasuk ke dalam kategori dinamis,
dimana isinya yaitu informasi yang dapat diperbaharui dari waktu ke waktu.
Namun isi informasi tidak dapat diubah oleh pemilik website namun dapat
diubah oleh pengguna website itu sendiri. Contoh dari website interaktif
yaitu Facebook, Twitter, Bukalapak, Tokopedia, dan sebagainya.

2.4.3. Istilah-Istilah Pemrograman Web

Menurut Abdulloh (2018) Terdapat berberapa istilah yang sering digunakan
pada pembangunan sebuah website, diantaranya:

1. Server, merupakan komputer khusu dengan kecapatan dan kapasitas

penyimpanan di atas rata-rata komputer biasa yang digunakan sebagai
tempat pemrosesan data dan menyimpan berbagai file yang digunakan
pada website.
2. Client, merupakan penggunaan dari sisi pengguna dari sebuah web dengan
menggunakan perangkat sendiri untuk mengakses halaman pada web.
 9

3. Domain, sebuah nama unik yang mewakili dari alamat IP pada server
website berupa kata kunci yang mudah diingat sehingga dapat
mempermudah dalam pencarian kata kunci atau pemanggilan website
tersebut.
4. Hosting, merupakan tempat penyimpanan file-file pembuatan website pada
sebuah server di internet sehingga dapat diakses dari mana saja dan kapan
pun melalui perangkat komputer maupun smartphone yang terhubung
dengan internet.
5. URL, yaitu nama unik untuk mengidentifikasi letak sumber daya website
berupa file HTML, gambar, video dan lain sebagainya yang biasanya akan
ditampilkan pada address bar browser Ketika sumber daya tersebut
diakses.
6. HTTP, singkatan dari Hypertext Transfer Protocol yaitu protocol yang
mengatur pengiriman data dari client ke server atau sebaliknya dan
menerjemahkannya menjadi informasi yang dapat dibaca oleh pengguna
website.

2.5. Internet
Internet atau singkatan dari Interconnected Network adalah sistem jaringan
komunikasi global yang menghubungkan komputer-komputer dan jaringan
komputer diseluruh dunia dengan waktu dan wilayah yang tak terbatas. Uraian
di atas didapat dari kesimpulan dari teori para ahli di bawah ini.

Menurut Ahmadi dan Hermawan (2013:68) “Internet adalah komunikasi

global yang menghubungkan seluruh komputer di dunia meskipun memiliki
sistem operasi dan mesin berbeda”. Menurut Sibero (2013:10) “Internet
(Interconnected Network) merupakan jaringan komputer yang menghubungkan
antar jaringan secara global, internet juga dapat disebut dengan jaringan dalam
suatu jaringan yang luas”.

2.6. Framework Laravel

Framework marupakan aplikasi yang didesain dan diprogram dengan
bentuk kerangka aplikasi yang dapat digunakan dan membangun apllikasi –
 10

aplikasi yang sejenisnya. Framework memiliki banyak pustaka yang dapat

digunakan berulang-ulang dan dikembangnkan lagi. Framework
mendefinisikan arsitektur dari aplikasi sehingga penambahan fungsi-fungsi lain
dapat dilakukan dengan menambahkan modul-modul tanpa perlu memodifikasi
kode program yang sudah ada (kecuali file konfigurasi) (Basuki, 2010).

Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan fungsi

(libraries) sehingga seorang programmer tidak perlu lagi membuat fungsi-
fungsi yang sama dari awal dan biasanya disebut kumpulan library atau fungsi
yang sudah ada di dalam framework yang cara menggunakan fungsi-fungsi itu
sudah ditentukan sesuai dengan aturan masing-masing.

Dengan menggunakan framework, sebuah aplikasi akan tersusun secara

terstruktur dan rapi karena pembuat framework telah menggunakan susunan
yang sudah dirancang, misal MVC yang telah dikenal oleh kalangan
programmer PHP.

Laravel merupakan framework berbasis PHP yang sifatnya open source

(gratis) dan menggunakan konsel model-view-controller. Framework sendiri
merupakan suatu struktur konseptual dasar yang digunakan untuk
menyelesaikan atau menangani suatu masalah yang kompleks. Singkatnya,
framework merupakan wadah atau kerangka kerja dari sebuah website yang
akan dibangun (Naista, 2017).

Laravel merupakan sebuah framework PHP yang dirilis di bawah lisensi

MIT dan dikembangkan pertama kali oleh Taylor Otwell, dibangun dengan
konsep MVC (Model View Controller). Laravel adalah pengembagnan website
bebasis MVC yang ditulis dalam PHP yang dirancang untuk meningkatkan
kualitas dari perangkat lunak dengan mengurangi biaya pengembangan awal,
pemeliharaan, dan untuk meningkatkan (Awaludin, 2016).

Model view Controller (MVC) merupakan sebuah pola dari pemrograman

yang memeiliki tujuan untuk memisahkan logika bisnis, logika data, dan logika
tampilan, atau sederhananya adalah memisahkan antara proses, data dan
 11

tampilan. MVC mengatur arsitektur dari sebuah aplikasi, umumnya aplikasi

yang dibangun dengan konsep MVC adalah aplikasi yang cukup besar, karena
salah satu keuntungan menggunakan MVC yaitu kemudahan untuk
maintenance dan pengembangan aplikasi tersebut. Laravel menggunakan
konsep MVC, yang mana harus memisahkan kode database ke folder model,
kode proses ke folder controller dan kode tampilan ke folder view (Wardhana,
2014).

Dari beberapa pendapat di atas, dapat ditarik kesimpulan bahwa framework

Laravel merupakan kerangka kerja dari sebuat website dengan menggunakan
Bahasa pemrograman PHP, menggunakan konsep MVC (model-view-
controller), bersifat open source (gratis) dan dibangun unntuk memberikan
kemudahan dalam pengembangan aplikasi.

2.6.1. Fitur pada Framework Laravel

Menurut Aminudin (2015) Ada beberapa fitur yang dimiliki oleh framework
Laravel, yaitu sebagai berikut:

1. Bundles, merupakan sebuah fitur dengan sistem pengemasan

modular dan berbagai bundle telah tersedia untuk digunakan dalam
aplikasi.
2. Eloquent ORM, merupakan ppenerapan PHP alnjutan dari pola
active record menyediakanmetode internal untuk mengatasi kendala
hubungan antara objek database.
3. Aplikasi login, merupakan bagian dari sebua aplikasi yang
dikembangkan. Dengan menggunakan controllers maupun sebgai
bagian dari deklarasi route. Sintaks yang digunakan untuk
mendefinisikan mirip dengan yang digunakan oleh framework
Sinatra.
4. Reverse Routing, mendefinisikan hubungan antara link dan route.
Sehingga jika suatu saat ada perubahaan pada route secara otomatis
akan tersambung dengan link yang relevan. Ketika link yang dibuat
 12

dengan menggunakan nama-nama dari route yang ada. Secara

otomatis Laravel akan membuat URI yang sama.
5. Class Auto Loading, menyediakan otomatis loading untuk kelas
PHP, tanpa membutuhkan pemeriksaan secara manual terhadap jalur
masuknya. Fitur ini mencegah loading yang tidak perlu.
6. Restful Controller, memberikan sebuah pilihan untuk memisahkan
logika dalam melayani HTTP GET dan permintaan POST.
7. View Composers, merupakan kode unit logika yang dapat jalan
ketika sebuah view di buka atau load.
8. IoC Container, memungkinkan untuk objek baru yang dihasilkan
dengan mengikuti prinsip control pembalik, dengan pilihan contoh
dan referensi dari objek baru sebagai Singletons.
9. Migrations, menyediakan versi sistem control untuk skema
database, sehingga memungkinkan untuk menghubungkan
perubahan dari basis kode aplikasi dan keperluan yang dibutuhkan
dalam merubah tata letak database, mempermudah dalam
penempatan dan memperbarui aplikasi.
10. Unit Testing, merupakan sebagai tes untuk mendeteksi dan
mencegah regresi. Unit testing dapat dijalankan melalui fitur
“artisan command-line”.
11. Automatic Pagination, memiliki fungsi untuk menyerdehanakan
tugas dari penerapan halaman, menggantikan penerapan yang
manual dengan metode otomatis yang terintegrasi ke Laravel.

2.6.2. Tools pada Framework Laravel

Laravel memiliki dua tools yaitu Composer dan Artisan. Composer
merupakan tool yang di dalamnya terdapat dependencies dan kumpulan library.
Seluruh dependencies disimpan menggunakan format file composer.json
sehingga dapat ditempatkan dalam folder utama website. Sedangkan Artisan
merupakan command line interface atau perintah-perintah yang diketikkan pada
command prompt untuk melakukan tugas tertentu pada saat membuat aplikasi
dengan Laravel. Framework Laravel ini terdapat printah dasar yang dapat
 13

digunakan setelah memiliki dua tools, dan perintah dasar tersebut sebagai
berikut:

1. Artisan. Artisan adalah command line atau perintah yang dijalankan

melalui terminal dan disediakan beberapa perintah perintah yang dapat
digunakan selama melakukan pengembangan dan pembuatan
aplikasi.Salah satu fungsi dari php artisan yaitu “php artisan serve”. Php
artisan serve berfungsi untuk membuka website yang telah dibuat tanpa
menggunakan web server lokal.
2. Routing. Routing adalah suatu proses yang bertujuan agar suatu item
yang dinginkan dapat sampai ke tujuan. Dengan menggunakan routing
dapat ditentukan halaman halaman yang akan muncul ketika dibuka oleh
user. Pengaturan routing di laravel biasanya terletak di file web.php. File
web.php terletak di dalam folder routes.
3. Controller. Controller adalah suatu proses yang bertujuan untuk
mengambil permintaan, menginisialisasi, memanggil model untuk
dikirimkan ke view. Ada dua cara membuat controller di laravel. Cara
pertama adalah dibuat file controller secara manual dan dituliskan code
extends controller di dalamnya. Cara kedua adalah dibuat file controller
menggunakan command line dengan menuliskan “php artisan make
controller nama_file_controller”. Permintaan yang dibuat dalam laravel
harus berada di dalam controller, kemudian dilempar melalui routing
untuk mendapat permintaan yang diinginkan.
4. Blade. Blade adalah template engine bawaan dari laravel. Blade
memiliki kode yang lebih mudah untuk menghasilkan laravel. Cara
membuat file.blade dilakukan secara manual dengan membuat
nama_file.php.blade di dalam folder views. Di dalam blade dapat dibuat
template master dan template inheritance. Pembuatan template master
dan turunannya ini bertujuan agar elemen yang sama tidak ditulis secara
berulang-ulang. Pada template inheritance diberikan kode “extend
(nama_layout) dansection (nama_content)”.
 14

5. Middleware. Middleware adalah penengah Antara request yang masuk

dengan controller yang dituju. Cara membuat middleware
menggunakan artisan dengan mengetikkan “php artisan
make:middleware nama_file”. File middleware berada di dalam folder
middleware.
6. Session. Session adalah sebuah cara yang digunakan untuk
penyimpanan pada server dan penyimpanan tersebut digunakan pada
beberapa halaman termasuk halaman itu sendiri. Dalam menggunakan
session ada dua cara. Cara yang pertama session dapat dibuat
menggunakan Request. Cara yang kedua dapat digunakan fungsi global
helper session.

2.7. Database
Database (pangkalan data) merupakan istilah teknologi jaringan komputer
yang memiliki banyak manfaat berupa penyimpanan data yang saling
berhubungan dan perangkat lunaknya seharusnya mengacu sebagai sistem
manajemen basis data (data management system atau DBMS). Beberapa istilah
yang digunakan dalam pengelohan database, yaitu :

1. Field, merupakan unit terkecil dari data yang berarti (meaningful data)
yang disimpan dalam suatu file atau basis data.
2. Record, merupakan koleksi dari field-field yang disusun dengan format
yang telah ditentukan.
3. File dan Tabel, File merupakan kumpulan semua kejadian dari struktur
record yang diberikan. Tabel merupakan ekuivalen basis dara relasional
dari sebuah file.

Bahasa basis data merupakan perantara bagi user dengan basis data dalam
berinteraksi, yang telah ditetapkan oleh pembuat DBMS. Bahasa basis data
dapat dibedakan menjadi 2, yaitu :

1. Data Definition Language (DDL), merupakan kumpulan perintah SQL

yang digunakan untuk membuat (create), mengubah (alter) dan
 15

menghapus (drop) struktur dan definisi tipe data dari objek-objek

database. Jadi dengan menggunakan DDL dapat membuat tabel baru,
membuat indeks, mengubah tabel, menentukan struktur tabel, dan lain-
lain.
2. Data Manipulation Language (DML), merupakan kumpulan perintah
query yang digunakan untuk memanipulasi data pada database. DDL
dapat melakukan manipulasi dan pengambilan data ada suatu basis data
yang berupa insert, update, dan delete.

2.8. MySQL
Menurut Muhammad Robith Adani (2020) MySQL adalah sebuah DBMS
(Database Management System) menggunakan perintah SQL (Structured
Query Language) yang banyak digunakan saat ini dalam pembuatan aplikasi
berbasis website. MySQL dibagi menjadi dua lisensi, pertama adalah Free
Software dimana perangkat lunak dapat diakses oleh siapa saja. kedua adalah
Shareware dimana perangkat lunak berpemilik memiliki batasan dalam
penggunaannya.

MySQL termasuk ke dalam RDBMS (Relational Database Management

System). Sehingga, menggunakan tabel, kolom, baris, di dalam struktur
database - nya. Jadi, dalam proses pengambilan data menggunakan metode
relational database. MySQL juga menjadi penghubung antara perangkat lunak
dan database server.

2.9. XAMPP
Menurut Hermawan Riyadi (2019) XAMPP yang merupakan singkatan dari
Apache, MySQL, PHP dan Perl sedangkan huruf “X” dimaksudkan sebagai
suatu software yang dapat dijalankan di empat OS utama seperti Windows, Mac
OS, Linux dan Solaris. Istilah ini seringkali disebut dengan cross platform
(software multiOS).

XAMPP merupakan gabungan dari beberapa software dengan fungsi yang

sama yakni menunjang para pembuat web yang menginginkan adanya web
 16

server sendiri di PC atau laptopnya. Software ini juga berlisensi GNU dan dapat
didownload secara gratis di internet mengingat peran vital yang dimilikinya
terutama bagi pembuat web pemula.

XAMPP didirikan oleh suatu perusahaan bernama Apache Friends. Dengan

adanya beberapa tools pemrograman seperti MySQL, PHP dan Perl yang
dimilikinya tentu mengindikasikan jika anda menekuni salah satu atau
semuanya berarti harus memiliki software yang bernama XAMPP ini. Maksud
dari Apache yakni selain mengindikasikan nama pengembangnya juga
merupakan suatu software yang menghadirkan web server pada komputer anda
layaknya web server sesungguhnya.

XAMPP merupakan singkatan yang setiap hurufnya merupakan :

• X : Program ini dapat dijalankan di banyak sistem operasi, seperti

Windows, Linux, Mac OS, dan Solaris.
• A : Apache, server aplikasi Web. Apache memiliki tugas utama yaitu
untuk menghasilkan halaman web yang benar kepada pengguna
terhadap kode PHP yang sudah dituliskan oleh pembuat halaman web.
jika perlu kode PHP juga berdasarkan yang tertulis, dapat database
diakses dulu (misalnya MySQL) untuk mendukung halaman web yang
dihasilkan.
• M : MySQL, server aplikasi database. Pertumbuhannya disebut SQL
singkatan dari Structured Query Language. SQL merupakan bahasa
terstruktur yang difungsikan untuk mengolah database. MySQL dapat
digunakan untuk membuat dan mengelola database dan isinya. Bisa juga
memanfaatkan MySQL guna untuk menambahkan, mengubah, dan
menghapus data dalam database.
• P : PHP, bahasa pemrograman web. Bahasa pemrograman PHP adalah
bahasa pemrograman untuk membuat web yang server-side scripting.
PHP digunakan untuk membuat halaman web dinamis. Sistem
manajemen database yang sering digunakan dengan PHP adalah
MySQL. namun PHP juga mendukung pengelolaan sistem database
 17

Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan

sebagainya.
• P : Perl, bahasa pemrograman untuk semua tujuan, pertama kali
dikembangkan oleh Larry Wall, mesin Unix. Perl dirilis pertama kali
tanggal 18 Desember 1987 yang ditandai dengan keluarnya Perl 1. Pada
versi-versi selanjutnya, Perl juga tersedia untuk berbagai sistem operasi
Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi
seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan
PocketPC.

2.10. phpMyAdmin
Menurut Hermawan Riyadi (2019) phpMyAdmin merupakan salah satu
software penting dalam pengelolaan database dengan menggunakan MySQL
(Bahasa SQL). Sesuai dengan namanya phpMyAdmin ini ditulis dalam Bahasa
pemrograman PHP. Sempat dibahas juga bahwa phpMyAdmin khusus
menangani pengelolaan database dalam lingkup website (World Wide Web).
Sama halnya dengan MySQL, software yang rilis perdana pada tahu 1998 ini
juga berlisensi GNU (General Public License) dan sudah mensupport
mutilingual (multi bahasa) dalam user interfacenya.

Software phpMyAdmin ini tergolong software dasar sehingga sangat cocok

digunakan bagi para pemula yang ingin menekuni pengelolaan database dalam
web server. Dengan sifatnya yang open source serta cross platform (dapat
beroperasi di semua perangkat) tentunya menjadi keunggulan tersendiri bagi
phpMyAdmin, sehingga sangat wajar bahwa mereka yang masih belajar bisa
mengoperasikannya.

Hampir di semua web server juga mensupport penggunaan phpMyAdmin,

selain itu dalam kondisi offline pun anda juga dapat mengoperasikannya. Cukup
dibantu software simulasi semacam XAMPP dan dengan menuliskan url
“localhost/phpmyadmin” maka anda sudah bisa mengelola database dengan
menggunakan software phpMyAdmin.
 18

2.11. Visual Studio Code

Visual Studio Code merupakan teks editor open source yang menggunakan
lisensi MIT sehingga aman untuk digunakan baik untuk keperluan commercial
maupun non commercial. Text editor ini secara langsung mendukung Bahasa
pemrograman JavaScript, Typescript, dan Node.js, serta bahasa pemrograman
lainnya dengan bantuan plugin yang dapat dipasang via marketplace Visual
Studio Code (seperti C++, C#, Python, Go, Java, dan sebagainya).

Banyak sekali fitur-fitur yang disediakan oleh Visual Studio Code,

diantaranya Intellisense, Git Integration, Debugging, dan fitur ekstensi yang
menambah kemampuan teks editor. Fitur-fitur tersebut akan terus bertambah
seiring dengan bertambahnya versi Visual Studio Code. Pembaruan versi Visual
Studio Code ini juga dilakukan berkala setiap bulan, dan inilah yang
membedakan dengan teks editor-teks editor yang lain.

Teks editor Visual Studio Code juga bersifat open source, yang mana kode
sumbernya dapat kalian lihat dan kalian dapat berkontribusi untuk
pengembangannya. Kode sumber dari teks editor ini pun dapat dilihat di link
Github. Hal ini juga yang membuat teks editor menjadi favorit para
pengembang aplikasi, karena para pengembang aplikasi bisa ikut serta dalam
proses pengembangan Visual Studio Code ke depannya. (A. Yudi, 2019).

2.12. Struktur Navigasi

Menurut (frieyadle, 2019) Struktur navigasi adalah sebuah halaman web
atau dokumen web yang mempunyai struktur yang jelas serta tersusun dengan
teratur. Struktur Navigasi dapat diartikan juga sebagai alur yang digunakan
dalam aplikasi yang dibuat sebelum menyusun aplikasi multimedia kedalam
sebuah software. Ada empat macam bentuk dasar dari struktur navigasi yang
biasa digunakan dalam proses pembuatan aplikasi multimedia, yaitu struktur
navigasi linier, hirarki, non linier, dan campuran. Berikut ini merupakan
penjelasan dari masing-masing struktur navigasi.
 19

1. Struktur Navigasi Linier, merupakan struktur yang mempunyai satu

rangkaian cerita berurutan. Struktur ini menampilkan satu demi satu
tampilan layer secara berurutan menurut aturannya
.

2. Struktur Navigasi Hirarki, sering disebut struktur navigasi bercabang,

yaitu merupakan suatu struktur yang mengandalkan percabangan untuk
menampilkan data atau gambar pada layer dengan kriteria
tertentu.Tampilan pada menu utama disebut master page (halaman
utama satu), halaman tersebut mempunyai halaman percabangan yang
disebut slave page (halaman pendukung) dan jika dipilih akan menjadi
halaman kedua, begitu seterusnya.

3. Struktur Navigasi Non Linier(tidak terurut), merupakan pengembangan

dari struktur navigasi linier, hanya saja pada struktur ini diperkenankan
untuk membuat percabangan. Percabangan pada struktur non linier
berbeda dengan percabangan pada struktur hirarki, pada struktur ini
kedudukan semua page sama, sehingga tidak dikenal adanya master atau
slave page.
 20

4. Struktur Navigasi Campuran, merupakan gabungan dari struktur

sebelumnya dan disebut juga struktur navigasi bebas, maksudnya adalah
jika suatu tampilan membutuhkan percabangan maka dibuat
percabangan. Struktur ini paling banyak digunakan dalam pembuatan
aplikasi multimedia.

2.13. UML
Unified Modeling Language (UML) adalah sebuah bahasa yang
berdasarkan gambar untuk menvisualisasikan, menspesifikasikan, membangun
dan pendokumentasian dari sebuah sistem pengembangan perangkat lunak
berbasis Objek. Unified Modeling Language (UML) bukanlah merupakan
bahasa pemprograman tetapi model-model yang tercipta berhubungan langsung
dengan berbagai macam bahasa pemprograman, sehingga memungkinkan
melakukan pemetaan (mapping) langsung dari model-model yang dibuat
dengan Unified Modeling Language (UML) dengan bahasa-bahasa
pemprograman berorientasi obyek, seperti Java. (Yuli, 2016)
 21

UML tersusun atas sejumlah elemen grafis membentuk 9 diagram-diagram.

Beberapa diagram tersebut salah satunya yaitu Use Case Diagram.

1. Use Case Diagram

Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas dan
bagaimana sistem ini berinteraksi dengan dunia luar, misalnya
menyusun sebuah daftar layanan kesehatan. Use case diagram dapat
digunakan untuk memperoleh kebutuhan sistem dan memahami
bagaimana sistem seharusnya bekerja. Komponen yang terdapat pada
sebuah use case diagram terdiri dari:
a. Actor : Pengguna perangkat lunak aplikasi, bisa berupa manusia,
perangkat keras atau sistem informasi yang lain. Actor dapat
memasukan informasi ke dalam sistem, menerima informasi dari sistem,
atau keduanya.
b. Use Case : Perilaku atau apa yang dikerjakan pengguna sistem aplikasi,
termasuk interaksi antar actor dengan perangkat lunak aplikasi tersebut.

2. Activity Diagram
Activity diagrams menggambarkan berbagai alir aktivitas dalam
sistem yang sedang dirancang, bagaimana masing-masing alir berawal,
 22

keputusan yang mungkin terjadi, dan bagaimana suatu aktivitas

berakhir. Activity diagram juga dapat menggambarkan proses paralel
yang mungkin terjadi pada beberapa kegiatan. Sebuah aktivitas dapat
direalisasikan oleh satu use case atau lebih. Aktivitas menggambarkan
proses yang berjalan, sementara use case menggambarkan bagaimana
aktor menggunakan sistem untuk melakukan aktivitas.

3. Class Diagram
Class diagram adalah visualisasi kelas dari suatu sistem dan
merupakan tipe diagram yang paling banyak dipakai. Diagram ini
memperlihatkan hubungan antar kelas dan penjelasan detail tiap-tiap
kelas didalam model desain (dalam logical view) dari suatu sistem.
Kelas memiliki 3 area utama yaitu : nama, atribut, dan operasi. Nama
berfungsi untuk member identitas pada sebuah kelas, atribut fungsinya
adalah untuk menunjukan karakteristik pada data yang dimiliki suatu
objek di dalam kelas, sedangkan operasi fungsinya adalah
memberikan sebuah fungsi ke sebuah objek.
 23

Nama Gambar Keterangan

Class Class adalah blok – blok

pembangun pada
pemrograman berorientasi
obyek. Sebuah class
digambarkan sebagai
sebuah kotak yang terbagi
atas 3 bagian. Bagian atas
adalah bagian nama dari
class. Bagian tengah
mendefinisikan property/
atribut class. Bagia akhir
mendefinisikan
methodmethod dari sebuah
class

Composition Jika sebuah class tidak bisa

berdiri sendiri dan harus
merupakan bagian dari
class yang lain, maka class
tersebut memiliki relasi
Composition terhadap
class tempat dia
bergantung tersebut.
Sebuah relationship
composition digambarkan
sebagai garis dengan ujung
berbentuk jajaran genjang
berisi/solid.
 24

Dependecy Kadangkala sebuah class

menggunakan class yang
lain. Hal ini disebut
dependency. Umumnya
penggunaan dependency
digunakan untuk
menunjukkan operasi pada
suatu class yang
menggunakan class yang
lain. Sebuah dependency
dilambangkan sebagai
sebuah panah bertitik-titik.

Associatio Sebuah asosiasi

n merupakan sebuah
relationship paling umum
antara 2 class dan
dilambangkan oleh sebuah
garisyang menghubungkan
antara 2 class. Garis ini
bisa melambangkan tipe-
tipe relationship dan juga
dapat menampilkan
hukum-hukum
multiplisitas pada sebuah
relationship. (Contoh:
One-to-one, one-to-many,
many-to-many)
 25

Aggregation Aggregation
mengindikasikan
keseluruhan bagian
relationship dan biasanya
disebut sebagai relasi
 BAB III

ANALISIS DAN PERANCANGAN

3.1. Analisis Masalah

Saat ini perkembangan teknologi sudah semakin canggih dan
memungkinkan penggunaan komputer banyak digunakan sebagai alat untuk
melakukan pengolahan informasi transaksi dan meningkatkan efisiensi dalam
pekerjaan. Pada PT. Gamehouse Cyber dalam melakukan pengolahan
informasi transaksi masih secara manual dan kurang efisien karena dilakukan
dengan mencatatan laporan (barang keluar dan barang masuk, maupun
pencatatan transaksi pengeluaran, pemasukan dan transaksi kepada klien) masih
secara manual. Dengan dilakukannya pengolahan informasi transaksi secara
manual mengakibatkan resiko kehilangan data atau data yang diolah tidak
terolah dengan baik.

Sebagai meningkatkan efisiensi dan mencegah resiko adanya data terolah

dengan tidak baik, penulis melakukan pengembangan aplikasi manajemen
inventory dan pencatatan transaksi keuangan. Semua proses transaksi akan
dimasukkan dan diproses dengan komputer agar lebih cepat, efisien, dan efektif
yang berbasiskan website.

3.2. Tahap Penelitian

Pada penelitian ini, metode yang digunakan dalam proses membuat aplikasi
ini yaitu menggunakan metode SDLC (Software Development Life Cycle) yang
terdiri dari Perencanaan, Analisis, Perancangan, Implementasi, dan Uji Coba.
Dalam tahap ini dilakukan penelitian untuk mempersiapkan apa yang
dibutuhkan oleh sistem dan apllikasi yang akan dibuat.

3.3. Tahap Analisis

Pada tahap ini menggambarkan proses analisis sebelum melakukan
perancangan aplikasi. Tahap analisis ini terdiri dari analisis kebutuhan data dan

26
 27

analisis kebutuhan sistem yang akan digunakan. Analisis kebutuhan sistem

terdiri dari analisis kebutuhan fungsional dan non-fungsional.

3.3.1. Analisis Kebutuhan Data

Data yang digunakan dalam pembuatan aplikasi ini merupakan data yang
berasal dari PT.Gamehouse Cyber yang dikumpulkan dengan cara
mengunjungi, berdialog dengan pihak bersangkutan, dalam hal ini yaitu
manajer perusahaan.

3.3.2. Analisis Kebutuhan Sistem

Pada analisis kebutuhan sistem terdapat dua analisis kebutuhan, yaitu
kebutuhan fungsional dan non-fungsional. Dari analisis kebutuhan fungsional
menggambarkan kemampuan aplikasi yang dirancang, sedangkan analisis
kebutuhan non-fungsional menggambarkan penjabaran dari karakteristik
kinerja sistem. Kinerja sistem yang terkait dengan aplikasi berbasis website
menggunakan hardware dan software. Hardware dan software ini penting untuk
mendapatkan hasil maksimal dalam membuat aplikasi berbasis website. Berikut
ini merupakan analisis kebutuhan sistem dari fungsional dan non-fungsional.

3.3.2.1. Kebutuhan Fungsional

Analisis kebutuhan fungsional merupakan paparan fitur yang akan
diimplementasikan ke dalam aplikasi yang dibuat. Berikut ini fitur-fitur yang
dapat dijalankan dalam peran Admin:

a. Fungsi Login untuk masuk ke dalam aplikasi dan syarat untuk

melakukan pengoperasian aplikasi.
b. Fungsi Inventory untuk melakukan kelola terhadap persediaan barang.
Admin dapat melakukan manipulasi terhadap data inventory.
c. Fungsi Transaction untuk mengelola transaksi seperti penjualan barang
ke customer, pemasukan dana, pengeluaran dana, transfer antar bank
perusahaan, dan pembayaran kepada pemasok. Admin dapat melakukan
manipulasi data pada transaksi dan membuat invoice.
 28

d. Fungsi Client untuk mengelola data pelanggan sebagai transaksi barang

yang keluar. Admin dapat melakukan manipulasi data pelanggan.
e. Fungsi Suppliers untuk mengelola data pemasok barang sebagai
transaksi barang yang masuk. Admin dapat melakukan manipulasi data
pemasok.
f. Fungsi Payment Methods untuk mengelola pembayaran atau transaksi
keuangan pada perusahaan. admin dapat memanipulasi data
pembayaran.
g. Fungsi Users untuk mengelola data admin. Admin dapat melakukan
manipulasi data pada data admin.
h. Fungsi Logout untuk keluar dari aplikasi.

3.3.2.2. Kebutuhan Non-Fungsional

Analisis kebutuhan non-fungsional berisikan paparan mengenai spesifikasi
tertentu yang diperlukan untuk membuat aplikasi berbasis website yang terdiri
dari hardware dan software. Spesifikasi hardware dan software sebagai berikut:

1. Spesifikasi Perangkat Keras

Spesifikasi dari perangkat keras yang digunakan untuk membuat
aplikasi berbasis website ini adalah :
a. Laptop Lenovo IdeaPad S145
b. Processor: Intel(R) Celeron(R) CPU 4205U @ 1.80GHz
c. Ram: 4GB
d. Harddisk: 256GB
2. Spesifikasi Perangkat Lunak
Spesifikasi dari perangkat lunak yang digunakan pada pembuatan
aplikasi berbasis website ini adalah:
a. Sistem Operasi: Windows 10 home
b. Bahasa Pemrograman: PHP, CSS, Javascript
c. Framework: Laravel
d. Text Editor: Visual Studio Code
e. Database: Mysql (XAMPP)
 29

f. Browser: Google Chrome.

3.4. Perancangan Sistem

Perancangan sistem pada aplikasi manajemen inventory dan pencatatan
transaksi keuangan untuk PT.Gamehouse Cyber berbasis website
menggunakan bahasa pemrograman PHP dengan menggunakan framework
Laravel dan perancangan database menggunakan MySQL.

3.4.1. Perancangan Struktur Navigasi

Struktur navigasi yang digunakan pada pembuatan aplikasi ini
adalah menggunakan struktur navigasi campuran antara struktur navigasi
hierarki dan linear. Di bawah ini merupakan gambar struktur navigasi
campuran pada aplikasi ini.

Gambar 3.1. Struktur Navigasi Aplikasi

 30

Pada Aplikasi manajemen inventory dan pencatatan traksaksi

berbasis website ini memiliki 18 menu utama pada halaman awal, menu
tersebut terdiri dari Dashboard, Transactions (yang terdiri dari Statistics,
Sales, Expenses, Income, Transfers, Payments), Inventory (yang terdiri dari
Statistics, Products, Categories, Receipts) Clients, Suppliers, Users, dan
Logout. Pada Dashboard akan menampilkan statistics transactions.
Kemudian pada Transactions, pengguna dapat melihat statistic dan
memanipulasi data dari Sales, Expenses, Income, Transfers, dan Payments
seperti membuat baru, mengubah data, menghapus data, dan pada sales
dapat melihat detail dari setiap transaksi penjualan. Di Transactions ini
dilakukan ketika melakukan transaksi seperti ketika terdapat order barang
dari client yang dilakukan pada menu Sales, dan untuk Expenses ketika
melakukan pengeluaran seperti pembelian alat atau barang yang diluar dari
supplier, untuk income dilakukan ketika terdapat pemasukan seperti
pembayaran dari client, dan transfer dilakukan ketika perpindahan dana dari
nomor rekening 1 ke nomor rekening 2, dan untuk payments dilakukan
untuk membayar dari pembelian barang ke supplier. Selanjutnya terdapat
Inventory, pada inventory ini pengguna dapat melihat statistika persediaan
dan memanipulasi data dari products, categories, dan receipts seperti
membuat baru, mengubah data, menghapus data, dan melihat detail dari
setiap inventory. Pada menu categories dilakukan untuk membuat kategori
dari produk yang dibuat, seperti bahan mentah, bahan dalam proses, dan
bahan jadi. Menu products untuk menampung data barang yang tersedia
pada perusahaan. Menu Receipts merupakan menu untuk membuat pesanan
barang yang dibutuhkan ke supplier, barang tersebut berupa bahan mentah
dari produk yang akan dibuat. Menu clients merupakan menu yang berisikan
data-data dari pelanggan PT.Gamehouse Cyber, pada menu ini pengguna
dapat melakukan penambahan, mengubah, dan menghapus data pelanggan
tersebut. Menu Suppliers merupakan menu yang berisikan data-data dari
pemasok bahan mentah dari pemasok PT.Gamehouse Cyber, pengguna
dapat menambahkan, mengubah, dan menghapus data pemasok tersebut.
 31

Menu Payment Methods digunakan untuk membuat metode pembayaran

yang akan digunakan untuk melakukan pencatatan transaksi pengeluaran
dan pemasukan keuangan, pada menu ini pengguna dapat membuat,
mengubah, dan menghapus metode pembayaran. halaman yang terakhir
yaitu menu Users yang berguna untuk melakukan login ke dalam website
yang dapat melakukan manipulasi data pada aplikasi ini, pada menu ini
pengguna dapat mengubah, menambahkan dan menghapus data user.

3.4.2. Perancangan Use Case Diagram

Use case diagram digunakan untuk menggambarkan setiap menu
dan tombol yang dapat dilakukan oleh user dalam penggunaan aplikasi ini.
Sehingga use case diagram akan menjelaskan aksi yang dapat dilakukan
oleh user. Use case diagram dapat dilihat pada gambar 3.2 Rancangan Use
Case Diagram.
 32

Gambar 3.2. Rancangan Use Case Diagram

Pada perancangan Use Case Diagram, admin harus melakukan login

terlebih dahulu agar dapat masuk ke dalam Main menu, pada Main menu
 33

terdapat 16 menu lainnya yang dapat digunakan untuk mengelola data

transaksi, data inventory, data client, data supplier, dan data users.

3.4.3. Perancangan Activity Diagram

Gambar 3.3. Rancangan Activity Diagram

 34

Dalam activity diagram rancangan kali ini menggambarkan aktivitas

sistem aplikasi secara berurutan dan terperinci sesuai dengan tindakan
masing – masing. Dalam perancangan ini di mulai dari sistem memunculkan
halaman login lalu memasukkan email dan password pengguna, jika benar
maka sistem akan menampilkan halaman utama dan jika salah maka akan
tetap berada di halaman login. Pada halaman utama pengguna dapat
mengelola data dari 16 menu yang ada pada aplikasi diantaranya sales,
expenses, income, transfers, payments, products, categories, receipts,
clients, suppliers, payment methods, dan users.
 35

3.4.4. Perancangan Class Diagram

Gambar 3.4. Rancangan Class Diagram

Pada class diagram ini menggambarkan kelas-kelas yang ada pada
aplikasi ini yaitu users, suppliers, clients, payment_methods, categories,
products, receipts, transactions, sales, transfers, received_products,
sold_products. Class mempresentasikan suatu yang ditangani oleh sistem
dan setiap class berhubungan dengan class yang lain.
 36

3.5. Struktur Basis Data

Struktur basis data adalah cara data organisasi agar pemrosesan data
menjadi lebih efisien. Dalam sebuah website, mayoritas menggunakan basis
data untuk mempermudah penyimpanan data – data pada website itu sendiri.
Pada aplikasi ini menggunakan basis data MySQL untuk menghubungkan data
pada website ke dalam kolom atau field pada table – table di dalamnya yaitu
users, suppliers, clients, payment_methods, categories, products, receipts,
transactions, sales, transfers, received_products, sold_products.

3.5.1. Struktur Tabel users

Tabel users ini merupakan tabel yang menampung data seperti email dan
password yang digunakan untuk masuk ke dalam aplikasi. Pada tabel ini
terdapat 6 field yang dapat dilihat Tabel 3.1. users.

Tabel 3.1. users

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
name Varchar 30 Not null
email varchar 30 Not null
password varchar 30 Not null
created_at timestamp Null
updated_at timestamp Null

Field yang digunakan pada tabel users terdiri dari id yang digunakan untuk
memudahkan dalam pemanggilan record, name untuk memberikan nama pada
user yang akan menggunakan aplikasi, email digunakan untuk melakukan login
ke dalam aplikasi, password sebagai security yang digunakan untuk masuk ke
dalam aplikasi, created_at digunakan untuk mengetahui kapan user ini dibuat,
dan updated_at digunakan untuk mengetahui kapan terakhir kali user ini
melakukan perubahan data.
 37

3.5.2. Struktur Tabel suppliers

Tabel suppliers ini merupakan tabel yang menampung data dari supplier
seperti nama, company, address dan lain-lain. Pada tabel ini terdapat 11 field
yang dapat dilihat Tabel 3.2. Suppliers.

Tabel 3.2. Suppliers

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
name varchar 30 Not null
company varchar 30 Not null
address varchar 30 Not null
description Text Null
paymentinfo Text Null
email varchar 30 Null
phone varchar 30 Null
fax varchar 30 Null
created_at timestamp Null
updated_at timestamp Null

Field yang digunakan pada tabel suppliers terdiri dari id untuk

mempermudah pemanggilan record, name untuk memberikan nama supplier,
company untuk memberikan nama perusahaan supplier, addres untuk alamat
supplier, description untuk memberikan penjelasan terkait dengan supplier,
paymentinfo untuk memberikan penjelasan mengenai pembayaran apa yang
dilakukan dengan supplier, email, phone, fax untuk informasi komunikasi yang
digunakan supplier, created_at digunakan untuk mengetahui kapan supplier
dibuat, dan updated_at digunakan untuk mengetahui kapan dilakukan
pembaharuan data.
 38

3.5.3. Struktur Tabel clients

Tabel clients ini merupakan tabel yang menampung data dari clients seperti
nama, company, address dan lain-lain. Pada tabel ini terdapat 13 field yang
dapat dilihat Tabel 3.3. clients.

Tabel 3.3. clients

Field Tipe Data Panjang Keterangan

id bigint 20 Primary Key
name varchar 30 Not null
company varchar 30 Not null
address varchar 30 Not null
email varchar 30 Null
phone varchar 30 Null
fax varchar 30 Null
last_purchases timestamp Null
total_purchases int 10 Null
total_paid decimal 15,0 Null
created_at timestamp Null
updated_at timestamp Null
balance decimal 15,0 Null

Field yang digunakan pada tabel clients terdiri dari id untuk mempermudah
pemanggilan record, name untuk memberikan nama client, company untuk
memberikan nama perusahaan client, addres digunakan untuk menyimpan
alamat perusahaan, email, phone, fax untuk menyimpan data komunikasi yang
digunakan client, last_purchases digunakan untuk mengetahui terakhir
melakukan pembelian, total_purcahses digunakan untuk menyimpan total dari
pembelian, total_paid digunakan untuk menyimpan jumlah total yang dibayar
oleh client, created_at digunakan untuk mengetahui kapan client dibuat, dan
updated_at digunakan untuk mengetahui kapan dilakukan pembaharuan data,
 39

balance digunakan untuk mengetahui apakah pembayaran yang dilakukan client

ke perusahaan baik atau tidak.

3.5.4. Struktur Tabel payment_methods

Tabel payment_methods ini merupakan tabel yang menampung data seperti
nama dan deskripsi yang digunakan untuk metode pembayaran atau menyimpan
data akun bank ke dalam aplikasi. Pada tabel ini terdapat 5 field yang dapat
dilihat Tabel 3.4. Tabel payment_methods.

Tabel 3.4. Tabel payment_methods

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
name Varchar 30 Not null
description Text Null
created_at Timestamp Null
updated_at Timestamp Null

Field yang digunakan pada tabel payment_methods terdiri dari id untuk

mempermudah pemanggilan record, name untuk memberikan nama metode
pembayaran atau akun bank yang digunakan, description digunakan untuk
memberikan penjelasan dari akun bank tersebut, created_at digunakan untuk
mengetahui kapan akun bank dibuat, dan updated_at digunakan untuk
mengetahui kapan dilakukan pembaharuan data.

3.5.5. Struktur Tabel product_categories

Tabel product_categories ini merupakan tabel yang menampung data seperti
nama yang digunakan untuk memberikan nama kategori pada produk ke dalam
aplikasi. Pada tabel ini terdapat 4 field yang dapat dilihat Tabel 3.5. Tabel
product_categories.

Tabel 3.5. Tabel product_categories

 40

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
name Varchar 30
created_at Timestamp
updated_at Timestamp

Field yang digunakan pada tabel product_categories terdiri dari id untuk

mempermudah pemanggilan record, name untuk memberikan nama category,
created_at digunakan untuk mengetahui kapan category dibuat, dan updated_at
digunakan untuk mengetahui kapan dilakukan pembaharuan data.

3.5.6. Struktur Tabel products

Tabel products ini merupakan tabel yang menampung data seperti nama dan
deskripsi dan lainnya yang digunakan untuk menyimpan data produk ke dalam
aplikasi. Pada tabel ini terdapat 9 field yang dapat dilihat Tabel 3.6. Tabel
products.

Tabel 3.6. Tabel products

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
name Varchar 30 Not null
description Text Null
uom Varchar 30 Null
Product_category_id Bigint 20 Not null
Price Decimal 15,0 Not null
Stock Int 10 Not null
created_at Timestamp Null
updated_at Timestamp Null

Field yang digunakan pada tabel products terdiri dari id untuk

mempermudah pemanggilan record, name untuk memberikan nama products,
 41

description digunakan untuk memberikan penjelasan dari produk tersebut, uom

untuk satuan dari produk tersebut, product_category_id untuk memberikan
nama category yang digunakan oleh produk, price untuk memberikan harga
persatuan dari produk, stock digunakan untuk mengetahui jumlah yang ada dari
product tersebut, created_at digunakan untuk mengetahui kapan produk dibuat,
dan updated_at digunakan untuk mengetahui kapan dilakukan pembaharuan
data.

3.5.7. Struktur Tabel receipts

Tabel receipts ini merupakan tabel yang menampung data seperti nama dan
deskripsi dan lainnya yang digunakan untuk menyimpan data pemesanan
barang ke supplier ke dalam aplikasi. Pada tabel ini terdapat 9 field yang dapat
dilihat Tabel 3.7. Tabel receipts.

Tabel 3.7. Tabel receipts

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
title Varchar 30 Not null
Finalized_at Timestamp Null
Po_number Varchar 30 Not null
Supplier_id Bigint 20 Not null
User_id Bigint 20 Not null
Total_amount Decimal 15,0 Null
created_at Timestamp Null
updated_at Timestamp Null

Field yang digunakan pada tabel receipts terdiri dari id untuk mempermudah
pemanggilan record, title untuk memberikan judul dari pemesanan, finalized_at
digunakan untuk mengetahui kapan selesai pemesanan, po_number digunakan
untuk memberikan nomor pembelian pesanan, supplier_id untuk mengetahui
kepada supplier apa pembelian dilakukan, user_id digunakan untuk siapa yang
 42

melakukan pemesanan, total_amount digunakan untuk mengetahui jumlah

pembayaran yang dilakukan, created_at digunakan untuk mengetahui kapan
pemesanan dibuat, dan updated_at digunakan untuk mengetahui kapan
dilakukan pembaharuan data.

3.5.8. Struktur Tabel Transactions

Tabel transactions ini merupakan tabel yang menampung data transaksi
seperti pemesanan dari client, pembayaran, pengeluaran dana, pemasukan dana
ke dalam aplikasi. Pada tabel ini terdapat 14 field yang dapat dilihat Tabel 3. 7
Tabel receipts.

Tabel 3.8. Tabel transactions

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
type Varchar 30 Not null
Title Varchar 30 Not null
Name Varchar 30 Not null
Reference Varchar 30 Null
Client_id Bigint 20 Null
supplier_id Bigint 20 Null
sale_id Bigint 20 Null
transfer_id Bigint 20 Null
Payment_method_id Bigint 20 Null
user_id Bigint 20 Null
amount Decimal 15,0 Not null
created_at Timestamp Null
updated_at Timestamp Null

Field yang digunakan pada tabel transactions terdiri dari id untuk

mempermudah pemanggilan record, title untuk memberikan judul dari
transaksi, type digunakan transaksi apa yang dilakukan, name digunakan untuk
 43

memberikan nama siapa yang melakukan transaksi, client_id, supplier_id,

sale_id, transfer_id digunakan untuk mengetahui tipe transaksi dan kepada
siapa transaksi tersebut dilakukan, payment_method_id untuk mengetahui
transaksi tersebut dilakukan menggunakan akun bank yang mana, user_id untuk
mengetahui pengguna siapa yang melakukan transaksi, amount digunakan
untuk mengetahui berapa jumlah transaksi yang dilakukan, created_at
digunakan untuk mengetahui kapan dibuat, dan updated_at digunakan untuk
mengetahui kapan dilakukan pembaharuan data.

3.5.9. Struktur Tabel sales

Tabel sales ini merupakan tabel yang menampung data pembelian barang
dari PT.Gamehouse Cyber ke client dan data akan dimasukan ke dalam
aplikasi. Pada tabel ini terdapat 11 field yang dapat dilihat Tabel 3.9 Tabel sales.

Tabel 3.9. Tabel sales

Field Tipe Data Panjang Keterangan

id bigint 20 Primary Key
User_id bigint 20 Not null
Client_id bigint 20 Not null
Po_number varchar 30 Not null
vat int 11 Null
discount int 11 Null
Total_amount decimal 15,0 Null
Finalized_at timestamp Null
Invoice_date varchar 30 Not null
created_at timestamp Null
updated_at timestamp Null

Field yang digunakan pada tabel sales terdiri dari id untuk mempermudah
pemanggilan record, user_id digunakna untuk mengetahui pengguna siapa yang
melakukan penjualan, client_id untuk mengetahui siapa yang melakukan
 44

pembelian, po_number untuk mencatat berapa nomor dari purchase order, vat
digunakan untuk memberikan jumlah vat, discount digunakan untuk berapa
discount yang didapat, total_amount digunakan berapa jumlah pembayaran,
finalized_at digunakan untuk mengetahui kapan selesai penjualan, invoice_date
digunakan untuk kapan invoice ini dikirimkan, created_at digunakan untuk
mengetahui kapan dibuat, dan updated_at digunakan untuk mengetahui kapan
dilakukan pembaharuan data.

3.5.10. Struktur Tabel transfers

Tabel transfer ini merupakan tabel yang menampung data transfer dana dari
akun bank yang terdapat pada PT.Gamehouse Cyber dan data disimpan ke
dalam aplikasi. Pada tabel ini terdapat 9 field yang dapat dilihat Tabel 3.10.
Tabel transfers.

Tabel 3.10. Tabel transfers

Field Tipe Data Panjang Keterangan

id bigint 20 Primary Key
title varchar 30 Not null
Sender_method_id bigint 20 Not null
receiver_method_id bigint 20 Not null
Sended_amount decimal 15,0 Not null
received_amount decimal 15,0 Not null
reference varchar 30 Null
created_at timestamp Null
updated_at timestamp Null

Field yang digunakan pada tabel transfers terdiri dari id untuk

mempermudah pemanggilan record, title digunakan memberikan judul transfer,
sender_methode_id digunakan untuk mengetahui akun bank mana yang
mengirimkan dana, receiver_methode_id digunakan mengetahui akun bank
mana yang menerima dana, received_amount digunakan untuk mencatat jumlah
 45

dana yang dikirim, reference digunakan untuk memberikan penjelasan dari

transfer, created_at digunakan untuk mengetahui kapan dibuat, dan updated_at
digunakan untuk mengetahui kapan dilakukan pembaharuan data.

3.5.11. Struktur Tabel received_products

Tabel received_products ini merupakan tabel yang menampung data produk
yang diterima dari supplier dan data akan tersimpan ke dalam aplikasi. Pada
tabel ini terdapat 8 field yang dapat dilihat Tabel 3.11. Tabel received_products

Tabel 3.11. Tabel received_products

Field Tipe Data Panjang Keterangan

Id Bigint 20 Primary Key
Receipt_id Bigint 20 Not null
Product_id Bigint 20 Not null
Stock Int 11 Not null
price Decimal 15,0 Not null
Total_amount Decimal 15,0 Not null
created_at Timestamp Null
updated_at Timestamp Null

Field yang digunakan pada tabel received_products terdiri dari id untuk

mempermudah pemanggilan record, receipt_id digunakan untuk memanggil
data pesanan yang dilakukan, product_id digunakan untuk produk mana yang
diterima, stock digunakan untuk jumlah produk, price digunakan untuk harga
dari produk, total_amount digunakan untuk total harga yang akan dibayar,
created_at digunakan untuk mengetahui kapan dibuat, dan updated_at
digunakan untuk mengetahui kapan dilakukan pembaharuan data.

3.5.12. Struktur Tabel sold_products

Tabel sold_products ini merupakan tabel yang menampung data barang
yang telah terjual dan data akan tersimpan ke dalam aplikasi. Pada tabel ini
terdapat 8 field yang dapat dilihat Tabel 3.12. Tabel sold_products
 46

Tabel 3.12. Tabel sold_products

Field Tipe Data Panjang Keterangan

id Bigint 20 Primary Key
Sale_id Bigint 20 Not null
Product_id Bigint 20 Not null
Qty Int 11 Not null
Price Decimal 15,0 Not null
Total_amount Decimal 15,0 Not null
created_at Timestamp Null
updated_at Timestamp Null

Field yang digunakan pada tabel sold_products terdiri dari id untuk

mempermudah pemanggilan record, sale_id digunakan untuk mengetahui
penjualan mana yang melakukan, product_id digunakan untuk produk mana
yang diterima, stock digunakan untuk jumlah produk, price digunakan untuk
harga dari produk, total_amount digunakan untuk total harga yang akan dibayar,
created_at digunakan untuk mengetahui kapan dibuat, dan updated_at
digunakan untuk mengetahui kapan dilakukan pembaharuan data.

3.6. Rancangan Tampilan Antarmuka

Rancangan tampilan antarmuka yang digunakan sebagai gambaran tampilan
yang akan dibuat dapat memperhatikan struktur navigasi. Rancangan tampilan
antarmuka ini digunakan untuk mempermudah dalam pengimplementasian
pembuatan sebuah website.

Tampilan antarmuka ini juga dapat ditentukan dari use case yang digunakan
untuk menggambarkan apa saja yang bisa dilakukan oleh pengguna pada
aplikasi ini. Pada perancangan aplikasi ini hanya terdapat satu use case yaitu
admin. Berikut ini penjelasan dan gambar dari rancangan tampilan antarmuka.
 47

3.6.1. Rancangan Tampilan Antarmuka Login

Halaman login ini digunakan untuk memvalidasikan pengguna sebelum
bisa masuk ke dalam halaman menu utama dan sebagai keamanan dari
aplikasi ini. Halaman ini berisikan 2 text field untuk menampung email dan
password, serta 1 button login untuk masuk ke halaman main menu.

Login

Email

Password

login

Gambar 3.5. Tampilan Antarmuka Login

3.6.2. Rancangan Tampilan Antarmuka Main Menu

Halaman main menu ini digunakan untuk menampilkan menu menu lain
untuk mempermudah dalam melakukan perpindahan setiap halamanannya.
Pada tampilan ini terdapat 8 tombol yang dapat menuju ke halaman yang
diinginkan.
 48

Nama Halaman Profil user

Dashboard

Transactions

Inventory

Inventory
Tampilan Halaman Menu
Clients

Suppliers

Payment Methods

Users

Gambar 3.6. Tampilan Antarmuka Main Menu

3.6.3. Rancangan Tampilan Antarmuka Dashboard

Pada halaman ini dirancang untuk menampilkan data berbentuk grafik
dan tabel dari penjualan, pemasukan, pengeluaran dan transaksi terakhis
dari perusahaan. pada halaman ini terdapat 3 button untuk memudahkan
perpindahan halaman ke halaman yang dituju.
 49

Annual yield Product

Last Month Income Monthly Balance Expenditures Last

Month

Panding Sales New Sale Latest Transactions New Tran

Date Client Products Total Category Title Medium Total

Gambar 3.7. Tampilan Antarmuka Dashboard

3.6.4. Rancangan Tampilan Antarmuka Statistic Transactions

Halaman statistic transactions ini digunakan untuk melihat statistic dari
transaksi yang dilakukan perusahaan. Pada halaman ini terdapat 4 button
untuk perpindahan halaman menjadi lebih mudah dilakukan.
 50

Transaction Statistic View Transactions

period transaction income expenses payments Cash Total

Day

Week

month

Panding Balances New Sale Statistics By Methods New Tran

client purchase transaction balance method transaction Balance

Sales Statistic View Sales

Period Sales Client Stock Average Billed Finalize

Day
Week
Month

Gambar 3.8. Tampilan Antarmuka Statistic Transactions

3.6.5. Rancangan Tampilan Antarmuka Sales

Pada halaman sales digunakan untuk melakukan transaksi pembelian
client ke PT.Gamehouse Cyber. Pada halaman ini terdapat 3 tombol yang
berguna untuk melakukan penambahan transaksi, mengubah dan
menghapus transaksi sales.
 51

Sales Register Sale

No Date Client User Product Stock Total amount Status

1
X
2
X
3
X

Gambar 3.9. Tampilan Antarmuka Sales

Pada sales terdapat tombol register sale yang berfungsi untuk

menambahkan data penjualan. Data penjualan terdiri dari nama company,
tanggal, P/O Number (Purchases Order Number), VAT (value-added tax),
dan discount. Di halaman ini terdapat 5 teks input dan 2 tombol.
 52

Register Sale Back to list

Customer Information
Company

Date dd-mm-yyyy

P/O Number

Vat (%)

Discount(%)

continue

Gambar 3.10. Tampilan Antarmuka Add Sale

Setelah mengisi data dan melanjutkan dengan menekan tombol continue

akan menampilkan informasi penjualan ke klien. Halaman ini disebut
dengan show, di halaman show dapat melakukan menambahkan,
mengubah, dan menghapus produk. Pada halaman show terdapat 6 tombol
yang memiliki fungsi berbeda beda, fungsi invoice untuk membuat invoice,
edit sale untuk mengubah informasi pembelian klien, finalize sale
digunakan ketika penjualan telah selesai, dan add untuk menambahkan
produk yang dibeli oleh klien Berikut tampilan halaman show.
 53

Sale Summary Invoice Edit Sale Finalize Sale

P/O Date Company VAT Discount Products Total Total Status

Number Stock Amount

Purchase Order Add

Products : 0

Description Quantity Price Total

Gambar 3.11. Tampilan Antarmuka Show Sale

Pada tampilan add product terdapat 2 tombol dan 1 select form dan 3
input number. Tombol untuk mempermudah kembali ke menu sebelumnya
dan tombol continue untuk melanjutkan menyimpan data yang dipesan.
Berikut ini tampilan dari add product.
 54

Add Product Back to list

Description

Price per Unit

Stock

Total Amount

Continue

Gambar 3.12. Tampilan Antarmuka Add Product Sale

3.6.6. Rancangan Tampilan Antarmuka Expenses

Pada halaman Expenses digunakan untuk melakukan pencatatan
pengeluaran perusahaan, pada halaman ini terdapat 3 tombol yang memilki
kegunaan berbeda, yaitu register untuk menambahkan, edit untuk mengubah
data, dan delete untuk menghapus data. Berikut ini adalah tampilan
antarmuka Expenses.
 55

Expenses Register Expenses

Date Title Method Amount Reference

dd-mm-yy bayar bca Rp. 000.00 asdsa X

Gambar 3.13. Tampilan Antarmuka Expenses

Pada halaman Expenses terdapat tombol Register Expenses yang

berfungsi untuk menambahkan data mengeluaran dana perusahaan, data
yang dimasukan pada halaman exspenses terdiri dari name untuk
memberikan judul pengeluaran, payment method digunakan untuk akun
bank yang digunakan pada pengeluaran tersebut, amount jumlah dana yang
dikeluarkan dan reference untuk penjelasan pengeluaran dana. Berikut ini
halaman dari Register Expenses.
 56

Back to list
Register Expense
Expense Information
Title

Payment Method

Amount

Reference

save

Gambar 3.14. Tampilan Antarmuka Add Expenses

3.6.7. Rancangan Tampilan Antarmuka Income

Pada halaman Income digunakan untuk melakukan pencatatan
pemasukan dana perusahaan, pada halaman ini terdapat 3 tombol yang
memilki kegunaan berbeda, yaitu register untuk menambahkan, edit untuk
mengubah data, dan delete untuk menghapus data. Berikut ini adalah
tampilan antarmuka Income.

Income Register Income

Date Title Method Amount Reference

dd-mm-yy bayar bca Rp. 000.00 asdsa X

Gambar 3.15. Tampilan Antarmuka Income

 57

Pada halaman Income terdapat tombol Register Income yang berfungsi

untuk menambahkan data pemasukan dana perusahaan, data yang
dimasukan pada halaman Income terdiri dari title untuk memberikan judul
pemasukan, payment method digunakan untuk akun bank yang digunakan
pada pemasukan tersebut, amount jumlah dana pemasukan dan reference
untuk penjelasan pemasukan dana. Berikut ini halaman dari Register
Income

Back to list
Register Income
Income Information
Title

Payment Method

Amount

Reference

save

Gambar 3.16. Tampilan Antarmuka Add Income

3.6.8. Rancangan Tampilan Antarmuka Transfers

Pada halaman transfers digunakan untuk melakukan pencatatan
perpindahan dana perusahaan, pada halaman ini terdapat 3 tombol yang
memilki kegunaan berbeda, yaitu register untuk menambahkan, edit untuk
mengubah data, dan delete untuk menghapus data. Berikut ini adalah
tampilan antarmuka transfers.
 58

Transfers Register Transfer

Date Title Sender Receiver Reference Amount Amount

Method Method sent received
dd-mm-yy bayar bca mandiri asdsa X

Gambar 3.17. Tampilan Antarmuka Transfer

Pada halaman transfer terdapat tombol Register transfer yang berfungsi

untuk menambahkan data perpindahan dana perusahaan, data yang
dimasukan pada halaman transfer terdiri dari title untuk memberikan judul
transfer, sender method digunakan untuk akun bank yang digunakan pada
transfer tersebut, receiver method digunakan untuk akun bank yang
digunakan menerima transfer tersebut amount sent jumlah dana dikirim,
amount received jumlah dana yang diterima dan reference untuk penjelasan
transfer dana. Berikut ini halaman dari Register Transfer
 59

Back to list

Register Transfer
Transfer Information
Title

Sender Method

Received Method

Amount Sent

Amount Received

Reference

save

Gambar 3.18. Tampilan Antarmuka Add Transfer

3.6.9. Rancangan Tampilan Antarmuka Payments

Pada halaman Payments digunakan untuk melakukan pencatatan
pembayaran dana perusahaan, pada halaman ini terdapat 3 tombol yang
memilki kegunaan berbeda, yaitu register untuk menambahkan, edit untuk
mengubah data, dan delete untuk menghapus data. Berikut ini adalah
tampilan antarmuka payments.
 60

Payments Register Transfer

Date Supplier Title Method Amount Reference

dd-mm-yy ahmad bayar bca Rp.0 X

Gambar 3.19. Tampilan Antarmuka Payments

Pada halaman payments terdapat tombol Register payment yang

berfungsi untuk menambahkan data pengeluaran dana perusahaan, data
yang dimasukan pada halaman payment terdiri dari title untuk memberikan
judul payment, supplier yaitu nama pembayaran ke supplier, date tanggal
dilakukannya pembayaran, method untuk mengetahui akun bank yang
digunakan, amount untuk jumlah yang dibayarkan,dan reference untuk
penjelasan pembayaran dana. Berikut ini halaman dari Register payment
 61

New Payment Back to list

Payment Information
Title

Supplier

Payment Method

Amount

Reference

save

Gambar 3.20. Tampilan Antarmuka Add Payment

3.6.10. Rancangan Tampilan Antarmuka Statistics Inventory

Pada halaman Statistic Inventory akan menampilkan informasi
mengenai quantity dari setiap produk, pembelian produk dari klien, dan
harga rata rata per 1 produk. Berikut ini adalah tampilan dari Statistic
Inventory.
 62

Statistics by Quantity (TOP 15)

ID Category Item No Desciption Stock Annual Sales Average Annual Income

Statistics by Avarage Price (Top 15)

Statistics by Income (Top 15)
ID Category Description Sold Averag
ID Category Description Sold Income
e price

Gambar 3.21. Tampilan Antarmuka Statistic Inventory

3.6.11. Rancangan Tampilan Antarmuka Categories

Pada halaman Categories digunakan untuk melakukan pencatatan
kategori barang perusahaan, pada halaman ini terdapat 3 tombol yang
memilki kegunaan berbeda, yaitu new category untuk menambahkan, edit
untuk mengubah data, dan delete untuk menghapus data. Berikut ini adalah
tampilan antarmuka Categories.

Categories New Category

Name Products Total Stock Average price of

product
Raw 11 1.123 Rp.0 X

Gambar 3.22. Tampilan Antarmuka Categories

 63

Pada halaman Categories terdapat tombol new category yang berfungsi

untuk menambahkan data kategori perusahaan, data yang dimasukan pada
halaman categori terdiri dari nama untuk memberikan nama kategori.
Berikut ini halaman dari New Category.

Register Category Back to list

Category Information
Name

save

Gambar 3.23. Tampilan Antarmuka Add Category

3.6.12. Rancangan Tampilan Antarmuka Products

Pada halaman Products digunakan untuk melakukan pencatatan produk
atau barang yang ada pada perusahaan, pada halaman ini terdapat 3 tombol
yang memilki kegunaan berbeda, yaitu new product untuk menambahkan,
edit untuk mengubah data, dan delete untuk menghapus data. Berikut ini
adalah tampilan antarmuka Products.
 64

Products New Product

Category Products UOM Total Base Stock Total

Stock Price sold
Raw Part 1ss2 pcs 1.123 Rp.0 1 2 X

Gambar 3.24. Tampilan Antarmuka Products

Pada halaman Products terdapat tombol new product yang berfungsi

untuk menambahkan data produk perusahaan, data yang dimasukan pada
halaman produk terdiri dari nama untuk memberikan nama produk.
Category yang digunakan pada produk, item no yaitu nomor item dari
produk tersebut, stock untuk jumlah quantity dari produk, price untuk harga
persatuan dari produk tersebut, dan uom satuan yang dipakai pada produk
Berikut ini halaman dari New Category.
 65

Back to list
Register Category
Category Information
Description

Category

Item No

Stock Price UOM

save

Gambar 3.25. Tampilan Antarmuka Add Product

3.6.13. Rancangan Tampilan Antarmuka Receipts

Pada halaman Receipts digunakan untuk melakukan pemesanan barang
yang ada pada perusahaan ke supplier, pada halaman ini terdapat 3 tombol
yang memilki kegunaan berbeda, yaitu new register untuk menambahkan,
edit untuk mengubah data, dan delete untuk menghapus data. Berikut ini
adalah tampilan antarmuka Receipts.

Receipts New Receipt

Date Title supplier Product Stock Status

Gambar 3.26. Tampilan Antarmuka Receipts

 66

Pada halaman Receipts terdapat tombol new receipt yang berfungsi

untuk menambahkan data pemesanan barang perusahaan, data yang
dimasukan pada halaman receipt terdiri dari title untuk memberikan judul
dari pesanan, po number yaitu nomor pembelian pesanan dan supplier yang
dituju. Berikut ini halaman dari New Receipt.

New Receipt Back to list

Receipt Information
Title

PO Number

Supplier

Continue

Gambar 3.27. Tampilan Antarmuka Add Receipts

Setelah mengisi data dan melanjutkan dengan menekan tombol continue

akan menampilkan informasi pemesanan. Halaman ini disebut dengan
show, di halaman show dapat melakukan menambahkan, mengubah, dan
menghapus produk. Pada halaman show terdapat 4 tombol yang memiliki
fungsi berbeda beda, fungsi finalize receipt digunakan ketika pemesanan
telah selesai, dan add untuk menambahkan produk yang dipesan, hapus
untuk menghapus produk, edit produk untuk mengubah data produk yang
dipesan. Berikut tampilan halaman show.
 67

Receipt Summary Finalize Receipt

ID Date Title User Supplier Products Stock Total Status

Cost

Products : 0 Add

Category Description Stock Price Total

Gambar 3.28. Tampilan Antarmuka Show Receipt

Pada tampilan add product terdapat 2 tombol dan 1 select form dan 3
input number. Tombol untuk mempermudah kembali ke menu sebelumnya
dan tombol continue untuk melanjutkan menyimpan data yang dipesan.
Berikut ini tampilan dari add product.
 68

Add Product Back to list

Description

Price per Unit

Stock

Total Amount

Continue

Gambar 3.29. Tampilan Antarmuka Add Product Receipt

3.6.14. Rancangan Tampilan Antarmuka Clients

Pada halaman Clients digunakan untuk menyimpan data client. Pada
halaman ini terdapat 4 tombol. Berikut ini adalah tampilan antarmuka
Clients.

Clients Add Client

Company Email/Telephone Balance Purchases Total Last

Payment Purchase

Gambar 3.30. Tampilan Antarmuka Clients

 69

Pada halaman Clients terdapat tombol Add Client yang berfungsi untuk
menambahkan data pelanggan perusahaan, data yang dimasukan pada
halaman client terdiri dari name untuk memberikan nama pelanggan,
company untuk nama perusahaan, address untuk alamat dari perusahaan,
email, telephone dan fax untuk data yang dapat dihubungi ke perusahaan
pelanggan. Berikut ini halaman dari Add Client.

Register Client
Back to list
Client Information

Name

Company

Address

Email

Telephone

Fax

Save

Gambar 3.31. Tampilan Antarmuka Add Client

3.6.15. Rancangan Tampilan Antarmuka Suppliers

Pada halaman Suppliers digunakan untuk menyimpan data supplier atau
pemasok. Pada halaman ini terdapat 4 tombol. Berikut ini adalah tampilan
antarmuka Suppliers.
 70

Supplier Add Supplier

Company/name Description Email Telephone Payment’s Total

Made Payment

Gambar 3.32. Tampilan Antarmuka Supplier

Pada halaman Suppliers terdapat tombol Add Supplier yang berfungsi

untuk menambahkan data supplier/pemasok perusahaan, data yang
dimasukan pada halaman supplier terdiri dari name untuk memberikan
nama pemasok, company untuk nama perusahaan, address untuk alamat dari
perusahaan, email, telephone dan fax untuk data yang dapat dihubungi ke
perusahaan pemasok. Berikut ini halaman dari Add Supplier.
 71

Back to list
Register Supplier
Supplier Information

Name

Company

Address

Email

Telephone

Fax

Payment Information

Save

Gambar 3.33. Tampilan Antarmuka Add Supplier

3.6.16. Rancangan Tampilan Antarmuka Payment Methods

Pada halaman Payment Methods digunakan untuk menyimpan metode
pembayaran atau akun bank yang digunakan pada perusahaan. Pada
halaman ini terdapat 4 tombol. Berikut ini adalah tampilan antarmuka
Payment Methods.
 72

Payment Methods New Method

Method Description Monrhly Transactions Monthly Balance

Gambar 3.34. Tampilan Antarmuka Payment Methods

Pada halaman Payment Methods terdapat tombol new method yang

berfungsi untuk menambahkan metode pembayaran atau akun bank yang
digunakan pada perusahaan, data yang dimasukan pada halaman Payment
Methods terdiri dari name untuk memberikan nama dari akun bank,
description yaitu penjelasan mengenai metode pembayaran tersebut atau
akun bank. Berikut ini halaman dari New Method.

Back to list
New Method
Method Information
Name

Description

Continue

Gambar 3.35. Tampilan Antarmuka Add Method

 73

3.6.17. Rancangan Tampilan Antarmuka Users

Pada halaman Users digunakan untuk menyimpan data pengguna untuk
dapat mengakses dan memanipulasi data pada aplikasi ini. Pada halaman ini
terdapat 3 tombol. Berikut ini adalah tampilan antarmuka Users.

Users Add User

Name Email Creation Date

Gambar 3.36. Tampilan Antarmuka Users

Pada halaman Users terdapat tombol Add User yang berfungsi untuk
menambahkan pengguna aplikasi yang dapat memanipulasi data aplikasi
ini. Data yang dimasukan terdiri dari nama, email, password dan confirm
password Berikut ini halaman dari New Method.
 74

Back to list

New User
User Information
Name

Email

Password

Confirm Passwod

Save

Gambar 3.37. Tampilan Antarmuka Add User

 BAB IV

IMPLEMENTASI DAN UJI COBA

4.1. Implementasi
Tahap implementasi merupakan tahap untuk menerapkan rancangan yang
sudah dirancang sebelumnya. Dengan rancangan yang sudah dibuat, akan
diubah menjadi sebuah aplikasi website yang akan digunakan oleh
PT.Gamehouse Cyber yaitu aplikasi manajemen inventory dan pencatatan
transaksi keungan.

4.2. Implementasi Database

Pada tahap ini akan dibahas mengenai tahapan – tahapan dari pembuatan
database, dari mengaktifkan database hingga database siap digunakan untuk
menyimpan data yang sudah dirancang sebelumnya

4.2.1. XAMPP
Tahap ini merupakan tahap pertama untuk melakukan pembuatan database,
yaitu dengan cara mengaktifkan Apache sebagai server dan MySQL sebagai
database pada XAMPP.

Gambar 4.1. XAMPP Control Panel

75
 76

Pada proses pembuatan sebuah aplikasi website ini diperlukan apache

sebagai webserver untuk mengaktifkan phpMyAdmin sebagai penunjang dari
database mysql dari website yang dibuat.

4.2.2. Pembuatan Migration Database

Pada tahapan ini akan membangun struktur database pada aplikasi berbasis
website ini dengan menggunakan migration dari framework Laravel. Pada
framework Laravel disediakan perintah yang berfungsi untuk melakukan
pembuatan database sebelum database tersebut digunakan. Dengan
menggunakan perintah migration maka akan dilakukan struktur yang sistematik
dalam pembuatan database di framework Laravel ini.

Perintah pembuatan database pada framework Laravel yaitu “php artisan

make:migration laravel-inventory -create=users”. Perintah tersebut berfungsi
untuk membuat dan dapat digunakan untuk migrasi database dari artisan ke
MySQL atau yang digunakan akan tampil pada phpMyAdmin. Setelah
membuat nama tabel yaitu users maka akan dilanjutkan dengan mengisi field
yang dibutuhkan pada tabel tersebut. Berikut ini merupakan contoh dari
penulisan kode pada pengisian field tabel user.

Schema::create('users', function (Blueprint $table) {

$table->bigIncrements('id');
$table->string('name');
$table->string('email')->unique();
$table->string('password');
$table->timestamps();
});

Pada penulisan kode diatas dapat menjelaskan users sebagai nama tabel, id,
name, email. password, dan timestamps sebagai field yang sudah diberikan tipe
data masing – masing yang terdapat pada sebelum dituliskan nama field
tersebut.
 77

Setelah penulisan kode pada pembuatan tabel dilakukan, maka dilanjutkan

pada tahap migration dari tabel yang sudah dibuat tadi. Sebelum melakukan
migration dapat dilakukannya konfigurasi file example.env pada framework
Laravel dengan memberikan nama database yang akan digunakan yaitu
db_inventory, kemudian merubah nama file example.env menjadi file .env.

Gambar 4.2. Konfigurasi Database

Konfigurasi diatas digunakan untuk melakukan migrasi database yang
digunakan agar dapat disambungkan dengan database MySQL. Setelah
melakukan pembuatan nama database yang sama dengan DB_Database pada
phpMyAdmin maka dilanjutkan dengan melakukan migrasi dengan menulis
perintah pada terminal “php artisan migrate”. Maka setalah melakukan
penulisan perintah tersebut akan secara otomatis data database yang dituliskan
di framework Laravel akan pindah ke dalam MySQL phpMyAdmin.

Gambar 4.3. Database Migrate

 78

4.3. Implementasi Website

Dalam tahap implementasi website akan dijelaskan langkah-langkah
pembuatan website dari awal menginstall framework laravel hingga tampilan
website yang sudah dirancang sebelumnya.

1. Sebelum melakukan penginsatalan framework laravel, harus

mengunduh composer terlebih dahulu pada halaman website
getcomposer.org.

Gambar 4.4. Composer Install

2. Selanjutnya, masuk ke terminal atau Command Prompt pada file yang
akan digunakan untuk menyimpan file laravel yang akan disimpan,
kemudian ketikan perintah pada terminal yaitu “composer create-project
laravel/laravel laravel-inventory”.

Gambar 4.5. Membuat Folder Laravel

 79

3. Untuk memastikan framework Laravel yang digunakan telah berhasil

diinstall dan sudah siap digunakan, gunakan kembali terminal dan
arahkan ke folder yang tadi dibuat, lalu masukan perintah “php artisan
serve”.

Gambar 4.6. Menjalankan Folder Laravel

4. Langkah selanjutnya yaitu membuka link yang telah disediakan oleh
framework Laravel. Ketik pada browser yang digunakan dengan
127.0.0.1:8000. Maka akan menampilkan tampilan awal dari homepage
yang digunakan pada framework Laravel.

Gambar 4.7. Tampilan Awal Laravel

4.4. Pembuatan Halaman

Pada tahap pembuatan halaman ini berisikan HTML dan CSS yang akan
ditampilkan pada halaman antarmuka dengan pengguna dari rancangan yang
sudah dibuat sebelumnya. Halaman ini juga dapat disebut dengan view pada
framework Laravel, dan view ini akan menampung data yang diterima dan
diolah oleh Controller.
 80

4.4.1. Halaman Login

Halaman login merupakan halaman mevalidasikan pengguna sebelum dapat
menggunakan website. Pada website harus menggunakan halaman login karena
untuk keamanan data yang ada pada perusahaan, dan hanya orang tertentu yang
dapat menggunakan website tersebut seperti admin. Setelah dilakukannya
validasi maka pengguna dapat melakukan pengolahan data website, seperti
menambahkan, menghapus dan mengubah data. Berikut di bawah ini gambar 4.
8 Halaman Login dan script yang digunakan:

Gambar 4. 8 Halaman Login

 81

<form class="form" method="post" action="{{ route('login') }}">

@csrf
<div class="card card-login card-white">
<div class="card-header">
<img src="{{ asset('assets') }}/img/card-primary.png" alt="">
<h1 class="card-title">Login</h1>
</div> <div class="card-body">
<div class="input-group{{ $errors->has('email') ? ' has-danger' : '' }}">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="tim-icons icon-email-85"></i>
</div> </div>
<input type="email" name="email" class="form-control{{ $errors->has('email') ? ' is-invalid'
: '' }}" placeholder="Email">
@include('alerts.feedback', ['field' => 'email'])
</div>
<div class="input-group{{ $errors->has('password') ? ' has-danger' : '' }}">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="tim-icons icon-lock-circle"></i>
</div> </div>
<input type="password" placeholder="Password" name="password" class="form-control{{
$errors->has('password') ? ' is-invalid' : '' }}">
@include('alerts.feedback', ['field' => 'password'])
</div> </div>
<div class="card-footer">
<button type="submit" href="" class="btn btn-primary btn-lg btn-block mb-3">Log
in</button>
</div> </div>
</form>

4.4.2. Halaman Menu Utama

Pada halaman menu utama terdapat navigasi bar dan side bar. Pada side bar
digunakan untuk melihat menu menu atau halaman yang dapat digunakan user
seperti dashboard, transaction, inventory, client, suppliers dan lainnya.
 82

Gambar 4. 9 Halaman Utama Sidebar

<div class="sidebar">
<div class="sidebar-wrapper">
<ul class="nav">
<li @if ($pageSlug=='dashboard' ) class="active " @endif>
<a href="{{ route('home') }}">
<i class="tim-icons icon-chart-bar-32"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a data-toggle="collapse" href="#transactions" {{ $section == 'transactions' ? 'aria-
expanded=true' : '' }}>
<i class="tim-icons icon-bank"></i>
<span class="nav-link-text">Transactions</span>
<b class="caret mt-1"></b>
</a>
 83

Pada navigasi bar digunakan untuk mengetahui nama halaman yang sedang
digunakan dan digunakan untuk logout dari pengguna website. Berikut ini
adalah gambar dan script yang digunakan.

Gambar 4. 10 Halaman Utama Navbar

<nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-toggle d-inline">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="#">{{ $page ?? ('Dashboard') }}</a>

4.4.3. Halaman Dashboard

Pada Halaman akan menampilkan bagan statistik perusahaan, mulai dari
penjualan produk tahunan, pemasukan bulanan, saldo atau dana yang dimiliki
perusahaan, pengeluaran dana perusahaan, tabel penjualan tertunda dan tabel
transaksi terakhir perusahaan. Dibagian dashboard juga terdapat tombol yang
memudahkan untuk melakukan pembuatan penjualan baru dan transaksi baru.
Berikut ini merupakan gambar dan script yang digunakan.
 84

Gambar 4. 11 Halaman Dashboard

@extends('layouts.app', ['pageSlug' => 'dashboard', 'page' => 'Dashboard', 'section' => ''])

@section('content')
<div class="row">
<div class="col-12">
<div class="card card-chart">
<div class="card-header ">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="card-category">Total sales</h5>
<h2 class="card-title">Annual yield</h2>
</div>

4.4.4. Halaman Transaction Statistics

Pada halaman ini akan menampilkan tabel statistik transaksi mulai dari
harian, hari sebelumnya, mingguan, bulanan, 3 bulan dan tahunan. Pada
halaman ini terdapat tabel pembayaran tertunda oleh client, tabel statistik
metode pembayaran atau akun bank, dan juga terdapat tabel statistic penjualan.
Berikut ini gambar dan script yang digunakan.
 85

Gambar 4. 12 Halaman Transaction Statistics

@extends('layouts.app', ['pageSlug' => 'tstats', 'page' => 'Statistics', 'section' => 'transactions'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Transaction Statistics</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.index') }}" class="btn btn-sm btn-primary">
View Transactions
</a>
</div>
</div>

4.4.5. Halaman Sales

Halaman Sales digunakan untuk melakukan transaksi penjualan barang ke
client. Pada tampilan utama akan menampilkan tabel dari transaksi penjualan
dan tombol untuk buat baru penjualan, edit penjualan dan delete penjualan.
 86

Gambar 4. 13 Halaman Sales

@extends('layouts.app', ['page' => 'Sales', 'pageSlug' => 'sales', 'section' => 'transactions'])

@section('content')
@include('alerts.success')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Sales</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('sales.create') }}" class="btn btn-sm btn-primary">Register Sale</a>
</div>
</div>
</div>
 87

Tampilan buat penjualan akan meminta data nama perusahaan client, tanggal
dibuatnya, nomor pembelian, Value Added Tax (VAT), dan diskon yang diberikan
ke client. Berikut ini Gambar 4. 13 Halaman Sales dan script yang digunakan.

Gambar 4. 14 Halaman Register Sale

@extends('layouts.app', ['page' => 'Register Sale', 'pageSlug' => 'sales-create', 'section' => 'transactions'])

@section('content')
<div class="container-fluid mt--7">
@include('alerts.error')
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Register Sale</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('sales.index') }}" class="btn btn-sm btn-primary">Back to list</a>
</div>
</di

Setelah membuat penjualan akan menampilkan halaman show yaitu detail dari
penjualan. Di dalam halaman detail terdapat tabel yang menampilkan data
penjualan dan tabel produk yang dibeli oleh client, dan terdapat tombol add produk,
 88

delete produk, dan edit produk, membuat invoice, edit data client, dan tombol
menyelesaikan penjualan.

Gambar 4. 15 Halaman Sale Detail

@extends('layouts.app', ['page' => 'Manage Sale', 'pageSlug' => 'sales', 'section' => 'transactions'])

@section('content')
@include('alerts.success')
@include('alerts.error')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h3 class="card-title">Sale Summary</h4>
</div>
 89

Halaman Add Product digunakan untuk menambahkan barang yang akan dibeli
oleh client. Halaman ini user diminta memasukan data produk, harga dan jumlah
produk yang akan dibeli.

Gambar 4. 16 Halaman Add Product Sale

@extends('layouts.app', ['page' => 'Add Product', 'pageSlug' => 'sales', 'section' => 'transactions'])

@section('content')
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Add Product</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('sales.show', [$sale->id]) }}" class="btn btn-sm btn-primary">Back to
List</a>
</div>
</div>
</div>

4.4.6. Halaman Expenses

Pada halaman expenses akan menampilkan tabel dari data pengeluaran dana
yang dilakukan oleh perusahaan dan terdapat tombol tambah, edit dan delete
 90

dari transaksi tersebut. Berikut ini tampilan Gambar 4. 17 Halaman Expenses

dan script dari halaman expenses.

Gambar 4. 17 Halaman Expenses

@extends('layouts.app', ['page' => 'Expenses', 'pageSlug' => 'expenses', 'section' => 'transactions'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Expenses</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.create', ['type' => 'expense']) }}" class="btn btn-sm btn-
primary">Register Expense</a>
</div>
</div>
</div>
<div class="card-body">
 91

Halaman tambah expense akan meminta pengguna untuk memasukan data dari
judul, metode pembayaran, jumlah dana yang dikeluarkan, dan reference dari
pembayaran tersebut.

Gambar 4. 18 Halaman Register Expenses

@extends('layouts.app', ['page' => 'New Expense', 'pageSlug' => 'expenses', 'section' => 'transactions'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Expense</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.type', ['type' => 'expense']) }}" class="btn btn-sm btn-
primary">Back to List</a>
</div>
</div>
</div>

4.4.7. Halaman Income

Pada halaman ini menampilkan tabel dari data pemasukan dana yang
dilakukan oleh perusahaan dan terdapat tombol tambah, edit dan delete dari
 92

transaksi tersebut. Berikut ini tampilan Gambar 4.19 Halaman Incomedan script
dari halaman income.

Gambar 4. 19 Halaman Income

@extends('layouts.app', ['page' => 'Income', 'pageSlug' => 'incomes', 'section' => 'transactions'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Income</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.create', ['type' => 'income']) }}" class="btn btn-sm btn-
primary">Register Income</a>
</div>
</div>
</div>
 93

Pada halaman tambah income akan meminta pengguna untuk memasukan

data dari judul, metode pembayaran, jumlah dana yang dimasukan, dan reference
dari pembayaran tersebut.

Gambar 4. 20 Register Income

@extends('layouts.app', ['page' => 'New Income', 'pageSlug' => 'incomes', 'section' => 'transactions'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Income</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.type', ['type' => 'income']) }}" class="btn btn-sm btn-
primary">Back to List</a>
</div>
</d

4.4.8. Halaman Transfers

Halaman transfer ini menampilkan tabel dari data transfer dana dari akun
bank ke akun bank lain milik perusahaan. Pada halaman ini terdapat 3 tombol,
 94

yaitu register income untuk menambahkan data transfer, edit untuk ubah data,
dan delete. Berikut ini tampilan gambar dan script.

Gambar 4. 21 Halaman Transfers

@extends('layouts.app', ['page' => 'Transfers', 'pageSlug' => 'transfers', 'section' => 'transactions'])

@section('content')
@include('alerts.success')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Transfers</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('transfer.create') }}" class="btn btn-sm btn-primary">
Register Transfer
</a>
</div>
</div>
</div>
 95

Pada Halaman register akan meminta data yang diperlukan yaitu judul, akun
bank, jumlah nominal, akun bank tujuan, dan reference.

Gambar 4. 22 Register Transfer

@extends('layouts.app', ['page' => 'Register Transfer', 'pageSlug' => 'transfers', 'section' => 'transactions'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Register Transfer</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('transfer.index') }}" class="btn btn-sm btn-primary">
Back to List
</a>
</div>
</div>
</div>

4.4.9. Halaman Payments

Pada halaman payments akan menampilkan tabel dari data pembayaran
yang dilakukan perusahaan untuk membayarkan ke supplier. Pada halaman ini
terdapat tombol new payment untuk menambahkan data pembayaran, edit untuk
 96

mengubah, dan delete. Berikut ini adalah tampilan gambar dan script dari
halaman payments.

Gambar 4. 23 Halaman Payments

@extends('layouts.app', ['page' => 'Payments', 'pageSlug' => 'payments', 'section' => 'transactions'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Payments</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.create', ['type' => 'payment']) }}" class="btn btn-sm btn-
primary">New Payment</a>
</div>
</div>
</div>

Halaman tambah payment user diminta untuk memasukan judul pembayaran,

tujuan pembayaran, jumlah nominal dan keterangan pembayaran.
 97

Gambar 4. 24 Halaman New Payment

@extends('layouts.app', ['page' => 'New Payment', 'pageSlug' => 'payments', 'section' => 'transactions'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Payment</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('transactions.type', ['type' => 'payment']) }}" class="btn btn-sm btn-
primary">Back to List</a>
</div>
</div>
</div>

4.4.10. Halaman Inventory Statistics

Halaman inventory statistics akan menampilkan beberapa informasi berupa
tabel, yaitu Statistics by Quantity (top 15) akan menampilkan produk
berdasarkan jumlah stok yang tersedia, Statistics by Income akan menampilkan
produk berdasarkan pemasukan yang didapat, Statistics by Average Price yaitu
berdasarkan harga rata – rata dari produk yang ada. Berikut ini Gambar 4. 25
Halaman Statistic Inventory dan script.
 98

Gambar 4. 25 Halaman Inventory Statistic

@extends('layouts.app', ['page' => 'Inventory Statistics', 'pageSlug' => 'istats', 'section' => 'inventory'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Statistics by Quantity (TOP 15)</h4>
</div>
<div class="card-body">
<table class="table">
<thead>

4.4.11. Halaman Categories

Halaman Categories merupakan halaman untuk membedakan dari suatu
produk dengan kategori – kategori tertentu. Pada halaman ini dapat dilakukan
menambahkan, edit, delete dan detail dari suatu kategori yang ada. Berikut ini
tampilan dan script yang digunakan dalam pembuatan halaman Categories.
 99

Gambar 4. 26 Halaman Categories

@extends('layouts.app', ['page' => 'List of Categories', 'pageSlug' => 'categories', 'section' => 'inventory'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Categories</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('categories.create') }}" class="btn btn-sm btn-primary">New Category</a>
</div>
</div>
</div>
<div class="card-body">
@include('alerts.success')

<div class="">
<table class="table tablesorter " id="">
<thead class=" text-primary">
<th scope="col">Name</th>
<th scope="col">products</th>
<th scope="col">Total Stock</th>
 100

Pada halaman new category user diminta untuk memasukan nama kategori baru
yang akan digunakan untuk memberikan nama kategori pada produk.

Gambar 4. 27 Halaman New Category

@extends('layouts.app', ['page' => 'New Category', 'pageSlug' => 'categories', 'section' => 'inventory'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Category</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('categories.index') }}" class="btn btn-sm btn-primary">Back to List</a>
</div>
</div>
 101

Halaman show atau detail categori akan menampilkan informasi detail

mengenai kategori yang dituju, halaman ini menampilkan informasi produk apa saja
yang ada didalam kategori, jumlah produk dan harga produk.

Gambar 4. 28 Halaman Show Category

@extends('layouts.app', ['page' => 'Category Information', 'pageSlug' => 'categories', 'section' =>
'inventory'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Category Information</h4>
</div>
<div class="card-body">
<table class="table">
<thead>
<th>ID</th>
<th>Description</th>
<th>products</th>
<th>Stocks</th>
<th>Average Price</th>

4.4.12. Halaman Products

Pada halaman products akan menampilkan tabel dari produk yang dimiliki
oleh perusahaan, pada tabel tersebut pengguna dapat mengubah, membuat, dan
 102

menghapus data dari produk yang ada. Berikut ini adalah tampilan gambar dan
script yang digunakan untuk membuat halaman products.

Gambar 4. 29 Halaman Products

@extends('layouts.app', ['page' => 'List of Products', 'pageSlug' => 'products', 'section' => 'inventory'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Products</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('products.create') }}" class="btn btn-sm btn-primary">New product</a>
</div>
</div>
</div>
<div class="card-body">
@include('alerts.success')

Pada bagian buat produk akan diminta nama produk, kategori yang digunakan,
jumlah produk, harga produk dan satuan produk yang digunakan. Pada halaman ini
terdapat button save untuk menyimpan data ke dalam database
 103

Gambar 4. 30 Halaman New Product

@extends('layouts.app', ['page' => 'New Product', 'pageSlug' => 'products', 'section' => 'inventory'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Product</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('products.index') }}" class="btn btn-sm btn-primary">Back to List</a>
</div>
</div>
</div>
<div class="card-body">
<form method="post" action="{{ route('products.store') }}" autocomplete="off">
@csrf

Pada halaman products terdapat detail untuk melihat lebih lanjut informasi yang
ada pada produk tersebut seperti terakhir penjualan, terakhir pemesanan dan
informasi mengenail jumlah dan harga produk yang telah terjual dan dipesan.
 104

Gambar 4. 31 Halaman Show Product

@extends('layouts.app', ['page' => 'Product Information', 'pageSlug' => 'products', 'section' => 'inventory'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Product Information</h4>
</div>
<div class="card-body">
<table class="table">
<thead>
<th>ID</th>
<th>Category</th>
<th>Item No</th>
<th>Description</th>
<th>UOM</th>
<th>Stock</th>
<th>Base price</th>
<th>Average Price</th>
<th>Total sales</th>
<th>Income Produced</th>
</thead>

4.4.13. Halaman Receipts

Pada halaman ini digunakan untuk membuat pesanan produk atau bahan
yang dibutuhkan perusahaan ke supplier/pemasok. Maka pada tampilan awal
akan menampilkan tabel data pemesanan yang terdapat tombol untuk membuat,
 105

edit, dan delete. Berikut ini adalah tampilan gambar dan juga script yang
digunakan.

Gambar 4. 32 Halaman Receipts

@extends('layouts.app', ['page' => 'Receipts', 'pageSlug' => 'receipts', 'section' => 'inventory'])

@section('content')
@include('alerts.success')
<div class="row">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Receipts</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('receipts.create') }}" class="btn btn-sm btn-primary">New Receipt</a>
</div>
</div>
</div>

Pada halaman membuat pesanan akan diminta nomor pemesanan pembelian,

judul dan supplier yang dituju dan terdapat tombol save yang akan menyimpan dan
menampilkan halaman detail dari pesanan.
 106

Gambar 4. 33 Halaman New Receipt

@extends('layouts.app', ['page' => 'New Receipt', 'pageSlug' => 'receipts', 'section' => 'inventory'])

@section('content')
<div class="container-fluid mt--7">
@include('alerts.error')
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Receipt</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('receipts.index') }}" class="btn btn-sm btn-primary">Back to List</a>
</div>
</div>

Pada halaman detail yang terdiri dari tabel data pemesanan dan tabel produk
yang ingin dipesan. Pada bagian tabel produk, pengguna dapat melakukan
penambahan, edit dan delete produk yang akan dipesan.
 107

Gambar 4. 34 Halaman Show Receipt

@extends('layouts.app', ['page' => 'Manage Receipt', 'pageSlug' => 'receipts', 'section' => 'inventory'])
@section('content')
@include('alerts.success')
@include('alerts.error')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Receipt Summary</h4>
</div>
@if (!$receipt->finalized_at)
<div class="col-4 text-right">
@if ($receipt->products->count() === 0)
<form action="{{ route('receipts.destroy', $receipt) }}" method="post" class="d-inline">
@csrf
@method('delete')
<button type="submit" class="btn btn-sm btn-primary">
Delete Receipt
</button>
</form>
@else
<button type="button" class="btn btn-sm btn-primary" onclick="confirm('ATTENTION: At the
end of this receipt you will not be able to load more products in it.') ? window.location.replace('{{
route('receipts.finalize', $receipt) }}') : ''">
 108

Pada halaman add product akan diminta nama produk, jumlah, dan harga pada
produk yang akan dipesan, kemudian terdapat tombol save yang akan menyimpan
ke dalam database dan menampilkan halaman detail dari pesanan.

Gambar 4. 35 Halaman Add Product Receipt

@extends('layouts.app', ['page' => 'Add Product', 'pageSlug' => 'receipt', 'section' => 'inventory'])

@section('content')
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Add Product</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('receipts.show', $receipt) }}" class="btn btn-sm btn-primary">Back to
List</a>
</div>
</div>
</div>

4.4.14. Halaman Clients

Pada halaman clients ini digunakan untuk menyimpan data client atau
perusahaan yang memesan produk. Dengan halaman ini akan menyimpan
semua data yang diperlukan, pengguna atau user dapat melakukan manipulasi
data pada halaman client ini, seperti menambahkan, mengubah, hapus, dan
 109

melihat detail dari clients. Ditampilan utama clients akan menampilkan tabel
data mengenai clients yang ada, Berikut ini adalah tampilan dan script dari
tampilan clients.

Gambar 4. 36 Halaman Clients

@extends('layouts.app', ['page' => 'Clients', 'pageSlug' => 'clients', 'section' => 'clients'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Clients</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('clients.create') }}" class="btn btn-sm btn-primary">Add Client</a>
</div>
</div>
</div>
<div class="card-body">
@include('alerts.success')

Pada halaman tambah user akan diminta data memasukan data seperti nama
orang, nama usaha, alamat, email nomor telepon, fax, kemudian tombol save untuk
menyimpan ke dalam database.
 110

Gambar 4. 37 Halaman Add Client

@extends('layouts.app', ['page' => 'Register Client', 'pageSlug' => 'clients', 'section' => 'clients'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Register Client</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('clients.index') }}" class="btn btn-sm btn-primary">Back to List</a>
</div>
</div>
</div>

Pada halaman show atau detail client akan menampilkan data pembelian klien,
informasi mengenai klien, keuangan klien, pemesanan klien, dan terdapat tombol
untuk pembayaran ke perusahaan dan dapat membuat pemesanan produk dengan
tombol pemesanan baru.
 111

Gambar 4. 38 Halaman Show Client

@extends('layouts.app', ['page' => 'Client Information', 'pageSlug' => 'clients', 'section' => 'clients'])

@section('content')
@include('alerts.error')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Client Information</h4>
</div>
<div class="card-body">
<table class="table">
<thead>
<th>ID</th>
<th>Company / Name</th>
<th>Address</th>
<th>Telephone / Fax</th>
<th>Email</th>
<th>Balance</th>
<th>Purchases</th>
<th>Total Payment</th>
<th>Last purchase</th>
</thead>

4.4.15. Halaman Suppliers

Halaman supplier digunakan untuk menyimpan data dari supplier atau
pemasok barang ke perusahaan. pada halaman index suppliers akan
menampilkan tabel data dari supplier seperti nama perusahaan, nama, deskripsi
 112

dari pemasok, email, telephone, fax, payments made, total payment. Pada index
supplier juga terdapat tombol show atau detail dari supplier tersebut yang akan
menampilkan informasi supplier, pembayaran terakhir kepada supplier tersebut,
dan pemesanan bahan terakhir kali kepada supplier tersebut. Berikut ini
tampilan dan script dari halaman suppliers.

Gambar 4. 39 Halaman Suppliers

@extends('layouts.app', ['page' => 'List of Suppliers', 'pageSlug' => 'suppliers', 'section' => 'suppliers'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Suppliers</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('suppliers.create') }}" class="btn btn-sm btn-primary">New Supplier</a>
</div>
</div>
</div>
<div class="card-body">
@include('alerts.success')
 113

Pada halaman new supplier, user diminta untuk memasukan data supplier
seperti nama perusahaan, nama, deskripsi dari pemasok, email, telephone, fax,
payments made, total payment.

Gambar 4. 40 Halaman New Supplier

@extends('layouts.app', ['page' => 'New Supplier', 'pageSlug' => 'supplier', 'section' => 'Suppliers'])
@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Supplier</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('suppliers.index') }}" class="btn btn-sm btn-primary">Back to List</a>
</div>
</div>
</div>

Pada halaman show atau detail dari supplier tersebut yang akan menampilkan
informasi supplier, pembayaran terakhir kepada supplier tersebut, dan pemesanan
bahan terakhir kali kepada supplier tersebut.
 114

Gambar 4. 41 Halaman Show Supplier

@extends('layouts.app', ['page' => 'Supplier Information', 'pageSlug' => 'suppliers', 'section' => 'suppliers'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Supplier Information</h4>
</div>
<div class="card-body">
<table class="table">
<thead>
<th>ID</th>
<th>Company / Name</th>
<th>Address</th>
<th>Description</th>
<th>Email</th>
<th>Telephone / Fax</th>
<th>Payment information</th>
<th>Payments Made</th>
<th>Total Payment</th>
</thead>
<tbody>

4.4.16. Halaman Payment Methods

Pada halaman payment methods atau akun bank merupakan halaman untuk
menyimpan data akun bank yang digunakan untuk metode pembayaran pada
 115

perusahaan, dengan adanya metode pembayaran maka akan dapat terlihat

statistik dari pemasukan dan pengeluaran dana yang dilakukan pada
perusahaan. Pada halaman ini terdapat 4 tombol yang dapat digunakan oleh
pengguna, seperti melakukan menambahkan data akun bank, mengubah,
menghapus akun bank dan melihat detail dari akun bank tersebut. Berikut ini
adalah tampilan dan script pada halaman payment methods.

Gambar 4. 42 Halaman Payment Methods

@extends('layouts.app', ['page' => 'Methods', 'pageSlug' => 'methods', 'section' => 'methods'])

@section('content')
@include('alerts.success')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">Bank Accounts / Payment Methods</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('methods.create') }}" class="btn btn-sm btn-primary">New Method</a>

Halaman menambahkan akun bank atau payment method, halaman akan

meminta pengguna untuk mengisi data yang dibutuhkan seperti nama akun bank
dan deskripsi untuk memperjelas dan membedakan akun bank dengan yang lain.
 116

Gambar 4. 43 Halaman New Method

@extends('layouts.app', ['page' => 'New Method', 'pageSlug' => 'methods-create', 'section' => 'transactions'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">New Method</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('methods.index') }}" class="btn btn-sm btn-primary">Back to List</a>
</div>
</div>
</div>

Pada halaman show atau detail akan menampilkan informasi akun bank dan
tabel transaksi yang dilakukan pada akun bank tersebut.
 117

Gambar 4. 44 Halaman Show Method

@extends('layouts.app', ['page' => 'Method Information', 'pageSlug' => 'methods', 'section' => 'methods'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Method information</h4>
</div>
<div class="card-body">
<table class="table">
<thead>

4.4.17. Halaman Users

Pada halaman users merupakan halaman yang akan menampilkan data
pengguna yang dapat menggunakan aplikasi website ini. Pada halaman ini
pengguna dapat mengubah data, menambahkan dan menghapus pengguna lain.
Berikut ini tampilan dan script yang digunakan.
 118

Gambar 4. 45 Halaman Users

@extends('layouts.app', ['page' => ('User Management'), 'pageSlug' => 'users', 'section' => 'users'])

@section('content')
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header">
<div class="row">
<div class="col-8">
<h4 class="card-title">{{ ('Users') }}</h4>
</div>
<div class="col-4 text-right">
<a href="{{ route('users.create') }}" class="btn btn-sm btn-primary">{{ ('Add user') }}</a>
</div>
</div>
</div>
<div class="card-body">
@include('alerts.success')

Pada halaman new user, pengguna diminta untuk memasukan nama, email, dan
password yang akan digunakan, dan konfirmasi password yang dimasukan sama.
 119

Gambar 4. 46 Halaman New User

@extends('layouts.app', ['page' => ('User Management'), 'pageSlug' => 'users', 'section' => 'users'])

@section('content')
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 order-xl-1">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">{{ ('New User') }}</h3>
</div>
<div class="col-4 text-right">
<a href="{{ route('users.index') }}" class="btn btn-sm btn-primary">{{ ('Back to list')
}}</a>
</div>
</div>
</div>

4.5. Proses Hosting Website

Proses hosting website merupakan langkah untuk dilakukannya
pengunggahan website yang telah dibuat ke tampat hosting. Hosting merupakan
tempat untuk menyimpan file website yang telah dibuat sehingga website bisa
dilakukan atau diakses secara online melalui web browser. Berikut ini
merupakan langkah – langkah proses menngunggah file Laravel website yang
telah dibuat ke hosting cPanel.
 120

Langkah yang pertama yaitu dilakukannya proses mengunggah database

yang digunakan pada website yang sudah dibuat ke dalam database cPanel.
Pertama yaitu membuat nama database pada cPanel, kemudian membuat user
untuk mengakses dan keamanan pada database yang digunakan. Selanjutnya
membuat phpMyAdmin dan membuka database yang sudah dibuat di cPanel,
import database yang sudah dibuat pada Laravel. Berikut ini tampilan dari
struktur database yang sudah dilakukan import pada phpMyAdmin cPanel.

Gambar 4. 47 Struktur Database damaiaba_db_laravel

Setelah melakukan import database, proses selanjutnya yaitu pengunggah

folder Laravel ke cPanel. Sebelum dilakukannya unggah folder laravel, lakukan
compress terlebih dahulu folder laravel menjadi .zip untuk memudahkan proses
unggah file. Berikut ini proses pengunggahan folder laravel.
 121

Gambar 4. 48 Mengunggah file laravel

Langkah selanjutnya yaitu mengekstrak folder .zip yang telah diunggah

untuk mendapatkan folder Inventory yang digunakan nanti. Dibawah ini folder
yang sudah diunggah dan telah dilakukan ekstrak dari .zip menjadi folder pada
halaman public_html.

Gambar 4. 49 Mengekstrak Folder Inventory

Setelah melakukan ektraksi pada folder Inventory, langkah selanjutnya

yaitu mengubah data pada file .env. Pada file .env ubah nama database, nama
user, dan juga password sesuai dengan nama yang telah dibuat sebelumnya.
Dibawah ini data yang diubah pada file .env pada folder inventory.
 122

Gambar 4. 50 Mengubah Data File .env

Langkah terakhir yang harus dilakukan yaitu membuat subdomain yang

akan digunakan. Dengan menggunakan subdomain, domain utama tidak akan
terganggu. Langkah yang dilakukan yaitu memberikan nama subdomain yang
akan digunakan yaitu inventory, kemudian memberikan document root untuk
menghubungkan subdomain ke folder yang akan digunakan pada cPanel, yaitu
/public_html/inventory/public. Dibawah ini tampilan yang sudah selesai
konfigurasi dan sudah dapat diakses melalui gamehouse.cyber.my.id.

Gambar 4. 51 Tampilan Website Inventory

 123

4.6. Uji Coba

Pada tahap ini akan dilakukan uji coba terhadap aplikasi website yang telah
dibuat. Pengujian dilakukan dengan teknik pengujian Black Box untuk
mengetahui apakah setiap sistem yang digunakan berjalan dengan baik dan
sesuai dengan yang diharapkan. Pada uji coba akan diujikan dengan User
Acceptance Test untuk mengetahui apakah aplikasi ini sudah sesuai dan
berjalan dengan baik menurut pengguna akhir.

4.6.1 Black Box Testing

Pada Black Box Testing merupakan suatu metode pengujian perangkat
lunak yang befokus pada sisi fungsionalitas, khususnya pada input yang
digunakan pada aplikasi berbasis website ini dan apakah input tersebut sudah
sesuai denga napa yang diharapkan atau belum.

Pada tahap pengujian atau testing merupakan salah satu tahap yang harus
ada pada sebuah pengembangan perangkat lunak pada metode SDLC.
Pengujian Black Box akan dilakukan pada setiap langkah penggunaan dari user
dan setiap halaman yang sudah dibuat. Berikut ini adalah hasil pengujian
penggunaan sistem pada halaman masuk, dapat dilihat pada tabel

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman login
dapat dilihat pada Tabel 4.1.
 124

Tabel 4.1. Uji Coba Login

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan login Muncul pesan “the email Valid (Sesuai
dengan data email field is required” dan “the Harapan)
dan password kosong password field is
required”
2 Melakukan login Muncul pesan “Email or Valid (Sesuai
dengan email atau Password do not match Harapan)
password yang salah our records”
3 Melakukan login Halaman beralih ke Valid (Sesuai
dengan email dan halaman utama Harapan)
password yang sesuai

Dapat dilihat pada Tabel 4.1. hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman login sudah sesuai
dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Payment Methods dapat dilihat pada Tabel 4.2.

Tabel 4.2. Uji Coba Payment Methods

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pembuatan payment out this field.” pada field Harapan)
method baru dengan nama dan description.
data kosong, lalu klik
save.
2 Melakukan Halam beralih ke halaman Valid (Sesuai
pembuatan payment utama payment methods Harapan)
method baru dengan dan muncul pesan
 125

No Skenario Pengujian Hasil yang diharapkan Keterangan

mengisi data lengkap, “Payment method
lalu klik save. successfully created”
3 Melakukan edit Halaman beralih ke Valid (Sesuai
payment method, lalu halaman utama payment Harapan)
klik save. methods dan muncul
pesan “payment method
updated satisfactority”.
4 Klik tombol more Beralih halaman ke Valid (Sesuai
details pada data tampilan halaman details Harapan)
payment method payment methods.
5 Melakukan delete Muncul notifikasi “Are Valid (Sesuai
data pada payment you sure you want to Harapan)
method dengan klik remove this method? All
tombol delete. records will be deleted.”
Dan muncul pesan
“payment method
successfully removed”

Dapat dilihat pada Tabel 4.2 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman payment methods
sudah sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Suppliers dapat dilihat pada Tabel 4.3

Tabel 4.3. Uji Coba Suppliers

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pendaftaran baru out this field.” Pada field Harapan)
supplier dengan data yang dibutuhkan.
 126

No Skenario Pengujian Hasil yang diharapkan Keterangan

kosong, lalu klik
save.
2 Melakukan Beralih halaman ke Valid (Sesuai
pendaftaran baru halaman utama suppliers Harapan)
supplier dengan data dan menampilkan pesan
lengkap, lalu klik “Successfully Registered
save. Vendor”.
3 Melakukan edit pada Beralih halaman ke Valid (Sesuai
data supplier, lalu halaman utama suppliers Harapan)
klik save. dan menampilkan pesan
“Successfully updated
Vendor”.
4 Melihat detail data Beralih halaman ke Valid (Sesuai
supplier dengan klik tampilan halaman detail Harapan)
tombol more details. dari supplier.
5 Melakukan delete Muncul notifikasi “Are Valid (Sesuai
data pada supplier you sure you want to Harapan)
dengan klik tombol remove this supplier? All
delete. records will be deleted.”
dan muncul pesan
“supplier successfully
removed”.

Dapat dilihat pada Tabel 4.3 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Suppliers sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Clients dapat dilihat pada Tabel 4.4.
 127

Tabel 4.4. Uji Coba Clients

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pendaftaran baru out this field.” Harapan)
client dengan data
kosong, lalu klik
save.
2 Melakukan Beralih halaman ke Valid (Sesuai
pendaftaran baru halaman utama clients dan Harapan)
client dengan data menampilkan pesan
lengkap, lalu klik “Successfully Registered
save. customer”.
3 Melihat detail data Beralih halaman ke Valid (Sesuai
client dengan klik tampilan halaman detail Harapan)
tombol more details. dari client.
4 Melakukan edit pada Beralih halaman ke Valid (Sesuai
data client, lalu klik halaman utama clients dan Harapan)
save. menampilkan pesan
“Successfully updated
customer”.
5 Melakukan delete Muncul notifikasi “Are Valid (Sesuai
data pada client you sure you want to Harapan)
dengan klik tombol remove this client? All
delete. records will be deleted.”
dan muncul pesan
“customer successfully
removed”.
6 Melakukan Muncul pesan “please fill Valid (Sesuai
pembuatan transaksi out this field.” Harapan)
baru pada halaman
 128

No Skenario Pengujian Hasil yang diharapkan Keterangan

detail client dengan
klik tombol new
Transaction dan
mengisi data dengan
kosong.
7 Melakukan Menampilkan halaman Valid (Sesuai
pembuatan transaksi detail client dan balance Harapan)
baru pada halaman akan diperbaharui sesuai
detail client dengan dengan isi jumlah yang
klik tombol new dimasukan.
Transaction dan
mengisi data dengan
data terisi.
8 Melakukan Membuat baru data sale Valid (Sesuai
pembuatan pembelian dan halaman beralih ke Harapan)
baru pada halaman detail sale.
detail client dengan
klik tombol new
Purchase.

Dapat dilihat pada Tabel 4.4 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Clients sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman Users
dapat dilihat pada Tabel 4.5.
 129

Tabel 4.5. Uji Coba Users

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pembuatan user baru out this field.” Harapan)
dengan klik add user
dan tanpa mengisi
data dan klik save
2 Melakukan Muncul pesan “The Valid (Sesuai
pembuatan user baru password confirmation Harapan)
dengan klik add user does not match.”
dan mengisi data
dengan confirm
password yang salah,
lalu klik save
3 Melakukan Muncul pesan “The Valid (Sesuai
pembuatan user baru Password must be at least Harapan)
dengan klik add user 6 characters.”
dan mengisi data
dengan password
kurang dari 6
karakter, lalu klik
save
4 Melakukan Halaman beralih ke Valid (Sesuai
pembuatan user baru halaman utama users dan Harapan)
dengan klik add user muncul pesan “User
dan mengisi data successfully created”
dengan sesuai, lalu
klik save
5 Melakukan edit data Halaman beralih ke Valid (Sesuai
user, lalu klik save. halaman utama users dan Harapan)
 130

No Skenario Pengujian Hasil yang diharapkan Keterangan

muncul pesan “User
successfully updated”
6 Melakukan hapus Muncul notifikasi “Are Valid (Sesuai
data user dengan cara you sure you want to Harapan)
klik delete delete this user?” dan
muncul pesan “User
successfully deleted”

Dapat dilihat pada Tabel 4.5 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Users sudah sesuai
dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman login
dapat dilihat pada Tabel 4.6

Tabel 4.6. Uji Coba Categories

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pembuatan kategori out this field.” Harapan)
baru dengan klik
tombol new category
dan tanpa mengisi
data, lalu klik save
2 Melakukan Halaman beralih ke Valid (Sesuai
pembuatan kategori halaman utama Categories Harapan)
baru dengan klik dan muncul pesan
tombol new category “Category successfully
dan mengisi data, lalu created”.
klik save
 131

No Skenario Pengujian Hasil yang diharapkan Keterangan

3 Melakukan Halaman beralih ke Valid (Sesuai
pengubahan data halaman utama Categories Harapan)
pada kategori dengan dan muncul pesan
klik edit category dan “Category successfully
mengubah, data lalu updated”.
klik save
4 Melihat detail dari Halaman beralih ke Valid (Sesuai
kategori dengan klik tampilan halaman detail Harapan)
tombol more detail dari kategori yang dipilih
pada kategori yang
dipilih
5 Melakukan Muncul notifikasi “Are Valid (Sesuai
penghapusan data you sure you want to Harapan)
kategori dengan klik delete this category? All
tombol delete pada records with this category
kategori will be deleted.” dan
muncul pesan “category
successfully deleted”

Dapat dilihat pada Tabel 4.6 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Categories sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman login
dapat dilihat pada 4.7

Tabel 4.7. Uji Coba Products

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pembuatan produk out this field.” Harapan)
 132

No Skenario Pengujian Hasil yang diharapkan Keterangan

baru dengan klik
tombol new product
dan tanpa mengisi
data, lalu klik save
2 Melakukan Halaman beralih ke Valid (Sesuai
pembuatan produk halaman utama Products Harapan)
baru dengan klik dan muncul pesan
tombol new product “Product successfully
dan mengisi data, lalu created”.
klik save
3 Melakukan Halaman beralih ke Valid (Sesuai
pengubahan data halaman utama products Harapan)
pada produk dengan dan muncul pesan
klik edit product dan “product successfully
mengubah, data lalu updated”.
klik save
4 Melihat detail dari Halaman beralih ke Valid (Sesuai
produk dengan klik tampilan halaman detail Harapan)
tombol more detail dari produk yang dipilih
pada produk yang
dipilih
5 Melakukan Muncul notifikasi “Are Valid (Sesuai
penghapusan data you sure you want to Harapan)
produk dengan klik delete this product? All
tombol delete pada records with this product
produk will be deleted.” dan
muncul pesan “product
successfully deleted”
 133

Dapat dilihat pada Tabel 4.7 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Products sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Receipts dapat dilihat pada Tabel 4.8.

Tabel 4.8. Uji Coba Receipts

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan Muncul pesan “please fill Valid (Sesuai
pemesanan barang ke out this field.” Harapan)
supplier dengan klik
tombol new receipt
dan tanpa mengisi
data, lalu klik
continue.
2 Melakukan Beralih halaman ke Valid (Sesuai
pemesanan barang ke halaman detail receipt dan Harapan)
supplier dengan klik menampilkan pesan
tombol new receipt “Receipt registered
dan mengisi data, lalu successfully, you can start
klik continue. adding the products
belonging to it”
3 Menghapus data Muncul notifikasi “Are Valid (Sesuai
receipt dengan you sure you want to Harapan)
menekan delete delete this receipt? All
your records will be
permanently deleted, if
the stock of the products
is already finished they
will remain.” Dan
menampilkan pesan
 134

No Skenario Pengujian Hasil yang diharapkan Keterangan

“Receipt successfully
removed”.
4 Melakukan Beralih halaman ke Valid (Sesuai
penambahan produk halaman detail receipt dan Harapan)
pesanan dengan klik menampilkan pesan
tombol add, “Product successfully
kemudian mengisi modified” dan data
harga dan jumlah, tersimpan pada database
lalu klik continue.
5 Melakukan edit pada Beralih halaman ke Valid (Sesuai
produk pesanan halaman detail receipt dan Harapan)
dengan klik edit menampilkan pesan
produk, kemudian “Product edited
mengubah data, lalu successfully” dan data
klik continue. tersimpan pada database
6 Melakukan hapus Muncul notifikasi “Are Valid (Sesuai
data produk yang you sure you want to Harapan)
dipesan dengan klik remove this product?” dan
delete pada produk menampilkan pesan
“Product removed
successfully.”
7 Melakukan Menampilkan notifikasi Valid (Sesuai
penyeselaian “at the end of this receipt Harapan)
pemensan produk ke you will not be able to
supplier dengan load more products in it”.
melakukan klik pada halaman tidak dapat
tombol Finalize ditambahkan, edit dan
Receipt. delete produk. Pada
halaman muncul pesan
 135

No Skenario Pengujian Hasil yang diharapkan Keterangan

“receipt successfully
completed”.

Dapat dilihat pada Tabel 4.8 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Receipts sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Transactions Statistics dapat dilihat pada 4.9.

Tabel 4.9. Uji Coba Transactions Statistics

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melihat seluruh Beralih halaman ke Valid (Sesuai
transaksi dengan klik halaman utama Harapan)
tombol View Transactions
Transactions
2 Melihat seluruh client Beralih halaman ke Valid (Sesuai
yang ada dengan klik halaman utama Clients Harapan)
tombol View Clients
3 Melihat seluruh Beralih halaman ke Valid (Sesuai
method yang dimiliki halaman utama Methods Harapan)
dengan klik View
Methods

Dapat dilihat pada Tabel 4.9 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Transactions
Statistics sudah sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman Sales
dapat dilihat pada Tabel 4.10.
 136

Tabel 4.10. Uji Coba Sales

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan penjualan Muncul pesan “please fill Valid (Sesuai
barang ke customer out this field.” Harapan)
dengan klik tombol
Register Sale dan
tanpa mengisi data,
lalu klik continue.
2 Melakukan penjualan Beralih halaman ke Valid (Sesuai
barang ke customer halaman detail receipt dan Harapan)
dengan klik tombol menampilkan pesan “Sale
Register Sale dan registered successfully,
mengisi data, lalu you can start registering
klik continue. products and transactions”
3 Melakukan hapus Menampilkan notifikasi Valid (Sesuai
data sale dengan klik “Are you sure you want to Harapan)
delete pada data sale delete this sale? All your
yang ada records will be
permanently deleted.”
Dan menampilkan pesan
“The sale record has been
successfully deleted.”
4 Melakukan Beralih halaman ke Valid (Sesuai
penambahan produk halaman detail sale dan Harapan)
pesanan dengan klik menampilkan pesan
tombol add, “Product successfully
kemudian mengisi registered” dan data
harga dan jumlah, tersimpan pada database
lalu klik continue.
 137

No Skenario Pengujian Hasil yang diharapkan Keterangan

5 Melakukan edit pada Beralih halaman ke Valid (Sesuai
produk pesanan halaman detail Sale dan Harapan)
dengan klik edit menampilkan pesan
produk, kemudian “Product successfully
mengubah data, lalu modified” dan data
klik continue. tersimpan pada database
6 Melakukan hapus Muncul notifikasi “Are Valid (Sesuai
data produk pada you sure you want to Harapan)
penjualan dengan klik delete this product/s
delete pada produk order? Your registration
will be removed from this
sale.” dan menampilkan
pesan “The product has
been disposed of
successfully.”
7 Melakukan Menampilkan notifikasi Valid (Sesuai
penyeselaian “The transactions of this Harapan)
penjualan produk ke sale do not seem to
customer dengan coincide with the cost of
melakukan klik the products, do you want
tombol Finalize to finalize it? Your
Receipt. records cannot be
modified from now on”.
pada halaman tidak dapat
ditambahkan, edit dan
delete produk. Pada
halaman muncul pesan
“Sale successfully
completed”.
 138

No Skenario Pengujian Hasil yang diharapkan Keterangan

8 Melakukan Beralih halaman ke Valid (Sesuai
perubahan data client halaman detail sale dan Harapan)
dari penjualan dengan menampilkan pesan “Sale
klik tombol edit sale successfully modified”
dan mengubah data, dan data tersimpan pada
lalu klik continue. database
9 Melihat invoice Halaman beralih ke Valid (Sesuai
dengan klik tombol halaman baru dan Harapan)
invoice. menampilkan invoice dari
penjualan tersebut.

Dapat disimpulkan pada Tabel 4.10 hasil yang skenario pada pengujian
sudah sesuai dengan yang diharapkan dengan begitu pada halaman Sales sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Expenses dapat dilihat pada Tabel 4.11.

Tabel 4.11. Uji Coba Expenses

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan pendataan Muncul pesan “please fill Valid (Sesuai
pengeluaran dengan out this field.” Harapan)
klik tombol Register
Expense, dan tanpa
mengisi data yang
diperlukan, lalu klik
save.
2 Melakukan pendataan Halaman beralih ke Valid (Sesuai
pengeluaran dengan halaman utama expenses Harapan)
klik tombol Register dan muncul pesan
 139

No Skenario Pengujian Hasil yang diharapkan Keterangan

Expense, dan mengisi “Expense recorded
data yang diperlukan, successfully”.
lalu klik save.
3 Melakukan Halaman beralih ke Valid (Sesuai
pengubahan data halaman utama expenses Harapan)
pengeluaran dengan dan muncul pesan
klik tombol edit “Expense updated
transaction pada data successfully”.
yang dituju, lalu
mengubah data
transaksi dan klik
save.
4 Melakukan Menampilkan notifikasi Valid (Sesuai
penghapusan data “Are you sure you want to Harapan)
pengeluaran dengan delete this transaction?
klik tombol delete There will be no record
pada data left.” Dan akan muncul
pengeluaran yang pesan “Expenditure
dituju. successfully removed.”

Dapat disimpulkan pada Tabel 4.11 hasil yang skenario pada pengujian
sudah sesuai dengan yang diharapkan dengan begitu pada halaman Expenses
sudah sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Income dapat dilihat pada Tabel 4.12.
 140

Tabel 4.12. Uji Coba Income

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan pendataan Muncul pesan “please fill Valid (Sesuai
pemasukan dengan out this field.” Harapan)
klik tombol Register
Income, dan tanpa
mengisi data yang
diperlukan, lalu klik
save.
2 Melakukan pendataan Halaman beralih ke Valid (Sesuai
pemasukan dengan halaman utama incomes Harapan)
klik tombol Register dan muncul pesan
Income, dan mengisi “Income recorded
data yang diperlukan, successfully”.
lalu klik save.
3 Melakukan Halaman beralih ke Valid (Sesuai
pengubahan data halaman utama Incomes Harapan)
pengeluaran dengan dan muncul pesan
klik tombol edit “Income updated
transaction pada data successfully”.
yang dituju, lalu
mengubah data
transaksi dan klik
save.
4 Melakukan Menampilkan notifikasi Valid (Sesuai
penghapusan data “Are you sure you want to Harapan)
pemasukan dengan delete this entry? There
klik tombol delete will be no record left.”
pada data pemasukan Dan akan muncul pesan
yang dituju.
 141

No Skenario Pengujian Hasil yang diharapkan Keterangan

“Entry successfully
removed.”

Dapat dilihat pada Tabel 4.12 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Income sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Transfers dapat dilihat pada 4.13

Tabel 4.13. Uji Coba Transfers

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan pendataan Muncul pesan “please fill Valid (Sesuai
transfer dengan klik out this field.” Harapan)
tombol Register
Transfer, dan tanpa
mengisi data yang
diperlukan, lalu klik
save.
2 Melakukan pendataan Halaman beralih ke Valid (Sesuai
transfer dengan klik halaman utama Transfers Harapan)
tombol Register dan muncul pesan
transfer, dan mengisi “Transfer recorded
data yang diperlukan, successfully”.
lalu klik save.
3 Melakukan Menampilkan notifikasi Valid (Sesuai
penghapusan data “Are you sure you want to Harapan)
transfer dengan klik delete this transfer? There
tombol delete transfer will be no record left.”
pada data yang dituju. Dan akan menampilkan
 142

No Skenario Pengujian Hasil yang diharapkan Keterangan

pesan “The transfer and
its associated transactions
have been successfully
removed.”

Dapat dilihat pada Tabel 4.13 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Transfer sudah
sesuai dan berjalan dengan baik.

Berikut adalah hasil dari pengujian penggunaan sistem pada halaman

Payments dapat dilihat pada Tabel 4.14.

Tabel 4.14. Uji Coba Payments

No Skenario Pengujian Hasil yang diharapkan Keterangan

1 Melakukan pendataan Muncul pesan “please fill Valid (Sesuai
pembayaran ke out this field.” Harapan)
supplier dengan klik
tombol New
Payment, dan tanpa
mengisi data yang
diperlukan, lalu klik
save.
2 Melakukan pendataan Halaman beralih ke Valid (Sesuai
pembayaran ke halaman utama Payments Harapan)
supplier dengan klik dan muncul pesan
tombol New “Payment registered
Payment, dan successfully.”.
mengisi data yang
diperlukan, lalu klik
save.
 143

No Skenario Pengujian Hasil yang diharapkan Keterangan

3 Melakukan Halaman beralih ke Valid (Sesuai
pengubahan data halaman utama Payments Harapan)
pembayaran ke dan muncul pesan
supplier dengan klik “Payment updated
tombol edit payment, satisfactorily.”.
dan mengubah data,
lalu klik save.
4 Melakukan Menampilkan notifikasi Valid (Sesuai
penghapusan data “Are you sure you want to Harapan)
payment dengan klik delete this payment?
tombol delete There will be no record
payment pada data left.” Dan akan
yang dituju. menampilkan pesan
“Payment successfully
removed.”

Dapat dilihat pada Tabel 4.14 hasil yang skenario pada pengujian sudah
sesuai dengan yang diharapkan dengan begitu pada halaman Payments sudah
sesuai dan berjalan dengan baik.

4.6.2 Uji Coba Website

Pada uji coba website akan menguji aplikasi website manajemen inventory
dan pencatatan transaksi keuangan pada beberapa web browser. Pada saat
pengguna pertama kali membuat website maka akan menampilkan tampilan
halaman login untuk dapat mengakses aplikasi website ini. Berikut ini adalah
hasil uji coba dapat dilihat pada Tabel 4.15.
 144

Tabel 4.15. Uji Coba Browser.

Web Browser Hasil Uji Coba Tangkapan Layar

Google Chrome 1. Website berjalan
dengan lancar
2. Tampilan dan
tulisan sesuai
dengan rancangan
Mozila Firefox 1. Website berjalan
dengan lancar
2. Tampilan dan
tulisan sesuai
dengan rancangan
Microsoft Edge 1. Website berjalan
dengan lancar
2. Tampilan dan
tulisan sesuai
dengan rancangan

Dapat disumpulkan dalam uji coba website yang digunakan pada web
browser yang berbeda beda, hasil yang didapat yaitu website berjalan dengan
lancar dan tampilan dan tulisan sesuai dengan rancangan.
 BAB V

PENUTUP

5.1. Kesimpulan
Aplikasi Inventory berbasis website menggunakan framework Laravel telah
berhasil dibuat. Aplikasi berbasis website ini membuat semua proses transaksi
perusahaan menjadi lebih mudah, terstruktur dan akurat dalam menyajikan
informasi dan dapat membuat invoice. Aplikasi berbasis website ini
memudahkan dalam mengelola data transaksi barang, data transaksi keuangan
perusahaan, data client dan supplier. Pada aplikasi ini sudah dapat diakses
melalui gamehouse.cyber.my.id.

Bedasarkan uji coba yang dilakukan menggunakan metode black box, setiap
fungsional yang ada pada aplikasi berbasis website ini sudah sesuai dengan
yang diharapkan. Dengan kata lain hasil dari pembuatan aplikasi inventory
berbasis website ini sudah bebas dari kesalahan.

5.2. Saran
Adapun saran yang dapat diberikan untuk pengembangan dari aplikasi
inventory ini antara lain mengembangkan fitur – fitur pada sistem ini menjadi
lebih baik lagi seperti membuat laporan menjadi excel atau pdf, membuat desain
website yang responsif agar dapat digunakan pada ponsel atau dibuat dalam
bentuk aplikasi android agar semakin mudah dalam penggunaannya.

145
 DAFTAR PUSTAKA

Martono Rizky. Practical Inventory Manajamen: Menciptakan Keunggulan

Operasional Melalui Sediaan, Indonesia. PPM Manajemen. 2013.
Abdullah Rohi. 7 in 1 Permrograman Web untuk Pemula, Jakarta, PT Elex Media
Computindo. 2018.
Salampessy, Siti Megawati. “Aplikasi Manajemen Inventory dan Pencatatan Data
Transaksi PT. Mikro Indo Sinergi Persada Menggunakan Java dan MySQL
Berbasis Desktop.” Gunadarma, Depok, 2019.
Yudi Permana, Puji Ramadlon. Perencangan Sistem Informasi Penjualan
Perumahan Menggunakan Metode SDLC pada PT. Mandiri Land Prosperous
Berbasis Mobile dalam Jurnal SIGMA. Pelita Bangsa. Bekasi. 2019.
Nugroho, Adi. Perancangan dan Implementasi Sistem Basis Data. Yogyakarta,
Andi Offset. 2011.
Frieyadle. 2019. Struktur Navigasi Pada Website. Available at:
https://frieyadie.web.id/struktur-navigasi-pada-website/. Diakses 20 juli 2022.
Hermawan Riyadi. 2019. Pengertian XAMPP Beserta Fungsi dan Bagian-bagian
Penting pada XAMPP. Available at: https://www.nesabamedia.com/pengertian-
xampp/. Diakses 22 juli 2022.
Laudon, Kenneth C. 2007. Sistem Informasi Manajemen. Palgrave. Basingstoke.
Naista, D. 2017. Codeigniter Vs Laravel. Bogor. Ghalia Indonesia.
Wardana. 2014. Menjadi Master PHP dengan framework CodeIgniter. Jakarta, Alex
Media Computindo.
Alexander F.K. Sibero. 2013. Web Programming Power Pack. Yogyakarta.
Mediakom.
Wijayanto, T. dkk. 2013. “Analisis Dan Perancangan Sistem Informasi Pemesanan
Dan Penjualan Barang Dengan Metode Berorientasi Objek Di U.D. Aneka Jaya
Surabaya"..Surabaya, Universitas Airlangga.
Rasmawan, Uus. 2019, Teknik Penulisan Tugas Akhir dan Skripsi Pemrograman.
Jakarta, Elex Media Komputindo.
Muhammad Imansyah, PHP dan MySQL Untuk Orang Awam, Maxicom,
Palembang. 2010.

146
 147

Nugroho, Adi. 2011. Perancangan dan Implementasi Sistem Basis Data.

Yogyakarta, Andi Offset.
 LAMPIRAN OUTPUT PROGRAM

1. Halaman Login

2. Halaman dashboard

L-1
 L-2

3. Tampilan sidebar dan navbar

4. Halaman Statistics Transactions

 L-3

5. Halaman Sales

6. Halaman Register Sale

 L-4

7. Halaman Detail Sales

8. Halaman Tambah Produk Sale

 L-5

9. Halaman Expenses

10. Halaman New Expanses

 L-6

11. Halaman Incomes

12. Halaman New Income

13. Halaman Transfers

 L-7

14. Halaman New Transfer

 L-8

15. Halaman Payments

16. Halaman New Payments

17. Halaman Statistics Inventories

 L-9

18. Halaman Categories

 L-10

19. Halaman new Category

20. Halaman Details Category

 L-11

21. Halaman Products

22. Halaman New Product

 L-12

23. Halaman Detail Product

24. Halaman Receipts

 L-13

25. Halaman New Receipt

26. Halman Detail Receipt

 L-14

27. Halaman Add Product Receipt

28. Halaman Clients

 L-15

29. Halaman Register Client

30. Halaman Detail Client

 L-16

31. Halaman Suppliers

32. Halaman New Supplier

33. Halaman Detail Supplier

 L-17

34. Halaman Payment Method/Akun Bank

 L-18

35. Halaman New Method

36. Halaman Detail Method

 L-19

37. Halaman Users

38. Halaman New User