Aplikasi Web Coffee Shop Bandung Toast & Coffee Berbasis Multimedia Menggunakan PHP

(1)

Listing Program

Halaman Home(index.php)

<?php

require_once'config.php'; ?>

<!DOCTYPE html> <html lang="en">

<head>

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

$(window).load(function() {

$('.flexslider').flexslider({

animation: "slide"

});

Shadowbox.init(); });

</script>

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

<body>

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

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></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>

(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'; ?>

<head>

</head> <body>

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

(4)

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

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

(5)

<li><a

href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li>

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

<head>

</head> <body>

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

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

<li><a

Detail Snack

<?php

(7)

$result = mysql_query($q);

$row = mysql_fetch_object($result); ?>

<head>

</head> <body>

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

(8)

<li><a href="#">Twitter</a></li> <li><strong>|</strong></li>

Halaman News

<?php

$q = "SELECT * FROM tbl_news WHERE id='$id'"; $result = mysql_query($q);

<head>

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

</div>

<li><a

Detail News

<?php

$q = "SELECT * FROM tbl_news WHERE id='$id'"; $result = mysql_query($q);

(10)

<body>

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

</div>

<li><a

(11)

Halaman About

<head>

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>

<body>

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

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

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

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

margin:0 0 15px 0; float:left;

font-size:28px; }

(16)

{

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 {

margin:0 30px 0 0; }

.detailproduct h1 {

margin:0 0 30px 0; font-size:55px; float:left;

(17)

.detailproduct h3 {

margin:0 0 15px 0; float:left;

font-size:18px; color:#999;

word-spacing:8px; }

.detailproduct p {

font-family:AstuteSSi; font-size:16px;

text-align:justify; word-spacing:2px; color:#716f6f; }

.footer {

margin:15px 0 0 0;

background:url(img/footerline.png) no-repeat; }

#highlight {

margin:30px 0 30px 0; }

.linespacing {

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

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 {

(19)

#navfooter {

list-style:none; margin:20px 0 0 0; }

#navfooter a, #navfooter li {

float:left;

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 {

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 {

font-family:helvetica; font-size:12px;

margin:-115px 0 0 215px; word-spacing:5px;

float:left;

word-spacing:normal; }

.newstb {

(21)

margin:0 15px 30px 0; }

.newstb p {

margin:-15px 0 30px 0; }

#photoabout {

width:960px; height:235px; margin:0 0 15px 0; float:left;

}

#tbproduct {

margin:0 15px 30px 0;

}

#tbproduct img {

margin:0 10px; }

#tbproduct h1 {

margin:0 0 15px;

(22)

#tbproduct h3 {

margin:0 0 10px;

word-spacing:5px; color:#a1a1a1; }

#tbproduct p {

heigt:90px;

font-family:Helvetica; font-size:14px;

color:#a1a1a1; word-spacing:1px; text-align:justify; }

#titlepage {