Simple Alternate Row Color dengan ASP

Tulisan ini sebenarnya masih berhubungan dengan tulisan saya sebelum ini tentang membuat alternate row color dengan PHP. Pada tulisan kali ini saya coba membahas tentang membuat alternate row color sederhana dengan ASP.

Untuk stylesheetnya silahkan dilihat di sini. Untuk database bisa menggunakan MS Access atau MS SQL Server atau Database yang lainnya. Pada tulisan ini, database yang saya gunakan adalah MS SQL Server dengan struktur table yang sama dengan posting saya sebelumnya.

<%
Option Explicit
On Error Resume Next

Dim ConnString
Dim oConn
Dim RecSet

Dim strQuery

Dim strRowClass

Dim intNomor

Set oConn = Server.CreateObject("ADODB.Connection")

'Koneksi ke SQL Server 2000
ConnString = "Provider=SQLOLEDB; Datasource=localhost; uid=test; password=test;
Database=employer"
oConn.Open ConnString

'Recordset
Set RecSet = Server.CreateObject("ADODB.Recordset")

'Query database
strQuery = "SELECT * FROM tbl_employer ORDER BY id"
RecSet.Open strQuery, oConn

Response.Write "<table width=""100%"" cellpadding=""0"" cellspacing=""1"" border=""0"">"
& VbCrlf
Response.Write "<tr>" & VbCrlf
Response.Write "<th>No</th>" & VbCrlf
Response.Write "<th>Nama</th>" & VbCrlf
Response.Write "<th>Tgl Lahir</th>" & VbCrlf
Response.Write "<th>Alamat</th>" & VbCrlf
Response.Write "<th>Kota</th>" & VbCrlf
Response.Write "<th>Propinsi</th>" & VbCrlf
Response.Write "<th>Negara</th>" & VbCrlf
Response.Write "<th>Departemen</th>" & VbCrlf
Response.Write "</tr>" & VbCrlf
If Not RecSet.EOF Then
	While Not RecSet.EOF
		intNomor = intNomor + 1
		If intNomor Mod 2 <> 0 Then
			strRowClass = "ganjil"
		Else
			strRowClass = "genap"
		End If
		Response.Write "<tr class=""" & strRowClass & """>" & VbCrlf
		Response.Write "<td>" & intNomor . "</td>" & VbCrlf
		Response.Write "<td>" & RecSet("employer_name") & "</td>" & VbCrlf
		Response.Write "<td>" & Day(RecSet("birth_date")) & "-"
& Month(RecSet("birth_date")) & "-" & Year(RecSet("birth_date")) & "</td>" & VbCrlf
'		Alternatif untuk membuat format waktu
'		Response.Write "<td>" & FormatDateTime(DateValue(RecSet("birth_date")),
VbShortDate) & "</td>" & VbCrlf
		Response.Write "<td>" & RecSet("address") & "</td>" & VbCrlf
		Response.Write "<td>" & RecSet("city") & "</td>" & VbCrlf
		Response.Write "<td>" & RecSet("states") & "</td>" & VbCrlf
		Response.Write "<td>" & RecSet("country") & "</td>" & VbCrlf
		Response.Write "<td>" & RecSet("department") & "</td>" & VbCrlf
		Response.Write "</tr>" & VbCrlf
		RecSet.MoveNext
	Loop
Else
	Response.Write "<tr><td colspan=""8"">Record masih kosong!</td></tr>" & VbCrlf
End If

Response.Write "</table>" & VbCrlf

%>

Good Luck !!

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!!!

Pertama

Ternyata sudah lama saya membiarkan blog ini nganggur. Bukannya malas, tapi karena tidak tahu mau menulis apa di sini.

Yah, semoga saja, dengan adanya postingan ini, akan ada postingan2 lainnya yang menyusul.

Salam dari Salatiga.