bab iv rancangan sistem dan program usulan · bagian admin melihat data karyawan a8. bagian admin...
TRANSCRIPT
BAB IV
RANCANGAN SISTEM DAN PROGRAM USULAN
4.1. Analisa Kebutuhan Software
Dari hasil analisa yang telah dilakukan pada MM Computer, maka peneliti
mendapatkan hasil, bahwasanya tidak adanya sistem informasi dan suatu media
yang dapat mengirimkan informasi dengan cepat menjadi masalah yang ada di
MM Computer, maka dari itu penulis telah merancang suatu sistem informasi dan
media yang dapat menyelesaikan masalah tersebut.Adapun spesifikasi kebutuhan
(System Requirement) adalah sebagai Berikut ini :
Halaman Login Admin:
A1. Bagian admin dapat melakukan login
A2. Bagian admin dapat melihat data produk
A3. Bagian admin dapat menambahkan data produk
A4. Bagian admin dapat menambah data persediaan
A5. Bagian admin dapat melihat data pesanan
A6. Bagian admin dapat menerima ataupun menolak pesanan
A7. Bagian admin melihat data karyawan
A8. Bagian admin dapat melihat data penjualan
Halaman Pelanggan :
B1. Pelanggan melakukan daftar member
B2. Pelanggan dapat melakukan login
B3. Pelanggan dapat memilih produk
B4. Pelanggan dapat mengisi form pesanan
27
28
B5. Pelanggan dapat melakukan pembayaran
B6. Pelanggan dapat mengunggah bukti pembayaran
B7. Pelanggan dapat mengecek history pesanan
4.1.1. Use Case Diagram
1. Use Case Diagram user admin
Gambar IV. 1 Use Case Diagram Admin
29
2. Use Case Diagram user customer
Gambar IV. 2 Use Case Diagram Customer
30
4.1.2. Activity Diagram
1. Activity Diagram user admin
Gambar IV. 3 Activity Diagram Admin
31
2. Activity Diagram user Customer
Gambar IV. 4 Activity Diagram Customer
4.2. Desain
4.2.1. Database
Dalam database desain akan digambarkan dalam suatu entity relationship
diagram (ERD), serta memaparkan penjelasan dari entity relationship diagram
(ERD) tersebut.
32
1. ERD (Entity Relationship Diagram)
id_member
nama
tlp
alamat
kota
katasandi
dt_member pesan
no
id_order
id_product
kategori
hrg_product
id_member
nm_product
jmh_order
ukuran
warna
upload
status_pembayaran
ttl_harga
tgl_order
dt_order
status_order
kirim dt_uploadid_member
Id_order
an_rek
bukti_trf
tgl_trf
bank_tjn
nom_trf
dapat
dt_pengiriman
no
nama
harga
wkt_pengiriman
jns_paket
punya
dt_product
id_product
nama_product
kategori
tgl_update
keterangan
hrg_product
jmh_product
foto
status
ukuran
warna
1 m
1
1
11
1
1
Gambar IV. 5 Entity Relationship Diagram
33
2. LRS (Logical Record Structure)
dt_upload
id_order
id_member
an_rek
bank_tjn
nom_trf
bukti_trf
tgl_trf
dt_member
id_member
nama
tlp
alamat
kota
katasandi
dt_pengiriman
no
nama
harga
wkt_pengiriman
jns_paket
dt_order
no
id_order
id_product
id_member
nm_product
kategori
hrg_product
jmh_order
keterangan
ukuran
warna
ttl_harga
tgl_order
upload
status_pembayaran
status_order
id_product
nm_product
kategori
hrg_product
jmh_product
tgl_update
keterangan
foto
status
ukuran
warna
dt_product
1
1
1
1
1
M
1
1
Gambar IV. 6 Logical Record Structure
3. Spesifikasi File
a. Spesifikasi file dtmember
Nama Database : mm_computer
Nama File : dtmember
Akronim : data member
Tipe File : File master
Akses File : Random
Panjang Record :170 Bytes
Kunci File : id_member
34
Tabel IV. 1
Spesifikasi file tabel dtmember
No Elemen Data Nama Field Type Size Keterangan
1 id_member id member Varchar 25 Primary
2 nama nama member Varchar 25
3 email Email Varchar 25
4 tlp Telepon Varchar 15
5 alamat Alamat Varchar 40
6 kota Kota Varchar 20
7 katasandi kata sandi Varchar 20
b. Spesifikasi filedt_admin
Nama Database : mm_computer
Nama File : dt_admin
Akronim : data admin
Tipe File : File master
Akses File : Random
Panjang Record :156 Bytes
Kunci File : id_karyawan
Tabel IV. 2
Spesifikasi file tabel dt_admin
No Elemen Data Nama Field Type Size Keterangan
1 id_karyawan id karyawan Varchar 11 Primary
2 nm_karyawan nama karyawan Varchar 25
3 alamat Alamat Varchar 25
4 jabatan Jabatan Varchar 25
5 Email Email Varchar 25
6 Username Username Varchar 20
7 Password Password Varchar 10
35
8 Tlp Telepon Varchar 15
c. Spesifikasi file dt_banner
Nama Database : mm_computer
Nama File : dt_banner
Akronim : data banner
Tipe File : File master
Akses File : Random
Panjang Record :31Bytes
Kunci File : id_banner
Tabel IV. 3
Spesifikasi file tabel dt_banner
No Elemen Data Nama Field Type Size Keterangan
1 id_banner id banner Integer 11 Primary
2 Nama nama banner Varchar 20
3 Foto Foto Longblob
4 Tgl Tanggal Date
d. Spesifikasi file dt_karyawan
Nama Database : mm_computer
Nama File : dt_karyawan
Akronim : data karyawan
Tipe File : File master
Akses File : Random
Panjang Record :146 Bytes
Kunci File : id_karyawan
36
Tabel IV. 4
Spesifikasi file tabel dt_karyawan
No Elemen Data Nama Field Type Size Keterangan
1 id_karyawan id karyawan Varchar 11 Primary
2 nama nama karyawan Varchar 25
3 alamat Alamat Varchar 25
4 e-mail Email Varchar 25
5 foto Foto Longblob
6 username Username Varchar 20
7 password Password Varchar 10
8 no_telp nomor teleppon Varchar 15
9 level Level Varchar 15
e. Spesifikasi file dt_order
Nama Database : mm_computer
Nama File : dt_order
Akronim : data order
Tipe File : File master
Akses File : Random
Panjang Record :215 Bytes
Kunci File : no
Tabel IV. 5
Spesifikasi file tabel dt_order
No Elemen Data Nama Field Type Size Keterangan
1 no no id Integer 11 Primary
2 id_order id order Integer 20
3 id_product id product Varchar 10
4 id_member id member Varchar 20
5 nm_product Nama product Varchar 5
37
6 Kategori Kategori Varchar 20
7 hrg_product Harga product Varchar 20
8 jmh_order Jumlah order Varchar 20
9 keterangan Keterangan Varchar 20
10 Ukuran Ukuran Integer 9
11 Warna Warna Integer 9
12 ttl_harga Total harga Varchar 20
13 tgl_order Tanggal order Integer 6
14 Upload Upload Date
15 status_pembayaran status pembayaran Varchar 10
16 Emain Email Varchar 15
17 status_order Status order Varchar 10
f. Spesifikasi file dt_pengiriman
Nama Database : mm_computer
Nama File : dt_pengiriman
Akronim : data pengiriman
Tipe File : File master
Akses File : Random
Panjang Record :66 Bytes
Kunci File : no
Tabel IV. 6
Spesifikasi file tabel dt_pengiriman
No Elemen Data Nama Field Type Size Keterangan
1 No nomor pengiriman Integer 11 Primary
2 Nama Nama Varchar 20
3 harga Harga Integer 20
4 wkt_pengiriman waktu pengiriman Varchar
5 jns_paket jenis paket Varchar 15
38
g. Spesifikasi file dt_product
Nama Database : mm_computer
Nama File : dt_product
Akronim : data product
Tipe File : File master
Akses File : Random
Panjang Record :159 Bytes
Kunci File : id_product
Tabel IV. 7
Spesifikasi file tabel dt_product
No Elemen Data Nama Field Type Size Keterangan
1 id_product id peoduct Varchar 8 Primary
2 nm_product nama product Varchar 20
3 kategori Kategori Varchar 20
4 hrg_product harga product Integer 11
5 jmh_product jumlah product Integer 11
6 tgl_update tanggal update Date
7 keterangan Keterangan Varchar 50
8 foto Foto Longblob
9 status Status Varchar 20
10 ukuran Ukuran Varchar 4
11 warna Warna Varchar 15
h. Spesifikasi file dt_ukuran
Nama Database : mm_computer
Nama File : dt_ukuran
Akronim : data ukuran
Tipe File : File master
39
Akses File : Random
Panjang Record :10 Bytes
Kunci File : ukuran
Tabel IV. 8
Spesifikasi file tabel dt_ukuran
No Elemen Data Nama Field Type Size Keterangan
1 Ukuran Ukuran Varchar 10 Primary
i. Spesifikasi file dt_upload
Nama Database : mm_computer
Nama File : dt_upload
Akronim : data upoad
Tipe File : File master
Akses File : Random
Panjang Record :84 Bytes
Kunci File : id_order
Tabel IV. 9
Spesifikasi file tabel dt_upload
No Elemen Data Nama Field Type Size Keterangan
1 id_order id order Varchar 8 Primary
2 id_member id member Varchar 20
3 an_rek atas nama rekening Varchar 30
4 bank_tjn bank tujuan Varchar 15
5 nom_trf nominal transfer Integer 11
6 bukti_trf bukti transfer Longlob
7 tgl_trf tanggal transfer Date
40
j. Spesifikasi file dt_warna
Nama Database : mm_computer
Nama File : dt_warna
Akronim : data warna
Tipe File : File master
Akses File : Random
Panjang Record :10 Bytes
Kunci File : warna
Tabel IV. 10
Spesifikasi file tabel dt_warna
No Elemen Data Nama Field Type Size Keterangan
1 warna Warna Varchar 10 Primary
4.2.2. Software Architecture
Dalam pembuatan aplikasi ini, digunakan pemrogramanterstruktur yang
mana akan dijelaskan dalam component diagam dan deployment diagram.
Gambar IV. 7 Component Diagram Customer
41
Gambar IV.8 Component Diagram Admin
Gambar IV. 9 Deployment Diagram
4.2.3. User Interface
Berikut adalah interface / tampilan antar muka dari perancangan e-
commerce pada MM Computer.
42
a. Tampilan login customer
Gambar IV. 10 Tampilan login customer
b. Tampilan form order customer
Gambar IV. 11 Tampilan form order customer
43
c. Tampilan form checkout
Gambar IV. 12 Tampilan form checkout
d. Tampilan form chart
Gambar IV. 13 Tampilan form chart
e. Tampilan form konfirmasi pembayaran
Gambar IV. 14 Tampilan form konfirmasi pembayaran
44
f. Tampilan form login admin
Gambar IV. 15 Tampilan form login admin
g. Tampilan form data order
Gambar IV. 16 Tampilan form data order
h. Tampilan form data member
Gambar IV. 17 Tampilan form data member
45
4.3. Code Generation
Perancangan pada sistem informasi penjualan sparepart komputer pada MM
Computer menggunakan pemrograman yang terstrukutur dengan menggunakan
bahasa hypertext processor (PHP) untuk server-side-nya dan cascading style
sheet (CSS)dan hypertext mark up language (HTML), berikut adalah listing
program dari perancangan sistem informasi sparepart komputer pada MM
Computer. Perancangan pada sistem informasi penjualan ini menggunakan
pemrograman yang terstrukutur dengan menggunakan bahasa hypertext processor
(PHP) untuk server-side-nya dan cascading style sheet (CSS)dan hypertext mark
up language (HTML), berikut adalah listing program dari perancangan sistem
informasi penjualan :
A. Code login customer
<?phpinclude 'library/all_function.php';?>
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8"> <title> MM KOMPUTER</title>
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<meta name="description" content=""> <!--[if ie]><meta content='IE=8' http-equiv='X-UA-
Compatible'/><![endif]-->
<!-- bootstrap --> <link href="bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="bootstrap/css/bootstrap-
responsive.min.css" rel="stylesheet"> <link href="themes/css/bootstrappage.css"
rel="stylesheet"/>
<!-- global styles -->
<link href="themes/css/flexslider.css"
rel="stylesheet"/> <link href="themes/css/main.css" rel="stylesheet"/>
46
<!-- scripts -->
<script src="themes/js/jquery-1.7.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="themes/js/superfish.js"></script>
<script src="themes/js/jquery.scrolltotop.js"></script> <!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body> <div id="top-bar" class="container">
<div class="row">
<div class="span4"> <form method="POST"
class="search_form">
<input type="text"
class="input-block-level search-query" Placeholder="eg. T-sirt"> </form>
</div>
<section class='nav_user'>
<?php include
'index/nav_user.php'; ?> </section>
</div>
</div>
</div> <div id="wrapper" class="container">
<?php include 'index/navbar.php'; ?>
<section class="header_text sub"> <h4><span>Login or
Regsiter</span></h4>
</section>
<section class="main-content">
<div class="row">
<div class="span5">
<h4
class="title"><span class="text"><strong>Login</strong> Form</span></h4>
<form
action="user_akses/proses_login.php" method="post">
<input type="hidden" name="next" value="/">
<fieldset>
<div class="control-group">
<label class="control-label">E-mail</label>
47
<div class="controls">
<input type="text" placeholder="Enter your username"
id="username" class="input-xlarge" name='email'>
</div>
</div> <div
class="control-group">
<label class="control-label">Password</label>
<div class="controls">
<input type="password" placeholder="Enter your
password" id="password" class="input-xlarge" name='password'>
</div>
</div>
<div class="control-group">
<input tabindex="3" class="btn btn-inverse large" type="submit" value="Sign into your account">
<hr>
<p class="reset">Recover your <a tabindex="4" href="#"
title="Recover your username or password">username or
password</a></p>
</div>
</fieldset>
</form>
</div>
<div class="span7">
<h4
class="title"><span class="text"><strong>Form</strong> Pendaftaran</span></h4>
<form
action="user_akses/proses_daftar.php" method="post" class="form-
stacked"> <fieldset>
<div
class="control-group">
<label class="control-label">Username</label>
48
<div class="controls">
<input type="text" placeholder="Enter your username" class="input-xlarge" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label">Email :</label>
<div class="controls">
<input type="text" placeholder="Enter your email" class="input-xlarge" name="email">
</div>
</div>
<div
class="control-group">
<label class="control-label">Nomor Telfon:</label>
<div class="controls">
<input type="text" placeholder="Enter your password"
class="input-xlarge" name="telpon">
</div>
</div>
<div
class="control-group">
<label class="control-label">Alamat:</label>
<div class="controls">
<textarea placeholder="Masukan Alamat Anda" class="input-xlarge" name="alamat" rows="5" cols="250">
</textarea>
</div>
</div>
<div
class="control-group">
49
<label class="control-label">Kota:</label>
<div class="controls">
<input type="text" placeholder="Enter your password" class="input-xlarge" name="kota">
</div>
</div>
<div
class="control-group">
<label class="control-label">Password:</label>
<div class="controls">
<input type="password" placeholder="Enter your
password" class="input-xlarge" name="password">
</div>
</div>
<div
class="control-group">
<p>Now that we know who you are. I'm not a mistake! In a
comic, you know how you can tell who the arch-villain's going to
be?</p>
</div>
<hr> <div
class="actions"><input tabindex="9" class="btn btn-inverse large"
type="submit" value="Create your account"></div>
</fieldset> </form>
</div>
</div>
</section> <section class='nav_user'>
<?php include
'index/footer.php'; ?>
</section> </div>
<script src="themes/js/common.js"></script>
<script> $(document).ready(function() {
$('#checkout').click(function (e) {
document.location.href =
50
"checkout.html";
})
}); </script>
</body>
</html>
B. Code form order customer
<?php
include 'library/all_function.php';
?> <!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8">
<title> MM KOMPUTER</title>
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <meta name="description" content="">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-
Compatible'/><![endif]-->
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-
responsive.min.css" rel="stylesheet">
<link href="themes/css/bootstrappage.css" rel="stylesheet"/>
<!-- global styles --> <link href="themes/css/flexslider.css"
rel="stylesheet"/>
<link href="themes/css/new_main.css"
rel="stylesheet"/> <link
href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
<!-- scripts -->
<script src="themes/js/jquery-1.7.2.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
<script src="themes/js/superfish.js"></script>
<script src="themes/js/jquery.scrolltotop.js"></script> <script src="themes/js/jquery.fancybox.js"></script>
<script src="datepicker/js/bootstrap-
datepicker.js"></script> <script src="datepicker/js/bootstrap-
51
datepicker.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/respond.min.js"></script>
<![endif]--> </head>
<body>
<div id="top-bar" class="container"> <div class="row">
<div class="span4"><a
href="index.html" class="logo pull-left"></a>
</div> <section class='nav_user'>
<?php include 'index/nav_user.php'; ?>
</section>
</div>
</div> </div>
</div>
<div id="wrapper" class="container">
<?php include 'index/navbar.php'; ?>
<section class="header_text sub"> </section>
<section class="main-content">
<div class="row">
<div class="span12 text-
center"> <h3 style="text-transform: uppercase;
color: #000000"><span style="color: #000000;;">Product</span>
Detail</h3>
</div> </div>
<div class="row">
<div class="span9">
<div class="row"> <div
class="span4">
<?php
$data = get_image($_GET['id']); ?>
</div>
<div class="span5">
52
<?php echo detail_brg($_GET['id']); ?>
</div>
<div class="span5">
<?php
if (isset($_POST["btn_order"])) {
if (empty($_SESSION["email"]) && empty($_SESSION["pass"])){
echo "<h5 style='color:red'>Maaf Silahkan Login
Terlebih Dahulu Untuk Melakukan Pemesanan</h5>";
}
else{
order_brg(
$_POST["id"],
$_POST["ttl_order"],
$_POST["warna"],
$_POST["ukuran"],
$_POST["ttl_harga"],
$_POST["tgl_pengiriman"],
$_SESSION["email"]
);
} }
?>
<form class="form-inline" method="POST" action="" name="fm_order">
<div class="form-group">
<label style="font-weight: bold"></label>
<?php echo "<input type='hidden' name='id' value=".$_GET["id"]." required>";?>
</div>
53
<div class="form-group">
<label style="font-weight: bold">Banyak Jumlah Pesanan</label>
<br/>
<?php
$harga = harga($_GET["id"]);
$hrg = implode("", $harga);
echo"
<select name='ttl_order' class='form-control'
id='ttl_order' required>
<option value=''>Jumlah Pesanan</option>";
$max_order = 10;
for ($jmh_order=1; $jmh_order <= $max_order;) {
echo"<option value='$jmh_order'>$jmh_order</option>";
$jmh_order++;
}?>
</select>
</div>
<div class="form-group">
<label style="font-weight: bold">Pilihan Warna
</label>
<br/>
<select name="warna" class="form-control"
required>
<option value=""> Pilih Warna</option>
<?php
$warna = plh_warna($_GET["id"]);
foreach ($warna as $arwarna) {
54
echo "<option
value='".$arwarna."'>".$arwarna."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label style="font-weight: bold">Pilihan
Ukuran</label>
<br/>
<select name="ukuran" class="form-control" required>
<option value=""> Pilih Ukuran</option>
<?php
$ukuran =plh_ukuran($_GET["id"]);
foreach ($ukuran as $arukuran) {
echo "<option
value='".$arukuran."'>".$arukuran."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label style="font-weight: bold">Tanggal
Pengiriman</label>
<br/>
<input type="text" name="tgl_pengiriman"
id="tgl_pengiriman" class="form-control" placeholder="Pilih Tanggal Pengiriman ....." required>
</div>
55
<div class="form-group">
<label style="font-weight: bold">Pilihan Jasa
Pengiriman</label>
<br/>
<?php echo" <select name='dt_pengiriman' class='form-control' onchange='jasa(\"".$hrg."\",this.value)'
required>"?>
<option value="">Pilih Jasa Pengiriman</option>
<?php
$jasa =get_jasa();
foreach ($jasa as $arjasa) {
echo "<option
value='".$arjasa["nama"]."'>".$arjasa["nama"]."</option>";
}
?>
</select>
</div>
<div id="dt_jasa">
</div>
<div class="form-group">
<label style="font-weight: bold"></label>
<input type="hidden" class="form-control" name="ttl_harga" id="ttl_harga"><p id="total" style="font-weight: bold"></p>
</div>
<div class="form-group">
<button name="btn_order" value="order" class="btn btn-
inverse" type="submit">Tambahkan</button>
56
</div>
</form>
</div>
</div>
<div class="row">
<div class="span9">
<ul
class="nav nav-tabs" id="myTab">
<br>
<li class="active"><a href="#home">Keterangan Product</a></li>
<li class=""><a href="#profile">Warna Dan Ukuran</a></li>
</ul>
<div
class="tab-content">
<?php $data = get_products($_GET["id"]);
foreach ($data as $fetch_data) {
?>
<div class="tab-pane active" id="home">
<?php echo $fetch_data["keterangan"];?>
</div>
<div class="tab-pane" id="profile">
<table class="table table-striped shop_attributes">
<tbody>
<tr class="">
<th>Size</th>
<td><?php echo
$fetch_data["ukuran"];?></td>
57
</tr>
<tr class="alt">
<th>Colour</th>
<td><?php echo
$fetch_data["warna"];?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<?php
}
?>
<div class="span9">
<br>
<h4
class="title">
<span class="pull-left"><span class="text"><strong
style="color: #000000;">Related</strong> Products</span></span>
<span class="pull-right">
<a class="left button" href="#myCarousel-1" data-slide="prev"></a><a class="right button" href="#myCarousel-1" data-
slide="next"></a>
</span>
</h4>
<div id="myCarousel-1" class="carousel slide">
<div class="carousel-inner">
<?php echo product_carousel();?>
</div>
</div>
</div>
58
</div>
</div>
<div class="span3 col">
</div>
</section> <?php include 'index/footer.php'; ?>
</div>
<script src="themes/js/common.js"></script>
<script>
$(function () {
$('#myTab a:first').tab('show'); $('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show'); })
})
$(document).ready(function() {
$('.thumbnail').fancybox({ openEffect : 'none',
closeEffect : 'none'
});
$('#myCarousel-2').carousel({
interval: 2500 });
});
$(document).ready(function(){ var
date_input=$('input[name="tgl_pengiriman"]'); //our date input has the
name "date" var container=$('.bootstrap-iso form').length>0 ?
$('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd', container: container,
todayHighlight: true,
autoclose: true, })
})
function jasa(hrg,nama){
var detail =
document.getElementById("detail_kurir");
if (nama) {
document.getElementById("dt_jasa").innerHTML="";
} if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera,
Safari
59
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5 xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
} xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200)
{
document.getElementById("dt_jasa").innerHTML=this.responseText;
$(document).ready(function(){
var jmh_beli =
document.getElementById("ttl_order").value; var harga_jasa=
document.getElementById("jasa_harga").value;
var harga_total = (parseInt(jmh_beli) *
parseInt(hrg)) + parseInt(harga_jasa);
document.getElementById('ttl_harga').value=harga_total;
var hargatmp = (parseInt(jmh_beli) * parseInt(number_format(hrg,0,',','.'))) +
parseInt(number_format(harga_jasa,0,',','.'));
document.getElementById('total').innerHTML="Total Harga
Rp. "+number_format(hargatmp,3,',','.');
$("#ttl_order").change(function(event){
var jmh_beli =
document.getElementById("ttl_order").value; var harga_jasa=
document.getElementById("jasa_harga").value;
var harga_total = (parseInt(jmh_beli) *
parseInt(hrg)) + parseInt(harga_jasa);
document.getElementById('ttl_harga').value=harga_total;
var hargatmp = (parseInt(jmh_beli) *
parseInt(number_format(hrg,0,',','.'))) +
parseInt(number_format(harga_jasa,0,',','.'));
document.getElementById('total').innerHTML="Total Harga
60
Rp. "+number_format(hargatmp,3,'.','.');
})
});
}
}
xmlhttp.open("GET","user_akses/opt_kurir.php?name="+nam
a+'&hrg='+hrg,true); xmlhttp.send();
}
function number_format(number, decimals, decPoint, thousandsSep){
decimals = decimals || 0;
number = parseFloat(number);
if(!decPoint || !thousandsSep){
decPoint = '.';
thousandsSep = ','; }
var roundedNumber = Math.round( Math.abs( number ) * ('1e' + decimals) ) + '';
var numbersString = decimals ?
roundedNumber.slice(0, decimals * -1) : roundedNumber; var decimalsString = decimals ?
roundedNumber.slice(decimals * -1) : '';
var formattedNumber = "";
while(numbersString.length > 3){
formattedNumber += thousandsSep +
numbersString.slice(-3) numbersString = numbersString.slice(0,-3);
}
return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
}
</script>
</body>
</html>
C. Code checkout
<?php
include 'library/all_function.php';
?> <!DOCTYPE html>
61
<html lang="en">
<head>
<meta charset="utf-8"> <title> MM KOMPUTER</title>
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <meta name="description" content="">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-
Compatible'/><![endif]--> <!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="themes/css/bootstrappage.css"
rel="stylesheet"/>
<!-- global styles -->
<link href="themes/css/flexslider.css"
rel="stylesheet"/> <link href="themes/css/new_main.css"
rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
<!-- scripts -->
<script src="themes/js/jquery-1.7.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="themes/js/superfish.js"></script>
<script src="themes/js/jquery.scrolltotop.js"></script> <!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/respond.min.js"></script> <![endif]-->
<style type="text/css">
.px{ margin-top: -30px;
margin-left: 360px;
} .wrap-content{
margin:0px 100px;
width: 940px;
} #txt-top{
text-align: center;
} #form-content{
margin: 0px 300px;
62
}
</style>
</head>
<body>
<div id="top-bar" class="container"> <div class="row">
<div class="span4">
<a href="index.html" class="logo pull-left"><img src="head.png" class="site_logo"
alt=""></a>
<section class='nav_user'>
<div class="px">
<?php include
'index/nav_user.php'; ?> </div>
</section>
</div>
</div> </div>
</div>
<div id="wrapper" class="container">
<?php include 'index/navbar.php'; ?>
<section class="header_text sub"> </section>
<section class="main-content">
<div class="row">
<div class="span1"> <div class="row">
<div
class="span6" style="padding-left: 50px;">
<h4
style="color:#000000;">Pilih ID <span style="color: #000000;">Orderan Anda :</span></h4>
<select name="id_product" onclick="fm_confirm(this.value)">
<option value=""> ID Orderan</option>
<?php
echo get_idorder($_SESSION["id_member"]);
?>
</select>
63
<div class="wrap-content">
<h4 id="txt-top"><span></span>MOHON PILIH ID ORDERAN ANDA</h4>
<?php if
(isset($_POST["btn_upload"])) {
$tgl_trf = date("Y-M-D");
$id_order = $_POST["id_order"];
$an_rek = $_POST["an_rek"];
$bank_tjn = $_POST["bank_tjn"];
$nom_trf = $_POST["nom_trf"];
$nm_foto = $_FILES["upload_foto"]["name"];
$tmp_name = $_FILES["upload_foto"]["tmp_name"];
confirm_pembayaran($id_order,$an_rek,$bank_tjn,$tgl_trf,$n
om_trf,$nm_foto,$tmp_name);
} else{}
?>
<div id="form-content">
</div>
</div>
</div>
</div>
</div>
</div> </section>
<?php include 'index/footer.php'; ?>
</section>
</div>
<script src="themes/js/common.js"></script>
<script type="text/javascript">
function fm_confirm(idorder){
var content = document.getElementById("form-content");
var text =
64
document.getElementById("txt-top");
if (idorder =="") {
text.innerHTML="MOHON PILIH ID ORDERAN ANDA";
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome,
Opera, Safari xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 &&
this.status==200) {
text.innerHTML=""; document.getElementById("form-
content").innerHTML=this.responseText;
} }
xmlhttp.open("GET","form_pembayaran.php?id_order="+idorder,true);
xmlhttp.send();
}
function show_mdal($nm_kurir){
var mdal_master = document.getElementById("mdal_master"); var close = document.getElementById('btn_close');
close.onclick = function() {
mdal_master.style.display = "none";
} mdal_master.style.display="block";
}
function val_harga(total,harga){
var vtotal = parseInt(total); var vharga = parseInt(harga);
var v_note = document.getElementById("vnote");
if (vharga != vtotal) {
v_note.innerHTML="*Not Valid"; // edit error span
$(document).ready(function(){
$("#vnote").css("margin-left","10px"); $("#vnote").css("color","red");
$("#vnote").css("font-weight","bold");
65
});
$('form').attr('onsubmit','return false;'); }
else{
v_note.innerHTML=""; $('form').attr('onsubmit','return true;');
}
} //submit handler
</script> </body>
</html>
D. Code chart
<?php
include 'library/all_function.php'; ?>
<?php if (isset($_GET["act"]) == "del") {
delete_order($_GET["id_ord"],$_GET["id_member"]);
} else{}
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title> MM KOMPUTER</title> <meta name="viewport" content="width=device-
width, initial-scale=1.0">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.
min.css">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-
Compatible'/><![endif]-->
<!-- bootstrap --> <link href="bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="bootstrap/css/bootstrap-
responsive.min.css" rel="stylesheet"> <link href="themes/css/bootstrappage.css"
rel="stylesheet"/>
<!-- global styles -->
66
<link href="themes/css/flexslider.css"
rel="stylesheet"/>
<link href="themes/css/new_main.css" rel="stylesheet"/>
<link
href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<!-- scripts --> <script src="themes/js/jquery-1.7.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="themes/js/superfish.js"></script> <script src="themes/js/jquery.scrolltotop.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script
src="themes/js/respond.min.js"></script>
<![endif]--> </head>
<style type="text/css">
.px{ margin-top: -30px;
margin-left: 360px;
}
table{
width:100%;
margin: 0px 50px; }
table td{
white-space: nowrap; /** added **/ font-size: 12px;
text-align: center;
}
table td:last-child{ width:100%;
}
</style>
<body>
<div id="top-bar" class="container"> <div class="row">
<div class="span4">
<a href="index.html"
class="logo pull-left"><img src="head.png" class="site_logo" alt=""></a>
<section class='nav_user'>
<div class="px">
<?php include
'index/nav_user.php'; ?>
67
</div>
</section>
</div> </div>
</div>
</div> <div id="wrapper" class="container">
<?php include 'index/navbar.php'; ?> <section class="header_text sub">
</section>
<section class="main-content">
<div class="row">
<div class="span11">
<h4
class="title"><span class="text"><strong style="color:
#ef377b">Daftar</strong> Belanjaan</span></h4>
<table class="table table-striped" style="font-size: 6px;">
<thead>
<tr>
<td style="font-weight: bold; font-size: 6px;">Batal</td>
<td style="font-weight: bold; font-size: 6px;">ID Order</td>
<td style="font-weight: bold; font-size: 6px;">ID Product</td>
<td style="font-weight: bold; font-size: 6px;">Foto
Product</td>
<td style="font-weight: bold; font-size: 6px;">Nama
Product</td>
<td style="font-weight: bold; font-size: 6px;">Jumlah Order</td>
<td style="font-weight: bold; font-size: 6px;">Harga Product</td>
<td style="font-weight: bold; font-size: 6px;">Total Harga</td>
<td style="font-weight: bold; font-size: 6px;">Warna</td>
<td style="font-weight: bold; font-size: 6px;">Ukuran</td>
<td style="font-weight: bold; font-size: 6px;">Tanggal Order</td>
<td style="font-weight: bold; font-size: 6px;">Tanggal
68
Pengiiriman</td>
</tr>
</thead> <tbody>
<?php
echo get_order();
?>
</tbody> </table>
<hr>
<p class="cart-total right">
<?php $total
= get_total(); ?> <strong>Total Pembayaran :
Rp. </strong><?php echo number_format($total,0,',','.'); ?><br>
</p>
<hr/> <p class="buttons
center">
<button class="btn btn-inverse" type="submit"
id="checkout">Checkout</button>
</p>
</div>
</div> </section>
<?php include 'index/footer.php'; ?>
</section>
</div>
<script src="themes/js/common.js"></script>
<script> $(document).ready(function() {
$('#checkout').click(function (e) {
document.location.href = "checkout.php";
})
}); </script>
</body>
</html>
E. Code form konfirmasi pembayaran
<?php include 'library/all_function.php';
69
$dt_order = confirm_order($_GET["id_order"]);
?>
<table class="table table-border">
<thead>
<th>DATA PRODUCT</th> </thead>
<?php
foreach ($dt_order as $data) { $id_order = $data["id_order"];
$nm_product = $data["nm_product"];
$id_product = $data["id_product"]; $hrg_product = $data["hrg_product"];
$ttl_harga = $data["ttl_harga"];
$warna = $data["warna"];
$ukuran = $data["ukuran"];
$jmh_order = $data["jmh_order"];
$tgl_order = $data["tgl_order"];
$tgl_pengiriman = $data["tgl_pengiriman"];
$nm_foto = $data["foto"];
$img = "foto_products/".$nm_foto;
?>
<tbody> <tr>
<td><?php echo "<img src=".$img.">";
?></td> </tr>
<tr>
<td>ID Product</td>
<td><?php echo $id_order; ?></td> </tr>
<tr>
<td>Nama Product</td> <td><?php echo $nm_product; ?></td>
</tr>
<tr>
<td>Harga Product</td>
<td><?php echo "Rp.
".number_format($hrg_product,0,',','.');?></td> </tr>
<tr> <td>Jumlah Pesanan</td>
<td><?php echo $jmh_order; ?></td>
</tr>
70
<tr>
<td>Ukuran</td> <td><?php echo $ukuran; ?></td>
</tr>
<tr>
<td>Warna</td>
<td><?php echo $warna; ?></td> </tr>
<tr>
<td>Tanggal Pemesanan</td>
<td><?php echo $tgl_order; ?></td> </tr>
<tr>
<td>Tanggal Pengiriman</td> <td><?php echo $tgl_pengiriman; ?></td>
</tr>
<tr>
<td>Total Harga Pesanan</td> <td><?php echo "Rp.
".number_format($ttl_harga,0,',','.');?></td>
</tr> </tbody>
<?php
} ?>
</table>
<button class='btn-info btn btn-sm' id='btn-mod' data-toggle="modal" data-target="#myModal">Konfirmasi</button>
<div id="myModal" style="display: none;" class="modal fade"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"> <button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">FORM KONFIRMASI PEMBAYARAN</h4>
</div>
<div class="modal-body">
<!-- < Form Pembayaran --> <form name="upload" method="POST"
enctype="multipart/form-data">
<div class="form-group">
<label style="font-weight: bold">ID ORDER</label>
<input type="text" class="form-control"
71
name="id_order" placeholder="Masukan ID Transaksi Pembayaran"
value="<?php echo $id_order; ?>" style="width: 300px;" readonly>
</div> <br/>
<div class="form-group">
<label style="font-weight: bold">NAMA PEMILIK
REKENING</label>
<input type="nama" class="form-control" name="an_rek" placeholder="Masukan Nama Pemilik Rekening"
style="width: 300px;" required>
</div>
<br/> <div class="form-group">
<label style="font-weight: bold">NOMINAL TRANSFER</label>
<?php echo '<input type="nama" class="form-
control" name="nom_trf"
onchange="val_harga(\''.$ttl_harga.'\',this.value)" placeholder="Masukan Nama Pemilik Rekening" style="width:
300px;" required>';?><span id="vnote"></span>
</div> <br/>
<div class="form-group">
<label style="font-weight: bold">PILIH BANK
TUJUAN TRANSFER</label>
<select class="form-control"
name="bank_tjn"> <option value="BCA">BCA</option>
<option
value="MANDIRI">MANDIRI</option> </select>
</div>
<br/>
<div class="form-group">
<label style="font-weight: bold">FOTO BUKTI
PEMBAYARAN</label> <input type="FILE" class="form-control"
name="upload_foto" required>
</div> <br/>
<div class="form-group">
<button type="submit" class="btn btn-default btn-sm"
name="btn_upload" id='btn_upload' value="submit">Submit Pembayaran</button>
</div>
</form> <!-- < End -->
</div>
72
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
value="submit">Close</button> </div>
</div>
</div>
</div>
</div> <script>
$(document).ready(function(){
$("#btn-mod").click(function(){
$("#myModal").css("display","block"); })
});
</script>
F. Code form login admin
<?php
include 'admin_akses/admin_login.php'; $admin = new admin();
?>
<!DOCTYPE html> <html >
<head>
<meta charset="UTF-8">
<title> MM KOMPUTER</title> <script
src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></
script> <link
href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="js/admin.js"></script>
<style> /* NOTE: The styles were added inline because Prefixfree needs
access to your styles and they must be inlined if they are on local disk!
*/
body { font-family: "Open Sans", sans-serif;
height: 100vh;
background-size: cover; }
73
@keyframes spinner {
0% { transform: rotateZ(0deg);
}
100% { transform: rotateZ(359deg);
}
} * {
box-sizing: border-box;
}
.wrapper {
display: flex;
align-items: center; flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%; padding: 20px;
background: rgba(4, 40, 68, 0.85);
}
.true { border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%;
max-width: 320px; background: #ffffff;
position: relative;
padding-bottom: 80px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
display: none;
}
.login { border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%; max-width: 320px;
background: #ffffff;
position: relative; padding-bottom: 80px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.login input {
display: block;
padding: 15px 10px; margin-bottom: 10px;
width: 100%;
border: 1px solid #ddd;
74
transition: border-width 0.2s ease;
border-radius: 2px;
color: #ccc; }
.login input + i.fa {
color: #fff; font-size: 1em;
position: absolute;
margin-top: -47px; opacity: 0;
left: 0;
transition: all 0.1s ease-in;
} .login input:focus {
outline: none;
color: #444; border-color: #2196F3;
border-left-width: 35px;
}
.login input:focus + i.fa { opacity: 1;
left: 30px;
transition: all 0.25s ease-out; }
.login a {
font-size: 0.8em; color: #2196F3;
text-decoration: none;
}
.login button { width: 100%;
height: 100%;
padding: 10px 10px; background: #2196F3;
color: #fff;
display: block;
border: none; margin-top: 20px;
position: absolute;
left: 0; bottom: 0;
max-height: 60px;
border: 0px solid rgba(0, 0, 0, 0.1); border-radius: 0 0 2px 2px;
transform: rotateZ(0deg);
transition: all 0.1s ease-out;
border-bottom-width: 7px; }
footer { display: block;
padding-top: 50px;
text-align: center;
75
color: #ddd;
font-weight: normal;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); font-size: 0.8em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.m
in.js"></script>
</head>
<body>
<div class="wrapper"> <div class="true">
<span class="note"></span>
<span class="img"></span>
</div> <?php
if (isset($_POST["btn_submit"])) {
$admin->prosess_login( $_POST["username"],
$_POST["password"]
);
}
?> <form class="login" name="fm_login" method="POST"
id='fm_login'>
<p class="title">LOG IN ADMIN</p> <input type="text" placeholder="Username" name="username"
autofocus required/>
<i class="fa fa-user"></i>
<input type="password" placeholder="Password" name="password" required />
<i class="fa fa-key"></i>
<button name='btn_submit' value='submit'><span class="state">LOG IN</span></button>
</form>
</p> </div>
</body> </html>
76
G. Code form data order
<div class="text-center" style="margin: 0px 100px;">
<table class='table' style="width: 300px;"> <tbody>
<tr>
<td colspan='15' style="font-size: 15px;">DATA ORDER</td> </tr>
<tr>
<td>ID Order</td> <td>ID Product</td>
<td>ID MEMBER</td>
<td>Nama Product</td>
<td>Kategori Product</td> <td>Harga Product</td>
<td>Warna</td>
<td>Ukuran</td> <td>Jumlah Order</td>
<td>Status Upload</td>
<td>Tanggal Order</td>
<td>Total Harga</td> <td>Status Pembayaran</td>
<td>Verifikasi</td>
</tr> <?php
if (isset($_GET["id_product"])) {
$verify->ttl_harga = $_GET["ttl_harga"]; $verify->id_order = $_GET["id_order"];
$verify->id_member = $_GET["id_member"];
$verify->jmh_barang($_GET["id_product"]);
$verify->pembayaran($_GET["id_product"],$_GET["jmh_order"],$_GET["id_
order"],$_GET["id_member"]);
}
else{}
if (isset($_GET["halaman"])) { $dt_order = $select->select_order($_GET["halaman"]);
}
else{$dt_order = $select->select_order();}
while ($data = mysql_fetch_array($dt_order)){
$id_order = $data["id_order"];
$id_product = $data["id_product"]; $id_member = $data["id_member"];
$nm_product = $data["nm_product"];
$kategori = $data["kategori"];
$hrg_product = $data["hrg_product"]; $keterangan = $data["keterangan"];
$warna = $data["warna"];
$ukuran = $data["ukuran"];
77
$ttl_harga = $data["ttl_harga"];
$upload = $data["upload"];
$jmh_order = $data["jmh_order"]; $tgl_order = $data["tgl_order"];
$status_pembayaran = $data["status_pembayaran"];
?> <tr>
<td><?php echo $id_order; ?></td>
<td><?php echo $id_product; ?></td> <td><?php echo $id_member; ?></td>
<td><?php echo $nm_product; ?></td>
<td><?php echo $kategori; ?></td>
<td><?php echo number_format($hrg_product,0,',','.'); ?></td> <td><?php echo $warna; ?></td>
<td><?php echo $ukuran; ?></td>
<td><?php echo $jmh_order; ?></td> <td><?php echo $upload; ?></td>
<td><?php echo $tgl_order; ?></td>
<td><?php echo number_format($ttl_harga,0,',','.');?></td>
<td><?php echo $status_pembayaran; ?></td> <td><a
href="http://localhost/toko_kue/admin/index.php?page=order_product
&&halaman=1&&id_product=<?php echo $id_product ?>&&jmh_order=<?php echo $jmh_order ?>&&id_order=<?php echo
$id_order ?>&&id_member=<?php echo $id_member
?>&&ttl_harga=<?php echo $ttl_harga ?>&&id_order=<?php echo $id_order ?>" class=" btn btn-xs btn-danger" id="btn-verify" ><span
class="glyphicon glyphicon-pencil"></span></a></td>
</tr>
<?php }
echo "
</tbody> </table>
";
?>
<ul class='pagination'> <?php
$page = $paging->paging_order();
for ($halaman=1; $halaman<=$page; $halaman++) { ?>
<li><a href="?page=order_product&halaman=<?php echo $halaman;
?>"><?php echo $halaman ?></a></li> <?php
}
?>
</div>
78
H. Code form data member
<?php
include 'admin_akses/koneksi.php'; class get extends koneksi
{
function get_order($id_member){ $this->koneksi();
$query = mysql_query("SELECT * FROM dt_order
WHERE id_member = '$id_member'"); while ($arr = mysql_fetch_array($query)) {
$data[] = $arr;
}
return $data; }
function cek_order($id_member){ $this->koneksi();
$query = mysql_query("SELECT jmh_order FROM dt_order
WHERE id_member = '$id_member'");
$row = mysql_num_rows($query); return $row;
}
function get_total($id_member){
$this->koneksi();
$query = mysql_query("SELECT SUM(ttl_harga) FROM dt_order WHERE id_member = '$id_member'");
$arr = mysql_fetch_array($query);
foreach ($arr as $jmh){
$get = $jmh; }
return $get;
}
}
$get = new get(); $cek_row = $get->cek_order($_GET["id"]);
$total = $get->get_total($_GET["id"]);
$id_member = $_GET["id"];
?>
<a href='pdf_report_member.php?id_member=<?php echo
$id_member;?>' target="_blank" class="btn btn-sm btn-info" id="btn-ctk" >Cetak Laporan<span class='glyphicon glyphicon-print'
style="margin-left: 5px"></span></a>
<table class='table'>
<thead> <tr>
<th colspan='15'><h2 class='txt_head'>LAPORAN
PENJUALAN</h2></th>
79
</tr>
</thead>
<tbody> <tr>
<td style="background-color: #a0a0a0">ID Order</td>
<td style="background-color: #a0a0a0">ID Product</td> <td style="background-color: #a0a0a0">ID Member</td>
<td style="background-color: #a0a0a0">Nama Product</td>
<td style="background-color: #a0a0a0">Warna</td> <td style="background-color: #a0a0a0">Ukuran</td>
<td style="background-color: #a0a0a0">Jumlah Order</td>
<td style="background-color: #a0a0a0">Status Upload</td>
<td style="background-color: #a0a0a0">Tanggal Order</td> <td style="background-color: #a0a0a0">Status Pembayaran</td>
<td style="background-color: #a0a0a0">Total Harga</td>
</tr> <?php
if ($cek_row>0) {
$arrdata = $get->get_order($_GET["id"]);
foreach ($arrdata as $data) { $id_order = $data["id_order"];
$id_product = $data["id_product"];
$id_member = $data["id_member"]; $nm_product = $data["nm_product"];
$kategori = $data["kategori"];
$hrg_product = $data["hrg_product"]; $keterangan = $data["keterangan"];
$warna = $data["warna"];
$ukuran = $data["ukuran"];
$upload = $data["upload"]; $jmh_order = $data["jmh_order"];
$tgl_order = $data["tgl_order"];
$ttl_harga = $data["ttl_harga"]; $status_pembayaran = $data["status_pembayaran"];
?>
<tr>
<td><?php echo $id_order; ?></td> <td><?php echo $id_product; ?></td>
<td><?php echo $id_member; ?></td>
<td><?php echo $nm_product; ?></td> <td><?php echo $warna; ?></td>
<td><?php echo $ukuran; ?></td>
<td><?php echo $jmh_order; ?></td> <td><?php echo $upload; ?></td>
<td><?php echo $tgl_order; ?></td>
<td><?php echo $status_pembayaran; ?></td>
<td><?php echo "Rp. ".number_format($ttl_harga,0,',','.'); ?></td> </tr>
<?php
} }
else{
?>
80
<tr>
<td colspan="15"><h3>LAPORAN TIDAK TERSEDIA</h3></td>
</tr> <?php
}
?> </tbody>
</table>
<div> <?php echo "Jumlah Data : ".$cek_row; ?>
<br>
<?php echo "Total Pembyaran : Rp.
".number_format($total,0,',','.');?> </div>
4.4. Testing
Dalam uji coba program ini yang dilakukan yaitu uji coba blackbox yaitu :
A. Form Login Admin
Tabel IV.11
Hasil Pengujian Black Box Testing Form Login Admin
No Skenario
pengujian Test case
Hasil yang
diharapkan
Hasil
pengujian Kesimpulan
1
Mengosongkan
semua isian data
login. lalu klik
tombol login.
Username:(
Kosong)
Password:(
Kosong)
Sistem akan menolak
akses login dan menampilkan pesan
“please fill out this field”
Sesuai Valid
2
Hanya mengisi
data username.
mengosongkan
data password
laluklik tombol
login.
Username:
(admin)
Password:
(Kosong)
Sistem akan menolak
akses login dan
menampilkan pesan “please fill out this field.”
Sesuai Valid
81
3
Hanya mengisi
data password
dan
mengosongkan
data username,
lalu klik tombol
login
Username:
(Kosong)
Password:
admin
Sistem akan menolak
akses login dan menampilkan pesan
“please fill out this field.”
Sesuai Valid
4
Menginput
dengan kondisi
salah satu data
benar dan satu
lagi salah,
laluklik tombol
login
Username:
admin
(benar)
Password:
1234(salah)
Sistem akan menolak akses login dan
menampilkan pesan
“please fill out this field.”
Sesuai
Valid
5
Menginput
dengan kondisi
salah satu data
benar dan satu
lagi salah,
laluklik tombol
login
Username:1
1234(salah)
Password:
admin
(benar)
Sistem akan menolak
akses login dan
menampilkan pesan “please fill out this field.”
Sesuai
Valid
6
Menginputkan
data login yang
benar, lalu klik
tombol login
Username:
admin
(benar)
Password:
admin
(benar)
Sistem menerima
akses login dan
kemudian
menampilkan
halaman index
Sesuai Valid
82
4.5. Support
4.5.1. Publikasi Web
Untuk mempublikasi website yaitu hal pertama yang wajib dimiliki adalah
web hosting dan nama domain. Berikut adalah domain-nya
http://mmcomputer.000webhostapp.com
Cara uploadwebsite ke internet:
1. Pekerjaan uploadwebsite ke internet, penulis menggunakan program FTP
clientdan menggunakan fasilitas hosting www.000webhost.com
karenafilesumber printing yg akan di upload ribuan Kb. Setelah
mendaftarakan domain dan menggunakan subdomainhosting, penulis
memastikan domain sudah runningdan memastikan juga sudah menerima
email tentang username dan password akun cPanel dan FTP dari penyedia
webhosting.
2. Untuk lebih mempermudah dan memperlancar, penulis memilih salah satu
FTP client yang bagus yaitu FileZilla.
3. Penulis menginstal data website sumber printing di c:/xampp/htdocs/sumber
pada server lokal dan akan diupload semua file yang ada didalam direktori
sumber ke direktori/public_html yang ada di cPanel web hosting. Yang
diupload oleh penulis adalah semua file yang ada didalam folder sumber.
Proses upload memakan waktu yang cukup lama tergantung kecepatan
koneksi internet. Ukuran file yang diupload adalah sekitar 18,76MB.
4. Setelah proses upload website ke internet selesai, langkah selanjutnyaadalah
membuat database MySQL di cPanel menggunakan PHPMyAdmin
83
4.5.2. Spesifikasi Hardware dan Software
1. Spesifikasi hardware
Perangkat keras yang dimaksud disini adalah seperangkat alat atau elemen
elektronik yang dapat membantu sistem yang diusulkan sehingga program
yang diusulkan oleh penulis dapat bekerja dengan baik. Perangkat keras yang
dibutuhkan dibagi atas dua bagian, yaitu perangkat keras untuk iweb server
dan perangkat keras client.
Perangkat keras minimal yang diperlukan oleh web server adalah sebagai
berikut:
a. Sistem Operasi : Windows 7 atau sesudahnya
b. Processor : Pentium Quadcore 2M Cache, 2.0Ghz
c. Memory size (RAM) : 2 GB (DDRAM)
d. Monitor : SVGA colour 14”
e. Harddisk : 500 GB
f. Keyboard : 107 keys
g. Mouse : Standard mouse
h. Printer : Deskjet
2. Spesifikasi software
Keberadaan perangkat lunak selalu menyertai perangkat keras yang ada.
Perangkat lunak yang dibutuhkan dibagi atas dua bagian, yaitu perangkat
lunak untuk webserver dan perangkat lunak untuk client.
Perangkat lunak yang perlukan untuk webserver adalah sebagi berikut:
a. Operating system : Windows 7 atau sesudahnya
84
b. Bahasa pemrograman : PHP
c. Interpreter : Sublime
d. Database server : MySQL server versi 4.0.18
e. Web server : Xampp 1.5.4
f. Database tools : PhPMyadmin versi 2.7.0
Perangkat lunak minimal yang diperlukan untuk client adalah sebagai
berikut:
a. Operating system : Windows 7 atau sesudahnya
b. Browser : Google Chrome dan Mozilla Firefox
Selain komponen sistem perangkat keras dan perangkat lunak yang telah
disebutkan sebelumnya ada komponen tambahan yang dibutuhkan untuk
mendukung pembuatan sistem penjualanini yaitu berbasis web yang
menggunakan PHP dan MySQL. Perangkat lunak lain yang digunakan adalah
sebagai berikut:
1. Sublime berfungsi sebagai media untuk menuliskan scripts PHP. Contoh
text editor lainnya yaitu notepad, PHPCoder, PHP Editor, Macromedia
Dreamweaver dan lain sebagainya. Dalam penulisan skripsi ini,Browser,
berfungsi untuk melihat tampilan perintah-perintah PHP yang telah
dijalankan di web server. Contoh browser yaitu Internet Explorer,
netscape, navigator, opera, firefox, dan lain-lain. Dalam penulisan skripsi
ini penulis menggunakan browserGoogle Chrome
85
4.6. Spesifikasi Dokumen Sistem Usulan
1. Nama Dokumen : Laporan Penjualan
Fungsi : Sebagai laporan penjualan sparepart
Sumber : Admin
Tujuan : Pemilik Toko
Media : Tampilan
Frekuensi : Setiap Bulan
Format : Lampiran B-2