Script PHP untuk Menampilkan Data dalam Tabel dengan Warna Baris Selang-seling
August 19th, 2008 | by rosihanari |
Cetak Artikel Ini
Wah cukup panjang juga ya judul artikel ini di atas… Bagi Anda yang masih bingung dengan maksud judul di atas, langsung saja perhatikan gambar di bawah ini sajalah… untuk jelasnya.

Pada gambar di atas dapat Anda lihat bahwa setiap baris tabel warnanya selang-seling. Warna yang berselang-seling tersebut dapat mempermudah orang untuk melihat data, terutama untuk pembeda antar baris. Nah… sudah paham kan maksudnya?
OK… pada artikel ini akan dibahas bagaimana cara membuat tampilan seperti di atas, dengan data dibaca dari database MySQL. Jangan khawatir… caranya cukup mudah kok untuk membuatnya.
Ide dasar pembuatan baris tabel data dengan warna selang-seling tersebut adalah cukup menggunakan konsep bilangan genap dan ganjil. Pada contoh tabel di atas, untuk warna latar baris putih diberikan pada baris ganjil, yaitu 1, 3, 5, … dst. Sedangkan baris warna abu-abu diberikan pada baris genap (2, 4, 6, … dst).
Dalam PHP, untuk menentukan sebuah bilangan genap adalah dengan menggunakan operasi modulo (%) , jika bilangan di modulo 2 hasilnya 0 maka dia genap, sedangkan jika tidak sama dengan 0, maka ganjil.
Sebagai contoh dalam kasus ini, misalkan kita memiliki struktur tabel
CREATE TABLE mhs ( nim varchar(10), namaMhs varchar(30), alamat varchar(30), PRIMARY KEY (nim) )
dan data mahasiswa sbb:
INSERT INTO mhs VALUES ('M0197001', 'ROSIHAN ARI YUANA', 'Solo');
INSERT INTO mhs VALUES ('M0197002', 'DWI AMALIA FITRIANI', 'Kudus');
INSERT INTO mhs VALUES ('M0197003', 'FAZA FAUZAN KH.', 'Solo');
INSERT INTO mhs VALUES ('M0197004', 'NADA HASANAH', 'Solo');
INSERT INTO mhs VALUES ('M0197005', 'MUH. AHSANI TAQWIM', 'Solo');
Perhatikan script PHP berikut ini:
<?php
mysql_connect("namaHost","namaUser","password");
mysql_select_db("namaDB");
$warnaGenap = "#CCCCCC"; // warna abu-abu
$warnaGanjil = "#FFFFFF"; // warna putih
$warnaHeading = "#FF0000"; // warna merah untuk heading tabel
$query = "SELECT * FROM mahasiswa";
$hasil = mysql_query($query);
echo "<table border='1'>";
echo "<tr bgcolor='".$warnaHeading."'>
<td>NIM</td>
<td>Nama Mahasiswa</td>
<td>Alamat</td>
</tr>";
$counter = 1;
while($data = mysql_fetch_array($hasil))
{
// cek apakah counternya ganjil atau genap
if ($counter % 2 == 0) $warna = $warnaGenap;
else $warna = $warnaGanjil;
echo "<tr bgcolor='".$warna."'>";
echo "<td>".$data['nim']."</td>";
echo "<td>".$data['namaMhs']."</td>";
echo "<td>".$data['alamat']."</td>";
echo "</tr>";
$counter++; // menambah counter
}
echo "</table>";
?>
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Script PHP untuk Menghapus Data Via Panel di Tabel
- Membuat Script PHP untuk Rekap Data dari Data Mentah
- Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus)
- Script PHP untuk Edit Data dengan Komponen RadioButton pada Form
- Membuat Tampilan Data Terurut Berdasarkan Kolom Tabel
- Script PHP untuk Menampilkan Siswa Belum Bayar SPP (A Study Case)
- Script PHP untuk Mengedit Data Via Form
- Alternatif Script Untuk Memproses Input Data Form Dinamis
- Membuat Script PHP Untuk Report atau Rekap Data (2)
- PHP Dasar – Komentar dalam PHP
Share this article on:
Kata kunci: data tabel php - PHP - php mysql - script php - warna tabel php -





Mantab deh Tutorialnya makasih ya.
thank’s
ini ada….
makasih banyak ya….
berguna bgt..!
makasih mas, sangat membantu banget… tapi saya ada masalah dikit nih…
begini, saya bingung ketika script di atas saya gabungkan dengan script paging atau script yang lainnya. pasti script yang lain-lainnya ga bisa jalan…
tolong kasih solusi untuk menggabungkannya ya mas…thanks before…
To hanif: Mmmm…. coba cek lagi nama-nama variabelnya. Jangan-jangan ada nama variabel yang sama antara script yang Anda buat dengan script dari paging. Karena nama variabel yang sama kadang bisa membuat script tidak jalan.
Wah thanks for artikelnya yaa
From http://www.sampara.com
gmn caranya bwt komentar pada artikel, seperti d bloger ini….???
trima kasih banyak sebelumnya
to singgih: untuk wordpress, secara otomatis akan disediakan form untuk mengirim komentar di bawah setiap postingan artikel. Namun, bisa pula kita non aktifkan form komentar ini pada artikel tertentu.
bagus banget…
sangat bermanfaat, thank ya…
Pak … gemana sih caranya bikin pencarian, trus hasil carinya berupa tabel… trus tabel itu saya bikin paging kya di google gt..
saya udah coba cara advance paging punya bapak , bagian pertamanya sih bener, tapi pas saya pencet next datanya malah keluar semua
mohon pencerahannya pak…
makasih banyak
to nandang: ya… artikel yang advance paging itu untuk menampilkan semua data, bukan dari hasil pencarian. Coba kali lain saya akan bahas hal tsb (kalau sempat). Kalau scriptnya dah buat sih, tapi artikelnya blm
script nya sangat ngebantu sekali,dalam PKL saya..makase…
mas,, gimana ya buat form register yang klo registernya berhasil, langsung dapet nomor id..
trus, gimana y nampilkan sebuah field dengan data terakhir yang diinput..
plisss.. kasi taw script phpnya..
tq b4..
to miet: untuk mengcreate ID otomatis, anda bisa membuat field ID dengan tipe autoincrement. Begitu data sudah disimpan ke tabel DB, maka secara otomatis akan diberi nomor ID berupa bilangan bulat. Namun jika anda ingin memiliki nomor ID dengan format tertentu, silakan anda baca artikel saya di http://blog.rosihanari.net/ide-membuat-generator-kode-unik-incremental-otomatis
Salam,
sebelumnya terima kasih atas materi tentang PHP dalam blog ini dan sangat membantu sekali.
namun saya ada pertanyaannya : script ini adalah untuk menampilkan isi dalam bentuk tabel.
namun bagaimana kalo ingin ditampilkan dalam bentuk menurun, seperti pada guestbok.
nama :
NIM :
Alamat :
terima kasih sebelumnya.
to fredy peter: ya mudah saja kan mas fredy. Tinggal Anda main di HTML nya saja untuk dibuat menurun
while(…)
{
…
echo “NIM : “.$data['nim'].”<br>”; // <br> digunakan untuk ganti baris
echo “Nama Mahasiswa : “.$data['namaMhs'].”<br>”;
echo “Alamat : “.$data['alamat'].”<hr>”; // <hr> digunakan untuk garis pemisah antar data
}
Lebih baik lagi kalo Anda gunakan tabel untuk mengatur tampilan di atas supaya lebih rapi kolom-kolomnya.
thanks atas tutorialnya pak, ijinkan saya berguru disini..
Terima kasih tutorialnya, sangat membantu. mohon ijin untuk mencopy.
Makasih mas
matur nuwun mas, scriptnya sangat bermanfaat untuk saya. dan mudah2an untuk yang lainnya juga
ass.
pak bisa gak dikasi bocoran gimana cara pembuatan script kayak di http://www.pdambandarmasih.com/info_pel.php
soalnya mau rencana buat skripsi biar ada manfaatnya juga.
salam
@adit: yang jelas di pdam nya itu dah ada database pelanggan beserta tagihannya mas. Anda tinggal koneksi ke sana saja. Itu cuman model searching data saja, berdasarkan ID pelanggan dan bulan/tahun tagihan saat ini.
kok gag ada tutorial flash gan?
berarti kalo mau ya ke blogku ajan!
@tonimation: saya mah gak bisa flash mas, coz gak punya sense of art
makasih mas…
Mas Rosihanari mang MANTAP ABISSSSS!!!tutorial anda sangat mudah untuk dipahami.kebetulan saya lagi bikin website yang di dalamnya terdapat foto2 member.dan saya ingin foto2 tersebut sesuai dengan ID-nya.saya sudah baca bab tentang membuat Thumbnail image n mudah banget saya pahami.tp…apa itu bisa digunakan seperti yang saya inginkan disitus saya nanti?mohon mas rosihanari memberi penjelasan. Thanks banget atas tutorialnya..SUKSES TERUS Buat Blognya!!
@faisal: tentu saja bisa mas..
Makasih banyak atas tutorialnya mas.bener2 Josss!banyak banget ilmu yang udah q dapetin disini…
mas ari, makasih ya bimbingannya.
tp mas, koq tiap kali saya buat <?php koq warna textnya otomatis jadi merah ya? dan gak bisa dijalankan. knapa ya? apa ada yg kurang?
makasih banyak ya.
mf koreksi, kyke kurang penutup deh pak….
@echo: oohhhh… iya..
penutup tabel nya ya? ok thanks mas…
Pak ari gimana dengan ajax ?? Saya kepengen tau pa tolong di buat artikrlnya yang banyak ya.he.he.he.he. Makasih
PAK klo SO nya pke linux xubuntu gmn??? Script export ke excelnya???
@zakaria: scriptnya tetap sama, hanya saja mungkin gak bisa kebuka di XUBUNTU nya
klo pake postgreSQL gimana cara tampilin tabelnya???
@reza: pada prinsipnya sama mas… cuman yang membedakan hanya di cara koneksinya dan cara menjalankan query SQL di PHP nya… kalo idenya sama persis.
mas rosihan terimakasih atas tutorial2 yang diberikan saya sudah mendownloadnya, saya lagi iseng bikin sistem psb mas, saya kan mencoba memberikan bonus, biar gampang kan ada idnya kalo dipilih id bonusnya langsung keluar nilai bonus pada halaman pertama gimana ya listingnya trims..
tengkyu bro,,,mantab