LAMPIRAN. 1. Listing Program. a. Tampilan User Interface. Universitas Sumatera Utara

Size: px

Start display at page:

Download "LAMPIRAN. 1. Listing Program. a. Tampilan User Interface. Universitas Sumatera Utara"

Shavonne Shields
5 years ago
Views:

1 LAMPIRAN 1. Listing Program a. Tampilan User Interface <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>gaze.inc Waroeng Badjoe</title> <link href="include/css.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="screen" href="include/jquery.ketchup.css" /> <link rel="stylesheet" type="text/css" href="include/messages.css" /> </head> <body> <script type="text/javascript"> 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; password"); var x=document.forms["signupformbox"]["cpass"].value; if (x==null x=="" x!=y) { alert("confirm password must be filled out and match with

2 return false; var x=document.forms["signupformbox"][" "].value; var var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) { alert("not a valid 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"> <div id="title"><a href="index.php"><img src="include/images/header.jpg" width="527" height="120" /></a> <script type="text/javascript" src="include/tinybox.js"></script> <div id="topnav"> <?php

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 id="facebook"><a href=" src="include/images/facebook.png" width="35" height="35" /></a><a href=" src="include/images/twitter bird.png" width="35" height="35" /></a> <?php if (empty($_get[menu]) $_GET[menu]=="about" $_GET[menu]=="freebies" $_GET[menu]=="contact" $_GET[menu]=="testimonial") echo "<div id='headerslide'>headerslide";?> <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' src='include/images/nav/nav_02_shop.png' width='106' height='27' /><img id='off'

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 id="subnav"> <div id="content"><?php include "include/menu.php";?>iklan web terkait <div id="push">iklan umum <div id="footer"> <div id="link"> <div id="bottomnav">iklan khusus <p style="font-family:agency FB;font-color:black; font-size:24px" ><marquee direction="left"> Copyright <blink class="blink">gaze.inc</blink> Production Waroenk Badjoe From Zero To Hero </marquee></p> </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>  <?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 "; $sql.= "WHERE u.us_id=n.us_id ";

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 id="newsinfo"> <div id="newscontent"> <?php <?php echo $row[nw_created]." ".$row[us_username];?>

8 //IMAGE echo "<img src='content/image/news/".$row[img_thumbnail]."' width='600px' height='100px' />"; echo "<p>"; //CONTENT $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 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>?> <?php //PAGE if ($newsrow > $max) { //jumlah halaman $pagerow = ceil($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>"; echo ""; else echo "<a href='index.php?menu=news&page=".($getpage + 1)."' > NEXT</a>"; //NEWS DETAIL else {?> <script type="text/javascript" src="include/jquery.min.js"></script> <script type="text/javascript" src="include/jquery.ketchup.js"></script> <script type="text/javascript" src="include/jquery.ketchup.messages.js"></script>

10 <script type="text/javascript" src="include/jquery.ketchup.validations.basic.js"></script> <?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)?> <div id="newstitle"><?php echo $row[nw_title]." ".$newsrow?> <div id="newsinfo"> <?php echo $row[nw_created]." By: ".$row[us_username];?> <div id="newscontent"> <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 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> ";

11  <?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 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 id="newspost"> <script type="text/javascript"> $(document).ready(function() { </script> ); $('#postcomment').ketchup(); <h4>leave your own comment</h4> <form method="post" id="postcomment" action="action.php?act=add_comment&news=<?php echo $_GET['id'];?>"> <p> <label for="name">name*</label><br/> <?php $row = myfetch("select us_username, us_ , 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> <label for=" "> *</label><br/> <?php if (logged_in()) echo "<input name=' ' id=' ' value='$row[us_ ]' tabindex='20' type='text' maxlength='64' readonly='readonly'/>"; else echo "<input name=' ' id=' ' value='' tabindex='20' type='text' maxlength='64' class='validate(required, )'/>";?> </p>

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/> <textarea name="comment" cols="45" rows="5" id="comment" tabindex="40" maxlength="255" class='validate(required, rangelength(2,255))'></textarea> </p> <p><input id="submit" value="submit" tabindex="50" type="submit"/></p> </form> <?php?> <div id="clear"> //About US// <div id="contenttitle">about Us <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> <p align="center"><a class="blacknav" width="50"><a class="m_item" width="50" href="contact.php" target="content"><img src="include/images/itmam.jpg" align="center" width="200px" height="250px" class="a"></a></br clear="left"></pre> <hr width="80%" align="center"> //CONTACT// <div id="contenttitle">contact <div id="menucontent"> <div align="center"><img src="include/images/follower.gif" width="173" height="183"> <a href=" target="content"><img src="include/images/logo_facebook-rgb- 7inch.jpg"/></a> <a href=" target="content"><img src="include/images/gmail_logo copy.jpg"/></a> <a href=" target="content"><img src="include/images/twitterlogo.jpg"/></a>

15 b. Tampilan Admin Interface <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>admin No Face Clothing</title> <style type="text/css"> body { #top { #title { margin:0px; padding:0px; text-align:center; background-color:#666; text-align:center; margin:0px; padding:0px; width:100%; height:200px; background-color:#333; border-bottom:1px solid #999; font-size:0px; padding:0px; margin:125px auto 0px auto; height:75px; width:600px;

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="top"> <div id="title">admin Gaze.inc Waroeng Badjoe <div id="form"> <form method="post" id="signin" action="action.php?act=sign_in">

17 <p> <label for="username">username/ </label><br/> <input name="username" id="username" value="" tabindex="10" type="text" maxlength="40"> </p> <p> <label for="password">password</label><br/> <input name="password" id="password" value="" tabindex="20" type="password" maxlength="40"> </p> <table width="100%"> <tr> <td width="50%"><label><input type="checkbox" value="rememberme" id="rememberme" />Remember Me</label></td> <td width="50%" align="right"><input id="login" value="login" tabindex="30" type="submit"></td> </tr> </table> </form> </body> </html> //POST NEWS// <div id="contenttitle">post NEWS <div id="contentpostnews"> <form method="post" id="postnews" action="#"> <p> Title*<br/> <input type="text" name="titlepost" id="titlepost" tabindex="10" maxlength="32"> </p> <p> <script type="text/javascript" src="include/tinyeditor.js"></script>

18 <textarea name="contentpost" id="contentpost" style="width:400px; height:200px"></textarea> <script type="text/javascript"> 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/> <input id="picturepost" type="file" name="nama_file" />

19 </p> <p> <input name="add" type="submit" value="add" /> </p> </form> //PEMESANAN// <div id="contenttitle">edit Invoice Information <div id="contentpostnews"> <script type="text/javascript" src="../include/jquery.min.js"></script> <script type="text/javascript" src="../include/jquery.ketchup.js"></script> <script type="text/javascript" src="../include/jquery.ketchup.messages.js"></script> <script type="text/javascript" src="../include/jquery.ketchup.validations.basic.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#edit_bank1').ketchup(); ); </script> <script type="text/javascript"> $(document).ready(function() { $('#edit_bank2').ketchup(); ); </script> <script type="text/javascript"> $(document).ready(function() { $('#edit_phone').ketchup(); ); </script> <?php $bank1 = myfetch("select * FROM noface.invoice WHERE inv_id='1'");?>

20 <form action="action.php?act=edit_bank1" method="post" name="edit_bank1" id="edit_bank1"> <table cellspacing="10"> <tr> <th scope="row">bank Name</th> <td><input name="name" type="text" class='validate(required)' value="<?php echo $bank1['inv_bank_name'];?>"></td> </tr> <tr> <th scope="row">no Rek</th> <td><input name="no_rek" type="text" class='validate(required)' value="<?php echo $bank1['inv_no_rekening'];?>"></td> </tr> <tr> <th scope="row">atas Nama</th> <td><input name="atas_nama" type="text" class='validate(required)' value="<?php echo $bank1['inv_memo'];?>"></td> </tr> <tr> <th scope="row">cabang</th> <td><input name="cabang" type="text" class='validate(required)' value="<?php echo $bank1['inv_bank_branch'];?>"></td> </tr> <tr> <th scope="row"> </th> <td><input name="update" type="submit" value="update"></td> </tr> </table> </form><br><br> <?php $bank2 = myfetch("select * FROM noface.invoice WHERE inv_id='2'");?> <form action="action.php?act=edit_bank2" method="post" name="edit_bank2" id="edit_bank2">

21 <table cellspacing="10"> <tr> <th scope="row">bank Name</th> <td><input name="name" type="text" class='validate(required)' value="<?php echo $bank2['inv_bank_name'];?>"></td> </tr> <tr> <th scope="row">no Rek</th> <td><input name="no_rek" type="text" class='validate(required)' value="<?php echo $bank2['inv_no_rekening'];?>"></td> </tr> <tr> <th scope="row">atas Nama</th> <td><input name="atas_nama" type="text" class='validate(required)' value="<?php echo $bank2['inv_memo'];?>"></td> </tr> <tr> <th scope="row">cabang</th> <td><input name="cabang" type="text" class='validate(required)' value="<?php echo $bank2['inv_bank_branch'];?>"></td> </tr> <tr> <th scope="row"> </th> <td><input name="update" type="submit" value="update"></td> </tr> </table> </form><br><br> <?php $phone = myfetch("select * FROM noface.invoice WHERE inv_id='3'");?> <form action="action.php?act=edit_phone" method="post" name="edit_phone" id="edit_phone"> <table cellspacing="10">

22 <tr> <th scope="row">telp</th> <td><input name="phone" type="text" class='validate(required)' value="<?php echo $phone['inv_phone'];?>"></td> </tr> <tr> <th scope="row">sms</th> <td><input name="sms" type="text" class='validate(required)' value="<?php echo $phone['inv_sms'];?>"></td> </tr> <tr> <th scope="row"> </th> <td><input name=" " type="text" class='validate(required, )' value="<?php echo $phone['inv_ '];?>"></td> </tr> <tr> <th scope="row"> </th> <td><input name="update" type="submit" value="update"></td> </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; minheight: 100%; height: auto!important; 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: px 20px; -webkit-border-radius: px 20px; border-radius: px 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; font-family:arial, Helvetica, sans-serif; fontweight:bold; #topnav #cart:hover { opacity:.5; #topnav #cartsum {position:absolute; right:75px; top:17px;

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 {backgroundcolor:#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; #subnav { margin:0px 20px 5px 20px; height:26px; background-color:#000;

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) norepeat 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; border-right:1px solid #000; borderbottom:1px solid #000; padding:0 #error.tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; borderradius:5px #success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; borderbottom: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; font-family:arial, Helvetica, sans-serif; fontweight:bold; width:150px;

26 #newsnav ul {list-style:none; #newsnav li a {display:block; padding:5px; text-decoration:none; color:#aaa ; backgroundcolor:#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; textalign: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; bordertop-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; backgroundcolor:#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; text-align:center; padding:5px; margin:5px; textdecoration:none; color:#fff; background-color:#06f; float:left; height:20px; width:20px; #productsize li.click {display:block; text-align:center; padding:5px; margin:5px; textdecoration: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; position:absolute; #pdinfo { padding:5px; background:#666; height:20px; width:170px; bottom:0px; #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; background-image:url(images/foot.jpg); backgroundposition:center; height:70px; #footnote { margin:0 20px 0 20px; text-align:center; line-height:30px; display:block; backgroundcolor:#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: px; #topnav {position:absolute; top:20px; right:20px; font-family:arial, Helvetica, sans-serif; fontsize: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; font-family:arial, Helvetica, sans-serif; fontweight: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:sresize #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; #footer {text-align:left; width:930px; margin:0 auto; background-color:#555; height:50px; clear:both;

31 2. DATA 2.1 Data ERD (Entity Relationship Diagram)

32 2.2 Data Proses Pengujian Pengujian Proses Manual dan Proses Aplikasi Dibawah ini adalah daftar transaksi percobaan distro GAZE.inc Clothing Company Waroeng Badjoe Percobaan Keterangan ke- 1 Menerima order penjualan Baju sebesar Rp Menerima Pembayaran cicilan Baju Rp Menerima order penjualan Sepatu sebesar Rp Menerima Pembayaran cicilan Sepatu Rp Menerima Pelunasan cicilan dari semua barang sebesar Rp 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 Username Password Tipe Masukan Kosong Huruf (A-Z,az+Angka) Kosong Huruf (A-Z,az+Angka) Keluaran yg diharapkan Hasil Keluaran Kesimpulan Muncul Pesan Muncul Pesan Username Tidak Username Tidak OK Boleh Kosong Boleh Kosong Berhasil Login Berhasil Login OK Muncul Pesan Muncul Pesan Password Tidak Password Tidak OK Boleh Kosong Boleh Kosong Berhasil Login Berhasil Login OK

33 b. Pengujian Web untuk Costumer Tabel Pengujian Login Costumer Nama Field Username Pasword Tipe Masukan Kosong Huruf (A-Z,az+Angka) Kosong Huruf (A-Z,az+Angka) Keluaran yg diharapkan Hasil Keluaran Kesimpulan Muncul Pesan Muncul Pesan Username Tidak Username Tidak OK Boleh Kosong Boleh Kosong Berhasil Login Berhasil Login OK Muncul Pesan Muncul Pesan Password Tidak Password Tidak OK Boleh Kosong Boleh Kosong Berhasil Login Berhasil Login OK

34 KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATARA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan Telp. (061) , , Fax. (061) 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 : 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 Drs. Suyanto, M.Kom. NIP

35 KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATARA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan Telp. (061) , , Fax. (061) Medan KARTU BIMBINGAN TUGAS AKHIR MAHASISWA Nama Mahasiswa : Muhammad Itmam Nomor Induk Mahasiswa : 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. 1. Tanggal Asistensi Bimbingan Pembahasan Pada Asistensi Mengenai Pada Bab Paraf Dosen Pembimbing Keterangan * Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai. Diketahui/Disetujui oleh Departemen Matematika FMIPA USU Ketua, Pembimbing, Prof. Dr. Tulus, M.Si., P.hD Drs. Suyanto, M.Kom. NIP NIP

LISTING PROGRAM. <?php include 'admin/koneksi.php';?>

LISTING PROGRAM. <?php include 'admin/koneksi.php';?>  LISTING PROGRAM 1. Index.php