Pemograman Web Dinamis (Catalog) PHP dan MySql

hae… lama tak posting..dan kali ini aku kudu posting demi nilai salah satu mata kuliah yang sulit aku ungkapkan πŸ™‚
postingan kali ini berbasis PHP dan MYSQL, dan ini merupakan hasil kerja keras aku dkk (dkk = dulu kurang kerjaan not dan kawan-kawan) *eh
yang pastinya postingan ini merupakan tugas kelompok ku -_-
langsung aja deh.. ke TKP
seperti biasa dan sudah kewajibannya kalau mau coding harus persiapkan tools bisa pakek Paint kalau teman-teman pada selo πŸ™‚
karna aku lagi ndak selo jadi pakeknya SU*LIME TEXT
nah pertama-tama sebagai pembuka, buatlah sebuah databases dengan nama *project_pwd (*tidak direkomendasikan)
kemudian isilah databases dengan tabel dan isi tabel sbb :
1. produk : idproduk int(11) pk , nama_produk varchar(35) , foto varchar(25) , deskripsi text , harga double ,
merek varchar(50).
2. transaksi : kd_transaksi varchar(6) , tgl_transaksi date , total_bayar double , nama_pelanggan varchar(50) ,
alamat varchar(255).
3. transaksi_detail : no int(4) , kd_transaksi varchar(6) , idproduk int(11) , jumlah int(11).

nah kalau databases beserta isinya udah dibuat..kita lanjut untuk buat scriptnya πŸ™‚
buat sebuah file kerja dengan nama *index.php

dan jangan lupa download Bootstrap, karena disini aku menambahkan CSS yang sudah dibuat teman seperjuangan ku @nananinanisa
silahkan download disini untuk template nyaΒ http://bit.ly/13bVYoO
fungsinya untuk menampilkan halaman pertama kali saat mengunjungi web…bisa dibilang berandanya
kemudian copas lah script dibawah ini… *saran biar cakep silahkan ketik sendiri aja…kalau selo -_-


<?php
 include "koneksi.php";
 ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>TP PWD</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="">
 <meta name="author" content="">

<!-- Le styles -->
 <link href="css/bootstrap.css" rel="stylesheet" />
 <link href="css/style.css" rel="stylesheet" />

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
 <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

<!-- Le fav and touch icons -->
 <link rel="shortcut icon" href="../assets/ico/favicon.ico">
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
 <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
 </head>

<body>

<div class="container">
 <div class="row">
 <div class="span12">

<div class="navbar">
 <div class="navbar-inner">
 <div class="container">
 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </a>
 <a class="brand" href="#">TP Pemrograman Web</a>
 <div class="nav-collapse">
 <ul class="nav">
 <li class="active"><a href="index.php">Home</a></li>
 <li><a href="#">Profil</a></li>
 <li><a href="#">Shop</a></li>

</ul>

<form class="navbar-search pull-left" action="" novalidate="novalidate">
 <input type="text" class="search-query span2" placeholder="Search">
 </form>
 </div><!-- /.nav-collapse -->
 </div>
 </div><!-- /navbar-inner -->
 </div>

</div>

</div>
 <div class="row">
 <div class="span12">
 <div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
 <div class="item active">
 <img src="img/slide.jpg" alt="">
 <div class="carousel-caption">
 <h4>First Thumbnail label</h4>
 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 </div>
 </div>

<div class="item">
 <img src="img/slide.jpg" alt="">
 <div class="carousel-caption">
 <h4>Second Thumbnail label</h4>
 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 </div>
 </div>

</div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
 </div>
 </div>

</div>

<div class="row content">

<div class="span12">
 <ul class="thumbnails shop">
 <?php
 //bata paging
 require_once('koneksi.php');
 $query="SELECT * from produk order by idproduk desc";
 $result=mysql_query($query) or die(mysql_error());
 $no=1;
 //proses menampilkan data
 while($rows=mysql_fetch_object($result)){
 ?>
 <li class="span3">
 <div class="thumbnail pagination-centered">
 <h4><a href="#"><?=$rows -> merek;?>&nbsp;<?=$rows -> nama;?></a></h4>
 <hr class="lessspace" />
 <img src="image/<?=$rows->foto?>" alt=""/>
 <p>
 <a>
 <i class="icon-shopping-cart icon-white"></i> Harga Rp.<?=$rows -> harga;?>,00
 <p><?php echo $rows->deskripsi; ?></p>
 </a>
 </p>
 <p>
 <a class="btn btn-small btn-block btn-primary"
 href="pesan.php?idproduk=<?php echo $row->idproduk;?>">
 <i class="icon-shopping-cart icon-white"></i> Beli
 </a>
 </p>
 </div>
 </li>
 <?
 $no++;
 }?>
 </ul>

</div>

</div>

<div class="row footer">

<div class="span12 clearmarg" id="testimonial">

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">

<div class="item active">
 <div class="row box center">
 <div class="span4 marg5">
 <p>Ahsan Anwar S.</p>
 <p>10018133</p>
 <p> <a href="#"><i class="icon-big icon-facebook-sign"></i> Facebook </a>
 <a href="#"><i class="icon-big icon-twitter-sign"></i> Twitter </a> </p>

</div>
 <div class="span4 marg5">
 <p>Annisa Nur Isnaini S.</p>
 <p>10018152</p>
 <p> <a href="#"><i class="icon-big icon-facebook-sign"></i> Facebook </a>
 <a href="#"><i class="icon-big icon-twitter-sign"></i> Twitter </a> </p>

</div>
 <div class="span4 marg5">
 <p>Merlinda Wibowo</p>
 <p>10018160</p>
 <p> <a href="#"><i class="icon-big icon-facebook-sign"></i> Facebook </a>
 <a href="#"><i class="icon-big icon-twitter-sign"></i> Twitter </a> </p>

</div>
 </div>
 </div>

<div class="item">
 <div class="row box center">
 <div class="span4 marg5">
 <p>Dimas Ragil T.</p>
 <p>10018203</p>
 <p> <a href="#"><i class="icon-big icon-facebook-sign"></i> Facebook </a>
 <a href="#"><i class="icon-big icon-twitter-sign"></i> Twitter </a> </p>
 </div>
 <div class="span4 marg5">
 <p>Rio Herdian P.</p>
 <p>10018213</p>
 <p> <a href="#"><i class="icon-big icon-facebook-sign"></i> Facebook </a>
 <a href="#"><i class="icon-big icon-twitter-sign"></i> Twitter </a> </p>
 </div>
 <div class="span4 marg5">
 <p>TP Pemrograman Web Dinamis</p>

</div>
 </div>
 </div>

</div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"> &rsaquo;</a>
 </div>

</div>

</div>

<div class="row">
 <div class="span12">
 <p align="center">Copyright &copy;2012 TP PWD </p>
 </div>

</div>

</div>

<!-- Le javascript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.js"></script>
 <script src="js/script.js"></script>

</body>
 </html>

nah tampilannya nanti seperti ini

 

oke *tengs…sampai disini dulu…

Advertisements

2 thoughts on “Pemograman Web Dinamis (Catalog) PHP dan MySql

    • maaf mas baru bisa ngeblog lagi.
      oh iya aneh nya dimana.?

      di <link href="css/style.css" rel="stylesheet" />
      dengan ini <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

      ya..?
      atau yang mana mas?
      mungkin saya ada yang khilaf dikit πŸ™‚

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s