Membuat Katalog Produk dengan PHP MySQL

Teknik membuat katalog sederhana dengan format tabel

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.

Teknik membuat katalog sederhana dengan format tabel

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.

Tampilan katalog dalamf format List
<?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>&nbsp;
<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.

Katalog produk format thumbnail

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;?>&nbsp;<?=$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.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

46 thoughts on “Membuat Katalog Produk dengan PHP MySQL”

  1. mas mau tanya ni masalah gini apa nya yang harus diperbaiki mas
    Parse error: syntax error, unexpected $end in C:xampphtdocscommercekatalogkatalog_list.php on line 30

  2. wah tutor nya sangat bermanfaat
    Oh ya mas candra kalau untuk penambahan stok barang apa arus ubah database juga?

    dan file apa saja yang arus di rubah?
    Thanks ya mas candra

  3. mas. sy pake xampp 2,5 thn 2007. tapi ada notifikasi seperti ini Notice: Undefined index: action in C:\xampp\htdocs\tugas.php\commerce\chart\chart.php on line 9
    Anda belum membeli apapun. dan databasenya belum tampil apa karna kesalahan diatas jadi blum bisa tampil, mohon bantuannya mas. lagi belajar php, makasih.

  4. Gan Kalo tampilan semua produknya lalu isi order script codingnya bagaimana???. Khan cape kalo bolak-balik (lihat catalog produk….lalu order…lalu lihat catalog produk lagi). Thx be 4 ;)

    1. pake fungsi rupiah
      function format_rupiah($rp) {
      $hasil = “Rp.” . number_format($rp, 0, “”, “.”) . “,00“;
      return $hasil;
      }

    1. cek file config.php, uda buat databasenya belum? databasenya di config.php sama ga dengan yang di phpmyadmin

  5. ”Parse error: syntax error, unexpected end of file in D:\xampp\htdocs\commerce\katalog\katalog_list.php on line 32 ”

    Semuanya error gan…. :(
    Cobain via web liat demo nya….
    Error juga….

    1. oh itu karena server kemarin diupgrade sehingga tidak mendukung short_open_tag php, coba aja di localhost

  6. salam sukses buat mas candra…saya lg belajar php dengan memcoba mengembangkan script ini, jadi saya menambahkan button details di katalog thumb, dan saya ingin menampilkan detail produknya jika user menekan tombol details tersebut, itu gimna mas codingnya..saya bingung mentok disananya?

  7. master candra, saya mncoba ngembangin we b katalog ini..jd saya menambahkan button details di katalog_thumb..trus gmna cara codingnya, ane mentok kebingungan dsananya..help me master

    1. itu kan simple, misal halaman detail adalah produk_detail.php, nah maka di katalog_thumb.php linknya menjadi produk_detail.php?idproduk=5, ni misal aja.

  8. permisi gan, ane mw nanya nih, di sini kita gk di suruh bikin database lagi kan…??? ane udah sedot n coba. tpi masih ada yg error gan.”Parse error: syntax error, unexpected end of file in D:\xampp\htdocs\commerce\katalog\katalog_list.php on line 32 ”
    mohon pencerahannya gan. plis.

  9. agan candra ada yg mau saya tanyakan..gimana ya cara menerapkan paging katalog diatas dengan memakai twitter bootstap…help me please

Tinggalin komentar dong!