VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

Web SQL Database trong HTML5


Web Storage trong HTML5
Sự kiện Server-Sent trong HTML5

Nội dung chính

  • Web SQL Database trong HTML5
  • Các phương thức Core
  • Phương thức openDatabase
  • Thực thi truy vấn
  • Hoạt động INSERT
  • Hoạt động READ
  • Ví dụ tổng kết

Web SQL Database trong HTML5

Web SQL Database API không phải là một phần thực sự của HTML5 Specification nhưng nó là một chi tiết kỹ thuật riêng mà giới thiệu một tập hợp API để thao tác cơ sở dữ liệu trên Client-Site bởi sử dụng SQL.

Chúng tôi giả sử rằng bạn là một nhà lập trình web giỏi thì bạn sẽ có nhận thức khá sâu về các khái niệm SQL và RDBMS.

Web SQL Database sẽ làm việc trong phiên bản mới nhất của Safari, Chrome và Oprea.



Các phương thức Core

Sau đây là 3 phương thức Core được định nghĩa trong Spec mà chúng tôi sẽ đề cập trong chương hướng dẫn này:

  • openDatabase: Phương thức này tạo đối tượng database hoặc sử dụng database đang tồn tại hoặc tạo một database mới.

  • transaction: Phương thức này cho chúng ta khả năng kiểm soát một transaction và thực hiện hoặc commit hoặc rollback dựa trên tình huống đó.

  • executeSql: Phương thức này được sử dụng để thực thi truy vấn SQL thực sự.


Phương thức openDatabase

Phương thức openDatabase mở một Database nếu nó đã tồn tại, phương thức này sẽ tạo nó nếu nó đã không tồn tại.

Để tạo và mở một Database, sử dụng code sau:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Phương thức trên nhận 5 tham số sau:

  • Tên Database
  • Số phiên bản
  • Mô tả văn bản
  • Cỡ của Database
  • Tạo Callback

Tham số thứ 5, tạo Callback sẽ được gọi nếu Database đang được tạo. Không có tính năng này, tuy nhiên, Database vẫn đang được tạo đúng phiên bản.



Thực thi truy vấn

Để thực thi một truy vấn, bạn sử dụng hàm database.transaction(). Hàm này cần một tham số đơn, mà là một hàm thực thi truy vấn (query) như sau:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

Truy vấn trên sẽ tạo một bảng được gọi là LOGS trong cơ sở dữ liệu 'mydb'.


Hoạt động INSERT

Để tạo đầu vào cho bảng, chúng ta thêm truy vấn SQL đơn giản trong ví dụ trên như sau:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});

Chúng ta có thể truyền các giá trị động trong khi tạo đầu vào như sau:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log];
});

Ở đây, e_id và e_log là các biến ngoại vi, và executeSql kết nối mỗi mục trong tham số mảng với các dấu "?".



Hoạt động READ

Để đọc các bản ghi đã tồn tại, chúng ta sử dụng một Callback để bắt kết quả như sau:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "

Found rows: " + len + "

"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });

Ví dụ tổng kết

Tóm lại, chúng ta giữ ví dụ này trong tài liệu HTML5 như sau và thử chạy nó với trình duyệt Safari:


<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
  
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
         var msg;
   
         db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
            msg = '<p>Log message created and row inserted.</p>';
            document.querySelector('#status').innerHTML =  msg;
         });         db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>Found rows: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;
     
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });
   
      </script>
   </head>
   <body>
      <div id="status" name="status">Status Message</div>
   </body>
</html>

Web Storage trong HTML5
Sự kiện Server-Sent trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml