Blog post tutorial with total.js

In this tutorial, we will explore how to build a simple CRUD (Create, Read, Update, Delete) blog using the Total.js framework. Total.js provides a powerful and efficient environment for building web applications, and its simplicity makes it an excellent choice for beginners and experienced developers alike. By the end of this tutorial, you will have a basic understanding of Total.js and be able to create a fully functional API with CRUD functionalities.

Create project

Before starting the project, it's important to ensure that your machine has Node.js v14 or an earlier version installed. Having Node.js set up correctly is sufficient to begin building your desired applications using the Total.js framework. If you want to know more, about how to set up a Total.js application, you can take a look at my previous post, where I explain everything from the beginner perspective File uploader, you can also check total.js' post about building a todo app with total.js.

Create posts API endpoints

Create a file named api.js inside the /controllers/ folder and paste the following code inside it.

exports.install = function() {
    // Posts
    ROUTE('API     /api/            -posts_list           *Posts   --> list');
    ROUTE('API     /api/            -posts_read/{id}      *Posts   --> read');
    ROUTE('API     /api/            +posts_insert         *Posts   --> insert');
    ROUTE('API     /api/            -posts_remove/{id}    *Posts   --> remove');
    ROUTE('API     /api/            +posts_update/{id}    *Posts   --> update');

};

You can learn more about routes in total.js at total.js API routing and total.js routing

Create schema and actions for the app endpoints

Create /schemas/posts.js file to define your Posts schema. Paste the bellow code inside that file

var tbl = 'nosql/posts';

NEWSCHEMA('Posts', function(schema) {

    schema.action('list', {
        name: 'List',
        action: function($) {

            DB().list(tbl).autoquery($.query, 'id,title,excerpt,content,photo,dtcreated,dtupdated', null, 'dtcreated_desc', 100).where('isremoved', false).callback($.callback);
        }
    });

    schema.action('read', {
        name: 'Read',
        params: '*id:UID',
        action: function($) {

            var params = $.params;
            var db = DB();
            var item = db.read(tbl).fields('id,title,excerpt,content,photo,dtcreated').id(params.id).where('isremoved', false).error(404).callback($);

            $.callback(item);

        }
    });

        schema.action('insert', {
        name: 'Insert',
        action: function($, model) {

            model.id =  UID();
            model.dtcreated = NOW;
            model.isremoved = false;

            var db = DB();
            db.insert(tbl, model).callback($);

            $.success(model.id);

        }
    });


    schema.action('update', {
        name: 'Update',
        params: '*id:UID',
        action: function($, model) {

            var params = $.params;
            model.dtupdated = NOW;

            var db = DB();
            db.modify(tbl, model).id(params.id).where('isremoved', false).error(404).callback($);

            $.success();
        }
    });

    schema.action('remove', {
        name: 'Remove',
        params: '*id:UID',
        action: function($) {

            var params = $.params;

            var db = DB();
            db.modify(tbl, { isremoved: true, dtupdated: NOW }).id(params.id).where('isremoved', false).error(404).callback($);

            $.success(params.id);
        }
    });

});

Again, if you don't understand what's going on in this code, I encourage you to check that post

Testing

Here are some instructions for testing the API

• Listing posts:

POST /api/     
Content-Type: application/json     
{
"schema": "posts_list"
}

• Reading post:

POST /api/     
Content-Type: application/json     
{
"schema": "posts_read/{id}"
}

• Removing posts:

POST /api/     
Content-Type: application/json     
{
"schema": "posts_remove/{id}"
}

• Inserting posts:

POST /api/     
Content-Type: application/json     
{
"schema": "posts_insert",
"data" : {
    "title" : "Enter the title here",
    "excerpt" : "Enter the excerpt here",
    "content" : "Enter the content here",
    }
}

• Updating posts:

POST /api/     
Content-Type: application/json     
{
"schema": "posts_update/{id}",
"data" : {
    "title" : "Enter the title here",
    "excerpt" : "Enter the excerpt here",
    "content" : "Enter the content here",
    }
}

That is all for our application Server side API implementation. The next step is to implement a nice client-side UI for interacting with our API and this will the Part 2 of this tutorial. If you enjoyed reading this tutorial, please share it with your colleagues, like and leave me some comments. So consider following me and subscribing to the newsletter to not miss part 2.

Github link