이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
db484063 1 parent 05d4aa1d

카카오맵, 검색 페이지 구현

Inline Side-by-side
Showing 5 changed files with 327 additions and 12 deletions
1 +var mysql = require('mysql');
2 +
3 +var database = mysql.createConnection({
4 + host: "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
5 + user: "root",
6 + password: "dldbwp1207",
7 + port: 3306,
8 + database: "showdata"
9 +});
10 +database.connect();
11 +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');
4 +var fs = require('fs');
5 +var ejs = require('ejs');
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 +
17 +var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
18 +var dataNum = 0;
19 +
20 +router.get('/mappage', (req, res) => {
21 + connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
22 + if (error) {
23 + console.log(error);
24 + }
25 + console.log(results[0].cnt);
26 + dataNum = results[0].cnt;
27 + });
28 + ////
29 + connection.query('SELECT id,oper_name,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
30 + if (error) {
31 + console.log(error);
32 + } else {
33 + var show_list = [];
34 + for (var i = 0; i < dataNum; i++) {
35 + show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude]);
36 + var page = ejs.render(mapPage, {
37 + title: "show data",
38 + data: show_list,
39 + dataNum: dataNum,
40 + });
41 +
42 + }
43 + res.send(page);
44 + }
45 +
46 + });
47 +});
48 +
3 49
4 //루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌. 50 //루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌.
5 router.get('/', function (req, res, next) { 51 router.get('/', function (req, res, next) {
...@@ -12,21 +58,13 @@ router.get('/login', function (req, res, next) { ...@@ -12,21 +58,13 @@ router.get('/login', function (req, res, next) {
12 res.render('login.html', { title: 'Login' }); 58 res.render('login.html', { title: 'Login' });
13 console.log('로그인 페이지 접속 성공'); 59 console.log('로그인 페이지 접속 성공');
14 }); 60 });
15 - 61 +router.get('/search', function (req, res, next) {
16 -/* GET home page. */ 62 + res.render('search.html', { title: '검색 결과' });
17 -router.get('/maptest', function (req, res, next) { 63 + console.log('검색 결과 페이지 접속 성공');
18 - res.render('maptest.html', { title: '카카오맵 호출' }); 64 +})
19 - console.log('카카오맵 페이지 접속 성공');
20 -});
21 -
22 router.get('/send', function (req, res, next) { 65 router.get('/send', function (req, res, next) {
23 res.render('send.html', { title: 'Send message' }); 66 res.render('send.html', { title: 'Send message' });
24 console.log('카카오톡 공유 메시지 접속 성공'); 67 console.log('카카오톡 공유 메시지 접속 성공');
25 }) 68 })
26 -// router.get('/login/:id', function (req, res) {
27 -// var id = req.params.id;
28 -// console.log('id 할당 접속 성공');
29 -// });
30 -
31 69
32 module.exports = router; 70 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>
5 + <%= title%>
6 +
7 + </title>
8 + </head>
9 + <body>
10 + <p style="margin-top:-12px">
11 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
12 + </p>
13 + <div id="map" style="width:500px;height:350px;"></div>
14 + <div>
15 + </div>
16 + <div>hi</div>
17 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
18 +<script>
19 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
20 + mapOption = {
21 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
22 + level: 10 // 지도의 확대 레벨
23 + };
24 +
25 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
26 +
27 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
28 +if (navigator.geolocation) {
29 +
30 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
31 + navigator.geolocation.getCurrentPosition(function(position) {
32 +
33 + var lat = position.coords.latitude, // 위도
34 + lon = position.coords.longitude; // 경도
35 +
36 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
37 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
38 + displayMarker(locPosition, message);
39 +
40 + var data=[];
41 + var strData = "<%= data %>";
42 + var splitData=strData.split(',');
43 + for(var i=0;i<splitData.length;i+=4){
44 + data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3])]);
45 + }
46 + for (var i = 0; i < data.length; i++) {
47 + var latgap = (lat - data[i][2]) * 110;
48 + var longap = (lon - data[i][3]) * 91;
49 + var cal = latgap * latgap + longap * longap;
50 + if (cal <= 1600) {
51 + var locP=new kakao.maps.LatLng(data[i][2], data[i][3]),
52 + message = data[i][1];
53 + displayShowMarker(locP,message);
54 +
55 + console.log("near_show:"+data[i]);
56 + }
57 + }
58 +
59 + // 마커와 인포윈도우를 표시합니다
60 +
61 +
62 + });
63 +
64 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
65 +
66 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
67 + message = 'geolocation을 사용할수 없어요..'
68 +
69 + displayMarker(locPosition, message);
70 +}
71 +function displayShowMarker(locPosition,message){
72 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
73 +
74 +
75 + var imageSize = new kakao.maps.Size(24, 35);
76 +
77 +// 마커 이미지를 생성합니다
78 +var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
79 + var marker = new kakao.maps.Marker({
80 + map: map,
81 + position: locPosition,
82 + title: message,
83 + image: markerImage
84 + });
85 +
86 + // 지도 중심좌표를 접속위치로 변경합니다
87 + map.setCenter(locPosition);
88 +
89 +}
90 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
91 +function displayMarker(locPosition, message) {
92 +
93 + // 마커를 생성합니다
94 + var marker = new kakao.maps.Marker({
95 + map: map,
96 + position: locPosition
97 + });
98 +
99 + var iwContent = message, // 인포윈도우에 표시할 내용
100 + iwRemoveable = true;
101 +
102 + // 인포윈도우를 생성합니다
103 + var infowindow = new kakao.maps.InfoWindow({
104 + content : iwContent,
105 + removable : iwRemoveable
106 + });
107 +
108 + // 인포윈도우를 마커위에 표시합니다
109 + infowindow.open(map, marker);
110 +
111 + // 지도 중심좌표를 접속위치로 변경합니다
112 + map.setCenter(locPosition);
113 +}
114 +</script>
115 + </body>
116 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="UTF-8">
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 + <title>Culture Gallery</title>
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 +
12 +<body>
13 + <header>
14 + <div class="nav-bar">
15 + <img src="../images/camera.png" alt="" class="logo">
16 + <ul class="menu">
17 + <li><a href="/">Home</a></li>
18 + <li><a href="">Services</a></li>
19 + <li><a href="">Portfolio</a></li>
20 + <li><a href="">Testimonimal</a></li>
21 + <li><a href="">Career</a></li>
22 + <li><a href="">Contact</a></li>
23 + </ul>
24 + </div>
25 + </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>
43 +
44 +</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