Bu şekilde basit bir grafik uygulaması için tarasarımı çok fazla düşünmenize gerek yok.Netice itibariyle algoritmayı iyi anlar ve modüler şekilde tasarlayabilirseniz bu durumda istediğiniz an istediğiniz uygulamaya entegre edebilirsiniz.Benim kullanacağım örnekte herhangi bir txt dosyasında mevcut olan aylara ve haftalara ayrılmış firma satış değerlerini grafik haliyle gösteren bir uygulama mevcut.

Öncelikle sınırlarımızı belirlemek adın stil dosyamızı oluşturmamız gerekiyor :

#grafik {
 font-family: Tahoma;
 font-size: 10px;
 text-align: center;
 margin-top: 10px;
 padding: 0px;
 border-width: 0px;
}

#grafik p {
 margin-top: -20px;
 background-image: url('images/cizgi.jpg');
}

#grafik td {
 width: 40px;
 bottom: 0px;
}

#tasiyici {
 height: 200px;
 width : 40px;
}

<P> etiketimiz için atadığımız değer -20.Bunun sebebi üzerine gelecek olan imaj ile arasında boşluk olmasını istemiyor olmamız.Grafik çubuklarının oluşturulmasında kullanacağımız cizgi.jpg dosyamızın büyüklüğü yaklaşık olarak 20 px * 2 px olursa yeterlidir.Zaten direkt ekranda göstermek yerine <p> etiketi arka planı olarak kullanacağız.

Model konusu olarak yukarıda da bahsettiğim gibi sene bazında aylık satış raporu tasarımı yapacağız.Bu aşamada kodu elimizdeki veri dosyasına göz atalım :

Yıl, Ay, Hafta, Tarih, Alıcı,Toplam Tutar

2009,8,51,07-05-2009,xyz@gmail.com,33028.2
2009,8,51,08-01-2009,xyz@gmail.com,31845.25
2009,8,51,12-02-2009,xyz@hotmail.com,69205.23

Virgülle ayrılmış değerlerin her biri yine yukarıda göreceğiniz etiketleri ifade ediyor.Özellikle txt dosyası işlemini seçmemin sebebi biraz daha zordan başlayarak geriye dönük tecrübe kazanmanız.Dosyamızın ismi ise musterirapor.txt.

Şimdi sırada bu verilerin işlenmesi var :

function grafikGoster ()
{  
 $zaman = 0;
 echo "<table><tr><td>AYLIK BAYİ SATIŞ RAPORU GRAFİĞİ</td></tr></table><table><tr>";
 for($i=0; $i<12; $i++)
 {
 $zaman++;
 echo "<td><div id='tasiyici'><table id='graph'><tr><td>";
 $satirlar = file("rapor/musterirapor.txt");
   foreach($satirlar as $_satir)
    {
     list ( $yil, $ay, $hafta, $tarih, $bayi, $toplam) = explode (',',$_satir);
     if ($tarih > 0)
     { 
      if ( $ay == $zaman )
       {
        $toplamTutar = $toplam + $toplamTutar;

       }
     }
    }
 for( $k = sutun($toplamTutar); $k > 0; $k--)
 {
 echo "<p>&nsbp;</p>";
 }
 echo "</td></tr><tr><td>"; echo number_format("$toplamTutar",".");
echo "</td></tr></table></div></td>";
 }
 echo "</tr></table>";
}

Yukarıdan aşağı doğru kısaca açıklayalım.$zaman değişkenimiz raporumuz aylık olduğu için sıfır değeriyle başlıyor ve for döngüsü içerisinde daha ilk adımda 1 değerini alarak rapor için çıktı üretmeye başlıyor.Daha sonra bir önceki adımda oluşturulan tablonun içerisine <div> etiketi ile birlikte başka bir tablo oluşturuluyor :

Neden ayrıca <div> kullandığımıza gelince.Eğer div etiketi kullanmasaydık bu durumda sütünlarımızın hizası konusunda sorun yaşacaktık ve görüntüsü aşağıdaki resim gibi olacaktı.

Tablo oluşturulduktan sonra grafik sutunlarının altına gelecek olan değerler tarih aralığına göre $ay == $zaman eşitliği takip edilerek toplanıyor.İşin hesaplama kısmı bitinceyse sutun() isimli fonksiyonumuza $toplamTutar değişkenimizi for döngüsü içerisinde gönderiyoruz ve fonksiyonumuz kaç adet <p></p> etiketi çalıştırılacağını ve sütunumuzun yüksekliğinin ne kadar olacağını gösteren bir değer döndürüyor.

function sutun ($birim)
{
 if ( $birim > 1000000 )
 {
  $birim = substr($birim, 0, 4);
  $birim = $birim / 20;
  return $birim;
 }
 else
 {
  $birim = substr($birim, 0, 4);
  $birim = $birim / 200;
  return $birim;
 }
}

Bu arada sutun() fonksiyonunda biraz kurnazlık yapmamız gerekiyor.Döndürülecek değeri nasıl bulacağımız sorusunun çözümüde bu zaten.Önce sutun () fonksiyonuna gelen değeri inceleyelim ve 100.000 ile 15.000 arasında bir değer aldığını varsayalım.Şayet substr kullanarak ilk 2 rakamı ( 650,000 için 650, anlamına gelir ) alırsak bu sefer daha büyük değer için sorun yaşayacağız anlamına gelir ( 1,650,00 için yine 165, değeri elde edilir) .substr ile benim örneğimde ilk 4 haneyi aldıktan sonra yine örnektede göreceğiniz gibi 1,000,000 üzeri değeri daha alt değerden ayırmam için yapmam gereken aslında bölüm katsayısını düşürmek.Ayrıca değerlerden gelen bir virgül problemide mevcut.Bu iki sorunun çözmenin yolu sadece bu.

Böylece 650,000 değeri için 650, alınırken 1,500,000 değeri için sadece 1500 değerini elde edebiliyoruz.Sonuç itibariyle zaten ilk adımda büyüklük kontrolü yaptığımız verimiz bize 650,000 için  32.5,  1,500,000 için ise 75 birim döndürecektir.

Bu aşamadan sonra ekrana, gelen değer kadar paragraf <p> gösteriyor ve satırlar ile tabloyu kapatıyoruz.( <p> etiketinin arka planı bizim çizgi resmimizdi )

Dikkat etmeniz gereken nokta satır ve tabloların başlayıp bittiği alanlar.Örneğin :

<table><tr> ( Bir satır açıldı ) <td> ( Artık bir hücre var ) <p></p> * sutun(toplamTutar)  ( dönen adet kadar <p> etiketi ) </td></tr></table>

İlk for döngümüz 12 ay için çalıştı.Sonuç olarak yanyana 12 adet sütun elde etmiş olduk ve bu etiketlerin yüksekliğini sutun() fonksiyonumuzu kullanarak ayarlayıp altınada değerleri yazdırmış olduk.Grafiğimiz yukarıdan sarkan grafik çubukları şeklinde görüntülenecektir.

Beyin jimnastiği yapmak isterseniz çubukların tavana hizalı değilde tabana hizalı nasıl olabileceği konusunda çalışma yapabilirsiniz.

Kolay gelsin.

Bir html dosyası yapalım ve bu dosyanın içerisine şu kodları kullanarak bir tablo ve hücreler oluşturalım :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>CSS Efekt Örneği -1</title>
</head>
<body>
<table><td><a class='transparan' href="#"><img border='0' src="test.jpg"
alt="Test Resmi"></a></td></table>
</body>
</html>

 Basit sayfamızı oluşturduktan sonra sıra css kodlarımızı hazırlamaya geldi.Bunun için transparan adında bir sınıf hazılayacağız ve içerisine resmin üzerine mouse oku geldiği anda görünürlülüğünü arttıran fonksiyonu yazacağız.Dikkat ederseniz ikinci satır da FF için atamış olduğumuz bir bölüm mevcut. :

.transparan img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

İkinci aşamada mouse oku üzerinde olmadığı sırada yani durağan haldeyken sayfa içerisinde ki görünümünü ayarlayacağımız kodu yazıyoruz.Aynı şekilde FF içinde bir satır hazırlamamız gerekiyor.

.transparan:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

Aslında hazırladığımız stil kodlarını başka bir css sayfası üzerine kayıt ederek html dosyamıza eklesek daha sağlıklı bir iş yapmış olurduk fakat çok fazla satır olmadığından şimdilik bu şekilde çalışabiliriz.” Transparan ” adını verdiğimiz sınıfımız için hedef aldığımız tek nokta ” img ” etiketleridir.Fakat sınıfın çalışacağı yer link <a> etiketinin sonrasıdır.Şimdi kodu tamamlayalım :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>CSS Efekt Örneği -1</title>
<style type="text/css">
.transparan img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.transparan:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>
</head>
<body>
<table><td><a class='transparan' href="#"><
img border='0' src="test.jpg" alt="Test Resmi"></a></td></table>
</body>
</html>

Opacity değerinin arttırıp azaltarak istediğiniz transparan değerini elde edebilirsiniz.Çalışan örneği görmek için tıklayın.

Kolay gelsin.

Sitenizin şablonu belliyse bu durumda içeriğin gösterileceği bir bölümü illa ki düşünmüş olmalısınız.Örneğin sola yaslanmış bir yan menü, üst tarafta bulunan bir başlık ve en altta da alt kısım bulunduğunu farz edersek göbekte kalacak boşluk sizin içeriğinizi göstereceğiniz alan olabilir.Bize gereken şeyler bir çekirdek sayfa, bir tane boş alan ve adım adım hazırlayacağımız fonksiyon kütüphanemiz olacak.Sitenizin kuruluş yapısının bu şekilde olduğunu varsayarsak kodlarınız da şu şekilde olacaktır :

<div id="sayfa">
<div id="menu"><? include("sidebar.php"); ?></div>
<div id="ust"><? include("header.php"); ?></div>
<div id="banner"><? include("banner.php"); ?></div>
<div id="orta"><? include("core.php"); ?></div>
<div id="alt"><? include("footer.php"); ?></div>
</div>

Burada bizim içeriğimizin yerleşeceği alan resim de gördüğünüz kırmızı alan yani ” core.php ” dosyasıdır.Hedef alan belirliyse bu durumda index üzerinde herhangi bir düzenleme yapmamıza bu an itibariyle gerek kalmayacaktır.Tabi bunu gerekli dosyaları ( fonksiyon.php gibi) index içerisine dahil ettiğinizi varsayarak söylüyorum.Ayrıca tek sayfa içerisinde çalışacağımız için css dosyanız da dahil bir kere ” include ” fonksiyonu ile sayfaya dahil etmeniz yeterlidir.

İkinci adımda index dosyamızı tertemiz bırakıp core.php dosyamızı oluşturacağız.Bu dosyamızda da pek fazla kod karmaşası olmaması açısından sadece GET methodu ile gelen bağlantı isteklerini toplayacağız.Fonksiyon yazımını buradan yapabiliriz ancak bu daha sonra kafamızı karıştıracağından gerekli fonksiyonları fonksiyonları yazdığımız dosya üzerine işlememiz şu durumda daha sağlıklıdır.İçeriğimizi göstereceğimiz dosyamızın da genel yapısı şu şekilde :

<table><td><?
$islem = $_GET['goster'];
switch ($islem)
    {
        case "bir-link" :
           isle("bir-link");
           break;
        default :
           echo"Bos sayfa";
           break;
    }
?></td></table>

Gördüğünüz gibi switch içerisinde değerlendirilen nesne şayet case içerisinde bir eşleşme bulursa onu işletecek ve sayfaya bir şeyler yazacaktır.Burada ki kodda ise değer alan “ isle () ” fonksiyonuna ” bir-link ” değeri gönderiliyor.Bu hazırlamış olduğumuz kodu artık sayfamızın üzerinde yerleşik linklerin hepsinde kullanabiliriz.İster DB üzerinden gelsin, ister elle girilsin sonuç itibari ile ” index.php ” ya da ana dosyamızın adı her neyse artık şu şekilde bir parametre ile çalışmaya başlayacaktır :

index.php?goster=bir-link

Ve son adımda fonksiyon kütüphanemizdee ” isle () ” adında bir fonksiyon hazırlıyoruz ve yapması gerekenleri belirtiyoruz.Benim hazırladığım kodda ” isle () ” fonksiyonu bir bütün olarak çalışıyor, yani sadece bir link için değil sayfa için gelen tüm isteklere bir değer döndürüyor.O yüzden yine bir switch döngüsü hazırladım :

function isle($islem)
{
     switch ($islem)
       {
         case "bir-link" :
             $sorgu="SELECT * FROM tablo";
             $sonuc=mysql_query($sorgu);
             while($satir = mysql_fetch_array($sonuc))
                 {
                    echo "<td><table ><tr><td".$satir['veri']."</td></tr>
                    <tr><td >".$satir['digerveri']."</td></tr></table></td>";
                 }
      }
}

Bu paylaştığım kodlar çok yakında ücretsiz olarak sunacağım SiteMekanik V1.0 Kurumsal PHP Portalının içerisinden alınmıştır.

Kolay gelsin.