Simple HTML DOM Parser kullanarak HTML işleme

admin — Sat, 31 Jul 2010 12:12:24 +0000

Bir projenizde HTML dosyalarıyla işlem yapmanız gerektiğini düşünün. Kaynağı önemli değil, yerel veya uzak bir dosya olabilir, ya da anlık olarak oluşturulmuş bir html çıktısı olabilir. Bahsi geçen dosyadan veri çekmek, değiştirmek ve tekrar çıktı yapmak için regular expressions (düzenli ifadeler) her zaman için çözüm yolu değildir. Bu örneğimizde php kullanarak html dosyalarından nasıl veri çekileceğini göreceğiz.

1. Hazırlık

İlk yapmamız gereken şey Php Simple Html Dom Parser adlı kütüphane dosyasını bilgisayarımıza indirmek. İndireceğiniz zip dosyasında birkaç dosya var ancak asıl işimize yarayacak olan simple_html_dom.php, diğerleri örnekler ve yardım dosyaları.

2. Basit Örnekler

Kütüphanenin kullanımı oldukça kolay ancak yine de bazı basit işlevlerini incelemek ve mantığını kavramak gerekiyor.

Html Dosyasını Tanıtma

$html = new simple_html_dom();

// metin olarak tanıtma
$html->load('Merhaba Dünya!
İşte ilk örneğimiz');

// dosyadan tanıtma
$html->load_file('http://arsiv.microturk.net/');

Dosya tanıtma işleminizi örnekte olduğu gibi ister metin olarak isterseniz de dosya olarak yapabilirsiniz. Dosya olarak tanıtmanında seçenekleri mevcuttur. Dosya ister uzak bir sunucuda olabilir ya da kodumuzun çalıştığı yere sunucu da olabilir.

Not: load_file() fonksiyonunun uzak sunucudan dosya çekebilmesi için php.ini dosyasındaki “allow_url_fopen” değeri true olarak aktif olmalıdır.

Verilere Erişim

DOM nesnemizi oluşturduktan sonra find() fonksiyonunu kullanarak dosyamızda koleksiyonlarla işlem yapmaya başlayabiliriz. Koleksiyon seçiciler ile bulunan nesneler grubuna verilen addır. Kullanılan söz dizimi jQuery ile oldukça benzerlik göstermektedir o yüzden jQuery kullananlar için alışması hiçte zor olmayacaktır.

// HTML'i oluştur ve yükle
include('simple_html_dom.php');
$html = new simple_html_dom();
$html->load('Merhaba Dünya!
İşte ilk örneğimiz');

// ikinci paragrafı bulabilmek için "p" etiketini aratıyoruz
$element = $html->find("p");

//ikinci bulunan "p" etiketine ekleme yap
$element[1]->innertext .= " ve devamı da gelecek.";

echo $html->save();

2-4 paragrafları: Önceki örnekte de açıklandığı gibi dosyayı tanıtma ve yükleme işlemi.

7. paragraf: Dosyadaki tüm “p” etiketleri bulur ve 0′dan başlayarak bir array’a atama yapar.

10. paragraf: Bu satırda 2. bulunan “p” etiketine ekleme yapılıyor. Satırda kullanılan innertext işleci sayesinde bulunan nesnenin sadece metin kısmında işlem yapılır. Eğer outertext işlecini kullansaydık bulunan nesnedeki tüm etiketler de işleme alınacaktı.

Birkaç satır daha ekleyerek işlem yaptığımız 2. “p” etiketine class özelliği ekleyeceğiz.

 $element[1]->class = "ornek";
 echo $html->save();

Diğer Seçici Betikler

Aşağıdaki kullanabileceğiz bazı diğer seçici betikleri de veriyorum. jQuery kullanmışsanız ya da kullanıyorsanız eminim çok tanıdık gelecektir.

# ilk id="foo" nesnesini bul
$tekil= $html->find('#foo', 0);

# tüm class="foo" olan nesneleri bul
$koleksiyon= $html->find('.foo');

# dosyadaki tüm a etiketlerini bul
$koleksiyon= $html->find('a');

# h1 içinde yer alan tüm a etiketlerini bul
$koleksiyon= $html->find('h1 a');

# title özelliği "resimler" olan tüm img etiketlerini bul
$koleksiyon= $html->find('img[title=resimler]');

İlk örnekte 0 değerini vererek sadece ilk bulunan nesnenin işleme alınmasını sağladık. Diğer koleksiyonlarda ise tüm nesneler işleme alınıyor. Kütüphanenin kullanma kılavuzuna buradan erişebilirsiniz.

Javascript ile grafik çizimleri

admin — Tue, 07 Aug 2007 07:29:08 +0000

Bu sayfada ingilizce olarak bahsedilen javascript kullanarak grafik çizimlerinden bahsedeceğiz.

Anket, istatistik vs. gibi web uygulamalarında sonuçları grafiksel olarak göstermek için .gif, .jpg gibi resim formatlarını kullanırız. Ancak bu her zaman tam istediğimiz kalitede bir grafik elde etmemizi sağlamaz çünkü asıl amacımız sonucu daha anlaşılır biçimde göstermektir. İşte bu gibi durumlarda Web 2.0 ile daha çok kullanılmaya başlanan JavaScript imdadımıza yetişir.

Üstte bahsettiğim sitede en üstte banner niyetine duran grafikler tamamen bu yöntem ile yapılmıştır.

Deneme yapabilmek için wz_jsgraphics.zip kütüphanesini indirin ve sayfanıza aşağıdaki kod ile ekleyin.

Gerisi zaten bahsettiğim sayfada ayrıntılı olarak anlatılıyor.

Microturk :: The Serbest Blog » Programlama