وبلاگ

آموزش استفاده از پایگاه داده web sql در Html5

آموزش استفاده از پایگاه داده web sql در Html5

 

معرفی

SQL Web جزئی از Html5 می باشد. اما این یک ویژگی جداگانه است و هنوز هم می تواند برای توسعه برنامه های کاربردی وب کمک کند. Web SQL برای دستکاری در پایگاه داده مشتری مورد استفاده قرار می گیرد. از آنجا که من می گویم که استفاده از آن خوب است، خطرناک نیز هست زیرا داده ها را در سمت سرویس گیرنده ذخیره می کند، نه در سمت سرور. بنابراین همیشه به یاد داشته باشید، اطلاعات حساس به سرور را درون آن ذخیره نکنید.

 

توجه داشته باشید

پایگاه داده SQL Web فقط در آخرین نسخه های Safari، Google Chrome و مرورگرهای اپرا کار می کند.

 

متد های اصلی Web SQL

در این مقاله  3 متد اصلی وب SQL را آموزش می دهیم:

  1. openDatabase
  2. transaction
  3. executeSql

 

ایجاد و باز کردن پایگاه داده

 

با استفاده از روش openDatabase شما می توانید یک شی برای پایگاه داده ایجاد کنید. اگر پایگاه داده وجود ندارد، آن را ایجاد می کند و سپس یک شی برای آن پایگاه داده ایجاد خواهد شد. همچنین لازم نیست نگران بسته شدن اتصال با پایگاه داده باشید.

 

برای ایجاد و باز کردن پایگاه داده شما باید از نحو زیر استفاده کنید.
 

var dbObj = OpenDatabase ('[Database_Name]'، '[Version_Number]'، '[Text_Description]'، '[size]'، '[Creation_Callback]')

 

مثال

مثال زیر نحوه ایجاد یک پایگاه داده یا شی آن را توضیح می دهد.

1- اول، یک دکمه در HTML 5 صفحه خود را به عنوان در زیر ایجاد کنید: 
<!DOCTYPE html>  
<html>  
   <head>  
      <title>Open Database</title>  
   </head>  
   <body>  
      <button id="btnCreateDB">Create Database</button>  
   </body>  
</html>


2-  حالا یک تابع جاوا اسکریپت برای ایجاد پایگاه داده به صورت زیر ایجاد کنید: 
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');  
        }

3- حالا این تابع جاوا اسکریپت را به رویداد 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>

4- در حال حاضر این فایل را باز کنید، من آن را در Google Chrome باز می کنم. به طور پیش فرض خروجی این خواهد بود:


5- اکنون کلید عملکرد F12 را فشار دهید و ابزار توسعه دهنده گوگل کروم را باز کنید و برگه Application یا resource بر اساس ورژن کروم متفاوت می باشد را که در آن پایگاه داده SQL Web را دریافت خواهید کرد، باز کنید.


6- حالا بر روی دکمه Create Database کلیک کنید و خروجی زیر را دریافت خواهید کرد.

و درون ابزار توسعه دهنده پایگاه داده را خواهید یافت.

 

تا اینجا  مشاهده کردید که چگونه می توان پایگاه داده را در وب SQL ایجاد و باز کرد، بنابراین با استفاده از عمل openDatabase می توان یک پایگاه داده را در Web SQL ایجاد کرد و پایگاه داده را باز کرد. 5 پارامتر که توسط این تابع openDatabase پذیرفته شده است عبارتند از:

  1. Database name:

این آرگومان نام پایگاه داده ای را ارائه می دهد که اجباری است، در غیر این صورت شما یک خطا دریافت خواهید کرد.

  1. Version number:

شماره نسخه نیز مورد نیاز است. برخی از پایگاه داده ممکن است در نسخه 2.0 باشد و ممکن است در 1.0 باشد، بنابراین اگر شما می دانید شماره نسخه پایگاه داده، تنها می توانید آن را باز کنید.

  1. Text description:

این آرگومان پایگاه داده را شرح می دهد و اطلاعاتی در مورد پایگاه داده ارائه می دهد.

  1. Size of database:

این آرگومان اندازه پایگاه داده را تعیین می کند.

  1. Creation callback:

این آرگومان اختیاری است، و پایگاه داده نیز ایجاد خواهد شد، اما اگر شما می خواهید پس از ایجاد یک پایگاه داده عملی را انجام دهید، می توانید از آن استفاده کنید، بنابراین اگر پایگاه داده با موفقیت ایجاد شود، این متد انجام خواهد شد.

 

Transactions

پس از باز کردن پایگاه داده ما می توانیم Transactions ایجاد کنیم. این متد در زمانی که خطایی در عملیات دیتابیس رخ دهد تمامی عملیات را به حات اولیه بر می گرداند که این کار باعث امنیت و تسهیل در روند اجرای پروژه می شود و در صورتی که عملیات هیچ گونه خطایی نداشته باشد کل عملیات اجرا می شود.

مثال

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 و یک روش فراخوانی برای پردازش نتیجه نمایش داده می شود. اگر ما یک شیء Transaction داشته باشیم، می توانیم روش 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>

خروجی مثال قبلی

1- هنگامی که صفحه بارگذاری می شود:


2- اگر پس از آن ابزار توسعه دهنده Google Chrome را باز کنید، خروجی زیر را دریافت خواهید کرد:


3- پس از کلیک روی دکمه:

 

چگونه می توان داده ها را در جدول 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 جعبه متن و یک دکمه ایجاد کردم تا مقدار را دریافت کنم و آن را ارسال کنم.

1- وقتی صفحه لود می شود:

2- اگر به ابزار توسعه دهندگان نگاه می کنید، خروجی زیر را خواهید گرفت:

3- هنگامی که شما برخی از داده ها را در TextBox ها پر می کنید و سپس آن را ارسال می کنید:

 

چگونگی خواندن داده ها از وب SQL

مثال زیر نحوه خواندن داده ها از SQL Web را توضیح می دهد.

<!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، با استفاده از یک کوئری  select داده ها را از وب SQL بخوانید.

خروجی کد بالا:

 

دانلود پروژه;