KP 2

PEMBUATAN APLIKASI SISTEM INFORMASI
PENDATAAN BARANG BERBASIS WEB MENGGUNAKAN

SUBLIME TEXT3 & XAMPP 5.6.33
Nama : Daffa Irianto Putra

Kelas : XI
Kompetesi Keahlian : Rekayasa Perangkat Lunak
BIDANG KEAHLIAN TEKNOLOGI INFORMASI DAN KOMUNIKASI

SMK TELEKOMUNIKASI TELESANDI BEKASI
2019
DAFTAR ISI
COVER
DAFTAR ISI............................................................................................................ii
DAFTAR GAMBAR..............................................................................................iii
DAFTAR TABEL...................................................................................................vi
BAB I PENDAHULUAN
A. Latar Belakang………………………………………………………
B. Manfaat/fungsi aplikasi……………………………………………...
C. Sasaran pemasaran aplikasi………………………………………….
D. Fitur / fasilitas aplikasi………………………………………………
E. Kelebihan aplikasi…………………………………………………...
F. Kekurangan aplikasi…………………………………………………
BAB II LAPORAN KERJA PROJEK

A. Alur Navigasi / Flowchart……………………………………...……
B. Alat dan bahan………………………………………………….……
C. Langkah kerja……………………………………………………..…
D. Hasil Akhir…………………………………………………..……..
1
DAFTAR GAMBAR
Gambar 2.1 Logo perusahaan ..................................................................................3

Gambar 2.2 Struktur organisasi................................................................................5
Gambar 3.1 Bagan alir program .............................................................................10
Gambar 3.2 Komputer ............................................................................................11
Gambar 3.3 Logo Sublime Text 3 ..........................................................................11
Gambar 3.4 Logo Xampp 3.6.55 ............................................................................11
Gambar 3.5 Buka Xampp dari Menu .....................................................................12
Gambar 3.6 Tampilan mysql san start apache & mysql.........................................12
Gambar 3.7 Tampilan utama phpMYadmin ...........................................................13
Gambar 3.8 Buat database baru .............................................................................13
Gambar 3.9 Buat database .....................................................................................14
Gambar 3.10 Tampilan buat tabel ..........................................................................14
Gambar 3.11 Simpan tabel .....................................................................................15
Gambar 3.12 Buat tabel baru .................................................................................15
Gambar 3.13 Buat tabel..........................................................................................16
Gambar 3.14 Buka Sublime Text 3 dari Menu .......................................................17
Gambar 3.15 Tampilan awal Sublime Text 3 .........................................................18
Gambar3.16 Form Login 58 ......................................................................................
Gambar 3.17 Pesan Kesalahan ...............................................................................58
Gambar 3.18 Form home .......................................................................................59
Gambar 3.19 Form nama barang ...........................................................................59
Gambar 3.20 Form stok barang .............................................................................60
Gambar 3.21 Form history .....................................................................................60
2
DAFTAR TABEL
Tabel 3.1 Tabel Admin ..........................................................................................15

Tabel 3.2 Field dari tabel barang ..........................................................................16
Tabel 3.3 Field dari tabel history ...........................................................................17
Tabel 3.4 Script dari CSS .......................................................................................18
Tabel 3.5 Script dari halaman login .......................................................................26
Tabel 3.6 Script dari halaman log out ....................................................................28
Tabel 3.7 Script dari halaman home ......................................................................28
Tabel 3.8 Script dari halaman nama barang ...........................................................31
Tabel 3.9 Script dari halaman stok barang .............................................................35
Tabel 3.10 Script dari halaman history ..................................................................35
Tabel 3.11 Script action tambah data .....................................................................43
Tabel 3.12 Script action hapus data .......................................................................46
Tabel 3.13 Script action edit data ..........................................................................48
Tabel 3.14 Script action tambah stok .....................................................................51
Tabel 3.15 Script action kurangi stok barang ........................................................54
3
BAB I
PENDAHULUAN
1. Latar Belakang
Pendataan barang merupakan faktor penting dalam suatu perusahaan
yang memiliki tingkat rutinitas yang tinggi dan pengelolaan data yang
tersusun rapih dan teratur. Sistem informasi digunakan untuk
mengumpulkan, mengolah, dan menyediakan informasi. data dan informasi
yang diperoleh suatu instansi terus-menerus bertambah banyak, sehingga
tidak mudah untuk diolah dengan cara manual. Oleh karenanya sangat
diperlukan sistem informasi berbasis komputer bagi setiap instansi
pemerintah agar dapat memudahkan proses manajemen data dengan baik.
Aplikasi sistem informasi berbasis komputer berupa software program
pendataan barang yang dapat digunakan untuk perekapan stok barang yang
masih tersedia yang diharapkan dapat lebih efisien dibandingkan dengan
cara pencatatan data secara manual. Dengan ini penulis akan mencoba
membuat aplikasi sistem informasi pendataan barang dengan menggunakan
Sublime Text 3 dan Xampp 5.6.33 sebagai server data base.
2. Manfaat / Fungsi Aplikasi

a. Sebagai alat pembantu karyawan dalam mendata barang.
b. Sebagai media informasi yang berisikan data barang.
3. Sasaran Pemasaran Aplikasi

Karyawan Perusahaan
4. Fitur / Fasilitas Aplikasi

a. Memiliki fitur Multi user
4
5. Kelebihan Aplikasi
1. Tampilan web yang minimalis dan dinamis
2. Memiliki Login multiuser
6. Kekurangan Aplikasi
1. Harus memilik koneksi internet
5
BAB II
LAPORAN KERJA PROJEK
1. Alur Navigasi / Flowchart
Gambar 3.1 Bagan alir program
6
2. Alat dan bahan
A. XAMPP Version: 5.6.28
Software Requirements:
a) Windows 2008, 2012, Vista, 7, 8 (Important: XP or 2003 not
supported
Hardware Requiresments:
a) 64 MB RAM (RECOMMENDED)
b) 350 MB free fixed disk
7
B. Sublime Text 3
Software Requirements:
a) Windows 7 SP1 (x86 and x64)
b) Windows 8 (x86 and x64)
c) Windows Server 2008 R2 SP1 (x64)
d) Windows Server 2012 (x64)
Hardware Requirements:
a) 1.6 GHz or faster processor
b) 1 GB of RAM (1.5 GB if running on a virtual machine)
c) 10 GB of available hard disk space
d) 600 MB of available hard disk space (language pack)
e) 5400 RPM hard drive
f) DirectX 9-capable video card running at 1024 x 768 or higher
display resolution
A. Langkah Kerja
1. Pembuatan Database
a. Buka Xampp di Start → All Programs → Xampp→ Xampp Control
Panel
Gambar 3.5 Buka Xampp dari Menu
8
b. Klik Start apache & mysql lalu klik admin di mysql
Gambar 3.6 Tampilan mysql dan start apache & mysql
c. Akan muncul tampilan seperti berikut.
Gambar 3.7 Tampilan utama phpMYadmin
d. Lalu kelik baru untuk membuat database
9
Gambar 3.8 Buat database baru
e. Akan muncul tampilan seperti berikut isi nama “Basis Data” dengan
nama “inven2” lalu kelik buat
Gambar 3.9 Buat database
f. Akan muncul tampilan berikut lalu nama tabel dengan “admin” dengan
3 kolom
10
Gambar 3.10 Tampilan buat tabel
g. Isi lah setiap Field sesuai dengan yang di bawah ini.

Tabel 3.1 Tabel admin
Nama Tipe
User_id Int (11) Primary key
Username Varchar (50)
Password Varchar (50)
h. Jika sudah kelik simpan di pojok kanan bawah
11
Gambar 3.11 Simpan Table
i. Jika sudah kelik baru di dalam database stok_barang
Gambar 3.12 Isi 1 Buat tabel baru
j. Lalu akan muntul tampilan buat tabel seperti gambar berikut.
Gambar 3.13 Buat tabel
k. Beri nama tabel dengan barang lalu isi field seperti di bawah
Tabel 3.2 Field dari table barang
Nama Tipe
12
Idbarang Int (11) Primary key
Nama_barang Varchar (50)
Jenis_barang Varchar (50)
Stok_barang Varchar (50)
l. Jika sudah kelik simpan seperti di gambar 3.12 lalu kelik baru di dalam
database lagi seperti di gamabar 3.13 dan nama tabel nya dengan nama
history lalu isi setiap field seperti dibawah berikut
Tabel 3.3 Field dari tabel history

Nama Tipe
Idhistory Int(11)
Waktu Varchar(75)
Jenis_barang Varchar(45)
Nama_barang Varchar(45)
Kegiatan Longtext
m. Jika sudah kelik selesai seperti di gambar 3.(lupa) dan biarkan dulu di
dekstop
2. Persiapan Awal Pembuatan Aplikasi
a. Buka Sublime text3 di Menu → All Programs → Sublime text3
.
13
Gambar 3.14 Buka Sublime Text 3 dari Menu
b. Akan muncul jendela seperti ini
Gambar 3.15 Tampilan awal Sublime Text 3

c. Lalu sebelum memasukan script buat dulu folder di dalam file
xampp→
htdocs→ lalu buat fodre di dalam dengan nama inven2.
d. Jika sudah kita kembali ke aplikasi Sublime text3 untuk memuat form
login
14
3. Pembuatan CSS
a. Sebelum membuat form login buatlah css untuk memperbagus
tampilan halaman web
b. Masukan script di bawah berikut kedalam sublime text3.
Tabel 3.4 script dari css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
text-decoration: none;
color: black;
}
ol, ul {
list-style: none;
}
body{
line-height: 1.5;
margin: auto;
float: auto;
font-family: arial;
font-weight: lighter;
15
}
.left{
float: left;
}
.right{
float: right;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
img{
max-width: 100%;
max-height: 100%;
}
.button{
padding: 10px;
border-radius: 5px;
background: transparent;
text-align: center;
border: solid 3px #1DCFAB;
transition: all 500ms;
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
.button:hover{
background: #1DCFAB;
color: white;
16
}
p{
font-size: 18px;
}
table {
border-collapse: collapse;
width: 100%;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
margin-top: 20px;
float: left;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #1DCFAB;
color: white;
}
.paging-nav {
text-align: right;
padding-top: 2px;
margin-top: 5px;
float: right;
}
.paging-nav a {
margin: auto 1px;
text-decoration: none;
17
display: inline-block;
padding: 1px 7px;
color: white;
border-radius: 3px;
}
.paging-nav .selected-page {
background: #17A387;
font-weight: bold;
}
input,select{
padding: 10px;
border: solid 1px #dcdcdc;
border-radius: 5px;
transition: box-shadow 0.3s, border 0.3s;
background: white;
width: 50%;
}
input[type="submit"]{
width: 15%;
}
input[type="text"]:focus,select:focus{
box-shadow: 0 0 5px 1px #969696;
}
a.table:hover{
text-decoration: underline;
}
header{
18
width: 98%;
padding: 1%;
float: left;
}
aside{
padding: 25px 0 25px 0;
background: #DEDEDE;
width: 20%;
float: left;
}
li.side{
padding: 15px;
text-align: center;
transition: background 500ms;
}
li.side:hover{
}
li.active{
}
section.content{
padding: 3%;
width: 74%;
float: left;
}
div.container{
float: left;
width: 100%;
}
19
div.empty{
float: left;
width: 100%;
}
div.data{
padding: 10px 30px 10px 30px;
border-radius: 5px;
float: left;
background: #1AB898;
color: white;
}
h1.content{
font-size: 36px;
}
form.login{
width: 30%;
padding: 30px;
background: #DEDEDE;
float: left;
position: relative;
margin-top: 10%;
left: 30%;
right: 30%;
text-align: center;
border-radius: 10px;
}
h1.login{
font-size: 32px;
20
}
input.login{
padding: 10px;
float: left;
width: 100%;
border-radius: 5px;
border: none;
}
.button-login{
border: solid 3px gray;
}
.button-login:hover{
background: gray;
}
@media screen and (max-width: 720px) {
form.login{
width: 70%;
padding: 5%;
left: 10%;
right: 10%;
}
aside{
width: 100%;
}
section.content{
width: 94%;
overflow: auto;
}
input,input[type="submit"],select,label{
width: 100%;
21
}
}
e. Jika sudah kelik CTRL + S untuk mengesave file di dalam folder

inven2 lalu simpan dengan format style.css
4. Pembuatan Form login dan log out
a. Bukalah jendela baru di sublime text 3 dengan mengetik tombol
keyboard CTRL + N untuk membuat jendela baru di sublime text 3 lalu
masukan script berikut.
Tabel 3.5 script dari halaman login
<?php
session_start();
include_once 'dbconnect.php';
if(isset($_POST['btn-login']))
{
$user = $MySQLi_CON->real_escape_string(trim($_POST['user']));
$pass = $MySQLi_CON->real_escape_string(trim($_POST['pass']));
$check_user = "select * from user WHERE username='$user' AND
password='$pass'";
$run = $MySQLi_CON->query($check_user);
$query = $MySQLi_CON->query("SELECT * FROM user WHERE
username='$user'");
$row = $query->fetch_array();
if(mysqli_num_rows($run))
{
$_SESSION['userSession'] = $row['user_id'];
header("Location: index.php");
}
else
{
$msg = "username or password does not exists !";
22
}
$MySQLi_CON->close();
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>STOK | LOGIN</title>
</head>
<body>
<form class="login" method="post">
<h1 class="login">Log In</h1>
<?php
if(isset($msg)){
echo "<p>".$msg."</p>";
}
?>
<input type="text" class="login" name="user"
placeholder="Username" required/>
<input type="password" class="login" name="pass"
placeholder="Password" required/>
<input type="submit" class="button button-login" value="Login"
name="btn-login" style="float: none;margin: 0 auto;"/>
</form></body></html>
f. Jika sudah simpan di folder inven2 dengan format login.php

g. Lalu buka jendela baru lagi di sublime text3 untuk membuat form log
uot jika sudah di uka jendela barunya masukan script berukit.
Tabel 3.6 script dari log uot
<?php
session_start();
23
session_destroy();
header('Location: login.php');
exit;
?>
h. Jika sudah simpan di dalam folder inven2 dengan format logout.php

i. Jika sudah maka kita ke pembuatan halaman web
5. Pembuatan WEB
a. Bukalah jendela baru di sublime text 3 untuk membuat halaman utama
web , lalu masukan script berikut
Tabel 3.7 Script dari halaman home
<?php
session_start();
if(!isset($_SESSION['userSession']))
{
header("Location: login.php");
}
else{
$sql = "SELECT * FROM user WHERE
user_id=".$_SESSION['userSession'];
$userquery = $MySQLi_CON->query($sql);
$userRow = $userquery->fetch_object();
$username = $userRow->username;
}
$tablebarang = "SELECT * FROM barang";
$tablebarangquery = $MySQLi_CON->query($tablebarang);
$tablebarangrow = $tablebarangquery->num_rows;
$tablehistory = "SELECT * FROM history";
$tablehistoryquery = $MySQLi_CON->query($tablehistory);
$tablehistoryrow = $tablehistoryquery->num_rows;
24
?>
<html>
<head>
<title>STOK</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
Hi , <?php echo htmlentities($username) ?> |
<a href="logout.php">Logout</a>
</div>
</header>
<aside>
<ul class="side">
<li class="side active">Home</li>
<a href="tab-barang.php"><li class="side">Nama Barang</li></a>
<a href="tab-stok-barang.php"><li class="side">Stok Barang</li></a>
<a href="tab-history.php"><li class="side">History</li></a></ul>
</aside>
<section class="content">
<h1 class="content">STOK BARANG</h1>
<p>Stok barang</p>
<div class="container">
<a href="tab-barang.php"><div class="button">Tabel
Barang</div></a>
</div>
<div class="container"><div class="data">
25
Jumlah Data Tabel Barang <br>
<p style="text-align: center;font-size: 24px;color: white;margin:
0;"><?php echo $tablebarangrow; ?></p>
</div></div>
<div class="empty"></div>
<a href="tab-history.php"><div class="button">Tabel
History</div></a>
</div>
<div class="data">Jumlah Data History <br>
<p style="text-align: center;font-size: 24px;color: white;margin:
0;"><?php echo $tablehistoryrow; ?></p>
</div></div>
</section>
<?php $MySQLi_CON->close(); ?></body>
</html>
b. Jika sudah simpan di dalam folder inven2 dengan format index.php

c. Lalu buka jendela baru untuk membuat halam nama barang dengan
memasukan scripi berikut.
Tabel 3.8 Script halaman nama barang
<?php
session_start();
{
}
else{
26
}
?>
<html>
<head>
<script type="application/javascript" src="jquery-2.1.3.js"></script>
<script type="application/javascript" src="jquery-ui.js"></script>
<script type="application/javascript" src="paging.js"></script>
<script>
$(document).ready(function() {
$('#tableData').paging({
limit:10
});
});
</script><title>STOK | NAMA BARANG</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
</div>
</header>
27
<aside>
<ul class="side">
<a href="index.php"><li class="side">Home</li></a>
<a href="tab-barang.php"><li class="side active">Nama
Barang</li></a>
<a href="tab-history.php"><li class="side">History</li></a>
</ul>
</aside>
<h1 class="content">Tabel Barang</h1>
<p>Menampilkan data tabel barang</p>
<a href="tab-barang-tambah.php"><div class="button">Tambah
Data</div></a>
<p style="float: left;width: 100%;">Filter dalam menampiklan
data</p>
<form method="POST" style="width: 100%;float: left;">
<select name="filter" onchange="this.form.submit()">
<option disabled selected>Filter</option>
<option value="remove">Hilangkan Filter</option>
<?php
$filterbarang = "SELECT * FROM barang";
$filterresult = $MySQLi_CON->query($filterbarang);
while ($filterrow = $filterresult->fetch_object()) {
echo "<option value=\"{$filterrow->jenis_barang}\">";
echo $filterrow->jenis_barang;
echo "</option>";
}?>
</select>
</form>
<?php
28
if(isset($_POST["filter"])){
if($_POST["filter"] == "remove"){
}
else{
$tablebarang = "SELECT * FROM barang WHERE jenis_barang IN
('".$_POST["filter"]."')";
}
}
else{
}
if ($result = $MySQLi_CON->query($tablebarang))
{
if ($result->num_rows > 0)
{
echo "<table id='tableData'>";
echo "<tr><th>ID</th><th>Nama Barang</th><th>Jenis
Barang</th><th></th><th></th></tr>";while ($row = $result-
>fetch_object())
{
echo "<tr>";
echo "<td>" . $row->idbarang . "</td>";
echo "<td>" . $row->nama_barang . "</td>";
echo "<td>" . $row->jenis_barang . "</td>";
echo "<td><a class='table'href='tab-barang-edit.php?id=" . $row-
>idbarang . "'>Ubah</a></td>";
echo "<td><a class='table'onclick='return
confirmDelete(this);'href='tab-barang-del.php?id=" . $row->idbarang .
"'>Hapus</a></td>";
echo "</tr>";
29
}echo "</table>";
}
else{
echo "Tidak ada yang dapat ditampilkan !!!";
}
}
else{
echo "Error: " . $MySQLi_CON->error;}?>
</section></body><script>
function confirmDelete(link) {
if (confirm("Data ini akan dihapus ?")) {
doAjax(link.href, "POST"); // doAjax needs to send the "confirm"
field}
return false;}
</script><?php $MySQLi_CON->close(); ?>
</html>
j. Jika sudah simpan di folder inven2 dengan format tab-barang.php

k. Lalu buka jendala baru lagi di sublime text 3 untuk membuat halam stok
barang dengan memasukan script berikut di sublime text 3.
Tabel 3.9 Script halaman stok barang
<?php
session_start();
{
}
else{
30
}
?>
<html>
<head>
<script>
limit:10
});
});
</script><title>STOK | STOK BARANG</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
<a href="logout.php">Logout</a></div>
</header>
<aside>
<ul class="side">
31
<a href="tab-stok-barang.php"><li class="side active">Stok
Barang</li></a>
</ul>
</aside>
<h1 class="content">Tabel Stok Barang</h1>
<p>Menampilkan data stok barang</p>
<p style="float: left;width: 100%;">Filter dalam menampiklan
data</p>
<form method="POST" style="width: 100%;float: left;">
<select name="filter" onchange="this.form.submit()">
<option disabled selected>Filter</option>
<option value="remove">Hilangkan Filter</option>
<?php
$filterbarang = "SELECT * FROM barang";
$filterresult = $MySQLi_CON->query($filterbarang);
while ($filterrow = $filterresult->fetch_object()) {
echo "<option value=\"{$filterrow->jenis_barang}\">";
echo $filterrow->jenis_barang;
echo "</option>";
}
?>
</select>
</form>
<?php
if(isset($_POST["filter"])){
if($_POST["filter"] == "remove"){
}
32
else{
$tablebarang = "SELECT * FROM barang WHERE jenis_barang IN
('".$_POST["filter"]."')";
}
}
else{
}
if ($result = $MySQLi_CON->query($tablebarang))
{
{
Barang</th><th>Stok
Barang</th><th></th><th></th></tr></th></tr>";
while ($row = $result->fetch_object())
{
echo "<tr>";
echo "<td>" . $row->idbarang . "</td>";
echo "<td>" . $row->stok_barang . "</td>";
echo "<td><a class='table'href='tab-tambah-stok.php?id=" . $row-
>idbarang . "'>Tambah Stok</a></td>";
echo "<td><a class='table'href='tab-kurangi-stok.php?id=" . $row-
>idbarang . "'>Kurangi Stok</a></td>";
echo "</tr>";
}
echo "</table>";
}
33
else
{
}
}
else
{
echo "Error: " . $MySQLi_CON->error;
}
?>
</section>
</body><?php $MySQLi_CON->close(); ?>
</html>
i. Jika sudah simpan di dalam folder inven2 dengan format tab-stok-

barang.php
j. Lalu buka sublime text 3 dan buka jendela baru untuk membuat
halaman history.
k. Jika sudah masukan script berikut.
Tabel 3.10 Script halaman history

<?php
session_start();
{
}
else{
34
}
?>
<html>
<head>
<script>
limit:10
});
});
</script><title>STOK | HISTORY</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
</div>
</header>
<aside>
<ul class="side">
35
<a href="tab-stok-barang.php"><li class="side">Stok
Barang</li></a>
<a href="tab-history.php"><li class="side active">History</li></a>
</ul>
</aside>
<h1 class="content">History</h1>
<p>Menampilkan history operasi yang dilakukan</p>
<?php
$tablehistory = "SELECT * FROM history";
if ($result = $MySQLi_CON->query($tablehistory))
{
{
Barang</th><th>Kegiatan</th><th></th>";
while ($row = $result->fetch_object())
{
echo "<tr>";
echo "<td>" . $row->idhistory . "</td>";
echo "<td>" . $row->kegiatan . "</td>";
echo "<td><a class='table'onclick='return
confirmDelete(this);'href='tab-history-del.php?id=" . $row->idhistory
. "'>Hapus</a></td>";
echo "</tr>";
}
36
echo "</table>";
}
else
{
}
}
else
{
echo "Error: " . $MySQLi_CON->error;
}
?>
</section>
</body>
<script>
function confirmDelete(link) {
if (confirm("Data ini akan dihapus ?")) {
doAjax(link.href, "POST"); // doAjax needs to send the "confirm"
field
}
return false;
}
</script><?php $MySQLi_CON->close(); ?>
</html>
l. Jika sudah simpan di dalam folder inven2 simpan dengan format tab-
history.php
m. Jika sudah selanjutnya membuat script untuk membuat action tambah
, hapus , cari , dan edit data.
6. Pembuatan action tambah , hapus , cari , dan edit data.
37
a. Setelah membuat tampilan lalu buatlah action untuk tambah data dengan
membuka jendela baru di sublime text 3 lalu masukan script berikut
untuk membuat action tambah data untuk halaman nama barang.
Tabel 3.11 scripy action tambah data

<?php
session_start();
{
}
else{
}
if(isset($_POST["tambah"])){
$nama_barang = $_POST["nama_barang"];
$jenis_barang = $_POST["jenis_barang"];
$sql = "INSERT INTO barang (nama_barang, jenis_barang,
stok_barang)
VALUES ('".$nama_barang."','".$jenis_barang."',0)";
if ($MySQLi_CON->query($sql) == TRUE) {
date_default_timezone_set('Asia/Jakarta');
$waktu = date("d/m/Y h:i:s");
$kegiatan = "Memabahkan barang baru jenis ".$jenis_barang."
dengan nama ".$nama_barang;
38
$sqlhistory = "INSERT INTO history (waktu, jenis_barang,
nama_barang, kegiatan)
VALUES
('".$waktu."','".$nama_barang."','".$jenis_barang."','".$kegiatan."')";
if ($MySQLi_CON->query($sqlhistory) == TRUE) {
header("Location: tab-barang.php");
}
else {
echo "Error: " . $sql . "<br>" . $MySQLi_CON->error;
}
} else {
echo "Error: " . $sql . "<br>" . $MySQLi_CON->error;
}
}
?>
<html>
<head>
<title>STOK | NAMA BARANG | TAMBAH</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
<a href="logout.php">Logout</a></div>
</header>
<aside>
39
<ul class="side">
Barang</li></a>
Barang</li></a>
</ul>
</aside>
<h1 class="content">Tabel barang</h1>
<p>Menambah data barang</p>
<form method="post">
<input type="text" name="nama_barang" placeholder="Nama
Barang" required/>
<input type="text" name="jenis_barang" placeholder="Jenis
Barang" required/><br>
<input type="submit" name="tambah" value="Tambah"/>
</form></section></body>
</html>
b. Setelah selesai simpan di folder inven2 dengan format tab-barang-

tambah.php
c. Lalu buka jendela baru lagi di sublime text 3 untuk membuat action
hapus data .
d. Masukan script berikut.
Tabel 3.12 Script action hapus data
<?php
include('dbconnect.php');
if (isset($_GET['id']) && is_numeric($_GET['id']))
{
40
$id = $_GET['id'];
if ($stmt = $MySQLi_CON->prepare("DELETE FROM barang
WHERE idbarang = ? LIMIT 1"))
{
$id = $_GET['id'];
$userquery = $MySQLi_CON->query("SELECT * FROM barang
WHERE idbarang = ".$id);
$row = $userquery->fetch_object();
$kegiatan = "Meghapus nama barang ".$row->nama_barang."
dengan jenis barang ".$row->jenis_barang;
VALUES ('".$waktu."','".$row->nama_barang."','".$row-
>jenis_barang."','".$kegiatan."')";
}
else
{
echo "Error dalam menghapus data: " . $MySQLi_CON->error;}
$stmt->bind_param("i",$id);
$stmt->execute();
$stmt->close();
}
else
{
echo "ERROR: could not prepare SQL statement.";
}
41
}
else
{
}
?>
e. Jika sudah simpan di dalam folder inven2 dengan format tab-barang-

del.php
f. Lalu buka sekali lagi jendela baru untuk membuat action edit data.
g. Masukan script berikut.
Tabel 3.13 Script action edit data
<?php
session_start();
{
}
else{
}
$id = $_GET['id'];
if(isset($_POST["ubah"])){
42
$nama_barang = $_POST["nama_barang"];
$jenis_barang = $_POST["jenis_barang"];
$sql = "UPDATE barang SET nama_barang = '".$nama_barang."',
jenis_barang = '".$jenis_barang."' WHERE idbarang = ".$id;
$kegiatan = "Mengubah nama barang ".$row->nama_barang."
menjadi ".$nama_barang." dan mengubah jenis barang ".$row-
>jenis_barang." menjadi ".$jenis_barang;
} else {
echo "Error dalam mengubah data: " . $MySQLi_CON->error;
}
} else {
}
}
?>
<html>
<head>
<title>STOK | NAMA BARANG | EDIT</title>
</head>
<body>
43
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
</div>
</header>
<aside>
<ul class="side">
Barang</li></a>
Barang</li></a>
</ul>
</aside>
<h1 class="content">Tabel Barang</h1>
<p>Mengubah nama dan jenis barang</p>
<p>ID: <?php echo $id; ?></p>
<input type="text" name="nama_barang" value="<?php echo $row-
>nama_barang; ?>" placeholder="Nama Barang"
required/><strong>*Nama Barang</strong>
<input type="text" name="jenis_barang" value="<?php echo $row-
>jenis_barang; ?>" placeholder="Jenis Barang"
required/><strong>*Jenis Barang</strong><br>
<input type="submit" name="ubah" value="Ubah"/>
44
</form></section></body></html>
h. Jika sudah simpan di dalam folder inven2 dengan format tab-barang-

edit.php
i. Lalu setelah itu buka jendela baru di sublime text 3 untuk buat lagi dua
action untuk tambah dan kurang stok barang di halaman stok barang
dengan memasukan script berikut.
Tabel 3.14 Script action tambah stok
<?php
session_start();
{
}
else{
}
$id = $_GET['id'];
$jumlah = $_POST["jumlah"];
$hasil_stok = ($row->stok_barang + $jumlah);
$sql = "UPDATE barang SET stok_barang = '".$hasil_stok."' WHERE
idbarang = ".$id;
45
$kegiatan = "Menambah stok barang ".$row->nama_barang."
berjulmah ".$row->stok_barang." sebanyak ".$jumlah." sehingga stok
barang ".$row->nama_barang." menjadi ".$hasil_stok;
header("Location: tab-stok-barang.php");
} else {
}
} else {
}
}
?>
<html>
<head>
<title>STOK | STOK BARANG | TAMBAH</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
46
<div class="right">
</div>
</header>
<aside>
<ul class="side">
Barang</li></a>
</ul>
</aside>
<h1 class="content">Tambah Stok Barang</h1>
<p>Menambah stok barang</p>
<p>ID : <?php echo $id; ?></p>
<p>Nama Barang : <?php echo $row->nama_barang;?></p>
<input type="number" name="jumlah" value="0" min="0"
placeholder="Jumlah" required/><strong>*Jumlah</strong>
</br>
</form></section></body>
</html>
j. Simpan dengan format tab-stok-tambah.php

k. Lalu masukan satu script lagi untuk action kurangi stok dengan script
berikut.
Tabel 3.15 Script action kurangi stok barang
47
<?php
session_start();
{
}
else{
}
$id = $_GET['id'];
$jumlah = $_POST["jumlah"];
$hasil_stok = ($row->stok_barang - $jumlah);
$sql = "UPDATE barang SET stok_barang = '".$hasil_stok."' WHERE
idbarang = ".$id;
$kegiatan = "Mengurangi stok barang ".$row->nama_barang."
berjulmah ".$row->stok_barang." sebanyak ".$jumlah." sehingga stok
barang ".$row->nama_barang." menjadi ".$hasil_stok;
48
header("Location: tab-stok-barang.php");
} else {
}
} else {
}
}
?>
<html>
<head>
<title>STOK | STOK BARANG | KURANGI</title>
</head>
<body>
<header>
<div class="left">
STOK BARANG
</div>
<div class="right">
</div>
</header>
<aside>
<ul class="side">
49
Barang</li></a>
</ul>
</aside>
<h1 class="content">Kurangi Stok Barang</h1>
<p>Mengurangi stok barang</p>
<p>ID : <?php echo $id; ?></p>
<p>Nama Barang : <?php echo $row->nama_barang;?></p>
<input type="number" name="jumlah" value="0" min="0"
max="<?php echo $row->stok_barang;?>" placeholder="Jumlah"
required/><strong>*Jumlah</strong>
</br>
</form></section></body></html>
l. Jika sudah simpan dengan format tab-stok-kurangi.php lalu cobalah

jalankan aplikasi nya
B. Hasil Kerja
Hasil yang diperoleh adalah Halaman Login , Halaman , Halaman dan Form
Request Report. Pada Form Login, pengguna harus memasukkan ID, Password,
dan hak akses yang terdaftar dalam basis data untuk masuk ke dalam Form
selanjutnya. Jika hak aksesnya adalah User maka Form yang ditampilkan hanya
dapat memasukkan data, dan jika hak aksesnya adalah Admin, maka Form utama
Admin akan ditampilkan, dan Admin dapat mengedit data Admin lain, User,
permintaan, dan membuat laporan permintaan. Akan tetapi, jika pengguna
memasukkan ID atau Password yang salah selama tiga kali berturut-turut,
aplikasi akan menutup dengan sendirinya.
50
Ini adalah hasil dari aplikasinya:
a. Dimulai dari Halaman Login.
Gambar 3.16 Form Login

b. Jika ID atau Password salah akan ditampilkan pesan kesalahan, dan
secara berturut-turut menampilkan pesan dengan jumlah kesempatan
yang berkurang setiap kesalahan.
Gambar 3.17 Pesan Kesalahan

c. Jika ID dan Password benar maka akan langsung masuk ke halaman
utama dan untuk log uot ada di pojok kanan atas , lalu jika button tabel
barang di kelik makan akan muncul tampilan tabel barang yang sama
51
dengan jika mengekelik button nama barang , jika button tabel history
di kelik maka akan muncul tampilan yang sama dengan button history.
Gambar 3.18 Form home
d. Tampilan nama barang.
Gambar 3.19 Form nama barang
e. Lalu jika stok barang di kelik akan muncul tampilan stok barang .
52
’’
Gambar 3.20 Form stok barang
f. Lalu yang terakhir adalah tampilan history
Gambar 3.21 Form history
53

KP 2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

KP 2

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMBUATAN APLIKASI SISTEM INFORMASI

PENDATAAN BARANG BERBASIS WEB MENGGUNAKAN

Nama : Daffa Irianto Putra

BIDANG KEAHLIAN TEKNOLOGI INFORMASI DAN KOMUNIKASI

BAB II LAPORAN KERJA PROJEK

Gambar 2.1 Logo perusahaan ..................................................................................3

Tabel 3.1 Tabel Admin ..........................................................................................15

2. Manfaat / Fungsi Aplikasi

3. Sasaran Pemasaran Aplikasi

4. Fitur / Fasilitas Aplikasi

Gambar 3.1 Bagan alir program

Gambar 3.5 Buka Xampp dari Menu

Gambar 3.6 Tampilan mysql dan start apache & mysql

c. Akan muncul tampilan seperti berikut.

Gambar 3.7 Tampilan utama phpMYadmin

d. Lalu kelik baru untuk membuat database

Gambar 3.9 Buat database

g. Isi lah setiap Field sesuai dengan yang di bawah ini.

h. Jika sudah kelik simpan di pojok kanan bawah

i. Jika sudah kelik baru di dalam database stok_barang

Gambar 3.12 Isi 1 Buat tabel baru

j. Lalu akan muntul tampilan buat tabel seperti gambar berikut.

Gambar 3.13 Buat tabel

Tabel 3.3 Field dari tabel history

b. Akan muncul jendela seperti ini

Gambar 3.15 Tampilan awal Sublime Text 3

e. Jika sudah kelik CTRL + S untuk mengesave file di dalam folder

f. Jika sudah simpan di folder inven2 dengan format login.php

h. Jika sudah simpan di dalam folder inven2 dengan format logout.php

b. Jika sudah simpan di dalam folder inven2 dengan format index.php

j. Jika sudah simpan di folder inven2 dengan format tab-barang.php

i. Jika sudah simpan di dalam folder inven2 dengan format tab-stok-

Tabel 3.10 Script halaman history

Tabel 3.11 scripy action tambah data

b. Setelah selesai simpan di folder inven2 dengan format tab-barang-

e. Jika sudah simpan di dalam folder inven2 dengan format tab-barang-

h. Jika sudah simpan di dalam folder inven2 dengan format tab-barang-

j. Simpan dengan format tab-stok-tambah.php

l. Jika sudah simpan dengan format tab-stok-kurangi.php lalu cobalah

Gambar 3.16 Form Login

Gambar 3.17 Pesan Kesalahan

Gambar 3.18 Form home

d. Tampilan nama barang.

Gambar 3.19 Form nama barang

f. Lalu yang terakhir adalah tampilan history

Gambar 3.21 Form history

Anda mungkin juga menyukai