Pemrograman Web 2 Membuat Aplikasi Berba

(1)

Pemrograman Web 2

1

Membuat Aplikasi Jual-Beli

Pada mata kuliah Pemrograman Web 2, akan fokus pada proses pembuatan aplikasi berbasis web

yang lengkap baik dari sisi fungsi/fitur aplikasi serta

user interface

yang rapi dan responsif.

Pada modul ini akan digunakan Bootstrap 3.3.7 sebagai fondasi pembuatan

user interface

, PHP 5

dan database MySQL untuk pengelolaan

back end

.

Bahan bisa diunduh pada tautan:

https://goo.gl/a6R7Z4

. Ekstrak file bahan tersebut di dalam

folder htdocs server anda. Perhatikan struktur filenya seperti pada gambar berikut.

Struktur File Bootstrap

Basic Template

Buat sebuah file, beri nama

index.php

dan isikan dengan struktur dasar halaman web seperti

berikut.

<!DOCTYPE html> <html lang="en"> <head>

(2)

<title>ContoAplikasi</title>

body {

padding-top: 50px; }

</style>

<body>

</body> </html>

Membuat Navigasi

Navigasi diperlukan untuk memudahkan perpindahan antar halaman. Navigasi harus mudah

dilihat dan mudah dikenali. Tambahkan skrip berikut setelah tag

<body>

.

<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>

<a class="navbar-brand" href="./">ContohAplikasi</a> </div>

<li><a href="index.php?hlm=jual">Transaksi Jual</a></li> <li><a href="index.php?hlm=beli">Transaksi Beli</a></li> <li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Laporan <b class="caret"></b></a>

<li><a href="index.php?hlm=laporan_barang">Laporan Stok Barang</a></li>

<li><a href="index.php?hlm=laporan_jual">Laporan Penjualan</a></li>

</ul> </li>

(3)

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Data class="navbar-link">Administrator</a> | <a href="index.php?hlm=logout" class="navbar-link">Logout</a>

</p>

</div> </div>

</nav>

Tambahkan skrip berikut setelah

</nav>

agar dapat menampilkan halaman secara dinamis

mengikuti tautan yang di-klik.

<div class="container"> <?php

if(isset( $_REQUEST['hlm'] )){ switch( $_REQUEST['hlm'] ){

case 'jual':

echo 'transaksi penjualan tampil di sini'; break;

case 'beli':

echo 'transaksi beli dari supplier'; break;

case 'barang':

echo 'master barang dagangan'; break;

case 'supplier':

echo 'halaman manajemen data supplier'; break;

case 'user':

echo 'halaman manajemen user'; break;

case 'laporan_barang':

echo 'laporan stok barang sisa'; break;

case 'laporan_jual':

echo 'laporan penjualan harian'; break;

default:

echo '<b>Error 404</b><br>Halaman tidak ditemukan!'; }

} else {

echo '<h1>Selamat Datang Admin !</h1>'; }

(4)

Membuat Database

Pembuatan database dapat dilakukan menggunakan phpMyAdmin, baik secara visual maupun

menggunakan skrip SQL seperti berikut.

CREATE DATABASE contoh; USE contoh;

CREATE TABLE IF NOT EXISTS `barang` ( `barcode` varchar(20) NOT NULL, `nama` varchar(30) NOT NULL, `harga_beli` double NOT NULL, `harga_jual` double NOT NULL, `stok` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Membuat Koneksi ke Database

Beri nama

koneksi.php

.

<?php

$host = "localhost"; //alamat server database

$user = "root"; //username dg akses ke database $pass = ""; //password utk akses ke database $db = "contoh"; //nama database yg diakses mysql_connect($host,$user,$pass);

mysql_select_db($db); ?>

Tambahkan baris berikut pada awal file

index.php

agar halaman tersebut dapat terhubung pada

database.

<?php

(5)

CRUD Data Master

Berikutnya adalah membuat fungsi CRUD (Create, Retrieve, Update, Delete) untuk data

master/induk seperti data Barang dan Supplier.

Halaman View Barang

Buat sebuah file baru, beri nama

barang.php

, dan kemudian ketikkan skrip berikut:

<?php

if(isset($_REQUEST['sub'])){ switch($_REQUEST['sub']){ case 'tambah':

include 'barang-tambah.php'; break;

case 'edit':

include 'barang-edit.php'; break;

default:

echo 'Error 404; Anda mencari halaman imajinasi ya?!'; }

} else {

//tabel daftar barang ditampilkan di sini

} ?>

Tabel Daftar Barang

<div class="page-header"> <h2>Daftar Barang</h2> </div>

<tr>

<th>#</th> <th>Barcode</th> <th>Nama Barang</th> <th>Harga Beli</th> <th>Harga Jual</th> <th>Stok</th> <th>

<?php

echo '<a href="index.php?hlm=barang&sub=tambah" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-plus-sign"

aria-hidden="true"></span> Tambah Data</a>'; ?>

</th> </tr> </thead> <tbody> <?php

(6)

if( mysql_num_rows($sql) > 0 ){ $no = 1;

while( $hsl = mysql_fetch_array($sql) ){ echo '<tr>';

echo '<td><div class="btn-group btn-group-sm" role="group">'; echo '<a

href="index.php?hlm=barang&sub=edit&barcode='.$hsl['barcode'].'" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a>';

echo '<a href="" class="btn btn-danger btn-hapus" data-id="'.$hsl['barcode'].'"><span class="glyphicon glyphicon-trash"

aria-echo '<tr><td colspan="6"><em>Belum ada untuk ditampilkan!</em></td></tr>';

Tambahkan setelah tampilan tabel barang, dan tambahkan librari

sweetalert.js

agar berfungsi

dengan baik.

(7)

.then(function(){

window.location.href = 'barang-hapus.php?barcode='+kdBarcode; });

} else {

swal("Dibatalkan", "Data barang aman tersimpan :)", "error"); }

Buat file baru dan beri nama

barang-tambah.php

. File ini memiliki 2 (dua) fungsi yaitu: untuk

menampilkan form input data barang dan fungsi untuk menyimpan data barang.

<?php

if(isset($_REQUEST['submit'])){

//simpan

$barcode = $_POST['barcode']; $nama = $_POST['nama'];

$hargabeli = $_POST['hargabeli']; $hargajual = $_POST['hargajual']; $stok = $_POST['stok'];

$sql = mysql_query("INSERT INTO barang

VALUES('$barcode','$nama','$hargabeli','$hargajual','$stok')"); if($sql){

header('Location: index.php?hlm=barang'); } else {

echo '<em>Ada yang error dengan query! Periksa kembali.</em>'; }

} else {

//tampilkan form input

?>

<div class="col-md-6"> <div class="page-header"> <h2>Form Input Barang</h2> </div>

<label for="inputBarcode" class="col-sm-3 control-label">Barcode</label>

</div> </div>

<label for="inputNama" class="col-sm-3 control-label">Nama Barang</label>

(8)

<label for="inputHargaBeli" class="col-sm-3 control-label">Harga Beli</label>

</div>

</div>

</div> </div>

<button type="submit" name="submit" class="btn btn-primary">Simpan</button>

<button type="reset" class="btn btn-danger">Batal</button>

<a href="index.php?hlm=barang" class="btn btn-link" role="button">Kembali ke Halaman Barang</a>

</div>

Buat file baru, beri nama

barang-edit.php

. Pada file ini terdapat 2 (dua) fungsi utama yaitu:

menampilkan data yang akan di-edit ke dalam form dan fungsi untuk memperbarui data pada

tabel barang.

(9)

$sql = mysql_query("UPDATE barang SET

nama='$nama',harga_beli='$hargabeli',harga_jual='$hargajual',stok='$stok' WHERE barcode='$barcode'");

if($sql){

echo '<em>Ada yang error dengan query! Periksa kembali.</em>'; }

} else {

//tampilkan data yang edit pada form

$barcode = $_REQUEST['barcode'];

$sql = mysql_query("SELECT * FROM barang WHERE barcode='$barcode'"); $hsl = mysql_fetch_array($sql);

?>

<div class="col-md-6"> <div class="page-header"> <h2>Form Edit Barang</h2> </div>

<label for="inputBarcode" class="col-sm-3 control-label">Barcode</label>

</div> </div>

<label for="inputNama" class="col-sm-3 control-label">Nama Barang</label>

</div>

<input type="number" min="0" name="hargabeli" class="form-control" id="inputHargaBeli" placeholder="Harga Beli"

value="<?=$hsl['harga_beli']; ?>">

<input type="number" min="0" name="hargajual" class="form-control" id="inputHargaJual" placeholder="Harga Jual"

(10)

</div> </div>

<button type="submit" name="submit" class="btn btn-primary">Simpan</button>

<a href="index.php?hlm=barang" class="btn btn-link" role="button">Kembali ke Halaman Barang</a>

</div> </div>

</form> </div>

<?php } ?>

Fungsi Hapus Data Barang

Buat file baru dan beri nama

barang-hapus.php

. File ini dipanggil melalui fungsi ajax pada

halaman

barang.php

.

<?php

include 'koneksi.php';

$sql = mysql_query("DELETE FROM barang WHERE barcode='$barcode'"); if($sql){

echo 'ada yang salah dengan query!'; }

?>

Tugas

Buatlah tabel

supplier

pada database dengan ketentuan sebagai berikut dan buatlah fungsi

CRUD-nya.

Nama Database : contoh

Nama tabel

: supplier

idsupplier

INT(2) auto_increment primary key

supplier

varchar(30)

(11)

Transaksi Penjualan

Berikutnya adalah halaman untuk memproses transaksi penjualan. Sebagai catatan, transaksi yang

terjadi adalah transaksi tunai.

Tabel Transaksi Penjualan

Untuk keperluan menyimpan data transaksi penjualan, diperlukan 2 (dua) buah tabel dengan

ketentuan sebagai berikut:

Nama Database

: contoh

Nama Tabel

: penjualan

idjual

varchar(10) primary key

tanggal

datetime

total

double

bayar

double

kembali

double

Nama Tabel

: penjualan_detil

idjual

varchar(10) primary key

barcode

varchar(20) primary key

harga

double

qty

int(3)

subtotal

double

Session

Disini diberikan contoh penggunaan

variabel session

untuk menampung data transaksi. Variabel

tersebut hanya dapat diakses jika halaman web menerapkan fungsi

session_start()

. Untuk itu,

tambahkan pada halaman index.php, letakkan sebelum memanggil koneksi database.

<?php

session_start();

include 'koneksi.php'; ?>

Membuat Halaman Transaksi Penjualan

(12)

<div class="page-header"> <h1>Transaksi Penjualan</h1> </div>

</div>

</div>

</div>

</div>

<button name="aksi" value="tambah" type="submit" class="btn sm btn-success btn-block">Tambahkan!</button>

</div> </form> </div>

Berikutnya tambahkan skrip untuk memasukkan data penjualan ke dalam variabel session dan

menampilkannya dalam tabel.

<?php

(13)

$_SESSION["arrayJualan"] = $itemJualan;

if(isset($_SESSION["arrayJualan"])){ $no = 1;

echo '<tr class="info"><td colspan="5" class="text-right"><strong>T O T A L</strong></td><td class="text-right">'.$total.'</td></tr>';

echo '<tr><td colspan="6" class="text-right">

(14)

<a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalJualan">Bayar</a>

</td></tr>'; } else {

?> <tr>

<td colspan="6"><em>Belum ada barang.</em></td> </tr>

<?php } ?> </tbody> </table>

Hasilnya akan berbentuk seperti berikut:

Kemudian, tambahkan modal untuk menampilkan form pembayaran. Pada skrip berikut juga

ditambahkan fungsi penomoran otomatis untuk nomor transaksi.

<?php

//nomor transaksi otomatis

$cek = mysql_query("SELECT idjual FROM penjualan WHERE DATE(tanggal)=CURDATE() ORDER BY idjual DESC");

if( mysql_num_rows($cek) > 0 ){

list($idjual) = mysql_fetch_array($cek); $nomor = substr($idjual,6,4);

$temp = $nomor + 1;

$idjual = date("ymd").sprintf("%04s",$temp); } else {

$idjual = date("ymd").'0001'; }

?>

<h4 class="modal-title">Pembayaran</h4> </div>

(15)

<input type="text" class="form-control" name="idjual" value="<?=$idjual; ?>" readonly>

</div> </div>

<label class="col-sm-3 control-label">Total Belanja</label> <div class="col-sm-9">

<input type="text" class="form-control" name="total" value="<?=$total; ?>" readonly>

</div> </div> </div>

<label class="col-sm-3 control-label">Jumlah Bayar</label> <div class="col-sm-9">

</div> </div> </div>

<label class="col-sm-3 control-label">Kembali</label> <div class="col-sm-9">

</div> </div> </div> </div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="submit" name="aksi" value="bayar" class="btn btn-primary btn-simpan">Simpan</button>

</div>

(16)

Form Pembayaran

Berikutnya adalah menambahkan skrip JavaScript (jQuery) untuk fungsi-fungsi dalam form.

$('input[name=barcode]').focus(); function cariBarcode(b){

var barcode = b;

var dataPost = 'aksi=cari&barcode='+barcode; $.ajax({

type: 'POST',

url: 'jual-aksi.php', data: dataPost, dataType: 'json',

success: function(hasil){ var namabarang = hasil[0]; var harga = hasil[1];

$('input[name=namabarang]').val(namabarang); $('input[name=harga]').val(harga);

$('input[name=qty]').focus(); }

}); }

$('input[name=barcode]').keypress(function(e) { if(e.which == 13) {

var barcode = $('input[name=barcode]').val(); cariBarcode(barcode);

$('input[name=qty]').focus(); }

return false; });

$('#btn-cari').click(function(){

var barcode = $('input[name=barcode]').val(); cariBarcode(barcode);

return false; });

$('input[name=qty]').keypress(function(e) { if(e.which == 13) {

(17)

$('input[name=barcode]').focus(); }

});

$('input[name=qty]').keypress(function(e) {

var subTotal = $('input[name=harga]').val() * $('input[name=qty]').val(); $('input[name=subtotal]').val(subTotal);

$('.btn-tambah').focus(); });

$('.btn-tambah').click(function(){ $('input[name=barcode]').focus(); });

$('#modalJualan').on('shown.bs.modal', function (e) { $('input[name=jmlbayar]').focus();

});

$('input[name=jmlbayar]').focusout(function() {

var kembalian = $('input[name=jmlbayar]').val() - $('input[name=total]').val(); $('input[name=kembalian]').val(kembalian);

$('.btn-simpan').focus(); });

</script>

Fungsi Cari Data Barang dan Simpan Transaksi

Untuk mempermudah pengguna dalam input transaksi, pengguna cukup memasukkan

barcode

dari barang, tekan

[Enter]

pada keyboard atau dengan klik ikon kaca-pembesar , maka

nama

barang

dan

harga jual

akan ditampilkan pada form.

Fungsi

cariBarcode

dipanggil menggunakan JavaScript berdasarkan

event

klik pada tombol cari

(ikon kaca pembesar) atau menekan tombol

[Enter]

setelah memasukkan barcode.

Selain itu, diperlukan juga skrip untuk memproses pembayaran dan menyimpan semua data

transaksi ke dalam tabel yang sesuai.

Untuk itu, buatlah sebuah file baru dengan nama

jual-aksi.php

dan tambahkan skrip berikut:

<?php

session_start(); include "koneksi.php";

if(isset($_REQUEST['aksi'])){ switch($_REQUEST['aksi']){ case 'cari':

$row = mysql_query("SELECT nama,harga_jual FROM barang WHERE barcode='$barcode'");

(18)

echo json_encode($array); break;

case 'bayar':

//simpan ke penjualan

$idjual = $_REQUEST['idjual']; $total = $_REQUEST['total']; $jmlbayar = $_REQUEST['jmlbayar']; $kembalian = $_REQUEST['kembalian']; $sql = mysql_query("INSERT INTO penjualan

VALUES('$idjual',NOW(),'$total','$jmlbayar','$kembalian')");

//simpan ke penjualan_detil

$itemJualan = $_SESSION['arrayJualan'];

foreach ($itemJualan as $key => $value) {

list($barcode,$namabarang,$harga,$qty,$subtotal) = $value; mysql_query("INSERT INTO penjualan_detil

VALUES('$idjual','$barcode','$harga','$qty','$subtotal')"); mysql_query("UPDATE barang SET stok=stok-$qty WHERE barcode='$barcode'");

}

//kembali ke halaman transaksi unset($_SESSION['arrayJualan']);

header('Location: index.php?hlm=jual'); break;

} } ?>

Tugas

Buatlah tabel transaksi pembelian dengan ketentuan sebagai berikut dan buatlah halaman

transaksi pembeliannya. Perlu diperhatikan, jika ada pembelian maka stok barang akan bertambah

sesuai dengan jumlah (

qty

) yang dibeli.

Nama Database

: contoh

Nama Tabel

: pembelian

nofaktur

varchar(10) primary key

tanggal

date

idsupplier

int(3)

total

double

bayar

double

Nama Tabel

: pembelian_detil

nofaktur

varchar(10) primary key

barcode

varchar(20) primary key

harga

double

qty

int(3)

(19)

Laporan Penjualan

Laporan dibuat dengan tujuan memberikan informasi spesifik yang diperlukan untuk pengambilan

keputusan. Berikut diberikan contoh pembuatan Laporan Penjualan.

Pertama, edit terlebih dahulu file

index.php

, ubah menjadi seperti berikut dan simpan kembali.

case 'laporan_jual':

include 'laporan-jual.php';

break;

Berikutnya, buatlah sebuah file baru dan beri nama

laporan-jual.php

dan tambahkan

skrip-skrip berikut ke dalamnya secara berurutan.

Konversi Nama Bulan

Untuk mempermudah pengguna, bulan (kalender) yang dalam PHP ditampilkan dengan format

angka atau nama dalam bahasa Inggris, perlu dilakukan sedikit perubahan ke dalam bahasa

Indonesia.

Tambahkan

array

nama-nama bulan dalam bahasa Indonesia seperti berikut ini.

<?php

$arrBulan = array( 1=>'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember' );

?>

Membuat Filter

(20)

Untuk membuatnya tambahkan skrip berikut.

<div class="page-header"> <h1>Laporan Penjualan</h1> </div>

<label class="col-sm-5 control-label">Periode Bulan/Tahun</label> <div class="col-sm-4">

<select class="form-control" name="bln"> <?php

$sql = mysql_query("SELECT DISTINCT MONTH(tanggal) AS bln FROM penjualan ORDER BY MONTH(tanggal)");

while($bln = mysql_fetch_array($sql)){ penjualan ORDER BY YEAR(tanggal) DESC");

while($hsl = mysql_fetch_array($sql)){

<label class="col-sm-5 control-label">Barang ditampilkan</label> <div class="col-sm-4">

<button type="submit" name="submit" class="btn primary btn-block"><i class="fa fa-file-o" aria-hidden="true"></i> Tampilkan</button> </div>

(21)

</div> </form> </div>

Menampilkan Laporan

Dan langkah selanjutnya adalah menambahkan skrip untuk menampilkan laporan saat tombol

[Tampilkan] di-klik.

<?php

//tampilkan laporan

if(isset($_REQUEST['submit'])){ $bulan = $_REQUEST['bln']; $tahun = $_REQUEST['thn']; $sort = $_REQUEST['sort']; $jml = $_REQUEST['jml'];

$tb = $tahun.$bulan;

$q = "SELECT

d.barcode, b.nama, SUM(d.qty) AS qty, b.stok FROM

penjualan p, penjualan_detil d, barang b WHERE

EXTRACT(YEAR_MONTH FROM tanggal) = '$tb' AND d.idjual = p.idjual AND

d.barcode = b.barcode GROUP BY d.barcode ORDER BY qty $sort LIMIT $jml";

$sql = mysql_query($q);

echo '<div class="row"><div class="col-xs-2"><strong>Bulan:</strong> '.$arrBulan[$bulan].'</div>';

echo '<div class="col-xs-10"><strong>Tahun:</strong> '.$tahun.'</div></div>'; echo '<table class="table table-bordered">';

echo '<thead><tr><th>#</th><th>Barcode</th><th>Nama Barang</th><th class="info">Qty Terjual</th><th>Qty in stock</td></tr></thead>'; if(mysql_num_rows($sql)>0){

$no = 1;

while(list($barcode,$nmbarang,$qty,$stok) = mysql_fetch_array($sql)){ echo '<tr><td>'.$no.'</td>';

echo '<td>'.$barcode.'</td>'; echo '<td>'.$nmbarang.'</td>';

echo '<td class="info">'.$qty.'</td>'; echo '<td>'.$stok.'</td></tr>';

$no++; }

}

echo '</table>'; }

(22)