이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
57bfa379 1 parent 9a33b88d

BackEnd: db정리 / mapPage 최종 수정 / serachPage 개선

Inline Side-by-side
Showing 7 changed files with 125 additions and 171 deletions
1 var mysql = require('mysql'); 1 var mysql = require('mysql');
2 2
3 var database = mysql.createConnection({ 3 var database = mysql.createConnection({
4 - host: "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com", 4 + host: process.env.HOST,
5 - user: "root", 5 + user: process.env.USER,
6 - password: "dldbwp1207", 6 + password: process.env.PASSWORD,
7 port: 3306, 7 port: 3306,
8 database: "showdata" 8 database: "showdata"
9 }); 9 });
10 database.connect(); 10 database.connect();
11 +
11 module.exports = database; 12 module.exports = database;
...\ No newline at end of file ...\ No newline at end of file
......
1 var express = require('express'); 1 var express = require('express');
2 var router = express.Router(); 2 var router = express.Router();
3 -var mysql = require('mysql'); 3 +var connection = require('./db');
4 var fs = require('fs'); 4 var fs = require('fs');
5 var ejs = require('ejs'); 5 var ejs = require('ejs');
6 6
7 -//추후 key 암호화 필요함
8 -var connection = mysql.createConnection({
9 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
10 - "user": "root",
11 - "password": "dldbwp1207",
12 - "port": "3306",
13 - "database": "showdata"
14 -})
15 -connection.connect();
16 7
17 var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8'); 8 var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
18 var dataNum = 0; 9 var dataNum = 0;
...@@ -26,13 +17,13 @@ router.get('/mappage', (req, res) => { ...@@ -26,13 +17,13 @@ router.get('/mappage', (req, res) => {
26 dataNum = results[0].cnt; 17 dataNum = results[0].cnt;
27 }); 18 });
28 //// 19 ////
29 - connection.query('SELECT id,oper_name,latitude,longitude FROM SHOW_DATA', function (error, results, field) { 20 + connection.query('SELECT * FROM SHOW_DATA', function (error, results, field) {
30 if (error) { 21 if (error) {
31 console.log(error); 22 console.log(error);
32 } else { 23 } else {
33 var show_list = []; 24 var show_list = [];
34 for (var i = 0; i < dataNum; i++) { 25 for (var i = 0; i < dataNum; i++) {
35 - show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude]); 26 + show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]);
36 var page = ejs.render(mapPage, { 27 var page = ejs.render(mapPage, {
37 title: "show data", 28 title: "show data",
38 data: show_list, 29 data: show_list,
...@@ -58,13 +49,15 @@ router.get('/login', function (req, res, next) { ...@@ -58,13 +49,15 @@ router.get('/login', function (req, res, next) {
58 res.render('login.html', { title: 'Login' }); 49 res.render('login.html', { title: 'Login' });
59 console.log('로그인 페이지 접속 성공'); 50 console.log('로그인 페이지 접속 성공');
60 }); 51 });
61 -router.get('/search', function (req, res, next) { 52 +// router.get('/search', function (req, res, next) {
62 - res.render('search.html', { title: '검색 결과' }); 53 +// res.render('search.html', { title: '검색 결과' });
63 - console.log('검색 결과 페이지 접속 성공'); 54 +// console.log('검색 결과 페이지 접속 성공');
64 -}) 55 +// })
65 router.get('/send', function (req, res, next) { 56 router.get('/send', function (req, res, next) {
66 res.render('send.html', { title: 'Send message' }); 57 res.render('send.html', { title: 'Send message' });
67 console.log('카카오톡 공유 메시지 접속 성공'); 58 console.log('카카오톡 공유 메시지 접속 성공');
68 }) 59 })
69 60
61 +
62 +
70 module.exports = router; 63 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,14 +3,59 @@ ...@@ -3,14 +3,59 @@
3 <head> 3 <head>
4 <title> 4 <title>
5 <%= title%> 5 <%= title%>
6 + <script>
7 +
8 + </script>
6 </title> 9 </title>
7 <link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css"> 10 <link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
8 - 11 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
12 + <script>
13 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
14 + function sendLink(id){
15 + var data=[];
16 + var strData = "<%= data %>";
17 + var splitData=strData.split(',');
18 + for(var i=0;i<splitData.length;i+=5){
19 + data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3]),splitData[i+4],splitData[i+5]]);
20 + }
21 + var index;
22 + for(var i=0;i<data.length;i++){
23 + console.log(data.length);
24 + if(data[i][0]===id){
25 + index=i;
26 + Kakao.Link.sendDefault({
27 + objectType: 'location',
28 + address: `${data[i][5]}`,
29 + addressTitle: `${data[i][1]}`,
30 + content:{
31 + title: `공연 이름: ${data[i][1]}\n공연 위치: ${data[i][5]}`,
32 + description: `${splitData[i+2]}`,
33 + imageUrl:'https://ifh.cc/g/aEvr86.png',
34 + link:{
35 + mobileWebUrl: 'http://naver.com',
36 + webUrl: 'http://naver.com',
37 + },
38 + },
39 + buttons: [
40 + {
41 + title: 'Culture Gallery',
42 + link: {
43 + mobileWebUrl: 'http://naver.com',
44 + webUrl: 'http://naver.com',
45 + },
46 + },
47 + ],
48 + })
49 + }
50 + }
51 +
52 + }
53 + </script>
9 </head> 54 </head>
10 <body> 55 <body>
11 <header> 56 <header>
12 <div class="nav-bar"> 57 <div class="nav-bar">
13 - <img src="../images/camera.png" alt="" class="logo"> 58 + <img src="../images/icon.png" alt="" class="logo">
14 <ul class="menu"> 59 <ul class="menu">
15 <li><a href="">Home</a></li> 60 <li><a href="">Home</a></li>
16 <li><a href="">Services</a></li> 61 <li><a href="">Services</a></li>
...@@ -24,8 +69,10 @@ ...@@ -24,8 +69,10 @@
24 </header> 69 </header>
25 <div class="welcome"> 70 <div class="welcome">
26 <h1>당신 주위에서 열릴 공연들입니다</h1> 71 <h1>당신 주위에서 열릴 공연들입니다</h1>
72 +
27 </div> 73 </div>
28 - <div class="map-box"> 74 +
75 + <div class= "box1">
29 <div id="map" 76 <div id="map"
30 style=" 77 style="
31 position: absolute; 78 position: absolute;
...@@ -36,21 +83,27 @@ ...@@ -36,21 +83,27 @@
36 margin-left:-250px; 83 margin-left:-250px;
37 margin-top:-30x; 84 margin-top:-30x;
38 "></div> 85 "></div>
39 - <div style="position:absolute; top: 110vh; color: #000;"> 86 +
40 - <h2 > 주변 공연 </h2> 87 + </div>
88 + <div>
89 + <div style="position:absolute; top: 110vh; width:100%; color: #000;">
90 + <h2 style="text-align:center;"> 찾은 공연 </h2>
41 </div> 91 </div>
92 + <table class="table" >
93 + <tr>
94 + <th>id</th>
95 + <th>행사 이름</th>
96 + <th>시작 날짜</th>
97 + <th>주소</th>
98 + <th>이동하기</th>
99 + </tr>
100 + <tbody id="map-data">
101 +
102 + </tbody>
103 + </table>
104 +
42 </div> 105 </div>
43 - <table style="position: absolute; top: 120vh;"> 106 +
44 - <tr>
45 - <th>id</th>
46 - <th>행사 이름</th>
47 - <th>시작 날짜</th>
48 - </tr>
49 - <tbody id="map-data">
50 -
51 - </tbody>
52 - </table>
53 -
54 107
55 108
56 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script> 109 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
...@@ -76,12 +129,14 @@ if (navigator.geolocation) { ...@@ -76,12 +129,14 @@ if (navigator.geolocation) {
76 var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 129 var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
77 message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다 130 message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다
78 displayMarker(locPosition, message); 131 displayMarker(locPosition, message);
79 - 132 + function funcA(){
133 + alert("hi");
134 + }
80 var data=[]; 135 var data=[];
81 var strData = "<%= data %>"; 136 var strData = "<%= data %>";
82 var splitData=strData.split(','); 137 var splitData=strData.split(',');
83 - for(var i=0;i<splitData.length;i+=4){ 138 + for(var i=0;i<splitData.length;i+=5){
84 - data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3])]); 139 + data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3]),splitData[i+4],splitData[i+5]]);
85 } 140 }
86 for (var i = 0; i < data.length; i++) { 141 for (var i = 0; i < data.length; i++) {
87 var latgap = (lat - data[i][2]) * 110; 142 var latgap = (lat - data[i][2]) * 110;
...@@ -89,21 +144,21 @@ if (navigator.geolocation) { ...@@ -89,21 +144,21 @@ if (navigator.geolocation) {
89 var cal = latgap * latgap + longap * longap; 144 var cal = latgap * latgap + longap * longap;
90 if (cal <= 1600) { 145 if (cal <= 1600) {
91 var locP=new kakao.maps.LatLng(data[i][2], data[i][3]), 146 var locP=new kakao.maps.LatLng(data[i][2], data[i][3]),
92 - message = data[i][1]; 147 + message = `${data[i][0]} : ${data[i][1]}`;
93 displayShowMarker(locP,message); 148 displayShowMarker(locP,message);
94 -
95 - console.log("near_show:"+data[i]);
96 var row = `<tr> 149 var row = `<tr>
97 <td> ${data[i][0]}</td> 150 <td> ${data[i][0]}</td>
98 <td> ${data[i][1]}</td> 151 <td> ${data[i][1]}</td>
99 - <td> ${data[i][2]}</td> 152 + <td> ${data[i][4]}</td>
153 + <td> ${data[i][5]}</td>
154 +
155 + <td> <input type="button" onclick="sendLink(${data[i][0]})" value="전송하기"> </td>
100 156
101 </tr>` 157 </tr>`
102 dataContainer.innerHTML+=row; 158 dataContainer.innerHTML+=row;
103 } 159 }
104 } 160 }
105 - 161 + //
106 -
107 // 마커와 인포윈도우를 표시합니다 162 // 마커와 인포윈도우를 표시합니다
108 163
109 164
...@@ -160,5 +215,8 @@ function displayMarker(locPosition, message) { ...@@ -160,5 +215,8 @@ function displayMarker(locPosition, message) {
160 map.setCenter(locPosition); 215 map.setCenter(locPosition);
161 } 216 }
162 </script> 217 </script>
218 +
219 +<div style="position:absolute; top:200vh"> _ </div>
163 </body> 220 </body>
221 +
164 </html> 222 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -var template = require('./template.js');
2 -var qs = require('querystring');
3 -var db = require('./database.js');
4 -
5 -exports.foodInfo = function (request, response) {
6 - var title = '식품 영양정보';
7 - var description = '입력한 음식의 영양 정보(칼로리, 단백질, 지방, 탄수화물, 나트륨)를 알려드립니다!';
8 - var html = template.html(title, `
9 - <div style= "font-size:25px; background-color:#ffffff">
10 - <h2><font color="black">${title}<div style= "font-size:10px;"><br><div style= "font-size:20px;">${description}</font></div></h2>
11 - <form action="/foodInfo_search" method="post">
12 - <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off" style="width:300px;height:20px;font-size:20px;">
13 - <button type = "submit" name = "click" style="font-size:20px;">검색</button>
14 - </form>
15 - </div>
16 -
17 - `);
18 - response.writeHead(200);
19 - response.end(html);
20 -}
21 -function foodTable(foodInfo, list, num) {
22 - var tag = '';
23 - tag += `<table style='width:100%;'`;
24 - tag += `
25 - <tr>
26 - <td>이름</td>
27 - <td>종류</td>
28 - <td>지역/제조사</td>
29 - <td>1회 제공량(g)</td>
30 - <td>칼로리(kcal)</td>
31 - <td>단백질(g)</td>
32 - <td>지방(g)</td>
33 - <td>탄수화물(g)</td>
34 - <td>나트륨(mg)</td>
35 - </tr>
36 - `
37 - for (var i = 0; i < num; i++) {
38 - tag += `
39 - <tr>
40 - <td>${foodInfo[list[i]].name}</td>
41 - <td>${foodInfo[list[i]].type}</td>
42 - <td>${foodInfo[list[i]].company}</td>
43 - <td>${foodInfo[list[i]].servingSize}</td>
44 - <td>${foodInfo[list[i]].kcal}</td>
45 - <td>${foodInfo[list[i]].protein}</td>
46 - <td>${foodInfo[list[i]].fat}</td>
47 - <td>${foodInfo[list[i]].carbohydrate}</td>
48 - <td>${foodInfo[list[i]].natrium}</td>
49 - </tr>
50 - `
51 - }
52 - tag += `</table>
53 - <style>
54 - table{
55 - border-collapse: collapse;
56 - }
57 - td{
58 - border:1px solid black;
59 - }
60 - </style>
61 - `;
62 - return tag;
63 -}
64 -
65 -
66 -
67 -exports.foodInfo_search = function (request, response) {
68 - var body = '';
69 - request.on('data', function (data) {
70 - body = body + data;
71 - });
72 - request.on('end', function () {
73 - var post = qs.parse(body);
74 - db.query(`SELECT * FROM fooddb`, function (error, foodInfo) {
75 - var title = '식품 영양정보';
76 - var description = '입력한 음식의 영양 정보(칼로리, 단백질, 지방, 탄수화물, 나트륨)를 알려드립니다!';
77 - var search = post.search; // 검색어
78 - var num = 0; // 검색된 개수
79 - var foodName = '';
80 - var list = [];
81 - //console.log(foodInfo[0]);
82 - for (var i = 0; i < foodInfo.length; i++) {
83 - foodName = foodInfo[i].name;
84 - if (foodName.indexOf(search) >= 0) {
85 - list.push(i);
86 - num += 1;
87 - }
88 - }
89 - var html = template.html(title, `
90 - <div style= "font-size:25px; background-color:#ffffff">
91 - <h2><font color="black">${title}<div style= "font-size:10px;"><br><div style= "font-size:20px;">${description}</font></div></h2>
92 - <form action="/foodInfo_search" method="post">
93 - <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off" style="width:300px;height:20px;font-size:20px;">
94 - <button type = "submit" name = "click" style="font-size:20px;">검색</button>
95 - </form>
96 - <p style= "font-size:20px;">${search}(으)로 검색된 결과 : ${num}개</p>
97 - </div>
98 - ${foodTable(foodInfo, list, num)}
99 - <br><br>
100 - `);
101 - response.writeHead(200);
102 - response.end(html);
103 -
104 - });
105 - });
106 -}
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <title>
6 + <%= title%>
7 + </title>
5 <meta charset="UTF-8"> 8 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Culture Gallery</title> 10 + <link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
8 - <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
9 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
10 </head> 11 </head>
11 12
12 <body> 13 <body>
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
14 <div class="nav-bar"> 15 <div class="nav-bar">
15 <img src="../images/camera.png" alt="" class="logo"> 16 <img src="../images/camera.png" alt="" class="logo">
16 <ul class="menu"> 17 <ul class="menu">
17 - <li><a href="/">Home</a></li> 18 + <li><a href="">Home</a></li>
18 <li><a href="">Services</a></li> 19 <li><a href="">Services</a></li>
19 <li><a href="">Portfolio</a></li> 20 <li><a href="">Portfolio</a></li>
20 <li><a href="">Testimonimal</a></li> 21 <li><a href="">Testimonimal</a></li>
...@@ -23,22 +24,6 @@ ...@@ -23,22 +24,6 @@
23 </ul> 24 </ul>
24 </div> 25 </div>
25 </header> 26 </header>
26 - <h1>검색하기</h1>
27 - <hr>
28 - <form action="/search" method="POST">
29 - <table>
30 - <tr>
31 - <td><input type="text" name="name" placeholder="장소를 입력하세요."></td>
32 - </tr>
33 - <tr>
34 - <td><input type="text" name="modelnumber" placeholder="모델넘버를 입력하세요."></td>
35 - </tr>
36 - <tr>
37 - <td><input type="text" name="series" placeholder="시리즈를 입력하세요."></td>
38 - </tr>
39 - </table>
40 - <input type="submit" value="전송하기">
41 - </form>
42 </body> 27 </body>
43 28
44 </html> 29 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +requirejs(["common"], function () {
2 + requirejs(["loglevel"], function (log) {
3 + var _searchBtnRef = null;
4 + var _searchKeywordRef = null;
5 +
6 + var _initView = function () {
7 + _searchKeywordRef = $("#search_keyword");
8 + _searchBtnRef = $("#search");
9 + _bindEvent();
10 + }
11 + var _bindEvent = function () {
12 + _searchBtnRef.click(function () {
13 + var searchKeyword = _searchKeywordRef.val();
14 + log.info("search keyword : " + searchKeyword);
15 + });
16 + }
17 +
18 + var _init = function () {
19 + _initView();
20 + };
21 + _init();
22 + });
23 +});
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,7 +4,7 @@ function sendLink(){ ...@@ -4,7 +4,7 @@ function sendLink(){
4 objectType: 'feed', 4 objectType: 'feed',
5 content:{ 5 content:{
6 title: "관심있는 공연 정보", 6 title: "관심있는 공연 정보",
7 - description: '주소-> http://naver.com', 7 + description: `id: {id}\n행사 이름: {oper_name}`,
8 imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png', 8 imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 link:{ 9 link:{
10 mobileWebUrl: 'http://naver.com', 10 mobileWebUrl: 'http://naver.com',
......