Cara Menambahkan Row Bootstrap Di Setiap Beberapa Kolom Dengan PHP Part2

Di sesi kali ini saya akan menjelaskan cara menambahkan row bootstrap di setiap beberapa kolom dengan PHP Part2.
Hingga disini saya harap teman-teman telah membangun satu buah file dengan nama koneksi.php, dengan kode yang sesuai dengan kode yang saya berikan. Lantas bagi melanjutkan tahapan berikutnya.

Berikut kelanjutannya :

Teman-teman isi dahulu beberapa record di tabel produk yang tadi telah di bikin via phpmyadmin dengan data record terserah teman-teman, namun saya sarankan lebih dari 9 data record.
Teman-teman unduh bootstrap terlebih dahulu di tempat tinggal berikut: www.getbootstrap.com/docs/3.3/getting-started, sekiranya telah
bikin lagi satu buah dile dengan nama index.php, dan tuliskan kode seperti di bawah ini :

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″><br />
	<meta charset=”utf-8″><br />
	<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><br />
	<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″><br />
	<title>Latihan Bootstrap Grdi Dengan PHP</title><br />
<meta name=”description” content=”Latihan Bootstrap Grdi Dengan PHP”/></p>
<p>	<!– copy/paste start –><br />
	<!– Latest compiled and minified CSS –><br />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”></p>
<p><!– Optional theme –><br />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css” integrity=”sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp” crossorigin=”anonymous”></p>
<p><!– Latest compiled and minified JavaScript –><br />
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script></p>
<p>	<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script></p>
<p>	<!– copy/paste end –><br />
</head><br />
<body></p>
<p>  <nav class=”navbar navbar-default navbar-static-top”><br />
    <div class=”container”><br />
      <div class=”navbar-header”><br />
        <a class=”navbar-brand” href=”#”><img src=”http://link-logo” alt=”logo cabspocket”><br />
        </a><br />
      </div></p>
<p>    </div><br />
    <!–/.container-fluid –><br />
  </nav></p>
<p>  <div class=”container”><br />
<div class=”row”><br />
<h2 class=”text-center text-primary judul”>Contoh Katalog Produk Dengan Bootstrap Grid</h2><br />
</div></p>
<p><?php<br />
// Load file koneksi.php<br />
include “koneksi.php”;</p>
<p>$sql = mysqli_query($connection, “SELECT * FROM produk ORDER BY id ASC”);</p>
<p>$i = 0;<br />
while($data =mysqli_fetch_array($sql)){ // Ambil segala data dari hasil eksekusi $sql</p>
<p>if ($i%3==0){ $html .= “<div class=’row’>”; } // ini kode bagi menambahkan row di setiap 3 kolom<br />
echo “<div class=’col-md-4 col-sm-6 col-xs-12 text-center portfolio-item’><br />
<div class=’card h-100′><br />
<h3 class=’text-center’>”.$data[‘nama_produk’].”</h3><br />
<img class=’img-responsive card-img-top’ src=’http://icons.iconarchive.com/icons/icons8/windows-8/256/Users-Find-User-icon.png’><br />
<h4 class=’text-center’>”.$data[‘harga’].”</h4><br />
<a class=’btn btn-primary btn-penjual’ href=’#’>Beli Sekarang ini</a><br />
        </div></div>”;<br />
$i++;<br />
if ($i%3==0){ $html .= “</div>”; } // ini kode bagi menambahkan row di setiap 3 kolom<br />
} // penutup while<br />
if ($i%3!=0){ $html .= “</div>”; } // ini kode bagi menambahkan row di setiap 3 kolom</p>
<p>?></p>
<p></div></p>
<p></body><br />
</html>

<title>Latihan Bootstrap Grdi Dengan PHP</title>

<!— copy/paste start —>

<!— Latest compiled and minified CSS —>

<!— Optional theme —>

<!— Latest compiled and minified JavaScript —>

<!— copy/paste end —>

</head>

<body>

</a>

</div>

<!–/.container–fluid —>

</nav>

<h2 class=“text-center text-primary judul”>Contoh Katalog Produk Dengan Bootstrap Grid</h2>

</div>

<?php

// Load file koneksi.php

include “koneksi.php”;

$sql = mysqli_query($connection, “SELECT * FROM produk ORDER BY id ASC”);

$i = 0;

while($data =mysqli_fetch_array($sql)){ // Ambil segala data dari hasil eksekusi $sql

if ($i%3==0){ $html .= “<div class=’row’>”; } // ini kode bagi menambahkan row di setiap 3 kolom

echo “<div class=’col-md-4 col-sm-6 col-xs-12 text-center portfolio-item’>

<h3 class=’text-center’>”.$data[‘nama_produk’].“</h3>

<h4 class=’text-center’>”.$data[‘harga’].“</h4>

<a class=’btn btn-primary btn-penjual’ href=’#’>Beli Sekarang ini</a>

</div></div>”;

$i++;

if ($i%3==0){ $html .= “</div>”; } // ini kode bagi menambahkan row di setiap 3 kolom

} // penutup while

if ($i%3!=0){ $html .= “</div>”; } // ini kode bagi menambahkan row di setiap 3 kolom

</div>

(Visited 12 times, 1 visits today)

Berikut kelanjutannya :

Leave a Reply Cancel reply