How to create table and database using web SQL HTML 5

Question

0.00/5 (No votes)

See more:

C#

am learning html 5 there is one concept web SQL using html 5,from many wesites am taking examples and try to learn.but many things which confusing me.
1.why we use this web SQL,if we have SQL server or oracle as backed.
2.if we are use web SQL Satellite is used to create database?
3.if we are create DB where it will store?in browser only?if yes then what is limit to store data?
4.anyone give me detailed explanation about WEB SQL with example .....

What I have tried:

<pre lang="C#">i refer many websites but not able to understand the concept,i knew how to create database and table but could not able to add data in table as well as fetch.

Posted 20-Oct-16 19:27pm

Member 12806258

Updated 20-Oct-16 22:02pm

Add a Solution

Comments

Member 12806258 21-Oct-16 6:38am

thank you for your valuable reply.

but when am executing following code not able fetch data from database.

to read the data from the Web SQL.
1. <!DOCTYPE html>
2.
3.
4. <title>Open DataBase
5.
6. var Database_Name = 'MyDatabase';
7. var Version = 1.0;
8. var Text_Description = 'My First Web-SQL Example';
9. var Database_Size = 2 * 1024 * 1024;
10. var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
11. dbObj.transaction(function (tx) {
12. tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table (id unique, Name, Location)');
13. });
14.
15. function Insert() {
16. var id = document.getElementById("tbID").value;
17. var name = document.getElementById("tbName").value;
18. var location = document.getElementById("tbLocation").value;
19. dbObj.transaction(function (tx) {
20. tx.executeSql('insert into Employee_Table(id, Name, Location) values(' + id + ',"' + name + '","' + location + '")');
21. });
22. }
23. dbObj.transaction(function (tx) {
24. tx.executeSql('SELECT * FROM Employee_Table', [], function (tx, results) {
25. var len = results.rows.length, i;
26. var str = '';
27. for (i = 0; i < len; i++) {
28. str += "<tr>";
29. str += "<td>" + results.rows.item(i).id + "</td>";
30. str += "<td>" + results.rows.item(i).Name + "</td>";
31. str += "<td>" + results.rows.item(i).Location + "</td>";
32. str += "</tr>";
33. document.getElementById("tblGrid").innerHTML += str;
34. str = '';
35. }
36. }, null);
37. });
38.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suvendu Shekhar Giri · Accepted Answer · 2016-10-20T22:02:00

Solution 1

1.why we use this web SQL,if we have SQL server or oracle as backed.

Quote:
The Web SQL Database API isn't actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

WebSQL for cleint side database. SQLServer and MySQL are servers themselves and can be queried over inernet/intranet etc.
Reference: HTML5 Web SQL Database[^]
2.if we are use web SQL Satellite is used to create database?
-- what is the question here?
3.if we are create DB where it will store?in browser only?if yes then what is limit to store data?
-- Chrome (Webkit) WebSQL Database maximum file size? - Stack Overflow[^]
javascript - How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does? - Stack Overflow[^]
4.anyone give me detailed explanation about WEB SQL with example
HTML5 Web SQL Database[^]

Also check following article-
Why the world needs Web SQL | Blog | SiteCrafting[^]

Hope, it helps :)

Posted 20-Oct-16 22:02pm

Suvendu Shekhar Giri

Comments

Karthik_Mahalingam 21-Oct-16 5:01am

5

Suvendu Shekhar Giri 21-Oct-16 5:04am

Thanks :)

Member 12806258 21-Oct-16 7:11am

thank you for your valuable reply.

but when am executing following code not able fetch data from database.

to read the data from the Web SQL.
1. <!DOCTYPE html>
2.
3.
4. <title>Open DataBase
5.
6. var Database_Name = 'MyDatabase';
7. var Version = 1.0;
8. var Text_Description = 'My First Web-SQL Example';
9. var Database_Size = 2 * 1024 * 1024;
10. var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
11. dbObj.transaction(function (tx) {
12. tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table (id unique, Name, Location)');
13. });
14.
15. function Insert() {
16. var id = document.getElementById("tbID").value;
17. var name = document.getElementById("tbName").value;
18. var location = document.getElementById("tbLocation").value;
19. dbObj.transaction(function (tx) {
20. tx.executeSql('insert into Employee_Table(id, Name, Location) values(' + id + ',"' + name + '","' + location + '")');
21. });
22. }
23. dbObj.transaction(function (tx) {
24. tx.executeSql('SELECT * FROM Employee_Table', [], function (tx, results) {
25. var len = results.rows.length, i;
26. var str = '';
27. for (i = 0; i < len; i++) {
28. str += "<tr>";
29. str += "<td>" + results.rows.item(i).id + "</td>";
30. str += "<td>" + results.rows.item(i).Name + "</td>";
31. str += "<td>" + results.rows.item(i).Location + "</td>";
32. str += "</tr>";
33. document.getElementById("tblGrid").innerHTML += str;
34. str = '';
35. }
36. }, null);
37. });
38.