Over a million developers have joined DZone.

Address Book (Jaggery Application)

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

Jaggery is a framework to write webapps and HTTP-focused web services for all aspects of the application: front-end, communication, Server-side logic and persistence in pure Javascript.

This is a very simple application written in Jaggery. It is basically a address book which supports adding new record to the book and deleting records from the book. This application is purposely restricted to those functionalities to keep the code simple to make it easier for the newbies.

Prerequisites

Jaggery should be downloaded and the server should be running. http://jaggeryjs.org/howto.jag

Step 1

Create directory “addressbook”, inside the 'apps' directory. ({JAGGERY_HOME}/apps/)

So your new directory should look like, {JAGGERY_HOME}/apps/addressbook

Step 2

Create a file called “index.jag” inside the directory “addressbook”

Add the following code snippet to the file “index.jag”
NOTE: This is not a part of the Address Book application. But this will help you to see that your application is working.

<%
    print(“Address Book”);
%>

Wait a while until the server automatically deploy your new application.
Goto the below link via your web browser. It should show “Address Book” in the page.
Link http://localhost:9763/addressbook/index.jag

Step 3
Create a file called “jaggery.conf” inside the directory “addressbook”
This one of the most important files in the Jaggery application. It contains application level configurations. For more information please refer http://jaggeryjs.org/apidocs/jagconf.jag

Add the following basic configurations to the jaggery.conf file.

{
    "displayName":"Address Book", 
    "welcomeFiles":["index.jag"],
    "urlMappings":[       
        {
            "url":"/records/*",
            "path":"/controller/records.jag"
        }
    ]
}

This is need to see the correct display name in the management console. To see please follow the link below.

https://192.168.184.1:9443/admin/carbon/

Step 4

Add the following code to the index.jag file.

<html>
    <head>
        <title>
            AddressBook
        </title>
        <link href="css/styles.css" rel="stylesheet"></link>
  
    </head>
    <body onload="AddressBook.viewAllRecords()">
        <div class="main_container">
            <div class="row">
                <div class="header">
                    <span class="title">Address Book</span>
                </div>
            </div>
            <div class="row">
                <div class="inputForm">
                    <form action="" id="addNewRecordForm" name="addNewRecordForm">
                        <table>
                            <tr>
                                <td>Name</td>
                                <td>: <input id="name" type="text" /></td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>: <input id="address" type="text" /></td>
                            </tr>
                            <tr>
                                <td>Telephone</td>
                                <td>: <input id="telephone" type="text" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td class="add_record_button"><a class="#" onclick="AddressBook.addNewRecord();">Add Record</a></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="row">
                <div id="records">
                </div>
            </div>
            <div class="footer">
                JD©
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/mustache.js"></script>
        <script src="js/addressbook.js"></script>
    </body>
</html>

Step 5

Create a directory called "js", and a file called "addressbook.js" inside it. And copy latest versions of "jquery.min.js" and "mustache.js".

Add the following code in to addressbook.js.

AddressBook = new function() {

this.addNewRecord = function () {
    console.log("Function called addNewRecord");

    var name = $("#name").val();
    var address = $("#address").val();
    var telephone = $("#telephone").val();

    if(name == null || name == ""){
        alert("Name is null");
        return false;
    } else if(address == null || address == ""){
        alert("Address is null");
        return false;
    } else if (telephone == null || telephone == ""){
        alert("Telephone is null");
        return false;
    }

    if(!AddressBook.validateTelephone(telephone)){
        return false;
    }

    AddressBook.resetInptForm();

    //console.log("Name:" + name);
    //console.log("Address:" + address);
    //console.log("Telepone:" + telephone);

    var data = {"name":name, "address":address, "telephone":telephone};

    AddressBook.makeRequest("POST", "/addressbook/records/", data, function(hmtl){AddressBook.viewAllRecords();});
}

this.resetInptForm = function(){
    $("#name").val('');
    $("#address").val('');
    $("#telephone").val('');
}

this.validateTelephone = function(telephone){
    var stripped = telephone.replace(/[\(\)\.\-\ ]/g, '');
    if(isNaN(parseInt(stripped))){
        alert("Invalid telephone number");
        return false;
    }else{
        return true;
    }
}

this.makeRequest = function (type, url, data, callback){
    console.log("Function called makeRequest");

    $.ajax({
        type: type,
        url: url,
        data: data,
        dataType: "json",
        success: callback
    });
}

this.viewAllRecords = function () {
    console.log("Function called viewAllRecords");

    // Requsting all the records
    AddressBook.makeRequest("GET", "/addressbook/records/", null, function(html){AddressBook.loadRecords(html);});
}

this.loadRecords = function(data) {
    console.log("Function called loadRecords");

    // Updating the display with new records
    $.get('template/record.html', function(templete) {var html = Mustache.to_html(templete, data); $("#records").html(html);});
}

this.deleteRecord = function(id){

    var answer = confirm("Are you really want to delete?");

    if(answer){
        var data = {"id":id};
        AddressBook.makeRequest("POST", "/addressbook/records/", data, function(hmtl){AddressBook.viewAllRecords();});
    }
}

}

Step 6

Create a directory called "controller", and a file called "records.jag" inside it.

<%
include("../model/recordQuery.jag");

var verb = request.getMethod();
var name = request.getParameter('name');
var address = request.getParameter('address');
var telephone = request.getParameter('telephone');
var id = request.getParameter('id');

if(verb == "POST" && name != null && address != null && telephone != null) {

    var log = new Log();
    log.debug("Adding new record. [Name=" + name + ", Address=" + address + ", Telephone=" + telephone + "]");

    addRecord(name, address, telephone);

} else if(verb == "POST" && id != null ) {
    var log = new Log();
    log.debug("Deleting record. [Id=" + id + "]");

    deleteRecord(id);

} else if(verb == "GET") {
    listAllRecords();
}

%>

Step 7

Create a directory called "model", and a file called "recordQuery.jag" inside it.

<%

function addRecord(name, address, telephone){

    var records = session.get("records");
    if (records == null){
        records = new Array();
        session.put("records", records);
        session.put("id", 0);
    }
    
    var id = session.get("id") + 1;
    session.put("id", id);

    var record = {"id":id, "name":name, "address":address, "telephone":telephone};
    records.push(record);

    //var log = new Log();
    //log.info(session.get("records"));
}

function listAllRecords(){
    var records = session.get("records");

    //var log = new Log();
    //log.info(records);

    if (records != null){
        records.sort(sortRecords);
        print({"records" : records});
    }else {
        print("No records");
    }
}

function sortRecords(first, second){
    if (first.name < second.name){
        return -1;
    }
    else if(first.name > second.name){
        return 1;
    }
    else {
        return 0
    }
}

function deleteRecord(id){
    var records = session.get("records");

    for (var index = 0; index < records.length; index++){
        var record = records[index];
        if(record.id == id){
            var temp_record = records[records.length - 1];
            records[records.length - 1] = records[index];
            records[index] = temp_record;

            records.pop();

            break;
        }
    }
}

%>

Step 8

Create a directory called "template", and a file called "record.html" inside it.

<div>
<table class="record_table">
    <tr class="table_header">
        <td>
            Name
        </td>
        <td>
            Address
        </td>
        <td>
            Telephone
        </td>
        <td>
        </td>
    </tr>
{{#records}}
    <tr class="table_row">
        <td class="column_name">
            {{name}}
        </td>

        <td class="column_address">
            {{address}}
        </td>

        <td class="column_telephone">
            {{telephone}}
        </td>

        <td class="column_delete">
            <a href="#" class="delete" onclick="AddressBook.deleteRecord({{id}})">Delete</a>
        </td>
    </tr>

{{/records}}
</table>
</div>

The AddressBook is now ready with adding records and deleting records.

Try yourself to add the update functionality to this.

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}