Türkiyenin Arama Motoru

Gelelim uygulamamızın nasıl işlediğine.

Web sitemizde yer alan içerik sayfalarımız her ne kadar statik gibi görünseler de JavaScript ile oluşturulmuş bir dinamik içerik ekleme olayı söz konusu. Bunu, herhangi bir içerik sayfasının kaynak koduna bakarak görebilirsiniz. Sayfa üzerinde yer alan içerik aslında sayfamızın kodunda yer almıyor!

Prensibimiz sayfa içeriklerinin tümünü tek bir dosyada toplayıp, bunları ayrı ayrı ilgili sayfalara çağırarak gösterilmesi sistemine dayalı. Aynen sunucu taraflı veritabanı uygulamalarında olduğu gibi. Böylece aranacak dize parçasını öncelikle tüm içeriği ihtiva eden dosyada aratıp, hangi içerik bloklarının bu dizeyi barındırdığını bulabilir ve ilgili içerik bloğunu gösteren sayfaya link verebiliriz.

Burada veritabanı işlevini görecek olan ve içeriklerin tümünü barındıran dosyamız, .js uzantılı basit bir JavaScript dosyası.

icerik.js

icerikOrijinal = new Array;
icerikOrijinal[0]= "

StudioWeb’te web programcılığı konusunda…"
...

Farketmeniz gerektiği üzere her bir içerik bloku bir dizinin (array) elemanları olarak "tek bir satırda" girili. İçerik satırını birden fazla satıra bölmeniz JavaScript hatası verecektir. İçeriğinizin, HTML sayfasında birden fazla satıra bölünmüş olarak gözükmesi gerekebilir. Bu bir sorun yaratmayacaktır.
,

gibi gerekli HTML takılarını direk olarak içerik blokuna ekleyebilirsiniz. Mesela içerik blokları

başlık takıları arasında yer alan konu başlıklarını da ihtiva ediyor. Böylece aranacak olan kelimenin sadece konu başlığında yer alması durumunda da arama işleminiz doğru sonucu verecektir.

Bu noktada hemen dikkatiniz çekmek istediğim bir konu, içeriklerinizde yer alacak (") çift tırnak işaretlerini (') tek tırnak ya da (") JavaScript kaçış karakteriyle değiştirmenizin gerekliliği. Aynen icerikOrijinal[0]'daki "StudioWeb'te yer alacak teknolojiler neler olabilir?" ifadesinde olduğu gibi. Bu durumda program bu tırnak işaretlerinin de içeriğin bir parçası olduğunu anlayacaktır.

Dosyamızda icerikOrijinal dizisine paralel olarak bir de icerikBk isimli bir dizi daha var. Bu dizinin elemanları orijinal dizi elemanlarının küçük harfli birer kopyası. Ziyaretçi, aramanın büyük harf / küçük harf ayrımı gözetilmeden yapılmasını istiyorsa, girmiş olduğu kelime önce küçük harflere çevrilip arama işlemi bu dizi elemanlarında yapılacak.

icerikBk[0]= icerikOrijinal[0].toLowerCase();


satırındaki toLowerCase() metodu dize cinsinden bir değerin tamamını küçük harfe çevirmekte.

İçerik dosyamız bu haliyle uygulamamızda kullanmak üzere hazır. Gelelim içerik sayfalarımızın bu dosyamızda yer alan içerikleri nasıl çağırıp kullandığına.

Herhangi bir içerik sayfasının kaynak koduna baktığımızda da görebileceğimiz üzere merkezi dosyada bulunan içeriği bir HTML sayfasına getirtebilmek için birkaç satırlık kod yazmak yeterli. studio_web.html sayfasında



satırı icerik.js JavaScript dosyasını yazıldığı HTML sayfası için kullanılabilir hale getiriyor. ... takıları arasında, görünmesini dilediğiniz herhangi bir yerde yazacağınız



satırları, JavaScript dosyasındaki icerikOrijinal dizisinin 0 indeks numaralı (yani ilk) elemanının sahip olduğu içerik blokunu sayfanıza taşıyacaktır. Hangi içerik sayfasının hangi içerik blokunu çağırdığı önemli. Her sayfa farklı bir içeriği getiriyor.

Sanırım buraya kadar her şey anlaşılır vaziyette ve o kadar da karmaşık değil. Simdi arama fonksiyonunu sitemize dahil edebiliriz

Arama işleminin yapıldığı arama.html sayfamız bir kaç elemandan oluşan bir form ve bir scriptten meydana geliyor.

arama.html

Formumuzda en dikkat edilmesi gereken nokta, formumuzun ve de form elemanlarının ünik birer isme sahip olmaları ve form bilgilerini gönderme butonu yerine ara() JavaScript fonksiyonunu çağıran bir form düğmesinin yer alması.

Büyük harf/küçük harf ayrımı yap

Sayfamızın scriptlerle ilgili bölümünde ise öncelikle



satırı ile içeriklerimizi kapsayan JavaScript dosyası bu sayfamızın da kullanımına sunuluyor. Daha sonra formumuzun çağıracağı ara() fonksiyonununu tanımlayan bir script yazılıyor.

// Arama motoruna dahil olan sayfalar
sayfalar = new Array;
sayfalar[0]="studio_web";
sayfalar[1]="e_chip";
sayfalar[2]="blue_tooth";
sayfalar[3]="java_cep";

satırları arama fonksiyonumuz için kullanılabilir durumda olacak HTML sayfa isimlerini (.html dosya uzantıları hariç olacak şekilde) bir diziye yerleştiriyor. Önemli nokta ise köşeli parantezler arasında bulunan indeks numaralarının, icerik.js dosyasındaki ilgili içerik bloklarının indeks numaraları ile aynı olmak zorunda olmaları.


Mesela 3 numaralı java_cep.html sayfasının içeriğini icerikOrijinal[3] bloku oluşturuyor.

var bulundu=0;

değişkeni arama işleminin olumlu ya da olumsuz sonuçlandığını belirleyecek (0 ise bulunmadı, 1 ise bulundu).

var arananDize= document.formum.dize.value;

değişkeni ise arama alanına ziyaretçinin girmiş olduğu değeri okuyor.

if (document.formum.bk.checked) { //büyük harf/küçük harf ayrimi yapilacaksa
dizi=icerikOrijinal;
}
else {//büyük harf/küçük harf ayrimi yapilmayacaksa
arananDize= arananDize.toLowerCase();
dizi=icerikBk;
}

koşul ifadesi ziyaretçinin arama işleminde büyük harf / küçük harf ayrımına dikkat edilip edilmemesini belirten alanda yapmış olduğu tercihe göre, arama işleminin icerikOrijinal mi yoksa icerikBk dizisinde mi yapılacağını belirliyor.

if(arananDize!="" && arananDize!=null ){
// alana bir deger girildiyse
...
}
else { // alana bir deger girilmediyse
document.write("İçerik girmediniz!

Dönüp tekrar aramak için
buraya tıklayınız.")
}

koşul ifadesi arama alanına bir değer girilip girilmediğini kontrol ediyor.

Eğer bir değer girildiyse..

for (var i=0; i<=dizi.length-1; i++){
// tüm içerikleri teker teker ara
...

}

döngüsüyle arama yapılacak dizinin sahip olduğu tüm içerik elemanlarında arama başlatılıyor. Aramayı yapan ifade ise..

if (dizi.indexOf(arananDize) != -1){
// aranan dize içerikte bulunduysa
bulundu=1;
aramaSonuclari = aramaSonuclari + "" + sayfalar + ".html
";
}

satırlarındaki indexOf() metodu. Bu metod aranan kelimenin bulunamaması durumunda -1 değerini alıyor. Bu durumda yukarıdaki ifadenin Türkçe karşılığı şu: "Aranan kelime bulunduysa bulundu değişkeninin değerini 1 yap, kelimeyi içeren blokun indeks numarasıyla (ki bu döngümüzde i değişkeninin değeri ile kayıtlı tutuluyor) aynı numaraya sahip olan HTML sayfasına gidecek linkleri bir degiskene kaydet."

Son olarak bulundu değişkeninin sahip olduğu son değere göre arama sonuçlarını yazdırabiliriz.

Aranan ifade bulunduysa en başta tanımlanan bulundu değişkeninin değeri 1 olacağından

if (bulundu==1){ // aranan dize bulunduysa
document.write("" + arananDize + " dizesi için arama sonuçları:

" + aramaSonuclari + "

Dönüp tekrar aramak için
buraya tıklayınız.");
}

koşulu işleme konuyor ve sayfaya ilgili mesaj yazdırılıyor. Aranan ifade bulunmadıysa en başta tanımlanan bulundu değişkeninin değeri olan 0 hala geçerli olacağından

if (bulundu==0){ // aranan dize bulunmadiysa
document.write("" + arananDize + " dizesi için arama sonuçları:

" + "Bu dizeye sahip bir içerik bulunamadı.


Dönüp tekrar aramak için buraya tıklayınız.");
}

koşulu işleme konuyor ve sayfaya ilgili mesaj yazdırılıyor.

Peki bu uygulamayı kendi çalışmalarınızda kullanmak için ne yapmanız gerekli? Çok az şey, üstelik scriptin nasıl çalıştığını bilmenize bile gerek yok:

İlk yapmanız gereken kendi sayfalarınızı ara() fonksiyonunun en başındaki sayfalar dizisine yeni eleman olarak eklemek. Örneğin yeni_sayfa.html isimli bir sayfa için..

...
sayfalar[4]="yeni_sayfa";

gibi.

Daha sonra yeni sayfanızın içeriğini icerik.js dosyasına yeni bir blok olarak tanımlamak.

icerikOrijinal[4]= "

Yeni sayfa başlığı