Dapatkan CD MP3 Murottal Al Qur'an dan Terjemahnya. Satu-satunya di Indonesia!!
Ingin Punya Script SMS Gateway dengan PHP + MySQL?

Dapatkan segera phpSMS V3.0, software SMS Gateway multi fungsi berbasis web buatan saya sendiri untuk keperluan Anda.
[Info Lengkap...]

Script PHP untuk Menampilkan Data dalam Tabel dengan Warna Baris Selang-seling


August 19th, 2008 | by rosihanari | Cetak Artikel Ini 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.

script php tabel data warna selang-seling

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>";

?>
VN:F [1.9.3_1094]
Rating: 7.8/10 (4 votes cast)
Script PHP untuk Menampilkan Data dalam Tabel dengan Warna Baris Selang-seling, 7.8 out of 10 based on 4 ratings
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


Share this article on:

Kata kunci: data tabel php - PHP - php mysql - script php - warna tabel php -


Ada 38 komentar dalam artikel ini.

  1. Taktiku says:

    Mantab deh Tutorialnya makasih ya.

  2. doez says:

    thank’s

  3. dendi says:

    ini ada….
    makasih banyak ya….
    berguna bgt..!

  4. hanif says:

    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…

  5. rosihanari says:

    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.

  6. sampara says:

    Wah thanks for artikelnya yaa

    From http://www.sampara.com

  7. singgih says:

    gmn caranya bwt komentar pada artikel, seperti d bloger ini….???
    trima kasih banyak sebelumnya

  8. rosihanari says:

    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.

  9. mozink says:

    bagus banget…
    sangat bermanfaat, thank ya…

  10. Nandang says:

    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

  11. rosihanari says:

    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 :-)

  12. desta says:

    script nya sangat ngebantu sekali,dalam PKL saya..makase…

  13. miet says:

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

  14. rosihanari says:

    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

  15. fredy peter says:

    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.

  16. rosihanari says:

    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.

  17. hylmi says:

    thanks atas tutorialnya pak, ijinkan saya berguru disini..

  18. soim says:

    Terima kasih tutorialnya, sangat membantu. mohon ijin untuk mencopy.

  19. Fuad says:

    Makasih mas

  20. matur nuwun mas, scriptnya sangat bermanfaat untuk saya. dan mudah2an untuk yang lainnya juga ;)

  21. Adit says:

    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

  22. rosihanari says:

    @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.

  23. tonimation says:

    kok gag ada tutorial flash gan?
    berarti kalo mau ya ke blogku ajan!

  24. rosihanari says:

    @tonimation: saya mah gak bisa flash mas, coz gak punya sense of art :-)

  25. anailham says:

    makasih mas…

  26. Faisal says:

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

  27. rosihanari says:

    @faisal: tentu saja bisa mas..

  28. Makasih banyak atas tutorialnya mas.bener2 Josss!banyak banget ilmu yang udah q dapetin disini…

  29. elis says:

    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.

  30. echo says:

    mf koreksi, kyke kurang penutup deh pak….

  31. rosihanari says:

    @echo: oohhhh… iya.. :-) penutup tabel nya ya? ok thanks mas…

  32. Idian Purnama says:

    Pak ari gimana dengan ajax ?? Saya kepengen tau pa tolong di buat artikrlnya yang banyak ya.he.he.he.he. Makasih

  33. zakaria says:

    PAK klo SO nya pke linux xubuntu gmn??? Script export ke excelnya???

  34. rosihanari says:

    @zakaria: scriptnya tetap sama, hanya saja mungkin gak bisa kebuka di XUBUNTU nya :-)

  35. reza says:

    klo pake postgreSQL gimana cara tampilin tabelnya???

  36. rosihanari says:

    @reza: pada prinsipnya sama mas… cuman yang membedakan hanya di cara koneksinya dan cara menjalankan query SQL di PHP nya… kalo idenya sama persis.

  37. rozikin says:

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

  38. zaki says:

    tengkyu bro,,,mantab



Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.


Mohon maaf, komentar yang menggunakan email palsu atau komentar bernada negatif atau cemooh secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil dalam daftar komentar.

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word