2016 March 20 Archive - EXEIdeas – Let's Your Mind Rock

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. Thereis a complete course at TutorialsPoint | HTML5 – Web SQL DatabaseWeb SQL Database is a web page API for storing data in databases that can be queried using a variant of SQL. The API is supported by Google Chrome, Opera, Safari, Firefox and the Android Browser.From WikipediaSo HTML5 Web SQL Databases are actually client side databases and cant connect to the server so you can use it for your single single clients that measn every visitor to your web page or apps will have its own database. You can do normal operations as like in SQL meas sert, can delete, can update, can search, cal view all, can make table, can delet table, can make database etc.So here for more confirmation, we are sharing a web apps for you that is an address book means a local database that will save your contacts. Even clearing your cookies and cache will save the data. So here in this code, you can easily see all the codes and steps described there with comments also.CLICK HERE TO SEE DEMOFeatures:1.) No External Code/File Added.2.) Pure HTML5 & JavaScript Codes.3.) Basic CSS Added.4.) Simple And Fast Loading Code.5.) Can Work With HTML5 Browser.6.) DataBase Will Be User End.7.) No Server Require.8.) Fast Executing.9.) Insert/Update/Delete/Search/Show/Select Add Codes Available.10.) Work Nearly Same Like SQL/Oracal.Requirements:Your browser must be HTML5 supported and your web page must have HTML tag as in the top of web page HTML code.HTML5 Web SQL Example: (Address Book) //Test for browser compatibilityif (window.openDatabase) {//Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MBvar mydb = openDatabase("contactDatabase", "0.1", "A Database For My Contacts.", 1024 * 1024);//Create the myContacts table using SQL for the database using a transactionmydb.transaction(function (t) {t.executeSql("CREATE TABLE IF NOT EXISTS myContacts (id INTEGER PRIMARY KEY ASC, contactName TEXT, contactPhone TEXT)");});}else {alert("WebSQL is not supported by your browser!");}/*//Function to delete the table "myContacts" in the databasefunction deleteTable() {//Check to ensure the mydb object has been createdif (mydb) {mydb.transaction(function(t) {t.executeSql("DROP TABLE myContacts");});} else {alert("Database not found, your browser does not support WebSQL!");}}*///Function to output the list of myContacts in the databasefunction updatecontactList(transaction, results) {//initialise the listitems variablevar listitems = "";//get the Contact list holder ulvar listholder = document.getElementById("contactList");//Clear myContacts list ullistholder.innerHTML = "";var i;//Iterate through the resultsfor (i = 0; i - ( Delete Contact | Update Contact )";}}//Function to get the list of myContacts from the databasefunction outputContacts() {//Check to ensure the mydb object has been createdif (mydb) {//Get all the myContacts from the database with a select statement, set outputcontactList as the callback function for the executeSql commandmydb.transaction(function (t) {t.executeSql("SELECT * FROM myContacts", [], updatecontactList);});}else {alert("Database not found, Your browser does not support WebSQL!");}}//Function to add the myContacts to the databasefunction addNewContact() {//Check to ensure the mydb object has been createdif (mydb) {//Get the values of the contactName and contactPhone text inputsvar contactName = document.getElementById("addNAME").value;var contactPhone = document.getElementById("addPhone").value;//Test to ensure that the user has entered both a contactName and contactPhoneif (contactName !== "" && contactPhone !== "") {//Insert the user entered details into the myContacts table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parametermydb.transaction(function (t) {t.executeSql("INSERT INTO myContacts (contactName, contactPhone) VALUES (?, ?)", [contactName, contactPhone]);outputContacts();});}else {alert("You must enter a Name and cPhone!");}}else {alert("Database not found, your browser does not support WebSQL!");}}//Function to remove a contact from the database, passed the row id as it's only parameterfunction deleteContact(id) {//Check to ensure the mydb object has been createdif (mydb) {//Get all the myContacts from the database with a select statement, set outputcontactList as the callback function for the executeSql commandmydb.transaction(function (t) {t.executeSql("DELETE FROM myContacts WHERE id=?", [id], outputContacts);});} else {alert("Database not found, your browser does not support WebSQL!");}}//Function to update a contact from the database, passed the row id as it's only parameterfunction updateContact(contactName, contactPhone, id) {//Check to ensure the mydb object has been createdif (mydb) {//Get all the myContacts from the database with a select statement, set outputcontactList as the callback function for the executeSql commandmydb.transaction(function (t) {t.executeSql("UPDATE myContacts SET contactName=?, contactPhone=? WHERE id=?", [contactName, contactPhone, id] , outputContacts);});} else {alert("Database not found, your browser does not support WebSQL!");}}// Run The Function After LoadoutputContacts();/*//Function to search a contact from the database, passed the row id as it's only parameterfunction searchContact(id) {//Check to ensure the mydb object has been createdif (mydb) {//Get all the myContacts from the database with a select statement, set outputcontactList as the callback function for the executeSql commandmydb.transaction(function (t) {t.executeSql("SELECT * FROM myContacts WHERE id LIKE ?%', [id], outputContacts);});} else {alert("Database not found, your browser does not support WebSQL!");}}*/ * {font-family:sans-serif;}fieldset{padding:10px;} Address Book: Add a Contact: Name:

Cell #:

Add Contact

Your Contacts: Note: You can leave this Page and when you return, the Contacts you entered will still be here...!!!

Last Words:That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…