A simple Task-list application in CouchDB

Author: Jos de Jong, 2011-07-09

Here a small demo on how to use CouchDB. It is an application which stores a task list in CouchDB. Tasks can be listed, added, edited, and deleted. The demo consists of a single index.html file of only 120 lines of code, and demonstrates how to create, update, and delete documents in CouchDB, and how to create a simple view.

Installation

To get the demo up and running:

Install CouchDB on your computer. On Linux, you can enter the following on the command line:
sudo apt-get install couchdb
Download the demo file index.html and save it somewhere on your computer (see download below).
Open the couchdb webinterface in your browser:
http://localhost:5984/_utils
Click on "Create database..." in the upper left to create a new database, and enter "tasks" as database name.
In the new database, click "New document" in the upper left. Change the id of the document to "webpage". Save the document by clicking "Save document" in the upper left.
Click "Upload attachement..." in the just saved document. Select the downloaded file index.html, and click "Upload". On my computer, the upload starts but never ends. However, when you just refresh the page, you will see that the file is attached correctly.
Now, we can retrieve the uploaded attachement via its url. Open a new tab in your browser, and go to:
http://localhost:5984/tasks/webpage/index.html

Source code

The source code for the demo is just one small index.html file.

Click here to download the sourcecode

<html>
<head>
    <title>Tasks</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        // retrieve database name from url (for example "tasks")
        var DATABASE = "/" + window.location.href.split("/")[3];
        
        function getTasks() {
            $.ajax({
                url: DATABASE + "/_design/tasks/_view/tasks",
                success: function (data){
                    var view = JSON.parse(data);
                    var tasks = [];
                    $(view.rows).each( function (index, item) {
                        tasks.push (item.value);
                    });
                    displayTasks(tasks);
                }
             });
        }
        
        function displayTasks(tasks) {
            var html = "<table>";
            $(tasks).each( function (index, task) {
                var edit = "<input type='button' value='Edit' " +
                    "onclick='editTask(" + JSON.stringify(task) + ")' />";
                var del = "<input type='button' value='Delete' " +
                    "onclick='deleteTask(" + JSON.stringify(task) + ")' />";

                html += "<tr>";
                html += "<td>" + task.task + "</td>";
                html += "<td>" + edit + "</td>";
                html += "<td>" + del + "</td>";
                html += "</tr>";
            });
            html += "</table>";
            
            $('#tasks').empty();            
            $('#tasks').append(html);
        }
        
        function addTask() {
            var desc = prompt("Enter a task description");
            if (desc) {
                var task = {
                    "task": desc
                };

                $.ajax({
                    type: "POST",
                    url: DATABASE,
                    contentType: "application/json",
                    data: JSON.stringify(task),
                    success: function () {
                        getTasks();
                    }
                 });
            }
        }
        
        function editTask(task) {
            var desc = prompt("New task description", task.task);
            if (desc) {
                task.task = desc;

                $.ajax({
                    type: "PUT",
                    url: DATABASE + "/" + task._id,
                    contentType: "application/json",
                    data: JSON.stringify(task),
                    success: function () {
                        getTasks();
                    }
                 });
            }
        }
        
        function deleteTask(task) {
            var doit = confirm("Do you really want to delete the task '" + 
                task.task + "'?");
            if (doit) {
                $.ajax({
                    type: "DELETE",
                    url: DATABASE + "/" + task._id + "?rev=" + task._rev,
                    success: function () {
                        getTasks();
                    }
                 });
            }
        }
        
        // create view (will fail if already existing)
        function createView() {
            var view = {
               "language": "javascript",
               "views": {
                   "tasks": {
                       "map": "function(doc) {if (doc.task) {emit(doc.task, doc);}}"
                   }
               }
            }
            $.ajax({
                type: "PUT",
                url: DATABASE + "/_design/tasks",
                contentType: "application/json",
                data: JSON.stringify(view)
             });
        }
    </script>
</head>

<body onload="createView(); getTasks();">
    <h1>Tasks</h1>    
    <input type="button" id="add" value="Add" onclick="addTask();" />
    <div id="tasks"></div>
</body>
</html>