HTML5 - वेब SQL डेटाबेस

वेब एसक्यूएल डेटाबेस एपीआई वास्तव में एचटीएमएल 5 विनिर्देश का हिस्सा नहीं है, लेकिन यह एक अलग विनिर्देश है जो SQL का उपयोग करके क्लाइंट-साइड डेटाबेस में हेरफेर करने के लिए एपीआई का एक सेट पेश करता है।

मैं मान रहा हूं कि आप एक महान वेब डेवलपर हैं और अगर ऐसा है तो इसमें कोई संदेह नहीं है, आप एसक्यूएल और आरडीबीएमएस अवधारणाओं के बारे में अच्छी तरह से जानते होंगे। यदि आप अभी भी एसक्यूएल के साथ एक सत्र रखना चाहते हैं, तो आप हमारे एसक्यूएल ट्यूटोरियल के माध्यम से जा सकते हैं ।

वेब एसक्यूएल डाटाबेस सफारी, क्रोम और ओपेरा के नवीनतम संस्करण में काम करेगा।

कोर तरीके

इस ट्यूटोरियल में परिभाषित करने वाले तीन मुख्य तरीकों का अनुसरण कर रहा हूं -

openDatabase - यह विधि या तो मौजूदा डेटाबेस का उपयोग करके डेटाबेस ऑब्जेक्ट बनाता है या नया बना रहा है।
transaction - यह विधि हमें लेनदेन को नियंत्रित करने और स्थिति के आधार पर कमिट या रोलबैक करने की क्षमता प्रदान करती है।
executeSql - इस विधि का प्रयोग वास्तविक SQL क्वेरी को निष्पादित करने के लिए किया जाता है।

डेटाबेस खोलना

OpenDatabase विधि एक डेटाबेस खोलने वह पहले से मौजूद, इस विधि यह पैदा करेगा, यदि वह पहले से मौजूद नहीं है, तो का ख्याल रखता है।

डेटाबेस बनाने और खोलने के लिए, निम्न कोड का उपयोग करें -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

उपर्युक्त विधि ने निम्नलिखित पाँच पैरामीटर लिए -

डेटाबेस नाम
संस्करण संख्या
पाठ विवरण
डेटाबेस का आकार
निर्माण कॉलबैक

अंतिम और 5 वें तर्क, सृजन कॉलबैक को बुलाया जाएगा यदि डेटाबेस बनाया जा रहा है। इस सुविधा के बिना, हालांकि, डेटाबेस अभी भी मक्खी पर बनाए जा रहे हैं और सही ढंग से संस्करणित हैं।

विचारणीय प्रश्न

किसी क्वेरी को निष्पादित करने के लिए आप database.transaction () फ़ंक्शन का उपयोग करते हैं। इस फ़ंक्शन को एक एकल तर्क की आवश्यकता है, जो एक ऐसा फ़ंक्शन है जो वास्तव में क्वेरी को निष्पादित करने का ख्याल रखता है -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

उपरोक्त क्वेरी 'mydb' डेटाबेस में LOGS नामक एक टेबल बनाएगी।

INSERT ऑपरेशन

तालिका में प्रविष्टियाँ बनाने के लिए हम उपरोक्त उदाहरण में सरल SQL क्वेरी जोड़ते हैं -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

हम निम्न प्रकार से प्रवेश करते हुए गतिशील मान पास कर सकते हैं -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

यहाँ e_id तथा e_log बाहरी चर हैं, और सरणी तर्क में प्रत्येक आइटम को "?" s में निष्पादित करते हैं।

पढ़ें ऑपरेशन

पहले से मौजूद रिकॉर्ड को पढ़ने के लिए हम परिणामों को पकड़ने के लिए कॉलबैक का उपयोग करते हैं -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

अंतिम उदाहरण

तो अंत में, हम इस उदाहरण को पूर्ण HTML5 दस्तावेज़ में निम्नानुसार रखते हैं और इसे सफ़ारी ब्राउज़र के साथ चलाने का प्रयास करते हैं।

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -