Tutorial on JavaScript Databases
A JavaScript program runs within the Web browser. For security reasons, JavaScript cannot write to a local computer, other than using temporary "cookies", nor can it write to a Web server.
To build relational database functionality, a relational database needs to be installed on the Web server, and database-handling functionality needs to be written in a server-side language such as PHP. JavaScript can make calls to the database functionality using AJAX.
However, if non-relational "run-time only" Insert, Query, Update, and Delete functionality are required on a "static table," a pure JavaScript "database" can be created using the open-source "Taffydb" library.
Other People Are Reading
Instructions
-
Creating a Select Results Page
-
1
Navigate your browser to the Taffydb download page at GitHub. (See Resources.) Click the "Download Source" button, select "Zip", and save "typicaljoe-taffydb-d3a8525.zip" to your computer desktop.
-
2
Extract taffy.js from the ZIP file and save it to your desktop.
-
-
3
Create a blank text document on your desktop and rename it as "statictable.js". Open statictable.js in Notepad, and copy and paste the following JavaScript code.
var mytaffy = new TAFFY([
{id:1, name: "Company A", score: "80", description: "2/5/10" },
{id:2, name: "Company B", score: "90", description: "2/6/10" }
]);
-
4
Save statictable.js. Create a blank text document on your desktop and rename it as "myhtml.html". Open myhtml.html in Notepad, and copy and paste the following code.
<html>
<head>
<script src="taffy.js"></script>
<script src="statictable.js" type="text/javascript"></script>
<script>
var ref=2;
function refreshDisplay(){
try{
output = document.getElementById("display");
output.innerHTML="";
mytaffy.orderBy([{"score":"desc"}]);
var ltotal=0;
mytaffy.forEach(function(n,m) {
ltotal++;
output.innerHTML = output.innerHTML + n.id + ", " + n.name + ", " + n.score + ", " + n.description + "";
});
output.innerHTML = output.innerHTML + "Total Records: " + ltotal;
}catch(err){
alert(err.description);
}
}
</script>
</head>
<body onLoad="refreshDisplay()">
<h3>Database Results:</h3>
row-id, name, score, description
<div id="display"> </div>
</body>
</html>
-
5
Save myhtml.html. Double-click the myhtml.html desktop icon, to view it inside a Web browser. Note that the "body onLoad" event calls the "refreshDisplay()" function when the page loads up, and the results are displayed in the DOM element with id "display."
-
6
Press "Alt"+"TAB" to select the browser. Press "F5" to refresh the HTML page. The browser should display the two rows "Company A" and "Company B."
Adding a Row
-
7
Press "Alt"+"TAB" to select Notepad. Copy and paste the following code above the "</script>" end tag in Notepad to insert a function to add a record.
function addRecord(){
var line=prompt(
"Please enter name, score, and date, separated by commas:");
var toks=line.split(",");
if (toks.length >= 3){
var lname=toks[0];
var lscore=parseInt(toks[1]);
var ldate=parseInt(toks[2]);
ref=ref+1;
mytaffy.insert({ id:ref, name:lname, score:lscore, description:ldate } );
}
refreshDisplay();
}
-
8
Copy and paste the following code above the "</body>" end tag in Notepad to create an "Add Record" button.
<input type="button" id="btnCreate" onclick="addRecord()" value="Add Record"></input>
-
9
Press "Alt"+"TAB" to select the browser. Press "F5" to refresh the HTML page. Click the "Add Record" button, and enter "Company C, 85, 2/7/10" at the prompt, then click "OK." The browser should now display the new record.
Updating a Row
-
10
Press "Alt"+"TAB" to select Notepad. Copy and paste the following code above the "</script>" end tag in Notepad to add JavaScript function to update a record.
function updateRecord(){
var lref=parseInt(prompt("Please enter the row-id number"));
var lline=parseInt(prompt("Please enter the new score"));
mytaffy.update({
score:lline
},{id:lref});
refreshDisplay();
}
-
11
Copy and paste the following code above the "</body>" end tag in Notepad to add an "Update Record" button.
<input type="button" id="btnUpdate" onclick="updateRecord()" value="Update Record"></input>
-
12
Press "Alt"+"TAB" to select the browser. Press "F5" to refresh the HTML page. Click the "Update Record" button, and enter "1" for the "Company A" row-id, and then click "OK." Then enter "95" and click "OK." The browser should now display the updated score for "Company A."
Deleting a Row
-
13
Press "Alt"+"TAB" to select Notepad. Copy and paste the following code above the "</script>" end tag in Notepad to insert a function to delete a record.
function deleteRecord(){
var lref=parseInt(prompt("Please enter the row-id number"));
mytaffy.remove({id:lref});
refreshDisplay();
}
-
14
Copy and paste the following code above the "</body>" end tag in Notepad to create a "Delete Record" button.
<input type="button" id="btnDelete" onclick="deleteRecord()" value="Delete Record"></input>
-
15
Press "Alt"+"TAB" to select the browser. Press "F5" to refresh the HTML page. Click the "Delete Record" button, and enter "1" for the "Company A" row-id, and then click "OK." The browser should now display only one row "Company B."
-
1
Tips & Warnings
The above example doesn't save changes to a file. This can be achieved, for example, by sending a DHTML "post" to a server language such as PHP, so that it saves to statictable.js with the new data.
References
Resources
- Photo Credit web site buttons image by Ruslana Stovner from Fotolia.com
More Like This
Comments
-
hi when the run the javascript on the webpage I'm geting an error called mytaffy is not defined.....how to solve this please help I'm new to js.
