Bab 4

BAB 4
Let’s Play The Code
4.1 Membuat Master Template Web

Disini kita akan membangun suatu desain yang cukup user friendly.. disini kita
banyak memerlukan bantuan jQuery dan banyak sekali penggunaan Ajax
maupun json pada saat aplikasi telah jalan dan tentunya adalah Responsive
menggunakan bootstrap..
Kita juga akan buat seminimalisir kode yang digunakan agar tidak berat saat
aplikasi inventory diakses, juga data yang tidak terlalu berlebihan, kita batasi
data per halaman, sehingga data akan cepat diakses.
oke, kalo gitu nggak usah berlama-lama lagi, kita langsung saja mainkan
kodenya.
Pada website yang dibangun ini, penulis menggunakan template yang telah
dimodifikasi, terdapat 3 buah file css, diantaranya:
1. Bootstrap.min.css
2. Font-awesome.min.css
3. AdminLTE.css
Serta 4 file js, diantaranya:
1. Jquery-1.8.1.min.js (jQuery library)
2. Bootstrap.min.js (Bootstrap)
3. App.js (Js utama aplikasi)
Untuk seluruh kode css dapat Anda temukan pada CD terlampir yaitu folder
source code/template.
Ketika Anda sudah mendapatkan kodenya, cukup terapkan saja pada file html
yang dibangun, buat dengan nama index.html, kemudian tuliskan skrip berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inventory Application</title>
<meta content='width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no' name='viewport'>
<script src="design/js/jquery-1.8.1.min.js"
type="text/javascript"></script>

<link href="design/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />

<link href="design/css/font-awesome.min.css"
rel="stylesheet" type="text/css" />

<link href="design/css/AdminLTE.css" rel="stylesheet"
type="text/css" />
<script src="design/js/bootstrap.min.js"


<script src="design/js/AdminLTE/app.js"
</head>
<body class="skin-blue">
<header class="header">
<a href="home.php" class="logo">

CV. ASFA SOLUTION
</a>


<nav class="navbar navbar-static-top" role="navigation">

<a href="#" class="navbar-btn sidebar-toggle" data-
toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</a>
<div class="navbar-right">
<ul class="nav navbar-nav">

<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<span>ADMINISTRATOR <i class="caret"></i></span>
</a>
<ul class="dropdown-menu">

<li class="user-header bg-light-blue">
<p>
ADMINISTRATOR<br>
Administrator
</p>
</li>

<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Ubah Password</a>
</div>
<div class="pull-right">
<a href="logout.php" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">


<aside class="left-side sidebar-offcanvas">

<section class="sidebar">


<div class="user-panel">
<div class="pull-left image">
</div>
<div class="pull-left info">
<p>Hello, ADMINISTRATOR</p>
</div>
</div>


<ul class="sidebar-menu">
<li class="active">
<a href="home.php">
<i class="fa fa-dashboard"></I> <span>Home</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-th"></i>
<span>Master Data</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="staffs.php"><i class="fa fa-angle-
double-right"></i> Staff</a></li>
<li><a href="categories.php"><i class="fa fa-
angle-double-right"></i> Kategori</a></li>
<li><a href="products.php"><i class="fa fa-angle-
double-right"></i> Produk</a></li>
<li><a href="factories.php"><i class="fa fa-
angle-double-right"></i> Gudang</a></li>
<li><a href="suppliers.php"><i class="fa fa-
angle-double-right"></i> Supplier</a></li>
<li><a href="customers.php"><i class="fa fa-
angle-double-right"></i> Customer</a></li>
<li><a href="authorize.php"><i class="fa fa-
angle-double-right"></i> Level Authorize</a></li>
</ul>
</li>
<a href="#">
<i class="fa fa-laptop"></i>
<span>Transaksi Pembelian</span>
</a>
<li><a href="in.php"><i class="fa fa-angle-
double-right"></i> Transaksi Pembelian</a></li>
<li><a href="bbm.php"><i class="fa fa-angle-
double-right"></i> Bukti Barang Masuk</a></li>
<li><a href="spb.php"><i class="fa fa-angle-
double-right"></i> Purchase Order</a></li>
<li><a href="pay_in.php"><i class="fa fa-angle-
double-right"></i> Pembayaran Transaksi</a></li>
</ul>
</li>
<a href="#">
<i class="fa fa-laptop"></i>
<span>Transaksi Penjualan</span>
</a>
<li><a href="out.php"><i class="fa fa-angle-
double-right"></i> Transaksi Penjualan</a></li>
<li><a href="do.php"><i class="fa fa-angle-
double-right"></i> Delivery Order</a></li>
<li><a href="so.php"><i class="fa fa-angle-
double-right"></i> Sales Order</a></li>
<li><a href="pay_out.php"><i class="fa fa-angle-
double-right"></i> Pembayaran Transaksi</a></li>
</ul>
</li>
<li><a href="transfers.php"><i class="fa fa-edit"></i>
<span>Transfer Gudang</span></a></li>
<a href="#">
<i class="fa fa-edit"></i> <span>Retur</span>
</a>
<li><a href="retur_staffs.php"><i class="fa fa-
angle-double-right"></i> Retur Penjualan</a></li>
<li><a href="retur_suppliers.php"><i class="fa
fa-angle-double-right"></i> Retur Pembelian</a></li>
</ul>
</li>
<li><a href="stock_opname.php"><i class="fa fa-edit"></i>
<span>Stock Opname</span></a></li>
<a href="#">
<i class="fa fa-bar-chart-o"></i> <span>Laporan</span>
</a>
<li><a href="report_stock_products.php"><i class="fa fa-
angle-double-right"></i> Laporan Stok Produk</a></li>
<li><a href="report_in.php"><i class="fa fa-angle-double-

right"></i> Laporan Pembelian</a></li>
<li><a href="report_out.php"><i class="fa fa-angle-double-
right"></i> Laporan Penjualan</a></li>
<li><a href="report_debts.php"><i class="fa fa-angle-
double-right"></i> Laporan Hutang Dagang</a></li>
<li><a href="report_receives.php"><i class="fa fa-angle-
double-right"></i> Laporan Piutang Dagang</a></li>
</ul>
</li>
<a href="#">
<i class="fa fa-folder"></i> <span>Hutang dan Piutang</span>
</a>
<li><a href="debts.php"><i class="fa fa-angle-double-
right"></i> Hutang Dagang</a></li>
<li><a href="receivables.php"><i class="fa fa-angle-
double-right"></i> Piutang Dagang</a></li>
</ul>
</li>
</ul>
</section>

</aside>


<section class="content-header">
<h1>
WELCOME
</h1>
<ol class="breadcrumb">
</ol>
</section>


<section class="content">


<div class="row">

<section class="col-lg-7 connectedSortable">
Hai, Selamat datang di aplikasi inventory CV. ASFA SOLUTION,

Anda bisa melakukan pengolahan data terkait kegiatan atau aktifitas
pekerjaan Anda sesuai dengan level atau otorisasi kewenangan Anda
melalui menu-menu yang disediakan.
<br><br>
</section>
</div>
</section>
</aside>
</div>
</body>
</html>
Hasil dari skrip yang sudah kita buat akan menampilkan sebuah desain website
user friendly dan responsive yang dapat Anda lihat pada gambar 4.1.
Gambar 4.1. Desain aplikasi inventory
4.2 Koneksi Database

Desain web sudah, database juga sudah ada (bab 3), nah langkah selanjutnya
adalah kita buat agar desain web yang sudah dibuat itu terkoneksi dengan
database.. caranya?.. yukk kita bahas..
Dalam aplikasi ini, koneksi yang digunakan menggunakan perintah mysqli
bukan mysql, jadi baik koneksi database, query, dll.. semuanya menggunakan
mysqli, tujuannya untuk menstandarisasi terhadap ketentuan php terbaru,
karena pada php terbaru, tidak lagi mengenal perintah mysql.. mysql telah
dianggap depreciated.
Jadi nanti penggunaan query seperti berikut:
INSERT DATA
mysqli_query($connect, "INSERT INTO as_contoh (contoh_kode,
contoh_name) VALUES ($variable1,$variable2,?)");
UBAH DATA
mysqli_query($connect, "UPDATE as_contoh SET contoh_name =
'$variable1' WHERE contoh_kode = '$variable2'");
HAPUS DATA
mysqli_query($connect, "DELETE FROM as_contoh WHERE contoh_kode =
'$variabel1'");
Jadi bisa dikatakan bahwa:

Mysql_fetch_array = mysqli_fetch_array
Mysql_query = mysqli_query
Mysql_num_rows = mysqli_num_rows
Tapi kok, pada mysqli query yang om berikan contoh ada variable $connect?..
maksudnya apa?.. ya, jadi setiap kali kita ingin melakukan aktifitas terhadap
database, apapun itu kita berikan perintah $connect, perintah $connect itu
merupakan variable koneksi database yang akan kita buat setelah pembahasan
ini, gunanya untuk meningkatkan keamanan data.
Nah ini sumber dari variable $connect diatas.
<?php
$hostName = "localhost";
$username = "root";
$password = "";
$dbName = "dbinventory"; // ubah dengan nama database Anda
$connect = mysqli_connect($hostName,$username,$password,$dbName);
?>
Untuk mengetahui bahwa database itu sudah terkoneksi atau tidak, bisa
tambahkan skrip berikut:
<?php
$hostName = "localhost";
$username = "root";
$password = "";
$dbName = "dbinventory";
$connect = mysqli_connect($hostName,$username,$password,$dbName);
if ($connect){
echo "KONEKSI BERHASIL";
}
else{
echo "KONEKSI GAGAL";
}
?>
Hasilnya bisa Anda lihat pada gambar 4.2.

Gambar 4.2. Koneksi database berhasil
4.3 Auto Complete dengan jQuery

Autocomplete sangat membantu pengunjung dalam menelusuri suatu data atau
produk yang ingin dicari.. membantu dalam hal apa?.. misalnya begini, pertama,
kita ingin memasukkan nama kota, namun kita lupa dengan pasti ejaan alphabet
dari kota tersebut, kita hanya tahu dengan pasti bahwa kota itu berawal kata
“CI”, nah nama kota yang berawalan “CI” itu kan banyak sekali.. ada
CIREBON, CIANJUR, CIAMIS, CILEGON, CILACAP, dan lainnya.. intinya,
autocomplete ini membantu pengunjung dalam menemukan nama kota atau
data secara tepat.. yang kedua adalah membantu pengunjung dalam
mengefektifkan waktu .. misalnya kita ingin mencari nama propinsi Kalimantan
Selatan .. tanpa menggunakan autocomplete, mau tidak mau kita harus tulis
secara full (penuh) keyword yang ingin diperoleh, namun jika kita
menggunakan autocomplete, kita cukup tulis Kalimantan saja, maka seluruh
propinsi yang berhubungan dengan kata Kalimantan akan tampil seluruhnya,
misalnya Kalimantan Barat, Kalimatan Tengah, Kalimantan Timur, dll .. kita
cukup pilih salah satu, dan textbox akan terisi secara otomatis.. jadi bisa
disimpulkan bahwa autocomplete juga sangat berguna untuk meringkas
ketikkan data..
Lalu apa hubungannya dengan aplikasi inventory ini?.. ya, dalam
mengetikkan kode produk atau nama produk, kita juga bisa mengetikkan
dengan kode produk ataupun nama produk secara langsung, secara
otomatis daftar produk yang berhubungan dengan keyword yang kita
ketik akan ditampilkan, kita cukup pilih produk tersebut, dan produk
tersebut akan masuk masuk ke daftar transaksi.
Disini kita akan membuat autocomplete secara sederhana menggunakan php.
Langkah pertama :
Siapkan 2 file js yang dapat Anda temukan pada CD terlampir, yaitu pada folder
source code/autocomplete, 2 file j situ diantaranya :
1. Jquery.js
2. Jquery.autocomplete.js
Serta siapkan pula 1 file css, yaitu jquery.autocomplete.css
Langkah kedua :
Buat file php dengan nama index.php, kemudian tuliskan skrip berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>Autocomplete</title>
<script type="text/javascript" src="jquery.js"></script>
< s c r i p t t y p e = ' t e x t / j a v a s c r i p t '
src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css"
href="jquery.autocomplete.css" />
<script type="text/javascript">
$(document).ready(function() {
var cities = [
"JAKARTA","BANDUNG","CIREBON","GARUT","BOGOR","MAKASAR","DENPASA
R","PALEMBANG","MALANG","SEMARANG","CIANJUR","CIAMIS","SURABAYA"
,"MEDAN"
];
$("#suggest1").focus().autocomplete(cities);
});
</script>
</head>
<body>
<form autocomplete="off">
<p>
<label>Nama Kota</label>
<input type="text" id="suggest1" />
<input type="button" value="Choose" />
</p>
</form>
</body>
</html>
Hasil dari skrip diatas akan menampilkan autocomplete yang dapat Anda lihat
pada gambar 4.3.
Gambar 4.3. Hasil skrip index.php

Bab 4

Diunggah oleh

Informasi Dokumen

Deskripsi 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

Bab 4

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 4

Let’s Play The Code

4.1 Membuat Master Template Web

<a href="home.php" class="logo">

<div class="wrapper row-offcanvas row-offcanvas-left">

<li><a href="report_in.php"><i class="fa fa-angle-double-

Hai, Selamat datang di aplikasi inventory CV. ASFA SOLUTION,

4.2 Koneksi Database

Jadi bisa dikatakan bahwa:

Hasilnya bisa Anda lihat pada gambar 4.2.

4.3 Auto Complete dengan jQuery

Anda mungkin juga menyukai