معرفی
Web SQL ویژگی بسیار جالبی است، حتی اگر بخشی از مشخصات HTML 5 نیست. اما این یک مشخصات جداگانه است و هنوز هم می تواند برای توسعه برنامه های کاربردی وب کمک کند. Web SQL برای دستکاری پایگاه داده سمت سرویس گیرنده استفاده می شود. از آنجایی که من می گویم استفاده از آن خوب است، برای استفاده از آن سلب مسئولیت وجود دارد. خطرناک است زیرا داده ها را در سمت مشتری ذخیره می کند، نه در سمت سرور. بنابراین همیشه به یاد داشته باشید، اطلاعات حساس به سرور را در داخل آن ذخیره نکنید.
توجه داشته باشید
پایگاه داده Web SQL فقط در آخرین نسخه مرورگرهای Safari، Google Chrome و Opera کار می کند.
روش های اصلی وب SQL
3 روش اصلی Web SQL که در این مقاله به آنها خواهیم پرداخت:
- openDatabase
- معامله
- executeSql
ایجاد و باز کردن پایگاه های داده
با استفاده از متد openDatabase می توانید یک شی برای پایگاه داده ایجاد کنید. اگر پایگاه داده وجود نداشته باشد، ایجاد می شود و سپس یک شی برای آن پایگاه داده ایجاد می شود. همچنین لازم نیست نگران بستن ارتباط با پایگاه داده باشید.
برای ایجاد و باز کردن پایگاه داده باید از دستور زیر استفاده کنید.
var dbObj = OpenDatabase('[Database_Name]', '[Version_Number]', '[Text_Description]', '[size]', '[Creation_Callback]')
مثال
مثال زیر نحوه ایجاد یک پایگاه داده یا شیء آن را توضیح می دهد.
- ابتدا یک دکمه در صفحه HTML 5 خود مانند شکل زیر ایجاد کنید:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Open Database</title>
- </head>
- <body>
- <button id="btnCreateDB">Create Database</button>
- </body>
- </html>
-
اکنون یک تابع جاوا اسکریپت برای ایجاد پایگاه داده مانند شکل زیر ایجاد کنید:
- function CreateDB() {
- var Database_Name = 'MyDatabase';
- var Version = 1.0;
- var Text_Description = 'My First Web-SQL Example';
- var Database_Size = 2 * 1024 * 1024;
- var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size, OnSuccessCreate());
- }
- function OnSuccessCreate() {
- alert('Database Created Sucessfully');
- }
-
اکنون این تابع جاوا اسکریپت را به رویداد onclick دکمه btnCreateDB متصل کنید. کد کامل در زیر آمده است:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Open DataBase</title>
- <script>
- function CreateDB() {
- var Database_Name = 'MyDatabase';
- var Version = 1.0;
- var Text_Description = 'My First Web-SQL Example';
- var Database_Size = 2 * 1024 * 1024;
- var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size, OnSuccessCreate());
- }
- function OnSuccessCreate() {
- alert('Database Created Sucessfully');
- }
- </script>
- </head>
- <body>
- <button id="btn1" onclick="CreateDB()">Create Database</button>
- </body>
- </html>
-
حالا این فایل را باز کنید، من آن را در گوگل کروم باز می کنم. به طور پیش فرض خروجی این خواهد بود:
-
حالا کلید تابع F12 را فشار دهید و ابزار توسعه دهنده گوگل کروم را باز کنید و تب Resource را باز کنید که در آن پایگاه داده Web SQL را دریافت خواهید کرد.
-
حال بر روی دکمه Create Database کلیک کنید و خروجی زیر را دریافت خواهید کرد.
و در داخل ابزار توسعه دهنده، پایگاه داده را دریافت خواهید کرد.
از آنجایی که نحوه ایجاد و باز کردن پایگاه داده در Web SQL را دیدید، بنابراین با استفاده از تابع openDatabase می توانیم یک پایگاه داده در Web SQL ایجاد کنیم و پایگاه داده را باز کنیم. 5 پارامتر وجود دارد که توسط این تابع openDatabase پذیرفته شده است
- نام پایگاه داده
این آرگومان نام پایگاه داده ای را ارائه می دهد که ارائه آن اجباری است، در غیر این صورت، یک استثنا دریافت خواهید کرد. - شماره نسخه
شماره نسخه نیز مورد نیاز است. برخی از پایگاه داده ها ممکن است در نسخه 2.0 و ممکن است در 1.0 باشند، بنابراین اگر شماره نسخه پایگاه داده را می دانید، فقط شما می توانید آن را باز کنید. - توضیحات متن
این آرگومان پایگاه داده را توصیف می کند و اطلاعاتی در مورد پایگاه داده ارائه می دهد. - اندازه پایگاه داده
این آرگومان اندازه پایگاه داده را تعیین می کند. - ایجاد فراخوانی
این آرگومان اختیاری است، اگر مقداری را ارائه نکنید، پایگاه داده نیز ایجاد می شود، اما اگر می خواهید پس از ایجاد پایگاه داده اقدامی انجام دهید، می توانید از آن استفاده کنید، بنابراین اگر پایگاه داده با موفقیت ایجاد شود، این کار انجام خواهد شد.
معاملات
پس از باز کردن پایگاه داده ما می توانیم تراکنش هایی ایجاد کنیم. این تسهیلات بازگشت و تعهد را فراهم می کند. این بدان معناست که در داخل تراکنش می توانیم بیش از یک کوئری را اجرا کنیم. اگر تراکنش در هر نقطه ای از زمان با شکست مواجه شود یا یک پرس و جو دارای خطا باشد، آنگاه شامل تمام پرس و جوها برگردانده می شود و اگر همه پرس و جوها با موفقیت اجرا شوند، تراکنش متعهد خواهد شد.
تراکنش همان تابعی است که حاوی بیش از یک عبارت پرس و جو است.
مثال
- function CreateDB() {
- var Database_Name = 'MyDatabase';
- var Version = 1.0;
- var Text_Description = 'My First Web-SQL Example';
- var Database_Size = 2 * 1024 * 1024;
- var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
- dbObj.transaction(function (tx) {
- //Code of the transaction
- //will goes here
- });
- }
executeSql
این روش نقش بسیار مهمی در پایگاه داده Web SQL ایفا می کند. این روش برای اجرای دستورات خواندن و نوشتن استفاده می شود که شامل طرح تزریق SQL است و یک متد برگشت برای پردازش نتیجه هر پرس و جو ارائه می دهد. هنگامی که یک شیء تراکنش داشته باشیم، می توانیم متد executeSql را فراخوانی کنیم.
مثال
مثال زیر نحوه ایجاد جدول در Web SQL را نیز توضیح می دهد.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Open DataBase</title>
- <script>
- function CreateDB() {
- var Database_Name = 'MyDatabase';
- var Version = 1.0;
- var Text_Description = 'My First Web-SQL Example';
- var Database_Size = 2 * 1024 * 1024;
- var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
- dbObj.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table (id unique, Name, Location)');
- });
- }
- </script>
- </head>
- <body>
- <button id="Create_DB_n_Table" onclick="CreateDB()">Create Database & Table</button>
- </body>
- </html>
خروجی مثال قبل
- هنگامی که صفحه بارگذاری می شود:
- اگر ابزار توسعه دهنده گوگل کروم را باز کنید، خروجی زیر را دریافت خواهید کرد:
- پس از کلیک بر روی دکمه:
نحوه قرار دادن داده ها در جدول Web SQL
مثال زیر نحوه درج داده ها را در پایگاه داده توضیح می دهد.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Open DataBase</title>
- <script>
- var Database_Name = 'MyDatabase';
- var Version = 1.0;
- var Text_Description = 'My First Web-SQL Example';
- var Database_Size = 2 * 1024 * 1024;
- var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
- dbObj.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table (id unique, Name, Location)');
- });
- function Insert() {
- var id = document.getElementById("tbID").value;
- var name = document.getElementById("tbName").value;
- var location = document.getElementById("tbLocation").value;
- dbObj.transaction(function (tx) {
- tx.executeSql('insert into Employee_Table(id, Name, Location) values(' + id + ',"' + name + '","' + location + '")');
- });
- }
- </script>
- </head>
- <body>
- <form id="frm1">
- <table>
- <tr>
- <td>ID:</td>
- <td><input type="text" id="tbID" /></td>
- </tr>
- <tr>
- <td>Name:</td>
- <td><input type="text" id="tbName" /></td>
- </tr>
- <tr>
- <td>Location:</td>
- <td><input type="text" id="tbLocation" /></td>
- </tr>
- <tr>
- <td><button id="btnInsert" onclick="Insert()">Insert</button></td>
- </tr>
- </table>
- </form>
- </body>
- </html>
در مثال قبل من یک فرم ایجاد کردم و 3 جعبه متن و یک دکمه برای دریافت مقدار و ارسال مقدار ایجاد کردم.
- وقتی صفحه بارگذاری شد، سپس:
- اگر به ابزار توسعه دهنده نگاه کنید، خروجی هایی مانند زیر دریافت خواهید کرد:
- هنگامی که تعدادی داده را در TextBoxها پر می کنید و آن را ارسال می کنید، سپس:
نحوه خواندن داده ها از وب SQL
مثال زیر نحوه خواندن داده ها از Web SQL را توضیح می دهد.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Open DataBase</title>
- <script>
- var Database_Name = 'MyDatabase';
- var Version = 1.0;
- var Text_Description = 'My First Web-SQL Example';
- var Database_Size = 2 * 1024 * 1024;
- var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
- dbObj.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table (id unique, Name, Location)');
- });
- function Insert() {
- var id = document.getElementById("tbID").value;
- var name = document.getElementById("tbName").value;
- var location = document.getElementById("tbLocation").value;
- dbObj.transaction(function (tx) {
- tx.executeSql('insert into Employee_Table(id, Name, Location) values(' + id + ',"' + name + '","' + location + '")');
- });
- }
- dbObj.transaction(function (tx) {
- tx.executeSql('SELECT * FROM Employee_Table', [], function (tx, results) {
- var len = results.rows.length, i;
- var str = '';
- for (i = 0; i < len; i++) {
- str += "<tr>";
- str += "<td>" + results.rows.item(i).id + "</td>";
- str += "<td>" + results.rows.item(i).Name + "</td>";
- str += "<td>" + results.rows.item(i).Location + "</td>";
- str += "</tr>";
- document.getElementById("tblGrid").innerHTML += str;
- str = '';
- }
- }, null);
- });
- </script>
- </head>
- <body>
- <p id="hh"></p>
- <form id="frm1">
- <table>
- <tr>
- <td>ID:</td>
- <td><input type="text" id="tbID" /></td>
- </tr>
- <tr>
- <td>Name:</td>
- <td><input type="text" id="tbName" /></td>
- </tr>
- <tr>
- <td>Location:</td>
- <td><input type="text" id="tbLocation" /></td>
- </tr>
- <tr>
- <td><button id="btnInsert" onclick="Insert()">Insert</button></td>
- </tr>
- </table>
- </form>
- <table id="tblGrid" cellpadding="10px" cellspacing="0" border="1">
- <tr style="background-color:black;color:white;font-size:18px;">
- <td>
- ID
- </td>
- <td>
- Name
- </td>
- <td>
- Location
- </td>
- </tr>
- </table>
- </body>
- </html>
همانند SQL Server، با استفاده از یک کوئری انتخابی می توانید داده ها را از وب SQL بخوانید.
خروجی کد بالا در زیر آمده است
توجه داشته باشید که پایگاههای داده وب SQL در مسیر توصیههای W3C قرار داشتند، اما کار مشخصات متوقف شده است زیرا همه پیادهسازان علاقهمند از Sqlite استفاده میکنند و چندین پیادهسازی مستقل برای یک استاندارد ضروری هستند.