Pada sesi kali ini saya akan menjelaskan cara menambahkan row bootstrap di setiap beberapa kolom dengan PHP Part2.
Sampai disini saya harap teman-teman sudah membuat satu buah file dengan nama koneksi.php, dengan kode yang sesuai dengan kode yang saya berikan. Lantas untuk melanjutkan tahapan selanjutnya.
Berikut kelanjutannya :
- Teman-teman isi dahulu beberapa record di tabel produk yang tadi sudah di buat melalui phpmyadmin dengan data record terserah teman-teman, namun saya sarankan lebih dari 9 data record.
- Teman-teman download bootstrap terlebih dahulu di alamat berikut: www.getbootstrap.com/docs/3.3/getting-started, jika sudah
- buat lagi satu buah dile dengan nama index.php, dan tuliskan kode seperti di bawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Latihan Bootstrap Grdi Dengan PHP</title> <meta name="description" content="Latihan Bootstrap Grdi Dengan PHP"/> <!-- copy/paste start --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- copy/paste end --> </head> <body> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="http://link-logo" alt="logo cabspocket"> </a> </div> </div> <!--/.container-fluid --> </nav> <div class="container"> <div class="row"> <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 semua data dari hasil eksekusi $sql if ($i%3==0){ $html .= "<div class='row'>"; } // ini kode untuk menambahkan row di setiap 3 kolom echo "<div class='col-md-4 col-sm-6 col-xs-12 text-center portfolio-item'> <div class='card h-100'> <h3 class='text-center'>".$data['nama_produk']."</h3> <img class='img-responsive card-img-top' src='http://icons.iconarchive.com/icons/icons8/windows-8/256/Users-Find-User-icon.png'> <h4 class='text-center'>".$data['harga']."</h4> <a class='btn btn-primary btn-penjual' href='#'>Beli Sekarang</a> </div></div>"; $i++; if ($i%3==0){ $html .= "</div>"; } // ini kode untuk menambahkan row di setiap 3 kolom } // penutup while if ($i%3!=0){ $html .= "</div>"; } // ini kode untuk menambahkan row di setiap 3 kolom ?> </div> </body> </html> |
- Seperti yang terlihat pada kode if ($i%3==0){ $html .= “<div class=’row’>”; } di atas, yang berfungsi untuk menambahkan class row atau membungkus di setiap 3 kolom grid.
- Jika sudah teman-teman save file tersebut dengan nama index.php, dan lihat hasilnya pada browser teman-teman.
Sampai di sini pembahasan cara menambahkan row bootstrap di setiap beberapa kolom dengan PHP, semoga bermanfaat.