albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

HTML5 Web SQL Database API

Web SQL Database هى طريقة للتعامل مع قواعد البيانات من جانب العميل (client-side) باستخدام SQL فى الويب.

 

ما هى واجهة برمجة تطبيقات قاعدة بيانات الويب SQL؟

 

Web SQL Database API هى واجهة برمجة تطبيقات للتعامل مع قواعد بيانات من جانب العميل (client-side) باستخدام SQL فى الويب.

لا تعد Web SQL Database API في الواقع جزءًا من مواصفات HTML5 ولكنها مواصفات منفصلة تقدم مجموعة من واجهات برمجة التطبيقات للتعامل مع قواعد بيانات باستخدام SQL.

إذا كنت مطور back-end، فيجب أن تكون من السهل فهم مفاهيم وعمليات SQL.

 

💡 تعرف على “من هو مطور الـ back-end؟“.

💡 تعرف أيضًا على ماذا تعنى جملة “من جانب العميل client-side؟“.

 

الأساليب الأساسية – Core methods

 

فيما يلي 3 طرق أساسية محددة، سوف نغطيهم فى هذا الفصل:

الطريقة
(Method)		الوصف
openDatabaseتستخدم هذه الطريقة لإنشاء كائن database (قاعدة البيانات) إما باستخدام قاعدة بيانات موجودة أو إنشاء واحدة جديدة.
transactionتسمح لك هذه الطريقة القدرة على التحكم في transaction (المعاملة) وتنفيذ إما الـ commit (الإلتزام أو التنفيذ) أو الـ rollback (التراجع)بناءً على الحالة.
executeSqlتستخدم هذه الطريقة لتنفيذ استعلام SQL الفعلي.

 

Open Database

 

يمكننا استخدام طريقة ()openDatabase لفتح قاعدة بيانات موجودة بالفعل، وإذا لم يكن هناك قاعدة بيانات، يمكنك إنشاء قاعدة بيانات جديدة.

يمكنك إستخدام بناء الجملة (syntax) التالى لإنشاء قاعدة بيانات جديدة:

// Syntax Of => Create New DataBase
var db = openDatabase(DB Name, DB Version, BD Description, DB Size, Create callBack (Optional));

توضيح الكود السابق، تقبل طريقة openDatabase خمس معلمات (parameters)، وهم:

  1. اسم قاعدة البيانات (Database Name).
  2. رقم الإصدار (Version Number)
  3. وصف نصى لقاعدة البيانات (Database Description).
  4. حجم قاعدة البيانات (Database Size).
  5. إنشاء رد اتصال (Create a callback).

 

سيتم استدعاء المعلمة الخامسة (Create a callback)، لإنشاء رد اتصال بعد إنشاء قاعدة البيانات.

 

مثال:

// Create New DataBase Example
var db = openDatabase('db Name', '1.0', 'Testing DataBase', 2 * 1024 * 1024);

 

Executing queries

 

لتنفيذ استعلامات SQL، يمكنك استخدام دالة ()database.transaction، كالتالى:

// Create New Database 
var db = openDatabase('testDB', '1.0', 'Testing DataBase', 2 * 1024 * 1024);
// Create New Table
db.transaction(function (t) {   
    t.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, username, gender)'); 
});

يُنشئ البيان السابق جدول باسم “users” به 3 عمود (id – username – gender) في قاعدة بيانات “testDB“.

 

Insert data

 

بعد تنفيذ البيان السابق لإنشاء الجدول ، يمكننا إدخال بعض البيانات فى الجدول:

db.transaction(function (t) {   
    // Insert New Data (Records) 
    t.executeSql('INSERT INTO users (id, username, gender) VALUES (1, "Hamed", "Male")'); 
    t.executeSql('INSERT INTO users (id, username, gender) VALUES (2, "Noor", "Female")'); 
    t.executeSql('INSERT INTO users (id, username, gender) VALUES (3, "Mohamed", "Male")'); 
});

يمكننا أيضًا استخدام قيم ديناميكية لإدخال البيانات:

db.transaction(function (t) {   
    // Insert New Data (Records) - Dynamic Value 
    t.executeSql('INSERT INTO users (id, username, gender) VALUES (?, ?, ?'), [e_id, e_username, e_gender]; 
});

فى المثال السابق، كلا من [e_id و e_username و e_gender] هما متغيرات خارجية ، ويقوم executeSql بتعيين كل عنصر في وسيطة المصفوفة إلى “؟“.

 

Read data

 

لحد الأن، قُمنا بإنشاء قاعدة بيانات جديدة ثم قُمنا بإضافة بيانات بهذا الجدول، وأخيرًا كيفية قراءة هذه البيانات من قاعدة البيانات؟  

يوضح المثال التالي كيفية قراءة البيانات الموجودة بالفعل في قاعدة البيانات:

db.transaction(function(t) {
    t.executeSql('SELECT * FROM users', [], function(t, results) {
        var len = results.rows.length;
        var i;

        result = "<p>Total Rows: " + len + "</p>";
        document.getElementById('status').innerHTML += result;

        for (i = 0; i < len; i++) {
            result = results.rows.item(i).user;
            document.getElementById('status').innerHTML += result;
        }

    }, null);
});

 

مثال كامل على كل ما سبق

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
 
  <body>
    
    <div class="status" name="status">Status Message</div>

    <script>

        var db = openDatabase('testDB', '1.0', 'Testing DataBase', 2 * 1024 * 1024);
        var result;

        db.transaction(function(t) {
            t.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, username, gender)');
            t.executeSql('INSERT INTO users (id, username, gender) VALUES (1, "Hamed", "Male")');
            t.executeSql('INSERT INTO users (id, username, gender) VALUES (2, "Noor", "Female")');
            t.executeSql('INSERT INTO users (id, username, gender) VALUES (3, "Mohamed", "Male")');

            result = '<p>DB "users" created & row inserted.</p>';
            document.getElementById('status').innerHTML = result;
        });


        db.transaction(function(t) {
            t.executeSql('SELECT * FROM users', [], function(t, results) {
                var len = results.rows.length;
                var i;

                result = "<p>Total Rows: " + len + "</p>";
                document.getElementById('status').innerHTML += result;

                for (i = 0; i < len; i++) {
                    result = results.rows.item(i).user;
                    document.getElementById('status').innerHTML += result;
                }

            }, null);
        });
    </script>
  </body>
</html>

 

دعم المتصفحات – Web SQL Database

 

Web SQL Database API مدعوم فى أحدث إصدارات المتصفحات (Safari و Chrome و Opera و FireFox).

 

الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements