Pemrograman Web 2 Membuat Aplikasi Berba

Pemrograman Web 21

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.

1

Akademi Komunitas Nganjuk, semester 3, tahun akademik 2017/2018

ContoAplikasi



body {
padding-top: 50px;
}

Membuat Navigasi
Navigasi diperlukan untuk memudahkan perpindahan antar halaman. Navigasi harus mudah
dilihat dan mudah dikenali. Tambahkan skrip berikut setelah tag .





Toggle navigation




ContohAplikasi



Home
Transaksi Jual

Transaksi Beli

Laporan

Laporan Stok
Barang
Laporan
Penjualan




Data
Master

Data Barang
Data Supplier

Data User

Administrator | Logout





Tambahkan skrip berikut setelah agar dapat menampilkan halaman secara dinamis
mengikuti tautan yang di-klik.




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.


Tambahkan baris berikut pada awal file index.php agar halaman tersebut dapat terhubung pada
database.


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:


Tabel Daftar Barang


Daftar Barang




#
Barcode
Nama Barang
Harga Beli
Harga Jual
Stok

Skrip Hapus Data
Tambahkan setelah tampilan tabel barang, dan tambahkan librari sweetalert.js agar berfungsi
dengan baik.

$('.btn-hapus').click(function(){
var kdBarcode = $(this).data('id');
swal({
title: "Kamu yakin?",
text: "Data yang dihapus tidak dapat dikembalikan!",
icon: "warning",
buttons: {

cancel: "Jangan, batalkan!",
confirm: "Hapus saja!",
},
dangerMode: true,
})
.then((d) => {
if (d) {
swal({
title: "Dihapus!",
text: "Data barang berhasil dihapus!",
icon: "success",
})

.then(function(){
window.location.href = 'barang-hapus.php?barcode='+kdBarcode;
});
} else {
swal("Dibatalkan", "Data barang aman tersimpan :)", "error");
}
});

return false;
});


Halaman Tambah Barang
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.


Tugas
Buatlah tabel supplier pada database dengan ketentuan sebagai berikut dan buatlah fungsi
CRUD-nya.
Nama Database
Nama tabel

: contoh
: supplier

idsupplier
supplier

cp
telepon

INT(2) auto_increment primary key
varchar(30)
varchar(30)
varchar(20)

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
tanggal
total
bayar
kembali
Nama Tabel
idjual
barcode
harga
qty
subtotal

varchar(10) primary key
datetime
double
double
double
: penjualan_detil
varchar(10) primary key
varchar(20) primary key
double
int(3)
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.


Membuat Halaman Transaksi Penjualan
Buatlah sebuah file baru dan beri nama jual.php. Langkah pertama dalam membuat halaman
transaksi penjualan adalah dengan membuat form untuk input barcode barang.


Transaksi Penjualan


























Tambahkan!




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




#
Barcode
Nama Barang
Harga
Qty
Sub Total





Belum ada barang.





Hasilnya akan berbentuk seperti berikut:

Kemudian, tambahkan modal untuk menampilkan form pembayaran. Pada skrip berikut juga
ditambahkan fungsi penomoran otomatis untuk nomor transaksi.





×
Pembayaran





No. Transaksi