5

Trong bài đăng này, chúng tôi sẽ kiểm tra một số thông tin về Web SQL. Tôi biết tất cả các bạn đều quen thuộc với SQL (Nếu không, tôi thực sự khuyên bạn nên đọc một số thông tin cơ bản ở đây ). Như tên của nó, Web SQL có nhiều điểm tương đồng với SQL. Vì vậy, nếu bạn giỏi SQL, bạn cũng sẽ thích Web SQL. Web SQL là một API giúp nhà phát triển thực hiện một số thao tác cơ sở dữ liệu ở phía máy khách, như: tạo cơ sở dữ liệu, mở giao dịch, tạo bảng, chèn giá trị vào bảng, xóa giá trị và đọc dữ liệu. Nếu bạn cần một cách khác để lưu một số dữ liệu ở phía máy khách, bạn có thể sử dụng các cơ chế lưu trữ được giới thiệu trong HTML5.

Bây giờ, chúng ta sẽ xem xét một số hoạt động mà nhà phát triển có thể thực hiện với Web SQL. Tôi hy vọng bạn thích nó!

Sử dụng mã

Như bạn đã biết, để làm việc với các truy vấn SQL, bạn phải tạo cơ sở dữ liệu. Vì vậy, bước đầu tiên chúng ta sẽ làm theo, là tạo cơ sở dữ liệu.

Tạo / mở cơ sở dữ liệu SQL Web

Để tạo cơ sở dữ liệu Web SQL, chúng ta có thể sử dụng một hàm gọi là openDatabase có bốn tham số như sau.

  • Tên cơ sở dữ liệu
  • Số phiên bản
  • Sự miêu tả
  • Kích thước
  • Gọi lại sáng tạo.
  • Cuộc gọi lại tạo được kích hoạt trong khi cơ sở dữ liệu đang được tạo.

    Bây giờ, chúng ta sẽ mở một cơ sở dữ liệu Web SQL với các tham số đã đề cập ở trên chứ? Chúng ta có thể làm điều đó bằng cách chạy một truy vấn như sau.

     var myDBInstance = openDatabase('dbSibeeshPassion', '1.0', 'This is a client side database', 2 * 1024 * 1024);

    Ở đây tôi đã đưa ra kích thước của cơ sở dữ liệu của tôi là 2 * 1024 * 1024 . Trong hầu hết các trình duyệt, kích thước rất linh hoạt, nhưng một số ít duy trì giới hạn 5 MB. Từ truy vấn trên, chúng tôi đã tạo ra một cơ sở dữ liệu Web SQL. Bây giờ chúng tôi sẽ kiểm tra xem DB đã được tạo thành công hay chưa.

    //check whether the database is created or not.
            if (!myDBInstance) {
                alert('Oops, your database was not created');
            }
            else {
                var version = myDBInstance.version;
            }

    Tại đây, bạn sẽ nhận được cảnh báo nếu cơ sở dữ liệu không được tạo. Hoặc, bạn sẽ có thể tìm nạp chi tiết phiên bản từ phiên bản cơ sở dữ liệu.





    Bắt_version_details_from_database_instance

    Khi cơ sở dữ liệu được tạo, chúng ta có thể bắt đầu sử dụng giao dịch khi chúng ta sử dụng nó trong SQL.

    Tạo giao dịch

    Để tạo một giao dịch, chúng ta có thể sử dụng cú pháp sau. Chúng tôi có thể sử dụng  phương thức giao dịch từ ví dụ cơ sở dữ liệu của chúng tôi.

    myDBInstance.transaction(function (tran) {
                });

    Ở đây, myDBInstance là ví dụ cơ sở dữ liệu của chúng tôi. Và, tran là đối tượng giao dịch của chúng tôi mà chúng tôi sẽ sử dụng cho các hoạt động sắp tới của chúng tôi. Lý do chúng tôi sử dụng giao dịch là, như bạn có thể biết, giao dịch có thể được hỗ trợ. Ví dụ: nếu bất kỳ thao tác nào xảy ra lỗi, giao dịch sẽ được khôi phục để không xảy ra bất kỳ loại dữ liệu không khớp nào. Và tất nhiên, chúng ta có thể dễ dàng quản lý nhật ký lỗi với sự trợ giúp của giao dịch. Chúng ta sẽ viết các truy vấn cần thiết cho hoạt động của chúng tôi?

    Trước hết, chúng tôi sẽ tạo một bảng trong cơ sở dữ liệu của chúng tôi. Để thực hiện bất kỳ truy vấn nào trong Web SQL, bạn phải sử dụng phương thức executesql .

     tran.executeSql('CREATE TABLE IF NOT EXISTS Users (id unique, Name, MailID)');

    Như bạn có thể thấy, chúng tôi đang tạo bảng Người dùng nếu nó không tồn tại trong cơ sở dữ liệu. Như trong SQL, chúng tôi đang gán id là một khóa duy nhất.

    Điều tiếp theo, chúng ta cần chèn một số hàng vào bảng của chúng tôi.

     tran.executeSql('insert into Users (id, Name, MailID) values (1, "Sibi","sibikv4u@gmail.com")');
                    tran.executeSql('insert into Users (id, Name, MailID) values (2, "Aji","ajaybhasy@gmail.com")');
                    tran.executeSql('insert into Users (id, Name, MailID) values (3, "Ansu","ansary.ans21@gmail.com")');

    Nếu bạn muốn gán các giá trị tên, mailid hoặc id để chèn truy vấn, bạn có thể tạo các biến đó và gán cho truy vấn như dưới đây.

    var name = "Sibi";
                var id = "1";
                var MailID = "sibikv4u@gmail.com";
    
     tran.executeSql('insert into Users (id, Name, MailID) values (?,?,?)',[id,name,MailID]);

    Vì vậy, chúng tôi đã chèn một số giá trị quá. Bây giờ, chúng ta cần đọc dữ liệu chúng ta đã chèn vào bảng, phải không? Để làm điều đó, chúng ta cần tạo một giao dịch mới và một lệnh execSql khác.

     tran.executeSql('SELECT * FROM Users', [], function (tran, data) {
                    });

    Ở đây, chúng tôi sẽ nhận được đầu ra trong dữ liệu . Như bạn có thể thấy, tôi đã đưa ra chức năng gọi lại cùng với lệnh. Điều này có thể được sử dụng để lặp qua dữ liệu của chúng tôi và hiển thị tương tự trong trang của chúng tôi. Vì vậy, chúng ta có thể sửa đổi khối giao dịch đọc của mình như sau.

     myDBInstance.transaction(function (tran) {
                    var html = '<table><thead><th>Mail ID </th><th>ID</th><th>Name </th></thead><tbody>';
                    tran.executeSql('SELECT * FROM Users', [], function (tran, data) {
                        for (i = 0; i < data.rows.length; i++) {
                            html += '<tr><td>'
                                + '<a ' + 'href="mailto:' + data.rows[i].MailID + '">' + data.rows[0].MailID + '</a>' +
                            '</td><td>' + data.rows[i].id + '</td><td>' + data.rows[i].Name + '</td></tr>';
                        };
                        html += '</tbody></table>';
                        $('#myTab').html(html);
                    });
                });

    Trước đó:

  • Xin đừng quên tham khảo jQuery
  • Đừng quên tạo div với id myTab
  • Bạn có thể thêm CSS cho bảng mà chúng tôi đang tạo động như sau:

    <style>
            table,tr,td,th {
                border:1px solid #ccc;
                border-radius:5px;
                padding:10px;
                margin:10px;
            }
    
        </style>

    Mã hoàn chỉnh

    Mã hoàn chỉnh cho việc thực hiện được đưa ra dưới đây:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Introduction to Web SQL</title>
        <script src="Scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            var myDBInstance = openDatabase('dbSibeeshPassion', '1.0', 'This is a client side database', 3 * 1024 * 1024);
            //check whether the database is created or not.
            if (!myDBInstance) {
                alert('Oops, your database was not created');
            }
            else {
                var version = myDBInstance.version;
                //var name = "Sibi";
                //var id = "1";
                //var MailID = "sibikv4u@gmail.com";
                myDBInstance.transaction(function (tran) {
                    tran.executeSql('CREATE TABLE IF NOT EXISTS Users (id unique, Name, MailID)');
                    //tran.executeSql('insert into Users (id, Name, MailID) values (?,?,?)', [id, name, MailID]);
                    tran.executeSql('insert into Users (id, Name, MailID) values (1, "Sibi","sibikv4u@gmail.com")');
                    tran.executeSql('insert into Users (id, Name, MailID) values (2, "Aji","ajaybhasy@gmail.com")');
                    tran.executeSql('insert into Users (id, Name, MailID) values (3, "Ansu","ansary.ans21@gmail.com")');
                });
                myDBInstance.transaction(function (tran) {
                    var html = '<table><thead><th>Mail ID </th><th>ID</th><th>Name </th></thead><tbody>';
                    tran.executeSql('SELECT * FROM Users', [], function (tran, data) {
                        for (i = 0; i < data.rows.length; i++) {
                            html += '<tr><td>'
                                + '<a ' + 'href="mailto:' + data.rows[i].MailID + '">' + data.rows[0].MailID + '</a>' +
                            '</td><td>' + data.rows[i].id + '</td><td>' + data.rows[i].Name + '</td></tr>';
                        };
                        html += '</tbody></table>';
                        $('#myTab').html(html);
                    });
                });
            }
    
        </script>
        <style>
            table,tr,td,th {
                border:1px solid #ccc;
                border-radius:5px;
                padding:10px;
                margin:10px;
            }
    
        </style>
    </head>
    <body>
        <div id="myTab"></div>
    </body>
    </html>

    Đầu ra

    Web_Query_Output

    Đó là tất cả. Chúng ta làm được rồi. Có một mã hóa hạnh phúc.

    Phần kết luận

    Tôi đã bỏ lỡ bất cứ điều gì mà bạn nghĩ là cần thiết? Bạn đã thử Web SQL chưa? Bạn đã bao giờ muốn làm điều này trước đây? Bạn có thấy bài đăng này hữu ích?

    Tôi hy vọng bạn thích bài viết. Hãy chia sẻ đề xuất và phản hồi có giá trị của bạn với tôi.

    Lượt của bạn. Bạn nghĩ sao?

    Một blog không phải là một blog mà không có ý kiến, nhưng hãy cố gắng duy trì chủ đề. Nếu bạn có một câu hỏi không liên quan đến bài đăng này, tốt nhất bạn nên đăng nó trên C # Corner, Code Project, Stack Overflow hoặc Asp.Net Forum thay vì bình luận ở đây. Tweet hoặc gửi email cho tôi một liên kết đến câu hỏi của bạn và tôi chắc chắn sẽ cố gắng giúp đỡ nếu tôi có thể.

    |