카페 후기 등록 구현

review.ejs 카페 아이디까지 포함하여 디비에 저장 구현

카페 후기 등록 구현
review.ejs 카페 아이디까지 포함하여 디비에 저장 구현
김대철
Commit 514c4535dde4ba18625d5d70f1c2d1a471fab676 514c4535 1 parent d4c55fb7
Showing 10 changed files with 124 additions and 63 deletions
README.md
routes/index.js
sessions/7ioe5Z-WGQG7L8YbJtQyXMjFCjnPqVzl.json
sessions/MXP2CmSgUZMQBQpxDdHZMp-WIazumm2B.json
sessions/ZDmDII_a23sx9VaWvB47v1HABYm6QeMN.json
sessions/s0fg_Df0Livu-QHPigJSTtHSwdT1WnTm.json
sessions/wl77OVqesdOarbG1c2AiqSIS8RpBim75.json
views/index.ejs
views/map.ejs
views/comment.ejs → views/review.ejs
--- a/README.md
View file @514c453
+++ b/README.md
View file @514c453
 ###초기설정
->####데이터 베이스 설정
+
+> ####데이터 베이스 설정
+>
 > <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>
-
-
--- a/routes/index.js
View file @514c453
+++ b/routes/index.js
View file @514c453
@@ -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({
+router.use(
-  secret: '209',  // 암호화
+  session({
-  resave: false,
+    secret: "209", // 암호화
-  saveUninitialized: true,
+    resave: false,
-  store: new FileStore()
+    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.name = req.user.name;
-  req.session.user.picture=req.user.picture;
+  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;
--- a/sessions/7ioe5Z-WGQG7L8YbJtQyXMjFCjnPqVzl.json deleted 100644 → 0
View file @d4c55fb
+++ b/sessions/7ioe5Z-WGQG7L8YbJtQyXMjFCjnPqVzl.json deleted 100644 → 0
View file @d4c55fb
-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622063531297}
\ No newline at end of file
--- a/sessions/MXP2CmSgUZMQBQpxDdHZMp-WIazumm2B.json deleted 100644 → 0
View file @d4c55fb
+++ b/sessions/MXP2CmSgUZMQBQpxDdHZMp-WIazumm2B.json deleted 100644 → 0
View file @d4c55fb
-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622031757269}
\ No newline at end of file
--- a/sessions/ZDmDII_a23sx9VaWvB47v1HABYm6QeMN.json deleted 100644 → 0
View file @d4c55fb
+++ b/sessions/ZDmDII_a23sx9VaWvB47v1HABYm6QeMN.json deleted 100644 → 0
View file @d4c55fb
-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622032034021}
\ No newline at end of file
--- a/sessions/s0fg_Df0Livu-QHPigJSTtHSwdT1WnTm.json deleted 100644 → 0
View file @d4c55fb
+++ b/sessions/s0fg_Df0Livu-QHPigJSTtHSwdT1WnTm.json deleted 100644 → 0
View file @d4c55fb
-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622032180844}
\ No newline at end of file
--- a/sessions/wl77OVqesdOarbG1c2AiqSIS8RpBim75.json deleted 100644 → 0
View file @d4c55fb
+++ b/sessions/wl77OVqesdOarbG1c2AiqSIS8RpBim75.json deleted 100644 → 0
View file @d4c55fb
-{"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
--- a/views/index.ejs
View file @514c453
+++ b/views/index.ejs
View file @514c453
@@ -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}));
--- a/views/map.ejs
View file @514c453
+++ b/views/map.ejs
View file @514c453
 <!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>
+            <h5 class="modal-title" id="profilemodal">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <%=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">
-                    <p class="card-text">Emaile : <%=user.email%>
+                      Age : <%=user.age%>, Gender : <%=user.gender%>
-                    <p class="card-text"><small class="text-muted">from Google and CafeRecommend</small></p>
+                    </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>
--- a/views/comment.ejs → views/review.ejs
View file @514c453
+++ b/views/comment.ejs → views/review.ejs
View file @514c453
@@ -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{
+        img {
-            max-width: 100%;
+          max-width: 100%;
-            height: 100% !important;
+          height: 100% !important;
         }
-        h1{font-family: 'Noto Sans KR', sans-serif;}
+        h1 {
-        h4{font-family: 'Noto Sans KR', sans-serif;}
+          font-family: "Noto Sans KR", sans-serif;
-        h2{font-family: 'Noto Sans KR', sans-serif;}
+        }
-        h3{font-family: 'Noto Sans KR', sans-serif;}
+        h4 {
-        h5{font-family: 'Noto Sans KR', sans-serif;}
+          font-family: "Noto Sans KR", sans-serif;
-        .middle{
+        }
-            display: inline-block;
+        h2 {
-            vertical-align: middle;
+          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>