Berna Çorbacı

JAVASCRIPT KÜTÜPHANELERİNİN VERİ TABANI İŞLEMLERİNDE KULLANIMI VE TAFFY DB KÜTÜPHANESİ

JavaScript Kütüphanelerinin Veri Tabanı İşlemlerinde Kullanımı

Merhaba arkadaşlar bu hafta JavaScript kütüphanelerinin veri tabanı işlemlerinde kullanımını ve Taffy DB kütüphanesini göreceğiz. JavaScript veri tabanı işlemlerini gerçekleştiren temel iki kütüphane vardır: ActiveRecord.js (veri modelleme, geri butonu ve tarih desteği de içeren bir JavaScript veri tabanı kütüphanesi) ve Taffy DB (SQL veri tabanı gibi düşünebileceğimiz, gerekli veri tabanı işlevlerini hızlıca gerçekleştirebilen bir JavaScript veri tabanı kütüphanesi)

Taffy DB Kütüphanesi

Taffy DB tarayıcıda bulunan bir SQL veri tabanı veya gelişmiş bir "dizi yöneticisi" olarak düşünebileceğimiz, açık kaynak bir JavaScript kütüphanesidir. İnternet uygulamaları için bir veri tabanı katmanı gibi çalışır. Verileri okuma, düzenleme, silme, döngüler kullanma, verileri sıralama ve gelişmiş sorguları kullanma gibi pek çok veri tabanı işlemi bu kütüphane sayesinde JavaScript sayfaları için de yapılabilir hale gelmiştir.

Başlıca özellikleri şöyledir :

Küçük dosya boyutlu ve oldukça hızlı sorgular

Tüm belge nesnesi modeli kütüphaneleriyle uyumluluk

Basit söz dizimi (syntax)

Herhangi bir internet uygulamasına ekleme kolaylığı

Güncelleme, okuma, silme, oluşturma işlemleri arayüzü

Sınıflandırma

Döngü oluşturma

Gelişmiş sorgular

Kütüphaneyi Taffy DB linkinden indirebilirsiniz. Şimdi kütüphanenin kullanımını, bir ASP.NET sayfası üzerinde görelim. Bunun için kütüphaneyi indirdikten sonra, ASP.NET projemizin dosyalarına şekilde görüldüğü gibi ekliyoruz :

Ardından sayfanın <head> bölümünde, aşağıdaki kod satırıyla kütüphanenin dizinini göstererek, kütüphaneyi projemizde kullanabilir hale getiriyoruz :

 <script type="text/javascript" src="taffydb-master/taffy.js"> </script>

Şimdi sayfamızda basit bir veri tabanı oluşturmayı görelim :


var sehirler = TAFFY([{ sehirIsmi: "Eskişehir", plakaKodu: "26" },     
                                      { sehirIsmi: "İstanbul", plakaKodu: "34" }, 
                                      { sehirIsmi: "Zonguldak", plakaKodu: "67"}]);

Örneğimizde global TAFFY fonksiyonunu kullanarak, "sehirler" isimli yeni bir veri tabanı oluşturduk ve oluşturduğumuz veri tabanının satırlarını {sütun1_ismi: "değeri" , sütun2_ismi: "değeri" } formatında ekledik. Örneğimizi genişletip, veri tabanı işlemlerini örneğimizde uygulamadan önce, bu işlemleri gerçekleştirirken kullanacağımız temel Taffy DB fonksiyonlarını tanıyalım :

insert(): Parametre olarak veri tabanı oluştururken yazdığımız formatta, veri tabanı kayıtlarını alır ve ilgili veri tabanına ekler. Kullanımı :

 sehirler.insert({ sehirIsmi: "Ankara", plakaKodu: "06" });

limit(): Parametre olarak bir sayı alır ve bu sayı, veri tabanının ilk kaç verisi üzerinde çalışacağımızı belirtir. Yani veri tabanın bir kısmı üzerinde işlem yapabilmemizi sağlar. Örneğin fonksiyona "limit(4)" şeklinde bir parametre girdiğimizde, veri tabanının ilk 4 elemanı üzerinde işlemler yapabiliriz. Kullanımı:

 sehirler.limit(4);

start(): Parametre olarak bir sayı alır ve bu sayı, veri tabanının kaçıncı kaydından itibaren işlem yapacağımızı belirtir. "start(3)" dediğimizde 3. kayıttan itibaren veri tabanının elemanları üzerinde çalışırız. Kullanımı:

 sehirler.start(3);

update(): Parametre olarak güncellenecek veya değiştirilecek objenin, hangi sütun veya sütunları değiştirilecekse onu alır ve yeni değeriyle eşleştirilir. Aşağıdaki örneğimizde "sehirIsmi" sütununun değeri "Eskişehir" olan kaydın, bu değeri "İzmir" olarak değiştirilmiştir:

 sehirler({ sehirIsmi: "Eskişehir"}).update({"sehirIsmi":"İzmir"});

Eğer bu kodumuzu aşağıdaki şekilde yazmış olsaydık, veri tabanındaki tüm "sehirIsmi" sütunlarını "İzmir" değeriyle değiştirmiş olacaktık:

 sehirler().update({"sehirIsmi":"İzmir"});

remove(): Bu fonksiyon herhangi bir parametre almıyor ve veri tabanından istenilen kaydı silmeye yarıyor. Peki herhangi bir parametre almadan hangi kaydı sileceğimizi nereden bilebiliriz? Bu sorunun cevabı; sileceğimiz kaydı, ayırt edilebilirliğini sağlayan ilgili sütun ve satır değeri ile veri tabanı üzerinden çağırmak olacaktır. Aşağıdaki örneğimizde "sehirIsmi" sütunun değeri "Ankara" olan kaydı veri tabanından sildik:
```
 sehirler({ sehirIsmi: "Ankara" }).remove();
```
Eğer bu kodu aşağıdaki şekilde yazmış olsaydık, veri tabanındaki tüm kayıtları silmiş olacaktık:
```
 sehirler().remove();
```
sort(): Fonksiyon veri tabanı içindeki verileri, istenilen düzene göre sıralamayı sağlar. Parametre olarak, verilerin sıralanması istenilen ilgili sütunun ismini ve sıralanma biçimini (artan, azalan düzen) alır. Aşağıdaki kullanımda "sehirler" veri tabanı üzerindeki veriler, "plakaKodu" sütununa göre, plaka kodları artan (ascending) düzende olacak şekilde sıralanmıştır.

 sehirler.sort("plakaKodu asec");

select(): Parametre olarak bir veya daha fazla sütunun isimlerini alır. Fonksiyonla, ismi yazılan sütunlardaki veriler, veri tabanından seçilmiş olur. Bu veriler, istenirse bu yolla başka bir veri dizisine aktarılabilir. Örneğimizde bu şekilde, 2 sütunun değerlerinin seçilip, bir başka veri dizisine aktarılışını görelim:

 var veri = sehirler().select("sehirIsmi","plakaKodu");

join(): Fonksiyon iki veri tabanın, istenilen sütunlarını birleştirerek onlar üzerinde işlem yapabilmemizi sağlar. Birinci veri tabanımızın adı "vt1", ikinci veri tabanımızın adı da "vt2" olsun. "vt1" veri tabanımız "sütun_vt1" ve "vt2" veri tabanımız da "sütun_vt2" sütunlarına sahip olsun. Şimdi bu iki veri tabanının bu sütunlarını birleştirmeyi görelim:

 vt1().join(vt2, ['sütun_vt1', 'sütun_vt2'])

Şimdi buraya kadar gördüklerimizden faydalanarak basit bir ASP.NET projesi oluşturalım:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="taffydb-master/taffy.js"> </script>
    <script type="text/javascript">

        var sehirler = TAFFY([{ sehirIsmi: "Eskişehir", plakaKodu: "26" },
                              { sehirIsmi: "İstanbul", plakaKodu: "34" }, 
                              { sehirIsmi: "Zonguldak", plakaKodu: "67"}]);

        sehirler.insert({ sehirIsmi: "Ankara", plakaKodu: "06" });

        function tablo_olustur() {

            var body = document.getElementsByTagName("body")[0];

            // <table> ve <tbody> elemanlarını oluşturma
            var tbl = document.createElement("table");
            var tblBody = document.createElement("tbody");

            // tablo hücrelerini ve satırlarını oluşturma
            var satır1 = document.createElement("tr");

            var hucre1 = document.createElement("td");
            var hucreText1 = document.createTextNode("Şehir İsmi:");
            hucre1.appendChild(hucreText1);
            satır1.appendChild(hucre1)

            var hucre2 = document.createElement("td");
            var hucreText2 = document.createTextNode(sehirler().select("sehirIsmi"));
            hucre2.appendChild(hucreText2);
            satır1.appendChild(hucre2);

            var satır2 = document.createElement("tr");

            var hucre3 = document.createElement("td");
            var hucreText3 = document.createTextNode("Plaka Kodu:");
            hucre3.appendChild(hucreText3);
            satır2.appendChild(hucre3)

            var hucre4 = document.createElement("td");
            var hucreText4 = document.createTextNode(sehirler().select("plakaKodu"));
            hucre4.appendChild(hucreText4);
            satır2.appendChild(hucre4);

            // tabloya oluşturulan satırları ekleme
            tblBody.appendChild(satır1);
            tblBody.appendChild(satır2);

            // <tbody>'yi <table>'ın içine koyma
            tbl.appendChild(tblBody);
            // <table>'ı <body>'ye ekleme
            body.appendChild(tbl);
            // çerçeve oluşturma
            tbl.setAttribute("border", "2");
        }
    </script>
</head>
<body style="width: 696px">
    <form id="form1" runat="server">
    <input type="button" value="Tablo Oluştur" onclick="tablo_olustur()">
    </form>
</body>
</html>

Örneğimizde HTML içeriğinde, tablo oluşturma işlemi için bir buton ve JavaScript içeriğinde de bu işlemi gerçekleştirip, oluşturduğumuz "sehirler" veri tabanının verilerini bu tablonun hücrelerine yerleştiren "tablo_oluştur" fonksiyonunu oluşturduk. JavaScript içeriğinde aynı zamanda, öğrendiğimiz şekliyle "TAFFY()" fonksiyonuyla bir veri tabanı oluşturduk; "insert()" fonksiyonuyla veri tabanına bir veri ekledik; "select()" fonksiyonuyla da ilgili sütunun değerlerini hücrelere yazdırmak için seçtik. Şimdi bu örneğimizin, tablo oluştur butonuna bastıktan sonraki çıktısını görelim:

Örneğimizde şimdi daha önce öğrendiğimiz şekliyle, aşağıdaki "update()" yani düzenleme fonksiyonunu, <script> etiketi içerisine ekleyip bir kaydın içeriğini değiştirelim:

sehirler({ sehirIsmi: "İstanbul" }).update({ sehirIsmi: "İzmir" ,plakaKodu: "35"});

Örneğimizin bu kodla düzenleme yaptıktan sonraki çıktısını görelim:

Benzer şekilde aşağıdaki kod ile "remove()" yani silme fonksiyonunun işleyişini görelim:

sehirler({ sehirIsmi: "Zonguldak" }).remove();

Bu kodu ekledikten sonra tablomuzun son hali:

Son olarak da "first()" ve "last()" fonksiyonlarının kullanımını,aşağıdaki kodu ekleyerek, veri tabanımız üzerinde bir JavaScript mesaj kutusu içinde görelim:

alert("son kayıt: " + sehirler().last().sehirIsmi + "  ilk kayıt: " + sehirler().first().sehirIsmi);

Örneğimizin son hali üzerinde bu kodun çalışmasını görelim:

Taffy DB kütüphanesinin kullanımı ve işlevleri bu şekildedir. Anlaşılacağı üzere kütüphanenin veri tabanı işlemlerinde kullanımı oldukça kolay ve veri tabanı ile ilgili pek çok ihtiyacı karşılayacak düzeydedir. Benzer şekilde, öğrendiğimiz diğer fonksiyonları da kullanarak istediğimiz çeşitlilikte veri tabanı işlemleri yapabiliriz.

Kaynaklar:
http://www.taffydb.com/
https://github.com/typicaljoe/taffydb
http://www.taffydb.com/workingwithdata
http://ajaxian.com/archives/taffy-db-javascript-database

1 yorum:

Muzaffer2 Aralık 2013 15:58
Bu kütüphaneyi ASP.NET'in GridView kontrolüyle birleştirip GridView üzerinde tarayıcı tarafında istenen şekilde filtreleme yapabilmeyi sağlayan bir kütüphane yazmak güzel bir proje olabilir :)

Güzel bir yazıydı, teşekkür ederim. Eline sağlık.
YanıtlaSil
Yanıtlar

Berna Çorbacı

Sayfalar

24 Kasım 2013 Pazar

JAVASCRIPT KÜTÜPHANELERİNİN VERİ TABANI İŞLEMLERİNDE KULLANIMI VE TAFFY DB KÜTÜPHANESİ

1 yorum: