Rancang Bangun Sistem Informasi Inventory Berbasis Web Menggunakan Metode Klasifikasi ABC (Studi Kasus: PT. Sukses Kita Abadi)

gram SISKA – Kelola Data Stok (tambah)

178

Gambar 4.30. Sequence Diagra

am SISKA – Kelola Data Stok (ubah)

179

Gambar 4.31. Sequence Diagram

m SISKA – Kelola Data Stok (hapus)

180

Gambar 4.32. Sequence Dia

agram SISKA – Pengaturan Klasifikasi

181

Gambar 4.33. Sequence Diagram SISKA – Kelola Data Barang

182

Gambar 4.34. Sequence Diagram S

SISKA – Kelola Barang Masuk (tambah)

183

Gambar 4.35. Sequence Diagr

ram SISKA – Kelola Barang Masuk (ubah)

184

Gambar 4.36. Sequence Diagram

m SISKA – Kelola Barang Masuk (hapus)

185

Gambar 4.37. Sequence Diagra

am SISKA – Konfirmasi Barang Masuk

186

Gambar 4.38. Sequence Diagra

am SISKA – Kelola Surat Jalan (tambah)

187

Gambar 4.39. Sequence Diagr

ram SISKA – Kelola Surat Jalan (ubah)

188

Gambar 4.40. Sequence Diagram

SISKA – Kelola Surat Jalan (hapus&unduh)

189

Gambar 4.41. Sequence Diagr

ram SISKA – Konfirmasi Surat Jalan

190

Gambar 4.42. Sequence Diagram SISKA – Kelola Data Pemasok

191

Gambar 4.43. Sequence Diagram SISKA – Kelola Data Pelanggan

Gambar 4.44. Sequence Diagram SISKA – Laporan Stok Barang

192

Gambar 4.45. Sequence Diagram SISKA – Laporan Barang Masuk
Gambar 4.46. Sequence Diagram SISKA – Laporan Surat Jalan

Gambar 4.47. Sequence Diagram SISKA – Logout

193

4.2.4. Perancangan Tampilan Antarmuka Sistem (User Interface)
Dalam tahap ini, penulis merancang dan mendesain tampilan user

interface dengan memanfaatkan alat bantu aplikasi desain berbasis web
yaitu Figma. Perancangan user interface ini dilakukan sebagai sketsa
tampilan atau mockup bagi penulis sebelum mulai membangun sistem
inventory sukses kita abadi (SISKA). Berikut merupakan rancangan user
interface sistem inventory sukses kita abadi (SISKA) :

Gambar 4.48. Rancangan halaman login

Pada halaman login ini, terdapat logo dari SISKA, form login yang
nantinya berisi form username dan form password, tombol daftar dan
tombol masuk, serta link lupa password. Apabila user telah memiliki akun,
user hanya tinggal memasukkan username dan password pada form login
dan mengklik tombol masuk. Sedangkan, bagi user yang belum memiliki
akun, maka user dapat melakukan pendaftaran dengan mengklik tombol
daftar.

194

Gambar 4.49. Rancangan halaman pendaftaran

Pada gambar 4.49 diatas, user mengisi data pada form pendaftaran
yang tersedia untuk dapat melakukan pendaftaran akun baru. Form
pendaftaran nantinya akan berisi form nama, form e-mail, form username,
form password, form nomor handphone, dan form jabatan.

Gambar 4.50. Rancangan halaman dashboard bagi admin

Halaman dashboard merupakan halaman yang user kunjungi setelah
user berhasil melakukan login ke dalam SISKA. Halaman dashboard
nantinya akan berisi berbagai visualisasi data, seperti tabel penjualan per

195

bulan, tabel penjualan per tahun, pengingat stok habis, pengingat stok yang
menipis, grafik penjualan per tahun (line chart), grafik stok (line chart), dan
grafik pelanggan (doughnut chart). Dashboard akan memiliki 2 tampilan,
yaitu bagi admin dan user yang lain. Perbedaannya terletak pada ada dan
tidaknya sub menu data pengguna dan sub menu data jabatan. Adapun
dashboard bagi user yang lain akan memiliki tampilan seperti pada gambar
4.51.

Gambar 4.51. Rancangan halaman dashboard bagi user selain admin

Selanjutnya, terdapat tampilan halaman untuk mengelola data
pengguna dan data jabatan, yang hanya dapat dilakukan oleh user dengan
jabatan admin. User dapat mengubah dan menghapus akun pengguna pada
halaman data pengguna, sedangkan pada halaman data jabatan, user dapat
menambah, mengubah, dan menghapus data jabatan.

196

Gambar 4.52. Rancangan halaman data pengguna
Gambar 4.53. Rancangan halaman data jabatan

197

Gambar 4.54. Rancangan halaman data stok

Pada halaman ini, user yang dapat mengunjunginya hanya user yang
memiliki jabatan sebagai staff inventory dan staff barang. Data stok dan data
barang berada di dalam menu stok (sidebar) dan terpisah secara masing-
masing sebagai sub menu (navbar). Di halaman data stok, terdapat tabel data
stok, tombol tambah data stok, paginasi tabel data stok, dan kolom pencarian
data stok. Nantinya, dalam tabel data stok, di tiap-tiap baris data akan
terdapat tombol aksi yaitu tombol ubah dan tombol hapus.

Gambar 4.55. Rancangan halaman data stok (tambah)

198

Pada gambar 4.55 diatas, merupakan tampilan apabila user mengklik
tombol tambah. Pada tampilan ini, user dapat melakukan tambah data stok
pada form tambah data. Terdapat juga tombol batal dan tombol simpan.

Gambar 4.56. Rancangan halaman data stok (ubah)

Tampilan pada gambar 4.56 merupakan tampilan apabila user
mengklik tombol ubah yang terdapat di tiap-tiap baris tabel data. Data
tersebut akan ditampilkan di dalam form ubah data dan user dapat
melakukan ubah data. Pada tampilan ubah data juga terdapat tombol batal
dan tombol simpan.

199

Gambar 4.57. Rancangan halaman data stok (hapus)

Apabila user ingin menghapus data stok, user dapat mengklik
tombol hapus yang terdapat di baris tabel data yang ingin dihapus. Tampilan
di atas akan muncul sebagai pesan konfirmasi hapus data stok. Jika user
tidak ingin menghapus data user dapat mengklik tombol tidak, dan
begitupun sebaliknya.

Gambar 4.58. Rancangan halaman data barang

Tampilan ini dapat diakses oleh user dengan jabatan sebagai staff
inventory. Isi pada tampilan data barang juga kurang lebih sama dengan isi
pada tampilan data stok, mulai dari tampilan tambah data, ubah data, dan
hapus data. Hanya saja, data-data yang disajikan adalah data barang.

200

Gambar 4.59. Rancangan halaman data barang masuk

Tampilan di atas merupakan tampilan dari halaman barang masuk.
Menu transaksi (sidebar) memiliki empat sub menu, yaitu sub menu
(navbar) barang masuk, surat jalan, data pemasok, dan data pelanggan. User
yang dapat melakukan CRUD pada halaman barang masuk ialah user
dengan jabatan staff inventory.

Gambar 4.60. Rancangan halaman data barang masuk (tambah)

Tampilan di atas merupakan tampilan apabila user mengklik tombol
tambah data. Pada tampilan ini terdapat form tambah data, tabel tambah data

201

yang nantinya juga akan memiliki tombol tambah dan tombol hapus di
dalamnya, tombol batal dan tombol simpan.

Gambar 4.61. Rancangan halaman data barang masuk (ubah)

Pada gambar 4.61, terdapat tampilan apabila user mengklik tombol
ubah. Tampilan ini memiliki form ubah data, tabel ubah data, tombol batal,
dan tombol simpan. Nantinya form ubah data dan tabel ubah data akan berisi
data-data sesuai dengan yang terdapat pada tabel data barang masuk.

Gambar 4.62. Rancangan halaman data barang masuk (hapus)

202

Tampilan diatas merupakan tampilan pesan konfirmasi hapus data
barang masuk yang akan muncul apabila user mengklik tombol hapus. Pada
tampilan ini terdapat tombol tidak dan tombol ya.

Gambar 4.63. Rancangan halaman data surat jalan

Selanjutnya, terdapat sub menu surat jalan yang memiliki tampilan
sama dengan sub menu barang masuk, akan tetapi data yang akan
ditampilkan pada tabel data surat jalan adalah data-data yang berkaitan
dengan surat jalan. User yang dapat mengakses tampilan ini ialah user
dengan jabatan staff penjualan, manajer, dan staff barang.

203

Gambar 4.64. Rancangan halaman data pemasok

Tampilan ini merupakan tampilan sub menu data pemasok.
Tampilan ini sama dengan tampilan sub menu barang masuk dan sub menu
surat jalan, akan tetapi data yang disajikan pun berbeda, yaitu data pemasok.
User yang dapat mengakses tampilan ini yaitu user dengan jabatan staff
inventory.

Gambar 4.65. Rancangan halaman data pelanggan

Sedangkan pada gambar 4.65 merupakan tampilan sub menu data
pelanggan. Tampilan ini nantinya akan menyajikan data-data pelanggan
pada tabel data pelanggan. User yang dapat mengakses tampilan ini ialah
user dengan jabatan sebagai staff penjualan.

204

Gambar 4.66. Rancangan halaman laporan

Pada gambar 4.66 diatas, dapat dilihat tampilan menu laporan yang
berisi form kriteria laporan dan tombol tampilkan. Nantinya, form kriteria
laporan akan berisi form jenis laporan, form kategori laporan, dan form
periode laporan. User yang dapat mengakses halaman ini hanya user dengan
jabatan sebagai direktur saja.

Gambar 4.67. Rancangan halaman laporan (tampilkan)

Tampilan diatas merupakan tampilan yang akan muncul setelah user
mengklik tombol tampilkan. Laporan yang sesuai dengan form kriteria

205

laporan akan ditampilkan pada tampilan ini. Pada tampilan ini juga terdapat
tombol unduh, tombol cetak, dan tombol close.

4.3. Tahap Implementasi (Implementation)
Tahap implementasi merupakan tahap terakhir dalam pengembangan

sistem inventory sukses kita abadi (SISKA) berupa pengaplikasian terhadap
hasil dari tahapan sebelumnya yaitu tahap perancangan desain sistem. Pada
tahap ini, penulis melakukan dua langkah untuk mengaplikasikan hasil
rancangan SISKA, yaitu sebagai berikut :

4.3.1. Pengkodean (Coding)
Langkah yang pertama ialah penulisan program atau pengkodean

SISKA. SISKA dibangun dan diaplikasikan dengan menggunakan :

1. Perangkat keras (hardware)
a. Prosesor Intel® Core™ i5-4430 3.00Ghz
b. RAM 16Gb
c. SSD 128Gb
d. Hardisk 2Tb

2. Perangkat lunak (software)
a. Sistem operasi Windows 10 Pro 64-bit
b. Aplikasi XAMPP versi 3.3.0 (8.0.9)
 Apache versi 2.4.48
 MariaDB atau MySQL versi 10.4.20
 PHP versi 8.0
 phpMyAdmin 5.1.1
c. Framework CodeIgniter versi 4

206

d. Framework Bootstrap versi 5.1.3
e. Text editor Microsoft Visual Studio Code 1.62.0
f. Browser Google Chrome versi 95.0.4638.69

4.3.2. Pengujian Sistem
Langkah kedua yaitu pengujian sistem terhadap SISKA yang telah

penulis aplikasikan. Pengujian sistem dilakukan oleh penulis dengan
menggunakan metode blackbox testing yang membagi pengujian ke dalam
beberapa skenario berdasarkan use case dari SISKA, yaitu sebagai berikut :

1. Pengujian Blackbox Seluruh Aktor

Tabel 4.38 Pengujian Blackbox Seluruh Aktor
UC1 - Pendaftaran

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses halaman login Menampilkan halaman login Sesuai

2. Klik tombol daftar Menampilkan pop up overlay Sesuai

form pendaftaran

3. Mengisi form pendaftaran secara Menampilkan halaman login Sesuai

valid dan klik tombol daftar dan pesan berhasil

4. Mengisi form pendaftaran secara Menampilkan halaman login Sesuai

tidak valid dan klik tombol daftar dan pesan gagal

5. Klik tombol batal Menampilkan halaman login Sesuai

UC2 - Login

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses halaman login Menampilkan halaman login Sesuai

207

2. Mengisi form login dengan akun Menampilkan halaman Sesuai

yang telah terdaftar dan valid dan dashboard sesuai dengan hak

klik tombol masuk akses user

3. Mengisi form login dengan akun Menampilkan halaman login Sesuai

yang telah terdaftar dan tidak dan pesan gagal

valid dan klik tombol masuk

4. Mengisi form login dengan akun Menampilkan halaman login Sesuai

yang belum terdaftar dan klik dan pesan gagal

tombol masuk

UC3 – Lupa Password

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses halaman login Menampilkan halaman login Sesuai

2. Klik tombol lupa password Menampilkan halaman lupa Sesuai

password

3. Mengisi form lupa password Menampilkan halaman login Sesuai

dengan akun yang telah terdaftar dan pesan berhasil

secara valid dan klik tombol ubah

4. Mengisi form lupa password Menampilkan halaman lupa Sesuai

dengan akun yang telah terdaftar password dan pesan gagal

secara tidak valid dan klik tombol

ubah

5. Mengisi form lupa password Menampilkan halaman lupa Sesuai

dengan akun yang belum password dan pesan gagal

terdaftar dan klik tombol ubah

5. Klik tombol kembali Menampilkan halaman login Sesuai

UC16 - Logout

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

208

1. Klik tombol keluar Menampilkan pop up overlay Sesuai
2. Klik tombol ya
3. Klik tombol tidak konfirmasi logout

Menampilkan halaman login Sesuai

dan pesan berhasil

Menampilkan halaman Sesuai

dimana user sedang berada

2. Pengujian Blackbox Level Admin

Tabel 4.39 Pengujian Blackbox Level Admin
UC4 – Kelola Data Pengguna

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu dashboard Menampilkan halaman Sesuai

dashboard

2. Mengakses sub menu data Menampilkan halaman data Sesuai

pengguna pengguna

3. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

4. Klik tombol ubah Menampilkan halaman ubah Sesuai

sesuai dengan data yang ingin

diubah

5. Mengisi form ubah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan pengguna dan pesan berhasil

6. Mengisi form ubah data secara Menampilkan halaman ubah Sesuai

tidak valid dan klik tombol data dan pesan gagal

simpan

7. Klik tombol batal Menampilkan halaman data Sesuai

pengguna

209

8. Klik tombol hapus Menampilkan pop up overlay Sesuai

konfirmasi hapus data

9. Klik tombol ya Menampilkan halaman data Sesuai

pengguna dan pesan berhasil

10. Klik tombol tidak Menampilkan halaman data Sesuai

pengguna

11. Klik tombol paginasi Menampilkan halaman data Sesuai

pengguna sesuai urutan dan

jumlah data
UC5 – Kelola Data Jabatan

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu dashboard Menampilkan halaman Sesuai

dashboard

2. Mengakses sub menu data jabatan Menampilkan halaman data Sesuai

jabatan

3. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

4. Klik tombol tambah Menampilkan pop up overlay Sesuai

form tambah data

5. Mengisi form tambah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan jabatan dan pesan berhasil

6. Mengisi form tambah data secara Menampilkan halaman data Sesuai

tidak valid dan klik tombol jabatan dan pesan gagal

simpan

7. Klik tombol batal Menampilkan halaman data Sesuai

jabatan

8. Klik tombol ubah Menampilkan halaman ubah Sesuai

sesuai dengan data yang ingin

diubah

210

9. Mengisi form ubah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan jabatan dan pesan berhasil

10. Mengisi form ubah data secara Menampilkan halaman ubah Sesuai

tidak valid dan klik tombol data dan pesan gagal

simpan

11. Klik tombol batal Menampilkan halaman data Sesuai

jabatan

12. Klik tombol hapus Menampilkan pop up overlay Sesuai

konfirmasi hapus data

13. Klik tombol ya Menampilkan halaman data Sesuai

jabatan dan pesan berhasil

14. Klik tombol tidak Menampilkan halaman data Sesuai

jabatan

15. Klik tombol paginasi Menampilkan halaman data Sesuai

jabatan sesuai urutan dan

jumlah data

3. Pengujian Blackbox Level Direktur

Tabel 4.40 Pengujian Blackbox Level Direktur
UC15 – Laporan

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu laporan Menampilkan halaman Sesuai

laporan

2. Mengisi form kriteria laporan Menampilkan halaman Sesuai

sesuai dengan pilihan dan klik proses laporan

tombol proses

211

3. Mengisi form periode laporan Menampilkan halaman Sesuai

sesuai dengan pilihan dan klik export laporan dalam format

tombol tampilkan .pdf

4. Klik tombol unduh Mengunduh file laporan Sesuai

dalam format .pdf

5. Klik tombol cetak Mencetak file laporan Sesuai

6. Klik tombol kembali Menampilkan halaman Sesuai

laporan

4. Pengujian Blackbox Level Manajer

Tabel 4.41 Pengujian Blackbox Level Manajer
UC7 – Pengaturan Klasifikasi

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu stok Menampilkan halaman data Sesuai

stok

2. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

3. Mengklik tombol pengaturan Menampilkan halaman Sesuai

pengaturan klasifikasi

4. Memilih periode ABC dan klik Menyimpan data stok dan Sesuai

simpan pesan berhasil

5. Klik batal Menampilkan halaman data Sesuai

stok

UC10 – Konfirmasi Barang Masuk

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu transaksi Menampilkan halaman Sesuai

barang masuk

212

2. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

3. Klik tombol konfirmasi Menyimpan konfirmasi Sesuai

barang masuk dan pesan

berhasil

4. Klik kembali tombol konfirmasi Menyimpan konfirmasi Sesuai

(batalkan) barang masuk dan pesan

berhasil

5. Klik tombol paginasi Menampilkan halaman Sesuai

barang masuk sesuai urutan

dan jumlah data

UC12 – Konfirmasi Surat Jalan

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu transaksi Menampilkan halaman Sesuai

barang masuk

2. Mengakses sub menu surat jalan Menampilkan halaman Sesuai

barang masuk

3. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

4. Klik tombol konfirmasi Menyimpan konfirmasi surat Sesuai

jalan dan pesan berhasil

5. Klik kembali tombol konfirmasi Menyimpan konfirmasi surat Sesuai

(batalkan) jalan dan pesan berhasil

6. Klik tombol paginasi Menampilkan halaman surat Sesuai

jalan sesuai urutan dan

jumlah data

213

5. Pengujian Blackbox Level Staff Inventory

Tabel 4.42 Pengujian Blackbox Level Staff Inventory
UC6 – Kelola Data Stok

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu stok Menampilkan halaman data Sesuai

stok

2. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

3. Klik tombol tambah Menampilkan pop up Sesuai

overlay form tambah data

4. Mengisi form tambah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan stok dan pesan berhasil

5. Mengisi form tambah data secara Menampilkan halaman data Sesuai

tidak valid dan klik tombol stok dan pesan gagal

simpan

6. Klik tombol batal Menampilkan halaman data Sesuai

stok

7. Klik tombol ubah Menampilkan halaman ubah Sesuai

sesuai dengan data yang

ingin diubah

8. Mengisi form ubah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan stok dan pesan berhasil

11. Mengisi form ubah data secara Menampilkan halaman ubah Sesuai

tidak valid dan klik tombol data dan pesan gagal

simpan

12. Klik tombol batal Menampilkan halaman data Sesuai

stok

214

13. Klik tombol hapus Menampilkan pop up Sesuai

overlay konfirmasi hapus

data

14. Klik tombol ya Menampilkan halaman data Sesuai

stok dan pesan berhasil

15. Klik tombol tidak Menampilkan halaman data Sesuai

stok

16. Klik tombol paginasi Menampilkan halaman data Sesuai

stok sesuai urutan dan

jumlah data

UC8 – Kelola Data Barang

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu data stok Menampilkan halaman data Sesuai

stok

2. Mengakses sub menu data barang Menampilkan halaman data Sesuai

barang

3. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

4. Klik tombol tambah Menampilkan pop up Sesuai

overlay form tambah data

5. Mengisi form tambah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan barang dan pesan berhasil

6. Mengisi form tambah data secara Menampilkan halaman data Sesuai

tidak valid dan klik tombol barang dan pesan gagal

simpan

7. Klik tombol batal Menampilkan halaman data Sesuai

barang

215

8. Klik tombol ubah Menampilkan halaman ubah Sesuai

sesuai dengan data yang

ingin diubah

9. Mengisi form ubah data secara Menampilkan halaman data Sesuai

valid dan klik tombol simpan barang dan pesan berhasil

10. Mengisi form ubah data secara Menampilkan halaman ubah Sesuai

tidak valid dan klik tombol data dan pesan gagal

simpan

11. Klik tombol batal Menampilkan halaman data Sesuai

barang

12. Klik tombol hapus Menampilkan pop up Sesuai

overlay konfirmasi hapus

data

13. Klik tombol ya Menampilkan halaman data Sesuai

barang dan pesan berhasil

14. Klik tombol tidak Menampilkan halaman data Sesuai

barang

15. Klik tombol paginasi Menampilkan halaman data Sesuai

barang sesuai urutan dan

jumlah data
UC9 – Kelola Barang Masuk

No. Skenario Pengujian Hasil yang Diharapkan Hasil

Pengujian

1. Mengakses menu transaksi Menampilkan halaman Selesai

barang masuk

2. Mencari data pada kolom Menampilkan data hasil Sesuai

pencarian pencarian

3. Klik tombol tambah Menampilkan halaman Sesuai

tambah data yang berisi form

tambah data

216