이유제 / 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
var mysql = require('mysql');
var database = mysql.createConnection({
host: "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
user: "root",
password: "dldbwp1207",
host: process.env.HOST,
user: process.env.USER,
password: process.env.PASSWORD,
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 connection = require('./db');
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;
......@@ -26,13 +17,13 @@ router.get('/mappage', (req, res) => {
dataNum = results[0].cnt;
});
////
connection.query('SELECT id,oper_name,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
connection.query('SELECT * 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]);
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]);
var page = ejs.render(mapPage, {
title: "show data",
data: show_list,
......@@ -58,13 +49,15 @@ router.get('/login', function (req, res, next) {
res.render('login.html', { title: 'Login' });
console.log('로그인 페이지 접속 성공');
});
router.get('/search', function (req, res, next) {
res.render('search.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('카카오톡 공유 메시지 접속 성공');
})
module.exports = router;
\ No newline at end of file
......
......@@ -3,14 +3,59 @@
<head>
<title>
<%= title%>
<script>
</script>
</title>
<link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
function sendLink(id){
var data=[];
var strData = "<%= data %>";
var splitData=strData.split(',');
for(var i=0;i<splitData.length;i+=5){
data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3]),splitData[i+4],splitData[i+5]]);
}
var index;
for(var i=0;i<data.length;i++){
console.log(data.length);
if(data[i][0]===id){
index=i;
Kakao.Link.sendDefault({
objectType: 'location',
address: `${data[i][5]}`,
addressTitle: `${data[i][1]}`,
content:{
title: `공연 이름: ${data[i][1]}\n공연 위치: ${data[i][5]}`,
description: `${splitData[i+2]}`,
imageUrl:'https://ifh.cc/g/aEvr86.png',
link:{
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
buttons: [
{
title: 'Culture Gallery',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
],
})
}
}
}
</script>
</head>
<body>
<header>
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<img src="../images/icon.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
......@@ -24,8 +69,10 @@
</header>
<div class="welcome">
<h1>당신 주위에서 열릴 공연들입니다</h1>
</div>
<div class="map-box">
<div class= "box1">
<div id="map"
style="
position: absolute;
......@@ -36,21 +83,27 @@
margin-left:-250px;
margin-top:-30x;
"></div>
<div style="position:absolute; top: 110vh; color: #000;">
<h2 > 주변 공연 </h2>
</div>
<div>
<div style="position:absolute; top: 110vh; width:100%; color: #000;">
<h2 style="text-align:center;"> 찾은 공연 </h2>
</div>
<table class="table" >
<tr>
<th>id</th>
<th>행사 이름</th>
<th>시작 날짜</th>
<th>주소</th>
<th>이동하기</th>
</tr>
<tbody id="map-data">
</tbody>
</table>
</div>
<table style="position: absolute; top: 120vh;">
<tr>
<th>id</th>
<th>행사 이름</th>
<th>시작 날짜</th>
</tr>
<tbody id="map-data">
</tbody>
</table>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
......@@ -76,12 +129,14 @@ if (navigator.geolocation) {
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">내 위치</div>'; // 인포윈도우에 표시될 내용입니다
displayMarker(locPosition, message);
function funcA(){
alert("hi");
}
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<splitData.length;i+=5){
data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3]),splitData[i+4],splitData[i+5]]);
}
for (var i = 0; i < data.length; i++) {
var latgap = (lat - data[i][2]) * 110;
......@@ -89,21 +144,21 @@ if (navigator.geolocation) {
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];
message = `${data[i][0]} : ${data[i][1]}`;
displayShowMarker(locP,message);
console.log("near_show:"+data[i]);
var row = `<tr>
<td> ${data[i][0]}</td>
<td> ${data[i][1]}</td>
<td> ${data[i][2]}</td>
<td> ${data[i][4]}</td>
<td> ${data[i][5]}</td>
<td> <input type="button" onclick="sendLink(${data[i][0]})" value="전송하기"> </td>
</tr>`
dataContainer.innerHTML+=row;
}
}
//
// 마커와 인포윈도우를 표시합니다
......@@ -160,5 +215,8 @@ function displayMarker(locPosition, message) {
map.setCenter(locPosition);
}
</script>
<div style="position:absolute; top:200vh"> _ </div>
</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
......@@ -2,11 +2,12 @@
<html lang="ko">
<head>
<title>
<%= title%>
</title>
<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>
<link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
</head>
<body>
......@@ -14,7 +15,7 @@
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
......@@ -23,22 +24,6 @@
</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
......
requirejs(["common"], function () {
requirejs(["loglevel"], function (log) {
var _searchBtnRef = null;
var _searchKeywordRef = null;
var _initView = function () {
_searchKeywordRef = $("#search_keyword");
_searchBtnRef = $("#search");
_bindEvent();
}
var _bindEvent = function () {
_searchBtnRef.click(function () {
var searchKeyword = _searchKeywordRef.val();
log.info("search keyword : " + searchKeyword);
});
}
var _init = function () {
_initView();
};
_init();
});
});
\ No newline at end of file
......@@ -4,7 +4,7 @@ function sendLink(){
objectType: 'feed',
content:{
title: "관심있는 공연 정보",
description: '주소-> http://naver.com',
description: `id: {id}\n행사 이름: {oper_name}`,
imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
link:{
mobileWebUrl: 'http://naver.com',
......