Membuat Katalog Produk dengan PHP MySQL

Kali ini, kita akan membuat katalog produk dengan menggunakan Twitter Bootsrap, PHP dan MySQL. Bagi yang belum tahu, Twitter bootstrap adalah CSS framework (template CSS) yang didesain secara modern, cantik dan cocok untuk aplikasi web2.0 tanpa harus susah payah belajar CSS. Untuk praktik kali ini kita akan menggunakan tabel produk dengan data smartphone terbaru beserta gambar dan harganya.

Katalog yang akan kita buat ada 3 variasi yaitu simple tabel, list dan thumbnail. Sebelum lebih lanjut, perlu diketahui bahwa membuat katalog sebenarnya sama dengan menampilkan data seperti biasa, peredaannya pada tata letaknya saja.

Simple tabel

Cocok dipakai untuk data yang sangat banyak namun tampilan gambar tidak terlalu penting.

Source code

<?php
$query=" SELECT * from  produk ";

$result=mysql_query($query) or die(mysql_error());
$no=1;
//proses menampilkan data
while($rows=mysql_fetch_object($result)){
			?>
<tr>
<td><?=$no;?></td>
<td><?=$rows -> merek;?></td>
<td><?=$rows -> nama;?></td>
<td><span class="label label-success">Rp. <?=$rows -> harga;?>,00</span></td>
<td><a href="index.php?mod=chart&pg=chart&action=add&id=<?=$rows->idproduk?>" class=btn > 
<i class='icon-shopping-cart'></i>beli</a></td>
</tr>
<?
$no++;
}?>

Tampilan List

Tampilan ini berisi gambar disisi kiri dan deskripsi di sisi kanan. Cocok dipakai untuk menampilkan spesifikasi produk secara detail.

<?php
$query=" SELECT * from  produk ";
$result=mysql_query($query) or die(mysql_error());
$no=1;
//proses menampilkan data
while($rows=mysql_fetch_object($result)){
?>
<div class="row">
	<div class="span8">
		<div class="row">
			<div class="span8">
				<h4><strong><a href="#"><?=$rows -> nama;?></a></strong></h4>
			</div>
		</div>
		<div class="row">
			<div class="span2">
<a href="#" class="thumbnail"> 
<img src="image/<?=$rows -> foto;?>" alt=""> </a>
			</div>
			<div class="span6">
			<p align='justify'>
			<?=$rows -> deskripsi;?>
			</p>
<p><span class="label label-success">
<i class="icon-star icon-white"></i><?=$rows -> merek;?></span> 
<span class="label label-success">Harga:<i class="icon-chart"></i><?=$rows -> harga;?></span>
<a href="index.php?mod=chart&pg=chart&action=add&id=<?=$rows->idproduk?>" class='btn' >
 <i class='icon-shopping-cart'></i>beli</a>
				</p>
			</div>
		</div>
	</div>
</div>
<?
}
?>

Tampilan Thumbnail

Katalog jenis ini cocok untuk menampilkan produk yang menekankan pada aspek visual atau desainnya.

source code

<div class="row">
	<ul class='thumbnails'>
       <?php
       //bata paging 
	require_once('inc/config.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;?> <?=$rows -> nama;?></a></h4>
	<hr class="lessspace" />
         <img src="image/<?=$rows->foto?>" alt=""/>
<p><a class="btn btn-large btn-block btn-primary" 
href="index.php?mod=chart&pg=chart&action=add&id=<?=$rows->idproduk?>">
<i class="icon-shopping-cart icon-white"></i> Harga Rp.<?=$rows -> harga;?>,00 </a>
				</p>
			</div>
		</li>
		<?
$no++;
}?>
</ul>
</div>

Demo Dan source code

Demo bisa anda lihat secara live disini, dan anda bisa mendownload source code lengkapnya disini. Sebagai kejutan, katalog ini juga sudah saya beri kode untuk melakukan proses transaksi, silahkan dicoba langsung di halaman demonya. Proses transaksi akan saya bahas diartikel selanjutnya.