Статьи

Адресная книга (Jaggery Application)

Январь 14, 2018

Jaggery — это фреймворк для написания веб-приложений и HTTP-ориентированных веб-сервисов для всех аспектов приложения: интерфейс, коммуникация, логика на стороне сервера и постоянство в чистом Javascript.

Это очень простое приложение, написанное на Jaggery. Это в основном адресная книга, которая поддерживает добавление новой записи в книгу и удаление записей из книги. Это приложение преднамеренно ограничено этими функциями, чтобы сделать код простым, чтобы его было проще для новичков.

Предпосылки

Jaggery должен быть загружен и сервер должен быть запущен. http://jaggeryjs.org/howto.jag

Шаг 1

Создайте каталог «адресная книга» внутри каталога «apps». ({JAGGERY_HOME} / приложений /)

Таким образом, ваш новый каталог должен выглядеть следующим образом: {JAGGERY_HOME} / apps / addressbook

Шаг 2

Создайте файл с именем «index.jag» внутри каталога «адресная книга»

Добавьте следующий фрагмент кода в файл «index.jag».
ПРИМЕЧАНИЕ. Он не является частью приложения «Адресная книга». Но это поможет вам увидеть, что ваше приложение работает.

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

Подождите, пока сервер автоматически развернет ваше новое приложение.
Перейдите по ссылке ниже через ваш веб-браузер. На странице должна отображаться «Адресная книга».
Ссылка  http: // localhost: 9763 / addressbook / index.jag

Шаг 3
Создайте файл с именем «jaggery.conf» внутри каталога «адресная книга».
Это один из самых важных файлов в приложении Jaggery. Он содержит конфигурации уровня приложения. Для получения дополнительной информации, пожалуйста, обратитесь  http://jaggeryjs.org/apidocs/jagconf.jag

Добавьте следующие основные конфигурации в файл jaggery.conf.

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

Это необходимо, чтобы увидеть правильное отображаемое имя в консоли управления. Чтобы увидеть, пожалуйста, перейдите по ссылке ниже.

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

Шаг 4

Добавьте следующий код в файл index.jag.

<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>

Шаг 5

Создайте каталог с именем «js» и файл с именем «addressbook.js» внутри него. И скопируйте последние версии «jquery.min.js» и «mustache.js».

Добавьте следующий код в 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();});
    }
}

}

Шаг 6

Создайте каталог с именем «controller» и файл с именем «records.jag» внутри него.

<%
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();
}

%>

Шаг 7

Создайте каталог с именем «model» и файл с именем «recordQuery.jag» внутри него.

<%

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;
        }
    }
}

%>

Шаг 8

Создайте каталог с именем «template» и файл с именем «record.html» внутри него.

<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>

Адресная книга теперь готова с добавлением записей и удалением записей.

Попробуйте сами добавить функциональность обновления к этому.

40
Share: