Pernah liat tampilan produk pada website e-commerce misalnya http://www.tokokaos.com/catalog.php atau pada koleksi album foto di facebook kamu. Nah tampilan yang biasanya terdiri dari beberapa baris data yang tersusun secara konstan misal tiap baris ada 4 data disebut dengan tampilan dalam bentuk grid.

Tampilan seperti ini sering kita jumpai dalam website e-commerce. Fungsinya jelas untuk menampilkan katalog produk dalam bentuk foto produk yang tersusun rapi biasanya terdiri dri 3 atau 4 produk per barisnya. Dengan tampilan grid, akan mempermudah pengunjung website dalam melihat-lihat koleksi produk yang ditawarkan.

Ok langsung saja kita praktekkan..

Langkah pertama buat database bernama jagocoding dan satu tabel bernama produk. Sintax pembuatan tabel seperti dibawah ini

--
-- Database: `jagocoding`
--

-- --------------------------------------------------------

--
-- Table structure for table `produk`
--

CREATE TABLE IF NOT EXISTS `produk` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `gambar` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;

--
-- Dumping data for table `produk`
--

INSERT INTO `produk` (`id`, `nama`, `gambar`) VALUES
(1, 'Produk 1', 'g1.jpg'),
(2, 'Produk 2', 'g2.jpg'),
(3, 'Produk 3', 'g3.jpg'),
(4, 'Produk 4', 'g4.jpg'),
(5, 'Produk 5', 'g5.jpg'),
(6, 'Produk 6', 'g6.jpg'),
(7, 'Produk 7', 'g7.jpg'),
(8, 'Produk 8', 'g8.jpg'),
(11, 'Produk 9', 'g9.jpg');

Langkah kedua buat folder bernama tampil_grid. Dalam folder tersebut buat folder bernama produk dan file bernama tampil_grid.php

Langkah ketiga taruh 9 file gambar berformat ( JPG) dan beri nama masing-masing gambar dengan nama g1.jpg sampai g9.jpg. 

Langkah keempat buka file tampil_grid.php dan ketikkan kode dibawah ini

<?php
mysql_connect("localhost","root","");

mysql_select_db("jagocoding");

$q=mysql_query("SELECT * FROM produk");

?>

<table border=0px cellpadding='10'>
  <tr>

<?php

  $jml_kolom=3;

  $cnt = 0;
  
  while($data=mysql_fetch_object($q))
  {
      if ($cnt >= $jml_kolom) 
      {
          echo "</tr><tr>";
          $cnt = 0;
    }

    $cnt++;

  ?>

     <td align=center>       
       <div>
         <img width='80px' valign='bottom' src="produk/<?php echo $data->gambar; ?>">
       </div>     
       <div>
         <?php echo $data->nama; ?>
       </div>  
     </td>
     
  <?php
  }
  ?>

  </tr>
</table>

$jml_kolom=3;
 
    $cnt = 0;
     
    while($data=mysql_fetch_object($q))
    {
        if ($cnt >= $jml_colom) 
        {
              echo "</tr><tr>";
              $cnt = 0;
        }
 
        $cnt++;
 
    ?>

Perhatikan potongan kode diatas.

Baris ke-1 $jml_kolom=3; berfungsi untuk menampilkan jumlah kolom atau dalam hal ini jumlah produk yang ditampilkan perbarisnya. 

Baris ke-7 sampai baris ke-17 

if ($cnt >= $jml_kolom) 
        {
              echo "</tr><tr>";
              $cnt = 0;
        }
  
        $cnt++;

Pada potongan kode diatas $cnt akan bertambah 1 pada tiap perulangan artinya dari 0,1,2,3 sampai n produk. Selanjutnya akan dicek apakah $cnt lebih besar atau sama dengan $jml_kolom. Jika $cnt >=  $jml_kolom yang telah kita tentukan, maka akan ditambahkan tag </tr><tr>.

Tag tersebut berfungsi untuk berganti baris, jadi produknya akan tampil sesuai jumlah kolom yng ditentukan dan jika jumlahnya sudah sesuai maka akan ganti baris sampai seluruh data ditampilkan.

Langkah kelima jalankan file tampil_grid.php dan lihat hasilnya. Ubah $jml_kolom=3; sesuai dengan jumlah data yang akan ditampilkan perbarisnya.

Download Souce Code                    Online Demo

Selamat mencoba

Penulis 

Fuad Indra Setiawan