Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan mengenai Bagaimana Cara Me’looping Data Kolom Di BOOTSTRAP, saya tertarik dengan judul ini kenapa?saya penasaran gimana sih caranya, kalo kita lihat atau kita menerapkannya dengan Bootstrap
mungkin gampang tapi Bagaimana kalo data yang kita miliki lebih dari 50 bahkan lebih mungkin akan berasa banget kita ngerjainnya tanpa ada bantuan looping di php, setelah saya cari tahu akhirnya saya dapatkan pun, Â oke seketika saja yah saya mulai praktekan, teman teman dapat salinkan scriptnya dibawah sini :
kita sambungkan dulu css bootstrapnya :
|
|
<head>
<title>Button Loading</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
|
lalu kita bikin prosesnya :
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
|
<?php
$con = mysqli_connect(‘localhost’,‘dumet’,‘school’,‘webmaster’);
if (!$con) {
die(“Databases Tak terdapat : “ . mysqli_connect_error());
}
$sql = mysqli_query ($con, “SELECT * FROM ismet_product”);
?>
<div class=“container”>
<?php $i=1; ?>
<?php while ($data = mysqli_fetch_array($sql)){ ?>
<?php if($i % 2 == 0){ ?>
<div class=“row”>
<?php } ?>
<div class=“col-lg-6”>
<div class=“panel panel-success”>
<div class=“panel-heading”><?php echo $data[“name”] ?></div>
<div class=“panel-body”>
<?php echo $data[“description”]; ?>
</div>
</div>
</div>
<?php $i++; ?>
<?php if($i % 2 == 0){ ?>
<div class=“col-lg-6”>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
|
Sekiranya telah seluruh teman teman dapat save dan jalankan dibrowsernya dan jangan lupa extensinya .php, oke begitulah Cara Me’looping Data Kolom Di BOOTSTRAP, lumayan gampang bukan ?, semoga artikel ini bermanfaat dan selamat mencoba.
Hingga bertemu diartikel berikutnya dan hingga jumpa .
#KeepLearn
#IsmetMA
