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ü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" });
sehirler.limit(4);
sehirler.start(3);
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();
sehirler.sort("plakaKodu asec");
var veri = sehirler().select("sehirIsmi","plakaKodu");
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
