الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

HTML 5 Web SQL Database Core Trident

الكاتب：Eve Cole وقت التحديث：2025-03-29 22:32:02

لم يتم تضمين واجهة برمجة تطبيقات قاعدة بيانات الويب SQL بالفعل في مواصفات HTML 5. إنها مواصفات مستقلة تقدم مجموعة من واجهات برمجة التطبيقات التي تستخدم SQL لتشغيل قواعد بيانات العميل. على افتراض أنك مطور ويب ممتاز ، فلا شك أنك على دراية بالمفاهيم المتعلقة بقواعد البيانات SQL وقواعد البيانات. إذا لم تكن على دراية بـ SQL ، فاستمر في القراءة. قبل هذه المقالة ، من الأفضل تعلم البرامج التعليمية المتعلقة بـ SQL أولاً.

تدعم أحدث إصدارات Chrome و Safari و Opera جميع قواعد بيانات الويب SQL.

الأساليب الأساسية

ستقدم هذه المقالة ثلاث طرق أساسية محددة في المواصفات:

1. Opendatabase: تستخدم هذه الطريقة قاعدة بيانات موجودة أو تنشئ قاعدة بيانات جديدة لإنشاء كائن قاعدة بيانات.

2. المعاملة: تتيح لنا هذه الطريقة التحكم في التزام المعاملات أو التراجع وفقًا للموقف.

3. ينفذ executesql: يتم استخدام هذه الطريقة لتنفيذ استعلامات SQL الحقيقية.

افتح قاعدة البيانات

تفتح طريقة Opendatabase قاعدة بيانات موجودة. إذا لم تكن قاعدة البيانات موجودة ، فيمكنها أيضًا إنشاء قاعدة بيانات. بناء الجملة لإنشاء وفتح قاعدة البيانات كما يلي:

  1.  vardb = opendatabase ('mydb' ، '1.0' ، 'testDB' ، 2*1024*1024) ؛

تستخدم طريقة Opendatabase أعلاه المعلمات الخمسة التالية:

1. اسم قاعدة البيانات (MYDB)

2. رقم الإصدار (1.0)

3. الوصف (اختبار ديسيبل)

4. حجم قاعدة البيانات (2*1024*1024)

5. إنشاء رد اتصال

آخر واحد ، أي المعلمة الخامسة ، تنشئ رد اتصال ، والذي سيتم استدعاؤه عند إنشاء قاعدة البيانات ، ولكن حتى بدون هذه المعلمة ، يمكن إنشاء قاعدة البيانات في وقت التشغيل.

تنفيذ استعلام

تنفيذ الاستعلام باستخدام دالة Database.Transaction () ، والتي تتطلب فقط معلمة واحدة ، والما يلي عبارة عن بيان استعلام حقيقي:

  1.  vardb = opendatabase ('mydb' ، '1.0' ، 'testDB' ، 2*1024*1024) ؛
  2.  db.transaction (function (tx) {
  3.  tx.executesql ('createTableIfNotexistsLogs (idunique ، log)') ؛
  4.  }) ؛

سيقوم الاستعلام أعلاه بإنشاء جدول سجلات في قاعدة بيانات MYDB.

أدخل العملية

من أجل إدراج سجل جديد في الجدول ، أضفنا استعلام SQL بسيطًا إلى بيان الاستعلام أعلاه ، والبيان المعدل كما يلي:

  1.  vardb = opendatabase ('mydb' ، '1.0' ، 'testDB' ، 2*1024*1024) ؛
  2.  db.transaction (function (tx) {
  3.  tx.executesql ('createTableIfNotexistsLogs (idunique ، log)') ؛
  4.  tx.executesql ('insertintologs (id ، log) قيم (1 ، foobar)') ؛
  5.  tx.executesql ('insertIntologs (id ، log) قيم (2 ، logmsg)') ؛
  6.  }) ؛

عند إدخال سجل جديد ، يمكننا أيضًا تمرير القيم الديناميكية ، مثل:

  1.  vardb = opendatabase ('mydb' ، '1.0' ، 'testDB' ، 2*1024*1024) ؛
  2.  db.transaction (function (tx) {
  3.  tx.executesql ('createTableIfNotexistsLogs (idunique ، log)') ؛
  4.  tx.executesql ('insertintologs
  5.  (معرف ، سجل) القيم (؟ ،؟ ') ، [e_id ، e_log] ؛
  6.  }) ؛

هنا E_ID و E_LOG متغيرات خارجية ، ينفذ خرائط كل عنصر؟ في المعلمات الصفيف.

قراءة العملية

إذا كنت ترغب في قراءة السجل الموجود بالفعل ، فإننا نستخدم رد اتصال لالتقاط النتيجة ، فإن الرمز هو كما يلي:

  1.  vardb = opendatabase ('mydb' ، '1.0' ، 'testDB' ، 2*1024*1024) ؛
  2.  db.transaction (function (tx) {
  3.  tx.executesql ('createTableIfNotexistsLogs (idunique ، log)') ؛
  4.  tx.executesql ('insertintologs (id ، log) قيم (1 ، foobar)') ؛
  5.  tx.executesql ('insertIntologs (id ، log) قيم (2 ، logmsg)') ؛
  6.  }) ؛
  7.  db.transaction (function (tx) {
  8.  tx.executesql ('select*fromlogs' ، [] ، function (tx ، results) {
  9.  varlen = results.rows.length ، i ؛
  10.  msg = <p> besterrows:+len+</p> ؛
  11.  document.queryselector ('#status'). innerhtml+= msg ؛
  12.  لـ (i = 0 ؛ i <len ؛ i ++) {
  13.  ALERT (Results.Rows.Item (i) .log) ؛
  14.  }
  15.  }،باطل)؛
  16.  }) ؛
مثال كامل

أخيرًا ، نقدم ما تم وصفه مسبقًا في مستند HTML 5 الكامل ، أثناء استخدام متصفح لتحليل وثيقة HTML 5.

  1.  <! doctypehtml>
  2.  <html>
  3.  <head>
  4.  <scriptType = text/javaScript>
  5.  vardb = opendatabase ('mydb' ، '1.0' ، 'testDB' ، 2*1024*1024) ؛
  6.  varmsg
  7.  db.transaction (function (tx) {
  8.  tx.executesql ('createTableIfNotexistsLogs (idunique ، log)') ؛
  9.  tx.executesql ('insertintologs (id ، log) قيم (1 ، foobar)') ؛
  10.  tx.executesql ('insertIntologs (id ، log) قيم (2 ، logmsg)') ؛
  11.  msg = '<p> logMessageCreatedRowInserted. </p>' ؛
  12.  document.queryselector ('#status'). innerhtml = msg ؛
  13.  }) ؛
  15.  db.transaction (function (tx) {
  16.  tx.executesql ('select*fromlogs' ، [] ، function (tx ، results) {
  17.  varlen = results.rows.length ، i ؛
  18.  msg = <p> besterrows:+len+</p> ؛
  19.  document.queryselector ('#status'). innerhtml+= msg ؛
  20.  لـ (i = 0 ؛ i <len ؛ i ++) {
  21.  msg = <p> <b>+results.rows.item (i) .log+</b> </p> ؛
  22.  document.queryselector ('#status'). innerhtml+= msg ؛
  23.  }
  24.  }،باطل)؛
  25.  }) ؛
  26.  </script>
  27.  </head>
  28.  <body>
  29.  <divid = statusName = status> statusMessage </iv>
  30.  </body>
  31.  </html>

فيما يلي نتيجة الإخراج المنتجة في أحدث إصدار من Safari أو Opera Browser.

  1.  logMessageCreatedAndRowInserted.
  3.  المسبح: 2
  5.  Foobar
  7.  logmsg
مقالات ذات صلة