Igor Wojnicki's WIKI

Ta strona jest tylko do odczytu. Możesz wyświetlić źródła tej strony ale nie możesz ich zmienić.
===== Ćwiczenie 3 (dla zainteresowanych) =====

Prześledź działanie aplikacji implementującej prostą listę zadań.
Poniższy kod źródłowy pochodzi z: http://www.speqmath.com/tutorials/couchdb_tasklist/index.html :
<code html index.html>
<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 view = 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>
</code>

  - Umieść powyższy kod w pliku o nazwie "index.html".
  - W swojej bazie danych utwórz dokument o identyfikatorze ''webpage''
  - Do w/w dodaj załącznik w postaci pobranego wcześniej pliku ''index.html'' o nazwie ''index.html''
  - Skieruj przeglądarkę pod adres (uwaga zamień ''wojnicki'' na nazwę Twojej bazy danych):  ''http://awing.kis.agh.edu.pl:5984/wojnicki/webpage/index.html''
  - Przetestuj działanie aplikacji:
    - dodaj 3 zadania
    - zweryfikuj zawartość Twojej bazy danych
    - usuń 1 zadanie
    - zweryfikuj zawartość Twojej bazy danych
    - zmień (edytuj) 1 zadanie
    - zweryfikuj zawartość Twojej bazy danych, sprawdź czy zmieniła się wartość ''_rev'' dla edytowanego dokumentu?
Igor Wojnicki's WIKI

Narzędzia użytkownika

Narzędzia witryny

Narzędzia strony
