101companies

Intent

Web programming with indexedDB based on the Language:HTML5 ecosystem

Motivation

The Technology:IndexedDB API is a good alternative solution for persisting data on the client side of a web application. While the Technology:Web storage API uses key-value pairs, the IndexedDB API uses indexed tables represented by a B-tree structure for data storage. This is an applicable approach for larger amounts of data. Since the synchronous API is not fully implemented yet, we used the asynchronous API.

Illustration

The communication between the application and the indexedDB is transaction based. But before using any transactions to gain access to the data we have to create the database and the data within. This section will start with the database initialization and data generation and will finish with illustrating a transaction based Feature:Cut request for the whole company. Please visit Contribution:html5local for the aspect of GUI generation.

Database initialization

The implementation contains an initial open function for the database creation. If the database initialization is successful, the function also generates tables and data. 

companies.indexedDB.open = function(f) {
		
	// opens a connection to the 101Companies database
	// - if it does not exist, create new database
	// - if it exists, use database
	var request = indexedDB.open("101Companies");

	// the database connection is successfully established
	request.onsuccess = function(e) {

		...

	};

	// the database connection is unavailable
	request.onfailure = companies.indexedDB.onerror;
}

The 

indexedDB.open("101Companies");
function opens the connection to an existing database named 101Companies or creates a new database with this name, if it does not exist. It returns a request status object, as well. This object allows an asynchronous callback for the two possible results of the open function: success or failure. On failure, the 
companies.indexedDB.onerror
function returns some user notification. On success, we are able to continue with the table generation: 

...

// creates a data table for Companies
var companiesStore = db.createObjectStore("Company", {keyPath: "id"});

...

This simple call creates a table named Company with the key id. This table is able to store arrays with any fields, except that the field called id is used as the key for the b-tree of the table. It returns the table object for further use, as well.

Data generation

Data manipulations are handled with transactions. This is why we have to create transactions to generate the table contents. Each data manipulation consists of three steps:

  • create transaction
  • retrieve table object
  • put data into the table as an array
companies.indexedDB.addData = function() {

	// get database
	var db = companies.indexedDB.db;
	// create transaction
	var transComp = db.transaction(["Company"], IDBTransaction.READ WRITE, 0);
	// get company table
	var compStore = transComp.objectStore("Company");

	...

	// create data object with id = 0
	var compData = {
		"company": "Meganalysis",
		"id": 0
	};
  
	...

	// store data object
	compStore.put(compData);

	...
	
};

We first retrieve the database using the field 

companies.indexedDB.db;
. After that, a new transaction to the Company table with 
READ WRITE
access has to be created. The table is retrieved with 
transComp.objectStore("Company");
. We now are able to read and write data from and into the table.

Feature implementation

The manipulation of data corresponds to its creation except that we need a cursor to get the required arrays out of the b-tree. In case of cutting the company we need all employees: 

companies.indexedDB.cut = function() {
	// get database
	var db = companies.indexedDB.db;

	// create transaction
	var transEmp = db.transaction(["Employee"], IDBTransaction.READ WRITE, 0);
	// get employee table
	var empStore = transEmp.objectStore("Employee");
	
	// Key range: Get every single employee in the store
	var keyRange = IDBKeyRange.lowerBound(0);
	// create Cursor with key range
	var cursorRequest = empStore.openCursor(keyRange);

	// cursor runs through the result-set
	cursorRequest.onsuccess = function(e) {
		var result = e.target.result;
		if(!!result == false)
			return;
		// cut the salary
		result.value.salary = result.value.salary / 2;
		// store the employee
		empStore.put(result.value);
		// next employee ...
		result.continue();
	};

	// error handling
	cursorRequest.onerror = companies.indexedDB.onerror;
}

The 

IDBKeyRange.lowerBound(0);
means, that all keys are greater than 0. That is, in case of employees, every element within the employee b-tree. If the cursor is successfully created (
var cursorRequest = empStore.openCursor(keyRange);
), we are able to run through the results within the 
onsuccess
function. The function 
e.target.result
delivers the next element. If it exists, we cut the salary and restore it into the database. After that, we continue with the next element at 
result.continue();
.

Architecture

The architecture is equal to Contribution:html5local, except that the model organizes the connection to the indexed database.

Usage

(C) 2012-2024 softlang.org and contributors

There are no revisions for this page.

User contributions

    This user never has never made submissions.

    User edits

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.