Warna Baris Dinamis dengan PHP dan CSS
PHP 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 :
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.
4 Comments, Comment or Ping
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.
Jul 13th, 2007
@ wawan : Pake image editor seperti GIMP di linux , di windows ada Photoshop, dll
Jul 13th, 2007
gimp juga apa yg buat windows :)
http://www.gimp.org/windows/
Feb 11th, 2008
@OSSA : iya, betul, GIMP jugak ada yg versi Win
Feb 12th, 2008
Reply to “Warna Baris Dinamis dengan PHP dan CSS”