Lier MongoDB avec NodeJS/HTML5 (Webix Framework)

INDEX.HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!doctype html>
<html>
<head>
    <script type="text/javascript" src="./webix.js"></script>
    <link rel="stylesheet" type="text/css" href="./webix.css">
    <title>TEST DATABASE</title>
</head>
<body>
<script>
    webix.ready(function(){
        var grid = {
            id:"grid",
            view:"datatable",
	        css:"my_style",
	        select:"row",
            columns:[
		        {id:"column_1", header:["Column_1", {content:"textFilter"}], editor:"text", fillspace:0.5},
                {id:"column_2", header:["Column_2", {content:"textFilter"}], editor:"text", fillspace:0.3},
                {id:"column_3", header:["Column_3", {content:"textFilter"}], editor:"text", fillspace:0.2},
                {id:"column_4", header:["Column_4", {content:"textFilter"}], editor:"text", fillspace:0.2},
                {id:"column_5", header:["Column_5", {content:"textFilter"}], editor:"text", fillspace:0.25},
<!--            {id:"status", header:["Status", {content:"selectFilter"}], editor:"select", options:["Active", "Closed"], fillspace:0.2}, -->
            ],
            editable:true, editaction:"dblclick"
        };
 
        function add_row(){
            $$("grid").add({name:"New item"});
        }
 
        function delete_row(){
            $$("grid").remove($$("grid").getSelectedId(true));
        }
 
        webix.ui({
            rows:[
                {view:"toolbar", elements:[
                    {view:"button", value:"New item", click:add_row},
                    {view:"button", value:"Delete item", click:delete_row},
                    {gravity:2}
                ]},
                grid
            ]
        });
    })
</script>
</body>
</html>

SERVER.JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
 
 
//connect to the mongo
var db = require('mongoskin').db("mongodb://localhost/my_db", { w: 0});
	db.bind('record');
 
//create the app instance
var app = express();
 
//serve static files
app.use(express.static(path.join(__dirname, 'public')));
 
//parse POST data
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
 
//response for saving operations
function after_update(err, res, record){
	if (err){
		res.status(500);
		res.send({ error:err.toString() });
	} else {
		res.send(record || {});
	}
}
 
 
//data loading
app.get('/BNPP.json', function(req, res){
	db.record.find().toArray(function(err, data){
		for (var i = 0; i < data.length; i++){
			//map _id to id
			data[i].id = data[i]._id;
			delete data[i]._id;
		}
		res.send(data);
	});
});
 
//adding
app.post('/data', function(req, res){
	db.record.insert(req.body, function(err, record){
		if (err) return res.send({ status:"error" });
		res.send({ newid:req.body._id });
	});
});
 
//updating
app.put('/data/:id', function(req, res){
	db.record.updateById(req.param("id"), req.body, function(err){
		if (err) return res.send({ status:"error" });
		res.send({});
	});
});
 
//deleting
app.delete('/data/:id', function(req, res){
	db.record.removeById(req.param("id"), req.body, function(err){
		if (err) return res.send({ status:"error" });
		res.send({});
	});
});
 
app.listen(3000);

DATABASE.JSON

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
[ {
    "COLUMN_1": "TEST Alpha", "COLUMN_2": "TWO", "COLUMN_3": "", "COLUMN_4": "", "COLUMN_5": ""
}
,
{
    "COLUMN_1": "TEST Beta", "COLUMN_2": "THREE", "COLUMN_3": "", "COLUMN_4": "", "COLUMN_5": ""
}
,
{
    "COLUMN_1": "", "COLUMN_2": "ONE", "COLUMN_3": "", "COLUMN_4": "Beta", "COLUMN_5": ""
}
,
{
    "COLUMN_1": "Hello", "COLUMN_2": "World", "COLUMN_3": "It", "COLUMN_4": "is", "COLUMN_5": "me"
}
,
{
    "COLUMN_1": "FINISH", "COLUMN_2": "", "COLUMN_3": "5000", "COLUMN_4": "10000", "COLUMN_5": "test final"
} ]

Afin que vous voyez les choses plus facilement que par GitHub.