BAB IV RANCANGAN SISTEM DAN PROGRAM USULANPada gambar activity diagram mengolah data produk diatas adalah sebuah proses pengolahan data produk yang dilakukan oleh admin, adapun langkah

27

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

Setelah melakukan konseptualisasi dan perancangan aplikasi web, langkah

selanjutnya yaitu melakukan pengumpulan bahan, pembuatan dan testing aplikasi.

Pengumpulan bahan, pembuatan dan testing pada aplikasi ini terdiri dari

spesifikasi kebutuhan perangkat keras, spesifikasi kebutuhan perangkat lunak,

fungsi dari setiap halaman pada aplikasi disertai dengan cara pengoperasian.

4.1. Analisa Kebutuhan Software

Analisa kebutuhan software merupakan tahapan yang terdiri dari deskripsi

perangkat lunak yang akan dibuat dan fungsionalitas dari perangkat lunak.

Menganalisis masalah merupakan hal yang utama dalam melakukan perancangan

sistem. Mengidentifikasi permasalahan dan kebutuhan-kebutuhan yang harus

dipenuhi oleh sistem yang akan dibangun, dapat menghasilkan suatu gambaran

tentang bagaimana sistem akan bekerja dan menjawab semua permasalahan yang

ada pada sistem tersebut, sehingga mempermudah para pengguna untuk

mengaplikasikan sistem tersebut. Permasalahan yang terjadi pada MBV Kids

adalah pengolahan data maupun pemesanan masih dikerjakan secara konvensional

dengan dicatat ke dalam buku-buku saja tanpa adanya proses pengolahan

menggunakan komputer sehingga proses pengerjaan memakan waktu yang lama

dan juga tenaga yang tidak sedikit, sementara untuk hasil terkadang harus ada

koreksi lagi sebelum diajukan ke pimpinan.

28

4.2 Perancangan Sistem

Pada perancangan sistem disini akan membahas mengenai use case diagram,

activity diagram, class diagram, dan sequence diagram. Dan untuk databasenya

akan membahas mengenai ERD dan struktur database.

4.2.1 Use Case Diagram

Use Case Merupakan pemodelan untuk kelakuan sistem informasi yang

akan dibuat. Use casemendeskripsikan sebuah interaksi antara satu atau lebih

actor dengan sistem informasi yang dibuat. Use case dibuat untuk mengetahui

fungsi apa saja yang ada di dalam sebuah sistem informasi dan siapa saja yang

berhak menggunakan fungsi-fungsi itu.

Sebuah Use Case direpresentasikan dengan urutan langkah yang sederhana,

adapun langkah – langkahnya yaitu:

1. Use case diagram admin

Admin

Login

Input Data

Pemesanan

Use Case Diagram Admin

Sumber: Penelitian 2017

Gambar 4.1

Use case diagram admin

29

Tabel 4.1

Use Case Diagram Admin

Sumber: penelitian 2017

Use case Name Halaman User Admin

Requirements A1

Goal Admin dapat memasukkan data user

Pre-Conditions Admin setelah login

Post-Conditions Sistem menampilkan informasi user

Failed end condition Gagal menampilkan informasi karena

salah login

Primary Actors Siswa

Main Flow / Basic Path 1. Admin dapat login

2. Admin dapat entry data orang tua

Alternate Flow / Invariant 1 2a. Admin dapat melihat profil sekolah

Use case Name Halaman User Admin

Requirements A1

Goal Admin dapat memasukkan data user

Pre-Conditions Admin setelah login

Post-Conditions Sistem menampilkan informasi user

Failed end condition Gagal menampilkan informasi karena

salah login

Primary Actors Siswa

Main Flow / Basic Path 1. Admin dapat login

2. Admin dapat entry data orang tua

Alternate Flow / Invariant 1 2a. Admin dapat melihat profil sekolah

30

Pada Gambar use case diagram admin dapat dilihat admin melakukan

login ke sistem aplikasi, setelah admin berhasil melakukan login sistem aplikasi

menampilkan halaman utama admin, selanjutnya admin dapat mengolah data

barang serta mengolah data pesenan.

2. Use case diagram Customer

Konsumen

Login

Halaman utama

customer

Lihat katalog

produk

Pesan produk

Konfrimasi customer

Use Case Diagram Customer


Gambar 4.2

Use case diagram customer

Pada gambar use case diagram customer diatas dapat dilihat customer

masuk ke sistem aplikasi setelah itu customermasuk ke halaman utama, setelah

customer masuk ke halaman utama sistem aplikasi, customer dapat melihat

katalog produk untuk melakukan pencarian produk selanjutnya customer dapat

31

melakukan pemesanan produk, jika customer telah selesai melakukan proses

pemesanan produk, customer dapat mengkonfirmasi pembayaran ke MBV Kids .

4.2.2 Activity Diagram

Activity diagram Menggambarkan workflow dari sebuah sistem atau proses

bisnis atau menu yang ada di dalam perangkat lunak. Yang perlu diperhatikan

disini adalah bahwa diagram aktivitas menggambarkan aktivitas sistem, bukan

aktivitas actor. Jadi aktivitas yang dapat dilakukan sistem.

1. Activity diagram login admin

Admin

Melakukan login

ke sistem aplikasi

Sistem Aplikasi

Masukkan

username dan

password

Halaman utama

admin

Keluar dari sistem

aplikasi

Cek

username,pa

ssword

valid

Tidak valid


Gambar 4.3

Activity diagram login

32

Pada gambar activity diagram login ( masuk ke system aplikasi), dapat

dilihat admin melakukan login ke system aplikasi, admin memasukkan username

dan password, setelah itu sistem aplikasi memverifikasiusername dan password

jika username dan password tidak valid maka sistem akan meminta admin untuk

memasukkan username dan password kembali, apabila username dan password

valid maka admin sukses masuk ke sistem aplikasi dan sistem akan menampilkan

halaman utama sistem aplikasi.

2. Activity diagram mengolah data produk

Admin

Masuk ke

halaman produk

Sistem Aplikasi

Halaman Produk

Mengolah data produk

(tambah, ubah,hapus)

Konfirmasi pengolahan

data alat produk

Cek

validasi

Data produk

diperbaharui

Ya

Tidak


Gambar 4.4

Activity diagram mengolah data produk

33

Pada gambar activity diagram mengolah data produk diatas adalah sebuah

proses pengolahan data produk yang dilakukan oleh admin, adapun langkah

pertama yang dilakukan admin adalah masuk ke halaman produk, setelah sistem

menampilkan halaman produk, admin dapat melakukan pengolahan data produk

seperti menambah produk, menghapus produk, dan mengubah data produk,

setelah admin mengkonfirmasi pengolahan data produk, sistem akan mengecek

validasi data produk, jika pengolahan data gagal sistem kembali ke halaman

produk, jika pengolahan data sukses, data produk diperbaharui.

3. Activity diagram pemesanan produk

Customer

Masuk ke

halaman katalog

produk

Sistem Aplikasi

Halaman katalog

produk

Melakukan

pencarian produk

Melakukan

pemesanan

produk

Halaman

pemesanan

produk

Cek

persedian

produk

Ya

Memasukkan data

pemesanan produk

Konfirmasi

pemesanan produk

Cek data

pemesanan

Pemesanan produk

sukses

Ya

Tidak

Tidak


Gambar 4.5

Activity diagram pemesanan produk

34

Pada gambar activity diagram pemesanan produk diatas dapat dilihat

customer masuk ke halaman katalog produk untuk mencari produk, setelah

melakukan pencarian produk pelanggan dapat memesan produk dan sistem akan

mengecek persediaan produk, jika produk tidak tersedia maka sistem aplikasi

akan kembali ke halaman katalog produk, jika produk tersedia maka sistem akan

menampilkan halaman pemesanan produk, selanjutnya admin diminta untuk

mengisi data pemesanan produk, setelah pengisian data pemesanan selesai

customer mengkonfirmasi pemesanan produk, dan sistem akan mengecek data

pemesanan produk, jika data pemesanan tidak valid maka pemesanan gagal dan

sistem aplikasi akan kembali ke halaman pemesanan produk, jika data pemesanan

valid, maka proses pemesanan berhasil.

4.2.3 Sequance Diagram

Menggambarkan kelakuan objek pada use case dengan mendeskripsikan

waktu hidup objek dan message yang dikirimkan dan diterima antar objek. Oleh

karena itu, untuk menggambar diagram sekuen harus diketahui objek-objek yang

terlibat dalam sebuah use case beserta metode-metode yang dimiliki kelas yang

diinstansikan menjadi objek itu.

35


Gambar 4.6

Sequance diagram

4.2.4 LRS

LRS menggambarkan struktur sistem dari segi pendefinisian kelas-kelas

yang akan dibuat untuk membangun sistem. Kelas memiliki apa yang disebut

atribut dan metode.

1. Atribut merupakan variable yang dimiliki dalam suatu kelas

36

2. Metode merupakan fungsi-fungsi yang dimiliki suatu kelas


Gambar 4.7

Class diagram

37

4.2.5. ERD

Member Pemesanan

Produk

Melakukan

Terdiri

Id_Barang

No_telp

email

alamat

Jml_pesanan

Nama_pemesanan

Tgl_pemesanan

Harga_barang

Total_Belanja

Id_Pemesanan

Admin Kelola

1

1 1

Id_member

Nama

Nama_barang

Alamat

No_telp

Kategori

Kelola

Memilih

Id_barang

Nama_barang

Kategori

Warna

Harga

Ukuran

Gambar

Stok

Keterangan

Id_kategori

Nama_kategori

Email

Password

Id_member Id_member Id_member Id_member


Gambar 4.8

Entity Relasionship Diagram

4.2.6. Database

Menggambarkan hubungan antar table yang dibuat beserta relasi antar

table. Penggambaran boleh menggunakan data model atau entity relation diagram

dan harus disertakan table spesifikasi filenya.

38

Tabel 4.2

Struktur tabel Admin

Field Name Variabel & Lenght Atribute

id_pengguna Int (10) Primary key

Username Varchar (25)

Password Varchar (25)

hak_akses Varchar (25)

Sumber : Penelitian 2017

Tabel 4.3

Struktur Tabel produk


id_barang Int (10) Primary key

nama_barang Varchar (30)

Kategori Varchar (30)

Harga Int (20)

Warna Varchar (20)

Ukuran Varchar (20)

Gambar Varchar (100)

Stok Int (10)

Keterangan Varchar (100)


Tabel 4.4

Struktur Tabel kategori


id_kategori Int (10) Primary key

nama_kategori Varchar (25)


39

Tabel 4.5

struktur able pesanan


id_pesanan Int (10) Primary key

id_barang Int (10)

nama_barang Varchar (30)

nama_pemesan Int (30)

no_telp Varchar (20)

Email Varchar (30)

Alamat Varchar (30)

tgl_pesanan Date

jml_pesanan Int (10)

harga_barang Int (10)

total_belanja Int (10)

Sumber :Penelitian 2017

Tabel 4.6

Struktur tabel member


id_member Int (10) Primary key

Nama Varchar (30)

Alamat Varchar (50)

No_telp Int (20)

Email Varchar (30)

password Varchar (30)


40

4.2.7. Struktur Navigasi Customer


Gambar 4.9

Struktur navigasi customer

4.2.8 Struktur Navigasi Admin


Gambar 4.10

Struktur navigasi admin

4.3 User Interface

Website ini akan terdiri dari beberapa halaman diantaranya adalah halaman

home atau halaman utama, Products, Sign In, contact us dan login admin.

Girls

Home

Boys Products Sign In Contact

Order

Register

Confirmation

Login

Lihat Member Kelola Produk Lihat Pemesanan Logout

41

a. Tampilan Layar Home


Gambar 4.11

Halaman home

b. Tampilan Layar Products


Gambar 4.12

Halaman Products

42

c. Tampilan LayarSign In


Gambar 4.13

Halaman Sign In

d. Tampilan Layar Contact Us


Gambar 4.14

Halaman Contact Us

43

e. Tampilan Layar Login


Gambar 4.15

Halaman Login

4.4. Code Generation

A. LOGIN.PHP/ACCOUNT.PHP

<?php require_once('Connections/koneksi.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",

$theNotDefinedValue = "")

{

if (PH

P_VERSION < 6) {

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

44

}

$theValue = function_exists("mysql_real_escape_string") ?

mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

break;

case "date":


break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

}

return $theValue;

}

}

$maxRows_girls = 6;

$pageNum_girls = 0;

45

if (isset($_GET['pageNum_girls'])) {

$pageNum_girls = $_GET['pageNum_girls'];

}

$startRow_girls = $pageNum_girls * $maxRows_girls;

mysql_select_db($database_koneksi, $koneksi);

$query_girls = "SELECT id_barang, gambar FROM product WHERE id_cat =

2";

$query_limit_girls = sprintf("%s LIMIT %d, %d", $query_girls, $startRow_girls,

$maxRows_girls);

$girls = mysql_query($query_limit_girls, $koneksi) or die(mysql_error());

$row_girls = mysql_fetch_assoc($girls);

if (isset($_GET['totalRows_girls'])) {

$totalRows_girls = $_GET['totalRows_girls'];

} else {

$all_girls = mysql_query($query_girls);

$totalRows_girls = mysql_num_rows($all_girls);

}

$totalPages_girls = ceil($totalRows_girls/$maxRows_girls)-1;


$query_boys = "SELECT id_barang, gambar FROM product WHERE id_cat =

1";

$boys = mysql_query($query_boys, $koneksi) or die(mysql_error());

$row_boys = mysql_fetch_assoc($boys);

46

$totalRows_boys = mysql_num_rows($boys);

?>

<?php

// *** Validate request to login to this site.

if (!isset($_SESSION)) {

session_start();

}

$loginFormAction = $_SERVER['PHP_SELF'];

if (isset($_GET['accesscheck'])) {

$_SESSION['PrevUrl'] = $_GET['accesscheck'];

}

if (isset($_POST['email'])) {

$loginUsername=$_POST['email'];

$password=$_POST['password'];

$MM_fldUserAuthorization = "";

$MM_redirectLoginSuccess = "login-ok.php";

$MM_redirectLoginFailed = "fail.php";

$MM_redirecttoReferrer = true;


$LoginRS__query=sprintf("SELECT email, password FROM customer WHERE

email=%s AND password=%s",

47

GetSQLValueString($loginUsername, "text"), GetSQLValueString($password,

"text"));

$LoginRS = mysql_query($LoginRS__query, $koneksi) or die(mysql_error());

$loginFoundUser = mysql_num_rows($LoginRS);

if ($loginFoundUser) {

$loginStrGroup = "";

if (PHP_VERSION >= 5.1) {session_regenerate_id(true);} else

{session_regenerate_id();}

//declare two session variables and assign them

$_SESSION['MM_Username'] = $loginUsername;

$_SESSION['MM_UserGroup'] = $loginStrGroup;

if (isset($_SESSION['PrevUrl']) && true) {

$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];

}

header("Location: " . $MM_redirectLoginSuccess );

}

else {

header("Location: ". $MM_redirectLoginFailed );

}

}

?>

<!DOCTYPE html>

48

<html>

<head>

<title>MBV Kidz | Account </title>

<link href="css/bootstrap-3.1.1.min.css" rel='stylesheet' type='text/css' />



<script src="js/jquery.min.js"></script>





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



<meta name="viewport" content="width=device-width, initial-scale=1">

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

<meta name="keywords" content="Youth Fashion Responsive web template,

Bootstrap Web Templates, Flat Web Templates, Android Compatible web

template,

Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG,

SonyEricsson, Motorola web design" />

<script type="application/x-javascript"> addEventListener("load", function() {

setTimeout(hideURLbar, 0); }, false); function hideURLbar(){

window.scrollTo(0,1); } </script>

<link href='//fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet'

type='text/css'>



<script src="js/bootstrap.min.js"></script>

49

<script src="js/simpleCart.min.js"> </script>



<script src="js/responsiveslides.min.js"></script>

<script>

$(function () {

$("#slider").responsiveSlides({

auto: true,

speed: 500,

namespace: "callbacks",

pager: true,

});

});

</script>

</head>

<body>



<div class="header">

<div class="header-top">

<div class="container">

<div class="col-sm-4 logo animated wow

fadeInLeft" data-wow-delay=".5s">

<img src="images/logo.jpg"/> </div>

50

</div>

</div>


<div class="head-top">

<div class="n-avigation">

<nav class="navbar nav_bottom" role="navigation">



<div class="navbar-header nav_2">

<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-

toggle="collapse" data-target="#bs-megadropdown-tabs">

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

<span class="icon-bar"></span>


<span class="icon-bar"></span>`

</button>

<a class="navbar-brand" href="#"></a>

</div>



<div class="collapse navbar-collapse"

id="bs-megadropdown-tabs">

<ul class="nav navbar-nav nav_1">

<li><a

href="index.php">Home</a></li>

51

<li class="dropdown mega-

dropdown active">

<a href="#"

class="dropdown-toggle" data-toggle="dropdown">Girls<span

class="caret"></span></a>

<div

class="dropdown-menu mega-dropdown-menu">

<div

class="container-fluid">



<div

class="tab-content">

<div

class="tab-pane active" id="men">

<ul class="nav-list list-inline">

<?php do { ?>

<li><a href="detail.php?id=<?php echo $row_girls['id_barang']; ?>"><img

src="images/<?php echo $row_girls['gambar']; ?>" width="150" height="132"

class="img-responsive"/></a></li>

<?php } while ($row_girls = mysql_fetch_assoc($girls)); ?>

52

</ul>

</div>

</div>

</div>



53

<div


<div



<?php do { ?>

<li><a href="detail.php?id=<?php echo $row_boys['id_barang']; ?>"><img

src="images/<?php echo $row_boys['gambar']; ?>" width="150" height="132"


<?php } while ($row_boys = mysql_fetch_assoc($boys)); ?>

</ul>

</div>

</div>

</div>



</div>

</li>

54

<li><a href="products.php">Products</a></li>

<li><a href="account.php">Sign In</a></li>

<li class="last"><a href="contact.php">Contact</a></li>

</ul></div>

</nav>

</div>

<div class="clearfix"> </div>



<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>

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



<div id="small-dialog" class="mfp-hide">

<div class="search-top">

<div class="login">

<form action="#" method="post">

<input type="submit" value="">

<input type="text" name="search" value="Type something..."

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">

</form>

</div>

<p> Shopping</p>

</div>

55

</div>

<script>

$(document).ready(function() {

$('.popup-with-zoom-

anim').magnificPopup({

type: 'inline',

fixedContentPos: false,

fixedBgPos: true,

overflowY: 'auto',

closeBtnInside: true,

preloader: false,

midClick: true,

removalDelay: 300,

mainClass: 'my-mfp-zoom-in'

});

});

</script>

</div>

</div>

</div>



<div class="breadcrumbs">

56


<ol class="breadcrumb breadcrumb1 animated wow slideInLeft animated" data-

wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-

name: slideInLeft;">

<li><a href="index.php"><span class="glyphicon glyphicon-home" aria-

hidden="true"></span>Home</a></li>

<li class="active">Account</li>

</ol>

</div>

</div>

<div class="account">


<h2>Account</h2>

<div class="account_grid">

<div class="col-md-6 login-right">

<form action="<?php echo $loginFormAction; ?>" method="POST"

name="login">

<span>Email Address</span>

<input type="text" name="email">

<span>Password</span>

<input type="password" name="password">

<div class="word-in">

57

<input type="submit" value="Login">

</div>

</form>

</div>

<div class="col-md-6 login-left">

<br>

<h4>NEW CUSTOMERS</h4>

<p>Silahkan untuk membuat account baru jika anda belum memiliki account di

toko kami.</p>

<a class="acount-btn" href="register.php">Create an Account</a>

</div>


</div>

</div>

</div>

</body>

</html>

<?php

mysql_free_result($girls);

?>

B. CONTACT.PHP

<!DOCTYPE html>

58

<html>

<head>

<title>MBV Kidz</title>













template,






<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet'

type='text/css'>


type='text/css'>

59








<script>

$(function () {


auto: true,

speed: 500,


pager: true,

});

});

</script>

</head>

<body>






<div class="col-sm-4 logo animated wow fadeInLeft" data-wow-delay=".5s">

60


</div>

</div>













</button>


</div>



<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">


<li><a href="index.php">Home</a></li>

61

<li class="dropdown mega-dropdown active">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Girls<span


<div class="dropdown-menu mega-dropdown-menu">

<div class="container-fluid">



<div class="tab-content">

<div class="tab-pane active" id="men">


<li><a href="girls.php"><img src="images/girls/1.png" class="img-responsive"

alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>

</ul>

</div>

</div>

</div>

62



</div>

</li>


<a href="#" class="dropdown-toggle" data-toggle="dropdown">Boys<span









<li><a href="men.php"><img src="images/t10.jpg" class="img-responsive"

alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>


alt=""/></a></li>

63

</ul>

</div>

</div>

</div>



</div>

</li>




</ul>

</div>

</nav>

</div>









<div class="login">

64





</form>

</div>

<p> Shopping</p>

</div>

</div>

<script>


$('.popup-with-zoom-

anim').magnificPopup({

type: 'inline',


fixedBgPos: true,

overflowY: 'auto',


preloader: false,

midClick: true,

removalDelay: 300,


});

65

});

</script>



</div>

</div>

</div>










<li class="active">Contact</li>

</ol>

</div>

</div>

<div class="contact">


<h3>Contact</h3>

<div class="contact-grids">

<div class="contact-form">

66


<div class="contact-bottom">

<div class="col-md-4 in-contact">

<span>Name</span>

<input type="text" name="name">

</div>


<span>Email</span>

<input type="text" name="email" >

</div>


<span>Phonenumber</span>

<input type="text" name="phonenumber">

</div>


</div>

<div class="contact-bottom-top">

<span>Message</span>

<textarea name="message"> </textarea>

</div>

<input type="submit" value="Send">

</form>

67

</div>

<div class="address">

<div class=" address-more">

<div class="col-md-4 address-grid ">

<i class="glyphicon glyphicon-phone"></i>

<div class="address1">

<p>08129023465</p>

</div>


</div>

<div class="col-md-4 address-grid ">

<div class="address1">

<p><a href="mailto:@example.com">[email protected]</a></p>

</div>


</div>


</div>

</div>

</div>

</div>

</div>

68





</body>

</html>

C. REGISTER.PHP


<?php




{

if (PHP_VERSION < 6) {


}



switch ($theType) {

case "text":


break;

case "long":

case "int":

69


break;

case "double":


break;

case "date":


break;

case "defined":


break;

}

return $theValue;

}

}

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form")) {

$insertSQL = sprintf("INSERT INTO customer (nama, alamat, no_telp, email,

password) VALUES (%s, %s, %s, %s, %s)",

70

GetSQLValueString($_POST['nama'], "text"),

GetSQLValueString($_POST['alamat'], "text"),

GetSQLValueString($_POST['telepon'], "text"),

GetSQLValueString($_POST['email'], "text"),

GetSQLValueString($_POST['password'], "text"));


$Result1 = mysql_query($insertSQL, $koneksi) or die(mysql_error());

$insertGoTo = "reg-ok.php";

if (isset($_SERVER['QUERY_STRING'])) {

$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";

$insertGoTo .= $_SERVER['QUERY_STRING'];

}

header(sprintf("Location: %s", $insertGoTo));

}

$maxRows_girls = 6;

$pageNum_girls = 0;



}



71


2";


$maxRows_girls);





} else {



}




1";





$query_r = "SELECT * FROM product";

$r = mysql_query($query_r, $koneksi) or die(mysql_error());

$row_r = mysql_fetch_assoc($r);

72

$totalRows_r = mysql_num_rows($r);

?>

<!DOCTYPE html>

<html>

<head>

<title>MBV Kidz | Products </title>










73




template,







type='text/css'>


type='text/css'>








<script>

$(function () {


auto: true,

speed: 500,


74

pager: true,

});

});

</script>

</head>

<body>








</div>

</div>









75





</button>


</div>















<?php do { ?>


76




</ul>

</div>

</div>

</div>



</div>

</li>











<?php do { ?>




<?php } while ($row_boys = mysql_fetch_assoc($boys)); ?>

77

</ul>

</div>

</div>

</div>



</div>

</li>




</ul>

</div>

</nav>

</div>









<div class="login">

78





</form>

</div>

<p> Shopping</p>

</div>

</div>

<script>


$('.popup-with-zoom-anim').magnificPopup({

type: 'inline',


fixedBgPos: true,

overflowY: 'auto',


preloader: false,

midClick: true,

removalDelay: 300,


});

79

});

</script>



</div>

</div>

</div>








<li class="active">Register</li>

</ol>

</div>

</div>


<div class="register">

<h2>Register</h2>

<form name="form" action="<?php echo $editFormAction; ?>"

method="POST">

<div class="col-md-6 register-top-grid">

80

<span>Nama</span>

<input type="text" name="nama" required>

<span>Email</span>

<input type="email" name="email" required>

<span>Alamat</span>

<input type="text" name="alamat" required></div>

<div class=" col-md-6 register-top-grid">

<span>No Telepon</span>

<input type="text" name="telepon" required>

<span>Password</span>

<input type="password" name="password" required>

</div>


<div class="register-but">

<input type="submit" value="submit">

</div>

<input type="hidden" name="MM_insert" value="form">

</form>

</div>

</div>

</div>

</body>

81

</html>

<?php

mysql_free_result($girls);

mysql_free_result($r);

?>

D. BELI.PHP


<?php

if (!isset($_SESSION)) {

session_start();

}

$MM_authorizedUsers = "";

$MM_donotCheckaccess = "true";

// *** Restrict Access To Page: Grant or deny access to this page

function isAuthorized($strUsers, $strGroups, $UserName, $UserGroup) {

// For security, start by assuming the visitor is NOT authorized.

$isValid = False;

// When a visitor has logged into this site, the Session variable MM_Username

set equal to their username.

// Therefore, we know that a user is NOT logged in if that Session variable is

blank.

if (!empty($UserName)) {

82

// Besides being logged in, you may restrict access to only certain users based

on an ID established when they login.

// Parse the strings into arrays.

$arrUsers = Explode(",", $strUsers);

$arrGroups = Explode(",", $strGroups);

if (in_array($UserName, $arrUsers)) {

$isValid = true;

}

// Or, you may restrict access to only certain users based on their username.

if (in_array($UserGroup, $arrGroups)) {

$isValid = true;

}

if (($strUsers == "") && true) {

$isValid = true;

}

}

return $isValid;

}

$MM_restrictGoTo = "account.php";

if (!((isset($_SESSION['MM_Username'])) &&

(isAuthorized("",$MM_authorizedUsers, $_SESSION['MM_Username'],

$_SESSION['MM_UserGroup'])))) {

$MM_qsChar = "?";

83

$MM_referrer = $_SERVER['PHP_SELF'];

if (strpos($MM_restrictGoTo, "?")) $MM_qsChar = "&";

if (isset($_SERVER['QUERY_STRING']) &&

strlen($_SERVER['QUERY_STRING']) > 0)

$MM_referrer .= "?" . $_SERVER['QUERY_STRING'];

$MM_restrictGoTo = $MM_restrictGoTo. $MM_qsChar . "accesscheck=" .

urlencode($MM_referrer);

header("Location: ". $MM_restrictGoTo);

exit;

}

?>


<?php




{

if (PHP_VERSION < 6) {


}



84

switch ($theType) {

case "text":


break;

case "long":

case "int":


break;

case "double":


break;

case "date":


break;

case "defined":


break;

}

return $theValue;

}

}

if ((isset($_GET['del'])) && ($_GET['del'] != "")) {

85

$deleteSQL = sprintf("DELETE FROM pesanan WHERE id_pesanan=%s",

GetSQLValueString($_GET['del'], "int"));


$Result1 = mysql_query($deleteSQL, $koneksi) or die(mysql_error());

}

$maxRows_girls = 6;

$pageNum_girls = 0;



}




2";


$maxRows_girls);





} else {


86


}




1";





$query_r = "SELECT * FROM pesanan inner join product on product.id_barang

= pesanan.id_barang WHERE stat = 0 and

email='$_SESSION[MM_Username]'";





Author: W3layout




-->

87

<!DOCTYPE html>

<html>

<head>














template,







type='text/css'>

88


type='text/css'>








<script>

$(function () {


auto: true,

speed: 500,


pager: true,

});

});

</script>

</head>

<body>





89




</div>

</div>













</button>


</div>



90

<div class="collapse navbar-collapse"

id="bs-megadropdown-tabs">


<li><a

href="index.php">Home</a></li>


dropdown active">

<a href="#"

class="dropdown-toggle" data-toggle="dropdown">Girls<span


<div


<div




<div


<div



<?php do { ?>


91



?>


}




2";


$maxRows_girls);





} else {



}


92



1";




$colname_r = "-1";

if (isset($_GET['id'])) {

$colname_r = $_GET['id'];

}


$query_r = sprintf("SELECT * FROM product WHERE id_barang = %s",

GetSQLValueString($colname_r, "int"));





Author: W3layout




-->

93

<!DOCTYPE html>

<html>

<head>














template,







type='text/css'>

94


type='text/css'>








<script>

$(function () {


auto: true,

speed: 500,


pager: true,

});

});

</script>

</head>

<body>





95




</div>

</div>













</button>


</div>



96













<?php do { ?>





</ul>

</div>

</div>

</div>



</div>

97

</li>






<!—Tab panes -->




<?php do { ?>




<?php } while ($row_boys = mysql_fetch_assoc($boys));

?>

4.5. Testing

Setelah implementasi maka perlu diketahui apakah program atau aplikasi

berjalan dengan benar dan pengujian ini menggunakan sistem Blackbox Testing.

98

A. Pengujian Untuk Login

Tabel 4.7

Pengujian Untuk Login

No Kasus/Form

Diuji

Skenario Uji Hasil yang Diharapkan Hasil

Pengujian

1 Login

Admin

Masukan data

Username dan

Password

yang BENAR

Ketika data login dimasukkan

dan tombol login di klik, maka

akan dilakukan proses

pengecekan data login. Apabila

data login benar maka akan

langsung masuk ke halaman

menu utama Administrator.

Valid

Masukan data

Username dan

Password

yang SALAH



dilakukan proses pengecekan

data login. Apabila data login

salah maka akan ditampilkan

pesan kesalahan.

Valid

Masukan data

Username di

isi benar dan

Password





Valid

99

4.6 Support

4.6.1 Publikasi Web

Pembahasan mengenai proses penyewaan domain dan hosting secara online

beserta analisa biaya sub bab ini digunakan jika rancangan program berbasis web.

Pada proses publikasi penulis memanfaatkan dropbox untuk transfer ke server.

Lalu lakukan remote ke server.

kosong salah maka akan ditampilkan

pesan kesalahan “username atau

password anda salah”

Masukan data

Username

kosong dan

Password di

isi benar





salah maka akan ditampilkan

pesan kesalahan “please fill out

this field”.

Valid

100


Gambar: 4.16

Ramote desktop

kemudian dari server, download melalui dropbox. Dan pindahkan ke folder

htdocs lalu lakukan import database.

101


Gambar: 4.17

Import database

4.6.2 Spesifikasi Hardware dan Software

Adapun perangkat keras dan perangkat lunak yang digunakan dalam

pembuatan aplikasi ini antara lain :

1. Perangkat Keras

a. Micro processor :Intel(R) Core (TM) i3 CPU M 330 @

2.13GHz(4CPUs) , ~2.1GHz

b. Kapasitas memory : 2 Gb

c. Monitor : 14,1 Inch

d. Harddisk : 500 Gb

2. Perangkat Lunak

a. Sistem operasi Windows 7

b. Microsoft office

c. Adobe Dreamweaver CS6

d. XAMPP (PHP, Apache, MySQL)

e. Google Chrome

102

4.7 Spesifikasi Dokumen Sistem Usulan

Spesifikasi dokumen masukkan adalah dokume-dokumen yang masuk atau

diterima oleh sistem untuk kemudian diproses menjadi sebuah informasi,

dokumen masukkan berupa:

Nama Dokumen : Penjualan Barang

Fungsi : Kategori Barang

Sumber : Sistem

Tujuan : Member

Media : Tampilan

Frekuensi : Selalu Ada

Format : B1

BAB IV RANCANGAN SISTEM DAN PROGRAM USULANPada gambar activity diagram mengolah data produk diatas adalah sebuah proses pengolahan data produk yang dilakukan oleh admin, adapun langkah

Documents