BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Bagian admin melihat data karyawan A8. Bagian admin dapat melihat data penjualan Halaman Pelanggan : B1. Pelanggan melakukan daftar member

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

email

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

email

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

email

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

email

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 File : dt_admin

Akronim : data admin


Akses File : Random


Kunci File : id_karyawan

Tabel IV. 2

Spesifikasi file tabel dt_admin


1 id_karyawan id karyawan Varchar 11 Primary

2 nm_karyawan nama karyawan 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 File : dt_banner

Akronim : data banner


Akses File : Random

Panjang Record :31Bytes

Kunci File : id_banner

Tabel IV. 3

Spesifikasi file tabel dt_banner


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 File : dt_karyawan

Akronim : data karyawan


Akses File : Random


Kunci File : id_karyawan

36

Tabel IV. 4

Spesifikasi file tabel dt_karyawan


1 id_karyawan id karyawan Varchar 11 Primary

2 nama nama karyawan 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 File : dt_order

Akronim : data order


Akses File : Random


Kunci File : no

Tabel IV. 5

Spesifikasi file tabel dt_order


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 File : dt_pengiriman

Akronim : data pengiriman


Akses File : Random


Kunci File : no

Tabel IV. 6

Spesifikasi file tabel dt_pengiriman


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 File : dt_product

Akronim : data product


Akses File : Random


Kunci File : id_product

Tabel IV. 7

Spesifikasi file tabel dt_product


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 File : dt_ukuran

Akronim : data ukuran


39

Akses File : Random


Kunci File : ukuran

Tabel IV. 8

Spesifikasi file tabel dt_ukuran


1 Ukuran Ukuran Varchar 10 Primary

i. Spesifikasi file dt_upload


Nama File : dt_upload

Akronim : data upoad


Akses File : Random


Kunci File : id_order

Tabel IV. 9

Spesifikasi file tabel dt_upload


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 File : dt_warna

Akronim : data warna


Akses File : Random


Kunci File : warna

Tabel IV. 10

Spesifikasi file tabel dt_warna


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=""> 

 <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"/>



<link href="themes/css/flexslider.css"

rel="stylesheet"/> <link href="themes/css/main.css" rel="stylesheet"/>

46



<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> 

</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>


<input type="password" placeholder="Enter your

password" id="password" class="input-xlarge" name='password'>

</div>

</div>


<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


<label class="control-label">Username</label>

48


<input type="text" placeholder="Enter your username" class="input-xlarge" name="username">

</div>

</div>


<label class="control-label">Email :</label>


<input type="text" placeholder="Enter your email" class="input-xlarge" name="email">

</div>

</div>

<div


<label class="control-label">Nomor Telfon:</label>


<input type="text" placeholder="Enter your password"

class="input-xlarge" name="telpon">

</div>

</div>

<div


<label class="control-label">Alamat:</label>


<textarea placeholder="Masukan Alamat Anda" class="input-xlarge" name="alamat" rows="5" cols="250">

</textarea>

</div>

</div>

<div


49

<label class="control-label">Kota:</label>


<input type="text" placeholder="Enter your password" class="input-xlarge" name="kota">

</div>

</div>

<div


<label class="control-label">Password:</label>


<input type="password" placeholder="Enter your

password" class="input-xlarge" name="password">

</div>

</div>

<div


<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>


width, initial-scale=1.0"> <meta name="description" content="">



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


responsive.min.css" rel="stylesheet">

<link href="themes/css/bootstrappage.css" rel="stylesheet"/>

 <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">



<script src="themes/js/jquery-1.7.2.min.js"></script> <script src="bootstrap/js/bootstrap.min.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>

 </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">


<section class="header_text sub"> </section>


<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


<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>


<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>


<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>


<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


<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>


<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>


<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>

$(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>


width, initial-scale=1.0"> <meta name="description" content="">


Compatible'/><![endif]--> 

<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"/>



rel="stylesheet"/> <link href="themes/css/new_main.css"

rel="stylesheet"/>

<link href="https://fonts.googleapis.com/css?family=Lobster"

rel="stylesheet">



<script src="themes/js/jquery-1.7.2.min.js"></script>



<script src="themes/js/jquery.scrolltotop.js"></script> 

<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 class="span4">

<a href="index.html" class="logo pull-left"><img src="head.png" class="site_logo"

alt=""></a>


<div class="px">

<?php include

'index/nav_user.php'; ?> </div>

</section>

</div>

</div> </div>

</div>

<div id="wrapper" class="container">


<section class="header_text sub"> </section>


<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 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


$("#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">



 <link href="bootstrap/css/bootstrap.min.css"

rel="stylesheet">


responsive.min.css" rel="stylesheet"> <link href="themes/css/bootstrappage.css"

rel="stylesheet"/>


66


rel="stylesheet"/>

<link href="themes/css/new_main.css" rel="stylesheet"/>

<link

href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

 <script src="themes/js/jquery-1.7.2.min.js"></script>


<script src="themes/js/superfish.js"></script> <script src="themes/js/jquery.scrolltotop.js"></script>

 </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 class="span4">

<a href="index.html"

class="logo pull-left"><img src="head.png" class="site_logo" alt=""></a>


<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>


<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> $(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">



<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 name="upload" method="POST"

enctype="multipart/form-data">


<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/>


<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/>


<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/>


<label style="font-weight: bold">FOTO BUKTI

PEMBAYARAN</label> <input type="FILE" class="form-control"

name="upload_foto" required>

</div> <br/>


<button type="submit" class="btn btn-default btn-sm"

name="btn_upload" id='btn_upload' value="submit">Submit Pembayaran</button>

</div>

</form> 

</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>


$("#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"];



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"];



$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

http://mmcomputer.000webhostapp.com/

http://www.000webhost.com/

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

Documents

BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Bagian admin melihat data karyawan A8. Bagian admin dapat melihat data penjualan Halaman Pelanggan : B1. Pelanggan melakukan daftar member