PouchDB is a small JavaScript library that provides us with the functionality of a document oriented database. We can use it both on the server and on the client.
The following is the code that I was using in this video clip. Make sure you update the link to the PouchDB JavaScript file before you run it.
<!DOCTYPE html>
<html>
<head>
<title>pouchdb sample</title>
<script src="http://download.pouchdb.com/pouchdb-nightly.js"></script>
<script type="text/javascript">
var db = new PouchDB('books');
function addBook() {
var booktitle = window.document.bookform.titlefield.value;
var bookisbn = window.document.bookform.isbnfield.value;
var bookauthor = window.document.bookform.authorfield.value;
var book = {
_id: bookisbn,
title: booktitle,
author: bookauthor
};
db.put(book, function callback(error, result) {
if (!error) {
clearFields();
document.getElementById("message").innerHTML =
"the new book was successfully added";
}
});
}
function clearFields() {
window.document.bookform.titlefield.value="";
window.document.bookform.authorfield.value="";
window.document.bookform.isbnfield.value="";
}
function showBooks() {
db.allDocs( {include_docs: true, descending: true},
function(err, doc) {
showTableOfBooks(doc.rows);
} );
}
function showTableOfBooks(data) {
var div = document.getElementById("message");
var str = "<table border='1' aligh='left'><tr><th>isbn</th>"+
"<th>title</th><th>author</th></tr>";
for(var i=0; i<data.length; i++)
{
str += "<tr><td>"+data[i].doc._id+
"</td><td>"+data[i].doc.title+
"</td><td>"+data[i].doc.author+"</td></tr>"
}
str += "</table>";
div.innerHTML = str;
}
</script>
</head>
<body>
<form name="bookform">
book title <input type="text" name="titlefield" />
<br/>
book author <input type="text" name="authorfield" />
<br/>
book isbn <input type="text" name="isbnfield" />
<br/>
<input type="button" value="add book" onClick="addBook()" />
<br/>
<input type="button" value="clear fields" onClick="clearFields()" />
<br/>
<input type="button" value="show books" onClick="showBooks()" />
</form>
<div id="message"></div>
</body>
</html>
You can find the complete sample with all the other files it uses as well as slides and video clips for learning how to use this library in my new PouchDB Basics free course at http://abelski.lifemichael.com.
