Sabtu, 21 Januari 2012

Membuat Warna Baris Tabel Selang-Seling dengan PHP

Pada artikel kali ini, saya akam membahas bagaimana cara membuat warna baris suatu tabel selang-seling menggunakan PHP.

Misal kita mengambil data dari database MySQL, ditampilkan dalam bentuk tabel HTML. Kita mau memberi warna berbeda pada tiap baris ganjil dan genapnya. Misal baris pertama warna putih, kedua abu-abu, ketiga putih lagi, keempat abu-abu lagi dst. Oh iya, dalam kasus ini anda sudah harus bisa mengambil data dari MySQL menggunakan PHP ya. Kalau belum bisa, silakan lihat artikel saya yang "Menampilkan data/ isi dari tabel MySQL menggunakan PHP".

Pertama kita tampilkan data dari tabel MySQL, yang disajikan dalam table HTML.

-----------------mulai kode PHP----------------------

<html>
<head>
<title>Membuat warna tabel selang-seling</title>
</head>
<body>

<h2>Membuat warna tabel selang-seling</h2>

<?
///membuat koneksi ke database
$server="localhost"; ///nama server
$username="root"; ///nama username mysql
$password="1234"; ///password, kosongkan jika tidak ada
$database="latihan_php"; ///nama database yang dipilih

mysql_connect($server, $username, $password) or die ("Koneksinya Gagal"); ///koneksi ke database
mysql_select_db($database) or die ("Databasenya Gak Ada"); ///memilih database, dan menampilkan pesan jika gagal

$pilih=mysql_query("SELECT * FROM pengunjung"); ///mengambil data dari tabel MySQL pengunjung

echo "<table border=\"1\" width=\"90%\">"; //membuat tag pembuka table
echo "<tr><td>Nama</td><td>Alamat</td><td>Telepon</td></tr>"; //membuat heading table

///tampilkan data dengan 'while'
while($pilih2=mysql_fetch_array($pilih)) ///mengambil data ke variabel $pilih2 dari $pilih
{
echo "<tr>";
echo "<td>$pilih2[nama_pengunjung]</td>";
echo "<td>$pilih2[alamat]</td>";
echo "<td>$pilih2[telepon]</td>";
echo "</tr>";
}

echo "</table>"; //membuat tag penutup table
?>

</body>
</html>

-----------------akhir kode PHP----------------------

Save kode di atas dengan nama "tabel-warna-selang-seling.php" atau nama lain terserah.

Jika kita lihat, data sudah tampil tapi belum ada warna selang-seling nya. Gimana cara buatnya? Kita edit sedikit kode di atas.

Logikanya adalah, kita akan memberi warna berbeda di tiap baris ganjil dan genap. Berarti kita harus bisa mengidentifikasi mana baris ganjil mana yang genap. Gimana caranya? Pakai modulus. Apa itu modulus? Modulus itu adalah sisa bagi.

Misal, 4 dimodulus 2 hasilnya 0 (nol). Karena 4 dibagi 2 hasilnya bilangan bulat. Jadi gak ada sisanya. Kalau 5 dimodulus 3 hasilnya 1. Karena hasil dari 5 bagi 3 bukan bilangan bulat. Nah, dikasus ini kita mau tahu mana baris ganjil, mana baris genap kan? Jadi kita pake modulus 2. Jadi tiap baris di modulus 2, hasilnya dicek. Yang hasilnya 0 (nol) berarti genap, yang hasilnya 1 (satu) berarti ganjil. Baru deh di tag <tr> nya nanti ditambahin atribut "bgcolor" yang sesuai.

Langsung aja kita edit kode di atas jadi seperti di bawah ini.

-----------------mulai kode PHP----------------------

<html>
<head>
<title>Membuat warna tabel selang-seling</title>
</head>
<body>

<h2>Membuat warna tabel selang-seling</h2>

<?
///membuat koneksi ke database
$server="localhost"; ///nama server
$username="root"; ///nama username mysql
$password="1234"; ///password, kosongkan jika tidak ada
$database="latihan_php"; ///nama database yang dipilih

mysql_connect($server, $username, $password) or die ("Koneksinya Gagal"); ///koneksi ke database
mysql_select_db($database) or die ("Databasenya Gak Ada"); ///memilih database, dan menampilkan pesan jika gagal

$pilih=mysql_query("SELECT * FROM pengunjung"); ///mengambil data dari tabel MySQL pengunjung

echo "<table border=\"1\" width=\"90%\">"; //membuat tag pembuka table
echo "<tr bgcolor=\"#ABCDEF\"><td>No</td><td>Nama</td><td>Alamat</td><td>Telepon</td></tr>"; //membuat heading table

$baris=1; //menambahkan variabel baris

///tampilkan data dengan 'while'
while($pilih2=mysql_fetch_array($pilih)) ///mengambil data ke variabel $pilih2 dari $pilih
{
//kode untuk menentukan warna
if($baris%2==0) //memodulus $baris, jika hasilnya 0 (nol), berarti genap, beri warna yang ditentukan
{
echo "<tr bgcolor=\"#CCCCCC\">"; //memberi warna abu-abu pada baris genap
}
else //kalau di atas sudah mencari yang genap, otomatis tan ini selain yang genap.
{
echo "<tr bgcolor=\"#FFFFFF\">"; //memberi warna putih pada baris ganjil
}
//akhir kode menetukan warna

echo "<td>$baris</td>";
echo "<td>$pilih2[nama_pengunjung]</td>";
echo "<td>$pilih2[alamat]</td>";
echo "<td>$pilih2[telepon]</td>";
echo "</tr>";

$baris++; //menambahkan variabel baris dengan nilai 1.
}

echo "</table>"; //membuat tag penutup table
?>

</body>
</html>

-----------------akhir kode PHP----------------------

Save kembali dan coba lihat hasilnya. Warna baris tabel sudah selang-seling kan? Kalau belum berarti ada yang salah hehehe....

Oke sekian artikel Membuat Warna Baris Tabel Selang-Seling dengan PHP ini. Mudah-mudahan berguna.

7 komentar:

  1. tnx gan,membantu bgt...hehe

    BalasHapus
  2. gk bisa kk..kayak mana ya?padahal udah persis tp warna nya gk muncul"..

    BalasHapus
  3. agar kolomnya beda warna?

    BalasHapus
  4. kalo warnanya berdasarkan status gmna?
    misal status ok warnanya hijau, status proses kuning, status belum=merah

    BalasHapus
  5. susaaah -,- tulisannya juga agak gedeein :'(

    BalasHapus