Server-Side: nodejs with socket.io Client-Side: express3-handlebars DB: mongodb

nodejs with socketio_app.js

var http = require('http');
var express = require('express');
var app = express();
var exphbs = require('express3-handlebars');
var path = require('path');
var server = http.createServer(app);
var io = require('socket.io').listen(server);

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:30000/people');

var Person = mongoose.model('Person', { name: String, age: Number, sex: Boolean});
var person = {};
var people = [];

app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.configure(function(){
    app.set('port', process.env.PORT || 3000);
    app.set('views', __dirname + '/views');
    app.set('view engine', 'handlebars');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(express.static(path.join(__dirname, 'public')));
});


//param
app.param('_id', function(req, res, next, _id){
    var _id = mongoose.Types.ObjectId(_id);
    Person.findOne({_id: _id}, function(err, item){
        if(err) throw err;

        req.person = item;
        person = item;
        next();
    });
})

//main page
app.get('/', function(req, res){
    res.render('home', {title: "helele title", helele: "hi everyone"});
});
//list page
app.get('/list', function(req, res){
    Find();
    res.render('list', {people:people});
});
//create page
app.get('/create', function(req, res){
    res.render('create');
})
//edit page
app.get('/edit/:_id', function(req, res){
    var _id = req.params._id;
    res.render('edit', { person: person});
})
//remove page
app.get('/remove/:_id', function(req, res){
    var _id = req.params._id;
    res.render('remove', {person: person});
})

//Find - People 데이터 조회
function Find(){
    people = [];
    Person.find({}, {name: true, age: true, sex: true}, function(err, items){
        if(err) throw err;
        for(var i = 0; i < items.length; i++){
            people.push(items[i]);
        }
    });
    return people;
}
//Save - People 데이터 저장
function Create(person){
    Person({ name: person.name, age: person.age, sex: person.sex})
    .save(function(err, items){
        if(err) throw err;
    });
}
//Edit - People 데이터 수정
function Edit(person){
    var _id = mongoose.Types.ObjectId(person._id);
    Person.update({_id: _id}, {name: person.name, age:person.age, sex:person.sex},
        function(err, items){
            if(err) throw err;
        });
}
//Remove - People 데이터 삭제
function Remove(person){
    var _id = mongoose.Types.ObjectId(person._id);
    Person.remove({_id: _id},
        function(err, items){
            if(err) throw err;
        });
}

io.sockets.on('connection', function(socket){
    //Save
    socket.on('createPerson', function(person){
        Create(person);
    });

    //Update
    socket.on('editPerson', function(person){
        Edit(person);
    });

    //Remove
    socket.on('removePerson', function(person){
        Remove(person);
    });
});

server.listen(8000);

nodejs with socketio_public_viewmodels_create.js

(function(){
    var socket = io.connect('http://localhost');
    $(function(){
        $('#createButton').on('click', function(){
            var person = { name: $('#name').val(), age: $('#age').val(), sex: $('input[name=sex]:checked').val()};
            socket.emit('createPerson', person);
            location.href = '/list';
        })
    });
})();

nodejs with socketio_public_viewmodels_edit.js

(function(){
    var socket = io.connect('http://localhost');
    $(function(){
        $('#editButton').on('click', function(){
            var person = { _id: $('#_id').val(),  name: $('#name').val(), age: $('#age').val(), sex: $('input[name=sex]:checked').val()};
            socket.emit('editPerson', person);
            location.href = '/list';
        })
    });
})();

nodejs with socketio_public_viewmodels_home.js

(function(){
    var socket = io.connect('http://localhost');
    $(function(){
        //Save
        $('#saveButton').on('click', function(){
            var person = { name: $('#name').val(), age: $('#age').val(), sex: $('input[name=sex]:checked').val()};
            socket.emit('savePerson', person);
        });
        //Edit
        $('#editButton').on('click', function(){
            var person = { name: $('#name').val(), age: $('#age').val(), sex: $('input[name=sex]:checked').val()};
            socket.emit('editPerson', person);
        })
        //Remove
        $('#removeButton').on('click', function(){
            var person = {name: $('#name').val(), age: $('#age').val(), sex: $('input[name=sex]:checked').val()};
            socket.emit('removePerson', person);
        })
    });
})();

nodejs with socketio_public_viewmodels_list.js

(function(){
    var socket = io.connect('http://localhost');
    $(function(){
        //Create
        $('#createButton').on('click', function(){
            location.href = '/Create';
        });
       //Edit
        $('.editButton').on('click', function(e){
            var _id = $(e.target).data('id');
            location.href = '/Edit/' + _id;
        })
        //Remove
        $('.removeButton').on('click', function(e){
            var _id = $(e.target).data('id');
            location.href = '/Remove/' + _id;
        })
    });
})();

nodejs with socketio_public_viewmodels_remove.js

(function(){
    var socket = io.connect('http://localhost');
    $(function(){
        $('#yes').on('click', function(){
            var person = { _id: $('#_id').val()};
            socket.emit('removePerson', person);
            location.href = '/list';
        })
        $('#no').on('click', function(){
            location.href = '/list';
        })
    });
})();

nodejs with socketio_views_create.handlebars

<p>Name: <input type="text" id="name" name="name" /></p>
<p>Age: <input type="text" id="age" name="age" /></p>
<p>Sex: male<input type="radio" name="sex" value="true" checked="checked" /> female: <input type="radio" name="sex" value="false" /></p>
<p><input type="button" id="createButton" value="create" /></p>

<script type="text/javascript" src="/viewmodels/create.js"></script>

nodejs with socketio_views_edit.handlebars

<input type="hidden" id="_id" value="{{{person._id}}}" />
<p>Name: <input type="text" id="name" name="name" value="{{{person.name}}}" /></p>
<p>Age: <input type="text" id="age" name="age" value="{{{person.age}}}" /></p>
{{#if person.sex}}
<p>Sex: male<input type="radio" name="sex" value="true" checked="checked" /> female: <input type="radio" name="sex" value="false" /></p>
{{else}}
<p>Sex: male<input type="radio" name="sex" value="true" /> female: <input type="radio" name="sex" value="false" checked="checked" /></p>
{{/if}}
<p><input type="button" id="editButton" value="edit" /></p>



<script type="text/javascript" src="/viewmodels/edit.js"></script>

nodejs with socketio_views_home.handlebars

<h2>it's my first node.js demo</h2>
<p>Name: <input type="text" id="name" value="{{{name}}}" /></p>
<p>Age: <input type="text" id="age" value="{{{age}}}" /></p>
<p>Sex: male <input type="radio" name="sex" value="true" checked /> female <input type="radio" name="sex" value="false" /></p>
<p><input type="button" value="save" id="saveButton" /></p>
<p><input type="button" value="edit" id="editButton" /></p>
<p><input type="button" value="remove" id="removeButton" /></p>



<script type="text/javascript" src="/viewmodels/home.js"></script>

nodejs with socketio_views_layouts_main.handlebars

<!doctype>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="/socket.io/socket.io.js"></script>
        <title>{{{title}}}</title>
    </head>
    <body>
        {{{body}}}
    </body>
</html>

nodejs with socketio_views_list.handlebars

<p>
    <ul>
    {{#each people}}
         <li>{{name}} {{age}} {{sex}} <input type="button" data-id="{{_id}}" class="editButton" value="edit" /><input type="button" data-id="{{_id}}" class="removeButton" value="remove" /></li>
    {{/each}}
    </ul>
</p>

<p><input type="button" id="createButton" value="create" /></p>

<script type="text/javascript" src="/viewmodels/list.js"></script>

nodejs with socketio_views_remove.handlebars

<input type="hidden" id="_id" value="{{{person._id}}}" />
정말 <span style="color:red">{{{person.name}}}</span> 님을 삭제하시겠습니까?
<input type="button" id="yes" value="예"/><input type="button" id="no" value="아니오"/>

<script type="text/javascript" src="/viewmodels/remove.js"></script>