RANCANG BANGUN SISTEM INFORMASI PERSEDIAAN BARANG BERBASIS WEB PADA UD ISTANA BANGUNAN PURWASARI KARAWANG

(1)

RANCANG BANGUN SISTEM INFORMASI

PERSEDIAAN BARANG BERBASIS WEB PADA

UD ISTANA BANGUNAN PURWASARI KARAWANG

Manual Book Penggunaan Aplikasi Rancang Bangun Sistem

Informasi Persediaan UD Istana Bangunan Purwasari

OCTA MANARITIR LUMBANTOBING 11171463

INDAH LESTARI HALIM 11170532

Program Studi Sistem Informasi Akuntansi Kampus Kabupaten Karawang

Fakultas Teknik dan Informatika

Universitas Bina Sarana Informatika

(2)

(3)

1

TUTORIAL PENGGUNAAN APLIKASI WEB

PERSEDIAAN BARANG UD ISTANA BANGUNAN

PURWASARI KARAWANG

1.1 Admin

1) Login

1) Masukan URL http://localhost/istanabangunan/admin (belum di hosting) 2) Masukan Username : admin@istanabangunan.com dan Password .: admin

2) Mengelola Data Barang

1) Melihat Data Barang

- Pilih menu Master Data pada dashboard, kemudian pilih data barang, nanti akan muncul data-data barang yang telah diinput.

(4)

2) Menambahkan Data Barang

- Pilih menu Master Data pada dashboard, kemudian pilih data barang, nanti akan muncul form tambah barang yang harus diisi semuanya.

3) Mengedit dan Menghapus Data Barang

- Pilih menu Master Data pada dashboard, kemudian pilih data barang, nanti akan muncul data-data barang.

- Selanjutnya, pilih tombol edit atau delete pada tabel data barang.

3) Mengelola Data Supplier

1) Melihat Data Supplier

- Pilih menu Master Data pada dashboard, kemudian pilih data supplier, nanti akan muncul data-data supplier yang telah diinput.

2) Menambahkan Data Supplier

- Pilih menu Master Data pada dashboard, kemudian pilih data supplier, nanti akan muncul form tambah supplier yang harus diisi semuanya.

(5)

3) Mengedit dan Menghapus Data Supplier

- Pilih menu Master Data pada dashboard, kemudian pilih data supplier, nanti akan muncul data-data supplier.

- Selanjutnya, pilih tombol edit atau delete pada tabel data supplier.

4) Mengelola Data Customer

1) Melihat Data Customer

- Pilih menu Master Data pada dashboard, kemudian pilih data customer, nanti akan muncul data-data customer yang telah diinput.

2) Menambahkan Data Customer

- Pilih menu Master Data pada dashboard, kemudian pilih data customer, nanti akan muncul form tambah customer yang harus diisi semuanya.

(6)

3) Mengedit dan Menghapus Data Customer.

- Pilih menu Master Data pada dashboard, kemudian pilih data customer, nanti akan muncul data-data customer.

- Selanjutnya, pilih tombol edit atau delete pada tabel data customer.

5) Mengelola Data Barang Masuk

1) Melihat Data Barang Masuk

- Pilih menu Transaksi pada dashboard, kemudian pilih barang masuk, nanti akan muncul data-data barang yang telah diinput.

2) Menambahkan Data Barang Masuk

- Pilih menu Transaksi pada dashboard, kemudian pilih barang masuk, nanti akan muncul form tambah barang yang harus diisi semuanya.

(7)

3) Mencetak Transaksi Barang Masuk

- Pilih menu Transaksi pada dashboard, kemudian pilih barang masuk,

nanti akan muncul data-data barang yang telah diinput. - Selanjutnya pilih aksi tombol print.

6) Mengelola Data Barang Keluar

1) Melihat Data Barang Keluar

- Pilih menu Transaksi pada dashboard, kemudian pilih barang keluar, nanti akan muncul data-data barang yang telah diinput.

2) Menambahkan Data Barang Keluar

- Pilih menu Transaksi pada dashboard, kemudian pilih barang keluar, nanti akan muncul form tambah barang yang harus diisi semuanya.

3) Mencetak Transaksi Barang Keluar

- Pilih menu Transaksi pada dashboard, kemudian pilih barang keluar,

(8)

- Selanjutnya pilih aksi tombol print.

7) Mengelola Laporan Barang Masuk

1) Mencari Laporan Barang Masuk

- Pilih menu Laporan pada dashboard, kemudian pilih laporan barang masuk, lalu masukan tanggal laporan yang diinginkan klik Cari.

- Laporan barang yang diinginkan akan keluar. 2) Mencetak Laporan Barang Keluar.

- Pilih menu Laporan pada dashboard, kemudian pilih laporan barang keluar, lalu masukan tanggal laporan yang diinginkan klik Print.

(9)

8) Mengelola Laporan Barang Keluar

1) Mencari Laporan Barang Keluar

- Pilih menu Laporan pada dashboard, kemudian pilih laporan barang keluar, lalu masukan tanggal laporan yang diinginkan klik Cari.

- Laporan barang yang diinginkan akan keluar. 2) Mencetak Laporan Barang Keluar.

- Pilih menu Laporan pada dashboard, kemudian pilih laporan barang keluar, lalu masukan tanggal laporan yang diinginkan klik Print.

(10)

9) Melihat Laporan Stok Barang

1) Mencari Laporan Barang Keluar

- Pilih menu Laporan pada dashboard, kemudian pilih laporan stok , nanti akan muncul data-data stok akhir barang yang tersedia berikut jumlah seluruh barang yang masuk dan keluar.

(11)

10) Mengelola Data Admin

1) Melihat Data Admin

- Pilih menu Admin pada dashboard, kemudian pilih data admin, nanti akan muncul data admin yang telah diinput.

2) Menambahkan Data Admin

- Pilih menu Admin pada dashboard, kemudian pilih data admin nanti akan muncul form tambah admin yang harus diisi semuanya.

3) Mengedit dan Menghapus Data Admin

- Pilih menu Admin pada dashboard, kemudian pilih data admin, nanti akan muncul data-data admin.

(12)

1.2 Kepala Toko

1) Login

1) Masukan URL http://localhost/istanabangunan/kepalatoko (belum di hosting)

2) Masukan Username : kepalatoko@istanabangunan.com dan Password .: kepalatoko.

2) Mellihat Laporan

1) Setelah masuk ke dashboard, Klik Menu Laporan terdapat tiga jenis laporan yang bisa dilihat oleh kepala toko.

2) Pilih Laporan Barang Masuk untuk melihat jumlah barang yang masuk pada tanggal yang dipilih..

3) Pilih Laporan Barang Keluar untuk melihat jumlah barang yang keluar pada tanggal yang dipilih.

(13)

4) Pilih Laporan Stok untuk melihat jumlah keseluruhan stok yang ada digudang .

(14)

12 BAB II

TAMPILAN APLIKASI

2.1. File Master

Form master adalah form yang berisi objek-objek yang harus ada disebuah unit kerja atau bisa disebut juga tabel yang bisa berdiri sendiri.

Contoh nya dalam aplikasi yang kita buat yaitu ada tabel Data Barang. Menu master data barang ini berfungsi untuk menyimpan data barang.

(15)

2.2. Rancangan form transaksi

Form transaksi adalah form yang ada karena adanya table induk atau table master. Contoh nya table barang keluar, table barang keluar ini berfungsi untuk menyimpan data barang yang sudah keluar dari gudang.

Implementasi form transaksi tambah barang keluar bisa di lihat seperti berikut:

2.3. Listing Program

A. Form Login

<head>

(16)

</head> <body> <header>

</div> </header>

(17)

<div class="mainwrapper"> <div class="leftpanel"> <?php include 'navleft.php'; ?> </div> <div class="mainpanel"> <?php include 'koneksi.php'; $pages_dir = 'page'; if(!empty($_GET['p'])){ $pages = scandir($pages_dir, 0); unset($pages[0], $pages[1]); $p = $_GET['p']; if(in_array($p.'.php', $pages)){ include($pages_dir.'/'.$p.'.php'); } else { ?> <script type="text/javascript"> document.location="notfound.html"; </script> <?php } } else { include 'content.php'; } ?> <div class="row">

(18)

<footer style="padding: 10px;background-color: #09c401;color: white;"> UD Istana Bangunan </footer> </div> </div> </div> </div> </section> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery-ui-1.10.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/modernizr.min.js"></script> <script src="js/pace.min.js"></script> <script src="js/retina.min.js"></script> <script src="js/jquery.cookies.js"></script> <script src="js/jquery.autogrow-textarea.js"></script> <script src="js/jquery.mousewheel.js"></script> <script src="js/jquery.tagsinput.min.js"></script> <script src="js/toggles.min.js"></script> <script src="js/bootstrap-timepicker.min.js"></script> <script src="js/jquery.maskedinput.min.js"></script>

(19)

(20)

// Date Picker jQuery('#datepicker').datepicker(); jQuery('#sampai').datepicker( { dateFormat : 'yy-mm-dd' } ); jQuery('#dari').datepicker({ dateFormat : 'yy-mm-dd' }); jQuery('#datepicker-inline').datepicker(); jQuery('#datepicker-multiple').datepicker({ numberOfMonths: 3, showButtonPanel: true }); // Input Masks jQuery("#date").mask("99/99/9999"); jQuery("#phone").mask("(999) 999-9999"); jQuery("#ssn").mask("999-99-9999"); // Select2 jQuery("#select-basic, #select-multi").select2(); jQuery('#select-search-hide').select2({ minimumResultsForSearch: -1 });

(21)

function format(item) {

return '<i class="fa ' + ((item.element[0].getAttribute('rel') === undefined)?"":item.element[0].getAttribute('rel') ) + ' mr10"></i>' + item.text;

}

// This will empty first option in select to enable placeholder // jQuery('select option:first-child').text('');

jQuery("#select-templating").select2({ formatResult: format,

formatSelection: format,

escapeMarkup: function(m) { return m; } });

jQuery("#select22").select2({ formatResult: format, formatSelection: format,

escapeMarkup: function(m) { return m; } });

// Color Picker

if(jQuery('#colorpicker').length > 0) { jQuery('#colorSelector').ColorPicker({ onShow: function (colpkr) {

jQuery(colpkr).fadeIn(500); return false;

},

onHide: function (colpkr) { jQuery(colpkr).fadeOut(500); return false;

(22)

},

onChange: function (hsb, hex, rgb) {

jQuery('#colorSelector span').css('backgroundColor', '#' + hex); jQuery('#colorpicker').val('#'+hex);

} }); }

// Color Picker Flat Mode

jQuery('#colorpickerholder').ColorPicker({ flat: true,

onChange: function (hsb, hex, rgb) { jQuery('#colorpicker3').val('#'+hex); } }); }); jQuery(document).ready(function(){ jQuery('#basicTable').DataTable({ responsive: true });

var shTable = jQuery('#shTable').DataTable({ "fnDrawCallback": function(oSettings) {

jQuery('#shTable_paginate ul').addClass('pagination-active-dark'); },

(23)

});

// Show/Hide Columns Dropdown jQuery('#shCol').click(function(event){ event.stopPropagation();

});

jQuery('#shCol input').on('click', function() {

// Get the column API object

var column = shTable.column($(this).val());

// Toggle the visibility if ($(this).is(':checked')) column.visible(true); else column.visible(false); });

var exRowTable = jQuery('#exRowTable').DataTable({ responsive: true, "fnDrawCallback": function(oSettings) { jQuery('#exRowTable_paginate ul').addClass('pagination-active-success'); }, "ajax": "ajax/objects.txt", "columns": [ { "class": 'details-control',

(24)

"orderable": false, "data": null, "defaultContent": '' }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" } ], "order": [[1, 'asc']] });

// Add event listener for opening and closing details

jQuery('#exRowTable tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr');

var row = exRowTable.row( tr );

if ( row.child.isShown() ) {

// This row is already open - close it row.child.hide();

tr.removeClass('shown'); }

else {

// Open this row

row.child( format(row.data()) ).show(); tr.addClass('shown');

} });

(25)

// DataTables Length to Select2

// jQuery('div.dataTables_length select').removeClass('form-control input-sm'); // jQuery('div.dataTables_length select').css({width: '60px'}); // jQuery('div.dataTables_length select').select2({ // minimumResultsForSearch: -1 // }); }); function format (d) {

// `d` is the original data object for the row

return '<table class="table table-bordered nomargin">'+ '<tr>'+ '<td>Full name:</td>'+ '<td>'+d.name+'</td>'+ '</tr>'+ '<tr>'+ '<td>Extension number:</td>'+ '<td>'+d.extn+'</td>'+ '</tr>'+ '<tr>'+ '<td>Extra info:</td>'+

'<td>And any further details here (images etc)...</td>'+ '</tr>'+

'</table>'; }

(26)

var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57))

return false; return true; } </script> <script> $(document).ready(function () { $("#kota").select2({

placeholder: "Please Select" });

$("#kota2").select2({

placeholder: "Please Select" });

}); </script> <script>

function angka(evt) {

var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57))

return false; return true; }

</script> </body>

(27)

B. Form Tambah Barang Masuk

<!-- <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>

<li>Dashboard</li> --> </ul>

<h4>Data Barang Masuk</h4> </div>

</div> </div> <div class="contentpanel"> <div class="row">

Tambah</button></a> </div>

<thead> <tr> <th><b>No</b></th> <th><b>Kode</b></th> <th><b>Tanggal</b></th> <th><b>aksi</b></th> </tr> </thead> <tbody> <?php $no=0;

$query_rs_datatables = "SELECT *From barangmasuk "; $rs_datatables = mysql_query($query_rs_datatables) or die(mysql_error());

(28)

while ($row_rs_datatables = mysql_fetch_array($rs_datatables)) { $no++; ?> <tr class="odd gradeX"> <td><?php echo $no ?></td> <td><a href="page.php?p=detailbarangmasuk&id=<?= $row_rs_datatables ['kode_brgmasuk'];?>"><?php echo

$row_rs_datatables['kode_brgmasuk']; ?></a></td>

<td><?php echo $row_rs_datatables['tanggal']; ?></td> <td><a href="print/detailmasuk.php?id=<?=

$row_rs_datatables ['kode_brgmasuk'];?>" target="_blank"><button

type="button" title="Edit" class="btn btn-primary btn-circle"><i class="fa fa-print"></i> </button></a></td> </tr> <?php } ?> </tbody> </table> </div> </div> </div>

C. Form Tambah Barang Keluar

</ul>

<h4>Data Barang Keluar</h4> </div>

</div> </div> <div class="contentpanel"> <div class="row">

(29)

<a href="page.php?p=tbhbrgkeluar"><button type="button" class="btn btn-danger "><span class="fa fa-pencil"></span> Tambah</button></a>

</div>

<thead> <tr> <th><b>No</b></th> <th><b>Kode</b></th> <th><b>Tanggal</b></th> <th><b>aksi</b></th> </tr> </thead> <tbody> <?php $no=0;

$query_rs_datatables = "SELECT *From barangkeluar "; $rs_datatables = mysql_query($query_rs_datatables) or die(mysql_error());

while ($row_rs_datatables = mysql_fetch_array($rs_datatables)) { $no++; ?>

<td><a href="page.php?p=detailbarangkeluar&id=<?= $row_rs_datatables ['kode_brgkeluar'];?>"><?php echo

$row_rs_datatables['kode_brgkeluar']; ?></a></td>

</button></a></td> </tr> <?php } ?> </tbody> </table> </div> </div> </div>