Sistem Informasi Pengelolaan Distro Online

(1)

LAMPIRAN

1. Listing Program

a.

Tampilan User Interface

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head> <body>

function validatesignupbox() {

var x=document.forms["signupFormBox"]["fullname"].value; if (x==null || x=="")

{

alert("Full name must be filled out"); return false;

}

var x=document.forms["signupFormBox"]["username"].value; if (x==null || x=="")

{

alert("Username must be filled out"); return false;

}

var y=document.forms["signupFormBox"]["password"].value; if (y==null || y=="")

{

alert("Password must be filled out"); return false;

}

var x=document.forms["signupFormBox"]["cpass"].value; if (x==null || x=="" || x!=y)

{

alert("Confirm password must be filled out and match with password");

(2)

return false; }

var x=document.forms["signupFormBox"]["email"].value; var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {

alert("Not a valid e-mail address"); return false;

}

var x=document.forms["signupFormBox"]["phone"].value; if (x==null || x=="" || !x.match(numberRegex))

{

alert("Phone must be filled out by number"); return false;

}

function validateLog() {

var x=document.forms["signinForm"]["username"].value; if (x==null || x=="")

{

alert("Username name must be filled out"); return false;

}

var x=document.forms["signinForm"]["password"].value; if (x==null || x=="")

{

alert("Password name must be filled out"); return false;

}

</script> <div id="wrapper"> <div id="header">

(3)

if (!logged_in()) echo "<a href='#'

onclick='TINY.box.show({url:\"frame.php?id=signin\",width:300,height:150,top:50})' id='signin' ><img src='include/images/header_sign_in.png' width='107' height='36' /> </a>

<a href='#' id='signup'

onclick='TINY.box.show({url:\"frame.php?id=signup\",width:500,height:500,top:50})'><img src='include/images/header_sign_up.png' width='107' height='36' />";

else echo "<a id='signout' href='action.php?act=sign_out'><img

src='include/images/header_sign_out.png' width='107' height='36' /></a><a id='profile' href='#'

onclick='TINY.box.show({url:\"frame.php?id=edit_profile\",width:500,height:500,top:50})'>PRO FILE</a>";

<a id="orderconf" href="#"

onclick='TINY.box.show({url:"frame.php?id=order_confirmation",width:500,height:500,top:50})' ><img src="include/images/header_orderconf.png" width="200" height="22" /></a></span>

<?php $session = session_id();

$cart = myfetch("SELECT SUM(crt_qty) as sum FROM cart WHERE crt_session='$session'"); ?>

<a id="cart" href="<?php if ($cart[sum]==0) echo "#"; else echo

"index.php?menu=shop&step=1"; ?>"><img src="include/images/header_cart.png" width="94" height="48" /><?php echo "<span id='cartSum'>".$cart[sum]."</span>"; ?></a></span> </div>

<div id="facebook"><a href="http://www.facebook.com""><img src="include/images/facebook.png" width="35" height="35" /></a><a

href="http://www.twitter.com"><img src="include/images/twitter bird.png" width="35" height="35" /></a></div>

</div>

<?php if (empty($_GET[menu]) || $_GET[menu]=="about" || $_GET[menu]=="freebies" || $_GET[menu]=="contact" || $_GET[menu]=="testimonial") echo "<div

id='headerSlide'>headerSlide</div>"; ?> <div id="mainNav">

<ul> <?php

if ($_GET[menu]=="news") echo "<li class='show'><img

src='include/images/nav_mouseover/mouseover_01_news.png' width='106' height='27' /></li>";

else echo "<li><a href='index.php?menu=news'><img id='on'

src='include/images/nav/nav_01_news.png' width='106' height='27' /><img id='off' src='include/images/nav_mouseover/mouseover_01_news.png' width='106' height='27' /></a></li>";

if ($_GET[menu]=="shop") echo "<li><a href='#' class='show' ><img

src='include/images/nav_mouseover/mouseover_02_shop.png' width='106' height='27' /></a>";

else echo "<li><a href='index.php?menu=shop'><img id='on'

(4)

src='include/images/nav_mouseover/mouseover_02_shop.png' width='106' height='27' /></a>";

//SUB MENU

if ($_GET[menu]=="shop") echo "<ul class='show'>"; else echo "<ul class='hide'>";

echo "<li><a href='index.php?menu=shop'><img

src='include/images/subnav/subnav_01_all.png' width='106' height='16' /></a></li>"; echo "<li><a href='index.php?menu=shop&cat=1'><img

src='include/images/subnav/subnav_02_tshirts.png' width='106' height='16' /></a></li>"; echo "<li><a href='index.php?menu=shop&cat=2'><img

src='include/images/subnav/subnav_03__hoodies.png' width='106' height='16' /></a></li>"; echo "<li><a href='index.php?menu=shop&cat=3'><img

src='include/images/subnav/subnav_04_pants.png' width='106' height='16' /></a></li>"; echo "<li><a href='index.php?menu=shop&cat=4'><img

src='include/images/subnav/subnav_05_accessories.png' width='106' height='16' /></a></li>"; echo "</ul>

</li>";

if ($_GET[menu]=="about") echo "<li class='show'><img

src='include/images/nav_mouseover/mouseover_03_about.png' width='106' height='27' /></li>";

else echo "<li><a href='index.php?menu=about'><img id='on'

src='include/images/nav/nav_03_about.png' width='106' height='27' /><img id='off' src='include/images/nav_mouseover/mouseover_03_about.png' width='106' height='27' /></a></li>";

if ($_GET[menu]=="faq") echo "<li class='show'><img

src='include/images/nav_mouseover/mouseover_04_faq.png' width='106' height='27' /></li>"; else echo "<li><a href='index.php?menu=faq'><img id='on'

src='include/images/nav/nav_04_faq.png' width='106' height='27' /><img id='off' src='include/images/nav_mouseover/mouseover_04_faq.png' width='106' height='27' /></a></li>";

if ($_GET[menu]=="freebies") echo "<li class='show'><img

src='include/images/nav_mouseover/mouseover_05_freebies.png' width='106' height='27' /></li>";

else echo "<li><a href='index.php?menu=freebies'><img id='on'

src='include/images/nav/nav_05_freebies.png' width='106' height='27' /><img id='off' src='include/images/nav_mouseover/mouseover_05_freebies.png' width='106' height='27' /></a></li>";

if ($_GET[menu]=="testimonial") echo "<li class='show'><img

src='include/images/nav_mouseover/mouseover_06_testimonial.png' width='106' height='27' /></li>";

else echo "<li><a href='index.php?menu=testimonial'><img id='on'

src='include/images/nav/nav_06_testimonial.png' width='106' height='27' /><img id='off' src='include/images/nav_mouseover/mouseover_06_testimonial.png' width='106' height='27' /></a></li>";

(5)

if ($_GET[menu]=="contact") echo "<li class='show'><img

src='include/images/nav_mouseover/mouseover_07_contact.png' width='106' height='27' /></li>";

else echo "<li><a href='index.php?menu=contact'><img id='on'

src='include/images/nav/nav_07_contact.png' width='106' height='27' /><img id='off' src='include/images/nav_mouseover/mouseover_07_contact.png' width='106' height='27' /></a></li>";

</ul> </div>

<div id="content"><?php include "include/menu.php";?>iklan web terkait</div> <div id="push">iklan umum</div>

</div>

<div id="bottomNav">iklan khusus</div>

</marquee></p> </div>

</body> </html>

<div id="newsNav">

<ul> <?php

if (isset($_GET[tag])) echo "<li><a href='index.php?menu=news'>all</a></li>";

else echo "<li class='show'>all</li>";

$result = myquery("SELECT * FROM tag");

while ($row = mysql_fetch_array($result))

if ($_GET[tag]==$row[tg_id]) echo "<li class='show'>$row[tg_name]</li>";

else echo "<li><a href='index.php?menu=news&tag=$row[tg_id]'>$row[tg_name]</a></li>"; ?>

(6)

</ul> </div>

<?php

//INIT QUERY & PAGE NUMBER

if (isset($_GET[page])) $getPage = $_GET[page]; else $getPage = 1;

$max = 2;

$startPage = ($getPage * $max) - $max;

if (isset($_GET[tag])) {

$sql = "SELECT n.nw_id, n.nw_title, n.nw_created, u.us_username, i.img_thumbnail, n.nw_content "; $sql .= "FROM news n, user u, image i, news_has_tag nt, tag t ";

$sql .= "WHERE u.us_id=n.us_id "; $sql .= "AND i.nw_id=n.nw_id "; $sql .= "AND nt.nw_id=n.nw_id "; $sql .= "AND t.tg_id=nt.tg_id "; $sql .= "AND t.tg_id='$_GET[tag]' ";

$sql .= "AND i.img_thumbnail IS NOT NULL "; $sql .= "ORDER BY n.nw_created DESC ";

$sqlAll = $sql;

$sqlLimit = $sql."LIMIT $startPage,$max"; } else {

$sql = "SELECT n.nw_id, n.nw_title, n.nw_created, u.us_username, i.img_thumbnail, n.nw_content "; $sql .= "FROM news n, user u, image i ";

(7)

$sql .= "AND i.nw_id=n.nw_id ";

$sql .= "AND i.img_thumbnail IS NOT NULL "; $sql .= "ORDER BY n.nw_created DESC ";

$sqlAll = $sql;

$sqlLimit = $sql."LIMIT $startPage,$max"; }

$newsRow = mysql_num_rows(myquery($sqlAll));

//LIST ALL NEWS

$_SESSION['return_url'] = $_SERVER['REQUEST_URI']; if (empty($_GET[id])) { $Y=0;

$result = myquery($sqlLimit);

while ($row = mysql_fetch_array($result)){ $Y++;?> <div id="newsTitle">

<?php

if (isset($_GET[page])) $newsNum = ( ( ($_GET[page]) - 1 ) * $max ) + $Y; else $newsNum = $Y;

if (isset($_GET[tag])) echo "<a

href='index.php?menu=news&tag=$_GET[tag]&id=$row[nw_id]&p=$newsNum'>$row[nw_title]</a>"; else echo "<a href='index.php?menu=news&id=$row[nw_id]&p=$newsNum'>$row[nw_title]</a>"; ?>

</div>

<?php echo $row[nw_created]." | ".$row[us_username]; ?>

</div>

(8)

//IMAGE

echo "<img src='content/image/news/".$row[img_thumbnail]."' width='600px' height='100px' />";

//CONTENT echo "<p>";

$isiTmp = htmlentities(strip_tags($row[nw_content])); $isi = substr($isiTmp,0,220); // ambil sebanyak 220 karakter $isi = substr($isiTmp,0,strrpos($isi," ")); // potong per spasi kalimat echo $isi;

echo "</p>"; ?>

</div>

<div id="newsTag"> <?php

$tg = myquery("SELECT t.tg_id, t.tg_name FROM tag t, news_has_tag nt, news n WHERE n.nw_id = ".$row[nw_id]." AND n.nw_id = nt.nw_id AND nt.tg_id = t.tg_id");

echo "Tag | ";

while ($rowTg = mysql_fetch_array($tg))

echo "<a href='index.php?menu=news&tag=$rowTg[tg_id]'>$rowTg[tg_name]</a> | ";

?> </div> <?php }

//PAGE

if ($newsRow > $max) {

(9)

echo "<div id='newsPage'>"; if ($getPage!=1) {

if (isset($_GET[tag])) echo "<a

href='index.php?menu=news&tag=".$_GET[tag]."&page=".($getPage - 1)."' >PREF</a> |";

else echo "<a href='index.php?menu=news&page=".($getPage - 1)."' >PREF</a> |"; }

for ($i = 1; $i <= $pageRow; $i++) { if ($getPage==$i )

echo " " . $i . " |"; else

if (isset($_GET[tag])) echo " <a

href='index.php?menu=news&tag=".$_GET[tag]."&page=".$i."' >".$i."</a> |";

else echo " <a href='index.php?menu=news&page=".$i."' >".$i."</a> |"; }

if ($getPage!=$pageRow) {

if (isset($_GET[tag])) echo "<a

href='index.php?menu=news&tag=".$_GET[tag]."&page=".($getPage + 1)."' > NEXT</a>";

else echo "<a href='index.php?menu=news&page=".($getPage + 1)."' > NEXT</a>"; }

echo "</div>"; }

//NEWS DETAIL } else { ?>

(10)

$_SESSION['return_url'] = $_SERVER['REQUEST_URI'];

$sql = "SELECT n.nw_id, n.nw_title, n.nw_created, u.us_username, n.nw_content "; $sql .= "FROM news n, user u ";

$sql .= "WHERE u.us_id=n.us_id "; $sql .= "AND n.nw_id=$_GET[id] ";

$row = myfetch($sql)?>

<?php echo $row[nw_created]." | By: ".$row[us_username]; ?> </div>

<p><?php echo $row[nw_content] ?></p> <?php

$select = myquery("SELECT img_picture FROM image WHERE nw_id = ".$row[nw_id]." AND img_picture IS NOT NULL");

while ($img = mysql_fetch_array($select)){

echo "<img src='content/image/news/".$img[img_picture]."' width='600px' />"; } ?>

</div>

<div id="newsTag"> <?php

$tg = myquery("SELECT t.tg_id, t.tg_name FROM tag t, news_has_tag nt, news n WHERE n.nw_id = ".$row[nw_id]." AND n.nw_id = nt.nw_id AND nt.tg_id = t.tg_id");

echo "Tag | ";

while ($rowTg = mysql_fetch_array($tg))

(11)

</div>

<?php

//INIT NEWS ID

$result = myquery($sqlAll);

while ($row = mysql_fetch_array($result)) $idPage[] = $row[nw_id];

$pref = $_GET[p] - 1; $next = $_GET[p] + 1; if (count($idPage)>1) {

echo "<div id='newsPage' class='detail'>"; if (isset($_GET[tag])) {

if ($_GET[p]!=1) echo "<a href='index.php?menu=news&tag=".$_GET[tag]."&id=". ($idPage[($pref-1)]) ."&p=". $pref ."' class='pref'>PREF</a>";

if ($_GET[p]!=$newsRow) echo "<a href='index.php?menu=news&tag=".$_GET[tag]."&id=". ($idPage[($next-1)]) ."&p=". $next ."' class='next'>NEXT</a>";

} else {

if ($_GET[p]!=1) echo "<a href='index.php?menu=news&id=". ($idPage[($pref-1)]) ."&p=". $pref ."' class='pref'>PREF</a>";

if ($_GET[p]!=$newsRow) echo "<a href='index.php?menu=news&id=". ($idPage[($next-1)]) ."&p=". $next ."' class='next'>NEXT</a>";

}

echo "</div>"; }

<div id="newsComment"> <h4>Comment</h4> <?php

$comment = myquery("SELECT cm_name, cm_created, cm_message FROM comment WHERE nw_id='$_GET[id]' AND cm_status='on' ");

(12)

if (mysql_affected_rows() == 0) echo "<p>No comment yet.</p>"; while ($rowCmn = mysql_fetch_array($comment))

echo "<p><b>".$rowCmn[cm_name]."</b> |

<b>".$rowCmn[cm_created]."</b><br/>".$rowCmn[cm_message]."</p>"; ?>

</div>

$('#postComment').ketchup();

}); </script>

<h4>Leave your own comment</h4>

<p>

<label for="name">Name*</label><br/> <?php

$row = myfetch("SELECT us_username, us_email, us_website FROM user WHERE us_id='$_SESSION[user]'");

if (logged_in()) echo "<input name='name' id='name' value='$row[us_username]' tabindex='10' type='text' maxlength='32' readonly='readonly'/>";

else echo "<input name='name' id='name' value='' tabindex='10' type='text' maxlength='32' class='validate(required)'/>";?>

</p> <p>

<?php if (logged_in()) echo "<input name='email' id='email' value='$row[us_email]' tabindex='20' type='text' maxlength='64' readonly='readonly'/>";

else echo "<input name='email' id='email' value='' tabindex='20' type='text' maxlength='64' class='validate(required, email)'/>";?>

(13)

<p>

<label for="website">Website</label><br/>

<?php if (logged_in() && $row['us_website']!="") echo "<input name='website' id='website' value='$row[us_website]' tabindex='30' type='text' maxlength='64' readonly='readonly'/>";

else echo "<input name='website' id='website' value='' tabindex='30' type='text' maxlength='64' class='validate(website)'/>";?>

</p> <p>

<label for="comment">Comment*</label><br/>

</p>

</div> <?php } ?>

<div id="clear"> </div> //About US//

<div id="contentTitle">About Us</div> <div id="menuContent"><p align="justify">

Berawal dari pencarian ide kecil untuk mewujudkan desain-desain menjadi sesuatu yang bisa dijual, website <acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> waroenk badjoe diluncurkan pada tanggal 4 mei dikamar gue yang pada awalnya berfokus pada penjualan t-shirt.</br>

Perkembangan bisnis <acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> waroenk badjoe mengarahkannya pada fokus bisnis produksi pakaian dan merchandise untuk memenuhi keperluan berbagai klien Perusahaan, Komunitas, instansi dan lain-lain. </br>

Kapasitas produksi <acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> waroenk badjoe masih terus berkembang mengingat saat ini membuka konsep-konsep kerjasama retail berupa re-seller, co-branding, franchise dan lain-lain. </br>

Semoga, <acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> waroenk badjoe senantiasa dapat terus meningkatkan kualitas untuk dapat mendukung bisnis klien. </br>

(14)

<p align="justify"><font size="4" color="white">In the searching of little idea to bring graphic designs become a commercial stuffs, <acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> waroenk badjoe website launched in the May 4th in my room, which focused on t-shirt selling.</br>

Business growth directed <acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> to focused on apparel and merchandise production to fulfill the clients needs.</br>

<acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> production capacity still growing because nowadays we open some partnership opportunity.</br>

We hope we can always increase our product quality to support your business.</br></br> </font></p>

<p align="center">Regards,</br>

<acronym title="Gaya Anak Zalanan Edan.inc">GAZE.inc</acronym> management<pre></br>

//CONTACT//

<div id="contentTitle">CONTACT</div> <div id="menuContent">

</div> </div>

(15)

b.

Tampilan Admin Interface

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

margin:0px; padding:0px; text-align:center; background-color:#666; }

#top {

text-align:center; margin:0px; padding:0px; width:100%; height:200px;

background-color:#333; border-bottom:1px solid #999; font-size:0px;

} #title {

padding:0px;

margin:125px auto 0px auto; height:75px;

(16)

background-color:#222; font-size: medium; }

#form {

text-align:left; padding:0px;

margin:0px auto 0px auto; width:600px;

background-color:#555; }

#form form {

margin:0px auto 0px auto; padding:20px;

border:none; width:300px; }

#password, #username{ width:300px; }

</style> </head>

<body>

<div id="title">Admin Gaze.inc Waroeng Badjoe </div>

</div>

(17)

<p>

<label for="username">Username/Email</label><br/>

<p>

<label for="password">Password</label><br/>

<td width="50%"><label><input type="checkbox" value="rememberMe" id="rememberMe" />Remember Me</label></td>

</table> </form> </div> </body> </html> //POST NEWS//

Title*<br/>

<p>

(18)

new TINY.editor.edit('editor',{ id:'contentPost', width:584, height:175, cssclass:'te',

controlclass:'tecontrol', rowclass:'teheader', dividerclass:'tedivider',

controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|', 'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',

'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',

'font','size','style','|','hr','link','unlink','|'], footer:true,

fonts:['Verdana','Arial','Georgia','Trebuchet MS'], xhtml:true,

cssfile:'style.css', bodyid:'editor', footerclass:'tefooter',

toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, resize:{cssclass:'resize'}

}); </script> </p> <p>

Picture*<br/>

(19)

</p> <p>

</form> </div>

//PEMESANAN//

<div id="contentTitle">Edit Invoice Information</div> <div id="ContentPostNews">

$(document).ready(function() {

$('#edit_bank1').ketchup();

}); </script>

$('#edit_bank2').ketchup();

}); </script>

$('#edit_phone').ketchup();

}); </script>

(20)

<tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

<th scope="row">Cabang</th>

</tr> <tr>

</table>

</form><br><br>

(21)

</tr> <tr>

</tr> <tr>

</tr> <tr>

<th scope="row">Cabang</th>

</tr> <tr>

</table>

</form><br><br>

<?php $phone = myfetch("SELECT * FROM noface.invoice WHERE inv_id='3'");?>

(22)

<tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</table>

</form><br><br> </div>

(23)

c.

CSS

a.

//CSS USER INTERFACE//

* {margin:0;padding:0; font-family:Arial, Helvetica, sans-serif;} * a {text-decoration:none; outline:none;}

* a img {border:none;} html {height:100%}

body {text-align:center; background-color:#878787; background-position:top; height:100%;}

#wrapper {text-align:left; width: 970px; background:url(images/layout.jpg); background-position:center; min-height: 100%; min-height: auto !important; min-height: 100%; margin: 0 auto -160px;}

#header { padding:0 20px 0 20px; position:relative; height:120px;} #title {float:left;}

#title a:hover img {opacity: .5;}

#topNav { float:right; width:400px; height:70px; background:#000; position:relative; /* Rounded Corners */

-moz-border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;} #topNav #signin {float:left;}

#topNav #signin:hover { opacity: .5;} #topNav #signout { float:left;}

#topNav #signout:hover { opacity: .5;} #topNav #signup { float:left;}

#topNav #signup:hover { opacity: .5;}

#topNav #orderconf { position:absolute; bottom:7px; left:7px;} #topNav #orderconf:hover { opacity: .5;}

#topNav #cart {float:right; margin:10px; color:#000; family:Arial, Helvetica, sans-serif; font-weight:bold;}

#topNav #cart:hover { opacity: .5;}

(24)

#topNav #profile { font-weight:bold; font-style:italic; color:#FFF; position:absolute; left:130px; top:12px;}

#topNav #profile:hover { opacity: .5;}

#facebook {right:35px; bottom:5px; position:absolute;}

#facebook a:hover {opacity: .5;}

#headerSlide {margin:5px 20px 5px 20px; clear:both; height:150px; background-color:#333;} #mainNav {margin:5px 20px 0px 20px; height:27px; background-color:#FFF; clear:both;}

#mainNav ul {list-style:none;}

#mainNav li a {padding:0px 10px 0px 10px; float:left; background-color:#FFF;} #mainNav li a #off { display:none;}

#mainNav li a #on { display:block;}

#mainNav li.show {padding:0px 10px 0px 10px; float:left; background-color:#000; cursor:default; height:27px; border-top:#06F solid 3px;}

#mainNav li a.show {background-color:#000; cursor:default; border-top:#06F solid 3px;}

#mainNav li a:hover, #mainNav ul li:hover a, #mainNav li ul.show a, #mainNav li a.show {background-color:#000;}

#mainNav ul li:hover a #on { display:none;} #mainNav ul li:hover a #off { display:block;} #mainNav li a:hover #on { display:none;} #mainNav li a:hover #off { display:block;}

#mainNav li ul { margin:27px 0px 0px 0px; position:absolute; z-index:200;} #mainNav li ul.hide {display:none;}

#mainNav li ul.show {display:block;} #mainNav li:hover ul{display:block;} #mainNav li li {float:left;}

#mainNav li ul a {padding:5px 35px 5px 35px;} #mainNav li ul a:hover img{opacity: .5;}

(25)

.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}

.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}

.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}

.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}

.tclose:hover {background-position:0 -30px}

#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; right:1px solid #000; border-bottom:1px solid #000; padding:0}

#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-radius:5px; border-radius:5px}

#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}

#bluemask {background:#4195aa} #frameless {padding:0}

#frameless .tclose {left:6px}

#content {margin:5px 20px 5px 20px;}

#contentTitle {padding:5px; margin:0 0 5px 0; background-color:#BBB; font-weight:bold; color:#09F; text-transform:uppercase;}

#invoice { margin:5px; padding:5px; background:#CCC; text-align:center;} #invoice p { margin:0 0 10px 0;}

.headInvoice { color:#03F; font-weight:bold;}

#menuContent {padding:5px; background-color:#999;}

#newsNav {float:left; text-transform:uppercase; family:Arial, Helvetica, sans-serif; font-weight:bold; width:150px; }

(26)

#newsNav ul {list-style:none;}

#newsNav li a {display:block; padding:5px; text-decoration:none; color:#AAA ;

background-color:#000; }

#newsNav li.show {display:block; padding:5px; text-decoration:none; color:#000;

background-color:#FFF; }

#newsNav a:hover {color:#FFF; background-color:#333}

#newsTitle {padding:5px; float:right; width:750px; background-color:#777; text-transform:uppercase; font-weight:bold; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color: #FC0;}

#newsInfo {padding:5px; float:right; width:750px; background-color:#888; text-transform:capitalize; font-weight:bold;}

#newsContent {padding:0 5px 5px 5px; float:right; width:750px; background-color:#999; text-align:justify;}

#newsContent img {margin:5px 0 0 0;} #newsContent p {margin:5px 0 0 0;}

#newsTag {padding:5px; margin:0 0 5px 0; float:right; width:750px; background-color:#AAA;

border-top-width: 1px; border-top-style:solid; border-top-color:#000; text-transform:capitalize;}

#newsComment {padding:5px; margin:0 0 5px 0; float:right; width:750px; background-color:#777;}

#newsComment p {text-align:justify; padding:5px;}

#newsPost {padding:5px 5px 0 5px; float:right; width:750px; background-color:#888;} #newsPost form {padding:5px;}

#newsPost p {margin:0 0 5px 0;}

#newsPage {padding:5px; float:right; width:750px; background-color:#999;} #newsPage.detail {margin:0 0 5px;}

#newsPage a.pref {float:left;} #newsPage a.next {float:right;}

#product { margin:5px; background:#999; width:180px; height:230px; float:left; text-align:center; position:relative;}

#product a img { text-decoration:none; border:none;} #product a:hover { color:#FF0;}

(27)

#productInfo { padding:5px; background:#666; height:40px; width:170px; bottom:0px; position:absolute;}

#productPage {padding:5px; background-color:#999; clear:both;}

#productImage { margin:5px 5px 10px 5px; width:400px; height:400px; background-color:#999; float:left;}

#productTitle { margin:5px 5px 0 5px; padding:5px; width:400px; float:left; background-color:#999; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FC0;}

#productPrice {margin:0 5px 0 5px; padding:5px; width:400px; float:left; background-color:#999; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FC0;}

#productDescription {margin:0 5px 0 5px; padding:5px; width:400px; float:left; background-color:#999; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FC0;}

#productSize {margin:0 5px 0 5px; padding:5px; width:400px; float:left; background-color:#999; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FC0;}

#productSize ul {list-style:none;}

#productSize li a {display:block; align:center; padding:5px; margin:5px; text-decoration:none; color:#FFF; background-color:#06F; float:left; height:20px; width:20px;}

#productSize li.click {display:block; align:center; padding:5px; margin:5px; text-decoration:none; float:left; height:20px; width:50px; background:#0CF; color:#333; cursor:default;}

#productSize li a:hover { background:#0CF; color:#333;}

#productQty {margin:0 5px 0 5px; padding:5px; width:400px; float:left; background-color:#999; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FC0;}

#productSuggests {margin:5px; background-color:#999; }

#psTitle {padding:5px; background-color:#777; text-transform:uppercase; font-weight:bold; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color: #FC0;}

#pd { margin:5px; background:#999; width:180px; height:210px; float:left; text-align:center; position:relative;}

#pd a img { text-decoration:none; border:none;} #pd a:hover { color:#FF0;}

#pdInfo { padding:5px; background:#666; height:20px; width:170px; bottom:0px; position:absolute;}

#shoppingCart { background:#888;}

#shoppingCart td.header { padding:5px; text-align:center; font-weight:bold; background:#FFF; }

(28)

#shoppingCart td.content { line-height:50px; padding:5px; border-bottom:#F90 solid 1px;} #discountCode { padding:10px; background-color:#888; margin:5px 0 0 0;}

#discountCode td { background-color:#FFF; padding:5px;}

#shipping { padding:10px 10px 5px 10px; background-color:#888; margin:5px 0 0 0;} #shipping td { background-color:#777; padding:5px;}

#shipping p { padding:0 0 5px 0;}

#total { padding:10px; background-color:#888; margin:5px 0 0 0;}

#total td { background-color:#777; padding:5px; border-top:#F90 solid 1px;} #button { padding:10px; background-color:#888; margin:5px 0 0 0;}

#button td { background-color:#777; padding:5px;}

#billingInfo, #shippingInfo, #confirmOrder { background:#999; padding:5px; position:relative; margin:0 0 5px 0;}

#billingInfo p, #shippingInfo p, #confirmOrder p { padding:5px;}

#loginBox { background:#CCC; height:170px; width:300px; position:absolute; top:20px; right:20px; padding:5px; text-align:center;}

.disable { visibility:hidden}

#clear {clear:both; height:0px;}

#push {height:160px; background-image:url(images/foot.jpg); margin:0 20px 0 20px;} #footer { text-align:left; width: 970px; height:160px; margin:0 auto;}

#link { margin:0 20px 5px 20px; background-images:url(images/footer.jpg); height:50px;} #bottomNav { margin:5px 20px 5px 20px; image:url(images/foot.jpg); background-position:center; height:70px;}

#footNote { margin:0 20px 0 20px; text-align:center; line-height:30px; display:block; background-color:#000;}

(29)

b.

CSS ADMIN INTERFACE

* {margin:0;padding:0; font-family:Arial, Helvetica, sans-serif;} * a {text-decoration:none; outline:none;}

* a img {border:none;} html {height:100%}

body {text-align:center; background-color:#578; height:100%;}

#wrapper {text-align:left; width: 970px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px;}

#header { background-color:#555; height:90px; position:relative;}

#title {height:74px; width:415px; background:url(../../office/include/images/header.jpg) no-repeat; margin:0 0 0 20px;}

#topNav {position:absolute; top:20px; right:20px; family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold;}

#info {position:absolute; top:50px; right:20px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold;}

#leftNav {margin:10px 0px 10px 0px; width:140px; float:left; family:Arial, Helvetica, sans-serif; font-weight:bold; text-align:right;}

#leftNav ul {list-style:none;}

#leftNav li a {display:block; padding:5px 10px 5px ; text-decoration:none; background-color:#06C; color:#FFF; margin:0 0 5px 0; }

#leftNav li a:hover {color:#06C; background-color:#FFF;} #leftNav li li a { background:#444; color:#999;}

#leftNav li li a:hover {background:#555; color:#FFF;}

/*****Tiny Editor*****/

#input {border:none; margin:0; padding:0; font:14px 'Courier New',Verdana; border:0} .te {border:1px solid #bbb; padding:0 1px 1px; font:12px Verdana,Arial; margin:0px} .te iframe {border:none}

.teheader {height:31px; border-bottom:1px solid #bbb; background:url(images/header-bg.gif) repeat-x; padding-top:1px}

.teheader select {float:left; margin-top:5px} .tefont {margin-left:12px}

(30)

.tesize {margin:0 3px} .testyle {margin-right:12px}

.tedivider {float:left; width:1px; height:30px; background:#ccc}

.tecontrol {float:left; width:34px; height:30px; cursor:pointer; background-image:url(images/icons.png)} .tecontrol:hover {background-color:#fff; background-position:30px 0}

.tefooter {height:32px; border-top:1px solid #bbb; background:#f5f5f5}

.toggle {float:left; background:url(images/icons.png) -34px 2px no-repeat; padding:9px 13px 0 31px; height:23px; border-right:1px solid #ccc; cursor:pointer; color:#666}

.toggle:hover {background-color:#fff}

.resize {float:right; height:32px; width:32px; background:url(images/resize.gif) 15px 15px no-repeat; cursor:s-resize}

#editor {cursor:text; margin:10px}

#content {margin:10px 0px 10px 0px; padding:5px; background-color:#FFF; width:820px; float:right;} #contentTitle { padding:5px; margin:0 0 5px 0; background-color:#999; font-weight:bold;} #ContentPostNews {padding:5px; background-color:#FFF;}

#ContentPostNews p {padding:5px; margin:0 0 5px 0;} #push {clear:both; height:50px;}

(31)

2. DATA

(32)

2.2 Data Proses Pengujian

2.2.1 Pengujian Proses Manual dan Proses Aplikasi

Dibawah ini adalah daftar transaksi percobaan distro GAZE.inc Clothing

Company “Waroeng Badjoe”

Percobaan

ke-

Keterangan

1 Menerima order penjualan Baju sebesar Rp. 300.000

2 Menerima Pembayaran cicilan Baju Rp. 100.000

3 Menerima order penjualan Sepatu sebesar Rp. 500.000

4 Menerima Pembayaran cicilan Sepatu Rp. 300.000

5 Menerima Pelunasan cicilan dari semua barang sebesar Rp. 400.000

2.2.2 Pengujian Fungsionalitas

Pengujian fungsionalitas terbagi atas 2 tahapan yaitu pengujian terhadap web

untuk admin westtong dan pengujian terhadap web untuk costumer westtong.

a. Pengujian Web untuk Admin

Tabel Pengujian Login Admin

Nama

Field

Tipe Masukan

Keluaran yg

diharapkan

Hasil Keluaran

Kesimpulan

Username

Kosong

Muncul Pesan

“Username Tidak

Boleh Kosong”

Muncul Pesan

“Username Tidak

Boleh Kosong”

OK

Huruf

(A-Z,a-z+Angka)

Berhasil Login

OK

Password

Kosong

Muncul Pesan

“Password Tidak

Boleh Kosong”

Muncul Pesan

“Password Tidak

Boleh Kosong”

OK

Huruf

(33)

b. Pengujian Web untuk Costumer

Tabel Pengujian Login Costumer

Nama

Field

Tipe Masukan

Keluaran yg

diharapkan

Hasil Keluaran

Kesimpulan

Username

Kosong

Muncul Pesan

“Username Tidak

Boleh Kosong”

Muncul Pesan

“Username Tidak

Boleh Kosong”

OK

Huruf

(A-Z,a-z+Angka)

Berhasil Login

OK

Pasword

Kosong

Muncul Pesan

“Password Tidak

Boleh Kosong”

Muncul Pesan

“Password Tidak

Boleh Kosong”

OK

Huruf

(34)

KEMENTERIAN PENDIDIKAN NASIONAL

UNIVERSITAS SUMATARA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, 8214290, Fax. (061) 8214290 Medan

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan di bawah ini, menerangkan bahwa Mahasiswa Tugas Akhir

Program Diploma 3 Teknik Informatika :

Nama

: Muhammad Itmam

NIM

: 102406253

Program Studi

: D3 Teknik Informatika

Judul Tugas Akhir

: SISTEM INFORMASI PENGELOLAAN DISTRO ONLINE

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada

tanggal 24 Juni 2013

Dengan Hasil : SUKSES / GAGAL

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja

Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU

Medan.

Medan, Juni 2013

Dosen Pembimbing

Program Studi D3 Teknik Informatika

(35)

KEMENTERIAN PENDIDIKAN NASIONAL

UNIVERSITAS SUMATARA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, 8214290, Fax. (061) 8214290 Medan

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : Muhammad Itmam

Nomor Induk Mahasiswa : 102406253

Judul Tugas Akhir : Sistem Informasi Pengelolaan Distro Online

Dosen Pembimbing

: Drs. Suyanto, M.Kom.

Tanggal Mulai Bimbingan

: April 2013

Tanggal Selesai Bimbingan : Juni 2013

No.

Tanggal

Asistensi

Bimbingan

Pembahasan Pada

Asistensi Mengenai

Pada Bab

Paraf Dosen

Pembimbing

Keterangan

1.

2.

3.

4.

5.

6.

7. * Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui/Disetujui oleh

Departemen Matematika FMIPA USU

Pembimbing,

Ketua,

Prof. Dr. Tulus, M.Si., P.hD

Drs. Suyanto, M.Kom.

NIP. 1962019011988031002

NIP. 195908131986011002

(36)

51

7 DAFTAR PUSTAKA

Buku :

Connolly,Thomas and Carolyne Begg, Database System: A Practical Approach to

Design, Implementation, and Management, Third Edition, Addison Wesley,

England: 2002.

Jayan. 2007. Desain Situs Keren dengan Photoshop dan Dreamweaver. Penerbit

Maxikom. Palembang.

Utdirartatmo, Firrar. 2006. Segudang Trik

Pengembangan Situs

Web

(Memanfaatkan HTML, Javascript, dan CSS Secara Kreatif). Penerbit Andi.

Yogyakarta

MADCOMS Madiun. 2012. Aplikasi Pemrograman JavaScript untuk Halaman Web

Powers, David and Tom Muck (ed.). 2007. The Essential Guide to Dreamweaver

CS3 with CSS, Ajax, and PHP. Berkeley: Apress

Kadir, Abdul. Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta:

Andi Offset, 2003.

Prasetyo, Didik Dwi. 2005. Solusi Menjadi Web Master melalui Manajemen Web

dengan PHP. Jakarta: Elex Media Komputindo.

Sugianto, Mikael. 2008. Ms Visio 2007 Membuat Beragam Desain Diagram &

Flowchart. Jakarta

Website:

http://lecturer.ukdw.ac.id/othie/softwareprocess.pdf, [didownload 13 Mei 2013]

http://kihendriku.wordpress.com/2009/03/09/pengertian-xampp/ [diakses 15 Mei

2013]

http://bluewarrior.wordpress.com/2009/10/12/waterfall-model-vs-vmodel/ [diakses 20

Mei 2013].

(37)

1 BAB III

2 GAMBARAN UMUM SISTEM

3.1 Gambaran Umum Sistem

Website ini dibuat untuk mengoptimalkan publikasi informasi GAZE.inc

Clothing Company “Waroeng Badjoe”

sekaligus sebagai aplikasi jual beli secara

online. Sebagai dokumen wajib pemuat informasi pada website yang akan dibaca oleh

browser di internet digunakan script HTML. Namun sebagai media publikasi, website

ini tidak cukup hanya sekedar menampilkan informasi saja, tetapi juga harus

memperhatikan layouting dan keindahan tampilan website, untuk itu digunakanlah

CSS dan JavaScript. Serta untuk memberikan kedinamisan konten website digunakan

script PHP, agar berita dan informasinya dapat selalu di-update. Untuk administrasi

data, digunakan database MySQL, sehingga kedinamisan website dan manipulasi

data konten website dapat dioptimalkan.

Pada website ini semua jenis layanan jual beli hanya dapat diakses oleh user

yang telah terdaftar saja atau telah melakukan sign in. Dalam aplikasi jual belinya,

pertama pelanggan yang sudah terdaftar melakukan sign in terlebih dahulu untuk

dapat memilih barang yang diinginkan. Sedangkan untuk yang belum terdaftar,

pelanggan harus mendaftarkan dirinya terlebih dahulu di menu sign up. Selesai

memilih barang dan check out, pelanggan diperlihatkan review belanjaannya dan

apabila sudah sesuai maka pelanggan memasuki tahap selanjutnya yaitu tentang

alamat tujuan untuk pengiriman barang. Setelah semua sesuai, pelanggan melakukan

pembayaran dengan melakukan transfer ke bank, lalu melakukan konfirmasi

pembayaran melalui website

GAZE.inc Clothing Company “Waroeng Badjoe”

.

3.2 Gambaran Umum Sistem Usulan

Adapun gambaran umum sistem usulan adalah sebagai berikut :

a.

Konsumen akan langsung memesan barang ke admin, kemudian

admin akan mencatat data konsumen dan data barang yang terjual.

(38)

19 b.

Admin akan membuat faktur penjualan, kepada konsumen, kemudian

konsumen akan mengecek status barang. Apakah sesuai dengan

pemesanan atau tidak. Jika tidak, maka akan dilakukan pengecekan

ulang pada bagian pencatatan barang dan konsumen. Tapi jika sudah

tepat, maka konsumen akan langsung menandatangani bukti

penerimaan barang.

c.

Admin akan langsung menginputkan data penjualan, piutang dan

menghitung laporan laba rugi ke sistem dan sudah tersimpan kedalam

database masing-masing laporan.

d.

Manajer akan menerima laporan penjualan, piutang dan laba rugi

kotor.

3.3 Skematika Penjualan

a.

Proses Transaksi Penjualan

START MEMILIH BARANG CEK MEMBER INPUT DATA UKURAN DAN JUMLAH BARANG LANJUT

BELANJA MEMBER LOGIN

CEK MEMBER REVIEW DATA KERANJANG BELANJA EDIT DATA KERANJAN G BELANJA REVIEW DATA ALAMAT PENGIRIMAN INVOICE LOGIN EDIT DATA ALAMAT PENGIRIMA N REVIEW DATA ALAMAT PENGIRIMAN END Y Y Y T T Y T T

(39)

20 b.

Proses Edit Data

START LOGIN PILIH BARANG EDIT DATA _BARANG

MENGEDIT DATA BARANG

LOGOUT

END

Gambar 1.3Proses Edit Data Barang Pada Modul Back-end Website GAZE.inc Clothing Company Waroe g Badjoe .

(40)

1 BAB IV

2 PERANCANGAN SISTEM

4.1 Perancangan Sistem

Tahap ini menyangkut tentang kebutuhan pengguna (

user’s

spesification), studi

–

studi kelayakan (feasibility study) baik secara teknis di

GAZE.inc Clothing Company “Waroeng Badjoe”.

Selain itu menentukan sistem

apa yang cocok dengan kebutuhan yang dinginkan oleh pengguna serta bahasa

pemograman yang sebaiknya digunakan.

4.1.1 Perancangan Output Halaman Umum Sistem

Halaman umum merupakan gambaran dari seluruh isi website yang

dirancang oleh admin. Pada halaman ini terdapat perancangan output

sistem untuk pemesanan barang, yaitu : menu awal, login, registration,

menu shop, proses pengorderan, dan profil pelanggan.

Gambar 2.1 Rancangan Tampilan Menu Awal

(41)

23

Gambar 2.3 Rancangan Menu Daftar

Gambar 2.4 Rancangan View Produk

(42)

24

Gambar 2.6 Rancangan Tampilan Informasi Pengiriman

Gambar 2.7 Rancangan Tampilan Review Pesanan

(43)

25

Gambar 2.10 Rancangan Tampilan Profil Pelanggan

4.2 Perancangan Input Sistem

Tabel 3.1 Pengecekan Data Login

Nomor

: 2.1

Nama

: Pengecekan data login

Deskripsi Proses

: Login user dan admin

Masukan Aliran Data

: Data login

Keluaran Aliran Data

: Info login

Jenis Proses

: Online

Logika Proses

:

Tampilkan form login

If (login valid)

Then

Login berhasil

Else

Login gagal

End

(44)

26 Tabel 3.2 Proses Ubah Jumlah Pesanan

Tabel 3.3 Proses Hapus Produk Pesanan

Tabel 3.4 Proses Tambah Produk

Nomor

: 3.3

Nama

: Proses ubah jumlah pesanan

Deskripsi Proses

: User mengubah jumlah pesanan

Masukan Aliran Data

: Data keranjang

Keluaran Aliran Data

: Info keranjang

Jenis Proses

: Online

Logika Proses

:

Tampilkan form ubah jumlah pesanan

Ubah jumlah

Klik update cart

Nomor

: 3.4

Nama

: Proses hapus produk

Deskripsi Proses

: User menghapus produk

Masukan Aliran Data

: Data keranjang yang akan dihapus

Keluaran Aliran Data

: Info keranjang yang telah dihapus

Jenis Proses

: Online

Logika Proses

:

Tampilkan tombol hapus produk

hapus data produk

Nomor

: 5.1.2

Nama

: Tambah produk

Deskripsi Proses

: Admin menambah produk

Masukan Aliran Data

: Data produk yang akan ditambah

Keluaran Aliran Data

: Info produk yang telah ditambah

Jenis Proses

: Online

Logika Proses

:

Tampilkan form tambah produk

Input data produk

If (benar) Then

Input data berhasil

Else

Input data gagal

End

(45)

27 Tabel 3.5 Proses Ubah Produk

Tabel 3.6 Proses Hapus Produk

Tabel 3.7 Proses Tambah Stok

Nomor

: 5.1.3

Nama

: Ubah produk

Deskripsi Proses

: Admin mengubah produk

Masukan Aliran Data

: Data produk yang akan diubah

Keluaran Aliran Data

: Info produk yang telah diubah

Jenis Proses

: Online

Logika Proses

:

Tampilkan form edit produk

Klik edit data produk

Ubah data produk

Nomor

: 5.1.4

Nama

: Hapus produk

Deskripsi Proses

: Admin menghapus produk

Masukan Aliran Data

: Data produk yang akan dihapus

Keluaran Aliran Data

: Info produk yang telah dihapus

Jenis Proses

: Online

Logika Proses

:

Tampilkan tombol hapus produk

Klik hapus data produk

Nomor

: 5.2.1

Nama

: Tambah stok

Deskripsi Proses

: Admin menambah stok produk

Masukan Aliran Data

: Data stok yang akan ditambah

Keluaran Aliran Data

: Info stok yang telah ditambah

Jenis Proses

: Online

Logika Proses

:

Tampilkan form tambah stok

Input data stok

If (benar) Then

Input data berhasil

Else

Input data gagal

End

(46)

28 Tabel 3.8 Proses Ubah Stok

Tabel 3.9 Proses Hapus Stok

4.3 Perancangan Sistem Dialog

Proses kebutuhan sistem bisnis yang selama ini dijalankan oleh manajemen

GAZE.inc Clothing Company “Waroeng Badjoe”

sudah dapat dikatakan

kompleks namun tidak semua informasi dapat ditangani oleh sistem yang

berjalan khususnya pada bagian penjualan. Pada bagian penjualan terdapat

beberapa proses bisnis yang belum dicatat secara teratur untuk menghasilkan

informasi yang diperlukan. Tapi hal ini dapat diatasi dengan

keunggulan-keunggulan dari sistem yang dapat dinikmati langsung oleh konsumen yang

ingin berbelanja.

Dalam perancangan ini ada beberapa hal yang perlu diperhatikan, yakni

Nomor

: 5.2.2

Nama

: Ubah stok

Deskripsi Proses

: Admin mengubah stok produk

Masukan Aliran Data

: Data stok yang akan diubah

Keluaran Aliran Data

: Info stok yang telah diubah

Jenis Proses

: Online

Logika Proses

:

Tampilkan form edit stok

Klik edit data stok

Ubah data stok

Nomor

: 5.2.3

Nama

: Hapus stok

Deskripsi Proses

: Admin menghapus stok produk

Masukan Aliran Data

: Data stok yang akan dihapus

Keluaran Aliran Data

: Info stok yang telah dihapus

Jenis Proses

: Online

Logika Proses

:

Tampilkan form stok produk

hapus data produk

(47)

29 terdapat diantaranya Diagram Konteks, Data Flow Diagram (DFD), Entity

Relationship Diagram (ERD), Data Dictionary (DD/Kamus Data), Struktur File,

Struktur Menu, Merancang Input dan Merancang Output. Dan juga diantara

kesemuanya saling berkaitan satu sama lain dan progam yang dibuat.

Kebutuhan yang paling akhir adalah keperluan perangkat keras dan lunak,

pemilihan bahasa pemrograman yang digunakan, konversi sistem, pemilihan

personil, evaluasi sistem dan pemeliharaan sistem.

(48)

30

4.4 Perancangan File Sistem

Struktural file dari sistem dapat di ilustrasikan dalam physical Data Model

berikut:

PDM (Physical Data Model)

invoice PK inv_id inv_memo inv_bank_name inv_bank_branch inv_no_rekening inv_phone inv_sms inv_email product_has_order FK1 pd_id FK2 ord_id po_qty po_size cart PK crt_id FK1 pd_id crt_session crt_qty crt_date product PK pd_id FK1 cat_id pd_name pd_description pd_price pd_created category PK cat_id cat_parent_id cat_name product_has_size FK1 sz_id FK2 pd_id ps_qty size PK sz_id sz_name image PK img_id FK1 pd_id FK2 nw_id img_picture img_thumbnail img_title shipping_city PK sc_id FK1 sp_id sc_name sc_cost sc_day shipping_province PK sp_id sp_name discount PK dsc_id dsc_code dsc_percentage news PK nw_id FK1 us_id nw_title nw_contemt nw_created nw_modified nw_hit nw_status news_has_tag FK1 tg_id FK2 nw_id tag PK tg_id tg_name tg_hit comment PK cm_id FK1 us_id FK2 nw_id cm_name cm_email cm_website cm_message cm_created cm_status address PK ad_id FK1 us_id ad_title ad_address ad_zip_code ad_city ad_county user PK us_id us_username us_email us_website us_password us_full_name us_phone us_type us_created us_modified feedback PK fd_id FK1 us_id fd_full_name fd_email fd_subject fd_message fd_status fd_type order PK ord_id FK1 us_id FK2 dsc_id ord_created ord_modified ord_status ord_memo ord_full_name ord_email ord_phone ord_company ord_address ord_zip_code ord_city ord_country ord_receiver_name ord_payment_bank ord_payment_date ord_payment_amount n 1 n 1 n 1 1 n 1 n 1 n n 1 1 _n 1 n 1 n 1 n n 1 n 1 n 1 1 n n 1 1 n 1 n n 1

(49)

31

4.5 Perancangan Database

4.5.1 DFD (Data Flow Diagram)

1. DFD Level 0

Aplikasi e-commerce Noface clothing admin

Data login administrator Data order

Data produk Data kategori

Info login administrator Info order Info produk Info kategori pelanggan Data login Data user Data produk Data kategori

Data konfirmasi pembayaran Data order

Info login Info user Info produk Info kategori

Info konfirmasi pembayaran Info order Pengunjung Info pendaftaran Info produk Info kategori Data pendaftaran Data produk Data kategori 0 +

Gambar 3.1 DFD Level 0

2. DFD Level 1

Penyajian berita Penyajian jejaring sosial Daftar Login Pengolahan data transaksi Penyajian informasi cara pesan & bayar

Pengolahan data master Penyimpanan pesanan ke keranjang belanja Penyajian data riwayat pesanan Admin Pengunjung Pelanggan Penyajian informasi tentang kami Inf o te nt an g kam i

Info fb & twitter pageInfo cara pesan & bayar Info berita In fo te nt an g ka

mi Info fb & twitter page Info cara pesan & bayar

Info berita Data pendaftaran Data pendaftaran user Info pendaftaran Data pendaftaran

Data login pelanggan Info login pelanggan Data login pelanggan

Data login pelanggan

Data login admin Info login admin

Data login admin

Data login admin Data pesanan

Info pesanan cart order product Da ta p ro d u k , k a te g o ri , u ku ra n In fo p ro d u k , k a te g o ri , u k u ra n Data produk Da ta ke ra nj an g Da ta ke ran jan g Data pesanan Data pesanan Data pesanan Data pesanan Data pesanan Data pesanan Data riwayat pesanan Data konfirmasi pembayaran

Data riwayat pesanan Data konfirmasi pembayaran

Da ta p esa na n , p e mb aya ra n Inf o pe sa n a n, pe mb aya ra n

Info pesanan, pembayaran, pengiriman

Data pesanan, pembayaran, pengiriman Data produk Data produk 1.0 2.0 3.0 4.0 5.0 6.0 7.0 8.0 9.0 10.0 + + + +

(50)

32

3. DFD Level 2 Proses 1

Administrator 2.1 Pengecekan Data Login Pelanggan user Data login administrator

Info login administrator

Info login pelanggan Data login pelanggan

Data login pelanggan Data login administrator

Data login administrator valid Data login pelanggan valid

Data login administrator Data login pelanggan

Gambar 3.3 DFD Level 2 Proses 1

4. DFD Level 2 Proses 2

Pelanggan 3.1 Proses Lanjut Belanja 3.2 Proses Checkout 3.3 Proses Ubah Jumlah Pesanan 3.4 Proses Hapus Produk Data keranjang, data produkData keranjang

Data keranjang yang diubah _{Data keranjang yang dihapus} Info keranjang, info produkInfo keranjang

Info keranjang yang telah diubah Info produk yang dihapus

Data login valid _{Data login valid} Data login valid Data login valid

product cart Data produk Data keranjang Data keranjang Data keranjang Data keranjang Data keranjang Data keranjang Data keranjang Data keranjang

(51)

33

5. DFD Level 2 Proses 3

Administrator 4.1 Ubah Status Pembayaran 4.2 Ubah Status Pengiriman 4.3 Penyajian Data Pesanan order D a ta p e s a n a n Da ta p e s a n a n

Data status pembayaran

Bank Info pembayaran Da ta p e m b a y a ra n

Data status pengiriman

Info status pengiriman

Data pesanan In fo p e s a n a n

Data login valid Data login valid

Data login valid

D a ta p e m b a y a ra n Data pesanan Data pesanan

Gambar 3.5 DFD Level 2 Proses 3

6. DFD Level 2 Proses 4

Admin

5.1 Pengolahan data Produk

product Data Produk yang akan dilihat,

ditambah, diubah, dihapus

Info Produk yang telah dilihat, ditambah,

diubah, dihapus _{Data Produk yang telah} dilihat, ditambah,

diubah, dihapus Data Produk yang akan

dilihat, ditambah, diubah, dihapus 5.2 Pengolahan data Stok size

Info Stok yang akan ditambah, diubah dihapus

Data Stok yang akan ditambah, diubah, dihapus Data Ukuran 5.3 Pengolahan data Detail Produk Data Produk Data Ukuran Da ta De ta il Produ k Info D etai l Pr od uk + + Product_has_s ize Da ta s tok Data s tok Data stok Data stok

Gambar 3.6 DFD Level 2 Proses 4

(52)

34

Admin 5.1.1 View Produk 5.1.2 Tambah Produk 5.1.3 Ubah Produk 5.1.4 Hapus Produk Da ta pr odu k y an g ak a n dilih at In fo p ro du k

Info produk yang telah dihapus Info produk

Data produk yang akan ditambah Info produk yang telah

ditambah

Data produk yang akan diubah Info produk yang

telah diubah

Data produk yang akan dihapus Pelanggan Inf o p ro duk D at a p rod uk y a ng ak an dil iha t category Data kategori Data kategori Data kategori Data kategori product Data produk yang akan dilihat

Data produk

Data produk yang akan ditambah Data produk yang telah

ditambah

Data produk yang telah diubah Data produk yang akan diubah

Data produk yang telah dihapus

Data produk yang akan dihapus Product_has_s

ize Data Stok

Gambar 3.7 DFD Level 3 Proses 1

8. DFD Level 3 Proses 2

Admin 5.2.1 Proses Tambah Stok 5.2.2 Proses ubah Stok 5.2.3 Proses Hapus Stok Data stok yang akan ditambah

Data stok yang akan diubah

Data Stok yang akan dihapus Info stok yang akan ditambah

Info stok yang akan diubah

Info Stok yang akan dihapus

Data login valid

Product_has_s ize

Data stok yang ditambah Data stok yang ditambah

Data stok yang diubah

Data Stok yang dihapus

Gambar 3.8 DFD level 3 Proses 2

(53)

35 a.

Data order =

ord_id+ord_created+ord_modified+ord_status+ord_memo+ord_full_na

me+ord_email+ord_phone+ord_company+ord_address+ord_zip_code+

ord_city+ord_country+ord_receiver_name+ord_payment_bank+ord_pa

yment_date+ord_payment_amount

ord_id

= {a-z | A-Z | 0-9}

ord_created

= DD+MM+YYYY | HH+MM+SS

ord_modified

= DD+MM+YYYY | HH+MM+SS

ord_status

= {a-z | A-Z | 0-9}

ord_memo

= {a-z | A-Z | 0-9}

ord_full_name

= {a-z | A-Z | 0-9}

ord_email

= {a-z | A-Z | 0-9 | special karakter }

ord_phone

= {a-z | A-Z | 0-9}

ord_company

= {a-z | A-Z | 0-9}

ord_address

= {a-z | A-Z | 0-9}

ord_zip_code

= {a-z | A-Z | 0-9}

ord_city

= {a-z | A-Z | 0-9}

ord_country

= {a-z | A-Z | 0-9}

ord_receiver_name

= {a-z | A-Z | 0-9}

ord_payment_bank

= {a-z | A-Z | 0-9}

ord_payment_date

= DD+MM+YYYY | HH+MM+SS

ord_payment_amount = {0-9}

b.

Data user =

us_id+us_username+us_email+us_website+us_password+us_full_name

+us_phone+us_type+us_created+us_modified

us_id

= {0-9}

(54)

36 us_email

= {a-z | A-Z | 0-9 | special karakter}

us_website

= {a-z | A-Z | 0-9}

us_password

= {a-z | A-Z | 0-9| special karakter }

us_full_name

= {a-z | A-Z | 0-9}

us_phone

= {a-z | A-Z | 0-9}

us_type

= {a-z | A-Z | 0-9}

us_created

= DD+MM+YYYY | HH+MM+SS

us_modified

= DD+MM+YYYY | HH+MM+SS

c.

Data news has tag =

tg_id

= {0-9}

d.

Data tag =

tg_id+tg_name+tg_hit

tg_id

= {0-9}

tg_name

= {a-z | A-Z | 0-9}

tg_hit

= {0-9}

e.

Data comment =

cm_id+cm_name+cm_email+cm_website+cm_message+cm_created+c

m_status

cm_id

= {0-9}

cm_name

= {a-z | A-Z | 0-9}

cm_email

= {a-z | A-Z | 0-9 |special karakter}

cm_website

= {a-z | A-Z | 0-9}

(55)

37 cm_created

= {a-z | A-Z | 0-9}

cm_status

= {a-z | A-Z | 0-9}

f.

Data address =

ad_id+us_id+ad_title+ad_address+ad_zip_code+ad_city+ad_county

ad_id

= {0-9}

ad_title

= {a-z | A-Z | 0-9}

ad_address

= {a-z | A-Z | 0-9}

ad_zip_code

= {a-z | A-Z | 0-9}

ad_city

= {a-z | A-Z | 0-9}

ad_county

= {a-z | A-Z | 0-9}

g.

Data feedback =

fd_id

+fd_full_name+fd_email+fd_subject+fd_message+fd_status+fd_type

fd_id

= {0-9}

fd_full_name

= {a-z | A-Z | 0-9}

fd_email

= {a-z | A-Z | 0-9 | special karakter }

fd_subject

= {a-z | A-Z | 0-9}

fd_message

= {a-z | A-Z | 0-9 | special karakter}

fd_status

= {a-z | A-Z | 0-9}

fd_type

= {a-z | A-Z | 0-9}

h.

Data invoice =

inv_id+inv_memo+inv_bank_name+inv_no_rekening+inv_bank_branc

h+inv_phone+inv_sms+inv_email

inv_id

= {0-9}

(56)

38 inv_bank_name

= {a-z | A-Z | 0-9}

inv_no_rekening

= {a-z | A-Z | 0-9}

inv_bank_branch

= {a-z | A-Z | 0-9}

inv_phone

= {a-z | A-Z | 0-9}

inv_sms

= {a-z | A-Z | 0-9}

inv_email

= {a-z | A-Z | 0-9 | special karakter}

i.

Data product has order =

po_qty+po_size

po_qty

= {0-9}

po_size

= {a-z | A-Z | 0-9}

j.

Data cart =

crt_id +crt_session+crt_qty +crt_date

crt_id

= {0-9}

crt_session

= {0-9}

crt_qty

= {0-9}

crt_date

= DD+MM+YYYY | HH+MM+SS

k.

Data product =

pd_id+ pd_name+pd_description+pd_price+pd_created

pd_id

= {0-9}

pd_name

= {a-z | A-Z | 0-9}

pd_description

= {a-z | A-Z | 0-9}

pd_price

= {0-9}

(1)

iii

KATA PENGANTAR

Syukur alhamdulillah kehadirat Allah SWT atas rahmat dan hidayah-Nya, sehingga penulis dapat menyelesaikan penyusunan laporan Tugas Akhir ini guna memenuhi salah satu syarat mencapai gelar Ahli Madya Teknik Informatika pada Jurusan D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam (FMIPA) Universitas Sumatera Utara.

Laporan ini tersusun berdasarkan pengalaman penulis selama menjalani perkuliahan di D3 Teknik Informatika selama 6 semester, bimbingan kepada dosen-dosen setiap matakuliah yang terkait, dosen pembimbing dan berdiskusi dengan teman-teman yang juga sedang menjalani proses laporan tugas akhir. Dengan ini Penghargaan spenulis haturkan kepada:

1. Bapak Drs. Suyanto, M.Kom selaku Dosen Pembimbing yang telah banyak memberikan ilmu yang bermanfaat tentang penulisan laporan ini dan membimbing penulis menyelesaikan tugas akhir ini.

2. Bapak Dr. Sutarman, M.Sc selaku Dekan FMIPA USU.

3. Bapak Dr. Marpongahtun, M.Sc selaku Pembantu Dekan I (PUDEK I) FMIPAUSU. 4. Bapak Prof. Dr. Tulus, M.Si., P.hD selaku Ketua Departemen MatematikaUniversitas

Sumatera Utara (USU).

5. Bapak Syahriol Sitorus, S.Si, M.IT selaku Ketua Program Studi Diploma IIITeknik Informatika Fakultas MIPA Universitas Sumatera Utara (USU).

6. Ibu Dra. Elly Rosmaini, M.Si selaku Sekretaris Program Studi DiplomaIII Teknik Informatika Fakultas MIPA Universitas Sumatera Utara (USU).

7. Teristimewa untuk Ibunda Hj. Farida Aryani Lubis S.Pd. dan Ayahanda, H. Ahyaddin tercinta yang telah memberikan dukungan baik secara moril maupun materil sehingga penulis dapat menyelesaikan laporan praktek kerja lapangan ini.

8. Adinda Dewi Sarah yang juga memberikan dukungan moril dan juga menjadi nara sumber informasi untuk penulis.

9. Rekan satu tim bimbingan “Pak Suyanto group” yang telah berkerja sama dengan baik bersama penulis untuk melaksanakan laporan tugas akhir ini. Dan juga rekan-rekan mahasiswa/i DIII-Teknik Informatika yang memberikan bantuan kepada penulis untuk menyelesaikan laporan praktek kerja lapangan ini.

10. Semua pihak yang tidak dapat penulis sebutkan satu persatu yang memberikan bantuan, baik saran maupun kritik sehingga laporan ini dapat diselesaikan dengan baik. Penulis menyadari bahwa Laporan ini masih jauh dari sempurna, untuk itulah penulis mengharapkan kritik dan saran dari semua pihak yang sifatnya membangun.

Demikian penulis sampaikan penghargaan ini, semoga Allah SWT. dapat membalasnya. Dan juga dengan harapan laporan Tugas Akhir ini dapat bermanfaat bagi pembaca dan penulis sendiri.

(2)

SISTEM INFORMASI PENGELOLAAN DISTRO ONLINE

ABSTRAK

GAZE.inc Clothing Company “Waroeng Badjoe” merupakan salah satu outlet baru yang memproduksi produk- produk fashion seperti t-shirts, celana, jaket, dan lain sebagainya dengan remaja sebagai target pasarnya. Untuk dapat menjangkau pelanggan di seluruh wilayah dan menunjang kegiatan bisnis bagi GAZE.inc Clothing Company “Waroeng

Badjoe”, maka dibutuhkan suatu penerapan teknologi informasi dalam sistem pemasaran

dan media promosinya, yaitu aplikasi e-commerce.

Aplikasi e-commerce ini memaksimalkan teknologi informasi dengan menggunakan internet sebagai media online yang dapat diakses dimana saja. Penulis merancang sistem untuk aplikasi ini menggunakan Flowchart, Data Flow Diagram (DFD) serta Entity

Relationship Diagram (ERD).

Pada pengembangan aplikasi e-commerce ini, penulis menggunakan script PHP untuk membuat tampilan web yang dinamis, MySQL sebagai basis data yang digunakan dan Adobe Dreamweaver sebagai alat untuk membantu pembuatan aplikasi.

Aplikasi e-commerce ini dapat membantu pelanggan untuk berbelanja dimana saja dan kapan saja tanpa harus mendatangi toko.

(3)

v DAFTAR ISI

PERSETUJUAN i

PERNYATAAN ii

KATA PENGANTAR iii

ABSTRAK iv

DAFTAR ISI v

DAFTAR GAMBAR DAN TABEL vii

1 BAB I PENDAHULUAN 1

1.1 Latar Belakang 1

1.2 Rumusan Masalah 1

1.3 Tujuan 2

1.4 Ruang Lingkup 2

1.5 Batasan Masalah 2

1.6 Metodologi Penelitian 2

1.7 Skematika Penulisan 4

1.7 Jadwal Pengerjaan 6

2 BAB II LANDASAN TEORI 7

2.1 Profil Perusahaan 7

2.2 Pengenalan Perancangan Sistem 7

2.2.1 Flowchart 7

2.2.2 Data Flow Diagram (DFD) 8

2.3 Database (basis data) 9

2.3.1 Pengertian Database 9

2.3.2 ERD (Entity Relationship Diagram) 9

2.4 Pemrograman Web 10

2.4.1 Client Side 10

2.4.1.1 Hyper Text Markup Languagge (HTML) 10

2.4.1.2 Cascading Style Sheet 11

2.4.1.3 JavaScript 11

2.4.1.4 Browser 12

2.4.1.5 Website 12

2.4.1.6 Adobe Dreamweaver 12

2.4.2 Server Side 13

2.4.2.1 Web Server 13

2.4.2.2 Database 13

2.4.2.3 SQL 14

2.4.2.4 PHP 15

2.4.2.5 Apache 15

2.4.2.6 XAMPP 16

(4)

3 BAB III GAMBARAN UMUM SISTEM 18

3.1 Gambaran Umum Sistem 18

3.2 Gambaran Sistem Usulan 18

3.3 Skematika Penjualan 19

4 BAB IV PERANCANGAN SISTEM 22

4.1 Perancangan Sistem 22

4.1.1 Perancangan Output Halaman umum Sistem 22

4.2 Perancangan Input Sistem 25

4.3 Perancangan Sistem Dialog 28

4.4 Perancangan File Sistem 30

4.5 Perancangan Database 31

4.5.1 DFD (Data Flow Diagram) 31

4.5.2 Kamus Data 35

4.6 Kebutuhan Perangkat Keras dan Lunak 41

4.6.1 Pengembangan Sistem 41

4.6.2 Implementasi Sistem 41

5 BAB V IMPLEMENTASI DAN PENGUJIAN 43

5.1 Implementasi 43

5.1.1 Struktur Tabel 43

5.1.2 Implementasi Antarmuka 49

5.1.2.1 Halaman Antarmuka User 49

5.1.2.2 Halaman Antarmuka Admin 52

5.2 Pengujian 54

6 BAB VI P E N U T U P 56

6.1 Kesimpulan 56

6.2 Saran 56

6.3 Daftar Pustaka 57

(5)

vii

DAFTAR GAMBAR

Gambar 1.1 Struktur Organisasi 5

Gambar 1.2 Proses Transaksi Belanja Online 19

Gambar 1.3 Proses Edit Data Barang 20

Gambar 2.1 Rancangan Tampilan Menu Awal 22

Gambar 2.2 Rancangan Menu Login 22

Gambar 2.3 Rancangan Menu Daftar 23

Gambar 2.4 Rancangan View Produk 23

Gambar 2.5 Rancangan Tampilan Keranjang Belanja 23

Gambar 2.6 Rancangan Tampilan Informasi Pengiriman 24

Gambar 2.7 Rancangan Tampilan Review Pesanan 24

Gambar 2.8 Rancangan Tampilan Invoice 24

Gambar 2.9 Rancangan Tampilan Konfirmasi Pembayaran 24

Gambar 2.10 Rancangan Tampilan Profil Pelanggan 25

Gambar 2.11 PDM (Physical Data Model) 30

Gambar 3.2 DFD Level 0 31

Gambar 3.2 DFD Level 1 31

Gambar 3.3 DFD Level 2 Proses 1 32

Gambar 3.4 DFD Level 2 Proses 2 32

Gambar 3.5 DFD Level 2 Proses 3 33

Gambar 3.6 DFD Level 2 Proses 4 33

Gambar 3.7 DFD Level 3 Proses 1 34

Gambar 3.8 DFD level 3 Proses 2 34

Gambar 4.1 Halaman Beranda 49

Gambar 4.2 Login 49

Gambar 4.3 Halaman Pendaftaran 50

Gambar 4.4 Halaman Lihat Produk 50

Gambar 4.5 Halaman Keranjang 50

Gambar 4.6 Halaman Informasi Pengiriman Barang 51

Gambar 4.7 Halaman Review Pesanan 51

Gambar 4.8 Halaman Invoice 51

Gambar 4.9 Halaman Konfirmasi Order 52

Gambar 4.10 Halaman Profil Pelanggan 52

Gambar 4.11 Halaman Login Admin 52

Gambar 4.12 Halaman Tambah Barang 53

Gambar 4.13 Halaman Edit Barang 53

Gambar 4.14 Halaman Edit Status Pesanan 53

(6)

DAFTAR TABEL

Tabel 1.1 Jadwal Pengerjaan 6

Tabel 2.1 Tabel Flowchart 8

Tabel 2.2 Simbol Data Flow Diagram 9

Tabel 2.3 Cardinality 10

Tabel 3.1 Pengecekan Data Login 25

Tabel 3.2 Proses Ubah Jumlah Pesanan 26

Tabel 3.3 Proses Hapus Produk Pesanan 26

Tabel 3.4 Proses Tambah Produk 26

Tabel 3.5 Proses Ubah Produk 27

Tabel 3.6 Proses Hapus Produk 27

Tabel 3.7 Proses Tambah Stok 27

Tabel 3.8 Proses Ubah Stok 28

Tabel 3.9 Proses Hapus Stok 28

Tabel 3.10 Spesifikasi Perangkat Keras 41

Tabel 3.11 Spesifikasi Perangkat Lunak 41

Tabel 3.12 Kebutuhan Minimal Spesifikasi Perangkat Keras 41 Tabel 3.13 Kebutuhan Minimal Spesifikasi Perangkat Lunak 41

Tabel 4.1 Order 43

Tabel 4.2 User 44

Tabel 4.3 Tag 44

Tabel 4.4 Feedback 44

Tabel 4.5 Address 45

Tabel 4.6 Comment 45

Tabel 4.7 Category 45

Tabel 4.8 Product 45

Tabel 4.9 Cart 46

Tabel 4.10 Size 46

Tabel 4.11 Image 46

Tabel 4.12 Product_has_size 46

Tabel 4.13 Discount 47

Tabel 4.14 Product_has_order 47

Tabel 4.15 News 47

Tabel 4.16 Invoice 47

Tabel 4.17 News_has_tag 48

Tabel 4.18 Shipping_city 48

Tabel 4.19 Shipping_province 48

Tabel 4.20 Tabel Pengujian User 54