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>

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;

(2)

return false;

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;

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

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

<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++;?>

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

<?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) {

//jumlah halaman

(9)

echo "<div id='newsPage'>";

if ($getPage!=1) {

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

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)

<?php

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

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

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

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

}

?>

<h4>Comment</h4>

<?php

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

$(document).ready(function() {

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

});

</script>

<h4>Leave your own comment</h4>

<p>

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

</form>

</div>

<?php

}

?>

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

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

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

<head>

<title>Admin No Face Clothing</title>

body {

margin:0px;

padding:0px;

text-align:center;

background-color:#666;

}

#top {

text-align:center;

margin:0px;

padding:0px;

width:100%;

height:200px;

border-bottom:1px solid #999;

font-size:0px;

}

#title {

padding:0px;

margin:125px auto 0px auto;

height:75px;

(16)

font-size: medium;

}

#form {

text-align:left;

padding:0px;

width:600px;

}

#form form {

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>

<p>

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

</p>

<tr>

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

</tr>

</table>

</form>

</div>

</body>

</html>

//POST NEWS//

<p>

Title*<br/>

</p>

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

</p>

</form>

</div>

//PEMESANAN//

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

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

</tr>

</table>

</form><br><br>

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

(21)

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

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

</tr>

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

</tr>

</table>

</form><br><br>

(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;}

(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;}

(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;}

(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;}

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

(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

z+Angka)

Berhasil Login

OK

Password

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