HTML5 With DataBase

HTML5 With DataBase

In this tutorial of HTML5 with DataBase, I will create DataBase at client side. We will also explore the storage of SqlLite with Google Chrome Tool.

Note: We will use JQuery to access HTML elements easily.

HTML5 Database

HTML5 Code Page: As you can see in above image I have create 4 different database named MotoRolaDataBase, AndroidDatabase, SOnyDataBase and HTMLDataBase. Let’s see HTML5 code first.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
        $("#Button1").click(function(){
        var database = openDatabase($("#Text1").val(), "1.0", "Contact Manager", 200000);         

        });  
    });
    </script>
</head>
<body>
<span>Enter DataBase Name: <input id="Text1" type="text" /></span>
<span>
<input id="Button1" type="button" value="Create DataBase" /></span>
</body>
</html>

Description

The first line of HTML5 code is <!DOCTYPE html>, this tells the browser to load HTML5 schema and page contains HTML5 elements.

Again, JQuery used in above example is just to traverse DOM elements. It has nothing to do with HTML5. You can achive the same using document.getElementByID method in JavaScript to access HTML5 elements.

var database = openDatabase("ContactManager", "1.0", "Contact Manager", 200000);

Above code snippets creates ContactManager at client browser. If it is created in Chrome browser, only chrome can access this database. Other browsers will not be able to access that database.

In my next post, we will see how to persist database and create tables. This is very light database known as SQLite.

Tags:

HTML5 With DataBaseThe shrink operation is not duplicated on the mirror database when you use database mirroring in SQL Server 2005Database mirroring is currently provided for evaluation purposes only and is not to be used in production environments To enable database mirroring for evaluation purposes use trace flag 1400 during startupBasic HTML5 TagsHTML5 TutorialHTML5 Video Player TutorialHtml5 Doctype HeaderASP.net HTML5 Generate Article Tagdatabase in recoveryHTML5 Slider control and JavaScriptHTML5 audio player tutorial

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.