Php & Resources

(Yukarıdaki satırda veri i değişkenidir.)

Soruyu sormadık ama ne olduğunu hepimiz tahmin edebiliyoruz, o halde hemen aklımıza gelen bir cevabı yazalım;

1- İlk cevabımız kodlar arasına veritabanına bağlantı yapan satırları eklemek olabilir. Ama scriptimiz kullanıcı taraflı. Bu riskli olur, veri
tabanı bağlantı parametreleri görüldüğü için.

2- İkinci bir alternatif ise asp sayfası hazırlayıp veritabanından alınan değişkeni grafik kodları arasına yazmak ? Bu da çalışmayacaktır. Çünkü asp sayfaları sonuçları HTML olacak şekilde kullanıcıya bilgi gönderir. Bu şekilde çalışabilmesi için istemciye boyutlu bir değişkeni gönderebiliyor
olmamız gerekir veya sunucu tarafında DIRECTX i kullanıyor olmamız gerekir, ama DIRECTX sunucu taraflı çalışınca grafiği istemciye gönderemeyiz.

3- Peki HTML kodlarının bir çoğunu değişken olarak kullanmayı önersem ? Evet benim çözüm önerim bu olacak ve bu yazıda bu kodların yazımını ve kullanımını açıklayacağım. (Farklı yöntemlerle çözüm bulanlarında bilgisini paylaşması dileğiyle)

Hepimiz web sayfası tasarımına geçmeden önce HTML komutlarını öğreniriz. (aslında mecburuz )

Şimdi HTML nin şu komutlarına dikkat edin bunlar arasından bizim amacımıza en uygun olanlarını kullanabiliriz :

TABLE (Table, Tr, Td)
INPUT
IMAGE
…

Elbette burdaki amacımız verimizin türüne bağlı olarak veri taşıyacak değişkeni saptamak. Bizim için önemli olan bu komutların kullandığı VALUE
veya TITLE parametresidir.

VALUE INPUT tag’ının parametresi TITLE ise yukarıda yazılanların ve bir çok HTML tag’larının parametresidir. VALUE parametresi eğer INPUT tag’ının tipi TEXT ise girilen değeri, BUTTON ise butonun üzerindeki yazısı olur. TITLE ise mouse bu HTML elemanlarından birinin üzerine getirdiğinizde onun ne işe yaradığını anlatan açıklama satırlarını oluşturur.

Örneğin;

<INPUT type=”TEXT” title=”Bu bir textbox’dur.”>

İşte biz bu TITLE veya VALUE parametrelerini değişken olarak kullanacağız. Şimdi aşağıdaki örneği inceleyelim. Bu örnek yazılar arasında süreklilik sağlamak amacıyla bir önceki yazıda kullandığım örneğe bugünkü konunun eklenmiş halidir.

Ben veri tabanı olarak SQL Server kullanıyorum. Sizde verilerinizi nerede saklıyorsanız aşağıdaki kodda veri tabanı bağlantısı kısmını düzenleyerek çalıştırabilirsiniz. Veri tabanı bağlantısı kısmını açıklamıyorum bu konu ile ilgili bu sitede (www.aspnedir.com) yeteri kadar bilgi var.

Şimdi basit (görece basit) faydalı ve ilginç satırımı cımbızla çekip biraz analiz edeyim.

Bu satırda bizim için ID ve TITLE parametresi önemli. ID kullandığımız taga isim vererek onu diğerlerinden ayırmamızı sağlar. Bazı tagların içinde ID yerine NAME vardır aynı görevi yapar. işte bizde verilerimizi TD tagı içinde saklarken hangi sutunda hangi bilginin olduğunu unutmamak için ona bir isim verdik. X Eksen bilgilerini saklayan sutunun ID sine Xeks, Y Eksen bilgilerini saklayan sutunun ID sine Yeks diyelim. Ama elimizde 1 den fazla veri var. Eğer boyutlu değişkenleri kullanabiliyor olsaydık A(1)=10, A(2)=20, … A(N)=M şeklinde yazabilirdik. işte ortam HTML olunca bizde her bir satıra farklı isim vererek boyutlu değişkeni kendimiz oluşturuyoruz. Herbir satıra farklı bir isim vermek yerine bir ismin önüne rakam ekleyerek onu türetiyoruz;

ID=”Xeks” & i

i=0 için Xeks0
i=1 için Xeks1
i=2 için Xeks2
…
i=N için XeksN

Buraya kadar tamam. N veri için N tane TD değişkeni oluşturduk. Şimdi bu değişkende verileri toplayalım. Aşağıdaki kodu inceleyelim ;

… “<TD ID=’Xeks” & i & “>” & rst(”X”) & “</TD>” (tam kod için bkz. yukarı)

bu şekilde bir kodlama yaparsak istemci verileri Tablo içinde görecek ama grafiği göremeyecektir. kodumuzu düzenleyelim;

… “<TD ID=’Xeks” & i & “‘ title=” & rst(”X”) & “>” & rst(”X”) & “</TD>” (tam kod için bkz. yukarı)

Evet şimdi istemcinin ne göreceğine bakalım. Ekranda X ekseni için verilen değerleri görecek. Hepsi bu kadar mı ? Elbette hayır. Eğer kodu
çalıştırırsanız mouse’unuzu rakamların üzerine götürmeyi unutmayın. Evet açıklama satırı olarak aynı rakamları okuyacaksınız. İşte bizim
kullanacağımız TITLE içinde saklanan bu veriler. Tabi birde sütunun adı olan ID parametresi.

(Hımm biraz eğlenelim bu kodlarla ne dersiniz ? )

Şöyle bir soru akla gelebilir; Yüzlerce veri var hepsi ekranda gözükecek tablo uzayacak görüntü bozulacak. Kolayı var tabloda Border=0 yapın, bir de title dışında verileri yazdırmayın. Oldu olacak bir de style=’visibility:hidden’ css komutu ekleyelim tabloya ve görünürlüğünü
tamamen kaldıralım şöyle ki;

Yine de işlem zamanı ve istemcinin bu verileri görebilmesi veri büyüklüğüyle doğru orantılı. Her ne kadar tabloda gözükmesede title içine aktarılan verilerin istemciye gönderilmesi zaman alacatır. Ama bir faydasıda veriler üzerinde herhangi bir matematiksel düzenlemeyi istemciye butonlar sunarak verebiliriz. Bu durumda istemci grafik üzerinde yaptığı her değişiklik için sadece kendi bilgisayarının hızı kadar beklemek zorunda. Her seferinde web üzerinden bu bilgileri alması gerekmez. (Ama sizde herşeyi HTML den beklemeyin :))

Unutmayalım ki biz burada DIRECTX, HTML, ASP ve DHTML kullanarak biraz uzun yoldanda olsa grafik çizdirmeye çalışıyoruz. Bunun en kısa yolu grafik cizip onu JPG kayıt eden bir ActiveX DLL yazıp sonra o DLL’i ASP içinden çağırmaktır. Konumuza tekrar dönelim.

Önemli bir kod satırımızda DHTML (Dinamik HTML) ile ilgili;

document.all.item(”Xeks1″).title

Yukarıdaki satır DHTML kodudur. Buradaki DOCUMENT ifadesi bizim sayfamızı, ALL bu sayfa üzerindeki tüm tagları, ITEM ise bu taglardan herhangi birini seçmemizi sağlıyor.
Dikkat ederseniz item(”Xeks1″) yazdık. Buradaki Xeks1 yukarıda bahsedilen verilerin saklandığı sütunun adıdır. Yani Xeks1 TD tagının ID ’sidir. İşte istemci tarafında tablo veya diğer bir HTML kodu içindeki bilgilere ulaşmamıza yarayan güzel bir DHTML kodudur. TITLE TD tagının parametresiydi ve yukarıda kullanacağımız verileri oraya yazdırmıştık. O halde

For i = 1 to M
X = document.all.item(”Xeks” & i).title
y = document.all.item(”Yeks” & i).title
next

M veri sayımız diğer bir değişle tablonun satır sayısı olmak üzere, TD tagı içine sakladığımız tüm verilere bu şekilde ulaşabiliriz. Ayrıca madem IE kullanıyoruz. O halde IFRAME kullanarak fazla verilerin sayfa düzenini bozmasını engelleyebiliriz. verileri IFRAME içinde sunabiliriz. Butonlarla
IFRAME in kaynağını değiştirip farklı verilere ulaşıp farklı grafikler çizdirebiliriz.
örneğin;

<IFRAME ID=”VERI” HEIGHT=”30%” WIDTH=”100%” FRAMEBORDER=1 SCROLLING=YES
SRC=”veri.asp”></IFRAME>

veri.asp dosyası veri tabanından verileri okuyup yine aynı sayfada tablolar halinde yayınlasın.

Bu durumda grafik çizdireceğimiz sayfamızın asp olmasına gerek olmayacak. Tek sorun IFRAME içindeki tablodan veri okutmak olacaktır. Bunu ise;

M = document.frames(”VERI”).document.all.item(”sayi”).value

şeklinde yapabiliriz. bu bize veri.asp dosyasında yer alan

<input name=’sayi’ value=10></input>

satırındaki Value yani 10 değerini okuyacaktır. Son olarak önemli bir HTML kodunu açıklayalım;

<META HTTP-EQUIV=”REFRESH” CONTENT=”60″>

META tagı HEAD tagı içinde tanımlanır. Daha çok sayfanın içeriği dili vb. hakkında bilgi içerir.

Yukarıdaki parametreleriyle kullanıldığında sayfanın yeniden yüklenmesi sağlanır. yani bu kod için 60 saniye sonra sayfa Refresh edilerek yeniden yüklenir. Böyle bir parametre veritabanına belli zaman aralıklarıyla bağlanıp verilerimizi vede grafiklerimizi güncellemeye yarayabilir.

Aşağıda anlatmaya çalıştığım konuyla ilgili geçen yazımdaki örneğin değiştirilmiş halini bulacaksınız. Satırlar arasında yine açıklama satırları
var. Umarım anlaşılır bir örnek olmuştur.

Bu makaleyi okuyan ve katkı koyabilecek herkese şimdiden teşekkür ediyorum.

Bilgi Paylaştıkça Çoğalır. Farkınız bilmek değil, bilginizi kullanabilmek
olsun.

İlk sayfamızın adı veri.asp olsun;

İkinci sayfamızın adı drx.htm olsun;