Our social:

Jumat, Januari 25, 2013

Membuat tabel HTML dengan style zebra


tabel zebra dengan php ala obywie
Bab kali ini membahas :
Pembuatan TabelZebra dengan menggunakan PHP
Table Zebra biasanya digunakan untuk mempercantik tampilan table berdasarkan barisan table. Membuat table zebra sangatlah mudah dikerjakan.
Contoh Koding dapat dilihat dibawah ini.
<HTML>
<HEAD>
<TITLE>Tabel Zebra</TITLE>
</HEAD>
<BODY>
<?PHP
$ArrayNama = array(”Ucok”,”Tini”,”Yoni”,”Nini”,”Toni”,”Mika”,”Ucit”,”Fini”);
?>
<table>

<tr style=”background-color:blue;”>
<th>No</th>
<th>Nama</th>
<th>Keterangan</th>
</tr>
<?PHP
$Nilai = 1;
$HitStyle = 1;
foreach($ArrayNama as $AliasNama){
if($HitStyle == “1″){ $VarStyle = “background-color:green;”; }
else{ $VarStyle = “background-color:yellow;”; }
?>
<tr>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $Nilai; ?></td>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $AliasNama; ?></td>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $HitStyle; ?></td>
</tr>
<?PHP
if($HitStyle == “2″) $HitStyle = 0;
$Nilai++;
$HitStyle++;
}
?>
</table>
</BODY>
</HTML>
Pada script tersebut yang dilakukan pertama kali adalah melakukan list daftar nama-nama orang kedalam array dengan menggunakan variable, dengan nama variable$ArrayNama
$ArrayNama = array(”Ucok”,”Tini”,”Yoni”,”Nini”,”Toni”,”Mika”,”Ucit”,”Fini”);
Dan pada script selanjutnya adalah membuat variable untuk menghitung nomor urutan serta membuat variable perulangan, 1 dan 2 seperti script dibawah ini.
$Nilai = 1;
untuk nomor urut pada script diatas.
$HitStyle = 1;
Untuk nomor urut perulangan.
Setelah membuat variabel diatas, untuk langkah selanjutnya adalah membuat perulangan baris table dengan script seperti dibawah ini.
foreach($ArrayNama as $AliasNama){
if($HitStyle == “1″){ $VarStyle = “background-color:green;”; }
else{ $VarStyle = “background-color:yellow;”; }
?>
<tr>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $Nilai; ?></td>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $AliasNama; ?></td>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $HitStyle; ?></td>
</tr>
<?PHP
if($HitStyle == “2″) $HitStyle = 0;
$Nilai++;
$HitStyle++;
}
?>
Pada baris pertama.
foreach($ArrayNama as $AliasNama){
..
}
Berfungsi untuk melakukan perulangan berdasarkan variable yang terdapat di $ArrayNama dan menjadikannya alias untuk dipanggil kembali satu persatu dengan alias variable bernama $AliasNama.
Pada baris ke 2 dan ke 3
if($HitStyle == “1″){ $VarStyle = “background-color:green;”; }
else{ $VarStyle = “background-color:yellow;”; }
Berfungsi untuk mendeteksi angka perulangan dan penentuan warna background belakang dari perbaris tabel. Jika variable $HitStyle terdeteksi angka 1 maka warnanya Green sedangkan untuk angka selain 1 berwarna kuning.
Pada Baris ke 5 dan 9
<tr>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $Nilai; ?></td>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $AliasNama; ?></td>
<td style=”<?PHP echo $VarStyle; ?>”><?PHP echo $HitStyle; ?></td>
</tr>
Berfungsi untuk membuat 1 baris lengkap dengan isi serta style backgroundnya. Untuk $VarStyle adalah alias dari warna yang terdapat dari script sebelumnya. Sedangkan$Nilai, $AliasNama dan $HitStyle adalah isi content yang di variabelkan pada script sebelumnya.
Pada Baris ke 11
if($HitStyle == “2″) $HitStyle = 0;
Berfungsi untuk mendeteksi hitungan perulangan dari variable $HitStyle. Jika $HitStyle terdeteksi angka 2 maka secara otomatis $HitStyle akan merubah angka tersebut pada variable $HitStyle menjadi 0
Pada Baris ke 12 dan 13
$Nilai++;
$HitStyle++;
Berfungsi untuk menambahkan nilai 1 pada masing-masing Variabel.
Posting Komentar