Web, işletme ve inovasyon hakkında bir takım yazılar İletişim için Form

Defocuyu takip etmek isteyenlere, RSS - FeedBurnerSanal Alemde Ben, Friendfeed - Flickr - Twitter - Vimeo


Veritabanından Çekilen Verileri Grafiğe Dökmek

Programcılar için veritabanındaki ilgili verileri çekmek ve bunları anlaşılır şekilde kullanıcılara sunmak yeterli olsada, kullanıcılar bir programdan biraz da görsellik beklerler.

Bugün veritabanından çektiğimiz ilgili verileri, grafik haline nasıl getireceğimizden bahsedeceğiz. Bu işi yaparken bize php, mysql ve css yardımcı olacak. Evet, başlayalım;

Kodlamaya başlarken "grafik" adında bir veritabanı, bu veritabanının içine "faizler" adlı bir tablo ve bu tabloya da "faiz" adlı bir kolon açtığınızı farzediyorum. Şimdi ilk önce sayfamıza ekleyeceğimiz, css kodlarını hazırlayalım:

CSS:
  1. <style>
  2. .grafik {
  3. /* Hazırladığımız katmanı boyutlandırıyoruz*/
  4. width: 200px;
  5. padding: 2px;
  6. }
  7.  
  8. .grafik .bar {
  9. /* Bar'a renk verip, içinde görüntülenecek değerleri biçimlendiriyoruz*/
  10. display: block;
  11. background: #00CCFF;
  12. text-align: center;
  13. color: #333;
  14. height: 2em;
  15. line-height: 2em;
  16. }
  17. </style>

İkinci olarak veritabanımıza bağlanalım:

PHP:
  1. <?php
  2. mysql_connect (”localhost”,”root”,”") || die (”mysql hata”);
  3. mysql_select_db (”grafik”) || die (”db hata”);
  4. mysql_query(”SET NAMES utf8″);
  5. mysql_query(”SET CHARACTER SET utf8_turkish_ci”);
  6. ?>

Sonrasında ilgili verileri veritabanımızda bulunan verilerimizi çekilim ve her gelen veriyi grafiklere dökelim. Bu işlem kolonda bulunan son veriye kadar devam ediyor:

PHP:
  1. <?php
  2. $query="select * from faizler";
  3.    if ($result=mysql_query($query)){
  4.        if (mysql_num_rows($result)> 0) {                   
  5.             while($kayit=mysql_fetch_array($result)){
  6. ?>

CSS:
  1. <div class="grafik">
  2.     <strong class="bar" style="width: <?php echo $kayit['faiz']; ?>%;"><?php echo $kayit['faiz']; ?>%</strong>
  3. </div>

PHP:
  1. <?php
  2.             }
  3.        }
  4.    }
  5. ?>

Yukarıda anlattığım kodları içinde barındıran sayfada burada, indirebilirsiniz.

EkleBunu Sosyal Paylasim Butonu
Ekim 30th, 2008 Etiketler: , ,
| Kategori: Programlama 1 Yorum » Yazar: abdullah

    Yorumlar

  1. Ekim 30th, 2008 | Yorumcu : Tutkun

    Gayet güzel anlatım. Elinize sağlık. Ayrıca ek bilgi olması açısından; javascript kodları ile görselliğe biraz da animasyon katabiliriz. Mesela "0%"'dan başlayıp, "90%"a kadar mavi alanın soldan sağa doğru dolması gibi...



Yorum Paneli





  • 1
  • ...
  • ...
  • 0