김대철

카페 후기 등록 구현

review.ejs 카페 아이디까지 포함하여 디비에 저장 구현
###초기설정
>####데이터 베이스 설정
> ####데이터 베이스 설정
>
> <pre><code>
> CREATE TABLE USER(
> ID int(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,
......@@ -10,22 +12,25 @@
> GENDER varchar(32),
> PICTURE varchar(128) NOT NULL
> );
</code>
> </code>
</pre>
> <pre><code>
> CREATE TABLE COMMENT(
> CREATE TABLE REVIEW(
> ID int(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,
> CAFE_ID int(10) NOT NULL
> CAFE_ID int(10) NOT NULL,
> PRICE int(10) NOT NULL,
> KINDNESS int(10) NOT NULL,
> NOISE int(10) NOT NULL,
> ACCESSIBILITY int(10) NOT NULL
> );
</code>
> </code>
</pre>
###commit 형식
<pre><code>
##### 제목 - 50자 이내로 요약!
......@@ -52,5 +57,3 @@
# 제목 첫 글자는 대문자로 작성했나요?
</code>
</pre>
......
......@@ -14,12 +14,14 @@ const FileStore = require("session-file-store")(session);
router.use(bodyParser.urlencoded({ extended: false })); //url인코딩 x
router.use(bodyParser.json()); //json방식으로 파싱
router.use(session({
secret: '209', // 암호화
resave: false,
saveUninitialized: true,
store: new FileStore()
}))
router.use(
session({
secret: "209", // 암호화
resave: false,
saveUninitialized: true,
store: new FileStore(),
})
);
var connection = mysql.createConnection({
host: "localhost",
......@@ -60,10 +62,10 @@ router.post("/index", (req, res) => {
});
router.get("/login", checkAuthenticated, (req, res) => {
req.session.user =req.user;
req.session.user = req.user;
req.session.user.email = req.user.email;
req.session.user.name=req.user.name;
req.session.user.picture=req.user.picture;
req.session.user.name = req.user.name;
req.session.user.picture = req.user.picture;
var sql = "SELECT * FROM USER WHERE EMAIL=?";
var parameter = [req.session.user.email];
connection.query(sql, parameter, function (err, row) {
......@@ -146,25 +148,18 @@ function checkAuthenticated(req, res, next) {
});
}
router.get("/map", (req, res) => {
if (req.session.user) {
res.render("map", {user:req.session.user});
}
res.render("map");
});
router.get("/logout", function (req, res) {
req.session.destroy(); //세션비우기
res.redirect("/");
});
router.get("/comment/:cafeId", function (req, res) {
router.get("/review/:cafeId", function (req, res) {
const cafeId = req.params.cafeId;
res.render("comment", { cafeId: cafeId });
res.render("review", { cafeId: cafeId });
});
// 카페 후기 등록
router.post("/comment", function (req, res) {
router.post("/review", function (req, res) {
var cafeId = req.body.cafeId;
var price = req.body.price;
var kindness = req.body.kindness;
......@@ -179,11 +174,11 @@ router.post("/comment", function (req, res) {
// 입력받지 않은 데이터가 하나라도 존재 (카페아이디는 후기작성시 자동으로 받아옴)
if (!cafeId || !price || !kindness || !noise || !accessibility) {
console.log("입력받지 않은 데이터 존재");
res.redirect("/comment/:cafeId"); // 후기작성으로 다시 이동
res.redirect("/review/:cafeId"); // 후기작성으로 다시 이동
}
var sql =
"INSERT INTO COMMENT(CAFE_ID, PRICE, KINDNESS, NOISE, ACCESSIBILITY) VALUES(?,?,?,?,?)";
"INSERT INTO REVIEW(CAFE_ID, PRICE, KINDNESS, NOISE, ACCESSIBILITY) VALUES(?,?,?,?,?)";
var parameter = [cafeId, price, kindness, noise, accessibility];
......@@ -194,7 +189,9 @@ router.post("/comment", function (req, res) {
console.log("새로운 comment 데이터 입력");
}
});
return res.render("map");
return res.send(
'<script>alert("등록 완료"); location.href = "/login";</script>'
);
});
module.exports = router;
......
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622063531297}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622031757269}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622032034021}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622032180844}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622070807469,"user":{"name":"최정민","email":"cjm104174@gmail.com","picture":"https://lh3.googleusercontent.com/a-/AOh14Gh3nytGsPbviGhkznR8HIwrL6o7xBIoFL08nIeU=s96-c","nickname":"Mayf","age":25,"gender":"male"}}
\ No newline at end of file
......@@ -78,7 +78,7 @@
console.log('Signed in as: ' + xhr.responseText);
if(xhr.responseText == 'success'){
signOut();
location.assign('/login')
location.assign('/login');
}
};
xhr.send(JSON.stringify({token : id_token}));
......
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheets/bootstrap.css">
<link rel="stylesheet" href="stylesheets/bootstrap.css" />
<title>Cafe Map</title>
<style>
.navbar {
......@@ -116,7 +116,16 @@
<a class="navbar-brand" href="/"><strong>Home</strong></a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" style="color:#ffffff" href="#" data-toggle="modal" data-target="#profile"><%=user.nickname%>'s Profile<span class="sr-only">(current)</span></a>
<a
class="nav-link"
style="color: #ffffff"
href="#"
data-toggle="modal"
data-target="#profile"
><%=user.nickname%>'s Profile<span class="sr-only"
>(current)</span
></a
>
</li>
<li class="nav-item active">
<a
......@@ -137,14 +146,14 @@
<div class="row">
<div class="col-1"></div>
<div class="col-10"><div id="map" style="width: 100%; height: 575px"></div></div>
<div class="col-10">
<div id="map" style="width: 100%; height: 575px"></div>
</div>
<div class="col-1"></div>
</div>
</section>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services"
......@@ -274,7 +283,7 @@
' <span class="tel">' +
place.phone +
"</span>" +
`<a href="/comment/${place.id}"><button>후기 작성</button>`;
`<a href="/review/${place.id}"><button>후기 작성</button>`;
"</div>" + '<div class="after"></div>';
contentNode.innerHTML = content;
placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
......@@ -284,14 +293,27 @@
<script src="javascripts/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 모달 바디 -->
<div class="modal fade" id="profile" tabindex="-1" role="dialog" aria-labelledby="profilemodal" aria-hidden="true">
<div
class="modal fade"
id="profile"
tabindex="-1"
role="dialog"
aria-labelledby="profilemodal"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="profilemodal"><%=user.nickname%>'s PROFILE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<h5 class="modal-title" id="profilemodal">
<%=user.nickname%>'s PROFILE
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
......@@ -299,21 +321,33 @@
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
<img src="<%= user.picture%>" alt="google profile picture" style="width:100%; height: 100%; ">
<img
src="<%= user.picture%>"
alt="google profile picture"
style="width: 100%; height: 100%"
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title"><%=user.name%></h5>
<p class="card-text">Age : <%=user.age%>, Gender : <%=user.gender%></p>
<p class="card-text">Emaile : <%=user.email%>
<p class="card-text"><small class="text-muted">from Google and CafeRecommend</small></p>
<p class="card-text">
Age : <%=user.age%>, Gender : <%=user.gender%>
</p>
<p class="card-text">Emaile : <%=user.email%></p>
<p class="card-text">
<small class="text-muted"
>from Google and CafeRecommend</small
>
</p>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal">확인</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">
확인
</button>
</div>
</div>
</div>
......
......@@ -3,28 +3,55 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enroll Comment</title>
<title>Enroll Review</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
<style>
img{
max-width: 100%;
height: 100% !important;
img {
max-width: 100%;
height: 100% !important;
}
h1{font-family: 'Noto Sans KR', sans-serif;}
h4{font-family: 'Noto Sans KR', sans-serif;}
h2{font-family: 'Noto Sans KR', sans-serif;}
h3{font-family: 'Noto Sans KR', sans-serif;}
h5{font-family: 'Noto Sans KR', sans-serif;}
.middle{
display: inline-block;
vertical-align: middle;
h1 {
font-family: "Noto Sans KR", sans-serif;
}
h4 {
font-family: "Noto Sans KR", sans-serif;
}
h2 {
font-family: "Noto Sans KR", sans-serif;
}
h3 {
font-family: "Noto Sans KR", sans-serif;
}
h5 {
font-family: "Noto Sans KR", sans-serif;
}
.middle {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
<h3 class="display-6 font-weight-bold">후기 등록</h3>
</div>
<hr class="my-2" >
<section id="carousel-1">
......@@ -32,7 +59,12 @@
<div class="col-2"></div>
<div class="col-8">
<hr class="my-4" style="background-color: white">
<form action="/comment" method="post">
<form action="/review" method="post">
<hr class="my-3" style="background-color: white">
<label for="cafeId" class="form-label">카페ID</label>
<select class="form-select form-select-lg" id="cafeId" name="cafeId" required>
<option value="<%=cafeId%>" selected><%=cafeId%></option>
</select>
<hr class="my-3" style="background-color: white">
<label for="price" class="form-label">가격</label>
<select class="form-select form-select-lg" id="price" name="price" required>
......