HTML5 WEB SQL

Web SQL Database API sebenarnya bukan bagian dari spesifikasi HTML5 tetapi itu adalah spesifikasi terpisah yang memperkenalkan seperangkat API untuk memanipulasi basis data sisi klien menggunakan SQL.

Database SQL Web akan bekerja di versi terbaru dari Safari, Chrome dan Opera.

Metode Inti

Ada tiga metode inti berikut yang didefinisikan dalam spesifikasi yang akan saya bahas dalam tutorial ini -

openDatabase - Metode ini membuat objek database baik menggunakan database yang sudah ada atau membuat yang baru.

transaction - Metode ini memberi kita kemampuan untuk mengendalikan transaksi dan melakukan komit atau kembalikan berdasarkan situasi.

executeSql - Metode ini digunakan untuk mengeksekusi query SQL aktual.

Buat Javascript seperti dibawah ini

 
      
            var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS CONTOH (id unique, nama)'); 
            tx.executeSql('INSERT INTO CONTOH (id, nama) VALUES (1, "BUDI")'); 
            tx.executeSql('INSERT INTO CONTOH (id, nama) VALUES (2, "DIMAS")'); 
            msg = 'Log message created and row inserted.

'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM CONTOH', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "Found rows: " + len + "

"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "" + results.rows.item(i).nama + "

"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 

Maka Output Hasil nya seperti dibawh ini

Tampilan Pada Browser

Bisa juga di cek melalui browser dengan menggunakan inspect element

Tampilan Saat Inspect Element