Merge branch 'detail' of http://khuhub.khu.ac.kr/2015104153/CafeRecommend into detail
Showing
7 changed files
with
71 additions
and
84 deletions
... | @@ -61,19 +61,24 @@ https://2015104153.oss2021.tk:3000 | ... | @@ -61,19 +61,24 @@ https://2015104153.oss2021.tk:3000 |
61 | ``` | 61 | ``` |
62 | npm install | 62 | npm install |
63 | ``` | 63 | ``` |
64 | -6. 발급받은 구글 로그인 ClientID를 `index.js`, `index.ejs`, 지도 API키를 `map.ejs`에 각각 넣기 | 64 | +6. 발급받은 구글 로그인 ClientID를 `index.js` 지도 API키를 `map.ejs`에 각각 넣기 |
65 | ``` | 65 | ``` |
66 | var CLIENT_ID = "발급받은 ClientID" // index.js | 66 | var CLIENT_ID = "발급받은 ClientID" // index.js |
67 | ``` | 67 | ``` |
68 | 68 | ||
69 | ```HTML | 69 | ```HTML |
70 | - <meta name="google-signin-client_id" content="발급받은 ClientID"> // index.ejs | ||
71 | - ``` | ||
72 | - | ||
73 | - ```HTML | ||
74 | <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키&libraries=services"></script> // map.ejs | 70 | <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키&libraries=services"></script> // map.ejs |
75 | ``` | 71 | ``` |
76 | -7. MySQL connection 연결 설정 (index.js) | 72 | +7. Session File Store 설정 (index.js) |
73 | + ``` | ||
74 | + session({ | ||
75 | + secret: "원하는 암호", | ||
76 | + resave: false, | ||
77 | + saveUninitialized: true, | ||
78 | + store: new FileStore(), | ||
79 | + }) | ||
80 | + ``` | ||
81 | +8. MySQL connection 연결 설정 (index.js) | ||
77 | ``` | 82 | ``` |
78 | var connection = mysql.createConnection({ | 83 | var connection = mysql.createConnection({ |
79 | host: "IP주소 입력 (localhost 또는 AWS 서버 주소)", | 84 | host: "IP주소 입력 (localhost 또는 AWS 서버 주소)", |
... | @@ -82,7 +87,7 @@ https://2015104153.oss2021.tk:3000 | ... | @@ -82,7 +87,7 @@ https://2015104153.oss2021.tk:3000 |
82 | database: "스키마이름 입력", | 87 | database: "스키마이름 입력", |
83 | }); | 88 | }); |
84 | ``` | 89 | ``` |
85 | -8. 프로그램 실행 | 90 | +9. 프로그램 실행 |
86 | ``` | 91 | ``` |
87 | npm run start | 92 | npm run start |
88 | ``` | 93 | ``` | ... | ... |
... | @@ -5,8 +5,8 @@ var bodyParser = require("body-parser"); | ... | @@ -5,8 +5,8 @@ var bodyParser = require("body-parser"); |
5 | 5 | ||
6 | var { OAuth2Client } = require("google-auth-library"); | 6 | var { OAuth2Client } = require("google-auth-library"); |
7 | 7 | ||
8 | -var CLIENT_ID = | 8 | +const CLIENT_ID = |
9 | - "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com"; | 9 | + "발급받은 ClientID"; |
10 | var client = new OAuth2Client(CLIENT_ID); | 10 | var client = new OAuth2Client(CLIENT_ID); |
11 | var mysql = require("mysql"); | 11 | var mysql = require("mysql"); |
12 | const session = require("express-session"); | 12 | const session = require("express-session"); |
... | @@ -16,7 +16,7 @@ router.use(bodyParser.urlencoded({ extended: false })); //url인코딩 x | ... | @@ -16,7 +16,7 @@ router.use(bodyParser.urlencoded({ extended: false })); //url인코딩 x |
16 | router.use(bodyParser.json()); //json방식으로 파싱 | 16 | router.use(bodyParser.json()); //json방식으로 파싱 |
17 | router.use( | 17 | router.use( |
18 | session({ | 18 | session({ |
19 | - secret: "209", // 암호화 | 19 | + secret: "원하는 암호", // 암호화 |
20 | resave: false, | 20 | resave: false, |
21 | saveUninitialized: true, | 21 | saveUninitialized: true, |
22 | store: new FileStore(), | 22 | store: new FileStore(), |
... | @@ -24,22 +24,22 @@ router.use( | ... | @@ -24,22 +24,22 @@ router.use( |
24 | ); | 24 | ); |
25 | 25 | ||
26 | var connection = mysql.createConnection({ | 26 | var connection = mysql.createConnection({ |
27 | - host: "localhost", | 27 | + host: "IP주소 입력 (localhost 또는 AWS 서버 주소)", |
28 | - user: "root", | 28 | + user: "계정 입력", |
29 | - password: "g79465", | 29 | + password: "암호 입력", |
30 | - database: "caferecommend", | 30 | + database: "스키마이름 입력", |
31 | }); | 31 | }); |
32 | connection.connect(); | 32 | connection.connect(); |
33 | 33 | ||
34 | /* GET home page. */ | 34 | /* GET home page. */ |
35 | router.get("/", function (req, res, next) { | 35 | router.get("/", function (req, res, next) { |
36 | res.render("index", { | 36 | res.render("index", { |
37 | - d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com", | 37 | + client_id: CLIENT_ID, |
38 | }); | 38 | }); |
39 | }); | 39 | }); |
40 | router.get("/index", function (req, res, next) { | 40 | router.get("/index", function (req, res, next) { |
41 | res.render("index", { | 41 | res.render("index", { |
42 | - d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com", | 42 | + client_id: CLIENT_ID, |
43 | }); | 43 | }); |
44 | }); | 44 | }); |
45 | 45 | ||
... | @@ -145,7 +145,9 @@ router.post("/login", (req, res) => { | ... | @@ -145,7 +145,9 @@ router.post("/login", (req, res) => { |
145 | connection.query(sql, parameter, function (err) { | 145 | connection.query(sql, parameter, function (err) { |
146 | if (err) { | 146 | if (err) { |
147 | console.log(err); | 147 | console.log(err); |
148 | - return res.render("/"); | 148 | + return res.render("/", { |
149 | + client_id: CLIENT_ID, | ||
150 | + }); | ||
149 | } else { | 151 | } else { |
150 | console.log("새로운 user데이터 입력"); | 152 | console.log("새로운 user데이터 입력"); |
151 | } | 153 | } |
... | @@ -162,7 +164,9 @@ router.post("/login", (req, res) => { | ... | @@ -162,7 +164,9 @@ router.post("/login", (req, res) => { |
162 | connection.query(sql2, parameter2, function (err) { | 164 | connection.query(sql2, parameter2, function (err) { |
163 | if (err) { | 165 | if (err) { |
164 | console.log(err); | 166 | console.log(err); |
165 | - return res.render("/"); | 167 | + return res.render("/",{ |
168 | + client_id: CLIENT_ID, | ||
169 | + }); | ||
166 | } else { | 170 | } else { |
167 | console.log("새로운 PREFERENCE데이터 입력"); | 171 | console.log("새로운 PREFERENCE데이터 입력"); |
168 | } | 172 | } |
... | @@ -207,7 +211,9 @@ router.get("/map", function (req, res, next) { | ... | @@ -207,7 +211,9 @@ router.get("/map", function (req, res, next) { |
207 | if (req.session.user) { | 211 | if (req.session.user) { |
208 | res.render("map", { user: req.session.user }); | 212 | res.render("map", { user: req.session.user }); |
209 | } else { | 213 | } else { |
210 | - res.render("/"); | 214 | + res.render("/",{ |
215 | + client_id: CLIENT_ID, | ||
216 | + }); | ||
211 | } | 217 | } |
212 | }); | 218 | }); |
213 | 219 | ... | ... |
1 | +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1622998584246,"user":{"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 | ... | \ No newline at end of file |
... | @@ -3,22 +3,12 @@ | ... | @@ -3,22 +3,12 @@ |
3 | <head> | 3 | <head> |
4 | <meta charset="UTF-8" /> | 4 | <meta charset="UTF-8" /> |
5 | <script src="https://apis.google.com/js/platform.js" async defer></script> | 5 | <script src="https://apis.google.com/js/platform.js" async defer></script> |
6 | - <meta | ||
7 | - name="google-signin-client_id" | ||
8 | - content="94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com" | ||
9 | - /> | ||
10 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
11 | - <title>first</title> | 7 | + <title>Cafe Map</title> |
12 | - <link | 8 | + <meta name="google-signin-client_id" content=<%=client_id%>> |
13 | - rel="stylesheet" | 9 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
14 | - href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" | 10 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> |
15 | - integrity="undefined" | 11 | + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet"> |
16 | - crossorigin="anonymous" | ||
17 | - /> | ||
18 | - <link | ||
19 | - href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" | ||
20 | - rel="stylesheet" | ||
21 | - /> | ||
22 | 12 | ||
23 | <style> | 13 | <style> |
24 | img { | 14 | img { |
... | @@ -59,9 +49,6 @@ | ... | @@ -59,9 +49,6 @@ |
59 | 49 | ||
60 | <body> | 50 | <body> |
61 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | 51 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
62 | - <a class="navbar-brand" href="/" | ||
63 | - ><img src="images/home.png" width="40" height="40" alt="" /> | ||
64 | - </a> | ||
65 | <button | 52 | <button |
66 | class="navbar-toggler" | 53 | class="navbar-toggler" |
67 | type="button" | 54 | type="button" |
... | @@ -106,9 +93,26 @@ | ... | @@ -106,9 +93,26 @@ |
106 | button | 93 | button |
107 | </div> | 94 | </div> |
108 | <br /><br /> | 95 | <br /><br /> |
96 | +</head> | ||
97 | + | ||
98 | +<body> | ||
99 | +<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | ||
100 | + | ||
101 | + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
102 | + <span class="navbar-toggler-icon"></span> | ||
103 | + </button> | ||
104 | + <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
105 | + <a class="navbar-brand" href="/" style="margin-left: 10px"><strong>Home</strong></a> | ||
109 | </div> | 106 | </div> |
110 | </body> | 107 | </body> |
111 | 108 | ||
109 | + <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> | ||
110 | + <script | ||
111 | + src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" | ||
112 | + integrity="undefined" | ||
113 | + crossorigin="anonymous" | ||
114 | + ></script> | ||
115 | + | ||
112 | <script> | 116 | <script> |
113 | function onSignIn(googleUser) { | 117 | function onSignIn(googleUser) { |
114 | var id_token = googleUser.getAuthResponse().id_token; | 118 | var id_token = googleUser.getAuthResponse().id_token; |
... | @@ -124,11 +128,11 @@ | ... | @@ -124,11 +128,11 @@ |
124 | }; | 128 | }; |
125 | xhr.send(JSON.stringify({ token: id_token })); | 129 | xhr.send(JSON.stringify({ token: id_token })); |
126 | } | 130 | } |
131 | + function signOut() { | ||
132 | + var auth2 = gapi.auth2.getAuthInstance(); | ||
133 | + auth2.signOut().then(function () { | ||
134 | + console.log("User signed out."); | ||
135 | + }); | ||
136 | + } | ||
127 | </script> | 137 | </script> |
128 | - <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> | ||
129 | - <script | ||
130 | - src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" | ||
131 | - integrity="undefined" | ||
132 | - crossorigin="anonymous" | ||
133 | - ></script> | ||
134 | </html> | 138 | </html> | ... | ... |
... | @@ -4,7 +4,7 @@ | ... | @@ -4,7 +4,7 @@ |
4 | <meta charset="UTF-8" /> | 4 | <meta charset="UTF-8" /> |
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | 6 | ||
7 | - <title>logined</title> | 7 | + <title>Sign Up</title> |
8 | 8 | ||
9 | <link | 9 | <link |
10 | rel="stylesheet" | 10 | rel="stylesheet" |
... | @@ -37,30 +37,15 @@ | ... | @@ -37,30 +37,15 @@ |
37 | h5 { | 37 | h5 { |
38 | font-family: "Noto Sans KR", sans-serif; | 38 | font-family: "Noto Sans KR", sans-serif; |
39 | } | 39 | } |
40 | - .middle { | ||
41 | - display: inline-block; | ||
42 | - vertical-align: middle; | ||
43 | - } | ||
44 | </style> | 40 | </style> |
45 | </head> | 41 | </head> |
46 | <body> | 42 | <body> |
47 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | 43 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
48 | - <a class="navbar-brand" href="/" | 44 | + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
49 | - ><img src="images/home.png" width="40" height="40" alt="" /> | ||
50 | - </a> | ||
51 | - <button | ||
52 | - class="navbar-toggler" | ||
53 | - type="button" | ||
54 | - data-toggle="collapse" | ||
55 | - data-target="#navbarSupportedContent" | ||
56 | - aria-controls="navbarSupportedContent" | ||
57 | - aria-expanded="false" | ||
58 | - aria-label="Toggle navigation" | ||
59 | - > | ||
60 | <span class="navbar-toggler-icon"></span> | 45 | <span class="navbar-toggler-icon"></span> |
61 | </button> | 46 | </button> |
62 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | 47 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> |
63 | - <a class="navbar-brand" href="/"><strong>Home</strong></a> | 48 | + <a class="navbar-brand" href="/" style="margin-left: 10px"><strong>Home</strong></a> |
64 | <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> | 49 | <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> |
65 | <li class="nav-item active"> | 50 | <li class="nav-item active"> |
66 | <a | 51 | <a | ... | ... |
... | @@ -9,9 +9,6 @@ | ... | @@ -9,9 +9,6 @@ |
9 | /> | 9 | /> |
10 | <title>Cafe Map</title> | 10 | <title>Cafe Map</title> |
11 | <style> | 11 | <style> |
12 | - .navbar { | ||
13 | - background-color: #1d2124 !important; | ||
14 | - } | ||
15 | .btn-primary { | 12 | .btn-primary { |
16 | color: white !important; | 13 | color: white !important; |
17 | } | 14 | } |
... | @@ -103,9 +100,6 @@ | ... | @@ -103,9 +100,6 @@ |
103 | </head> | 100 | </head> |
104 | <body> | 101 | <body> |
105 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | 102 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
106 | - <a class="navbar-brand" href="/" | ||
107 | - ><img src="images/home.png" width="40" height="40" alt="" /> | ||
108 | - </a> | ||
109 | <button | 103 | <button |
110 | class="navbar-toggler" | 104 | class="navbar-toggler" |
111 | type="button" | 105 | type="button" |
... | @@ -118,7 +112,7 @@ | ... | @@ -118,7 +112,7 @@ |
118 | <span class="navbar-toggler-icon"></span> | 112 | <span class="navbar-toggler-icon"></span> |
119 | </button> | 113 | </button> |
120 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | 114 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> |
121 | - <a class="navbar-brand" href="/"><strong>Home</strong></a> | 115 | + <a class="navbar-brand" href="/" style="margin-left: 10px"><strong>Home</strong></a> |
122 | <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> | 116 | <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> |
123 | <li class="nav-item active"> | 117 | <li class="nav-item active"> |
124 | <a | 118 | <a |
... | @@ -142,7 +136,7 @@ | ... | @@ -142,7 +136,7 @@ |
142 | > | 136 | > |
143 | </li> | 137 | </li> |
144 | <li class="nav-item active"> | 138 | <li class="nav-item active"> |
145 | - <a class="nav-link" style="color: #ffffff" href="/recommend" | 139 | + <a class="nav-link" style="color: #ffffff" href="javascript:void(0);" onclick="recommend();" |
146 | >Recommend | 140 | >Recommend |
147 | <span class="sr-only">(current)</span> | 141 | <span class="sr-only">(current)</span> |
148 | </a> | 142 | </a> |
... | @@ -174,10 +168,7 @@ | ... | @@ -174,10 +168,7 @@ |
174 | <p id="recommend"></p> | 168 | <p id="recommend"></p> |
175 | </section> | 169 | </section> |
176 | 170 | ||
177 | - <script | 171 | + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키&libraries=services"></script> |
178 | - type="text/javascript" | ||
179 | - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services" | ||
180 | - ></script> | ||
181 | <script> | 172 | <script> |
182 | var lat = ""; | 173 | var lat = ""; |
183 | var lon = ""; | 174 | var lon = ""; |
... | @@ -206,6 +197,7 @@ | ... | @@ -206,6 +197,7 @@ |
206 | click = true; | 197 | click = true; |
207 | removeMarker(); | 198 | removeMarker(); |
208 | searchPlaces(); | 199 | searchPlaces(); |
200 | + alert("추천이 활성화 되었습니다."); | ||
209 | } | 201 | } |
210 | } // 추천 기능 비활성화 | 202 | } // 추천 기능 비활성화 |
211 | else { | 203 | else { |
... | @@ -214,16 +206,16 @@ | ... | @@ -214,16 +206,16 @@ |
214 | click = false; | 206 | click = false; |
215 | removeMarker(); | 207 | removeMarker(); |
216 | searchPlaces(); | 208 | searchPlaces(); |
209 | + alert("추천이 비활성화 되었습니다."); | ||
217 | } | 210 | } |
218 | }, | 211 | }, |
219 | }); | 212 | }); |
220 | } | 213 | } |
221 | - | ||
222 | // 지도 기본설정 | 214 | // 지도 기본설정 |
223 | var mapContainer = document.getElementById("map"), | 215 | var mapContainer = document.getElementById("map"), |
224 | mapOption = { | 216 | mapOption = { |
225 | center: new kakao.maps.LatLng(36.2477502, 127.078164), | 217 | center: new kakao.maps.LatLng(36.2477502, 127.078164), |
226 | - level: 3, | 218 | + level: 12, |
227 | }; | 219 | }; |
228 | var map = new kakao.maps.Map(mapContainer, mapOption); | 220 | var map = new kakao.maps.Map(mapContainer, mapOption); |
229 | var ps = new kakao.maps.services.Places(map); | 221 | var ps = new kakao.maps.services.Places(map); |
... | @@ -376,7 +368,7 @@ | ... | @@ -376,7 +368,7 @@ |
376 | ' <span class="tel">' + | 368 | ' <span class="tel">' + |
377 | place.phone + | 369 | place.phone + |
378 | "</span>" + | 370 | "</span>" + |
379 | - `<a href="/review/${place.id}"><button>후기 작성</button>`; | 371 | + `<a href="/review/${place.id}"><button type="button" class="btn btn-outline-danger" style="font-size:70%;">후기 작성</button>`; |
380 | "</div>" + '<div class="after"></div>'; | 372 | "</div>" + '<div class="after"></div>'; |
381 | contentNode.innerHTML = content; | 373 | contentNode.innerHTML = content; |
382 | placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x)); | 374 | placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x)); | ... | ... |
... | @@ -33,17 +33,11 @@ | ... | @@ -33,17 +33,11 @@ |
33 | h5 { | 33 | h5 { |
34 | font-family: "Noto Sans KR", sans-serif; | 34 | font-family: "Noto Sans KR", sans-serif; |
35 | } | 35 | } |
36 | - .middle { | 36 | + |
37 | - display: inline-block; | ||
38 | - vertical-align: middle; | ||
39 | - } | ||
40 | </style> | 37 | </style> |
41 | </head> | 38 | </head> |
42 | <body> | 39 | <body> |
43 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | 40 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
44 | - <a class="navbar-brand" href="/" | ||
45 | - ><img src="/images/home.png" width="40" height="40" alt="" /> | ||
46 | - </a> | ||
47 | <button | 41 | <button |
48 | class="navbar-toggler" | 42 | class="navbar-toggler" |
49 | type="button" | 43 | type="button" |
... | @@ -56,7 +50,7 @@ | ... | @@ -56,7 +50,7 @@ |
56 | <span class="navbar-toggler-icon"></span> | 50 | <span class="navbar-toggler-icon"></span> |
57 | </button> | 51 | </button> |
58 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | 52 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> |
59 | - <a class="navbar-brand" href="/"><strong>Home</strong></a> | 53 | + <a class="navbar-brand" href="/" style="margin-left: 10px"><strong>Home</strong></a> |
60 | </div> | 54 | </div> |
61 | </nav> | 55 | </nav> |
62 | 56 | ... | ... |
-
Please register or login to post a comment