Tampilan Halaman Website - IMPLEMENTASI SISTEM

IMPLEMENTASI SISTEM

5.4 Tampilan Halaman Website

Untuk menjalankan website, pada pengujian Sistem Inventori Barang pada Pangnas Gallery, penulis menggunakan web browser Mozilla Firefox dan Google Chrome setelah web browser dapat dijalankan. Pada kolom pencarian web browser ketikkan pada addres bar http://localhost/inventory untuk

pengetesan halaman utama (form login).

Gambar 5.1 Kolom Pencarian 1. Halaman utama

Halaman utama sistem (form login) merupakan halaman yang pertama kali muncul ketika web browser dibuka. Halaman utama menampilkan username dan password yang akan diisi oleh user. Pada form login, brainware yang dapat mengakses atau menjalankan website ini terbagi menjadi 4 yaitu administrator, sekretaris, gudang, dan pimpinan (pemilik toko).

Pada tampilan sudut kanan halaman Administrator terdapat dua opsi pilihan, ketika user ingin log out dari sistem maka klik button keluar. Selain button keluar, user sebagai Administrator juga dapat mengubah password dengan mengisi form password lama kemudian meng-input password yang baru lalu klik button ubah. Ketika password berhasil di ubah, maka secara otomatis notifikasi localhost password akan tampil seperti gambar berikut:

Gambar 5.7 Halaman ubah password Admin

Gambar 5.8 Form Notifikasi Ubah Password

Gambar 5.9 Halaman Log out Admin

Halaman sekretaris merupakan halaman perencanaan kebutuhan. Sekretaris dapat memeriksa data barang per hari sesuai tanggal yang diinginkan ataupun perbulan. Halaman perencanan ini terhubung dengan localhost data barang.

Pada rincian data barang, sekretaris dapat melihat atau memonitor keadaan stok barang tersedia. Jika salah satu barang sudah mencapai batas jumlah persediaan minimum, maka karyawan toko dapat

membuat daftar perencanaan kebutuhan barang pada pihak gudang.

Gambar 5.10 Halaman Login Sekretaris

Gambar 5.11 Form Sekretaris

Gambar 5.12 Form pencarian data barang

Gambar 5.13 Halaman Localhost Data Barang

Sama pada tampilan menu user sebelumnya, di sudut kanan halaman Sekretaris terdapat dua opsi pilihan, ketika user ingin log out dari sistem maka klik button keluar. Selain button keluar, user sebagai Sekretaris juga dapat mengubah password dengan mengisi form password lama kemudian meng- input password yang baru lalu klik button ubah. Ketika password berhasil di ubah, maka secara otomatis notifikasi localhost password akan tampil seperti gambar berikut:

Gambar 5.14 Halaman Ubah Password Karyawan

Gambar 5.15 Form Notifikasi Localhost

Gambar 5.16 Form Log out Karyawan

4. Tampilan Halaman Gudang

Halaman Gudang ini merupakan halaman yang memuat data barang, proses transaksi barang masuk, transaksi barang keluar, dan laporan bulanan.

Gambar 5.17 Form Log in Gudang

Gambar 5.18 Form Gudang

Pada halaman data barang, pihak gudang dapat meng-input, edit dan hapus daftar barang. Untuk menambah daftar barang yang baru, user harus mengisi form nama barang dan nama pemasok. Contohnya pihak gudang akan menambahkan Sprei My Love pada daftar nama barang dengan Jenis Barang Sprei, selanjutnya pada sistem berhasil ditambahkan namun pada tabel stok tersedia

Gambar 5.19 Halaman Data Barang

Halaman edit data barang merupakan halaman untuk memperbaharui data barang, seperti nama barang dan pemasok kemudian klik button ubah untuk menyimpan hasil data yang telah diperbaharui. Jika ingin membatalkan perintah klik button batal, maka akan kembali pada tampilan data barang awal.

Gambar 5.20 Halaman Edit Data Barang

Halaman entry barang masuk merupakan halaman pengisian form transaksi barang yang akan di beli oleh pihak Family Usaha kepada pemasok sesuai jumlah kebutuhan yang di inginkan. Pengisian form dimulai dari penentuan tanggal transaksi, kemudian kode barang. Ketika form kode barang di klik maka akan tampil localhost data barang, dan user dapat memilih barang yang akan ditambah.

Gambar 5.21 Pengisian Tanggal Barang Masuk

Gambar 5.22 Form Barang Masuk

Halaman notifikasi pada form entry barang masuk secara otomatis akan tampil jika data barang masuk yang di input berhasil ditambahkan.

Gambar 5.23 Halaman Notifikasi

Barang yang telah berhasil ditambahkan, dengan nama barang Sprei My Love dan jenis barang Sprei, secara otomatis telah tersimpan di data barang seperti gambar berikut:

Gambar 5.24 Form Data Barang Masuk

Halaman entry barang keluar merupakan halaman pengisian form transaksi barang yang telah dijual oleh pihak Family Usaha kepada pelanggan.

Pengisian form dimulai dari penentuan tanggal transaksi, kemudian kode barang.

Ketika form kode barang di klik maka akan tampil localhost data barang, dan

Gambar 5.25 Pengisian Tanggal Barang Keluar

Gambar 5.26 Form Barang Keluar

Halaman notifikasi pada form entry barang keluar secara otomatis akan tampil jika data barang keluar yang di input berhasil ditambahkan.

Gambar 5.27 Halaman Notifikasi

Halaman laporan barang keluar merupakan daftar data barang yang keluar selama kurun waktu yang ditentukan. Misalnya pada pengisian tanggal, user ingin mengetahui laporan selama 1 bulan, maka klik button pencarian tanggal awal transaksi hingga tanggal akhir transaksi barang keluar yang dilakukan.

Kemudian klik button cari, secara otomatis laporan barang keluar akan tampil.

Laporan barang keluar tersebut dibawah dapat di unduh melalui Export data ke Ms.Excel sehingga file laporan dapat di simpan atau pun di cetak hasil print out nya.

Gambar 5.28 Form Laporan Barang Masuk

Gambar 5.29 Unduh File Data Barang Masuk

Gambar 5.30 Hasil Unduh File barang Masuk di Ms.Excel

6.1 Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya maka pada bab ini penulis dapat mengambil kesimpulan sebagai berikut:

1. Dengan menggunakan sistem yang baru, pemakaian perangkat komputer yang memanfaatkan fasilitas internet sebagai alat bantu untuk mempermudah penyajian informasi ketersediaan barang dan pengolahan data dapat dilakukan dengan cepat dan tepat.

2. Sistem inventori berbasis web, akan memberikan kemudahan-kemudahan, baik bagi pihak karyawan toko, gudang, dan pemilik toko karena sistem ini nantinya siap akses selama 24 jam.

3. Sistem inventori berbasis web, di buat dengan bahasa pemrograman PHP dan menggunakan MYSQL sebagai database-nya dan memanfaatkan jaringan internet untuk di akses oleh para user yang berkepentingan.

4. Sistem inventori berbasis web, menyediakan menu administrator untuk keperluan manajemen dari website.

6.2 Saran

Berdasarkan kesimpulan di atas maka dapat diberikan beberapa saran yang menjadi bahan pertimbangan bagi pihak Family Usaha Medan dalam menggunakan sistem inventori barang berbasis web, yaitu:

1. Dengan adanya sistem yang telah dirancang, maka Pihak Family Usaha Medan diharapkan dapat memanfaatkan komputer dan fasilitas internet dalam hal penginformasian data barang masuk dan barang keluar, pengolahan data barang, sehingga dapat meningkatkan pelayanan dan efektifitas kerja yang lebih baik.

2. Sistem yang baru hendaknya dilakukan pengoperasian dan perawatan secara optimal dalam penginformasian data dan pengolahan data.

3. Mengadakan pelatihan terhadap pihak terkait yang akan mengoperasikan sistem yang baru. Setelah dirasakan sistem yang baru dapat dioperasikan dengan baik dan bagian terkait telah mampu mengoperasikan sistem tersebut, maka sistem lama dapat digantikan dengan sistem yang baru secara keseluruhan.

Firdaus. 2007. 7 Jam Belajar Interaktif PHP&MySql dengan Dreamweaver.

Maxikom: Palembang

Juju, Dominikus. 2006. Tip dan Trik Desain Web untuk Pemula. Elex Media Komputindo: Jakarta

Mutmainah, Siti. 2005. Proyek Desain Web Berbasi Grafis dengan Dreamweaver dan Fireworks. ANDI: Yogyakarta

Nur Aditya, Alan. 2011. Jago PHP dan MySQL. Dunia Komputer: Bekasi Perangin-angin, Kasiman. 2006. Aplikasi Web Dengan PHP dan MySQL. ANDI:

Yogyakarta

Raharjo, Budi. 2011. Belajar Pemrograman Web. Modula: Bandung

Tauri, M.D. 1989. Analisis dan Perancangan Sistem: Pengolahan Data, Jakarta

Lampiran

PERANCANGAN INVENTORY PADA PERUSAHAAN FAMILY USAHA<span class="subtitle">Silahkan login untuk masuk.</span></h1>

<?php include("login.php") ?>

</div>

</div>

</div>

jQuery.noConflict();

jQuery(document).ready(function(){

var anievent = (jQuery.browser.webkit)? 'webkitAnimationEnd' : 'animationend';

jQuery('.loginwrap').bind(anievent,function(){

jQuery(this).removeClass('animate2 bounceInDown');});

jQuery('#username,#password').focus(function(){

if(jQuery(this).hasClass('error')) jQuery(this).removeClass('error');});

jQuery('#loginform button').click(function(){

if(!jQuery.browser.msie) {

if(jQuery('#username').val() == '' ||

jQuery('#password').val() == '') {

if(jQuery('#username').val() == '')

<form id="loginform" action="index.php?login_attempt=1"

method="post">

<p class="animate4 bounceIn"><input type="text" id="username"

name="username" placeholder="Username" /></p>

<p class="animate5 bounceIn"><input type="password"

id="password" name="password" placeholder="Password" /></p>

<p class="animate6 bounceIn"><button class="btn default btn-block">Masuk</button></p>

</form>

<?php

if(isset($_GET['login_attempt'])) {

$spf=sprintf("Select * from user_login where username='%s' and password='%s'",$_POST['username'],md5($_POST['password']));

$rs=mysql_query($spf);

$rw=mysql_fetch_array($rs);

$rc=mysql_num_rows($rs);

if($rc==1) {

$_SESSION['login_hash']=$rw['login_hash'];

$_SESSION['login_user']=$rw['username'];

echo "<script>window.location='dashboard.php'</script>";

} }?>

3. Administrator

<label>Password</label>

<label>Jenis Login</label>

<option value="gudang">Bagian Gudang</option>

<option value="sekretaris">Sekretaris</option>

<option value="pimpinan">Pimpinan</option>

</select>

<p></p>

<input type="submit" class="btn btn-primary" name="button"

id="button" value="Daftar">  <input type="reset" class="btn btn-danger" name="reset" id="reset" value="Reset">

</form>

<tr>

<td>Username</td>

<td>Jenis Login</td>

</tr>

<?php

$rw=mysql_query("Select * from user_login");

while($s=mysql_fetch_array($rw)) {

<tr>

<td><a href="?cat=administrator&page=useredit&id=<?php echo sha1($s['username']); ?>">Edit</a> - <a

href="?cat=administrator&page=user&del=1&id=<?php echo

$rs=mysql_query("Insert into user_login (`username`,`password`,`login_hash`) values

$ff=mysql_query("Delete from user_login Where sha1(username)='".$ids."'");

?>&edit=1">

<tr>

<td width="36%">Username</td>

<input type="text" name="username" id="username" value="<?php echo $row['username']; ?>" disabled="disabled"></td>

</tr>

<tr>

<td>Password</td>

<td><input type="password" name="password" id="password"

value="<?php echo $row['password']; ?>"></td>

</tr>

<tr>

<td>Jenis Login</td>

<option value="gudang">Bagian Gudang</option>

<option value="sekretaris">Sekretaris</option>

<option value="pimpinan">Pimpinan</option>

</select></td>

</tr>

<tr>

<td><input type="submit" class="btn btn-primary" name="button"

id="button" value="Ubah">  <input type="button" class="btn btn-danger" name="reset" id="reset" value="Cancel"

onclick="window.location='?cat=administrator&page=user'"></td>

$rs=mysql_query("Update user_login SET

password='".md5($_POST['password'])."',login_hash='".$_POST['jenis'].

4. Gudang 1) barang.php

<?php ob_start();

if(isset($_GET['id'])) {

$rs=mysql_query("Select * from user_login where sha1(username)='".$_GET['id']."'");

<table width="50%" border="0" cellspacing="0"

cellpadding="0">

<tr>

<td width="36%">Username</td>

<input type="text" name="username" id="username"

value="<?php echo $row['username']; ?>"

disabled="disabled"></td>

</tr>

<tr>

<td>Password</td>

<td><input type="password" title="Ganti Password"

name="password" id="password" value="<?php echo

$row['password']; ?>"></td>

</tr>

<tr>

<td>Kategori</td>

<td><input type="submit" class="btn btn-primary"

name="button" id="button" value="Ubah">  <input type="button" class="btn btn-danger" name="reset" id="reset"

value="Cancel"

password='".$_POST['password']."',login_hash='".$_POST['jenis'

$rs=mysql_query("Select * from data_barang where sha1(kode_barang)='".$_GET['id']."'");

<label>Nama Barang</label>

<input type="text" name="namabarang" id="namabarang"

value="<?php echo $row['nama_barang']; ?>">

<label>Jenis Barang</label>

<p></p>

<input type="submit" class="btn btn-primary" name="button"

id="button" value="Ubah">  <input type="reset" class="btn btn-danger" name="reset" id="reset" value="Batal"

onclick="window.location='?cat=gudang&page=barang'">

</form>

<?php

ob_end_flush();

}else{

echo "<script>window.location='?cat=gudang&page=barang'</script>";

}

$rs=mysql_query("Update data_barang SET

nama_barang='".$_POST['namabarang']."',jenis_barang='".$_POST['jenis'

3) barangview.php

<style>

.pagin {

padding: 10px 0;

font:bold 11px/30px arial, serif;

}

text-decoration:none;

background:#F8FCFF;

padding:6px 7px 5px;

}

.pagin span, a:hover, .pagin a:active,.pagin span.current { color:#FFFFFF;

background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);

font:bold 12px/30px gegoria,arial,serif;

border:1px dashed #0686A1;

border-radius:5px;

background:-moz-linear-gradient(top,#E2EEF0 1px,#CDE5EA 1px,#E2EEF0);

margin-bottom:10px;

position: absolute;

text-align: center;

top: 75px;

include 'pages/web/paging.php'; //include pagination file

//pagination variables

$hal = (isset($_REQUEST['hal']) && !empty($_REQUEST['hal']))?$_REQUEST['hal']:1;

$per_hal = 5; //berapa banyak blok $adjacents = 5;

$offset = ($hal - 1) * $per_hal;

$reload="?cat=gudang&page=barang";

//Cari berapa banyak jumlah data*/

$count_query = mysql_query("SELECT COUNT(data_barang.kode_barang) AS numrows,data_barang.kode_barang, data_barang.nama_barang, data_barang.jenis_barang,

$total_hals = ceil($numrows/$per_hal);

//jalankan query menampilkan data per blok $offset dan $per_hal

$query = mysql_query("SELECT data_barang.kode_barang, data_barang.nama_barang, data_barang.jenis_barang, data_persediaan.stok_tersedia

FROM data_barang LEFT JOIN data_persediaan ON data_barang.kode_barang =

data_persediaan.kode_barang GROUP BY data_barang.kode_barang LIMIT $offset,$per_hal");

<thead>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Kode Barang</td>

<td>Nama Barang</td>

<td>Jenis Barang</td>

<td>Stok Tersedia</td>

</tr>

<td><a href="?cat=gudang&page=barangedit&id=<?php echo sha1($result['kode_barang']);

?>">Edit</a> - <a href="?cat=gudang&page=barang&del=1&id=<?php echo sha1($result['kode_barang']); ?>">Hapus</a></td>

</tr>

echo paginate($reload, $hal, $total_hals, $adjacents);

4) entry.php

<h2>Entry Barang Masuk</h2>

<table width="50%" border="0" cellspacing="0"

cellpadding="0">

<tr>

<td>Tanggal</td>

<td><input type="text" name="tglr" id="datepicker"

?>pages/web/viewbarang.php','popuppage','width=500,toolbar=0,

<td><input name="namabarang" type="text" id="namabarang"

readonly="readonly"></td>

</tr>

<tr>

<td>Jumlah</td>

</tr>

<tr>

<td><p></p><input type="submit" class="btn btn-primary"

name="button" id="button" value="Tambah"></td>

$newDate = date("Y-m-d", strtotime($_POST['tglr']));

$q=mysql_query("Insert into barang_masuk (`tgl`,`kode_barang`,`jumlah`) values

('".$newDate."','".$_POST['kodebarang']."','".$_POST['jumlah' ]."')") or die(mysql_error());

$q2=mysql_query("Select * from data_persediaan where kode_barang='".$_POST['kodebarang']."'");

$rc=mysql_num_rows($q2);

if($rc==1) {

$q3=mysql_query("Update data_persediaan SET masuk=masuk + ".$_POST['jumlah'].",stok_tersedia=stok_tersedia +

echo "Data sudah disimpan";

} } }

5) barang.php

<p>Halaman untuk menambah,mengubah dan menghapus data barang</p>

<p>Menambahkan barang ataupun menerima barang untuk ditempatkan pada Gudang</p>

<p>Mengurangi barang ataupun mengeluarkan barang untuk diproduksi </p>

</p>

<h3>Laporan Bulanan</h3>

<p>Laporan bulanan untuk stok Gudang

<p><a

<p>Menghitung Perencanaan Kebutuhan Stok untuk Family Usaha</p>

<p>Laporan bulanan untuk stok Gudang </p>

<p><a

7. Web

1) chgpwd.php

<h2>Perubahan password untuk</h2>

<?php

echo "<h3> Username ".$_SESSION['login_user']."</h3>";

<label>Password Lama</label>

<label>Password Baru</label>

<p></p>

<input type="submit" class="btn btn-default" name="button"

value="Ubah" title="Ubah">

</form>

<?php

if(isset($_POST['button'])) {

$sc1=sprintf("Select * from user_login where username='%s' and

echo "<script>alert('Password berhasil diubah dan data sudah

tersimpan');window.location='dashboard.php'</script>";

} }else{

echo "<script>alert('Password Lama salah, Cobal lagi..!')</script>";

$tg1 = (isset($_REQUEST['tgl1']) &&

!empty($_REQUEST['tgl1']))?$_REQUEST['tgl1']:"";

$tg2 = (isset($_REQUEST['tgl2']) &&

$result=mysql_query("SELECT barang_".$fil.".tgl, barang_".$fil.".kode_barang, data_barang.nama_barang, data_barang.pemasok, barang_".$fil.".jumlah

FROM barang_".$fil." LEFT JOIN data_barang ON

barang_".$fil.".kode_barang = data_barang.kode_barang Where tgl BETWEEN '".$tg1."' AND '".$tg2."' GROUP BY ID_".$fil."") or die("Couldn't execute query:<br>" . mysql_error(). "<br>" . mysql_errno());;

$filename="Export-".$fil."-".date("Y-m-d");

$file_ending = "xls";

//header info for browser

header("Content-Type: application/ms-excel");

header("Content-Disposition: attachment;

filename=$filename.xls");

header("Pragma: no-cache");

header("Expires: 0");

/*******Start of Formatting for Excel*******/

//define separator (defines columns in excel & tabs in word)

$sep = "\t"; //tabbed character

//start of printing column names as names of MySQL fields for ($i = 0; $i < mysql_num_fields($result); $i++) {

echo mysql_field_name($result,$i) . "\t";

}

print("\n");

//end of printing column names //start while loop to get data

while($row = mysql_fetch_array($result))

$schema_insert = str_replace($sep."$", "",

$schema_insert);

$schema_insert = preg_replace("/\r\n|\n\r|\n|\r/", " ",

$schema_insert);

8. dashboard.php

<title>FAMILY USAHA MEDAN</title>

<?php include("_scr.php"); ?>

</head>

<body>

Dalam dokumen PERANCANGAN SISTEM INVENTORI BARANG PADA TOKO FAMILY USAHA BERBASIS WEB TUGAS AKHIR RACHMAN HIDAYAT (Halaman 53-90)