DOM Nedir ?

Document Object Model’in kısaltılmışı olan DOM’un dilimize çevirisi Belge Nesne Modeli olarak yapılmaktadır. Asla bir dil olmayıp, dilleri barındıran bir platform olarak tanımlanmaktadır. Başka bir deyişle dilden bağımsız bir standarttır. Aslında tanım kısmı çok da önemli değil, küçük örneklerle anlattığımda çok net kavrayacaksınız.

DOM’u ilgilendiren iki dil grubu vardır. Birincisi temel dil olup, verinin başkalarıyla paylaşılması için kullanılır. İkincisi ise işleme dili’dir ve temel dille yapılandırılmış bir belgeyi işlemeye yarar. Burada dikkat edilmesi gereken nokta bu isimlendirmelerin evrensel bir nitelik taşımadığıdır; yani mantığı size daha kolay anlatabilmek amacıyla bu şekilde ben sınıflandırdım.

Çok göze çarpan örnekler vermek gerekirse, temel diller HTML ve XML, işleme dilleri ise JavaScript ve PHP, ASP, JSP gibi sunucu tabanlı dillerdir.

DOM’da bir temel dil ile hazırladığınız sayfa, belge olarak adlandırılır. Bu belgenin içine yerleştirdiğiniz her türlü öğe ise nesne olarak adlandırılır. Nesnelerin birer öğe (element) olarak kullanılabilmesi için hiyerarşik bir düzen izlenerek çağrılmaları gerekir. Örneğin HTML içerisine yerleştirilmiş öğeleri çağırmak için, içinde bulunduğu diğer öğelerin çağrılması bir yöntemken, bir öğeye bir id vererek bu id üzerinden çağırmak da bir başka yöntemdir. Aşağıdaki örneği ele alalım :

Görüldüğü gibi bir temel dil ile (HTML), bir işleme dili (JavaScript) aynı sayfa içerisinde kullanıldı ve istenilen sonuçlar elde edildi. Bu sayfayı tarayıcımızla açtığımızda alt alta iki metin kutusu içerisinde Gökhan Öztürk ve Türkiye yazıları çıkacaktır. JavaScript kodumuzun ilk satırında metin kutusunun değeri hiyerarşik olarak çağrılmış ve değiştirilmiştir. İkinci satırda ise hiyerarşik yapı daha az önemsenerek JavaScript içindeki DOM’un temellerinden olan getElementById metodu kullanılmıştır.

Bütün bunların hepsi aslında bize DOM’un nesne yönelimli (object oriented) yapıyı getirdiğini gösteriyor.

Temel dil olarak HTML ve işleme dili olarak JavaScript’in kullanımını Ajax-Tr sitesindeki uygulama örneklerinde çokça gördük. Bu yazının devamında temel dil olarak XML’in ve işleme dili olarak da PHP’nin kullanımını küçük örneklerle göstereceğim.

PHP ve DOM

PHP’nin en yeni sürümü PHP 5 birçok yeniliği de beraberinde getirdi. Bu yeniliklerden birisi de yerleşik olarak gelen DOM sınıfları. PHP 4’e göre daha bir object oriented olan bu sınıflarla XML belgeleri oluşturmak çok daha kolay hale geldi.

İsterseniz şimdi yerleşik olarak gelen DomDocument adlı sınıfın en temel metodlarına bakalım. Diğer sınıflar ve ayrıntılı metodlar için yazının sonunda bulabileceğiniz dokümantasyon bağlantısına tıklayabilirsiniz.

Yeni XML Belgesi Oluşturma

$doc = new DOMDocument("1.0", "iso-8859-9");

Bunun gibi bir kodla XML’in oluşturulacağı nesneyi belirlemiş oluyoruz. Constructor fonksiyonun iki parametresi var. İlki XML’in sürümünü belirtiyor. Bu örnekte 1.0 olarak belirtilmiş. İkinci parametre ise opsiyonel olup verilerin karakter setini ifade ediyor.

$root = $doc->createElement("root");

Böylece XML belgemizde yeni bir öğe oluşturmuş olduk. Fakat oluşturduğumuz bu yeni öğe havada kaldı. Yani bu öğe, hangi öğenin alt öğesi, o belli değil. Bu yüzden bunu belirlemek için bir satır eklemek durumundayız.

$doc->appendChild($root);

Böylece $root nesnesini $doc nesnesinin bir alt öğesi olarak belirlemiş oluyoruz. Aynı şekilde başka alt öğeler de oluşturabilir, hiyerarşik bir yapı belirleyebiliriz.

Yeni Değer Oluşturma

$value = $doc->createTextNode("deger");
$root->appendChild($value);

Aynı alt öğe oluşturur gibi sadece metot adını değiştirerek değerimizi oluşturuyoruz. Hangi öğenin içine oluşturduğumuzu da ikinci satırla ifade ediyoruz.

XML Kodunu Oluşturma

$xml_code = $doc->saveXML();

Bu kodla birlikte oluşturulan kodu $xml_code değişkenine atıyoruz. Artık kodu yazdırabiliriz :

echo $xml_code;

Örnek Uygulama -1-

Bu kodu kaydederken UTF-8 karakter setiyle kaydetmenizi öneririm, böylece Türkçe karakterlerde problem olmaz.

Ve işte XML çıktısı :

Kodu açıklayalım. İlk olarak XML belgemizi oluşturuyoruz. Tercih edilen XML sürümü 1.0 ve kodlama iso-8859-9 olarak belirleniyor. Biliyorsunuz, XML’de mutlaka tek bir ana öğe olmalı, bu yüzden kitaplar adlı ana öğeyi oluşturuyor ve belgenin bir alt öğesi olarak belirliyoruz. Ana öğenin altına kitap1 adlı bir öğe daha açıyoruz. Bu öğenin altına da aynı şekilde ad ve yazar diye iki öğe açıyoruz. Kitap adı ve yazar adı olarak değerleri belirliyoruz. Diğer kitaplar için de aynı şekilde öğelerimizi oluşturduktan sonra, XML çıktımızı ekrana yazdırıyoruz. Aslında bu kod gayet basit ama birazcık uzun. Çünkü döngüler kullanılarak basite indirgenebilecek kodları, temel mantığı anlatmak açısından uzatarak yazdım.

Bu arada yeri gelmişken XML’in ve DOM mantığının bazı temel kavramlarından daha bahsedeyim. Daha kolay anlaşılsın diye bu açıklamaları tamamen örnekler üzerinde yapıyorum. Yukarıdaki XML çıktısında ana öğemiz (root element) kitaplardır. Her XML belgesi tek bir ana öğe içermek zorundadır. Diğer öğelerin hepsi bu öğenin alt öğesi (child element) olmak zorundadır. Burada kitap1, kitap2, kitap3, ana öğenin alt öğesidirler. Öte yandan bu üç öğe birbirlerinin kardeş öğesidirler. Başka bir açıdan bakarsak, bu üç öğe ad ve yazar öğelerinin üst öğeleridirler (parent element).

Şimdi; gelin, PHP’nin döngü ve veritabanı ile iletişim mekanizmalarını da kullanarak güzel bir kod yazalım. Ama önce, şimdiye kadar göstermediğim bir metod daha göstermek istiyorum.

Özellik Ekleme

XML, hepimizin eski dost HTML’den aşina olduğu bir yapı kullanır. Bu yapı

<oge ozellik1="deger1" ozellik2="deger2">deger</oge>

şeklindedir. İşte şimdi bu özelliklerin nasıl ekleneceğini görelim :

$child->setAttribute("ozellik1", "deger1");
$child->setAttribute("ozellik2", "deger2");

Evet, gördüğünüz gibi, açıklama gerektirmeyecek kadar basit. Bunu da gösterdiğimize göre artık örnek uygulamamıza geçebiliriz.


$child->appendChild($dom->createTextNode("Metin"));

<oge ozellik1="deger1" ozellik2="deger2">Metin</oge>

Örnek Uygulama -2-

Bu uygulamamızda, yukarıda anlattığımız bilgilerle, her kaliteli sitede rastladığımız popüler içerik paylaşma yöntemi olan RSS bilgisi oluşturmayı ele alacağız. Bunun içinse, sitemizdeki haberleri veritabanından okutup RSS’e yazmak için bir veritabanı bağlantısına ihtiyacımız olacak. Yalnız ben bu örneği, - her zamanki yöntemimle - biraz eksik bırakarak, veritabanı bağlantısını en ilkel yolla kullanacağım. Aslında yazması daha kolay, daha düzenli, daha şık ve daha anlaşılır kodlar yazmak için hazır ya da kendi yazdığınız veritabanı sınıfları kullanmak daha profesyonelce bir yaklaşım olacaktır. Ancak burada konumuz o olmadığı için, esas konuyu ön plana çıkartmak adına en temel yöntemi kullanmak istiyorum. İsterseniz başlayalım.

Öncelikle RSS’in ne olduğunu bu dokümanı okuyan herkesin bildiğini düşünerek, doğrudan yapısının nasıl olduğu konusunda bilgi vermek istiyorum. Bir RSS belgesi, temel olarak özelleşmiş bir XML belgesidir. Aynen XML’in kurallarıyla yazılır. Yalnız, öğe ve özellik adlarını kendi istediğiniz gibi değil, önceden belirlenmiş standart kurallar çerçevesinde kullanırsınız. Öğelerin değerleri ise sizin paylaşmak istediğiniz bilgilerdir. Şimdi RSS için çok küçük bir örnek verelim :

Hemen kısaca açıklayalım. İlk satır daha önceki örneklerdeki gibi, XML’in sürümünü ve kullanılacak karakter setini belirtiyor. İkinci satır, RSS’in sürümünü bildiren ana öğemiz. Bunun alt öğesi ise channel adı verilen bir öğe olmalıdır. Bunu HTML’deki body gibi düşünebilirsiniz. Tüm verilerimizi bu öğenin alt öğesi olarak yazmamız gerekiyor. RSS belgesinin genelini ilgilendiren bilgiler doğrudan buraya yazılıyor örneğin. Yani channel’ın alt öğesi olarak title, description ve link öğelerini yazarak sitemizin bilgilerini veriyoruz. Daha sonra ise bu RSS belgesinde kaç tane veri listeleyeceksek, her biri için bir item öğesi tanımlıyoruz; her bir item’in içine de yine yukarıdaki gibi title, description ve link öğeleri ekleyerek verilerimizi yazıyoruz. Tabii ki bu üç öğeden başka öğeler de (örneğin haberin yazıldığı tarih/saat) RSS standartının içinde mevcut fakat her zaman en basitinden başlamak lazım. Temeli oturttuktan sonra gerisi sizin araştırmacı ruhunuza kalıyor.

Görüldüğü gibi yapı aslında özelleşmiş bir XML belgesi. Şimdi gelin bunu PHP ile birkaç satır kod yazarak halledelim. Öncelikle sitemizde yerleşik bir haber sistemi olduğunu varsaymak durumundayız. Bu yüzden bu sistemin veritabanında şöyle bir tabloyla belirtildiğini düşünelim :

CREATE TABLE haberler (
id SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
baslik VARCHAR(255) NOT NULL,
ozet VARCHAR(255) NOT NULL,
icerik TEXT NOT NULL,
KEY(id)
);

Artık örneğimize geçebiliriz. Örneğimizin kodlarında sitemizin http://www.siteadi.com olduğunu ve haberin tamamının http://www.siteadi.com/haberoku.php?id=5 gibi bir adresten okunacağını varsayıyoruz. Unutmayın, RSS beslemesi sadece haberin özetini içeriyor, haberin tamamını okumak isteyenler bizim sağlamış olduğumuz bağlantıya girerek okuyabiliyorlar.

Aslında kod oldukça açık ama yine de açıklamakta fayda var. Birinci bölümde veritabanı bağlantımızı yaptık. Burada açıklanacak birşey yok zaten. İkinci bölümde XML belgemizi oluşturmaya başlıyoruz. Daha önceden aşina olduğumuz kodlar yine karşımıza çıkıyor burada. Ana öğe olarak rss öğesini belirliyoruz ve sürümü bildirmek üzere bir özellik ekliyoruz. Daha sonra içeriğimizi eklemek için rss öğesinin alt öğesi olarak channel öğesini ekliyoruz.

Üçüncü bölümde site adı, sitenin açıklaması ve adresi gibi bilgileri tutmak üzere title, description ve link öğelerini oluşturup içlerini dolduruyoruz. Dördüncü bölümde; veritabanına eklenme sıralarına göre son 10 haberi çekip, her haberi, oluşturduğumuz item adlı öğelerin içine yerleştiriyoruz. Beşinci bölümde XML kodumuzu yazdırıyoruz ve son olarak altıncı bölümde, veritabanı bağlantımızı kapatıyoruz. Görüldüğü gibi gayet kolay anlaşılan ve düzenli kodlarla güzel bir RSS belgesi oluşturduk.

Kaynaklar

• http://en.wikipedia.org/wiki/Document_Object_Model
• http://tr2.php.net/manual/en/ref.dom.php
• http://www.tonymarston.net/php-mysql/dom.html
• http://www.webtasarimrehberi.com/index.php?option=com_content&task=view&id=140

Bu dokümanı okuduktan sonra aklınıza şöyle bir soru takılabilir : Neden XML kodlarını doğrudan PHP’ye (echo vs. ile) yazdırmak yerine DOM sınıflarını kullanıyoruz ? Aslında aynı işlemleri yabancıların hard-coding dedikleri, XML kodlarını kendimiz yazdırarak yapma işlemi de bir alternatif; fakat, bu yöntem, yukarıda da belirttiğim gibi, kodların hem daha kolay, hem daha düzenli, hem daha şık, hem de daha anlaşılır yazılmasını sağlıyor. Şöyle ki, PHP ve XML işaretlemeli diller olduğundan (markup language), diğer yöntemde XML’deki işaretlerle PHP’deki işaretler birbirine karışabilir (örneğin <? ifadesi), başka bir takım işaretler (Kaçış[escape] karakterleri gibi) eklememiz gerekebilirdi. Bu da kodun her yerinin işaret dolmasına ve büyük işlerde anlaşılmaz hale gelmesine neden olacaktı. Ayrıca ekstradan bazı kodlar da gerekecekti (n gibi). Üstüne üstlük bu işaretlemelerle uğraşırken düzenli bir XML kodu yazamayacaktık, hatta belki de hatalı yazacaktık. Belki daha kısa kod yazacaktık ama bu karmaşıklıklardan dolayı daha yavaş yazacaktık. Tabii ki çok büyük olmayan işlerde bu farklar pek hissedilmez; iki yöntem de gayet rahat kullanılabilir.

Son olarak gelelim bu bilgilerin AJAX ile ilgisine. AJAX, biliyorsunuz, Asynchronous JavaScript and XML’in kısaltılmışı. AJAX ile XML belgelerini işlemek için önce o XML belgesini oluşturmamız gerekecek. Bunu yaparken de PHP’nin DOM sınıflarından yararlanmak kolay bir yol olacak. Ama tabii ki AJAX ile XML’in doğrudan ilişkisi bu yazının konusu değil.

Yakın zamanda, bu dokümanın devamı sayılabilecek bir doküman daha yazacağım. O da PHP ile XML belgelerini işlemeyi ele alacak. (XML Parsing)

Umarım şimdiye kadar anlattıklarım bir fayda sağlamıştır. Hoşçakalın…

Örnekleri Buradan İndirebilirsiniz

 Kaynak www.gokhanozturk.com.tr