contact
WA: 0812-7537-1724
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: 5AB31960
ebsofmail@gmail.com

Cara Membuat Style Selang seling dengan PHP MYSQL

Posted in PHP MYSQL / i Life at 15 Agustus 2016 With 0 Comments

Tutorial kali ini kita akan membuat warna selang seling atau Zebra yang mana data diambil dari database dan ditampilkan dengan script php , dalam membuat warna zebra atau belang dengan HTML dan css tentu cukup mudah, namun pada kasus ini agak sedikit berbeda , karena data yang kita tampilkan di ambil dari database mysql , Tentu dalam Penempatan style css akan mengalami permasalah, dikarenakan data yang ditampilkan secara looping, Nah disini peran dari tutorial ini

Berikut Contoh menu Zebra dengan Style css dan data yang diambil dari database :

▼ Download Source Code Dibawah Ini ▼


membuat warna zebra sealang seling di php

Code CSS :

ul.left_menu li.odd a{
width:166px;height:25px;display:block;background:url(images/checked.png) no-repeat left #dad0d0; background-position:5px 5px;border-bottom:1px #FFFFFF solid;
text-decoration:none;color:#504b4b;padding:0 0 0 30px; line-height:25px;
}
ul.left_menu li.even a{
width:166px;height:25px;display:block;background:url(images/checked.png) no-repeat left #eee6e6;background-position:5px 5px;border-bottom:1px #FFFFFF solid;
text-decoration:none;color:#504b4b;padding:0 0 0 30px; line-height:25px;
}

 Nah.. Untuk kode PHP menampilkan style di atas Berikut Script Yang digunakan :

      <ul class="left_menu">
        <?php
            include "config/koneksi.php";
            $sqlTampil="SELECT * FROM kategori ";
            $qry=mysql_query($sqlTampil) or die ("Gagal Menampilkan Data Dari tbl kategori di database");
            $no=1;
            while ($r=mysql_fetch_array($qry)) {
              if(($no % 2)==0){
            echo "<li class="even"><a href=kategori_produk.php?id=$r[id_kategori]>$r[nama_kategori]</a></li>";
            }
            else {
            echo "<li class="odd"><a href=kategori_produk.php?id=$r[id_kategori]>$r[nama_kategori]</a></li>";
            }
            $no++;
            }
        ?>
      </ul>

Artikel Terkait

Diskusi