Pada kesempatan kali ini saya akan menjelaskan cara membuat tabel zebra dengan php. Perlu teman-teman ketahui sebelumnya, untuk membuat tabel berwarna seperti zebra, yang warnanya selang seling dari baris satu dan baris lainnya, maka teman-teman bisa menggunakan modulo pada php. Seperti contoh, saya menggunakan $no%2 = = 0 yang artinya setiap variable $no yang bernilai genap akan saya rubah warnanya, seperti contoh warna merah(#f00) sedangkan untuk yang genap akan saya rubah warnanya, seperti contoh saya kasih warna hitam(#111).
Lantas, bagaimana cara untuk membuat nya ?
Berikut seperti contoh di bawah ini :
- Teman-teman buat terlebih dahulu database dengan nama zebra dan dengan spesifikasi, seperti di bawah ini :
- Teman-teman buat satu buah file dengan nama config.php, kemudian salin kode seperti di bawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $server = "localhost"; $user = "root"; $pass = "brianabraham"; $dbname = "zebra"; $connection = mysqli_connect($server, $user, $pass, $dbname); /* Untuk Cek Koneksi */ if(!$connection){ die ("Connection failed: ".mysqli_connect_error()); } ?> |
Kode di config.php di atas berfungsi untuk akses masuk ke dalam database teman-teman, dan silahkan sesuaikan dengan koneksi teman-teman.
- Teman-teman siapkan terlebih dahulu satu buat file dengan nama bebas, namun di sini saya beri nama index.php, salin kode 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 |
<head> <title>Contoh Tabel Zebra (Berwarna) Dengan PHP</title> <style> thead{ font-size:16pt; } tr{ height:40px; } </style> </head> <?php require ("config.php"); //untuk database $no = 1; $get = "select * from murid order by id_murid desc"; // ambil data murid dan di urutkan dari yang paling terbaru $tm = mysql_query($get); // menjalankan perintah $get ?> <table border='0px'> <thead align="center" style="background-color:#333333; color:#fff;"> <td width="50px">No</td> <td width="400px">Judul Artikel</td> </thead> <?php // looping data while($show= mysql_fetch_array($tm)){ ?> <tr bgcolor='<?php if($no%2==0) echo"#f00"/*warna genap*/; else echo"#111";/*warna ganjil*/?>'> <!--baris tempat untuk penggantian warna--> <?php echo"<td align='center'>$no</td> <td> $show[nama_murid]</td> </tr>"; $no++; } echo"</table>"; |
- Jika sudah, teman-teman jalankan file index.php tersebut melalui browser teman-teman, maka akan menghasilkan tampilan output seperti gambar di bawah ini :
Untuk penggunaan tabel berwarna yang lebih dari 2(dua) , sama hal nya seperti di contoh atas.
Sampai di sini penjelasan saya mengenai cara membuat tabel zebra dengan php, semoga bermanfaat.