1. Judul Aplikasi Inventaris barang.

(1)

1. Judul Aplikasi

Inventaris barang.

2. Gambaran Aplikasi 1.1. Latar Belakang

Inventaris Barang merupakan daftar persediaan barang yang disimpan suatu perusahaan/instansi. Inventaris barang digunakan untuk mengetahui jumlah barang yang tersedia, menghindari kesalahan akibat kerusakan, kehilangan atau penyelewengan oleh oknum yang tidak bertanggung jawab, juga dapat membantu perhitungan kas, aktiva, piutang serta hutang perusahaan/instansi. Dinas Komunikasi dan Informatika Kota Salatiga biasanya hanya melakukan pencatatan manual untuk inventaris barang, dengan beberapa kriteria yaitu nomor ID, nama barang, merk barang, type barang, tahun perolehan dan jumlah barang.

Dinas Komunikasi dan Informatika merupakan suatu instansi yang bergerak di bidang Komunikasi dan Informatika. Dinas Komunikasi dan Informatika sering mendapatkan supply barang dari pemerintah pusat. Untuk pendataan barang maka dibutuhkan sebuah aplikasi sebagai tempat pendataan barang agar tidak perlu dilakukan secara manual lagi.

Pembangunan Aplikasi Inventaris Barang berbasis Web dengan PHP dan MySQL menggunakan framework bootstrap bermaksud untuk membantu instansi dalam mendata stock barang yang tersedia. Framework bootstrap merupakan framework CSS terpopuler. Framework ini memiliki segudang fungsi dengan elemen desain yang responsif. Bootstrap juga merupakan yang pertama kali mempunyai filosofi "Mobile First"[1]. PHP merupakan bahasa pemograman berbasis web yang digunakan untuk membuat website yang dinamis. Kemudian, MySQL merupakan sebuah perangkat lunak sistem manajemen basis data atau DBMS yang multithread, multiuser atau merupakan sistem yang digunakan untuk mengolah database.

1.2. Deskripsi Singkat Aplikasi

Aplikasi ini dibuat menggunakan Framework CSS yaitu bootstrap yang di bangun

menggunakan PHP dan MySQL sebagai kerangka kerja. Aplikasi inventaris barang

merupakan aplikasi yang dapat digunakan untuk mempermudah pendataan stock yang

tersedia. Aplikasi ini dapat menampilkan stock barang yang tersedia. Aplikasi ini

direncanakan hanya dapat diakses oleh admin, yaitu untuk mengubah data stock

barang.

(2)

1.3. Use Case Diagram

Use Case Diagram adalah sebuah teknik yang menggambarkan hubungan interaksi antara sistem dan aktor yang dapat mendeskripsikan interaksi antara si pengguna sistem dengan sistemnya.

Berikut ini merupakan Use Case Diagram dalam membangun aplikasi inventaris barang.

Gambar 1.3 Use Case Diagram dalam aplikasi inventaris barang.

Gambar 1.3 di atas merupakan gambar dari Use Case Diagram aplikasi inventaris barang. Pada Use Case Diagram inventaris barang memiliki 1 aktor utama yaitu :

 Admin, dari Use Case Diagram di atas dapat dilihat bahwa admin memiliki

hak untuk mengolah data stock barang, seperti menambah barang, mengedit

barang, menghapus barang dan meng-export data stock barang.

(3)

2. User Manual 2.1. Struktur Menu

Dalam aplikasi inventaris terdapat 1 role yang memiliki hak akses, 1 role tersebut yaitu admin. Admin memiliki struktur menu tersendiri berdasarkan hak aksesnya dan berikut merupakan struktur menu utama dari aplikasi inventaris barang :

1.

Admin

 Login

 Dashboard

 Stock Barang

 Nomor ID

 Nama Barang

 Merk Barang

 Type Barang

 Tahun Perolehan

 Stock

 Edit Barang

 Delete Barang 2.2. Login

Gambar 2.1 Halaman Login.

(4)

Pada gambar 2.1 di atas merupakan halaman login. Untuk login pada aplikasi ini user diminta untuk memasukan email dan password, user yang memasukan email dan password dengan benar maka akan masuk dan diarahkan ke halaman Dashboard.

2.3 Dashboard

Gambar 2.2 Halaman Dashboard

Pada gambar 2.2 di atas merupakan halaman Dashboard. Saat pertama kali login dan login berhasil maka akan langsung diarahkan ke halaman Dashboard.

2.3.1 Stock Barang

Gambar 2.3 Halaman Stock Barang

(5)

Pada gambar 2.3 di atas merupakan halaman Stock Barang. Pada halaman ini terdapat bagian tambah barang, export data, informasi barang, edit dan delete.

Button edit dan delete akan muncul ketika sudah ada inputan data.

Gambar 2.4 Modal tambah stock barang

Gambar 2.5 Modal tambah stock barang

(6)

Gambar 2.6 Halaman stock barang

Pada Gambar 2.4 di atas merupakan halaman menu tambah stock barang.

Jika di klik maka akan muncul modal seperti Gambar 2.4 di atas, pada modal tersebut terdapat beberapa form yang harus di isi. Pada Gambar 2.5 terdapat contoh modal yang sudah terisi. Kemudian, ketika button submit di klik maka akan muncul seperti Gambar 2.6 di atas. Data tersebut dapat kita ubah dengan klik button Edit, dan jika ingin menghapus klik button Delete.

Gambar 2.7 Modal edit

(7)

Gambar 2.8 Modal delete

Pada Gambar 2.7 di atas merupakan modal menu edit. Jika button edit pada halaman stock barang di klik maka akan muncul modal seperti gambar 2.7. Pada modal tersebut terdapat form yang bisa di edit. Kemudian, pada Gambar 2.8 terdapat modal delete. Jika button delete pada halaman stock barang di klik maka akan muncul modal seperti gambar 2.8. Jika button hapus di klik, maka data akan terhapus.

2.3.2 Export Data

Gambar 2.14 Halaman export data

Pada Gambar 2.14 terdapat halaman export data yang berisi rekap data

stock barang. Pada bagian export data, user dapat meng-export data ke dalam

bentuk excel, PDF dan dapat juga mencetak(print) rekap data tersebut.

(8)

3. Hasil Pengujian A. Pengujian Alpha

Dalam pembuatan aplikasi ini sebelum dipakai oleh public, sebuah aplikasi harus masuk ke dalam tahap pengujian sistem. Pengujian sistem bertujuan untuk mengetahui apakah aplikasi dapat berjalan menurut fungsinya atau tidak. Berikut merupakan pengujian sistem alpha pada aplikasi inventaris barang yang dapat dijelaskan dalam bentuk tabel di bawah ini.

Tabel 3.1 Pengujian Alpha Inventaris Barang IKP Diskominfo

No. Titik

Pengujian Data Input Data

Output Hasil Uji Coba Status

Uji

1 Uji halaman login

Email dan

Password -

Aplikasi dapat memverifikasi email dan password yang sudah terdaftar pada

sistem dan

memberikan notifikasi jika terjadi kesalahan penginputan

Clear

2 Menampilkan halaman dashboard admin

- Data Stock

Barang

Aplikasi dapat menampilkan daftar data stock barang yang tersedia.

Clear

3 Menambah Daftar Barang

Nama, Merk, Type, Tahun Perolehan dan Stock Barang.

Data Stock Barang

Aplikasi dapat menambahkan daftar barang yang di input.

Clear

4 Meng-edit data barang

Nama, Merk, Type, Tahun Perolehan dan Stock Barang

Data Stock Barang

Aplikasi dapat menampilkan daftar data stock barang yang di input.

Clear

(9)

5 Menghapus

Data Barang -

Data Stock Barang terhapus.

Aplikasi dapat menghapus daftar barang yang di hapus.

Clear

6 Meng-export

data barang Data Barang File Excel, PDF, Print

Aplikasi dapat meng- export data pada excel, PDF, dan dapat mencetak/print data.

Clear

B. Pengujian Beta

Aplikasi inventaris barang ini merupakan aplikasi private yang dimiliki perusahaan, dengan begitu pengujian beta pada aplikasi ini dilakukan dengan memberikan kuesioner kepada 5 orang yang terdiri dari 5 karyawan di Dinas Komunikasi dan Informatika yang telah menggunakan aplikasi ini. Berikut ini merupakan daftar pertanyaan kuesioner yang diberikan:

1. Apakah tampilan menu dalam aplikasi mudah untuk dikenali?

2. Apakah aplikasi mudah dioperasikan?

3. Apakah aplikasi ini sesuai dengan kebutuhan?

4. Apakah fitur pada aplikasi mudah digunakan?

5. Apakah aplikasi memberikan informasi yang mudah dipahami?

Skala penilaian yang diberikan pada setiap pertanyaan yaitu 1 – 5.

• Sangat Setuju = 5

• Setuju = 4

• Netral = 3

• Tidak Setuju = 2

• Sangat Tidak Setuju = 1

(10)

Tabel 3.2 Pengujian beta jumlah jawaban kuesioner

Pertanyaan

Jumlah Jawaban

1 2 3 4 5

1 - - - - 5

2 - - - 1 4

3 - - - - 5

4 - - - 2 3

5 - - 3 2 -

Pada tabel 3.2 di atas merupakan data jawaban dari kuesioner yang telah disebar kemudian dibentuk skala likert. Skala likert digunakan untuk menghitung persentase dari masing – masing pertanyaan. Berikut ini rumus persamaan skala likert.

Indeks Kesesuaian Kasar (%) = (Total Skor/ Skor Maksimum) x 100%

Tabel 3.3 Hasil Persentase Kuesioner

Berdasarkan tabel 3.3 di atas dapat disimpulkan bahwa 50% responden menyatakan menu atau fitur aplikasi menu mudah dikenali, 48% responden menyatakan aplikasi mudah dioperasikan, 50% responden menyatakan aplikasi sesuai dengan kebutuhan, 46%

responden menyatakan fitur pada aplikasi ini mudah digunakan, 34% responden menyatakan aplikasi memberikan informasi yang mudah dipahami.

Pertanyaan Skala Penilaian * Frekuensi Kemunculan Data Total Skor

IKK (%)

1 2 3 4 5

1 - - - - 25 25 50%

2 - - - 4 20 24 48%

3 - - - - 25 25 50%

4 - - - 8 15 23 46%

5 - - 9 8 - 17 34%

(11)

4. Lampiran

4.1 Surat Keterangan Lulus Uji

(12)

4.2 Source Code

Source Code di atas merupakan bagian dari halaman login.php. Nomor 4-5 berfungsi untuk redirect ke halaman selanjutnya setelah berhasil login. Nomor 7 berfungsi untuk kembali ke halaman login jika gagal. Nomor 10-14 berfungsi untuk tetap di halaman login ketika gagal, ke halaman home ketika berhasil login.

Source code di atas merupakan bagian dari cek.php. Source code ini berfungsi untuk memeriksa jika belum login maka akan di redirect ke halaman login.

1 $hitung = mysqli_num_rows($cekdatabase);

2

3 if($hitung>0){

4 $_SESSION['log'] = 'True';

5 header('location:index.php' 6 } else {

7 header('location:login.php') ; 8 };

9 };

10 if(!isset($_SESSION['log'])){

11

12 } else {a

13 header('location:index.php');

14 }

1 <?php

2 if(isset($_SESSION['log'])){

3

4 } else {

5 header('location:login.php');

6 } 7 ?>

(13)

Source code di atas terdapat pada index.php. Nomor 3 merupakan method untuk mengambil semua data stock pada database. Kemudian, nomor 4-32 merupakan method looping

1 <?php 2

3 $ambilsemuadatastock = mysqli_query($conn," SELECT * from stock 4 $i = 1;

5 while($data=mysqli_fetch_array($ambilsemuadatastock)){

6

7 $idb = $data['idbarang'];

8 $namabarang = $data['namabarang'];

9 $merk = $data['merk'];

10 $type = $data['type'];

11 $thn = $data['thn'];

12 $stock = $data['stock'];

13 14 ?>

15 16 <tr>

17 <td><?php echo $i++;?></td>

18 <td><?php echo $idb;?></td>

19 <td><?php echo $namabarang;?></td>

20 <td><?php echo $merk;?></td>

21 <td><?php echo $type;?></td>

22 <td><?php echo $thn;?></td>

23 <td><?php echo $stock;?></td>

24 <td>

25 <button type="button" class="btn btn-warning" data- toggle="modal" data-target="#edit<?=$idb;?>">

26 Edit

27 </button>

28 <button type="button" class="btn btn-danger" data- toggle="modal" data-target="#delete<?=$idb;?>">

29 Delete

30 </button>

31 </td>

32 </tr>

(14)

1

2 <div class="modal fade" id="edit<?=$idb;?>">

3 <div class="modal-dialog">

4 <div class="modal-content">

5 6

7 <div class="modal-header">

8 <h4 class="modal-title">Edit Barang</h4>

9 <button type="button" class="close" data- dismiss="modal">×</button>

10 </div>

11 12

13 <form method="post">

14 <div class="modal-body">

15

16<input type="text" name="namabarang" value="<?=$namabarang;?>" pla ceholder="Nama Barang" class="form-control" required>

17 <br>

18

<input type="text" name="merk" value="<?=$merk;?>" placeholder="Merk Barang" class="form-control" required>

19 <br>

20

<input type="text" name="type" value="<?=$type;?>" placeholder="Type Barang" class="form-control" required>

21 <br>

22

<input type="text" name="thn" value="<?=$thn;?>" placeholder="Tahun Perolehan" class="form-control" required>

23 <br>

24

<input type="number" name="stock" value="<?=$stock;?>" placeholder="

Stock" class="form-control" required>

25 <br>

26 <input type="hidden" name="idb" value="<?=$idb;?>">

27 <button type="submit" class="btn btn- primary" name="updatebarang">Submit</button>

28 </div>

29 </form>

30

31 </div>

32 </div>

33 </div>

(15)

Source code di atas merupakan method dari index.php. Method diatas merupakan modal dari edit. Pada nomor 12-29 merupakan modal body yang berfungsi untuk ketika button edit di klik maka ada modal yg berisi form nama barang, merk barang, type barang, tahun perolehan dan stock barang yang akan di isi.

Source code di atas merupakan method dari index.php. Method di atas merupakan modal dari delete. Pada nomor 12-21 merupakan modal body yang berfungsi untuk ketika button delete di klik maka ada modal yg berisi pilihan untuk menghapus.

1

2 <div class="modal fade" id="delete<?=$idb;?>">

5

6

8 <h4 class="modal-title">Hapus Barang?</h4>

10</div>

11

12

15 Apakah anda yakin ingin menghapus <?=$namabarang;?>?

16 <input type="hidden" name="idb" value="<?=$idb;?>">

17 <br>

18 <br>

19 <button type="submit" class="btn btn- danger" name="hapusbarang">Hapus</button>

20 </div>

21 </form>

22

23 </div>

24 </div>

25 </div>

(16)

Source code di atas merupakan method dari index.php. Method di atas merupakan modal dari tambah barang. Pada nomor 12-27 merupakan modal body yang berfungsi untuk ketika button tambah barang di klik maka ada modal yg berisi

1

2 <div class="modal fade" id="myModal">

5

6

8 <h4 class="modal-title">Tambah Barang</h4>

10 </div>

11

12

15 16

17 <br>

18

19 <br>

20

21 <br>

22

23 <br>

24 <input type="number" name="stock" class="form- control" placeholder="Stock" required>

25 <br>

26 <button type="submit" class="btn btn- primary" name="addnewbarang">Submit</button>

27 </div>

28 </form>

(17)

form nama barang, merk barang, type barang, tahun perolehan, dan stock barang yang akan di isi dan pada nomor 23 terdapat method button submit.

.

Source code di atas berfungsi membuat koneksi ke database.

Source code di atas merupakan bagian dari function.php. Method di atas berfungsi untuk menambah barang baru. Pada nomor 1 terdapat fungsi isset() yang akan menghasilkan nilai true jika variabel 'addnewbarang' telah di defenisikan, dan false jika variabel 'addnewbarang' tersebut belum dibuat. Kemudian pada nomor 2-6 terdapat fungsi $_POST yang berfungsi untuk memanggil data yang telah di- input-kan agar bisa ditampilkan di file. Pada nomor 8 terdapat method yang berfungsi untuk memasukkan semua data ke dalam table. Kemudian nomor 9-14 berfungsi untuk memeriksa input berhasil atau tidak.

1 <?php

2 session_start();

3 $conn = mysqli_connect("localhost","root","","inventarisbarang");

1 if(isset($_POST['addnewbarang'])){

2 $namabarang = $_POST['namabarang'];

3 $merk = $_POST['merk'];

4 $type = $_POST['type'];

5 $thn = $_POST['thn'];

6 $stock = $_POST['stock'];

7

8 $addtotable = mysqli_query($conn,"insert into stock (namabarang , merk,type

,thn,stock) values('$namabarang','$merk','$type','$thn','$stock')");

9 if($addtotable){

11 } else {

12 echo 'Gagal';

14 } 15 };

(18)

Source code di atas merupakan bagian dari function.php. Method di atas berfungsi untuk meng-update info barang. Pada nomor 1 terdapat fungsi isset() yang akan menghasilkan nilai true jika variabel 'updatebarang' telah didefenisikan, dan false jika variabel 'updatebarang' tersebut belum dibuat. Kemudian pada nomor 2-7 terdapat fungsi $_POST yang berfungsi untuk memanggil data yang telah di-input-kan agar bisa ditampilkan di file. Pada nomor 9 terdapat method yang berfungsi untuk memasukkan semua data yang sudah di update ke dalam table Kemudian nomor 10-15 berfungsi untuk memeriksa apakah update berhasil atau tidak.

1 if(isset($_POST['updatebarang'])){

2 $idb = $_POST['idb'];

3 $namabarang = $_POST['namabarang'];

4 $merk = $_POST['merk'];

5 $type = $_POST['type'];

6 $thn = $_POST['thn'];

7 $stock = $_POST['stock'];

8

9 $update = mysqli_query($conn,"update stock set namabarang ='$

namabarang', merk='$merk', type='$type', thn='$thn', stock='$s tock' where idbarang='$i db'");

10 if($update){

12 } else {

13 echo 'Gagal';

15 } 16 }

(19)

Source code di atas merupakan bagian dari function.php. Method di atas berfungsi untuk menghapus barang dari stock. Pada nomor 1 terdapat fungsi isset() yang akan menghasilkan nilai true jika variabel 'hapusbarang' telah didefenisikan, dan false jika variabel 'hapusbarang' tersebut belum dibuat. Kemudian pada nomor 1-2 terdapat fungsi $_POST yang berfungsi untuk memanggil data yang telah di- input-kan agar bisa ditampilkan di file. Pada nomor 3 terdapat method yang berfungsi untuk menghapus semua data dari stock. Kemudian nomor 4-9 berfungsi untuk memeriksa apakah data berhasil dihapus atau tidak.

Source code di atas berfungsi sebagai koneksi ke database.

1 if(isset($_POST['hapusbarang'])){

2 $idb = $_POST['idb'];

3

4 $hapus = mysqli_query($conn,"delete from stock where idbarang

='$idb'");

5 if($hapus){

7 } else {

8 echo 'Gagal';

10 } 11 12 };

1 <?php

2 require 'function.php';

3 require 'cek.php';

4 ?>

(20)

<html>

<head>

<title>Stock Barang</title>

</head>

body>

<h2>Stock Barang</h2>

<table class="table table-

bordered" id="mauexport" width="100%" cellspacing="0">

<thead>

<tr>

<th>Nama Barang</th>

<th>Tahun Perolehan</th>

<th>Stock</th>

</tr>

</thead>

(21)

<tbody>

<?php

$ambilsemuadatastock = mysqli_query($conn," SELECT * from stock ");

$i = 1;

while($data=mysqli_fetch_array($ambilsemuadatastock)){

$namabarang = $data['namabarang'];

$merk = $data['merk'];

$type = $data['type'];

$thn = $data['thn'];

$stock = $data['stock'];

$idb = $data['idbarang'];

?>

<tr>

</tr>

</div>

<?php };

?>

</tbody>

</table>

</div>

$(document).ready(function() {

$('#mauexport').DataTable( { dom: 'Bfrtip',

buttons: [

'excel', 'pdf', 'print' ]

} );

</script>

(22)

Source code di atas merupakan bagian dari export.php. Export data menggunakan framework Datatables.

min.js"></script>

</body>

</html>

(23)

5. Daftar Pustaka

[1] Bootstrap. Diakses melalui https://www.niagahoster.co.id/blog/apa-itu-f ramework/#3_Framework_PHP [Diakses : 11 September 2021].

[2] PHP dan MySQL. Diakses melalui https://surabaya.proxsisgroup.com/pengertian-php- mysql-untuk-pemula/ [Diakses : 11 September 2021].

[3] Use Case Diagram. Diakses melalui https://www.dicoding.com/blog/contoh-use-case- diagram/ [Diakses : 8 November 2021]

[4] Ridwan Setiawan, Andri Ikhawana, Enden Rahayu "Pengembangan Aplikasi Pengelolaan Inventaris Barang Berbasis Web Di Sekolah Tinggi Teknologi Garut" Jurnal Algoritma, Vol.14, No.2, pp. 452-462, 2017.

[5] Budi Utami Fahnun, Handoko Dwi Hartono, Yuli Karyanti "Perancangan Sistem Inventory Berbasis Web (Studi Kasus PT. Continental Panjipratama)" Jurnal Ilmiah Fifo, Vol.6, No.1, pp 8-14, 2014.