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.

Categories: CSS-WebdesignPHP

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

52 Comments

nurul · 24 September , 2018 at 7:18 am

gi mana mahu tambah katalognya kebawah ya mas?

Rizki · 8 October , 2017 at 8:47 am

makasih banyak gan

rojhieb · 2 May , 2017 at 3:23 am

untuk databasenya kenapa gak ditampilin mas

Putera K. · 18 April , 2017 at 2:29 am

biar produk nya di tampilan mobile bisa tampil lebih dari 1 ditambah script apa ya? soalnya 1 produk aja defaultnya di tampilan mobile.

    Putera K. · 18 April , 2017 at 2:30 am

    lebih dr 1 produk perbaris maksud saya.

    Putera K. · 18 April , 2017 at 2:32 am

    kalau biasa khan 6-6 (kalau 2 produk per baris)
    tp kalau digabung sama mysql itu scriptnya gmn masih bingung

sunandar · 5 July , 2016 at 3:19 am

mas….ada lagi ga contoh yang lebih sederhana untuk katalog thumbnail

Poetensai Shugoi · 17 June , 2016 at 8:58 pm

mas kl untuk menampilkan produk detail foto dan text gimana ya..apa bisa pake tutor diatas? trimakasih mas

Dhimas Ishida · 14 August , 2015 at 12:59 am

untuk menambahkan fasilitas sorting berdasarkan harga gmn mas?

    Candra Adi Putra · 14 August , 2015 at 4:59 pm

    order by harga

restiaka · 22 June , 2015 at 8:19 am

Ada error di demo livenya mas Candra :)

wandi · 21 June , 2015 at 3:07 pm

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

    Candra Adi Putra · 21 June , 2015 at 8:51 pm

    ganti setiap <? dengan <?php
    dan ganti setiap <?= dengan <?php echo

budi liauw · 1 May , 2015 at 8:55 pm

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

ari · 5 April , 2015 at 5:19 pm

klo membuat 1 produk dengan banyak gambar ada contohnya ngga?

toniiskandar21 · 19 January , 2015 at 11:51 am

thanks atas infonya om.

b4drvz · 29 December , 2014 at 9:49 am

mas Candra Adi Putra

ane mw tanya gimana caranya menambahkan or membuat feature compare product

PutriHuriati · 4 November , 2014 at 10:13 pm

thank’s y gan, atas informasinya,,
tapi yang kok ini error ?
” Notice: Undefined index: chart in C:\xampp\htdocs\contoh\commerce\chart\chart.inc.php on line 48
0) “

zorgem · 15 August , 2014 at 12:00 pm

Gan, saya mau tanya tologn dijawab ya.
Gimana cara membuat halaman simulasi harga seperti RAKITAN dan di pasang pada blogspot?

    Candra Adi Putra · 15 August , 2014 at 1:58 pm

    ga bkl bisa d pasang d blogspot. kamu hrs buat sendiri pake php dan beli webhosting

Anonymous · 26 June , 2014 at 4:25 pm

belagu penulisnya..padahal ga jago!

dwi · 2 June , 2014 at 11:39 am

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.

Ady Riefin · 19 May , 2014 at 5:24 am

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

Kastam · 7 May , 2014 at 1:30 pm

Mas Candra, sy coba berhasil setelah mengaktifkan short_open_tag, terima kasih

Anonymous · 28 April , 2014 at 12:57 am

error mas

Deny · 15 April , 2014 at 9:51 pm

data produknya ga muncul gan
cuma muncul krangkanya saja

dharma · 4 December , 2013 at 9:22 am

kok saya buka dengan localhost error ya?

    Candra Adi Putra · 4 December , 2013 at 11:25 am

    short_open_tag harus on di php.ini, ga tau ngaktifinnya? tanya temen

fajar · 30 October , 2013 at 9:20 am

maaf mas saya mau tanya tetang harganya..misalnya Rp.70.000,00
gimana caranya
terima kasih sebelumnya

    Candra Adi Putra · 30 October , 2013 at 10:50 am

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

fajar · 13 September , 2013 at 3:19 pm

saya mau tanya gan..table transaksi_detail fieldnya apa saja ya..

Hendri Riyan · 27 August , 2013 at 7:30 am

maaf saya lagi nyusun TA
Bisa bantu saya lewat email?
hendririyan@hotmail.com

    Candra Adi Putra · 29 August , 2013 at 1:41 pm

    ga bisa bro…

    Anonymous · 6 September , 2013 at 9:28 am

    kenapa punya sy jd no database selected?

    Candra Adi Putra · 8 September , 2013 at 8:45 pm

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

ricorc · 9 July , 2013 at 10:51 pm

”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….

    Candra Adi Putra · 14 July , 2013 at 4:54 pm

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

firman · 21 June , 2013 at 3:28 pm

pak saya mau tnya untuk pembuatan select katagori seperti halaman simulasi harga di website http://www.rakitan.com/simulasi.php

itu scriptnya gmna ya pak??..
mohon pencerahannya

    Candra Adi Putra · 23 June , 2013 at 12:25 am

    itu mah sciptnya panjang… saya belum tahu

gmna · 18 June , 2013 at 8:46 pm

melanjutkan aja gan dari komentar Andrian Nursyafandi
sudah sya tmbahi } tpi tetep eror

    Candra Adi Putra · 23 June , 2013 at 12:20 am

    wah ga tau juga klo gitu…itu sudah dites dikomputer ane jalan bro..demonya jalan kan?

lio messi · 10 June , 2013 at 4:38 am

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?

lio messi · 10 June , 2013 at 4:11 am

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

    Candra Adi Putra · 11 June , 2013 at 1:50 pm

    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.

hadihardiyanto · 18 May , 2013 at 9:33 pm

bagus neh gan ,makasih sangat

Anonymous · 2 February , 2013 at 3:40 am

bro kalo bikin directory didalam directory lagi di php bisa ga ya pas waktu proses upload gambar ?

Andrian Nursyafandi · 4 January , 2013 at 6:24 pm

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.

    Candra Adi Putra · 4 January , 2013 at 10:10 pm

    kemungkinan besar, kamu kurang } di akhir file

BJuser · 30 December , 2012 at 2:05 pm

Om candra, ane mau tnya, katalog yang disesuaikan harga pengiriman barang ada ga?

Anonymous · 21 December , 2012 at 2:45 am

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

    Candra Adi Putra · 27 December , 2012 at 12:26 am

    sama saja dengan paging biasa…. membuat katalog kan sama saja menampilkan data

Comments are closed.