LAMPIRAN. 1. Listing Program. a. Tampilan User Interface. Universitas Sumatera Utara
|
|
- Shavonne Shields
- 5 years ago
- Views:
Transcription
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> <!--TAG LIST / NEWS MENU--> <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> <!--ALL NEWS--> <?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 <!--PREF NEXT--> <?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';?> <!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
LISTING PROGRAM 1. Index.php
More informationMedia Stylesheets and Navigation with CSS goodness. Webpage Design
Media Stylesheets and Navigation with CSS goodness Webpage Design Printing web pages the problem Here s a nice enough website that is clearly designed for the screen. The links are there because they work
More informationWeb Authoring and Design. Benjamin Kenwright
CSS Div Layouts Web Authoring and Design Benjamin Kenwright Outline Review Why use Div Layout instead of Tables? How do we use the Div Tag? How to create layouts using the CSS Div Tag? Summary Review/Discussion
More informationCSS stands for Cascading Style Sheets Styles define how to display HTML elements
CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically
More informationNAVIGATION INSTRUCTIONS
CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU
More informationGIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.
GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question
More information{block:description} <meta name="description" content="{description}"/> {/block:description}
More information
LISTING PROGRAM. 1. Tampilan Awal. 2. Menu Login. Public Class Awal
LISTING PROGRAM 1. Tampilan Awal Public Class Awal Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick ProgressBar1.Increment(10) If ProgressBar1.Value
More informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More informationChapter 6: CSS Layouts
Chapter 6: CSS Layouts Learning Outcomes: Identify the four types of CSS positioning: static, relative, fixed and absolute Identify the use of CSS floats Be able to implement HTML and CSS to construct
More informationHoster: openload.co - Free PLUGIN_DEFECT-Error: 08d a1830b60ab13ddec9a2ff6
JDownloader - Bug #80273 Bug # 75914 (Closed): Hoster: openload.co - Free Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d9453425a1830b60ab13ddec9a2ff6 08/18/2016 02:13 AM - StatServ Status: Closed
More informationJSP files for OBAAS1.1:
JSP files for OBAAS1.1: ----------------------- Apart from JSP files, there is also one stylesheet file named "style.css". You need to create jsp files in the WebContent folder of your project. Also create
More informationKARTU BIMBINGAN TUGAS AKHIR MAHASISWA PEMBAHASAN PADA ASISTENSI MENGENAI, PADA BAB
62 KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jl. Bioteknologi No.1 Kampus USU Padang Bulan Medan 20155 Telp. (061) 8211050, 8214290, Fax (061)
More informationL A M P I R A N. Universitas Sumatera Utara
L A M P I R A N LAMPIRAN 1. Listing Program Aplikasi e-election Berbasis SMS Gateway index.php
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More informationUniversal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling
Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...
More informationJSP files for OBAAS1.2:
JSP files for OBAAS1.2: ----------------------- Apart from JSP files, there is also one stylesheet file named "style.css". You need to create jsp files in the WebContent folder of your project. Also create
More information12/9/2012. CSS Layout
Dynamic HTML CSS Layout CSS Layout This lecture aims to teach you the following subjects: CSS Grouping and nesting Selectors. CSS Dimension. CSS Display.. CSS Floating. CSS Align. 1 CSS Grouping and nesting
More informationDreamweaver: Portfolio Site
Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationHTML HTML5. DOM(Document Object Model) CSS CSS
HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif
More informationBy the end of this chapter, you will have a very basic, but fully functional blogging system.
C H A P T E R 5 Building the Entry Manager At this point, you know enough to start building your blog! In this chapter, I ll walk you through how to build the backbone of your blogging application. The
More informationCreating a Job Aid using HTML and CSS
Creating a Job Aid using HTML and CSS In this tutorial we will apply what we have learned about HTML and CSS. We will create a web page containing a job aid about how to buy from a vending machine. Optionally,
More informationSchool of Computer Science and Software Engineering
1. C 2. B 3. C B 4. B 5. B 6. B 7. C (should be getelementsbyid case sensitive) 8. A 9. B 10. D 11. B 12. A 13. A 14. D 15. C 16. D 17. A 18. C 19. A 20. D P a g e 2 of 13 Section B: Long Answer Questions
More informationConfiguring Hotspots
CHAPTER 12 Hotspots on the Cisco NAC Guest Server are used to allow administrators to create their own portal pages and host them on the Cisco NAC Guest Server. Hotspots created by administrators can be
More informationCSS means Cascading Style Sheets. It is used to style HTML documents.
CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style
More informationShowing results for contents of text-input area - Nu Html Checker
Nu Html Checker This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change Showing results for contents of text-input area Checker Input Show source outline
More informationKudos Solutions Ltd
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; html { min-height:100%; position:relative; font-size:62.5%; -webkit-text-size-adjust:none;
More informationMultimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3
Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows
More information5 Snowdonia. 94 Web Applications with C#.ASP
94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial
More informationBy: M. Qasim Nadeem. Menus. Top navigation IE only. <html> <head> <style> span. border:groove 2px; padding:3px; font-family:arial; font-size:12px;
Menus Top navigation IE only span border:groove 2px; padding:3px; font-family:arial; font-size:12px; width:100px; height:70px; background-color:#c0c0c0; position:relative; top:-80px;
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationCSS Weebly! td{ padding:20px}
CSS Weebly body{ background:black; margin-top:2%; margin-bottom:2%; margin-left:3%; margin-right:3%; border:1px solid grey; padding:10px; color:silver; line-height:150%; font-size:16px; text-decoration:none;
More informationModule 2 (VII): CSS [Part 4]
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More informationCS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov
More informationゼミ Wiki の再構築について 資料編 加納さおり
Wiki [ Fukuda Semi Wiki] [ 2 wiki] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] [ 8 ] [ 9 ] [ 10 ] [ 11 ] [ 12 ] [ 13 ] [ 14 Menu1] [ 15 Menu2] [ 16 Menu3] [ 17 wiki Menu] [ 18 TOP ] [ 19 ] [ 20 ] [ 20] [ 21 ] [ 22 (
More informationChapter 7 Building Website with HTML and CSS
Sungkyunkwan University Chapter 7 Building Website with HTML and CSS Prepared by J. Lee and H. Choo Web Programming Copyright 2000-2016 Networking Laboratory 1/54 Copyright 2000-2012 Networking Laboratory
More informationAN INTRODUCTION TO WEB PROGRAMMING. Dr. Hossein Hakimzadeh Department of Computer and Information Sciences Indiana University South Bend, IN
AN INTRODUCTION TO WEB PROGRAMMING Dr. Hossein Hakimzadeh Department of Computer and Information Sciences Indiana University South Bend, IN CONTENTS A bit of history Inline vs. Embedded vs. External Style
More informationChapter 6 CSS Layout and Animation
Sungkyunkwan University Chapter 6 CSS Layout and Animation Prepared by Y. Kim and H. Choo Web Programming Copyright 2000-2018 Networking Networking Laboratory Laboratory 1/87 Copyright 2000-2012 Networking
More informationSnapsis CSS NavMenu Development Guide
Snapsis CSS NavMenu Development Guide Overview This document outlines the Snapsis NavMenu Skin Object for the DotNetNuke portal system. This module supports any type of navigation through a template driven
More informationCreating Layouts Using CSS. Lesson 9
Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
More informationScriptaculous Stuart Halloway
Scriptaculous Stuart Halloway stu@thinkrelevance.com Copyright 2007, Relevance, Inc. Licensed only for use in conjunction with Relevance-provided training For permission to use, send email to contact@thinkrelevance.com
More informationKartu Bimbingan Tugas Akhir Mahasiswa
KEMENTRIAN PENDIDIKAN DAN KEBUDAYAAN UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No. 1 Kampus USU Padang Bulan Medan-20155 Telp. (061) 8214290, 8211212, 8211414
More informationINTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations
Hun Myoung Park (2/2/2018) Layout & Position: 1 INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations DCC5382 (2 Credits) Introduction
More informationWhat are all these divs? Some empty? No use of CSS Cascade (text-decoration) Duplicated properties (padding in navitem) Unreadable Messy
Site Redesign Building a site using semantic XHTML and CSS Analysis of existing markup Internal style sheet Poor names (not meaningful) Terribly poor CSS Style in with content Poor names Poor layout Messy
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationDynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015
Page 1 of 7 TalkersCode.com HTML CSS JavaScript jquery PHP MySQL Web Development Tutorials Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015 Share 4 Stum Tags:- Ajax jquery PHP MySQL
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More informationLAMPIRAN. Index.php. <?php. unset($_session["status"]); //session_destroy(); //session_destroy();
LAMPIRAN Index.php unset($_session["status"]); //session_destroy(); //session_destroy();?>
More informationblink.html 1/1 lectures/6/src/ form.html 1/1 lectures/6/src/
blink.html 1/1 3: blink.html 5: David J. Malan Computer Science E-75 7: Harvard Extension School 8: 9: --> 11:
More informationCIE-H12 Web page Sample
eztcp Technical Document CIE-H12 Web page Sample Version 1.0 2011-08-31 Sollae Systems Co., Ltd. http://www.sollae.co.kr Contents Contents 1 Overview... 3 1.1 Overview... 3 2 Default... 4 2.1 Simple Modification
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading
More informationChapter 5: The Box Model, Links, Lists and Tables
Chapter 5: The Box Model, Links, Lists and Tables Learning Outcomes: Be able to manipulate the appearance of HTML hyperlinks, lists and tables using CSS Identify the features of the CSS box model and how
More informationCSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax
CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets
More informationWeb Publishing Intermediate 2
Web Publishing Intermediate 2 Building a Three Column Site with divs and float Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 The CIG Web Site... 3 Using the Div
More informationSummary 4/5. (contains info about the html)
Summary Tag Info Version Attributes Comment 4/5
More information/******************** Tunable parameters: ********************/
1. Smartass2.c / drivers/cpufreq/cpufreq_smartass2.c Copyright (C) 2010 Google, Inc. This software is licensed under the terms of the GNU General Public License version 2, as published by the Free Software
More informationSigns of Spring App. Release Notes Version 1.0
Signs of Spring App Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen. On the right sidebar, click on Manage in the App Parameters area. Edit
More informationSEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS
SEEM4570 System Design and Implementation Lecture 1 Cordova + HTML + CSS Apache Cordova Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript E.g.
More informationImplementing a chat button on TECHNICAL PAPER
Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook
More informationLAMPIRAN. a. Kode Program Untuk Halaman Cari Data Proyek
LAMPIRAN 1. Kode Program a. Kode Program Untuk Halaman Cari Data Proyek
More informationHigher Computing Science
Higher Computing Science Web Design & Development Booklet 2A (of 3) Implementation Examples Contents Introduction Page What s included in this Booklet? 3 Implementation Stage 1 - Website Layout 4 Coding
More informationPsychology Experiments on the Web Using PHP and MySQL
Psychology Experiments on the Web Using PHP and MySQL Lisa M. DeBruine August 14, 2008 Contents 1 Basic Web Authoring 2 1.1 Setting up your webpage....................... 2 1.2 HTML.................................
More informationTechnical Guide Login Page Customization
Released: 2017-11-15 Doc Rev No: R2 Copyright Notification Edgecore Networks Corporation Copyright 2019 Edgecore Networks Corporation. The information contained herein is subject to change without notice.
More informationINTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations
Hun Myoung Park (1/26/2019) Cascading Style Sheets: 1 INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations ADC5030401 (2 Credits) Introduction
More informationPatron- Driven Expedited Cataloging Enhancement to WebPAC Pro
Patron- Driven Expedited Cataloging Enhancement to WebPAC Pro Prepared by Steven Bernstein Project Description This enhancement to the Innovative Millennium ILS provides users with a direct method for
More informationHTML & CSS Cheat Sheet
1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and
More informationCSS. M hiwa ahamad aziz Raparin univercity. 1 Web Design: Lecturer ( m hiwa ahmad aziz)
CSS M hiwa ahamad aziz www.raparinweb.fulba.com Raparin univercity 1 What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve
More informationBackground. [pic] Changing the Appearance of the Sakai 2.1 Portal BACKGROUND 1 CREATING A SKIN 2. The mast head 8 Login framework 9 The tabs 10
[pic] Changing the Appearance of the Sakai 2.1 Portal BACKGROUND 1 CREATING A SKIN 2 GETTING STARTED 3 THE PORTAL 4 THE SITE NAVIGATION 6 The mast head 8 Login framework 9 The tabs 10 THE SITE AREA 11
More informationTLN Hover Menu Up to 3 or More Levels
TLN Hover Menu Up to 3 or More Levels Applies to: This article applied to EP 7.0 EHP1 SP6. Summary We already have documents/codes for implementation of 2 level hover menu in TLN. This document provides
More informationif(! list.contains(list.collect(params,'key'),'title')){ <div style="font-weight:bold;color:red;">"warning: A title field must be assigned.
/** Author: Blake Harms Version 2.9 See: http://developer.mindtouch.com/app_catalog/ Integrated_Bug_and_Issue_Tracker on 2.9 added performance tunning posted by Sego on this blog post: http://forums.developer.mindtouch.com/
More information"utf-8";
http://salsa-copacabana.com/css/import.css @charset "Shift_JIS"; /* ------------------------------------------ File name: import.css Style Info: CSS screen Windwos IE4 ------------------------------------------
More informationChapter 7: Advanced CSS
Chapter 7: Advanced CSS Learning Outcomes: Identify the importance of CSS specificity and the order of precedence in which it is applied Be able to implement HTML and CSS to construct an advanced three-columned
More informationChapter 3 CSS for Layout
Chapter 3 CSS for Layout Chapter two introduced how CSS is used to manage the style of a webpage, this chapter explores how CSS manages the layout of a webpage. Generally a webpage will consist of many
More informationCSS Scripting and Computer Environment - Lecture 09
CSS Scripting and Computer Environment - Lecture 09 Saurabh Barjatiya International Institute Of Information Technology, Hyderabad 1 st October, 2011 Contents 1 CSS stands for Cascading Style Sheets Styles
More informationPaper Phil Mason, Wood Street Consultants
ABSTRACT Paper 1711-2018 My Top 10 ways to use SAS Stored Processes Phil Mason, Wood Street Consultants SAS Stored Processes are a powerful facility within SAS. Having recently written a book about SAS
More informationAdvance CSS. Example: CSS Animation
Advance CSS Example: CSS Animation width:100px; height:100px; background:red;
More informationTitle: Dec 11 3:40 PM (1 of 11)
... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each
More informationPratikum 8. Membuat Transaksi Penjualan
Pratikum 8 Membuat Transaksi Penjualan Transaksi adalah Hubungan tabel satu dengan yang lain menjadi sebuah form, di dalam form tersebut mengambil beberapa field dari tabel lain sehingga menjadi satu inputan.
More informationCS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013
CS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013 Part I. (50%) Multiple Guess Choice. 1. What does CSS stand for? a. Creative Style Sheets b. Computer Style Sheets c. Cascading Style
More informationhome.php 1/1 lectures/6/src/ include.php 1/1 lectures/6/src/
home.php 1/1 3: * home.php 5: * A simple home page for these login demos. 6: * David J. Malan 8: * Computer Science E-75 9: * Harvard Extension School 10: */ 11: // enable sessions 13: session_start();
More informationA designers guide to creating & editing templates in EzPz
A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page
More informationANSWER KEY Final Examination CIS 228: The Internet Prof. St. John Lehman College City University of New York 22 May 2008
ANSWER KEY Final Examination CIS 228: The Internet Prof. St. John Lehman College City University of New York 22 May 2008 1. True or False: (a) T is an example of an empty tag. (b) F You can only
More informationAdvanced Web Design 1
Advanced Web Design 1 Review of HTML General HTML Page Template Can be created in any text editor (Word, Wordpad, Notepad, etc.) The title that
More informationBABU BANARASI DAS NORTHERN INDIA INSTITUTE OF TECHNOLOGY
WORKSHOP REPORT ON PYTHON DEPARTMENTS OF COMPUTER SCIENCE & ENGINEERING / INFORMATION TECHNOLOGY (CSE/IT - 2 ND YEAR) BABU BANARASI DAS NORTHERN INDIA INSTITUTE OF TECHNOLOGY PROGRAMMING THROUGH PYTHON
More information1. HTML: <head> <link rel="stylesheet" type="text/css" href="example.css"> </head> <body> <p>this is a paragraph</p> </body> CSS: p{ color: red;
1 2 3 1. HTML: this is a paragraph CSS: p{ color: red; foto-size: 120%; 2. p { color: red;
More informationFirst Diploma Unit 10 Client Side Web. Week 4 CSS and Images
First Diploma Unit 10 Client Side Web Week 4 CSS and Images Last Session CSS box model Concept of identity - id This Session External style sheets Using CSS in conjunction with images Introduction External
More informationCSS: Cascading Style Sheets
CSS: Cascading Style Sheets BASICS, SELECTORS, BOX MODEL, PAGE LAYOUT Laura Farinetti - DAUIN Summary Introduction CSS syntax CSS selectors CSS cascading CSS box model CSS positioning schemes Page layout
More informationZen Garden. CSS Zen Garden
CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS
More informationWeb Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More informationART170. The ART170 Final Project
The Final Project TABLE OF CONTENTS Define the site and set up the layout pg. 2 Ordering and externalizing the style sheet pg. 2 Creating the template pg. 3 Generating pages from the template pg. 4 Updating
More informationCreate a cool image gallery using CSS visibility and positioning property
GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide
More information/* ========================================================================== PROJECT STYLES
html { box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; img { max-width: 100%; border: 0; audio, canvas, iframe, img, svg, video { vertical-align: middle; /* Remove gaps between elements
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More informationVebra Search Integration Guide
Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS... 5 DIV#s-container
More informationXHTML & CSS CASCADING STYLE SHEETS
CASCADING STYLE SHEETS What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version
More information