BAB IV

PERANCANGAN DAN IMPLEMENTASI

Bab ini berisi tentang perancangan dan implementasi.Perancangan berisi rangkai alur dalam
pembuatan sistem dan Implementasi berisi Tampilan antar muka dari aplikasi yang telah
diselesaikan penulis.
4.1 Perancangan Sistem

Gambar 4.1 Use Case Diagram

4.1.1 Use Case Diagram

Gambar-gambar diatas ini memperlihatkan interaksi pada sebuah alur. Fungsinya untuk
menampilkan suatu rangkaian alur yang dikirim antara objek juga interaksi antar objek, suatu yang
terjadi pada titik tertentu dalam eksekusi system.
4.1.2 Login Admin dan User

Gambar 4.2 Sequence Login Admin dan User

4.1.3 Mengelola Product Admin

Gambar 4.3 Mengelola Product admin

4.1.4 Mengelola Product User

Gambar 4.4 Mengelola Product User

4.1.5 Mengelola Product Detail Admin

Gambar 4.5 Mengelola Product Detail Admin

4.1.6 Melihat Product Admin

Gambar 4.6 Melihat Product Admin

4.1.7. Melihat Product User

Gambar 4.7 Melihat Product User

4.1.8 Melihat Product Detail Admin

Gambar 4.8 Melihat Product Detail Admin

4.1.9 Class Diagram

Gambar 4.9 Class Diagram

4.1.10 ERD

Gambar 4.10 ERD

4.2 Rancangan Tabel
Merancang Suatu system biasanya di perlukan data yang di kelolah dalam sebuah system
yang menghasilkan suatu inputan data, di perlukan database sebagai penyimpanan data yang
disimpan pada table – table seperti berikut :
1. Table User Login
Tabel user login digunakan menambah user untuk mendapatkan akses pada inventory stok
barang. Berikut struktur tabel user login :

Nama Jenis Ekstra Primary

Id Int(5) AUTO_INCREMENT X
username Varchar(30)
password Varchar(30)

Table 4.1 Table user Login

2. Table Admin Login

Tabel admin logindigunakan menambah user untuk mendapatkan akses pada inventory stok
barang. Berikut struktur tabel admin login:

Nama Jenis Ekstra Primary

username Varchar(30) AUTO_INCREMENT X
first_name Varchar30)
last_name Varchar(30)
mobile Int(15)
email Varchar(30)
password Varchar(50)

Table 4.2 Table Admin Login

 3. Table Product
Tabel product digunakan untuk menyimpan data barang yang berisi product_name, product_id,
quantity, tgl, masuk, keluar, batch, expt_date. Berikut struktur tabel product :
Nama Jenis Ekstra Primary
Product_id Int(20) AUTO_INCREMENT X
Product_name Varchar30)
Price Float
Quantity Int(10)
Tgl Date
masuk Int(10)
Keluar Int(10)
Batch Varchar(50)
Exp_date date

Table 4.3 Table Product

 4. Table Product Detail
Tabel product detail digunakan untuk menyimpan data barang yang berisi product_name,
product_id, quantity, tgl, masuk, keluar, batch, expt_date, prod_id. Berikut struktur tabel product
detail :

Nama Jenis Ekstra Primary

Product_id1 Int(20) AUTO_INCREMENT X
Product_name Varchar30)
Price Float
Quantity Int(10)
Tgl Date
masuk Int(10)
Keluar Int(10)
Batch Varchar(50)
Exp_date date
Prod_id Int(11)

Table 4.4 Table Product Detail

4.3 Desain I/O (input/Output)
4.3.1 Desain I/O Aplikasi Mobile
a. Halaman Login

Gambar 4.11 Halaman Login

b. Halaman Register

Gambar 4.12 Halaman Register

c. Halaman Menu

Gambar 4.13 Halaman Menu

d. Halaman Detail

Gambar 4.14 Halaman Detail

e. Halaman Tambah Barang

Gambar 4.15 Halaman Tambah Barang

f. Halaman Update Barang

Gambar 4.16 Halaman Update Barang

4.3.2 Desain I/O Webiste

a. Halaman Login Website

Gambar 4.17 Halaman Login Website

b. Halaman Dashboard

Gambar 4.18 Halaman Dashboard

c. Halaman Data Barang

Gambar 4.19 Halaman Data Barang

d. Halaman Tambah Barang

Gambar 4.20 Halaman Tambah Barang

e. Halaman Update Barang

Gambar 4.21 Halaman Update Barang

f. Halaman Detail Barang

Gambar 4.22 Halaman Detail Barang

4.4 Implementasi
Pada tahapan implementasi ini, akan dijelaskan mengenai tampilan antar muka dari aplikasi
Sistem informasi Pengelolaan Stok Barang Inventory beserta fitur didalamnya.
4.4.1 Aplikasi Mobile
1. Tampilan Login

Gambar 4.23 Tampilan Login

Tampilan login digunakan untuk login admin/user, dengan mengisi username dan
password.
2. Register

Gambar 4.24 Tampilan Register

Tampilan Register ini digunakan untuk mendapatkan user pada saat login.
 3. Tampilan Stok Barang dan Detail Barang

Gambar 4.25 Tampilan Stok Barang dan Detail Barang

Pada Tampilan Stok Barang dan Detail ini untuk memberikan informasi stok dan jenis
barang. Pada tampilan ini admin/user dapat juga menambahkan stok barang yang dating/baru
dating, user ini juga bisa mengedit dan menghapus.
 4. Tampilan Insert Data

Gambar 4.26 Tampilan Insert Data

Pada tampilan Insert ini digunakan untuk menambahkan barang yang baru atau
menambahkan stok barang.
 5. Tampilan Update Data Barang

Gambar 4.27 Tampilan Update Data Barang

Pada Tampilan Update Data Barang digunakan untuk mengupdate stok barang jika stok
barang yang tersebut sudah berkurang atau habis.
4.4.2 Website
1. Halaman Login

Gambar 4.28 Tampilan Login Web

Halaman login digunakan untuk admin masuk dalam sistem. Untuk dapat mengakses halaman
admin, harus melakukan login dengan memasukkan username dan password admin

2. Halaman Dashboard

Gambar 4.29 Tampilan Dashboard

Setelah login maka akan masuk ke dalam dashboard admin, yang berisikan menu – menu.
 3. Form Data Barang

Gambar 4.30 Tampilan Form Data Barang

Halaman form data barang merupakan halaman untuk menambah data barang dan melihat
barang yang sudah di upload. Pada halaman ini juga bisa mengedit dan menghapus data.
4. Form Insert Barang

Gambar 4.31 Tampilan Insert Barang

Menu Tampilan Insert Data Barang Web adalah menu untuk menambah data barang dan
mengisi form-form yang akan di tambah pada barang tersebut.

5. Form Update Barang

Gambar 4.32 Tampilan Update Barang

Menu Tampilan Update Data Barang Web adalah menu untuk mengedit data barang dan
mengisi form-form yang akan di edit pada barang tersebut.
6. Form Detail Barang

Gambar 4.34 Tampilan Form Detail Barang

Menu Tampilan Detail Barang adalah menu hanya mengetahui satu barang menjadikan stok
perharian barang masuk dan keluarnya.
7. Form Insert Item Detail

Gambar 4.35 Tampilan Form Insert Item Detail

Menu Tampilan Insert Item Detail adalah menu untuk menambah satu data barang dan mengisi
form-form yang akan di tambah pada barang tersebut.