이유제 / 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
var mysql = require('mysql');
var database = mysql.createConnection({
host: "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
user: "root",
password: "dldbwp1207",
port: 3306,
database: "showdata"
});
database.connect();
module.exports = database;
\ No newline at end of file
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var fs = require('fs');
var ejs = require('ejs');
//추후 key 암호화 필요함
var connection = mysql.createConnection({
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user": "root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
})
connection.connect();
var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
var dataNum = 0;
router.get('/mappage', (req, res) => {
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log(results[0].cnt);
dataNum = results[0].cnt;
});
////
connection.query('SELECT id,oper_name,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
} else {
var show_list = [];
for (var i = 0; i < dataNum; i++) {
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude]);
var page = ejs.render(mapPage, {
title: "show data",
data: show_list,
dataNum: dataNum,
});
}
res.send(page);
}
});
});
//루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌.
router.get('/', function (req, res, next) {
......@@ -12,21 +58,13 @@ router.get('/login', function (req, res, next) {
res.render('login.html', { title: 'Login' });
console.log('로그인 페이지 접속 성공');
});
/* GET home page. */
router.get('/maptest', function (req, res, next) {
res.render('maptest.html', { title: '카카오맵 호출' });
console.log('카카오맵 페이지 접속 성공');
});
router.get('/search', function (req, res, next) {
res.render('search.html', { title: '검색 결과' });
console.log('검색 결과 페이지 접속 성공');
})
router.get('/send', function (req, res, next) {
res.render('send.html', { title: 'Send message' });
console.log('카카오톡 공유 메시지 접속 성공');
})
// router.get('/login/:id', function (req, res) {
// var id = req.params.id;
// console.log('id 할당 접속 성공');
// });
module.exports = router;
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<title>
<%= title%>
</title>
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<div>
</div>
<div>hi</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
displayMarker(locPosition, message);
var data=[];
var strData = "<%= data %>";
var splitData=strData.split(',');
for(var i=0;i<splitData.length;i+=4){
data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3])]);
}
for (var i = 0; i < data.length; i++) {
var latgap = (lat - data[i][2]) * 110;
var longap = (lon - data[i][3]) * 91;
var cal = latgap * latgap + longap * longap;
if (cal <= 1600) {
var locP=new kakao.maps.LatLng(data[i][2], data[i][3]),
message = data[i][1];
displayShowMarker(locP,message);
console.log("near_show:"+data[i]);
}
}
// 마커와 인포윈도우를 표시합니다
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
function displayShowMarker(locPosition,message){
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
var marker = new kakao.maps.Marker({
map: map,
position: locPosition,
title: message,
image: markerImage
});
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culture Gallery</title>
<link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<header>
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</header>
<h1>검색하기</h1>
<hr>
<form action="/search" method="POST">
<table>
<tr>
<td><input type="text" name="name" placeholder="장소를 입력하세요."></td>
</tr>
<tr>
<td><input type="text" name="modelnumber" placeholder="모델넘버를 입력하세요."></td>
</tr>
<tr>
<td><input type="text" name="series" placeholder="시리즈를 입력하세요."></td>
</tr>
</table>
<input type="submit" value="전송하기">
</form>
</body>
</html>
\ No newline at end of file
var template = require('./template.js');
var qs = require('querystring');
var db = require('./database.js');
exports.foodInfo = function (request, response) {
var title = '식품 영양정보';
var description = '입력한 음식의 영양 정보(칼로리, 단백질, 지방, 탄수화물, 나트륨)를 알려드립니다!';
var html = template.html(title, `
<div style= "font-size:25px; background-color:#ffffff">
<h2><font color="black">${title}<div style= "font-size:10px;"><br><div style= "font-size:20px;">${description}</font></div></h2>
<form action="/foodInfo_search" method="post">
<input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off" style="width:300px;height:20px;font-size:20px;">
<button type = "submit" name = "click" style="font-size:20px;">검색</button>
</form>
</div>
`);
response.writeHead(200);
response.end(html);
}
function foodTable(foodInfo, list, num) {
var tag = '';
tag += `<table style='width:100%;'`;
tag += `
<tr>
<td>이름</td>
<td>종류</td>
<td>지역/제조사</td>
<td>1회 제공량(g)</td>
<td>칼로리(kcal)</td>
<td>단백질(g)</td>
<td>지방(g)</td>
<td>탄수화물(g)</td>
<td>나트륨(mg)</td>
</tr>
`
for (var i = 0; i < num; i++) {
tag += `
<tr>
<td>${foodInfo[list[i]].name}</td>
<td>${foodInfo[list[i]].type}</td>
<td>${foodInfo[list[i]].company}</td>
<td>${foodInfo[list[i]].servingSize}</td>
<td>${foodInfo[list[i]].kcal}</td>
<td>${foodInfo[list[i]].protein}</td>
<td>${foodInfo[list[i]].fat}</td>
<td>${foodInfo[list[i]].carbohydrate}</td>
<td>${foodInfo[list[i]].natrium}</td>
</tr>
`
}
tag += `</table>
<style>
table{
border-collapse: collapse;
}
td{
border:1px solid black;
}
</style>
`;
return tag;
}
exports.foodInfo_search = function (request, response) {
var body = '';
request.on('data', function (data) {
body = body + data;
});
request.on('end', function () {
var post = qs.parse(body);
db.query(`SELECT * FROM fooddb`, function (error, foodInfo) {
var title = '식품 영양정보';
var description = '입력한 음식의 영양 정보(칼로리, 단백질, 지방, 탄수화물, 나트륨)를 알려드립니다!';
var search = post.search; // 검색어
var num = 0; // 검색된 개수
var foodName = '';
var list = [];
//console.log(foodInfo[0]);
for (var i = 0; i < foodInfo.length; i++) {
foodName = foodInfo[i].name;
if (foodName.indexOf(search) >= 0) {
list.push(i);
num += 1;
}
}
var html = template.html(title, `
<div style= "font-size:25px; background-color:#ffffff">
<h2><font color="black">${title}<div style= "font-size:10px;"><br><div style= "font-size:20px;">${description}</font></div></h2>
<form action="/foodInfo_search" method="post">
<input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off" style="width:300px;height:20px;font-size:20px;">
<button type = "submit" name = "click" style="font-size:20px;">검색</button>
</form>
<p style= "font-size:20px;">${search}(으)로 검색된 결과 : ${num}개</p>
</div>
${foodTable(foodInfo, list, num)}
<br><br>
`);
response.writeHead(200);
response.end(html);
});
});
}
\ No newline at end of file