이승윤 / OpenSource-MyCookBook

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
1677a225 1 parent 01c30a7f

feat: 초기 레이아웃 세팅

Inline Side-by-side
Showing 26 changed files with 1018 additions and 21 deletions
node_modules
package-lock.json
\ No newline at end of file
나만의 요리 레시피 모음 만들기
이 프로젝트는 youtube를 사용하여 해당 유튜브 채널의 정보 및 동영상을 나의 리스트로 볼 수 있도록 하기위해 만들어질 예정입니다.
var express = require('express');
var app = express();
var port = 3000;
var mongoose = require('mongoose');
mongoose.Promise = global.Promise;
//auto-increment를 위한 패키지
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var flash = require('connect-flash');
//passport 로그인 관련
var passport = require('passport');
var session = require('express-session');
var db = mongoose.connection;
db.on('error', console.error);
db.once('open', function () {
console.log('mongo db Connection');
});
var connect = mongoose.connect('mongodb://127.0.0.1:27017/cookBook', {
useMongoClient: true,
});
//admin module get
var admin = require('./routes/admin');
var accounts = require('./routes/accounts');
var auth = require('./routes/auth');
var home = require('./routes/home.js');
var chat = require('./routes/chat');
var connectMongo = require('connect-mongo');
var MongoStore = connectMongo(session);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/uploads', express.static('uploads'));
var sessionMiddleWare = session({
secret: 'fastcampus',
resave: false,
saveUninitialized: true,
cookie: {
maxAge: 2000 * 60 * 60, //지속시간 2시간
},
store: new MongoStore({
mongooseConnection: mongoose.connection,
ttl: 14 * 24 * 60 * 60,
}),
});
app.use(sessionMiddleWare);
//passport 적용
app.use(passport.initialize());
app.use(passport.session());
//플래시 메시지 관련
app.use(flash());
app.use(function (req, res, next) {
app.locals.isLogin = req.isAuthenticated();
//app.locals.urlparameter = req.url; //현재 url 정보를 보내고 싶으면 이와같이 셋팅
//app.locals.userData = req.user; //사용 정보를 보내고 싶으면 이와같이 셋팅
next();
});
//routes add
app.use('/', home);
app.use('/admin', admin);
app.use('/accounts', accounts);
app.use('/auth', auth);
app.use('/chat', chat);
var server = app.listen(port, function () {
console.log('Express listening on port', port);
});
var listen = require('socket.io');
var io = listen(server);
//socket io passport 접근하기 위한 미들웨어 적용
io.use(function (socket, next) {
sessionMiddleWare(socket.request, socket.request.res, next);
});
require('./libs/socketConnection')(io);
module.exports = function(req, res, next) {
if (!req.isAuthenticated()){
res.redirect('/accounts/login');
}else{
return next();
}
};
\ No newline at end of file
var crypto = require('crypto');
var mysalt = "fastcampus";
module.exports = function(password){
return crypto.createHash('sha512').update( password + mysalt).digest('base64');
};
\ No newline at end of file
module.exports = function(){
Array.prototype.removeByValue = function (search) {
var index = this.indexOf(search);
if (index !== -1) {
this.splice(index, 1);
}
};
};
\ No newline at end of file
require('./removeByValue')();
var userList = []; //사용자 리스트를 저장할곳
module.exports = function(io) {
io.on('connection', function(socket){
var session = socket.request.session.passport;
var user = (typeof session !== 'undefined') ? ( session.user ) : "";
// userList 필드에 사용자 명이 존재 하지 않으면 삽입
if(userList.indexOf(user.displayname) === -1){
userList.push(user.displayname);
}
io.emit('join', userList);
//사용자 명과 메시지를 같이 반환한다.
socket.on('client message', function(data){
io.emit('server message', { message : data.message , displayname : user.displayname });
});
socket.on('disconnect', function(){
userList.removeByValue(user.displayname);
io.emit('leave', userList);
});
});
};
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Hello OSS!</title>
</head>
<body>
<header>
<center>
<h1>나의 요리비급서 from YouTube</h1>
</center>
<hr align="center" width=50%>
</hr>
</header>
</body>
</html>
\ No newline at end of file
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//생성될 필드명을 정한다.
var ProductsSchema = new Schema({
name: {
//제품명
type: String,
required: [true, '제목은 입력해주세요'],
},
thumbnail: String, //이미지 파일명
price: Number, //가격
description: String, //설명
created_at: {
//작성일
type: Date,
default: Date.now(),
},
username: String, //작성자추가
});
ProductsSchema.virtual('getDate').get(function () {
var date = new Date(this.created_at);
return {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate(),
};
});
// 1씩 증가하는 primary Key를 만든다
// model : 생성할 document 이름
// field : primary key , startAt : 1부터 시작
module.exports = mongoose.model('products', ProductsSchema);
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var UserSchema = new Schema({
username: {
type: String,
required: [true, '아이디는 필수입니다.'],
},
password: {
type: String,
required: [true, '패스워드는 필수입니다.'],
},
displayname: String,
created_at: {
type: Date,
default: Date.now(),
},
});
module.exports = mongoose.model('user', UserSchema);
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var CommentsSchema = new Schema({
content: String,
created_at: {
type: Date,
default: Date.now(),
},
product_id: Number,
});
module.exports = mongoose.model('comments', CommentsSchema);
{
"name": "node",
"version": "1.0.0",
"description": "my-cookbook-project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon ./app.js"
},
"dependencies": {
"body-parser": "^1.18.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"csurf": "^1.9.0",
"ejs": "^2.5.7",
"express": "^4.15.4",
"express-session": "^1.15.5",
"mongodb": "^2.2.36",
"mongoose": "^4.13.21",
"morgan": "^1.8.2",
"multer": "^1.3.0",
"passport": "^0.4.0",
"passport-facebook": "^2.1.1",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"socket.io": "^2.0.3"
}
}
var express = require('express');
var router = express.Router();
var UserModel = require('../models/UserModel');
var passwordHash = require('../libs/passwordHash');
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
passport.serializeUser(function (user, done) {
console.log('serializeUser');
done(null, user);
});
passport.deserializeUser(function (user, done) {
var result = user;
result.password = "";
console.log('deserializeUser');
done(null, result);
});
passport.use(new LocalStrategy({
usernameField: 'username',
passwordField : 'password',
passReqToCallback : true
},
function (req, username, password, done) {
UserModel.findOne({ username : username , password : passwordHash(password) }, function (err,user) {
if (!user){
return done(null, false, { message: '아이디 또는 비밀번호 오류 입니다.' });
}else{
return done(null, user );
}
});
}
));
router.get('/', function(req, res){
res.send('account app');
});
router.get('/join', function(req, res){
res.render('accounts/join');
});
router.post('/join', function(req, res){
var User = new UserModel({
username : req.body.username,
password : passwordHash(req.body.password),
displayname : req.body.displayname
});
User.save(function(err){
res.send('<script>alert("회원가입 성공");location.href="/accounts/login";</script>');
});
});
router.get('/login', function(req, res){
res.render('accounts/login', { flashMessage : req.flash().error });
});
router.post('/login' ,
passport.authenticate('local', {
failureRedirect: '/accounts/login',
failureFlash: true
}),
function(req, res){
res.send('<script>alert("로그인 성공");location.href="/";</script>');
}
);
router.get('/success', function(req, res){
res.send(req.user);
});
router.get('/logout', function(req, res){
req.logout();
res.redirect('/accounts/login');
});
module.exports = router;
\ No newline at end of file
var express = require('express');
var router = express.Router();
var ProductsModel = require('../models/ProductsModel');
var CommentsModel = require('../models/VideoModels');
var csrf = require('csurf');
var csrfProtection = csrf({ cookie: true });
var loginRequired = require('../libs/loginRequired');
var path = require('path');
var uploadDir = path.join(__dirname, '../uploads'); // 루트의 uploads위치에 저장한다.
var fs = require('fs');
//multer 셋팅
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, callback) {
//이미지가 저장되는 도착지 지정
callback(null, uploadDir);
},
filename: function (req, file, callback) {
// products-날짜.jpg(png) 저장
callback(
null,
'products-' + Date.now() + '.' + file.mimetype.split('/')[1]
);
},
});
var upload = multer({ storage: storage });
router.get('/', function (req, res) {
res.send('admin main page');
});
router.get('/products', function (req, res) {
ProductsModel.find(function (err, products) {
res.render(
'admin/products',
{ products: products }
//ProductModel의 products를 받아서
//admin/products로 response를 보낸다.
);
});
});
router.get(
'/products/write',
loginRequired,
csrfProtection,
function (req, res) {
//edit에서도 같은 form을 사용하므로 빈 변수( product )를 넣어서 에러를 피해준다
res.render('admin/form', { product: '', csrfToken: req.csrfToken() });
}
);
router.post(
'/products/write',
upload.single('thumbnail'),
loginRequired,
csrfProtection,
function (req, res) {
var product = new ProductsModel({
name: req.body.name,
thumbnail: req.file ? req.file.filename : '',
price: req.body.price,
description: req.body.description,
username: req.user.username,
});
//이 아래는 수정되지 않았음
var validationError = product.validateSync();
if (validationError) {
res.send(validationError);
} else {
product.save(function (err) {
res.redirect('/admin/products');
});
}
//이 위는 수정되지 않았음
}
);
router.get('/products/detail/:id', function (req, res) {
//url 에서 변수 값을 받아올떈 req.params.id 로 받아온다
ProductsModel.findOne({ id: req.params.id }, function (err, product) {
//제품정보를 받고 그안에서 댓글을 받아온다.
CommentsModel.find({ product_id: req.params.id }, function (err, comments) {
res.render('admin/productsDetail', {
product: product,
comments: comments,
});
});
});
});
router.get(
'/products/edit/:id',
loginRequired,
csrfProtection,
function (req, res) {
//기존에 폼에 value안에 값을 셋팅하기 위해 만든다.
ProductsModel.findOne({ id: req.params.id }, function (err, product) {
res.render('admin/form', {
product: product,
csrfToken: req.csrfToken(),
});
});
}
);
router.post(
'/products/edit/:id',
loginRequired,
upload.single('thumbnail'),
csrfProtection,
function (req, res) {
//그전에 지정되 있는 파일명을 받아온다
ProductsModel.findOne({ id: req.params.id }, function (err, product) {
//아래의 코드만 추가되면 된다.
if (req.file && product.thumbnail) {
//요청중에 파일이 존재 할시 이전이미지 지운다.
fs.unlinkSync(uploadDir + '/' + product.thumbnail);
}
//위의 코드만 추가되면 된다.
//넣을 변수 값을 셋팅한다
var query = {
name: req.body.name,
thumbnail: req.file ? req.file.filename : product.thumbnail,
price: req.body.price,
description: req.body.description,
};
ProductsModel.update(
{ id: req.params.id },
{ $set: query },
function (err) {
res.redirect('/admin/products/detail/' + req.params.id);
}
);
});
}
);
router.get('/products/delete/:id', function (req, res) {
ProductsModel.remove({ id: req.params.id }, function (err) {
res.redirect('/admin/products');
});
});
router.post('/products/ajax_comment/insert', function (req, res) {
var comment = new CommentsModel({
content: req.body.content,
product_id: parseInt(req.body.product_id),
});
comment.save(function (err, comment) {
res.json({
id: comment.id,
content: comment.content,
message: 'success',
});
});
});
router.post('/products/ajax_comment/delete', function (req, res) {
CommentsModel.remove({ id: req.body.comment_id }, function (err) {
res.json({ message: 'success' });
});
});
module.exports = router;
var express = require('express');
var router = express.Router();
var UserModel = require('../models/UserModel');
var passport = require('passport');
var FacebookStrategy = require('passport-facebook').Strategy;
passport.serializeUser(function (user, done) {
done(null, user);
});
passport.deserializeUser(function (user, done) {
done(null, user);
});
passport.use(new FacebookStrategy({
// https://developers.facebook.com에서 appId 및 scretID 발급
clientID: "863352300499259", //입력하세요
clientSecret: "36867723fbdd49dac987f9a061e2206a", //입력하세요.
callbackURL: "http://localhost:3000/auth/facebook/callback",
profileFields: ['id', 'displayName', 'photos', 'email'] //받고 싶은 필드 나열
},
function(accessToken, refreshToken, profile, done) {
//아래 하나씩 찍어보면서 데이터를 참고해주세요.
//console.log(profile);
//console.log(profile.displayName);
//console.log(profile.emails[0].value);
//console.log(profile._raw);
//console.log(profile._json);
UserModel.findOne({ username : "fb_" + profile.id }, function(err, user){
if(!user){ //없으면 회원가입 후 로그인 성공페이지 이동
var regData = { //DB에 등록 및 세션에 등록될 데이터
username : "fb_" + profile.id,
password : "facebook_login",
displayname : profile.displayName
};
var User = new UserModel(regData);
User.save(function(err){ //DB저장
done(null,regData); //세션 등록
});
}else{ //있으면 DB에서 가져와서 세션등록
done(null,user);
}
});
}
));
// http://localhost:3000/auth/facebook 접근시 facebook으로 넘길 url 작성해줌
router.get('/facebook', passport.authenticate('facebook', { scope: 'email'}) );
//인증후 페이스북에서 이 주소로 리턴해줌. 상단에 적은 callbackURL과 일치
router.get('/facebook/callback',
passport.authenticate('facebook',
{
successRedirect: '/',
failureRedirect: '/auth/facebook/fail'
}
)
);
//로그인 성공시 이동할 주소
router.get('/facebook/success', function(req,res){
res.send(req.user);
});
router.get('/facebook/fail', function(req,res){
res.send('facebook login fail');
});
module.exports = router;
\ No newline at end of file
var express = require('express');
var router = express.Router();
router.get('/', function(req,res){
if(!req.isAuthenticated()){
res.send('<script>alert("로그인이 필요한 서비스입니다.");location.href="/accounts/login";</script>');
}else{
res.render('chat/index');
}
});
module.exports = router;
\ No newline at end of file
var express = require('express');
var router = express.Router();
var ProductsModel = require('../models/ProductsModel');
/* GET home page. */
router.get('/', function(req,res){
ProductsModel.find( function(err,products){ //첫번째 인자는 err, 두번째는 받을 변수명
res.render( 'home' ,
{ products : products } // DB에서 받은 products를 products변수명으로 내보냄
);
});
});
module.exports = router;
\ No newline at end of file
<% include ../includes/header.ejs %>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">회원가입</h3>
</div>
<div class="panel-body">
<form role="form" action="" id="join_form" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="ID" name="username" type="text" autofocus="" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password 확인" name="password2" type="password" value="" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="이름" name="displayname" type="text" value="" required="">
</div>
<!-- Change this to a button or input when using this as a form -->
<input type="submit" class="btn btn-lg btn-success btn-block" value="가입하기">
<div style="margin-top: 10px">
<a href="/auth/facebook" class="btn btn-lg btn-primary btn-block">
<i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 회원가입
</a>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$('#join_form').submit(function(){
var $usernameInput = $('#join_form input[name=username]');
var $passwordInput = $('#join_form input[name=password]');
var $passwordInput2 = $('#join_form input[name=password2]');
var $displayname = $('#join_form input[name=displayname]');
if(!$usernameInput.val()){
alert("아이디를 입력해주세요.");
$usernameInput.focus();
return false;
}
if(!$passwordInput.val()){
alert("패스워드를 입력해주세요.");
$passwordInput.focus();
return false;
}
if(!$passwordInput2.val()){
alert("확인 패스워드를 입력해주세요.");
$passwordInput2.focus();
return false;
}
if(!$displayname.val()){
alert("이름을 입력해주세요.");
$displayname.focus();
return false;
}
if($passwordInput.val() !== $passwordInput2.val()){
alert("패스워드와 확인용패스워드를 똑같이 입력해주세요.");
return false;
}
return true;
});
});
})();
</script>
<% include ../includes/footer.ejs %>
\ No newline at end of file
<% include ../includes/header.ejs %>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<%if(typeof flashMessage !=='undefined') {%>
<div class="alert alert-danger" role="alert"><%=flashMessage%></div>
<%}%>
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">로그인</h3>
</div>
<div class="panel-body">
<form role="form" action="" id="login_form" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="ID" name="username" type="text" autofocus="" required="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" required="">
</div>
<!-- Change this to a button or input when using this as a form -->
<input type="submit" class="btn btn-lg btn-success btn-block" value="로그인">
<div style="margin-top: 10px">
<a href="/auth/facebook" class="btn btn-lg btn-primary btn-block">
<i class="fa fa-facebook" aria-hidden="true"></i> 페이스북 로그인
</a>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$('#login_form').submit(function(){
var $usernameInput = $('#login_form input[name=username]');
var $passwordInput = $('#login_form input[name=password]');
if(!$usernameInput.val()){
alert("아이디를 입력해주세요.");
$usernameInput.focus();
return false;
}
if(!$passwordInput.val()){
alert("패스워드를 입력해주세요.");
$passwordInput.focus();
return false;
}
return true;
});
});
})();
</script>
<% include ../includes/footer.ejs %>
\ No newline at end of file
<% include ../includes/header.ejs %>
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="<%=csrfToken%>" />
<table class="table table-bordered">
<tr>
<th>제품명</th>
<td><input type="text" name="name" class="form-control" value="<%=product.name%>"/></td>
</tr>
<tr>
<th>섬네일</th>
<td>
<input type="file" name="thumbnail" />
<% if(product.thumbnail){ %>
<a href="/uploads/<%=product.thumbnail%>" target="_blank">업로드 이미지 보기</a>
<% } %>
</td>
</tr>
<tr>
<th>가격</th>
<td><input type="text" name="price" class="form-control" value="<%=product.price%>"/></td>
</tr>
<tr>
<th>설명</th>
<td><input type="text" name="description" class="form-control" value="<%=product.description%>"/></td>
</tr>
</table>
<button class="btn btn-primary">작성하기</button>
</form>
<% include ../includes/footer.ejs %>
\ No newline at end of file
<% include ../includes/header.ejs %>
<table class="table table-bordered table-hover">
<tr>
<th>제목</th>
<th>작성일</th>
<th>삭제</th>
</tr>
<%products.forEach(function(product){%>
<tr>
<td>
<a href="/admin/products/detail/<%=product.id%>"><%=product.name%></a>
</td>
<td>
<%=product.getDate.year%> -
<%=product.getDate.month%> -
<%=product.getDate.day%>
</td>
<td>
<a href="/admin/products/delete/<%=product.id%>" class="btn btn-danger" onclick="return confirm('삭제하시겠습니까?')">삭제</a>
</td>
</tr>
<% }); %>
</table>
<a href="/admin/products/write" class="btn btn-default">작성하기</a>
<% include ../includes/footer.ejs %>
\ No newline at end of file
<% include ../includes/header.ejs %>
<div class="panel panel-default">
<div class="panel-heading">
<%=product.name%>
</div>
<div class="panel-body">
<div style="padding-bottom: 10px">
작성일 :
<%=product.getDate.year%> -
<%=product.getDate.month%> -
<%=product.getDate.day%>
</div>
<% if(product.thumbnail){%>
<p>
<img src="/uploads/<%=product.thumbnail%>" style="max-width: 100%"/>
</p>
<% } %>
<%=product.description%>
<!-- 댓글영역 -->
<div>
댓글작성하기
<form id="commentForm" action="" method="post">
<input type="hidden" name="product_id" value="<%=product.id%>" />
<textarea class="form-control" name="content"></textarea>
<button class="btn btn-primary" style="margin-top: 10px">댓글작성</button>
</form>
</div>
<!-- 댓글영역 -->
<hr />
<div id="comment_area">
<% comments.forEach(function(comment){ %>
<div>
<%=comment.content%>
( <a class='comment_delete' comment_id='<%=comment.id%>'>삭제</a> )
</div>
<% }); %>
</div>
</div>
</div>
<a href="/admin/products" class="btn btn-default">목록으로</a>
<a href="/admin/products/edit/<%=product.id%>" class="btn btn-primary">수정</a>
<% include ../includes/footer.ejs %>
<script>
(function(){
$(document).ready(function() {
$('#commentForm').submit(function(){
var $contentVal = $(this).children('textarea[name=content]').val();
if($contentVal){
$.ajax({
url: '/admin/products/ajax_comment/insert',
type: 'POST',
data: $(this).serialize(),
})
.done(function(args) {
if(args.message==="success"){
$('#comment_area').append(
'<div>' + args.content +
" ( <a class='comment_delete' comment_id='"+ args.id +"'>삭제</a> ) </div>"
);
$('#commentForm textarea[name=content]').val("");
}
})
.fail(function(args) {
console.log(args);
});
}else{
alert('댓글 내용을 입력해주세요.')
}
return false;
});
});
})();
</script>
<script>
$(document).on('click' , '.comment_delete' , function(){
if(confirm('삭제하시겠습니까?')){ //확인창 예 눌렀을 시만 진행
var $self = $(this);
$.ajax({
url: '/admin/products/ajax_comment/delete',
type: 'POST',
data: { comment_id : $self.attr('comment_id') },
})
.done(function() {
$self.parent().remove();
alert("삭제가 완료되었습니다.");
})
.fail(function(args) {
console.log(args);
});
}
});
</script>
\ No newline at end of file
<% include ../includes/header.ejs %>
<div class="row">
<div class="col-sm-10">
<div class="panel panel-default" id="chatWrap">
<div class="panel-heading">대화내용</div>
<div class="panel-body">
<ul id="chatBody"></ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default" id="userWrap">
<div class="panel-heading">User</div>
<div class="panel-body">
<ul id="userList"></ul>
</div>
</div>
</div>
</div>
<div>
<form action="" method="post" id="sendForm">
<div class="input-group">
<input type="hidden" name="socketId">
<input type="text" name="message" class="form-control" placeholder="대화내용을 입력해주세요.">
<span class="input-group-btn">
<button class="btn btn-primary">작성하기</button>
</span>
</div><!-- /input-group -->
</form>
</div>
<style type="text/css">
.panel-default ul { padding-left:0px; }
.panel-default ul li { list-style:none; padding-left:0px;}
.panel-default .panel-body {min-height:350px; max-height:350px; overflow-y:scroll; }
#chatWrap ul li strong::after { content: " : "; }
@media (max-width: 768px) {
#userWrap { display:none; }
#chatWrap .panel-body { min-height:250px; }
}
</style>
<script src="/socket.io/socket.io.js"></script>
<script>
(function(){
var socket = io();
function updateUserList(userList){
$('#userList').html("");
for(var key in userList){
$('#userList').append('<li>' + userList[key] + '</li>');
}
}
socket.on('join', function(data){
updateUserList(data);
});
socket.on('server message', function(data){
$('#chatBody').append('<li><strong>'+ data.displayname +'</strong>' + data.message + '</li>');
});
socket.on('leave', function(data){
updateUserList(data);
});
$(document).ready(function() {
$('#sendForm').submit(function(){
var $massage = $('#sendForm input[name=message]');
socket.emit('client message', { message : $massage.val()});
$massage.val('');
return false;
});
});
})();
</script>
<% include ../includes/footer.ejs %>
<% include ./includes/header.ejs %>
<div class="container" id="masonry_container">
<% products.forEach(function(product){ %>
<div class="masonry-grid">
<%if(product.thumbnail){%>
<img src="/uploads/<%=product.thumbnail%>">
<%}%>
<p>
<%=product.title%><br />
by <%=product.username%>(
<%=product.getDate.year%>.
<%=product.getDate.month%>.
<%=product.getDate.day%>
)
</p>
</div>
<%});%>
</div>
<style type="text/css">
.masonry-grid img { max-width: 260px; }
</style>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
var $masonry_container = $('#masonry_container');
$masonry_container.imagesLoaded(function(){
$masonry_container.masonry({
itemSelector : '.masonry-grid',
columnWidth : 270
});
});
</script>
<% include ./includes/footer.ejs %>
\ No newline at end of file
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Node.js 예제</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bootstrap js 추가 -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 10px;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">Nodejs</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home</a>
</li>
<li><a href="/admin/products">ADMIN</a></li>
<li><a href="/chat">CHAT</a></li>
<% if(isLogin){%>
<li><a href="/accounts/logout" onclick="return confirm('로그아웃 하시겠습니까?')">LOGOUT</a></li>
<%}else{%>
<li><a href="/accounts/join">JOIN</a></li>
<li><a href="/accounts/login">LOGIN</a></li>
<%}%>
</ul>
</div>
</div>
</nav>