coret | kepret

asal coret, kepretes

Membuat alternate row color sederhana di PHP

Setelah sekian lama blog ini nganggur, karena ngga punya ide untuk nulis, akhirnya muncul juga ide untuk menulis tentang apa yang saya hadapi setiap hari. Salah satunya adalah membuat layout tabel data yang menurut saya cukup menarik untuk dilihat.

Salah satu cara paling sederhana untuk membuat layout tabel data yang menarik adalah dengan membuat variasi warna latar untuk setiap row data.

Kali ini saya coba menuliskan metode sederhana yang paling sering saya pakai ketika membuat layout tabel data.

Langkah Pertama

Siapkan dulu stylesheet untuk tabel

table {
margin: 0; padding: 0; background-color: #CCCCCC;
}

table tr {
margin: 0; padding: 0; background-color: #FFFFFF;
}
/* style untuk row genap */
table tr.genap {
background-color: #f6feff;
}

table tr.ganjil{
background-color: #FFFFFF;
}

table tr:hover {
background-color: #fffcf6;
}

/*table head */
table th {
padding: 3px 5px 3px 5px; backgroud-color: #333333;
color: #FFFFFF; text-align: center; font-weight: bold;
font-size: 13px;
}
/* cell */
table td {
padding: 2px 3px 2px 3px; font-size: 11px; color: #000000;
}

Data yang akan ditampilkan ke dalam tabel, saya asumsikan dengan data pegawai yang diambil dari database.

Struktur Database :

CREATE DATABASE employer;
USE employer;
DROP TABLE IF EXIST tbl_employer;
CREATE TABLE tbl_employer(
id int not null auto_increment,
employer_name varchar(50) null,
birth_date date null,
address varchar(255) null,
city varchar(25) null,
states varchar(45) null,
country varchar(35)
department varchar (35) null,
PRIMARY KEY(id)
)ENGINE=InnoDB;

Selanjutnya saya tidak membahas mengenai koneksi ke database, tetapi akan saya fokuskan kepada pembahasan mengenai membuat alternate row color.

Script :

<?php
//inisialisasi
$nomor = 0;

// query database
$query = "SELECT * FROM tbl_employer ORDER BY id";
$result = mysql_query($query) or die(mysql_error());

$num_rows = mysql_num_rows($result);

/* Tampilkan tabel */
echo "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"1\" border=\"0\">\n\r";
echo "<tr>\n\r";
echo "<th>No</th>\n\r";
echo "<th>Nama</th>\n\r";
echo "<th>Tgl Lahir</th>\n\r";
echo "<th>Alamat</th>\n\r";
echo "<th>Kota</th>\n\r";
echo "<th>Propinsi</th>\n\r";
echo "<th>Negara</th>\n\r";
echo "<th>Departemen</th>\n\r";
echo "</tr>\n\r";

if ($num_rows) {
while ($rows = mysql_fetch_array($result, MYSQL_NUM)){
$nomor++;
/* inisialisasi class */
if ($nomor % 2 == 0){
$row_class = "genap";
}
else {
$row_class = "ganjil";
}
echo "<tr class=\"" . $row_class . "\">\n\r";
echo "<td>" . $nomor . "</td>\n\r";
echo "<td>" . $rows[1] ."</td>\n\r";
echo "<td>" . $rows[2] . "</td>\n\r";
echo "<td>" . $rows[3] . "</td>\n\r";
echo "<td>" . $rows[4] . "</td>\n\r";
echo "<td>" . $rows[5] . "</td>\n\r";
echo "<td>" . $rows[6] . "</td>\n\r";
echo "<td>" . $rows[7] . "</td>\n\r";
echo "</tr>\n\r";}
}
else {
echo "<tr><td colspan=\"8\">Record masih kosong!</td></tr>";
}
echo "</table>\n\r";

?>

Selamat mencoba!!!

Advertisements

September 11, 2008 - Posted by | PHP, Tutorial | , ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: