Aplikasi Web Coffee Shop Bandung Toast & Coffee Berbasis Multimedia Menggunakan PHP
Listing Program
Halaman Home(index.php)<?php require_once'config.php'; ?> <!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8" /> <link rel="stylesheet" href="reset.css" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="flexslider.css" /> <link rel="stylesheet" href="jquery/shadowbox/shadowbox.css"/> <script src="jquery/shadowbox/shadowbox.js"></script> <script src="jquery/jqueryflexider.min.js"></script> <script src="jquery/jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8">
$(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> <li><a class="active" href="index.php">Home</a></li> </ul>
<div class="clear"></div> <?php
$q='SELECT * FROM tbl_home' ; $r=mysql_query($q); while($f=mysql_fetch_object($r)){
?> <div class="flexslider">
<ul class="slides"> <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;}?>" rel="shadowbox['1']" title="image 1" > <img src="<?php {echo $f->thumbnail_tiga;}?>"/></a></li> <li><a href="<?php {echo $f->image_empat;}?>" rel="shadowbox['1']" title="image 1" > <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>
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" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../style.css" /> <title>Bandung Toast Coffee Shop</title> </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 class="active" href="index.php">Product</a></li>
<li><a href="../index.php">Home</a></li> </ul> <div class="clear"></div> <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;}?>"/> <a href="../detailcoffee/index.php?id=<?php {echo $r- >id;}?>"><h1><?php {echo $r->nama;}?></h1></a> <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> <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 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" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../style.css" /> <title>Bandung Toast Coffee Shop</title> </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> <div id="coffee"><a href="../product"><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> <div class="detailproduct">
<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']; $q = "SELECT * FROM tbl_snack WHERE id='$id'";
$result = mysql_query($q); $row = mysql_fetch_object($result); ?> <!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../style.css" /> <title>Bandung Toast Coffee Shop</title> </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> <div id="coffee"><a href="../product"><img src="../img/coffeeunactive.png"/></a></div> <div id="snack"><a href="../snack"><img src="../img/snackactive.png"/></a></div> <div class="clear"></div> <div class="linespacing"></div> <div class="detailproduct">
<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>
<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>
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" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../style.css" /> <title>Bandung Toast Coffee Shop</title> </head> <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 class="active" href="index.php">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> <div class="linespacing"></div>
<div class="detailnews"> <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>
<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 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" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../style.css" /> <title>Bandung Toast Coffee Shop</title> </head> <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> <div class="linespacing"></div>
<div class="detailnews"> <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>
<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>
Halaman About
<!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../style.css" /> <script src="../jquery/jquery.js"></script> <script src="../jquery/jqFancyTransitions.1.7.min.js"></script> <script>
$(document).ready(function(){ $('#photoabout').jqFancyTransitions({ width:'960', height:'235', time:'1000', effect:'slide', stripes:'24'
}); });
</script> <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> <div class="clear"></div> <div id="titlepage"><h1 align="right">About Us</h1></div>
<div class="linespacing"></div> <div id="photoabout"> <img src="../img/photoabout.jpg" /> <img src="../img/photoabout2.jpg" /> <img src="../img/photoabout3.jpg" /> </div> <div id="contentabout"> <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 class="clear"></div> <div id="titlepage"><h1 align="right">Contact Us</h1></div> <div class="linespacing"></div> <div class="map"> <div id="maphover"></div> <div id="mapicon"><img src="../img/mapicon.png" alt="icon"/></div> </div> <ul id="contact"> <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> <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>
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
{ 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;
}
#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
{ 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;
}
.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; 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;
}
#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 { color:#EF8B45;
} #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; 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;
}
#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;
}