Last active
April 20, 2022 19:25
-
-
Save LeeHyungGeun/5563615 to your computer and use it in GitHub Desktop.
Server-Side: nodejs with socket.io
Client-Side: express3-handlebars
DB: mongodb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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'; | |
}) | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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'; | |
}) | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
}) | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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; | |
}) | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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'; | |
}) | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment