CREATE A TODO APPLICATION USING NODEJS

WHAT IS NODEJS:

Node.js is an open source server framework. It allows you to run Javascript on the server. Actually It is a server-side javascript like php, ruby on rails.

CREATING A TODO APP STEP BY STEP:

Step 1:

Navigate Project directory and then run

$sudo npm install -g express-generator
$express

Step 2:

Then necessary folders such as bin, public, routes, view and app.js and package.json are created.
Package.json looks like
/home/nascenia-420/projects/todoapp/package.json

{
 "name": "todoapp",
 "version": "1.0.0",
 "private": true,
 "scripts": {
 "start": "node ./bin/www"
 },
 "dependencies": {
 "async": "^2.5.0",
 "body-parser": "~1.18.2",
 "cookie-parser": "~1.4.3",
 "debug": "~2.6.9",
 "express": "~4.15.5",
 "jade": "~1.11.0",
 "morgan": "~1.9.0",
 "mysql": "^2.14.1",
 "nodemailer": "*",
 "serve-favicon": "~2.4.5"
 }
}

Step 3:

$npm install

Node modules folder is created then.

Step 4:

Then this line should add at the bottom of the app.js file →

app.listen(5000,'localhost');

Step 5:

Then run this command

$node app.js

Step 6:

Open a browser and type “localhost:5000”
You will see default UI which is created by express. Now Your todo app modification starts.

Step 7:

Create a database so run this command

$npm install mysql --save

Step 8:

Then add this code in app.js file to define mysql and your created database

var mysql = require ('mysql');
var con= mysql.createConnection({ 
        host: 'localhost', 
        user: 'root', 
        password: 'nascenia', 
        database: 'todos'
});

Step 9:

Define Route. Here I have defined one Route named Account.js. One can divide page content based one Route If the project is large.

Step 10:

In the view folder several views are added which are showed in the application. Here I made three views add.jade, edit.jade and index1.jade
/home/nascenia-420/projects/todoapp/views/account/index1.jade

html
 head
 title Account List
 body
 h3 Account List
 a(href="account/add") Add
 br
 table(border="1")
 tr
 th Id
 th Name
 th Description
 th Action
 
 each account in accounts
 tr
 td #{account.id}
 td #{account.name}
 td #{account.description}
 td
 a(href="/account/edit/"+ account.id) Edit

a(href="/account/delete/" + account.id, onclick="return confirm('Are you sure?')")Delete

While run on browser it looks like

While click “Add”  UI looks like

/home/nascenia-420/projects/todoapp/views/account/Add.jade

html
 head
  title Account List
 body
  h3 Account Info
 form(method="post", action="account/add")
  table
   tr
    th Name
     td
      input(type="text",name="name")
   tr
    th Description
    td
     input(type="text",name="description")
   tr
    th  
    td
     input(type="submit",value="Save")

For adding data you have to add these code in Account.js

router.get('/account/add', function(req, res, next) {
     res.render('account/add');
});
router.post('/account/add', function(req, res, next) {
     var con = req.con;
     async.parallel(
          [
              function(callback){
                  con.query('insert into accounts(name,
description) values(?,?)', [req.body.name,
req.body.description], function(errors, accounts){
                           callback(errors);
                    });
               }
         ],
         function(err, results){
               res.redirect('/account');
         }
    );
});

After saving UI looks like

Now you can Edit or delete.

For Edit the Jade file is like following below:
/home/nascenia-420/projects/todoapp/views/account/edit.jade

html
 head
  title Account List
 body
  h3 Account Info
  form(method="post", action="/account/edit")
   table
    tr
     th Name
     td
      input(type="text", name="name", value=accounts.name)
      input(type="hidden", name="id", value=accounts.id)
     tr
      th Description
      td
      input(type="text", name="description", 
value=accounts.description)
     tr
      th  
      td
       input(type="submit",value="Save")

To delete data please add these chunk of code in Account .js

router.get('/account/delete/:id', function(req, res, next) {
     var con = req.con;
     async.parallel(
          [
              function(callback){
                   con.query('delete from accounts where id 
= ?', [req.params.id], function(errors, accounts){ 
                           callback(errors);
                           console.log(req);
                     });
               }
           ],
           function(err, results){
                res.redirect('/account');
           } 
      );
});

Step 11:

Inside the app.js file you have to define your Route

     var account = require('./routes/account');

Step 12: 

In the Routes several url are defined which One have to visit while run the application.

If you want to learn more about making a Todo application with nodejs can follow these links:

1. A-node-js-TODO-app-connected-vwith-with-mysql
2. Node.js Tutorial

Contributor: Anwesha Paul, Nascenia