Search

HTML5 WebSQL Kullanımı



0 yorum

HTML5 WebSQL Kullanımı

html5 websqlMerhaba arkadaşlar bu yazımda WebSQL kullanımından ve özelliklerinden bahsedeceğim. WebSQL istemci taraflı çalışan ve HTML5 ile birlikte gelen bir özellik. WebSQL sayesinde SQL işlemlerini kullanıcı tarafında dilediğimiz gibi gerçekleştirebiliyoruz. Bu işlemleri gerçekleştirirken de SQL ifadelerini (Select, Insert gibi) kullanıyoruz.WebSQL üzerinde veritabanı oluşturma, tablo oluşturma, tabloya veri ekleme ve tablodan veri okuma özelliklerini bir örnek kod üzerinden anlatacağım.

Senaryomuzda bir okul veritabanı olacak. Okul veritabanı üzerinde Kisi tablosu oluşturacağız ve yeni kayıtlar ekleyeceğiz. Ardından eklemiş olduğumuz kayıtları çekip ekranda göstereceğiz.

JavaScript:
//WebSQL Veritabanı Oluşturmak
var veritabani = openDatabase('okulDB','1.0','deneme',4*1024*1024); //Veritabanı Adı, Versiyon No, Açıklama, Alan(4MB)

veritabani.transaction(
    function(tx){
        //WEB SQL: Yeni İşlem ve Tablo Oluşturmak
        tx.executeSql('CREATE TABLE IF NOT EXISTS KISI(id unique, adSoyad)');
        //WEB SQL: Tabloya veri eklemek
        tx.executeSql('INSERT INTO KISI(id,adSoyad) VALUES (1,"EREN GÜVERCİN")');
        tx.executeSql('INSERT INTO KISI(id,adSoyad) VALUES (2,"ALİ TAŞ")');
    }
)

//WEB SQL: Tablodan veri okumak
veritabani.transaction(
    function(tx){
        tx.executeSql(
            'SELECT * FROM KISI',
            [],
            function(tx,result)
            {
                var tabloSatirSayisi = result.rows.length;
                for(var i = 0; i < tabloSatirSayisi; i++)
                {
                    alert(result.rows.item(i).id + " - " +
 result.rows.item(i).adSoyad);  //id ve adSoyad bilgilerini ekrana yazdırıyoruz
                }
            }
        )
    }
)


Oluşturalan veritabanı ve içeriğini tarayıcının geliştirici araçları(Dev Tools) üzerinde(F12 ile açılır)  görüntüleyebilirsiniz. Ekran görüntüsü aşağıdaki gibi.

WebSql erenguvercin.com

0 yorum:

Yorum Gönder

Check Page Rank
DMCA.com