Listing Program. Halaman Home(index.php) <?php require_once'config.php';?>

(1)

Listing Program Halaman Home(index.php) <?php require_once'config.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

href="jquery/shadowbox/shadowbox.css"/>

$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); Shadowbox.init(); }); </script>

<title>Bandung Toast Coffee Shop</title> </head>

<body>

<img src="img/headimage.jpg" alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="about">About</a></li> <li><a href="news">News</a></li> <li><a href="product">Product</a></li>

(2)

<div class="clear"></div> <?php

$q='SELECT * FROM tbl_home' ; $r=mysql_query($q);

while($f=mysql_fetch_object($r)){ ?>

<li><a href="<?php {echo $f->image_satu;}?>" rel="shadowbox['1']" title="image 1" >

<img src="<?php {echo $f->thumbnail_satu;}?>"/></a></li> <li><a href="<?php {echo $f->image_dua;}?>"

rel="shadowbox['1']" title="image 1" >

<img src="<?php {echo $f->thumbnail_dua;}?>"/></a></li> <li><a href="<?php {echo $f->image_tiga;}?>"

<img src="<?php {echo $f->thumbnail_tiga;}?>"/></a></li> <li><a href="<?php {echo $f->image_empat;}?>"

<img src="<?php {echo $f->thumbnail_empat;}?>"/></a></li>

</ul> </div> <?php } ?> <div class="clear"></div> <div class="footer"></div> <ul id="navfooter">

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="#">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html>

(3)

Config PHP <?php $host= "localhost" ; $user= "root" ; $password= ""; $db = "db_btc" ;

$connect=mysql_connect($host, $user, $password)or die("cant connect database");

$select=mysql_select_db($db,$connect)or die("cant select db");

if($select){echo'';}

else{echo 'blom nyambung';} ?>

Halaman Product (Coffee) <?php require_once'../config.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

</head> <body>

<img src="../img/headimageproduct.jpg" alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="../about">About</a></li> <li><a href="../news">News</a></li>

(4)

<div id="coffee"><a href="index.php"><img src="../img/coffeeactive.png"/></a></div> <div id="snack"><a href="../snack"><img src="../img/snackunactive.png"/></a></div> <div class="clear"></div> <div class="linespacing"></div> <?php if(empty($_GET['name'])){ $sql = "SELECT * FROM tbl_coffee"; }else{

$sql = "SELECT * FROM tbl_shop WHERE name='$nama'"; } $result = mysql_query($sql); while ($r = mysql_fetch_object($result)){ ?> <div id="tbproduct">

<img src="<?php {echo $r->thumbnail;}?>" alt="<?php {echo $r->nama;}?>" title="<?php {echo $r->nama;}?>"/>

<h3>

Hot : Rp <?php {echo $r->harga_hot;}?>

<br>

Cold : Rp <?php {echo $r->harga_cold;}?> </h3> <p><?php {echo $r->ringkasan;}?></p> </div> <?php } ?> <div class="clear"></div> <div class="footer"></div> <ul id="navfooter">

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li>

(5)

<li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Detail Coffee <?php require_once '../config.php'; $id = $_GET['id'];

$q = "SELECT * FROM tbl_coffee WHERE id='$id'"; $result = mysql_query($q); $row = mysql_fetch_object($result) ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

</head> <body>

<img src="../img/headimageproduct.jpg" alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="../about">About</a></li> <li><a href="../news">News</a></li> <li><a href="../product">Product</a></li> <li><a href="../index.php">Home</a></li> </ul> <div class="clear"></div>

(6)

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->nama;}?>" title="<?php {echo $row->nama;}?>"/> <h1><?php {echo $row->nama;}?></h1>

<h3>

Hot : Rp <?php {echo $row->harga_hot;}?>

<br>

Cold : Rp <?php {echo $row->harga_cold;}?> </h3> <p><?php {echo $row->deskripsi;}?> </p> </div> <div class="clear"></div> <div class="footer"></div> <ul id="navfooter">

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Detail Snack <?php require_once '../config.php'; $id = $_GET['id'];

(7)

$result = mysql_query($q); $row = mysql_fetch_object($result); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

</head> <body>

<img src="../img/headimageproduct.jpg" alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="../about">About</a></li> <li><a href="../news">News</a></li> <li><a href="../product">Product</a></li> <li><a href="../index.php">Home</a></li> </ul> <div class="clear"></div>

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->nama;}?>" title="<?php {echo $row->nama;}?>"/> <h1><?php {echo $row->nama;}?></h1>

<h3>

Price : Rp <?php {echo $row->harga;}?>

</h3> <p><?php {echo $row->deskripsi;}?></p> </div> <div class="clear"></div> <div class="footer"></div>

(8)

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="#">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Halaman News <?php require_once '../config.php'; $id = $_GET['id'];

$q = "SELECT * FROM tbl_news WHERE id='$id'"; $result = mysql_query($q); $row = mysql_fetch_object($result); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

<body>

<li><a href="../about">About</a></li>

<li><a class="active" href="index.php">News</a></li> <li><a href="../product">Product</a></li>

(9)

</ul>

<div id="titlepage"><h1 align="right">Coffee Break</h1></div>

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->title;}?>" title="<?php {echo $row->title;}?>"/> <h1><?php {echo $row->title;}?></h1>

<h3>Sumber : <?php {echo $row->sumber;}?></h3>

<p><?php {echo $row->deskripsi;}?></p>

</div>

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Detail News <?php require_once '../config.php'; $id = $_GET['id'];

$q = "SELECT * FROM tbl_news WHERE id='$id'"; $result = mysql_query($q); $row = mysql_fetch_object($result); ?> <!DOCTYPE html> <html lang="en"> <head>

(10)

<body>

<img src="../img/headimagenews.jpg" alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="../about">About</a></li> <li><a href="../news">News</a></li> <li><a href="../product">Product</a></li> <li><a href="../index.php">Home</a></li> </ul> <div class="clear"></div>

<div id="titlepage"><h1 align="right">Coffee Break</h1></div>

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->title;}?>" title="<?php {echo $row->title;}?>"/> <h1><?php {echo $row->title;}?></h1>

<h3>Sumber : <?php {echo $row->sumber;}?></h3>

<p><?php {echo $row->deskripsi;}?></p>

</div>

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul>

(11)

</div> </body> </html> Halaman About <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

<title>Bandung Toast Coffee Shop</title> </head> <body> <img src="../img/headimageabout.jpg"alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi">

<li><a class="active" href="index.php">About</a></li> <li><a href="../news">News</a></li>

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

(12)

<h1><strong>Bandung Toast & Coffee</strong></h1> <p>

Bandung Toast & Coffee adalah sebuah gerai kopi yang menyediakan aneka minuman coffee yang berdiri tahun 2012, saat ini bekerjasama dengan salah satu restorant dimedan, yaitu restorant srikandi yang terletak di jalan Merak Medan sunggal. Bandung Toast & coffee tidak hanya menyediakan minuman namun juga tersedia snack. Minuman kopi yang disajikan diracik oleh kopi pilihan dan bahan pendukung yang berkualitas. sehingga terasa kopi yang pas untuk lidah dan lambung anda.

</p> </div>

<div id="titlepage"><h1 align="right">Contact Us</h1></div> <div class="linespacing"></div>

</div>

<li>Address : Restorant Srikandi, Jln. Merak,

Medan Sunggal</li><br>

<li>Phone Number : +6281361332823 /

+6283199653033</li><br>

<li>Email :

Bandungtoastcoffee@yahoo.com</li><br>

<li>Facebook : Bandung Toast & Coffee</li><br> <li>Twitter : @Bdg_toastcoffee</li><br>

<li>Instagram : @Bandungtoastcoffee</li> </ul>

(13)

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Style CSS body {

background:#fff url(img/bg.png) no-repeat; background-color:#fff;

background-position:bottom;

font-family:Helvetica Neue, Helvetica, Arial; font-size:10px; } #content { margin:0 auto; width:960px; } .clear

(14)

{ clear:both; } #coffee { width:60px; height:30px; float:right; margin:-15px 230px 30px 0; } #snack { width:60px; height:30px; float:right; margin:-15px -190px 0 0; } #contact { width:480px; margin:0 0 0 15px; list-style:none; float:right; font-size:13px; font-family:AstuteSSi; letter-spacing:2px; } #contentabout { width:960px; height:175px; margin:0 0 0 10px; float:left; }

(15)

#contentabout h1 { font-family:AvantGardEF-ExtraLight; font-size:40px; margin:0 0 10px 0; } #contentabout p { height:175px; font-family:Aliquam; font-size:16px; letter-spacing:2px; text-align:justify; } .detailnews { width:960px; height:300px; } .detailnews img { width:400px; height:300px; float:left; margin:0 30px 0 0; } .detailnews h1 { width:530px; height:35px; margin:0 0 15px 0; float:left; font-size:28px; } .detailnews h3

(16)

{ width:530px; height:10px; float:left; margin:0 0 15px 0; font-size:14px; } .detailnews p { width:530px; height:225px; float:left; font-size:11px; font-family:Helvetica; text-align:justify; word-spacing:2px; } .detailproduct { wiidth:960px; height:300px; } .detailproduct img { width:400px; height:300px; float:left; margin:0 30px 0 0; } .detailproduct h1 { width:530px; height:60px; margin:0 0 30px 0; font-size:55px; float:left; }

(17)

.detailproduct h3 { width:530px; height:50px; margin:0 0 15px 0; float:left; font-size:18px; color:#999; word-spacing:8px; } .detailproduct p { width:530px; height:145px; float:left; font-family:AstuteSSi; font-size:16px; text-align:justify; word-spacing:2px; color:#716f6f; } .footer { width:960px; height:25px; margin:15px 0 0 0; background:url(img/footerline.png) no-repeat; } #highlight { width:960px; height:250px; margin:30px 0 30px 0; } .linespacing { background:url(img/line.png) no-repeat; width:960px;

(18)

height:5px; margin:0 0 15px 0; } #logo { background:url(img/logo.jpg) no-repeat; width:300px; height:80px; float:left; margin:30px 0 30px 0; } .map { width:465px; height:255px; background:url(img/map.png) no-repeat; float:left; } #maphover { background:url(img/maphover.png) no-repeat; width:268px; height:94px; float:left; margin:70px 0 0 126px; opacity:0.1; } #maphover:hover { opacity:1; } #mapicon { width:45px; height:50px; margin:171px 0 0 124px; }

(19)

#navfooter { list-style:none; margin:20px 0 0 0; } #navfooter a, #navfooter li { float:left; font-family:AstuteSSi; font-size:14px; color:#7d7d7d; margin:0 15px 30px 25px; } #navfooter a:hover { color:#3d3c3c; } #navigasi { margin:25px 0 30px 0; list-style:none; float:right; } #navigasi li { margin:30px 0 0 60px; float:right; font-size:23px;

font-family:"Abrazo Script SSi"; }

#navigasi li a {

(20)

}

#navigasi li a:hover, #navigasi li a.active { color:#703B30; font-weight:1000; } #newscontent { width:465px; height:150px; margin:15px 15px 15px 0; float:left; } #newscontent h1 { width:250px; font-family:Helvetica; font-size:18px; float:right; margin:15px 0 0 0; } #newscontent p { width:240px; height:150px; font-family:helvetica; font-size:12px; margin:-115px 0 0 215px; word-spacing:5px; float:left; word-spacing:normal; } .newstb { width:225px; height:180px; float:left;

(21)

margin:0 15px 30px 0; } .newstb p { font-family:AvantGardEF-ExtraLight; font-size:14px; margin:-15px 0 30px 0; } #photoabout { width:960px; height:235px; margin:0 0 15px 0; float:left; } #tbproduct { width:465px; height:200px; float:left; margin:0 15px 30px 0; } #tbproduct img { width:200px; height:200px; float:left; margin:0 10px; } #tbproduct h1 { margin:0 0 15px; font-family:AstuteSSi; font-size:30px; word-spacing:5px; }

(22)

#tbproduct h3 { margin:0 0 10px; font-family:AvantGardEF-ExtraLight; font-size:18px; word-spacing:5px; color:#a1a1a1; } #tbproduct p { heigt:90px; font-family:Helvetica; font-size:14px; color:#a1a1a1; word-spacing:1px; text-align:justify; } #titlepage { font-family:AvantGardEF-ExtraLight; font-size:24px; color:#CCC; }