Making Todolist with node.js and mongo Part VI

ကဲ … အခု ကျွန်တော်တို့ task list အတွက် mongodb ပြင်ဆင်ပြီးပြီ။ အခုတော့ mongodb အတွက် model တစ်ခု ဆောက်ပါမယ်။

data-provider.js

var Db = require('mongodb').Db,
ObjectID = require('mongodb').BSONNative;
Server = require('mongodb').Server,
Connection = require(‘mongodb’).Connection,
sys= require('sys');

DataProvider = function(host,port){
  this.db = new Db('tatoo', new Server(host, port, {}), {native_parser:true});
  this.db.open(function(){});
};

exports.DataProvider= DataProvider;

အခု code လေးက ကျွန်တော်တို့တွေ ပထမဆုံး DataProvider module လေး စလိုက်တာပါ။ DB တစ်ခု ဆောက်တယ်။

DataProvider.prototype.getCollection = function(callback){
  this.db.collection('tasks',function(error,task_collection){
     if(error) callback(error);
     else callback(null,task_collection);
  });
};

ဆိုတာက ကျွန်တော်တို့တွေ collection ကို ခေါ်ဖို့ ဖန်တီးလိုက်တာပါ။ ကဲ အခု ကျွန်တော်တို့တွေ tasks တွေ အကုန်လုံးကို ထုတ်ကြည့်ဖို့ အတွက် ရေးပါမယ်။

DataProvider.prototype.findByUser=function(user,callback){
    this.getCollection(function(error,task_collection){
        if(error) callback(error);
        else {
            task_collection.findOne({user:user},function(error,result){
                if( error ) callback(error)
                else callback(null, result)
            });
        }
    });
};

taskcollection ကို user name နဲ့ ရှာလိုက်တယ်။ ပြီးတော့ result ကို callback ပြန်ပို့လိုက်တယ်။

အခု index.js တစ်ခုဖန်တီးပြီး ကျွန်တော်တို့ ဖန်တီးထားတဲ့ model ကို လှမ်းခေါ်သုံးပါမယ်။ ကျွန်တော်တို့ လိုအပ်တာတွေက express , mongodb နဲ့ jqtpl template engine ပါ။

ဒါကြောင့် အဲဒီ module ၃ ခု ကို အရင် သွင်းထားဖို့တော့လိုပါတယ်။

$npm install express
$npm install mongodb
$npm install jqtpl

သွင်းပြီးရင် template ကို views folder အောက်မှာ ထားပါမယ်။ views folder အရင်တည်ဆောက်ပါ။ ပြီးရင် layout.html နဲ့ index.html file ၂ ခုကို ဖန်တီးထားပါ။

layout.html

<!DOCTYPE HTML>
<html>
<head>
<title>${title}</title>
<link rel="stylesheet" href="/public/style.css" type="text/css" media="screen" title="main css" charset="utf-8">
<head>
<body>
{{html body}}
</body>
</html>

index.html

<h1>Tatoo List</h1>
<ul>
{{each list}}


<li>${$value.desc}
{{if $value.done == 0}}
<a href="/done/${$value.id}">Done</a>
{{else $value.done==1}}
[done]
{{/if}}

<a href="/del/${$value.id}">Del</a>
</li>

{{/each}}
<li>
<form action="/add" method="post">
<input type="text" name="task" placeholder="New Tasks">
<input type="submit" value="add">
</form>
</li>
</ul>

ကျွန်တော်က template engine ကို jqtpl ကို အသုံးပြုထားပါတယ်။ ဘာလို့လည်းဆိုတော့ သူက နားလည်ဖို့ အလွယ်ဆုံးမို့ပါ။ jqtpl ကို သိချင်ရင်တော့ ဒီမှာ ဖတ်နိုင်ပါတယ်။ layout.html က အဓိက layout အပိုင်းပေါ့။ file ကို ခေါ်တာနဲ့ သူက အပေါ်က တဆင့် အနေနဲ့ ပါလာပါတယ်။ အဓိက main template ပေါ့။ index.html မှာတော့ ရလာတဲ့ results တွေကို each list ဆိုပြီး loop ပတ်ထားလိုက်တယ်။ done ကသာ 0 ဖြစ်ရင် done ကို နှိပ်လိုက်ရမယ်။ ၁ ဆိုရင် နှိပ်ခွင့်မပေးတော့ဘူး။ del နဲ့ done အတွက်က နောက်မှ စဉ်းစားပါမယ်။ ပြီးရင် index.js မှာ အောက်ကလို ရေးထားပါတယ်။

var express= require('express');
var jqtpl = require('jqtpl');

var sys=require('sys');
//var pub = __dirname + '/styles';
var app = express.createServer();
var DataProvider= require('./data-provider').DataProvider;
var taskProvider= new DataProvider('localhost', 27017);
var fs = require("fs");

var app = express.createServer();

app.configure(function(){
    app.set('view engine', "html");
    app.register('.html', require('jqtpl').express);
    app.set('views', __dirname + "/views");
    app.set('view options', { layout: true });

    app.use("/public",express.static(__dirname + '/public'));
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
    app.use(express.bodyParser());
    app.use(app.router);

});

app.get('/', function(req, res){
    
    taskProvider.findByUser("saturngod",function(error, tasks){
        res.render('index.html',{title:"Tatoo List",list:tasks.todo});
    });
    
});

app.listen(3000);

code က တော့ ပုံမှန်ပါပဲ။ configure မှာ view engine မှာ html ကို သုံးပြီးတော့ jqtpl template ကို သုံးမယ်လို့ ကြေငြာထားပါတယ်။ views folder ကိုတော့ /views သုံးမယ်လို့ ပြောထားတယ်။ public folder ကတော့ နောက်ပြီး css ကို အသုံးပြုဖို့ အတွက်ပါ။

var taskProvider= new DataProvider('localhost', 27017);

နဲ့ init လုပ်ပြီးတော့

taskProvider.findByUser("saturngod",function(error, tasks){
});

နဲ့ ပြန်ရှာထားတာကို တွေ့နိုင်ပါတယ်။ ပြီးရင်တော့

node index.js

ကို run ကြည့်လိုက်ပါ။

Leave a Reply Cancel reply