BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN file36 Deskripsi Use Case Diagram Halaman Pengunjung...

34

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisa Kebutuhan Software

4.1.1. Tahap Analisis

Analisa kebutuhan merupakan langkah awal yang dilakukan agar didapat

gambaran dari sebuah sistem yang akan dibuat. Dengan adanya analisa sistem

yang berjalan pada sebuah order air minum nantinya akan didapat sebuah sistem

yang sesuai dengan keadaan sistem yang berjalan saat ini sehingga user tidak

kesulitan dalam penggunaan aplikasi web ini nantinya. Sistem order air minum

yang berbasis web ini dibuat untuk membantu proses sistem order air minum ini

lebih mudah, cepat dan dapat diakses dimana saja dan kapan saja. Berikut rincian

pembagian halaman berdasarkan level pengguna:

Halaman Pengunjung :

A1. Pengunjung dapat melihat Halaman beranda

A2. Pengunjung dapat melihat Halaman profil

A3. Pengunjung dapat melihat Halaman List Harga

A4. Pengunjung dapat melihat halaman keranjang belanja

A5. Pengunjung dapat melihat halaman cara registrasi

A6. Pengunjung dapat melihat halaman hubungi kami

Halaman Member :

B1. Member dapat melakukan order.

B2. Member dapat melakukan cetak invoice

B3. Member dapat melihat detail harga dan keterangan produk.

35

B5.Member dapat mencetak bukti transaksi order order air minum

Halaman Admin:

C1. Admin dapat mengelola data produk.

C2. Admin dapat menghapus data member.

C3. Admin dapat melihat data pemesanan.

C4. Admin dapat cek data pembayaran.

C5. Admin dapat memberikan progres kepada customer.

1. Use Case Diagram.

Berikut adalah rancangan use case diagram pada sistem order air minum.

Penggambaran Use Case Diagram Model Pertama :

Penggambaran dengan melihat secara keseluruhan fungsi-fungsi yang ada

pada sistem.

b. Use Case Diagram Halaman Pengunjung

Gambar IV.1.

Use Case Diagram Halaman Pengunjung

Sumber : Analisis Penelitian Sunar Bawono 2018

36

Deskripsi Use Case Diagram Halaman Pengunjung

Tabel IV.1

Deskripsi Use Case Diagram Halaman Pengunjung

Use Case Name Pengunjung

Requirements A1-A5

Goal Pengunjung dapat melihat beranda, kategori,

company profile dan harga produk, cara pemesanan.

Pre-Conditions Pengunjung masuk ke website

Post-Conditions Pengunjung melakukan pendaftaran member

Failed end condition Gagal mendaftar sebagai member

Primary Actors Pengunjung

Main Flow / Basic patch 1. Pengunjung dapat melakukan order

2. Pengunjung dapat melihat progres

3. Pengunjung dapat melihat cara pemesanan

Invariant A -


37

Use Case Diagaram Halaman Customer

Gambar IV.2.

Use Case Diagram Halaman Member


38

Deskripsi Use Case Diagram Halaman Member

Tabel IV.2

Deskripsi Use Case Diagram Customer

Use Case Name Member

Requirements A1-A5

Goal Member dapat mendaftar sebagai custumer

memilih melakukan pemesanan, mencetak invoice

Pre-Conditions Customer telah login

Post-Conditions Customer melakukan order dan melakukan

transaksi

Failed end condition Customer membatalkan transaksi. Kemungkinan

customer belum membayar order.

Primary Actors Customer

Main Flow / Basic patch 1. customer dapat mendaftar sebagai member

2. customer dapat melihat produk dan detail

harga

3. Member dapat memilih order

4. Member dapat mencetak invoice

Invariant A B6. Member dapat mencetak invoice

pembayaran.


39

c. Use Case Diagram Halaman Admin

Gambar IV.3.

Use Case Diagram Halaman Admin


Deskripsi Use Case Diagram Halaman Admin

Tabel IV.3.

Deskripsi Use Case Diagram Halaman Admin

Use Case Name Mengelola Data Barang

Requirements B1-B6

Goal Admin dapat mengelola data produk,

menghapus member, melihat data pemesanan,

data pembayaran

Pre-condition Admin telah login

Post-condition Data customer tersimpan

Failed end condition Gagal menyimpan, mengupdate atau

menghapus

40

Primary Actors Admin

Main Flow / Basic Path 1. Admin login

2. Admin menghapus data customer

3. Admin melihat data pemesanan

4. Admin melihat data pembayaran

5. Admin mencetak laporan


2. Activity Diagram

Berikut merupakan gambaran dari berbagai alur aktivitas dalam sistem yang

sedang dirancang. Berikut ini gambaran activity diagram penjualan peralatan

home autometion.

A. Activity Diagram Halaman Pengunjung

Gambar IV.4.

41

Activity Diagram Halaman Pengunjung


B. Activity Diagram Halaman Member – Order

Gambar IV.5.

Activity Diagram Halaman Member – Pemesanan Barang


C. Activity Diagram Halaman Admin

42

Gambar IV.6.

Activity Diagram Halaman Admin


4.2. Desain

4.2.1. Database

Di dalam database terdapat beberapa tabel yang saling berelasi

(berhubungan) maka dari itu penulis mencoba menggambarkanya menggunakan

Entity relationalship Diagram (ERD).

43

erd Entity Relationship Diagram

Produk

Id

Id_kategori

nm_barang

merk

tipe

gambar

stock

harga

spesifikasi

Kategori

Id_kategori nama_kategori

M 1

Order_temp

id_order_temp

Id

Id_session Jumlah

tgl_order_temp

jam_order_temp

Order

Id_order

kd_member

nama_penerima

alamat_kirim

kdpos_kirim

tlp_penerima

status_order

tgl_order

jam_order

Id_kota

email1

1 M

Order_detail

Id_orders

Id

jumlah

M

1

Konfirmasi_bayar1

Id_konfirmasi

st_konfirmasi

atas_nama

tgl_transfer total

Id_orders

Id_bank

email

1

Member

M 1

kd_member

nama_member

alamat_member

email_member

telp_member

kd_pos_member

password

Kota

1

Id_kota

nm_kota

ongkos_kirim

Bank

1

Id_bank

nm_bank

no_rek

pemilik

gambar_bank

1

1

Mempunyai

Memiliki

Mempunyai

Mempunyai

Mempunyai

Melakukan

Memiliki

Memiliki

1. Entity Relationship Diagram

Gambar IV.7.

Entity Relationship Diagram


44

2. Logical Record Structure

Gambar IV.8.

Logical Record Structure


3. Spesifikasi File

Spesifikasi file menjelaskan tentang file-file yang akan digunakan dalam

rancangan aplikasi program yang diajukan dan sebagai media penyimpanan

data dari proses yang terjadi pada rancangan aplikasi program.

a. Spesifikasi File User

45

Nama Database : metito

Nama file : user

Akronim : user

Fungsi : mengelola data keseluruhan

Tipe File : file master

Media : Harddisk

Panjang Record : 81 byte

Kunci Field : iduser

Tabel IV.4

Spesifikasi File Tabel Admin

No Elemen data Nama Field Tipe Size Keterangan

1 Iduser Iduser Varchar 6 Primary Key

2 Pass Password Varchar 15

3 Leveluser Leveluser Varchar 30

4 Nama_lengkap Nama Varchar 30


b. Spesifikasi file transaksi


Nama file : transaksi

Akronim : transaksi

Fungsi : Untuk input transaksi

46

Tipe File : file transaksi

Media : Harddisk


Kunci Field : transaksi

Tabel IV.5

Spesifikasi File Tabel Transaksi


1 jenis Jenis Varchar 50 Primary Key

2 tarif Tarif varchar 50

3 jumlah Jml Varchar 50

4 Lokasi Lokasi varchar 50

5 Keterangan Ket varchar 50

6

Tanggal

transaksi

Tgl_tran Date

7 Status Status char 5

8

Nama

customer

Id_cust char 20


c. Spesifikasi File barang

47


Nama file : barang

Akronim : barang

Fungsi : Untuk jenis pengisian

Tipe File : file Master

Media : Harddisk


Kunci Field : barang

Tabel IV.6

Spesifikasi File Tabel barang


1 Jenis_jasa Jenis_jasa Varchar 200 Primary Key

2 Tarif Tarif Varchar 15

3 Satuan Satuan Varchar 15

4 Keterangan Keterangan Varchar 200

5 Tipe Tipe Varchar 200


d. Spesifikasi File orders_temp


Nama file : detail_jasa

48

Akronim : detail jasa

Fungsi : Untuk menyimpan data pembelian sementara

Tipe File : file detail jasa

Media : Harddisk


Kunci Field : detail_jasa

49

Tabel IV.7

Spesifikasi File orders_temp


1 nama Nama Varchar 50 Primary Key

2 Id_jasa Id_jasa Varchar 20

3 cash Cash Varchar 20

4 Transaksi_id Transaksi_id Int 20

5 Jasa_id Jasa_id int 20

6 Barang_id Barang_id int 20

7 Customer_id Customer_id int 20


e. Spesifikasi File customer


Nama file : customer

Akronim : customer

Fungsi : Untuk menyimpan data customer

Tipe File : file master

Media : Harddisk


Kunci Field : customer

50

Tabel IV.8

Spesifikasi File Tabel member


1 Nama_perusahaan Nama_perusahaan Varchar 50 Primary Key

2 Email Email Varchar 50

3 No_telp No_telp Varchar 20

4 Password Password Int 20

5 No_npwp No_npwp Varchar 20

6 Alamat_npwp Alamat_npwp Varchar 50

7 Foto Foto Varvhar 50

8 Level_user Level_user Varchar 10


4.2.2. Software Architecture

Didalam merancang sebuah sistem penjualan secara online pada Peralatan

Home Automation, Bahasa program yang digunakan penulis adalah PHP secara

terstruktur atau prosedural. Maka Software Architecture yang digunakan untuk

menggambarkan program adalah sebagai berikut :

51

cmp Component Diagram

User aplication

Aplication Database

Jquery.js

Style.css

Apache 2 serv er

MySql Database

Admin Aplication

1. Component Diagram

Component diagaram menggambarkan struktur dan hubungan antar

komponen piranti lunak, termsuk ketergantungan diantaranya yang ada di dalam

sistem informasi penjualan Peralatan Home Automation. Component Diagram

juga dapat berupa interface yang berupa kumpulan layanan yang disediakan oleh

komponen untuk komponen lainnya

Gambar IV.9

Component Diagram Sistem Penjualan Online


52

2. Deployment Diagram

Menggambarkan tata letak sistem secara fisik, yang menampakan bagian-

bagian software yang berjalan pada hardware yang digunakan untuk

mengimplementasi sebuah sistem dan keterhubungan antar hardware-hardware

tersebut.

deployment depelopmnet

web serv er

user sistem

jQuery.js style.css

xampp database serv er

aplikasi database

MySql Database

client PC

web browser

port: 80

port : 3306

Gambar IV.10

Deployment Diagram Sistem Penjualan Online


53

4.2.3. User Interface

Merupakan gambaran sistem yang sudah berjalan. Berikut detail tampilan-

tampilan tiap halaman website sistem order air minum.

1. Tampilan Halaman Beranda Website Pengunjung

Gambar IV. 11

Tampilan Halaman Beranda Pengunjung


54

Tampilan Halaman Registrasi

Gambar IV. 12

Tampilan Halaman registrasi

2. Tampilan Halaman Beranda Member

55

Gambar IV. 13

Tampilan Menu Halaman Beranda Member

3. Tampilan Halaman Input Transaksi

Gambar IV. 14

Tampilan Halaman Input Transaksi

4. Tampilan Halaman Data Transaksi

56

Gambar IV. 15

Tampilan Halaman Data Transaksi

5. Tampilan Halaman Login Admin

Gambar IV. 16

57

Tampilan Halaman Login Admin


6. Tampilan Halaman Beranda Admin

Gambar IV. 17

Tampilan Halaman Tambah Produk

7. Tampilan Halaman Daftar Order Dan Bukti Bayar

58

Gambar IV. 18

Tampilan Halaman Daftar Order dan Bukti Bayar

4.3. Code Generation

Berikut merupakan code generation dari Sistem Informasi penjualan

Home Automation dengan pemograman terstruktur:

A. Form Daftar Customer

<?php

$aksi="modul/daftar/aksi_daftar.php";

function total($var){

if($var>=0 and $var<=20 ){

59

echo "Aktif";

}

else if($var>=20){

echo "Tidak Aktif";

}

else {

echo "N/A";

}

}

$_SESSION[idcuss];

switch($_GET[act]){

default:

echo "<h2 class='head'>DATA TRANSACTION</h2>

<div>

<button class='submit' type='submit' value='Tambah Data'

onclick=\"window.location.href='?module=daftar&act=rp';\">Order</button>

60

</div>

<div class='logout tabelform tabpad contact_form'>

<form action='modul/daftar/aksi_daftar.php' method='post'

enctype='multipart/form-data' >

</tr>

<tr>



</tr>

<tr>



</tr>

</div>

<table class='tabel'>

<thead>

<tr>

61

<td>Trans No</td>

<td>Tanggal Trans</td>

<td>Jenis Jasa</td>

<td>Total</td>

<td>Status Pembayaran</td>

<td>Control</td>

</tr>

</thead>";

$p = new Paging;

$batas = 10;

$posisi = $p->cariPosisi($batas);

$sqlqa= "select (transaksi.id) as

idtran,transaksi.tgl_tran,barang.jenis_jasa,transaksi.jml,transaksi.tarif,detail_jasa.c

ash,transaksi.status,transaksi.foto_buy from transaksi

inner join barang on transaksi.jenis = barang.id

INNER JOIN detail_jasa ON transaksi.ket = detail_jasa.id

62

inner join customer on transaksi.id_cus = customer.id

where transaksi.id_cus = '$_SESSION[idcuss]'

order by transaksi.id ASC LIMIT $posisi,$batas";

$tampil = mysqli_query($con, $sqlqa);

$no= $posisi+1;

while($dt=mysqli_fetch_array($tampil)){

$total = $dt[jml] * $dt[tarif] + $dt[cash];

$totalnyo = number_format($total);

if($dt[status] == 1 ){

$statusnya = "<font color='grenn'>Progress</font>";

}elseif($dt[status] == 2){

$statusnya= "<font color='blue'>Lunas</font>";

}else{

$statusnya= "<font color='red'>Reject</font>";

}

$_SESSION[idtran]= $dt[idtran];

63

echo "<tr>

<td>$dt[idtran]</td>

<td>$dt[tgl_tran]</td>

<td>$dt[jenis_jasa]</td>

<td>$totalnyo</td> "; ?>

<td><a class="btn btn-danger" href="#" onclick="javascript:void

window.open('modul/daftar/index.php?usrid=<?php echo $dt['idtran'];?>',

'1416630377313','width=500,height=170,toolbar=0,menubar=0,location=0,status=

1,scrollbars=1,resizable=1,left=0,top=10');return false;">

<i class="icon-android-delete"></i>Cetak

Invoice</a> &emsp; <?php echo $statusnya ?>

</td>

<td><input type="file" name="image" onchange="return validasiFile()">

<input name="ft" value="<?php echo $dt[idtran] ?>" hidden>

<button type="submit" value="cari"> Upload </button>

<?php

64

if($dt[foto_buy] != NULL || $dt[foto_buy] !=''){ ?>

<img width="50px" height="50px" src="modul/daftar/<?php echo

$dt['foto_buy']; ?> ">

<?php }else{

echo"



</td>

</tr>";

$no++;

}}

echo "</table>";

$jmldata = mysql_num_rows(mysql_query("SELECT * FROM

evaluasi"));

$jmlhalaman = $p->jumlahHalaman($jmldata, $batas);

$linkHalaman = $p->navHalaman($_GET[halaman], $jmlhalaman);

65

echo "<div class=\"pagination\"> $linkHalaman</div>";

break;

case "detail":

$ambil=mysql_query("select * from jadwal where

id_jadwal='$_GET[id]'");

$t=mysql_fetch_array($ambil);

echo "<div class='rp' >

<h2 class='head'>Detail Data Jadwal</h2>

<table class='tabelform tabpad'>

<tr>

<td>Nama Pelatihan</td><td>:</td><td>$t[nama_pelatihan]</td>

66

</tr>

<tr>

<td>Nama Trainer</td><td>:</td><td>";

$bag=mysql_query("select * from trainer where

id_trainer='$t[id_trainer]'");

$b=mysql_fetch_array($bag);

echo "$b[nama_trainer]";

echo "</td>

</tr

<tr>

<td>Tanggal Pelaksanaan</td><td>:</td><td>";

echo "".tgl_indo($t['tgl_pelatihan'])."";

echo "</td>

</tr>

67

<tr>

<td>Kuota Peserta</td><td>:</td><td>$t[kuota_peserta]</td>

</tr>

<tr>

<td>Penyelenggara</td><td>:</td><td>$t[penyelenggara]</td>

</tr>

<tr>

<td>Tempat</td><td>:</td><td>$t[tempat_pelatihan]</td>

</tr>

<tr>

<td colspan='3'>[ <a

href='?module=daftar&act=rp&id=$_GET[id]'>Daftar Pelatihan </a>]

[<a href='?module=daftar'> Kembali </a>]</td>

</tr>

</table>

</div>

68

<div style='clear:both'></div>

<tr>

<td>";

{

echo "<h2 class='head3'>*Perhatian, Jika Telah Melakukan

Pendaftaran, Harap Menunggu Konfirmasi Lebih Lanjut Dari Departement HRD

dan Tidak Perlu Mendaftar Lebih Dari 1 (satu) kali !</h2>";

}

echo "

</td>

</tr>

";

break;

case "rp":

echo "<h2 class='head'>Input Transaction</h2>

<form action='$aksi?module=daftar&act=rp' method='post'

69


<table class='tabelform tabpad contact_form'>

<tr>

<td></td><td></td><td><input name='id_jadwal' type='hidden'

value='$_GET[id]' readonly></td>

</tr>

<tr>

<td>Transaksi</td><td>:</td><td>

</option>";

$sql = "select * from barang ";

$tr= mysqli_query($con , $sql);

$jsArray = "var nmpes = new Array();\n";

echo '<select name="id"

onchange="document.getElementById(\'nm_pes\').value = nmpes[this.value]">';

echo '<option>--Jenis Jasa--</option>';

70

while($t=mysqli_fetch_array($tr)){

echo "<option value='$t[id]'>$t[jenis_jasa]</option>";

$jsArray .= "nmpes['" . $t['id'] . "'] = '" . addslashes($t['tarif']) . "';\n";

}

echo "</select></td>

</tr>

<tr>

<td>Tarif</td><td>:</td><td><input class='input' name='tarif' type='text'

id='nm_pes' readonly placeholder='Tarif' required><span

class='form_hint'>Penginputan Otomatis 'Data Tidak Dapat Di

Ubah'</span></td>

";?>

<td><input class="input" name="icos" type="text" id="icos"

value="<?php echo $_SESSION[idcuss]; ?>" hidden ><span

class='form_hint'>Penginputan Otomatis 'Data Tidak Dapat Di

Ubah'</span></td>

<?php

echo"</tr>

71

<tr>

<td>Jumlah Tones</td><td>:</td><td><input class='input' name='ton'

type='text' id='ton' placeholder='Jumlah Tonasi' required><span

class='form_hint'>'Satuan Angka'</span></td>

</tr>

<tr><td>Lokasi Sandar</td><td> :</td><td> <select name='jasa'

id='jasa'><option>--Pilih Lokasi--</option>";

$sqls= "SELECT * FROM jasa";

$jur=mysqli_query($con, $sqls);

while ($d=mysqli_fetch_array($jur)){

echo "<option value='$d[id]'> $d[nama]</option>";

}

echo"</select></td>

<tr><td>Ket.Lokasi</td><td> : </td><td> <select name='jurusan'

id='jurusan'>

<option>--Pilih Lokasi--</option>";

72

echo"</select></td></tr>

<tr>



<tr>

<td></td><td></td><td><button class='submit' type='submit'

\" onClick=\"alert('Anda Telah Melakukan Order, Harap Menunggu

Konfirmasi')\">Simpan</button>

<button class='button' type='reset'>Batal</button>

</td>

</tr>

</table>

</form>

";

73

break;

case "cari":

$fileinfo=PATHINFO($_FILES["image"]["name"]);

$newFilename=$fileinfo['filename'] ."_". time() . "." .

$fileinfo['extension'];

move_uploaded_file($_FILES["image"]["tmp_name"],"upload/" .

$newFilename);

$location="upload/" . $newFilename;

$isifoto = "Update transaksi

SET foto_buy = '$location'

where id = '$_GET[id]'";

mysqli_query($con,$isifoto);

echo "</table>";

$jmldata = mysql_num_rows(mysql_query("SELECT * FROM

evaluasi"));



74


break;

}

?>

<script type="text/javascript">

<?php echo $jsArray; ?>

</script>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script>

$("#jasa").change(function(){

var id = $("#jasa").val();

$.ajax({

type: "POST",

dataType: "html",

url: "modul/daftar/jurusan.php",

data: "fakul="+id,

75

success: function(msg){

if(msg == ''){

alert('Tidak ada data Lokasi');

}

else{

$("#jurusan").html(msg);

}

}

});

});

</script>

<script language="javascript">

function validasiFile(){

var inputFile = document.getElementById('fileupload');

var pathFile = inputFile.value;

var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

76

if(!ekstensiOk.exec(pathFile)){

alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');

inputFile.value = '';

return false;

}else{

//Pratinjau gambar

if (inputFile.files && inputFile.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {

document.getElementById('pratinjauGambar').innerHTML = '<img

width="50px" height="50px" src="'+e.target.result+'"/>';

};

reader.readAsDataURL(inputFile.files[0]);

}

}

}

77

</script>

B. Form order

<?php

session_start();

error_reporting(0);

include "timeout.php";

?>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SISTEM INFORMASI</title>

<script type="text/javascript" src="jq/js/jquery144.min.js"></script>


$(function() {

$("#cmbjad").change(getAjaxJur);

78

function getAjaxJur(){

$("img#imgLoad").show();

var iddp = $("#cmbjad").val();

$.ajax({

type: "POST",

dataType: "html",

url : "modul/getdaftar.php",

data: "iddp="+iddp,


if(msg == ''){

$("select#cmbkar").html('<option value="">-

-Data Tidak Ditemukan--</option>');

}else{

$("select#cmbkar").html(msg);

}

79

$("img#imgLoad").hide();

}

});

}

});

</script>

<link rel="stylesheet" href="css/style.css" type="text/css" />

<link rel="shortcut icon" href="images/favico.png">

</head>

<body>

<div id="container">

<div id="header">

<span class="judul"></span><br />

<span class="judul2"></span></br>

80

</div>

<span class="judul2"></span></br>

<div id="menu">

<ul class="nav">

<? if ($_SESSION['leveluser']=='3'){ ?>

<li><a class="border link linkback"

href="?module=home">Home</a></li>

<ul class="menu">


href="?module=daftar">Transaction</a></li>



</ul>

<li><a class="border link linkback" style="color:#ffcf43"

href="logout.php">Logout</a></li>

<?php

81

if ($_SESSION['leveluser']=='1'){

?>



<ul class="menu">

<li><a class="border link linkback" href="#">Data Master</a>

<ul>

<li><a href="?module=karyawan">Data User</a></li>

<li><a href="?module=trainer">Data Barang</a></li>

</ul>

<!-- <li><a class="border link linkback" href="?module=jadwal">Jadwal

Pelatihan</a></li>


href="?module=evaluasi">Evaluasi</a></li>


href="?module=riwayat">Daftar Riwayat Pelatihan</a></li>

<li><a class="border link linkback" href="#">Laporan</a>

82

<ul>

<li><a href="laporan_jadwal.php" target="_blank">Laporan

Jadwal Pelatihan</a></li>

<li><a href="laporan_evaluasi.php" target="_blank">Laporan

Evaluasi Pelatihan</a></li>

<li><a href="laporan_riwayat.php " target="_blank">Laporan

Riwayat Pelatihan</a></li>

</ul>-->


href="logout.php">Logout</a>

</li>

<?php }

if($_SESSION['leveluser']=='2'){

?>



83

<ul class="menu">


href="?module=riwayat_hrdmanager">Daftar Riwayat Pelatihan</a></li>

<li><a class="border link linkback" href="#">Laporan</a>

<ul>

<li><a href="laporan_riwayat.php " target="_blank">Laporan

Riwayat Pelatihan</a></li>

</ul>


href="logout.php">Logout</a>

</li>

<?php } ?>

<li class="clear"></li>

</ul>

</div>

84

<div id="content">

<div class="form">

<?php include "data.php"; ?>

</div>

<div id="footer" style="color:#d1d6dc"></div>

<div id="menu">

<ul class="nav">

<li><a class="border link linkback" href="#">Welcome <strong><?php

echo $_SESSION['namauser']; ?></strong></a>

</div>

</div>

</body>

</html>

</html>

C. Form Data Transaksi

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

85

<html>

<head>

<title>Title here!</title>

<link href="js/themes/base/ui.all.css" rel="stylesheet" type="text/css"></link>

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>

<script src="js/ui.core.js" type="text/javascript"></script>

<script src="js/ui.datepicker.js" type="text/javascript"></script>


$(document).ready(function(){

$("#tanggal").datepicker({

dateFormat : "yy-mm-dd",

changeMonth : true,

changeYear : true

});

});

</script>

<script language="JavaScript" src="gen_validatorv4.js"

type="text/javascript"></script>

<style>

.trans{

background-color: #00CC33 ;

padding:7px;

border: #00AA00;

border-width:2px;

86

border-style:solid;

text-shadow:#333;

color: #EEEEEE;

text-shadow:0 2px 1px #333;

cursor:pointer;

}

.trans:hover{

background-color: #33FF33;

color: #FFFFFF;

text-shadow:0 2px 1px #333;

cursor:pointer;

}

.center_title_bar{

width:520px;

height:33px;

float:left;

padding:0 0 0 40px;

margin:0 0 0 12px;

_margin:0 0 0 6px;

line-height:33px;

font-size:12px;

color:red;

font-weight:bold;

background:url(images/bar_bg.gif) no-repeat;

87

background-color: #F7F7F7;

-moz-border-radius:4px;

border-radius:4px;

-khtml-border-radius: 4px;

-webkit-border-radius: 4px;

}

</style>

</head>

<body>

<?php

include "koneksi.php";

?>

<div class='center_title_bar'>Konfirmasi Pembayaran</div>

<form action="mediam.php?page=valid-konfirmasi" enctype="multipart/form-

data" method="post" id="frm-mh" onsubmit="return cekdata()">

<table border="0">

<div style="clear:left;"></div>

<hr />

<tr>

<td width="110" height="42"><font face="verdana" size="2">No

Order</font></td>

<td width="10"> : </td>

<td width="482"><input name="no_order" type="text" size="10"

maxlength="9" /></td></tr>

88

<tr>

<td height="46"><font face="verdana" size="2">Transfer ke Bank

</font></td>

<td>: </td><td><select name="bank">

<?php

include "koneksi.php";

$tampilbank=mysql_query("select*from bank");

while($l=mysql_fetch_array($tampilbank)){

echo"<option value='$l[id_bank]'>$l[nm_bank]</option>";}

?>

</select>

<?php echo $error['b'];?></td></tr>

<tr>

<td height="44"><font face="verdana" size="2">Atas Nama </font></td>

<td> : </td><td><input name="nama" type="text" size="25"

maxlength="25" /> </td></tr>

<tr>

<td height="44"><font face="verdana" size="2">Email </font></td>

<td> : </td><td><input name="email" type="text" size="25"

maxlength="25" value="<?php echo $_SESSION[email];?>"/> </td></tr>

<tr>

<td height="44"><font face="verdana" size="2">Total

Transfer</font></td>

<td> : </td><td><input type="text" name="total" size="20"

89

maxlength="20" ></td></tr>

<tr>

<td height="44"><font face="verdana" size="2">Tanggal

Transfer</font></td>

<td> : </td><td><input type="text" name="tgl" size="25"

maxlength="25" id="tanggal" /></td></tr>

<tr>

<td></td><td></td><td><?php echo"<img src='captcha.php'

/>";?></td></tr>

<tr><td height="43"></td>

<td></td><td>

<input name="kodex" type="text" size="8" maxlength="6" />

</td></tr>

<tr>

<td colspan="3"><input name="kirim" type="submit"

value="Kirim Konfirmasi Anda" class="trans" /></td>

</tr>

</table>

<div id='a_errorloc' style='color:red'></div>

<br>

</form>

<br>

<?php

include "contact.php";?>

90

</body>

</html><?php

$aksi="modul/daftar/aksi_daftar.php";

function total($var){

if($var>=0 and $var<=20 ){

echo "Aktif";

}

else if($var>=20){

echo "Tidak Aktif";

}

else {

echo "N/A";

}

91

}

$_SESSION[idcuss];

switch($_GET[act]){

default:

echo "<h2 class='head'>DATA TRANSACTION</h2>

<div>

<button class='submit' type='submit' value='Tambah Data'

onclick=\"window.location.href='?module=daftar&act=rp';\">Order</button>

</div>

<div class='logout tabelform tabpad contact_form'>

<form action='modul/daftar/aksi_daftar.php' method='post'


</tr>

<tr>

92



</tr>

<tr>

<!--<td><button class='submit' type='submit' value='cari'>Cari</button></td>--

>

</tr>

</div>

<table class='tabel'>

<thead>

<tr>

<td>Trans No</td>

<td>Tanggal Trans</td>

<td>Jenis Jasa</td>

<td>Total</td>

<td>Status Pembayaran</td>

<td>Control</td>

93

</tr>

</thead>";

$p = new Paging;

$batas = 10;

$posisi = $p->cariPosisi($batas);

$sqlqa= "select (transaksi.id) as

idtran,transaksi.tgl_tran,barang.jenis_jasa,transaksi.jml,transaksi.tarif,detail_jasa.c

ash,transaksi.status,transaksi.foto_buy from transaksi

inner join barang on transaksi.jenis = barang.id

INNER JOIN detail_jasa ON transaksi.ket = detail_jasa.id

inner join customer on transaksi.id_cus = customer.id

where transaksi.id_cus = '$_SESSION[idcuss]'

order by transaksi.id ASC LIMIT $posisi,$batas";

$tampil = mysqli_query($con, $sqlqa);

$no= $posisi+1;

while($dt=mysqli_fetch_array($tampil)){

94

$total = $dt[jml] * $dt[tarif] + $dt[cash];

$totalnyo = number_format($total);

if($dt[status] == 1 ){

$statusnya = "<font color='grenn'>Progress</font>";

}elseif($dt[status] == 2){

$statusnya= "<font color='blue'>Lunas</font>";

}else{

$statusnya= "<font color='red'>Reject</font>";

}

$_SESSION[idtran]= $dt[idtran];

echo "<tr>

<td>$dt[idtran]</td>

<td>$dt[tgl_tran]</td>

<td>$dt[jenis_jasa]</td>

<td>$totalnyo</td> "; ?>

95

<td><a class="btn btn-danger" href="#" onclick="javascript:void

window.open('modul/daftar/index.php?usrid=<?php echo $dt['idtran'];?>',

'1416630377313','width=500,height=170,toolbar=0,menubar=0,location=0,status=

1,scrollbars=1,resizable=1,left=0,top=10');return false;">

<i class="icon-android-delete"></i>Cetak

Invoice</a> &emsp; <?php echo $statusnya ?>

</td>

<td><input id="fileupload" type="file" name="image" onchange="return

validasiFile()">

<input name="ft" value="<?php echo $dt[idtran] ?>" hidden>

<button type="submit" value="cari"> Upload </button>

<?php

if($dt[foto_buy] != NULL || $dt[foto_buy] !=''){ ?>

<img width="50px" height="50px" src="modul/daftar/<?php echo

$dt['foto_buy']; ?> ">

<?php }else{

echo"

<!--<span>

96

<a href=\"$aksi?module=daftar&act=upd&id=$dt[id]\" onClick=\"return

confirm('Upload Success')\">Upload</a></span></td>-->

</td>

</tr>";

$no++;

}}

echo "</table>";

$jmldata = mysql_num_rows(mysql_query("SELECT * FROM evaluasi"));




break;

case "detail":

97

$ambil=mysql_query("select * from jadwal where id_jadwal='$_GET[id]'");

$t=mysql_fetch_array($ambil);

echo "<div class='rp' >

<h2 class='head'>Detail Data Jadwal</h2>

<table class='tabelform tabpad'>

<tr>

<td>Nama Pelatihan</td><td>:</td><td>$t[nama_pelatihan]</td>

</tr>

<tr>

<td>Nama Trainer</td><td>:</td><td>";

$bag=mysql_query("select * from trainer where id_trainer='$t[id_trainer]'");

$b=mysql_fetch_array($bag);

echo "$b[nama_trainer]";

98

echo "</td>

</tr

<tr>

<td>Tanggal Pelaksanaan</td><td>:</td><td>";

echo "".tgl_indo($t['tgl_pelatihan'])."";

echo "</td>

</tr>

<tr>

<td>Kuota Peserta</td><td>:</td><td>$t[kuota_peserta]</td>

</tr>

<tr>

<td>Penyelenggara</td><td>:</td><td>$t[penyelenggara]</td>

</tr>

99

<tr>

<td>Tempat</td><td>:</td><td>$t[tempat_pelatihan]</td>

</tr>

<tr>

<td colspan='3'>[ <a href='?module=daftar&act=rp&id=$_GET[id]'>Daftar

Pelatihan </a>]

[<a href='?module=daftar'> Kembali </a>]</td>

</tr>

</table>

</div>

<div style='clear:both'></div>

<tr>

<td>";

100

{

echo "<h2 class='head3'>*Perhatian, Jika Telah Melakukan Pendaftaran,

Harap Menunggu Konfirmasi Lebih Lanjut Dari Departement HRD

dan Tidak Perlu Mendaftar Lebih Dari 1 (satu) kali !</h2>";

}

echo "

</td>

</tr>

";

break;

case "rp":

echo "<h2 class='head'>Input Transaction</h2>

<form action='$aksi?module=daftar&act=rp' method='post'

101


<table class='tabelform tabpad contact_form'>

<tr>

<td></td><td></td><td><input name='id_jadwal' type='hidden'

value='$_GET[id]' readonly></td>

</tr>

<tr>

<td>Transaksi</td><td>:</td><td>

</option>";

$sql = "select * from barang ";

$tr= mysqli_query($con , $sql);

$jsArray = "var nmpes = new Array();\n";

echo '<select name="id"

onchange="document.getElementById(\'nm_pes\').value = nmpes[this.value]">';

echo '<option>--Jenis Jasa--</option>';

102

while($t=mysqli_fetch_array($tr)){

echo "<option value='$t[id]'>$t[jenis_jasa]</option>";

$jsArray .= "nmpes['" . $t['id'] . "'] = '" . addslashes($t['tarif']) . "';\n";

}

echo "</select></td>

</tr>

<tr>

<td>Tarif</td><td>:</td><td><input class='input' name='tarif' type='text'

id='nm_pes' readonly placeholder='Tarif' required><span

class='form_hint'>Penginputan Otomatis 'Data Tidak Dapat Di Ubah'</span></td>

";?>

<td><input class="input" name="icos" type="text" id="icos" value="<?php

echo $_SESSION[idcuss]; ?>" hidden ><span class='form_hint'>Penginputan

Otomatis 'Data Tidak Dapat Di Ubah'</span></td>

<?php

103

echo"</tr>

<tr>

<td>Jumlah Tones</td><td>:</td><td><input class='input' name='ton'

type='text' id='ton' placeholder='Jumlah Tonasi' required><span

class='form_hint'>'Satuan Angka'</span></td>

</tr>

<tr><td>Lokasi Sandar</td><td> :</td><td> <select name='jasa'

id='jasa'><option>--Pilih Lokasi--</option>";

$sqls= "SELECT * FROM jasa";

$jur=mysqli_query($con, $sqls);

while ($d=mysqli_fetch_array($jur)){

echo "<option value='$d[id]'> $d[nama]</option>";

}

echo"</select></td>

<tr><td>Ket.Lokasi</td><td> : </td><td> <select name='jurusan'

id='jurusan'>

<option>--Pilih Lokasi--</option>";

104

/*$sqqlnyo ="SELECT * FROM detail_jasa where detail_jasa.id_jasa

='$d[id]'":

$res=mysqli_query($con, $sqqlnyo);

for($i=0;$i<mysqli_num_rows($res);$i++) {

$row=mysqli_fetch_assoc($res);

if ($row[id_jasa]==$d[id]) echo "<option value=$d[id]

selected>$row[nama]</option>";

else{

echo"<option

value=$d[id]>$row[nama]</option>";

}

}*/

echo"</select></td></tr>

<tr>

105



<tr>

<td></td><td></td><td><button class='submit' type='submit'

\" onClick=\"alert('Anda Telah Melakukan Order, Harap Menunggu

Konfirmasi')\">Simpan</button>

<button class='button' type='reset'>Batal</button>

</td>

</tr>

</table>

</form>

106

";

break;

case "cari":

$fileinfo=PATHINFO($_FILES["image"]["name"]);

$newFilename=$fileinfo['filename'] ."_". time() . "." . $fileinfo['extension'];

move_uploaded_file($_FILES["image"]["tmp_name"],"upload/" .

$newFilename);

$location="upload/" . $newFilename;

$isifoto = "Update transaksi

SET foto_buy = '$location'

where id = '$_GET[id]'";

mysqli_query($con,$isifoto);

echo "</table>";

$jmldata = mysql_num_rows(mysql_query("SELECT * FROM evaluasi"));

107




break;

}

?>


<?php echo $jsArray; ?>

</script>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

108

<script>

$("#jasa").change(function(){

// variabel dari nilai combo box Fakultas

var id = $("#jasa").val();

// mengirim dan mengambil data

$.ajax({

type: "POST",

dataType: "html",

url: "modul/daftar/jurusan.php",

data: "fakul="+id,


// jika tidak ada data

if(msg == ''){

alert('Tidak ada data Lokasi');

}

109

// jika dapat mengambil data,, tampilkan di combo box

jurusan

else{

$("#jurusan").html(msg);

}

}

});

});

</script>

<script language="javascript">

function validasiFile(){

var inputFile = document.getElementById('fileupload');

var pathFile = inputFile.value;

var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

if(!ekstensiOk.exec(pathFile)){

alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');

110

inputFile.value = '';

return false;

}else{

//Pratinjau gambar

if (inputFile.files && inputFile.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {

document.getElementById('pratinjauGambar').innerHTML = '<img

width="50px" height="50px" src="'+e.target.result+'"/>';

};

reader.readAsDataURL(inputFile.files[0]);

}

}

}

</script>

111

4.4. Testing

1. Form Login Admin

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan

ketika sudah dikirimkan ke user. Perubahannya bisa terjadi karena adanya

kesalahan yang mucul dan tidak terdeteksi saat pengujian atau perangkat lunak

harus beradaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan

dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk

perubahan perangkat lunak yang sudah ada, tapi tidak untuk membuat perangkat

lunak baru.

Tabel IV. 16

Hasil Pengujian Black Box Testing Form Login

No

Skenario

Pengujian

Test Case Hasil yang di

harapkan

Hasil

Pengujian

Kesimpulan

1 Mengosongkan

semua isian

data login pada

login admin

dan langsung

klik tombol

Sign in

Email:(Kosong)

Password:(Kosong)

Sistem akan

menolak

akses login

dan akan

menampilkan

pesan

“Username

and Password

Sesuai

Harapan

Valid

112

Anda Salah“

2 Hanya mengisi

data username

dan

mengosongkan

data password,

lalu klik

tombol Sign in

Email: (isi)

Password:(kosong)

Sistem akan

menolak

akses login

dan akan

menampilkan

pesan “Anda

belum

mengisikan

Password “

Sesuai

Harapan

Valid

3 Hanya mengisi

data Password

dan

mengosongkan

data username,

lalu klik

tombol Sign in

Email:(Kosong)

Password: (isi)

Sistem akan

menolak

akses login

dan akan

menampilkan

pesan “Anda

belum

mengisikan

Username“

Sesuai

Harapan

Valid

4 Menginput

dengan kondisi

salah satu data

benar dan satu

lagi salah dan

Email: (Benar)

Password: (Salah)

Sistem akan

menolak

akses login

dan akan

menampilkan

Sesuai

Harapan

Valid

113

langsung klik

tombol Sign in

pesan

“Username

and Password

Anda Salah “

5 Menginput data

login yang

benar, lalu

nengklik

tombol Sign in

User name: (benar)

Password: (benar)

Sistem

menerima

akses login

dan langsung

menampilkan

form admin

Sesuai

harapan

Valid


2. Form Transaksi

Tabel IV. 17

Hasil Pengujian Black Box Testing Form Transaksi

No Skenario Pengujian Test

case

Hasil yang

diharapkan

Hasil

pengujian

Kesimpulan

1.

Semua field dan

gambar tidak terisi

kemudian klik simpan

Field:

(kosong)

Muncul

peringatan

”Anda belum

upload bukti

“

Sesuai

harapan

Valid

2 Semua field terisi dan Field: Muncul Sesuai Valid

114

gambar lebih dari

512kb kemudian klik

simpan

terisi

Gambar:

(>512kb)

peringatan

”file terlalu

besar “

harapan

4

Semua field terisi dan

gambar terisi kemudian

klik simpan

Field:

terisi

Gambar:

terisi

Produk

tersimpan

dan muncul

pesan”produk

berhasil

disimpan”

Sesuai

harapan

Valid


3. Form Keranjang Belanja

Tabel IV. 18

Hasil Pengujian Black Box Testing Form Data Transaksi

No

Skenario

Pengujian


harapkan

Hasil

Pengujian

Kesimpulan

1 Menambah

jumlah barang

yg dibeli

Text box jumlah

:(di ubah)

Sistem akan

mengupdate

subtotal

keranjang

belanja.

Sesuai

Harapan

Valid

2 Menghapus Klik tombol aksi Sistem akan Sesuai Valid

115

pesanan pada

keranjang

belanja

hapus menghapus

item.

Harapan

3 Melanjutkan

proses belanja

Klik tombol beli

lagi

Sistem akan

menampilkan

form produk

Sesuai

Harapan

Valid

4. Form Pembayaran

Tabel IV. 19

Hasil Pengujian Black Box Testing Form Pembayaran

No

Skenario

Pengujian


harapkan

Hasil

Pengujian

Kesimpulan

1 Tidak mengisi

text box No

order dan

mengisi

semua text

No Order

:(kosong)

Text box lain :

(isi)

Sistem akan

menolak dan

menampilkan

“anda belum

mengisikan No.

Sesuai

Harapan

Valid

116

box lainnya order“

2 Mengisi

semua text

box kecuali

text box kode

verifikasi

Kode verifikasi:

(kosong)

Text box lain:

(isi)

Sistem akan

menolak

danmenampilkan

“anda belum

menuliskan kode

verifikasi“

Sesuai

Harapan

Valid

3 Mengisi

semua text

box kecuali

text box total

transfer

Total transfer:

(kosong)

Text box lain:

(isi)

Sistem akan

menolak dan

menampilkan

“anda belum

menuliskan kode

verifikasi“

Sesuai

Harapan

Valid

4 Semua field

terisi

Form isian terisi Sistem

menerima

konfirmasi

pembayaran

Sesuai

Harapan

Valid

4.5. Support

Menjelaskan tentang publikasi web dan spesifikasi hardware dan software

yang akan digunakan untuk menjalankan sistem yang dibuat. Dalam pembuatan

aplikasi sistem penjualan online ini akan membantu admin untuk mengelola data-

data dan membuat laporan, untuk itu penulis menggunakan program PHP untuk

membuat aplikasi. Untuk mengoperasikan program tersebut diperlukan spesifikasi

117

komputer yang cukup tinggi dan untuk mendukung pembuatan aplikasi kebutuhan

hardware yang diperlukan meliputi : processor, memory, hard disk, keyboard,

mouse sedangkan untuk kebutuhan software yang diperlukan meliputi sistem

operasi software program PHP dan software database MySql.

4.5.1. Publikasi Web

Pada pembuatan skripsi ini penulis membuat program berbasis web yang

mana program harus benar-benar secara online. Untuk itu penulis harus

mempersiapkan segala sesuatunya guna memenuhi syarat yang sudah ditentukan.

Penulis sudah melakukan penyewaan domain dan hosting secara online beserta

analisa biaya. Biaya yang digunakan penulis untuk melakukan penyewaan domain

dan hosting secara online.

Tabel IV. 20

Rincian Publikasi Web

Domain www.metito.nf

Periode Pendaftaran 1 Tahun

Disk Space 2Gb

Jumlah Rp 160.138,00

Lokasi Server Indonesia

Client Area www.clients.indowebhoster.com

http://www.metito.nf/

http://www.clients.indowebhoster.com/

118

Alamat IP Server 202.169.44.157

4.5.2. Spesifikasi Hardware dan Software

Selain biaya yang dikeluarkan dalam penulisan skripsi ini yaitu adalah

penjelasan tentang spesifikasi hardware dan software yang digunakan. Kebutuhan

hardware tersebut meliputi: Processor, Memory, monitor, Hard disk, Keyboard,

mouse dan printer. Kebutuhan Software tersebut meliputi : Sistem Operasi,

Software aplikasi dan software.

Tabel IV. 21

Spesifikasi Hardware Dan Software

Kebutuhan Keterangan

Sistem Operasi Windows 7

Processor Intel® Core™ I3 CPU 2.27 GHz

Ram 2.00 GB

Hardisk 320 GB

DVD-ROM 52 x

Monitor SVGA 14”

Keyboard 108 Key

Printer Canon MX490

Mouse Standart

Browser Mozilla Firefox, Google chrome, Internet Explorer

119

Software Dreamweaver, Apache2triad

4.6. Spesifikasi Dokumen Sistem Usulan

Adapun bentuk sistem usulan Pt.Metito Indonesia adalah :

a. Nama Dokumen : Bukti pembelian

Fungsi : Sebagai bukti pembelian barang

Sumber : Sistem

Tujuan : Member

Media : Tampilan

Frekuensi : Setiap terjadi transaksi pembelian

Format : Lampiran B-1

b. Nama Dokumen : Laporan penjualan

Fungsi : Laporan Keseluruhan penjualan barang

Sumber : Sistem

Tujuan : Direktur dan manager

Media : Tampilan

Frekuensi : Setiap hari

Format : Lampiran B-2

BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN file36 Deskripsi Use Case Diagram Halaman Pengunjung...

Documents

Transcript of BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN file36 Deskripsi Use Case Diagram Halaman Pengunjung...