이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
이유제
6264205a 2 parents 56b98cab e270a1eb

Merge branch 'maptest' into 'master' 

Maptest

map 기능 개선 merge 요청드립니다.

See merge request !2
Expand all
Inline Side-by-side
Showing 38 changed files with 661 additions and 765 deletions
...@@ -13,10 +13,8 @@ app.set('views', path.join(__dirname, 'views')); ...@@ -13,10 +13,8 @@ app.set('views', path.join(__dirname, 'views'));
13 app.set('view engine', 'ejs'); 13 app.set('view engine', 'ejs');
14 app.engine('html', require('ejs').renderFile); 14 app.engine('html', require('ejs').renderFile);
15 15
16 -//각각의 요청에서 router 호출해서 page를 전환함. 16 +//각각의 요청에서 index.js에 등록된 router 호출해서 page를 전환함.
17 app.use('/', mainRouter); 17 app.use('/', mainRouter);
18 -app.use('/login', mainRouter);
19 -
20 18
21 //css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함 19 //css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함
22 app.use(express.static(path.join(__dirname, 'public'))); 20 app.use(express.static(path.join(__dirname, 'public')));
...@@ -26,7 +24,6 @@ app.get('/logout', function (req, res) { ...@@ -26,7 +24,6 @@ app.get('/logout', function (req, res) {
26 res.send("Logout success"); 24 res.send("Logout success");
27 }); 25 });
28 26
29 -
30 app.listen(app.get('port'), () => { 27 app.listen(app.get('port'), () => {
31 console.log(`Server is running at ${app.get('port')}`); 28 console.log(`Server is running at ${app.get('port')}`);
32 }); 29 });
......
1 +const searchBox = document.querySelector(".search-box");
2 +const searchBtn = document.querySelector(".search-icon");
3 +const cancelBtn = document.querySelector(".cancel-icon");
4 +const searchInput = document.querySelector("input");
5 +const searchData = document.querySelector(".search-data");
6 +searchBtn.onclick = () => {
7 + searchBox.classList.add("active");
8 + searchBtn.classList.add("active");
9 + searchInput.classList.add("active");
10 + cancelBtn.classList.add("active");
11 + searchInput.focus();
12 + if (searchInput.value != "") {
13 + var values = searchInput.value;
14 + searchData.classList.remove("active");
15 + searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
16 + } else {
17 + searchData.textContent = "";
18 + }
19 +}
20 +cancelBtn.onclick = () => {
21 + searchBox.classList.remove("active");
22 + searchBtn.classList.remove("active");
23 + searchInput.classList.remove("active");
24 + cancelBtn.classList.remove("active");
25 + searchData.classList.toggle("active");
26 + searchInput.value = "";
27 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 +*{
3 + margin: 0;
4 + padding: 0;
5 + box-sizing: border-box;
6 + font-family: 'Poppins', sans-serif;
7 +}
8 +html,body{
9 + display: grid;
10 + height: 100%;
11 + place-items: center;
12 + background: #000000;
13 +}
14 +.search-box{
15 + position: relative;
16 + height: 60px;
17 + width: 60px;
18 + border-radius: 50%;
19 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
20 +}
21 +/* //박스 길이 조절 */
22 +.search-box.active{
23 + width: 700px;
24 +}
25 +.search-box input{
26 + width: 100%;
27 + height: 100%;
28 + border: none;
29 + border-radius: 50px;
30 + background: #fff;
31 + outline: none;
32 + padding: 0 60px 0 20px;
33 + font-size: 18px;
34 + opacity: 0;
35 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
36 +}
37 +/* 불투명도 */
38 +.search-box input.active{
39 + opacity: 1;
40 +}
41 +.search-box input::placeholder{
42 + color: #a6a6a6;
43 +}
44 +.search-box .search-icon{
45 + position: absolute;
46 + /* 버튼위치 */
47 + right: -380px;
48 + top: 50%;
49 + transform: translateY(-50%);
50 + height: 60px;
51 + width: 60px;
52 + background: #fff;
53 + border-radius: 50%;
54 + text-align: center;
55 + line-height: 60px;
56 + font-size: 22px;
57 + color: #CB25FF;
58 + cursor: pointer;
59 + z-index: 1;
60 + /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
61 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
62 + transition-timing-function: linear;
63 +}
64 +.search-box .search-icon.active{
65 + right: 5px;
66 + height: 50px;
67 + line-height: 50px;
68 + width: 50px;
69 + font-size: 20px;
70 + background: #CB25FF;
71 + color: #fff;
72 + transform: translateY(-50%) rotate(360deg);
73 +}
74 +.search-box .cancel-icon{
75 + position: absolute;
76 + right: -380px;
77 + top: 50%;
78 + transform: translateY(-50%);
79 + font-size: 25px;
80 + color: #fff;
81 + cursor: pointer;
82 + /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
83 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
84 + transition-timing-function: linear;
85 +}
86 +.search-box .cancel-icon.active{
87 + right: -40px;
88 +}
89 +.search-box .search-data{
90 + text-align: center;
91 + padding-top: 7px;
92 + color: #fff;
93 + font-size: 18px;
94 + word-wrap: break-word;
95 +}
96 +.search-box .search-data.active{
97 + display: none;
98 +}
1 +<!DOCTYPE html>
2 +<html lang="en" dir="ltr">
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <title>검색창 애니메이션</title>
7 +</head>
8 +
9 +<body>
10 + <div class="searchBtn">
11 + <link rel="stylesheet" href="btnstyle.css">
12 + <script src="btnsource.js"></script>
13 + <div class="search-box">
14 + <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
15 + <!-- encoded function for activating search-bar in lisensed resouce -->
16 + <div class="search-icon">
17 + <i class="fas fa-search"></i>
18 + </div>
19 + <div class="cancel-icon">
20 + <i class="fas fa-times"></i>
21 + </div>
22 + <div class="search-data"></div>
23 + </div>
24 + <script src="btnClickEvent.js"></script>
25 + </div>
26 +</body>
27 +
28 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<div class="searchBtn">
2 + <link rel="stylesheet" href="btnstyle.css">
3 + <script src="btnsource.js"></script>
4 + <div class="search-box">
5 + <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
6 + <!-- encoded function for activating search-bar in lisensed resouce -->
7 + <div class="search-icon">
8 + <i class="fas fa-search"></i>
9 + </div>
10 + <div class="cancel-icon">
11 + <i class="fas fa-times"></i>
12 + </div>
13 + <div class="search-data"></div>
14 + </div>
15 + <script src="btnClickEvent.js"></script>
16 +</div>
...\ No newline at end of file ...\ No newline at end of file
1 -const express = require('express');
2 -const app = express();
3 -
4 -app.get('/', (req, res) => {
5 - //res.send('API SERVER IS WORKING');
6 - console.log("api.js 실행");
7 -});
...\ No newline at end of file ...\ No newline at end of file
1 -const express = require('express');
2 -const router = express.Router();
3 -
4 -router.get('/', function (req, res) {
5 -
6 - res.send("모든 공연 정보 리스트 반환")
7 -});
8 -module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
1 -<html>
2 -
3 -<head>
4 - <title>로그인 페이지</title>
5 - <link rel="stylesheet" href="login_style.css" type="text/css">
6 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 -
8 -</head>
9 -
10 -<body>
11 - <header>
12 - <div class="nav-bar">
13 - <img src="camera.png" alt="" class="logo">
14 -
15 - <ul class="menu">
16 - <li><a href="">Home</a></li>
17 - <li><a href="">Services</a></li>
18 - <li><a href="">Portfolio</a></li>
19 - <li><a href="">Testimonimal</a></li>
20 - <li><a href="">Career</a></li>
21 - <li><a href="">Contact</a></li>
22 - </ul>
23 -
24 - </div>
25 - <div class="welcome">
26 -
27 - <h1>로그인</h1>
28 - <a id="kakao-login-btn"></a>
29 -
30 - </div>
31 -
32 - </header>
33 -</body>
34 -<script>
35 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 -
37 - console.log(Kakao.isInitialized());
38 -
39 - Kakao.Auth.createLoginButton({
40 - container: '#kakao-login-btn',
41 - success: function (authObj) {
42 - console.log(JSON.stringify(authObj));
43 - alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 - },
45 - fail: function (err) {
46 - alert(JSON.stringify(err));
47 - }
48 - })
49 -</script>
50 -
51 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<html>
2 -
3 -<head>
4 - <title>Webpage Design In HTML and CSS</title>
5 - <link rel="stylesheet" href="main_style.css" type="text/css">
6 -</head>
7 -
8 -<body>
9 - <header>
10 - <div class="nav-bar">
11 - <img src="camera.png" alt="" class="logo">
12 -
13 - <ul class="menu">
14 - <li><a href="">Home</a></li>
15 - <li><a href="">Services</a></li>
16 - <li><a href="">Portfolio</a></li>
17 - <li><a href="">Testimonimal</a></li>
18 - <li><a href="">Career</a></li>
19 - <li><a href="">Contact</a></li>
20 - </ul>
21 -
22 - </div>
23 - <div class="welcome">
24 -
25 - <h1>어떤 공연을 찾으시나요?</h1>
26 - <a href="#" class="btn btn1">나의 근처 공연</a>
27 - <a href="#" class="btn btn2">검색하기</a>
28 - <a href="login.html" class="btn btn3">로그인</a>
29 - </div>
30 -
31 - </header>
32 -</body>
33 -
34 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -*
2 -{
3 - margin: 0;
4 - padding: 0;
5 -}
6 -
7 -header
8 -{
9 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
10 - height: 100vh;
11 - background-size: cover;
12 - background-position: center;
13 - background-repeat: no-repeat;
14 - transition: 5s;
15 -
16 - animation-name: animate;
17 - animation-direction: alternate-reverse;
18 - animation-duration: 30s;
19 - animation-fill-mode:forwards;
20 - animation-iteration-count: infinite;
21 - animation-play-state: running;
22 - animation-timing-function:ease-in-out;
23 -}
24 -@keyframes animate{
25 - 0%{
26 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
27 - }
28 - 33%{
29 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
30 -
31 - }
32 - 66%{
33 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
34 -
35 - }
36 -}
37 -.nav-bar
38 -{
39 - background: rgb(0,0,0,0.5);
40 - height: 80px;
41 -}
42 -
43 -.logo{
44 - background-color: #fff;
45 - margin: 10px 50px;
46 - height: 60px;
47 -}
48 -
49 -.menu{
50 - float: right;
51 - list-style: none;
52 - margin:20px;
53 -}
54 -
55 -.menu li{
56 - display: inline-block;
57 - margin: 10px 5px;
58 -}
59 -
60 -.menu li a{
61 - text-decoration: none;
62 - color: #fff;
63 - padding: 5px 10px;
64 - font-family: sans-serif;
65 - letter-spacing: 2px;
66 - border: 1px solid #fff;
67 -}
68 -
69 -.menu li a:hover{
70 - background: #fff;
71 - transition: .4s;
72 - color: #000;
73 -}
74 -
75 -.welcome{
76 - position:relative;
77 - text-align:center;
78 - font-family: sans-serif;
79 - color:#fff;
80 - top: 300px;
81 -}
82 -
83 -.welcome h1{
84 - font-size: 42px;
85 - margin: 25px;
86 -}
87 -
88 -.btn{
89 - font-size:18px;
90 - letter-spacing: 2px;
91 - margin:5px;
92 - padding:7px 10px;
93 - text-decoration: none;
94 - border: 1px solid #fff;
95 -}
96 -
97 -.btn{
98 - color:#fff;
99 -
100 -}
101 -.btn:hover{
102 - background: #fff;
103 - color: #000;
104 - transition: .4s;
105 -}
...\ No newline at end of file ...\ No newline at end of file
1 -var http = require('http');
2 -var fs = require('fs');
3 -var app = http.createServer(function(request,response){
4 - var url=request.url;
5 - if(url == '/'){
6 - url = '/mapPage.html';
7 - }
8 - response.writeHead(200);
9 - response.end(fs.readFileSync(__dirname+url));
10 -});
11 -
12 -app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title> map Page title </title>
6 - </head>
7 -<body>
8 - <div id="map" style="width:500px;height:350px"></div>
9 - <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
10 -
11 - <script src="./mypos.js"></script>
12 - <script src="./show_pos.js"></script>
13 -</body>
14 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div
2 -
3 -// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
4 -mapOption = {
5 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
6 - level: 5 // 지도의 확대 레벨
7 - };
8 -
9 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
10 -
11 -// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
12 -if (navigator.geolocation) {
13 -
14 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
15 - navigator.geolocation.getCurrentPosition(function(position) {
16 -
17 - var lat = position.coords.latitude, // 위도
18 - lon = position.coords.longitude; // 경도
19 -
20 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
21 - message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
22 -
23 - // 마커와 인포윈도우를 표시합니다
24 - displayMarker(locPosition, message);
25 -
26 - });
27 -
28 -} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
29 -
30 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
31 - message = 'geolocation을 사용할수 없어요..'
32 -
33 - displayMarker(locPosition, message);
34 -}
35 -
36 -// 지도에 마커와 인포윈도우를 표시하는 함수입니다
37 -function displayMarker(locPosition, message) {
38 -
39 - // 마커를 생성합니다
40 - var marker = new kakao.maps.Marker({
41 - map: map,
42 - position: locPosition
43 - });
44 -
45 - var iwContent = message, // 인포윈도우에 표시할 내용
46 - iwRemoveable = true;
47 -
48 - // 인포윈도우를 생성합니다
49 - var infowindow = new kakao.maps.InfoWindow({
50 - content : iwContent,
51 - removable : iwRemoveable
52 - });
53 -
54 - // 인포윈도우를 마커위에 표시합니다
55 - infowindow.open(map, marker);
56 -
57 - // 지도 중심좌표를 접속위치로 변경합니다
58 - map.setCenter(locPosition);
59 -}
...\ No newline at end of file ...\ No newline at end of file
1 -var positions = [
2 - {
3 - title: '카카오',
4 - latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
5 - }
6 -];
7 -
8 -displayShows(positions);
9 -
10 -function displayShows(positions){
11 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
12 -
13 -for (var i = 0; i < positions.length; i ++) {
14 -
15 - // 마커 이미지의 이미지 크기 입니다
16 - var imageSize = new kakao.maps.Size(24, 35);
17 -
18 - // 마커 이미지를 생성합니다
19 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
20 -
21 - // 마커를 생성합니다
22 - var marker = new kakao.maps.Marker({
23 - map: map, // 마커를 표시할 지도
24 - position: positions[i].latlng, // 마커를 표시할 위치
25 - title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
26 - image : markerImage // 마커 이미지
27 - });
28 - }
29 -}
...\ No newline at end of file ...\ No newline at end of file
1 -// git Ignore 할것!!!!!!!!!!!!!!!!!!!!!!
2 -{
3 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
4 - "user":"root",
5 - "password": "dldbwp1207",
6 - "port": "3306",
7 - "database": "showdata"
8 -}
...\ No newline at end of file ...\ No newline at end of file
1 -//해당 아이디를 불러와서 lat lon 받아서 지도 출력
2 -//지도 생성
3 -//해당 위치 표시
4 -
5 -const fs = require('fs');
6 -const express = require('express');
7 -
8 -const data = fs.readFileSync('./showData.json');
9 -const conf = JSON.parse(data);
10 -const mysql = require('mysql');
11 -
12 -const connection = mysql.createConnection({
13 - host: conf.host,
14 - user: conf.user,
15 - password: conf.password,
16 - port: conf.port,
17 - database: conf.database
18 -});
19 -connection.connect(); //연결
20 -
21 -app.get('위치(에 접속한 경우 쿼리를 날려준다.)')
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 -
4 -<head>
5 - <meta charset="utf-8">
6 - <title>geolocation으로 마커 표시하기</title>
7 -
8 -</head>
9 -
10 -<body>
11 - <p style="margin-top:-12px">
12 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
13 - </p>
14 - <div id="map" style="width:500px;height:350px;"></div>
15 -
16 - <script type="text/javascript"
17 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
18 - <script>
19 -
20 - const near = require('study.js');
21 -
22 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
25 - level: 10 // 지도의 확대 레벨
26 - };
27 -
28 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
29 -
30 - // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
31 - if (navigator.geolocation) {
32 -
33 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
34 - navigator.geolocation.getCurrentPosition(function (position) {
35 -
36 - var lat = position.coords.latitude, // 위도
37 - lon = position.coords.longitude; // 경도
38 - console.log(lat);
39 - console.log(lon);
40 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
41 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
42 -
43 - // 마커와 인포윈도우를 표시합니다
44 - displayMarker(locPosition, message);
45 -
46 - });
47 -
48 - } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
49 -
50 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
51 - message = 'geolocation을 사용할수 없어요..'
52 -
53 - displayMarker(locPosition, message);
54 - }
55 -
56 -
57 -
58 -
59 - displayShows();
60 - function displayShows() {
61 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 - var near_list = near(lat, lon);
63 - var positions = [];
64 - for (var i = 0; i < near_list.length; i++) {
65 - positions.push({
66 - title: id,
67 - lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
68 - })
69 - }
70 - for (var i = 0; i < positions.length; i++) {
71 -
72 - // 마커 이미지의 이미지 크기 입니다
73 - var imageSize = new kakao.maps.Size(24, 35);
74 -
75 - // 마커 이미지를 생성합니다
76 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
77 -
78 - // 마커를 생성합니다
79 - var marker = new kakao.maps.Marker({
80 - map: map, // 마커를 표시할 지도
81 - position: positions[i].latlng, // 마커를 표시할 위치
82 - title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
83 - image: markerImage // 마커 이미지
84 - });
85 - }
86 - }
87 - // 지도에 마커와 인포윈도우를 표시하는 함수입니다
88 - function displayMarker(locPosition, message) {
89 -
90 - // 마커를 생성합니다
91 - var marker = new kakao.maps.Marker({
92 - map: map,
93 - position: locPosition
94 - });
95 -
96 - var iwContent = message, // 인포윈도우에 표시할 내용
97 - iwRemoveable = true;
98 -
99 - // 인포윈도우를 생성합니다
100 - var infowindow = new kakao.maps.InfoWindow({
101 - content: iwContent,
102 - removable: iwRemoveable
103 - });
104 -
105 - // 인포윈도우를 마커위에 표시합니다
106 - infowindow.open(map, marker);
107 -
108 - // 지도 중심좌표를 접속위치로 변경합니다
109 - map.setCenter(locPosition);
110 - }
111 - </script>
112 -</body>
113 -
114 -</html>
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 -var mysql = require('mysql');
2 -var near_show_list = [];
3 -var connection = 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 -
11 -connection.connect();
12 -
13 -// 데이터 길이 파악 //
14 -var dataNum=0;
15 -connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
16 - if (error) {
17 - console.log(error);
18 - }
19 - dataNum = results[0].cnt;
20 - console.log(dataNum);
21 -});
22 -
23 -connection.query('SELECT start_day FROM SHOW_DATA WHERE start_day>=2021/01/01 ORDER BY start_day',function(error,results,field){
24 - if(error){
25 - console.log(error);
26 - }
27 - console.log(results);
28 -})
29 -
30 -connection.end();
...\ No newline at end of file ...\ No newline at end of file
1 -var mysql = require('mysql');
2 -
3 -module.exports = {
4 - nearShow: function (lat, lon) {
5 - var near_show_list = [];
6 - var connection = mysql.createConnection({
7 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
8 - "user": "root",
9 - "password": "dldbwp1207",
10 - "port": "3306",
11 - "database": "showdata"
12 - });
13 -
14 - connection.connect();
15 - var dataNum = 0;
16 - connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
17 - if (error) {
18 - console.log(error);
19 - }
20 - console.log(results[0].cnt);
21 - dataNum = results[0].cnt;
22 - });
23 -
24 - connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
25 - if (error) {
26 - console.log(error);
27 - }
28 - console.log([lat, lon]);
29 - for (var i = 0; i < dataNum; i++) {
30 - var latgap = (lat - results[i].latitude) * 110;
31 - var longap = (lon - results[i].longitude) * 91;
32 - var cal = latgap * latgap + longap * longap;
33 - if (cal <= 1600) {
34 - console.log(results[i].id);
35 - near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
36 - }
37 - }
38 - });
39 -
40 - connection.end();
41 - // return near_show_list;
42 - }
43 -}
1 +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 +*{
3 + margin: 0;
4 + padding: 0;
5 + box-sizing: border-box;
6 + font-family: 'Poppins', sans-serif;
7 +}
8 +html,body{
9 + display: grid;
10 + height: 100%;
11 + place-items: center;
12 + background: #664AFF;
13 +}
14 +::selection{
15 + color: #fff;
16 + background: #664AFF;
17 +}
18 +.search-box{
19 + position: relative;
20 + height: 60px;
21 + width: 60px;
22 + border-radius: 50%;
23 + box-shadow: 5px 5px 30px rgba(0,0,0,.2);
24 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
25 +}
26 +.search-box.active{
27 + width: 350px;
28 +}
29 +.search-box input{
30 + width: 100%;
31 + height: 100%;
32 + border: none;
33 + border-radius: 50px;
34 + background: #fff;
35 + outline: none;
36 + padding: 0 60px 0 20px;
37 + font-size: 18px;
38 + opacity: 0;
39 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
40 +}
41 +.search-box input.active{
42 + opacity: 1;
43 +}
44 +.search-box input::placeholder{
45 + color: #a6a6a6;
46 +}
47 +.search-box .search-icon{
48 + position: absolute;
49 + right: 0px;
50 + top: 50%;
51 + transform: translateY(-50%);
52 + height: 60px;
53 + width: 60px;
54 + background: #fff;
55 + border-radius: 50%;
56 + text-align: center;
57 + line-height: 60px;
58 + font-size: 22px;
59 + color: #664AFF;
60 + cursor: pointer;
61 + z-index: 1;
62 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
63 +}
64 +.search-box .search-icon.active{
65 + right: 5px;
66 + height: 50px;
67 + line-height: 50px;
68 + width: 50px;
69 + font-size: 20px;
70 + background: #664AFF;
71 + color: #fff;
72 + transform: translateY(-50%) rotate(360deg);
73 +}
74 +.search-box .cancel-icon{
75 + position: absolute;
76 + right: 20px;
77 + top: 50%;
78 + transform: translateY(-50%);
79 + font-size: 25px;
80 + color: #fff;
81 + cursor: pointer;
82 + transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
83 +}
84 +.search-box .cancel-icon.active{
85 + right: -40px;
86 + transform: translateY(-50%) rotate(360deg);
87 +}
88 +.search-box .search-data{
89 + text-align: center;
90 + padding-top: 7px;
91 + color: #fff;
92 + font-size: 18px;
93 + word-wrap: break-word;
94 +}
95 +.search-box .search-data.active{
96 + display: none;
97 +}
1 -* 1 +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 -{ 2 +*{
3 margin: 0; 3 margin: 0;
4 padding: 0; 4 padding: 0;
5 + box-sizing: border-box;
6 + font-family: 'Poppins', sans-serif;
5 } 7 }
6 - 8 +.search-box{
9 + position: relative;
10 + height: 60px;
11 + width: 60px;
12 + border-radius: 50%;
13 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
14 + }
15 + /* //박스 길이 조절 */
16 + .search-box.active{
17 + width: 700px;
18 + }
19 + .search-box input{
20 + width: 100%;
21 + height: 100%;
22 + border: none;
23 + border-radius: 50px;
24 + background: #fff;
25 + outline: none;
26 + padding: 0 60px 0 20px;
27 + font-size: 18px;
28 + opacity: 0;
29 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
30 + }
31 + /* 불투명도 */
32 + .search-box input.active{
33 + opacity: 1;
34 + }
35 + .search-box input::placeholder{
36 + color: #a6a6a6;
37 + }
38 + .search-box .search-icon{
39 + position: absolute;
40 + /* 버튼위치 */
41 + right: -380px;
42 + top: 50%;
43 + transform: translateY(-50%);
44 + height: 60px;
45 + width: 60px;
46 + background: #fff;
47 + border-radius: 50%;
48 + text-align: center;
49 + line-height: 60px;
50 + font-size: 22px;
51 + color: #CB25FF;
52 + cursor: pointer;
53 + z-index: 1;
54 + /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
55 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
56 + transition-timing-function: linear;
57 + }
58 + .search-box .search-icon.active{
59 + right: 5px;
60 + height: 50px;
61 + line-height: 50px;
62 + width: 50px;
63 + font-size: 20px;
64 + background: #CB25FF;
65 + color: #fff;
66 + transform: translateY(-50%) rotate(360deg);
67 + }
68 + .search-box .cancel-icon{
69 + position: absolute;
70 + right: -380px;
71 + top: 50%;
72 + transform: translateY(-50%);
73 + font-size: 25px;
74 + color: #fff;
75 + cursor: pointer;
76 + /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
77 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
78 + transition-timing-function: linear;
79 + }
80 + .search-box .cancel-icon.active{
81 + right: -40px;
82 + }
83 + .search-box .search-data{
84 + text-align: center;
85 + padding-top: 7px;
86 + color: #fff;
87 + font-size: 18px;
88 + word-wrap: break-word;
89 + }
90 + .search-box .search-data.active{
91 + display: none;
92 + }
7 header 93 header
8 { 94 {
9 background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg); 95 background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
...@@ -73,11 +159,15 @@ header ...@@ -73,11 +159,15 @@ header
73 } 159 }
74 160
75 .welcome{ 161 .welcome{
76 - position:relative; 162 + position: absolute;
163 + top:50%;
164 + left: 50%;
165 + width: 700px; height: 160px;
166 + margin-top: -80px;
167 + margin-left: -350px;
77 text-align:center; 168 text-align:center;
78 font-family: sans-serif; 169 font-family: sans-serif;
79 color:#fff; 170 color:#fff;
80 - top: 30%;
81 } 171 }
82 172
83 .welcome h1{ 173 .welcome h1{
...@@ -103,3 +193,4 @@ header ...@@ -103,3 +193,4 @@ header
103 color: #000; 193 color: #000;
104 transition: .4s; 194 transition: .4s;
105 } 195 }
196 +
......
1 +
1 * 2 *
2 { 3 {
3 margin: 0; 4 margin: 0;
4 padding: 0; 5 padding: 0;
6 + box-sizing: border-box;
7 + font-family: 'Poppins', sans-serif;
5 } 8 }
6 9
7 -
8 .nav-bar 10 .nav-bar
9 { 11 {
10 - background: #000; 12 + position: relative;
13 + background: rgb(0,0,0,0.5);
11 height: 80px; 14 height: 80px;
12 } 15 }
13 16
...@@ -44,15 +47,12 @@ ...@@ -44,15 +47,12 @@
44 } 47 }
45 48
46 .welcome{ 49 .welcome{
47 - position:relative; 50 + position: absolute;
51 + top:20%;
52 + left: 50%;
53 + width: 700px; height: 160px;
54 +
48 text-align:center; 55 text-align:center;
49 font-family: sans-serif; 56 font-family: sans-serif;
50 color:#000; 57 color:#000;
51 - top: 300px;
52 } 58 }
...\ No newline at end of file ...\ No newline at end of file
53 -
54 -.welcome h1{
55 - font-size: 42px;
56 - margin: 25px;
57 -}
58 -
......
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,14 +58,13 @@ router.get('/login', function (req, res, next) { ...@@ -12,14 +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 -// router.get('/login/:id', function (req, res) { 62 + res.render('search.html', { title: '검색 결과' });
17 -// var id = req.params.id; 63 + console.log('검색 결과 페이지 접속 성공');
18 -// console.log('id 할당 접속 성공'); 64 +})
19 -// });
20 -
21 router.get('/send', function (req, res, next) { 65 router.get('/send', function (req, res, next) {
22 res.render('send.html', { title: 'Send message' }); 66 res.render('send.html', { title: 'Send message' });
23 console.log('카카오톡 공유 메시지 접속 성공'); 67 console.log('카카오톡 공유 메시지 접속 성공');
24 }) 68 })
69 +
25 module.exports = router; 70 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 -<head> 3 + <head>
4 - <meta charset="utf-8"> 4 + <title>
5 - <title>geolocation으로 마커 표시하기</title> 5 + <%= title%>
6 - 6 + </title>
7 -</head> 7 + <link rel="stylesheet" href='/stylesheets/mapPage_style.css' type="text/css">
8 -<body> 8 +
9 -<p style="margin-top:-12px"> 9 + </head>
10 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요. 10 + <body>
11 -</p> 11 + <header>
12 -<div id="map" style="width:500px;height:350px;"></div> 12 + <div class="nav-bar">
13 - 13 + <img src="../images/camera.png" alt="" class="logo">
14 -<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script> 14 + <ul class="menu">
15 + <li><a href="">Home</a></li>
16 + <li><a href="">Services</a></li>
17 + <li><a href="">Portfolio</a></li>
18 + <li><a href="">Testimonimal</a></li>
19 + <li><a href="">Career</a></li>
20 + <li><a href="">Contact</a></li>
21 + </ul>
22 + </div>
23 + <div class="welcome">
24 + <h1>어떤 공연을 찾으시나요?</h1>
25 + <a href="mappage" class="btn btn1">나의 근처 공연</a>
26 + <a href="#" class="btn btn2">검색하기</a>
27 + <a href="login" class="btn btn3">로그인</a>
28 + </div>
29 + </header>
30 +
31 + <div id="map"
32 + style="
33 + position: absolute;
34 + border-radius: 5%;
35 + width:500px; height:350px;
36 + top:50%;
37 + left: 50%;
38 + "></div>
39 + <div>
40 + </div>
41 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"></script>
15 <script> 42 <script>
16 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 43 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
17 mapOption = { 44 mapOption = {
...@@ -29,13 +56,32 @@ if (navigator.geolocation) { ...@@ -29,13 +56,32 @@ if (navigator.geolocation) {
29 56
30 var lat = position.coords.latitude, // 위도 57 var lat = position.coords.latitude, // 위도
31 lon = position.coords.longitude; // 경도 58 lon = position.coords.longitude; // 경도
32 - console.log(lat); 59 +
33 - console.log(lon);
34 var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 60 var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
35 message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다 61 message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
62 + displayMarker(locPosition, message);
63 +
64 + var data=[];
65 + var strData = "<%= data %>";
66 + var splitData=strData.split(',');
67 + for(var i=0;i<splitData.length;i+=4){
68 + data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3])]);
69 + }
70 + for (var i = 0; i < data.length; i++) {
71 + var latgap = (lat - data[i][2]) * 110;
72 + var longap = (lon - data[i][3]) * 91;
73 + var cal = latgap * latgap + longap * longap;
74 + if (cal <= 1600) {
75 + var locP=new kakao.maps.LatLng(data[i][2], data[i][3]),
76 + message = data[i][1];
77 + displayShowMarker(locP,message);
78 +
79 + console.log("near_show:"+data[i]);
80 + }
81 + }
36 82
37 // 마커와 인포윈도우를 표시합니다 83 // 마커와 인포윈도우를 표시합니다
38 - displayMarker(locPosition, message); 84 +
39 85
40 }); 86 });
41 87
...@@ -46,36 +92,24 @@ if (navigator.geolocation) { ...@@ -46,36 +92,24 @@ if (navigator.geolocation) {
46 92
47 displayMarker(locPosition, message); 93 displayMarker(locPosition, message);
48 } 94 }
49 - 95 +function displayShowMarker(locPosition,message){
50 -
51 -var positions = [
52 - {
53 - title: '카카오',
54 - latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
55 - }
56 -];
57 -
58 -
59 -displayShows(positions);
60 -function displayShows(positions){
61 var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 96 var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 97
63 -for (var i = 0; i < positions.length; i ++) {
64 98
65 - // 마커 이미지의 이미지 크기 입니다
66 var imageSize = new kakao.maps.Size(24, 35); 99 var imageSize = new kakao.maps.Size(24, 35);
67 100
68 - // 마커 이미지를 생성합니다 101 +// 마커 이미지를 생성합니다
69 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 102 +var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
70 -
71 - // 마커를 생성합니다
72 var marker = new kakao.maps.Marker({ 103 var marker = new kakao.maps.Marker({
73 - map: map, // 마커를 표시할 지도 104 + map: map,
74 - position: positions[i].latlng, // 마커를 표시할 위치 105 + position: locPosition,
75 - title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다 106 + title: message,
76 - image : markerImage // 마커 이미지 107 + image: markerImage
77 }); 108 });
78 - } 109 +
110 + // 지도 중심좌표를 접속위치로 변경합니다
111 + map.setCenter(locPosition);
112 +
79 } 113 }
80 // 지도에 마커와 인포윈도우를 표시하는 함수입니다 114 // 지도에 마커와 인포윈도우를 표시하는 함수입니다
81 function displayMarker(locPosition, message) { 115 function displayMarker(locPosition, message) {
...@@ -102,5 +136,5 @@ function displayMarker(locPosition, message) { ...@@ -102,5 +136,5 @@ function displayMarker(locPosition, message) {
102 map.setCenter(locPosition); 136 map.setCenter(locPosition);
103 } 137 }
104 </script> 138 </script>
105 -</body> 139 + </body>
106 </html> 140 </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
1 <html> 1 <html>
2 2
3 <head> 3 <head>
4 - <title>로그인 페이지</title> 4 + <title>Culture Gallery</title>
5 <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css"> 5 <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
6 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> 6 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 7
......
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <title>login main page title</title>
5 - </head>
6 -</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 <header> 9 <header>
10 <div class="nav-bar"> 10 <div class="nav-bar">
11 <img src="../images/camera.png" alt="" class="logo"> 11 <img src="../images/camera.png" alt="" class="logo">
12 -
13 <ul class="menu"> 12 <ul class="menu">
14 <li><a href="">Home</a></li> 13 <li><a href="">Home</a></li>
15 <li><a href="">Services</a></li> 14 <li><a href="">Services</a></li>
...@@ -18,17 +17,14 @@ ...@@ -18,17 +17,14 @@
18 <li><a href="">Career</a></li> 17 <li><a href="">Career</a></li>
19 <li><a href="">Contact</a></li> 18 <li><a href="">Contact</a></li>
20 </ul> 19 </ul>
21 -
22 </div> 20 </div>
21 + </header>
23 <div class="welcome"> 22 <div class="welcome">
24 -
25 <h1>어떤 공연을 찾으시나요?</h1> 23 <h1>어떤 공연을 찾으시나요?</h1>
26 - <a href="#" class="btn btn1">나의 근처 공연</a> 24 + <a href="mappage" class="btn btn1">나의 근처 공연</a>
27 <a href="#" class="btn btn2">검색하기</a> 25 <a href="#" class="btn btn2">검색하기</a>
28 <a href="login" class="btn btn3">로그인</a> 26 <a href="login" class="btn btn3">로그인</a>
29 </div> 27 </div>
30 -
31 - </header>
32 </body> 28 </body>
33 29
34 </html> 30 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -<!DOCTYPE html>
2 -<html>
3 -
4 -<head>
5 - <meta charset="utf-8">
6 - <title>geolocation으로 마커 표시하기</title>
7 -
8 -</head>
9 -
10 -<body>
11 - <p style="margin-top:-12px">
12 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
13 - </p>
14 - <div id="map" style="width:500px;height:350px;"></div>
15 -
16 - <script type="text/javascript"
17 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
18 - <script>
19 - var mysql = require('mysql');
20 -
21 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
22 - mapOption = {
23 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
24 - level: 10 // 지도의 확대 레벨
25 - };
26 -
27 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
28 -
29 - // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
30 - if (navigator.geolocation) {
31 -
32 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
33 - navigator.geolocation.getCurrentPosition(function (position) {
34 -
35 - var lat = position.coords.latitude, // 위도
36 - lon = position.coords.longitude; // 경도
37 - console.log(lat);
38 - console.log(lon);
39 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
40 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
41 -
42 - // 마커와 인포윈도우를 표시합니다
43 - displayMarker(locPosition, message);
44 - });
45 -
46 - } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
47 -
48 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
49 - message = 'geolocation을 사용할수 없어요..'
50 -
51 - displayMarker(locPosition, message);
52 - }
53 -
54 - /////////// sql 데이터 불러옴 /////////////////
55 - var near_show_list = [];
56 - var connection = mysql.createConnection({
57 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
58 - "user": "root",
59 - "password": "dldbwp1207",
60 - "port": "3306",
61 - "database": "showdata"
62 - });
63 -
64 - connection.connect();
65 - var dataNum = 0;
66 - connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
67 - if (error) {
68 - console.log(error);
69 - }
70 - console.log(results[0].cnt);
71 - dataNum = results[0].cnt;
72 - });
73 -
74 - connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
75 - if (error) {
76 - console.log(error);
77 - }
78 - console.log([lat, lon]);
79 - for (var i = 0; i < dataNum; i++) {
80 - var latgap = (lat - results[i].latitude) * 110;
81 - var longap = (lon - results[i].longitude) * 91;
82 - var cal = latgap * latgap + longap * longap;
83 -
84 - //내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
85 - if (cal <= 1600) {
86 - console.log(results[i].id);
87 - near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
88 - }
89 - }
90 - });
91 -
92 - connection.end();
93 - ////////////////////////////////////////////////
94 -
95 -
96 - displayShows(near_show_list);
97 - //// displayShows() 정의 ////
98 - function displayShows(near_list) {
99 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
100 - var kakao_near_list = [];
101 - for (var i = 0; i < near_list.length; i++) {
102 - kakao_near_list.push({
103 - title: id,
104 - lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
105 - })
106 - }
107 - for (var i = 0; i < kakao_near_list.length; i++) {
108 -
109 - // 마커 이미지의 이미지 크기 입니다
110 - var imageSize = new kakao.maps.Size(24, 35);
111 -
112 - // 마커 이미지를 생성합니다
113 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
114 -
115 - // 마커를 생성합니다
116 - var marker = new kakao.maps.Marker({
117 - map: map, // 마커를 표시할 지도
118 - position: kakao_near_list[i].latlng, // 마커를 표시할 위치
119 - title: kakao_near_list[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
120 - image: markerImage // 마커 이미지
121 - });
122 - }
123 - }
124 -
125 - /// displayMarker 함수 정의 ///
126 - // 지도에 마커와 인포윈도우를 표시하는 함수입니다
127 - function displayMarker(locPosition, message) {
128 -
129 - // 마커를 생성합니다
130 - var marker = new kakao.maps.Marker({
131 - map: map,
132 - position: locPosition
133 - });
134 -
135 - var iwContent = message, // 인포윈도우에 표시할 내용
136 - iwRemoveable = true;
137 -
138 - // 인포윈도우를 생성합니다
139 - var infowindow = new kakao.maps.InfoWindow({
140 - content: iwContent,
141 - removable: iwRemoveable
142 - });
143 -
144 - // 인포윈도우를 마커위에 표시합니다
145 - infowindow.open(map, marker);
146 -
147 - // 지도 중심좌표를 접속위치로 변경합니다
148 - map.setCenter(locPosition);
149 - }
150 - </script>
151 -</body>
152 -
153 -</html>
...\ No newline at end of file ...\ No newline at end of file