Warna Baris Dinamis dengan PHP dan CSS

PHP &mdash warna baris dinamisPHP dipadukan dengan CSS mampu menghasilkan tampilan data yang menarik. Contoh sederhana dalam tutorial ini, membuat warna baris dinamis. Data dinamis yang diolah oleh skrip PHP ditampilkan dengan warna baris selang-seling, CSS mendefinisikan warna background pertama dan kedua. Untuk lebih mempercantik tampilan, bisa menggunakan backrground image file di skrip CSS-nya.

Langkah pertama, menggunakan image editor favorit anda, membuat 2 image yang akan digunakan sebagai background baris, contohnya :

Warna 1 Warna 2

Selanjutnya, membuat file berekstensi .php dengan struktur halaman html/xhtml: baris.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Warna Baris Dinamis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- letak CSS di sini -->
</head>
<body>
<!-- letak skrip PHP di sini -->
</body>
</html>

Membuat skrip CSS dan disisipkan di bagian <head> dalam file baris.php.

/* Definisi warna baris 1 dan 2 */
.warna1 { background: #a4dfcd; } /* Hijau */
.warna2 { background: #fff; } /* Putih */
/* Definisi warna baris menggunakan background image */
.warna-img1 { background: url(warna1.jpg) repeat-x bottom; }
.warna-img2 { background: url(warna2.jpg) repeat-x bottom; }

Skrip CSS lengkap :

<style type="text/css">
<!--
body { text-align:left; font-family:Arial, Helvetica, sans-serif;
font-size:12px; }
#container { margin:0; padding:4px; width:200px; background:#0072bc; }
h1 { display:block; text-align:center; font-size:120%; color:#fff}
ul { padding:0; margin-left:0px; list-style-type:none; }
li { margin-left:0px; padding:3px; font-weight:bold; }
/* Definisi class untuk warna baris 1 dan 2 */
.warna1 { background: #a4dfcd; } /* Hijau */
.warna2 { background: #fff; } /* Putih */
/* Definisi class untuk warna baris menggunakan background image */
.warna-img1 { background: url(warna1.jpg) repeat-x bottom; }
.warna-img2 { background: url(warna2.jpg) repeat-x bottom; }
-->
</style>

Untuk menampilkan hasilnya, menggunakan teknik <em>Looping</em> sederhana di PHP. Teknik ini bisa juga diterapkan menampilkan database MySQL dalam bentuk tabel data dan membuat navigation list.

Skrip inti untuk menampilkan warna secara dinamis adalah mengambil nilai modulus barisnya :
$warna_baris = ($n % 2) ? "warna1" :"warna2";

Sedangkan untuk menampilkan warna baris menggunakan background image :
$warna_baris = ($n % 2) ? "warna-img1" :"warna-img2";

Kode PHP ditaruh di dalam bagian <body> halaman HTML, selengkapnya :

<div id="container">
<h1>Warna Baris Dinamis dengan PHP dan CSS</h1>
<ul>
<?php
// looping
for ($n=1;$n<=10;$n++) {
// mengambil nilai dari modulus (%) 2
// class warna baris tanpa background image
$warna_baris = ($n % 2) ? "warna1" :"warna2";
// class warna menggunakan background image
// $warna_baris = ($n % 2) ? "warna-img1" :"warna-img2";
// menampilkan hasil
echo "<li class=\"$warna_baris\">Baris $n</li>\n";
}
?>
</ul>
</div>

Source code selengkapnya lihat di sini, sedangkan untuk melihat demo di sini.

6 thoughts on “Warna Baris Dinamis dengan PHP dan CSS”

  1. sorry nih, langsung aja yah. walau ngga nyambung sama topiknya. saya mau nanya software apa yg bisa membagi gambar menjadi kecil kecil. buat bacground image itu.

  2. Maaf neh …

    ane newbie banget …

    ane mau nanya neh bro …

    mudah – mudahan berkenan

    ane maunya skrip buat bikin berbagai macam shart seprti pie chart dll

    ntu kyk gmana yah ..

    make php yah bro …

Leave a Reply