Bismillahirrahmanirrahiim
Maaf ya sobat dah lama nih gak ngeblog jadinya kangen, karena banyaknya kegiatan membuat gak sempat membuat postingan blog, tapi kini saya kembali on lagi untuk ngeblog, mohon bantuan dan sarannya ya sob, semoga postingan saya bermanfaat buat. Kali ini saya akan membagikan tips atau cara membuat background cell table berbeda menggunakan PHP yang sumber datanya dari database MySQL. Oke sobat langsung saja.
Langkah Pertama
Disini saya menggunakan Bootstrap Version 4 Alpha 2 untuk layout themes yang bisa sobat download disini, dan untuk jquery bisa download disini.
Langkah Kedua
Buat file custom.css di folder root aplikasi sobat, kemudian ketikan kode seperti dibawah ini.
Langkah Ketiga
Buatlah database dengan nama yang sobat kehendaki, kemudian buat tabel dengan nama friends.
CREATE TABLE `friends` ( `friend_id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `status` varchar(255) DEFAULT NULL, PRIMARY KEY (`friend_id`) ) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=latin1;
Langkah Keempat
Ketiklah kode dibawah ini dengan baik dan benar, atu di copy juga boleh, setting database sobat sesuai dengan konfigurasi yang sobat gunakan.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Cell Table Berbeda Dengan PHP</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-xs-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<h3 class="text-muted">
Aguzrybudy</h3>
</div>
<div class="jumbotron">
<h4 class="display-6">
Cara Membuat Background Cell Table Berbeda Menggunkan PHP</h4>
<p>
<a class="btn btn-sm btn-primary" href="#" role="button">PHP Version 7.0.3</a> <a class="btn btn-sm btn-primary" href="#" role="button">Bootstrap Version 4 Alpha 2</a> <a class="btn btn-sm btn-primary" href="#" role="button">Mysql Database</a></p>
</div>
<table class="table"><thead>
<tr> <th>No</th> <th>Name</th> <th>Email</th> <th>Status</th> </tr>
</thead> <tbody> <?php
$host="localhost"; $user="root"; $pass="";$database="dbphp7";
$koneksi=new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
trigger_error('Koneksi ke database gagal: ' . mysqli_connect_error(), E_USER_ERROR);
}
$no = 1; $bg="1"; $friends=mysqli_query($koneksi,"SELECT * FROM friends limit 6");
while($rows=mysqli_fetch_array($friends)){
if($bg == 1){
?>
<tr class="bg-dark"> <td><?php echo $no ?></td> <td><?php echo $rows['name'] ?></td> <td><?php echo $rows['email'] ?></td> <td><?php echo $rows['status'] ?></td> </tr>
<?php $bg="2"; } else { ?>
<tr class="bg-grey"> <td><?php echo $no ?></td> <td><?php echo $rows['name'] ?></td> <td><?php echo $rows['email'] ?></td> <td><?php echo $rows['status'] ?></td> </tr>
<?php $bg="1"; } $no++; } ?> </tbody> </table>
<footer class="footer text-center">
<p>
© 2016 Copyright Aguzrybudy.blogspot.co.id. All Right Reserved </p>
</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>
Langkah Kelima
Jalankan Program sobat, jika berhasil maka akan muncul tampilan gambar seperti diabawah ini.
Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran, jika sobat ingin code dari aplikasi diatas download disini (maaf link download belum ada).
0 Comments
Berkomentarlah dengan baik dan sopan