김태민 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
김민석
8bbdd881 1 parent 999f57a4

지도부분 추가

Inline Side-by-side
Showing 9 changed files with 911 additions and 538 deletions
...@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) { ...@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) {
18 var id = req.params.id; 18 var id = req.params.id;
19 if (id) { 19 if (id) {
20 if (id == 'search') { 20 if (id == 'search') {
21 - res.render('search.ejs', { 21 + res.render('map.ejs', {
22 title: 'Searching', 22 title: 'Searching',
23 - description: 'You can search for food here.' 23 + searching: '경희대학교 국제캠퍼스'
24 }); 24 });
25 } else if (id == 'recommendation') { 25 } else if (id == 'recommendation') {
26 res.render('recommendation.ejs', { 26 res.render('recommendation.ejs', {
...@@ -38,8 +38,12 @@ app.get(['/food', '/food/:id'], function(req, res) { ...@@ -38,8 +38,12 @@ app.get(['/food', '/food/:id'], function(req, res) {
38 38
39 //사용자가 호출한 search page 39 //사용자가 호출한 search page
40 app.post('/food/search', function(req, res) { 40 app.post('/food/search', function(req, res) {
41 - var title=req.body.title; 41 + var title = req.body.title;
42 - res.redirect("https://www.google.com/search?q="+title+"&oq="+title+"&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8") 42 + res.render('map.ejs', {
43 + title: 'Search',
44 + searching: title
45 + });
46 + // res.redirect("https://www.google.com/search?q=" + title + "&oq=" + title + "&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
43 }) 47 })
44 48
45 //사용자가 호출한 recommendation page 49 //사용자가 호출한 recommendation page
...@@ -54,25 +58,66 @@ app.post('/food/recommendation', function(req, res) { ...@@ -54,25 +58,66 @@ app.post('/food/recommendation', function(req, res) {
54 var shape = req.body.shape; 58 var shape = req.body.shape;
55 var kinds = req.body.kinds; 59 var kinds = req.body.kinds;
56 60
57 - var rand = Math.floor(Math.random() * 3); //(Math.random() * (max - min)) + min 61 + if (!Array.isArray(shape) && shape) {
58 - var i = 0; 62 + var shape = [];
59 - for (var foods in users) { 63 + shape.push(req.body.shape);
60 - if (rand == i) { 64 + }
61 - var food_value=foods; 65 + if (!Array.isArray(kinds) && kinds) {
62 - // $('<li>').text(foods).appendTo('#users'); 66 + var kinds = [];
67 + kinds.push(req.body.kinds);
68 + }
69 + var set1 = new Set();
70 + var set2 = new Set();
71 + var set3 = new Set();
72 +
73 + function add(users, price, shape, kinds, callback) {
74 + for (var foods in users) {
75 + if (shape) {
76 + for (var i = 0; i < shape.length; i++) {
77 + if (users[foods]['shape'] == shape[i]) {
78 + set1.add(foods);
79 + }
80 + }
81 + } else {
82 + set1.add(foods);
83 + }
84 + if (kinds) {
85 + for (var j = 0; j < kinds.length; j++) {
86 + if (users[foods]['kinds'] == kinds[j]) {
87 + set2.add(foods);
88 + }
89 + }
90 + } else {
91 + set2.add(foods);
92 + }
93 + if (!price || (price && users[foods]['price'] <= Number(price) + 5000 && users[foods]['price'] >= Number(price) - 5000)) {
94 + set3.add(foods);
95 + }
63 } 96 }
64 - i++; 97 + callback(set1, set2, set3);
65 } 98 }
66 99
67 - res.render('print.ejs', { 100 + add(users, price, shape, kinds, function(set1, set2, set3) {
68 - title: 'Recommendation', 101 + let difference1 = new Set([...set1].filter(i => set2.has(i)));
69 - description: 'We recommend this...', 102 + let difference2 = new Set([...difference1].filter(i => set3.has(i)));
70 - // name: users, 103 + var food = [...difference2];
71 - randvalue: food_value 104 + var length = food.length;
72 - }); 105 + console.log('food 목록: '+food);
106 + console.log('food 갯수: '+length);
107 + var rand = Math.floor(Math.random() * length); //(Math.random() * (max - min)) + min
108 + var food_value = food[rand];
109 + console.log('랜덤 food 번호: '+rand);
110 + res.render('print.ejs', {
111 + title: 'Recommendation',
112 + description: 'We recommend this...',
113 + randvalue: food_value
114 + }); //rander closed
115 + }); //add closed
73 } 116 }
74 - }); 117 + }); //readFile closed
75 -}) 118 +}); //post closed
119 +
120 +
76 121
77 app.listen(3000, function() { 122 app.listen(3000, function() {
78 console.log('Connected, 3000'); 123 console.log('Connected, 3000');
......
1 { 1 {
2 - "바게뜨":{ 2 + "짜장면": {
3 + "price": 5000,
4 + "shape": "면",
5 + "kinds": "중식"
6 + },
7 + "짬뽕": {
8 + "price": 6000,
9 + "shape": "면",
10 + "kinds": "중식"
11 + },
12 + "우동": {
13 + "price": 6000,
14 + "shape": "면",
15 + "kinds": "중식"
16 + },
17 + "울면": {
18 + "price": 6000,
19 + "shape": "면",
20 + "kinds": "중식"
21 + },
22 + "간짜장": {
23 + "price": 6000,
24 + "shape": "면",
25 + "kinds": "중식"
26 + },
27 + "냉면": {
28 + "price": 6000,
29 + "shape": "면",
30 + "kinds": "중식"
31 + },
32 + "중국냉면": {
33 + "price": 9000,
34 + "shape": "면",
35 + "kinds": "중식"
36 + },
37 + "만두": {
38 + "price": 5000,
39 + "shape": "기타",
40 + "kinds": "중식"
41 + },
42 + "볶음밥": {
43 + "price": 5000,
44 + "shape": "밥",
45 + "kinds": "중식"
46 + },
47 + "짬뽕밥": {
48 + "price": 6000,
49 + "shape": "밥",
50 + "kinds": "중식"
51 + },
52 + "짜장밥": {
53 + "price": 6000,
54 + "shape": "밥",
55 + "kinds": "중식"
56 + },
57 + "잡채밥": {
58 + "price": 7000,
59 + "shape": "밥",
60 + "kinds": "중식"
61 + },
62 + "제육덮밥": {
63 + "price": 7000,
64 + "shape": "밥",
65 + "kinds": "한식"
66 + },
67 + "오징어덮밥": {
68 + "price": 7000,
69 + "shape": "밥",
70 + "kinds": "한식"
71 + },
72 + "오므라이스": {
73 + "price": 7000,
74 + "shape": "밥",
75 + "kinds": "한식"
76 + },
77 + "새우볶음밥": {
78 + "price": 7000,
79 + "shape": "밥",
80 + "kinds": "한식"
81 + },
82 + "김치볶음밥": {
83 + "price": 7000,
84 + "shape": "밥",
85 + "kinds": "한식"
86 + },
87 + "소고기덮밥": {
88 + "price": 8000,
89 + "shape": "밥",
90 + "kinds": "한식"
91 + },
92 + "탕수육": {
93 + "price": 15000,
94 + "shape": "고기",
95 + "kinds": "중식"
96 + },
97 + "깐풍기": {
3 "price": 20000, 98 "price": 20000,
4 - "shape": "빵", 99 + "shape": "고기",
5 - "kinds": "양식" 100 + "kinds": "중식"
101 + },
102 + "난자완스": {
103 + "price": 20000,
104 + "shape": "고기",
105 + "kinds": "중식"
106 + },
107 + "깐쇼새우": {
108 + "price": 20000,
109 + "shape": "고기",
110 + "kinds": "중식"
6 }, 111 },
7 - "도시락":{ 112 + "초밥": {
8 "price": 10000, 113 "price": 10000,
9 "shape": "밥", 114 "shape": "밥",
10 - "kinds": "한식" 115 + "kinds": "일식"
116 + },
117 + "회덮밥": {
118 + "price": 10000,
119 + "shape": "밥",
120 + "kinds": "일식"
11 }, 121 },
12 - "스파게티":{ 122 + "회": {
123 + "price": 20000,
124 + "shape": "고기",
125 + "kinds": "일식"
126 + },
127 + "라멘": {
13 "price": 10000, 128 "price": 10000,
14 "shape": "면", 129 "shape": "면",
15 - "kinds": "양식" 130 + "kinds": "일식"
131 + },
132 + "돈까스": {
133 + "price": 8000,
134 + "shape": "고기",
135 + "kinds": "일식"
16 }, 136 },
17 - "햄버거":{ 137 + "순대국밥": {
138 + "price": 6000,
139 + "shape": "밥",
140 + "kinds": "한식"
141 + },
142 + "뼈다귀해장국": {
143 + "price": 7000,
144 + "shape": "밥",
145 + "kinds": "한식"
146 + },
147 + "돼지국밥": {
148 + "price": 6000,
149 + "shape": "밥",
150 + "kinds": "한식"
151 + },
152 + "콩나물국밥": {
153 + "price": 5000,
154 + "shape": "밥",
155 + "kinds": "한식"
156 + },
157 + "굴국밥": {
158 + "price": 6000,
159 + "shape": "밥",
160 + "kinds": "한식"
161 + },
162 + "육개장": {
163 + "price": 8000,
164 + "shape": "밥",
165 + "kinds": "한식"
166 + },
167 + "라면": {
168 + "price": 1000,
169 + "shape": "면",
170 + "kinds": "한식"
171 + },
172 + "순두부찌개": {
173 + "price": 7000,
174 + "shape": "밥",
175 + "kinds": "한식"
176 + },
177 + "김치찌개": {
178 + "price": 7000,
179 + "shape": "밥",
180 + "kinds": "한식"
181 + },
182 + "생선구이": {
18 "price": 10000, 183 "price": 10000,
19 - "shape": "빵", 184 + "shape": "고기",
185 + "kinds": "한식"
186 + },
187 + "된장찌개": {
188 + "price": 7000,
189 + "shape": "밥",
190 + "kinds": "한식"
191 + },
192 + "청국장": {
193 + "price": 8000,
194 + "shape": "밥",
195 + "kinds": "한식"
196 + },
197 + "갈비탕": {
198 + "price": 8000,
199 + "shape": "밥",
200 + "kinds": "한식"
201 + },
202 + "내장탕": {
203 + "price": 8000,
204 + "shape": "밥",
205 + "kinds": "한식"
206 + },
207 + "곰탕": {
208 + "price": 8000,
209 + "shape": "밥",
210 + "kinds": "한식"
211 + },
212 + "부대찌개": {
213 + "price": 8000,
214 + "shape": "밥",
215 + "kinds": "한식"
216 + },
217 + "삼계탕": {
218 + "price": 15000,
219 + "shape": "밥",
220 + "kinds": "한식"
221 + },
222 + "오뎅탕": {
223 + "price": 5000,
224 + "shape": "밥",
225 + "kinds": "한식"
226 + },
227 + "참치마요": {
228 + "price": 4000,
229 + "shape": "밥",
230 + "kinds": "한식"
231 + },
232 + "치킨마요": {
233 + "price": 4000,
234 + "shape": "밥",
235 + "kinds": "한식"
236 + },
237 + "스팸마요": {
238 + "price": 4000,
239 + "shape": "밥",
240 + "kinds": "한식"
241 + },
242 + "떡볶이": {
243 + "price": 5000,
244 + "shape": "밥",
245 + "kinds": "한식"
246 + },
247 + "순대": {
248 + "price": 5000,
249 + "shape": "고기",
250 + "kinds": "한식"
251 + },
252 + "치킨": {
253 + "price": 20000,
254 + "shape": "고기",
20 "kinds": "양식" 255 "kinds": "양식"
21 } 256 }
257 +
258 +
259 +
260 +
22 } 261 }
......
...@@ -88,7 +88,8 @@ ...@@ -88,7 +88,8 @@
88 <ul class="nav navbar-nav menu_nav justify-content-center"> 88 <ul class="nav navbar-nav menu_nav justify-content-center">
89 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> 89 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
90 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> 90 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
91 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a> 91 + <li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
92 + <li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
92 </ul> 93 </ul>
93 <ul class="nav navbar-nav navbar-right"> 94 <ul class="nav navbar-nav navbar-right">
94 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li> 95 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 <link rel="icon" href="img/favicon.png" type="image/png"> 7 <link rel="icon" href="img/favicon.png" type="image/png">
8 - <title>Occupy Business</title> 8 + <title>음식 추천 웹사이트 이름</title>
9 <!-- Bootstrap CSS --> 9 <!-- Bootstrap CSS -->
10 <link rel="stylesheet" href="css/bootstrap.css"> 10 <link rel="stylesheet" href="css/bootstrap.css">
11 <link rel="stylesheet" href="vendors/linericon/style.css"> 11 <link rel="stylesheet" href="vendors/linericon/style.css">
...@@ -20,114 +20,53 @@ ...@@ -20,114 +20,53 @@
20 <link rel="stylesheet" href="css/responsive.css"> 20 <link rel="stylesheet" href="css/responsive.css">
21 </head> 21 </head>
22 <body> 22 <body>
23 -
24 - <!--================Header Menu Area =================-->
25 - <header class="header_area">
26 - <div class="main_menu">
27 - <nav class="navbar navbar-expand-lg navbar-light">
28 - <div class="container box_1620">
29 - <!-- Brand and toggle get grouped for better mobile display -->
30 - <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
31 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
32 - <span class="icon-bar"></span>
33 - <span class="icon-bar"></span>
34 - <span class="icon-bar"></span>
35 - </button>
36 - <!-- Collect the nav links, forms, and other content for toggling -->
37 - <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
38 - <ul class="nav navbar-nav menu_nav justify-content-center">
39 - <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
40 - <li class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>
41 - <li class="nav-item"><a class="nav-link" href="service.html">Services</a>
42 - <li class="nav-item submenu dropdown">
43 - <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
44 - <ul class="dropdown-menu">
45 - <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a>
46 - <li class="nav-item"><a class="nav-link" href="portfolio-details.html">Portfolio Details</a>
47 - <li class="nav-item"><a class="nav-link" href="elements.html">Elements</a></li>
48 - </ul>
49 - </li>
50 - <li class="nav-item submenu dropdown active">
51 - <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
52 - <ul class="dropdown-menu">
53 - <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
54 - <li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
55 - </ul>
56 - </li>
57 23
58 - <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li> 24 + <!--================Header Menu Area =================-->
59 - </ul> 25 + <header class="header_area">
60 - <ul class="nav navbar-nav navbar-right"> 26 + <div class="main_menu">
61 - <li class="nav-item"><a href="#"><i class="fa fa-facebook"></i></a></li> 27 + <nav class="navbar navbar-expand-lg navbar-light">
62 - <li class="nav-item"><a href="#"><i class="fa fa-twitter"></i></a></li> 28 + <div class="container box_1620">
63 - <li class="nav-item"><a href="#"><i class="fa fa-dribbble"></i></a></li> 29 + <!-- Brand and toggle get grouped for better mobile display -->
64 - <li class="nav-item"><a href="#"><i class="fa fa-behance"></i></a></li> 30 + <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
65 - <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li> 31 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
66 - </ul> 32 + <span class="icon-bar"></span>
67 - </div> 33 + <span class="icon-bar"></span>
68 - </div> 34 + <span class="icon-bar"></span>
69 - </nav> 35 + </button>
70 - </div> 36 + <!-- Collect the nav links, forms, and other content for toggling -->
71 - </header> 37 + <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
72 - <!--================Header Menu Area =================--> 38 + <ul class="nav navbar-nav menu_nav justify-content-center">
73 - 39 + <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
74 - <!--================Home Banner Area =================--> 40 + <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정-->
75 - <section class="home_banner_area"> 41 + <li class="nav-item"><a class="nav-link" href="service.html">추천</a>
76 - <div class="swiper-container"> 42 + <li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
77 - <div class="swiper-wrapper"> 43 + </ul>
78 - <div class="swiper-slide"><img src="img/slider/slider-2.jpg" alt=""> 44 + <ul class="nav navbar-nav navbar-right">
79 - <div class="slider_text_inner"> 45 + <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
80 - <div class="container"> 46 + </ul>
81 - <div class="row"> 47 + </div>
82 - <div class="col-lg-7"> 48 + </div>
83 - <div class="slider_text"> 49 + </nav>
84 - <h2>We Combine <br />Business with Finance</h2> 50 + </div>
85 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 51 + </header>
86 - <a class="banner_btn" href="#">Explore Us</a> 52 + <!--================Header Menu Area =================-->
87 - <a class="banner_btn2" href="#">Get Free Quote</a> 53 +
88 - </div> 54 + <!--================Home Banner Area =================-->
89 - </div> 55 + <section class="banner_area">
90 - </div> 56 + <div class="banner_inner d-flex align-items-center">
91 - </div> 57 + <div class="container">
92 - </div> 58 + <div class="banner_content">
93 - </div> 59 + <h2>지도</h2>
94 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> 60 + <div class="page_link">
95 - <div class="slider_text_inner"> 61 + <a href="index.html">Home</a>
96 - <div class="container"> 62 + <a href="about-us.html">지도</a>
97 - <div class="row"> 63 + </div>
98 - <div class="col-lg-7"> 64 + </div>
99 - <div class="slider_text"> 65 + </div>
100 - <h2>We Combine <br />Business with Finance</h2> 66 + </div>
101 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 67 + </section>
102 - <a class="banner_btn" href="#">Explore Us</a> 68 + <!--================End Home Banner Area =================-->
103 - <a class="banner_btn2" href="#">Get Free Quote</a> 69 +
104 - </div>
105 - </div>
106 - </div>
107 - </div>
108 - </div>
109 - </div>
110 - <div class="swiper-slide"><img src="img/slider/slider-2.jpg" alt="">
111 - <div class="slider_text_inner">
112 - <div class="container">
113 - <div class="row">
114 - <div class="col-lg-7">
115 - <div class="slider_text">
116 - <h2>We Combine <br />Business with Finance</h2>
117 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
118 - <a class="banner_btn" href="#">Explore Us</a>
119 - <a class="banner_btn2" href="#">Get Free Quote</a>
120 - </div>
121 - </div>
122 - </div>
123 - </div>
124 - </div>
125 - </div>
126 - </div>
127 - </div>
128 - </section>
129 - <!--================End Home Banner Area =================-->
130 -
131 <!--================Blog Categorie Area =================--> 70 <!--================Blog Categorie Area =================-->
132 <section class="blog_categorie_area"> 71 <section class="blog_categorie_area">
133 <div class="container"> 72 <div class="container">
...@@ -172,7 +111,7 @@ ...@@ -172,7 +111,7 @@
172 </div> 111 </div>
173 </section> 112 </section>
174 <!--================Blog Categorie Area =================--> 113 <!--================Blog Categorie Area =================-->
175 - 114 +
176 <!--================Blog Area =================--> 115 <!--================Blog Area =================-->
177 <section class="blog_area"> 116 <section class="blog_area">
178 <div class="container"> 117 <div class="container">
...@@ -448,7 +387,7 @@ ...@@ -448,7 +387,7 @@
448 <p>Adventure</p> 387 <p>Adventure</p>
449 <p>44</p> 388 <p>44</p>
450 </a> 389 </a>
451 - </li> 390 + </li>
452 </ul> 391 </ul>
453 <div class="br"></div> 392 <div class="br"></div>
454 </aside> 393 </aside>
...@@ -466,9 +405,9 @@ ...@@ -466,9 +405,9 @@
466 <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Enter email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email'"> 405 <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Enter email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email'">
467 </div> 406 </div>
468 <a href="#" class="bbtns">Subcribe</a> 407 <a href="#" class="bbtns">Subcribe</a>
469 - </div> 408 + </div>
470 - <p class="text-bottom">You can unsubscribe at any time</p> 409 + <p class="text-bottom">You can unsubscribe at any time</p>
471 - <div class="br"></div> 410 + <div class="br"></div>
472 </aside> 411 </aside>
473 <aside class="single-sidebar-widget tag_cloud_widget"> 412 <aside class="single-sidebar-widget tag_cloud_widget">
474 <h4 class="widget_title">Tag Clouds</h4> 413 <h4 class="widget_title">Tag Clouds</h4>
...@@ -493,94 +432,48 @@ ...@@ -493,94 +432,48 @@
493 </div> 432 </div>
494 </section> 433 </section>
495 <!--================Blog Area =================--> 434 <!--================Blog Area =================-->
496 - 435 +
497 - <!--================ start footer Area =================--> 436 + <!--================ start footer Area =================-->
498 <footer class="footer-area"> 437 <footer class="footer-area">
499 <div class="container"> 438 <div class="container">
500 <div class="row"> 439 <div class="row">
501 <div class="col-lg-3 col-md-6 col-sm-6"> 440 <div class="col-lg-3 col-md-6 col-sm-6">
502 <div class="single-footer-widget"> 441 <div class="single-footer-widget">
503 - <h6 class="footer_title">About Biznance</h6> 442 + <h6 class="footer_title">여기는 설명쓰자</h6>
504 - <p>The world has become so fast paced that people don’t want to stand by reading a page of information, they would much rather look at a presentation and understand the message. It has come to a point where images and videos are</p> 443 + <p>아하하하핳ㅎ</p>
505 </div> 444 </div>
506 </div> 445 </div>
507 <div class="col-lg-3 col-md-6 col-sm-6"> 446 <div class="col-lg-3 col-md-6 col-sm-6">
508 <div class="single-footer-widget"> 447 <div class="single-footer-widget">
509 - <h6 class="footer_title">Navigation Links</h6> 448 + <h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
510 <div class="row"> 449 <div class="row">
511 <div class="col-4"> 450 <div class="col-4">
512 <ul class="list"> 451 <ul class="list">
513 - <li><a href="#">Home</a></li> 452 + <li><a href="#">1</a></li>
514 - <li><a href="#">Feature</a></li> 453 + <li><a href="#">2</a></li>
515 - <li><a href="#">Services</a></li>
516 - <li><a href="#">Portfolio</a></li>
517 </ul> 454 </ul>
518 </div> 455 </div>
519 - <div class="col-4">
520 - <ul class="list">
521 - <li><a href="#">Team</a></li>
522 - <li><a href="#">Pricing</a></li>
523 - <li><a href="#">Blog</a></li>
524 - <li><a href="#">Contact</a></li>
525 - </ul>
526 - </div>
527 - </div>
528 - </div>
529 - </div>
530 - <div class="col-lg-3 col-md-6 col-sm-6">
531 - <div class="single-footer-widget">
532 - <h6 class="footer_title">Newsletter</h6>
533 - <p>For business professionals caught between high OEM price and mediocre print and graphic output, </p>
534 - <div id="mc_embed_signup">
535 - <form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01" method="get" class="subscribe_form relative">
536 - <div class="input-group d-flex flex-row">
537 - <input name="EMAIL" placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address '" required="" type="email">
538 - <button class="btn sub-btn"><span class="lnr lnr-location"></span></button>
539 - </div>
540 - <div class="mt-10 info"></div>
541 - </form>
542 </div> 456 </div>
543 </div> 457 </div>
544 </div> 458 </div>
545 - <div class="col-lg-3 col-md-6 col-sm-6">
546 - <div class="single-footer-widget instafeed">
547 - <h6 class="footer_title">InstaFeed</h6>
548 - <ul class="list instafeed d-flex flex-wrap">
549 - <li><img src="img/instagram/Image-01.jpg" alt=""></li>
550 - <li><img src="img/instagram/Image-02.jpg" alt=""></li>
551 - <li><img src="img/instagram/Image-03.jpg" alt=""></li>
552 - <li><img src="img/instagram/Image-04.jpg" alt=""></li>
553 - <li><img src="img/instagram/Image-05.jpg" alt=""></li>
554 - <li><img src="img/instagram/Image-06.jpg" alt=""></li>
555 - <li><img src="img/instagram/Image-07.jpg" alt=""></li>
556 - <li><img src="img/instagram/Image-08.jpg" alt=""></li>
557 - </ul>
558 - </div>
559 - </div>
560 </div> 459 </div>
561 - 460 +
562 </div> 461 </div>
563 <div class="border_line"></div> 462 <div class="border_line"></div>
564 <div class="container"> 463 <div class="container">
565 <div class="row footer-bottom d-flex justify-content-between align-items-center"> 464 <div class="row footer-bottom d-flex justify-content-between align-items-center">
566 - <p class="col-lg-8 col-md-8 footer-text m-0"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> 465 + <p class="col-lg-8 col-md-8 footer-text m-0">
567 -Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> 466 + 밑에 하고싶은 말 적는곳
568 -<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p> 467 + </p>
569 - <div class="col-lg-4 col-md-4 footer-social">
570 - <a href="#"><i class="fa fa-facebook"></i></a>
571 - <a href="#"><i class="fa fa-twitter"></i></a>
572 - <a href="#"><i class="fa fa-dribbble"></i></a>
573 - <a href="#"><i class="fa fa-behance"></i></a>
574 - </div>
575 </div> 468 </div>
576 </div> 469 </div>
577 </footer> 470 </footer>
578 <!--================ End footer Area =================--> 471 <!--================ End footer Area =================-->
579 - 472 +
580 - 473 +
581 - 474 +
582 - 475 +
583 - 476 +
584 <!-- Optional JavaScript --> 477 <!-- Optional JavaScript -->
585 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 478 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
586 <script src="js/jquery-3.2.1.min.js"></script> 479 <script src="js/jquery-3.2.1.min.js"></script>
...@@ -600,4 +493,4 @@ Copyright &copy;<script>document.write(new Date().getFullYear());</script> All r ...@@ -600,4 +493,4 @@ Copyright &copy;<script>document.write(new Date().getFullYear());</script> All r
600 <script src="vendors/swiper/js/swiper.min.js"></script> 493 <script src="vendors/swiper/js/swiper.min.js"></script>
601 <script src="js/theme.js"></script> 494 <script src="js/theme.js"></script>
602 </body> 495 </body>
603 -</html>
...\ No newline at end of file ...\ No newline at end of file
496 +</html>
......
...@@ -38,7 +38,8 @@ ...@@ -38,7 +38,8 @@
38 <ul class="nav navbar-nav menu_nav justify-content-center"> 38 <ul class="nav navbar-nav menu_nav justify-content-center">
39 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> 39 <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
40 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정--> 40 <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정-->
41 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a> 41 + <li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
42 + <li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
42 </ul> 43 </ul>
43 <ul class="nav navbar-nav navbar-right"> 44 <ul class="nav navbar-nav navbar-right">
44 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li> 45 <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
1 +.map_wrap, .map_wrap * {
2 + margin: 0;
3 + padding: 0;
4 + font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
5 + font-size: 12px;
6 +}
7 +
8 +.map_wrap a, .map_wrap a:hover, .map_wrap a:active {
9 + color: #000;
10 + text-decoration: none;
11 +}
12 +
13 +.map_wrap {
14 + position: relative;
15 + width: 100%;
16 + height: 500px;
17 +}
18 +
19 +#map {
20 + top: 0;
21 + left: 0;
22 + width: 100%;
23 + height: 100%;
24 + position: relative;
25 + overflow: hidden;
26 +}
27 +
28 +#menu_wrap {
29 + position: absolute;
30 + top: 0;
31 + left:0;
32 + bottom: 0;
33 + width: 250px;
34 + margin: 10px 0 30px 10px;
35 + padding: 5px;
36 + overflow-y: auto;
37 + background: rgba(255, 255, 255, 0.7);
38 + z-index: 1;
39 + font-size: 12px;
40 + border-radius: 10px;
41 +}
42 +
43 +.bg_white {
44 + background: #fff;
45 +}
46 +
47 +#menu_wrap hr {
48 + display: block;
49 + height: 1px;
50 + border: 0;
51 + border-top: 2px solid #5F5F5F;
52 + margin: 3px 0;
53 +}
54 +
55 +#menu_wrap .option {
56 + text-align: center;
57 +}
58 +
59 +#menu_wrap .option p {
60 + margin: 10px 0;
61 +}
62 +
63 +#menu_wrap .option button {
64 + margin-left: 5px;
65 +}
66 +
67 +#placesList li {
68 + list-style: none;
69 +}
70 +
71 +#placesList .item {
72 + position: relative;
73 + border-bottom: 1px solid #888;
74 + overflow: hidden;
75 + cursor: pointer;
76 + min-height: 65px;
77 +}
78 +
79 +#placesList .item span {
80 + display: block;
81 + margin-top: 4px;
82 +}
83 +
84 +#placesList .item h5, #placesList .item .info {
85 + text-overflow: ellipsis;
86 + overflow: hidden;
87 + white-space: nowrap;
88 +}
89 +
90 +#placesList .item .info {
91 + padding: 10px 0 10px 55px;
92 +}
93 +
94 +#placesList .info .gray {
95 + color: #8a8a8a;
96 +}
97 +
98 +#placesList .info .jibun {
99 + padding-left: 26px;
100 + background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;
101 +}
102 +
103 +#placesList .info .tel {
104 + color: #009900;
105 +}
106 +
107 +#placesList .item .markerbg {
108 + float: left;
109 + position: absolute;
110 + width: 36px;
111 + height: 37px;
112 + margin: 10px 0 0 10px;
113 + background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;
114 +}
115 +
116 +#placesList .item .marker_1 {
117 + background-position: 0 -10px;
118 +}
119 +
120 +#placesList .item .marker_2 {
121 + background-position: 0 -56px;
122 +}
123 +
124 +#placesList .item .marker_3 {
125 + background-position: 0 -102px
126 +}
127 +
128 +#placesList .item .marker_4 {
129 + background-position: 0 -148px;
130 +}
131 +
132 +#placesList .item .marker_5 {
133 + background-position: 0 -194px;
134 +}
135 +
136 +#placesList .item .marker_6 {
137 + background-position: 0 -240px;
138 +}
139 +
140 +#placesList .item .marker_7 {
141 + background-position: 0 -286px;
142 +}
143 +
144 +#placesList .item .marker_8 {
145 + background-position: 0 -332px;
146 +}
147 +
148 +#placesList .item .marker_9 {
149 + background-position: 0 -378px;
150 +}
151 +
152 +#placesList .item .marker_10 {
153 + background-position: 0 -423px;
154 +}
155 +
156 +#placesList .item .marker_11 {
157 + background-position: 0 -470px;
158 +}
159 +
160 +#placesList .item .marker_12 {
161 + background-position: 0 -516px;
162 +}
163 +
164 +#placesList .item .marker_13 {
165 + background-position: 0 -562px;
166 +}
167 +
168 +#placesList .item .marker_14 {
169 + background-position: 0 -608px;
170 +}
171 +
172 +#placesList .item .marker_15 {
173 + background-position: 0 -654px;
174 +}
175 +
176 +#pagination {
177 + margin: 10px auto;
178 + text-align: center;
179 +}
180 +
181 +#pagination a {
182 + display: inline-block;
183 + margin-right: 10px;
184 +}
185 +
186 +#pagination .on {
187 + font-weight: bold;
188 + cursor: default;
189 + color: #777;
190 +}
1 -<!doctype html> 1 +<!DOCTYPE html>
2 -<html lang="en"> 2 +<html lang="en" dir="ltr">
3 - <head>
4 - <!-- Required meta tags -->
5 - <meta charset="utf-8">
6 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 - <link rel="icon" href="img/favicon.png" type="image/png">
8 - <title>음식 추천 웹사이트 이름</title>
9 - <!-- Bootstrap CSS -->
10 - <link rel="stylesheet" href="css/bootstrap.css">
11 - <link rel="stylesheet" href="vendors/linericon/style.css">
12 - <link rel="stylesheet" href="css/font-awesome.min.css">
13 - <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
14 - <link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
15 - <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
16 - <link rel="stylesheet" href="vendors/animate-css/animate.css">
17 - <link rel="stylesheet" href="vendors/swiper/css/swiper.min.css">
18 - <!-- main css -->
19 - <link rel="stylesheet" href="css/style.css">
20 - <link rel="stylesheet" href="css/responsive.css">
21 - </head>
22 - <body>
23 3
24 - <!--================Header Menu Area =================--> 4 +<head>
25 - <header class="header_area"> 5 + <meta charset="utf-8">
26 - <div class="main_menu"> 6 + <title>Test</title>
27 - <nav class="navbar navbar-expand-lg navbar-light"> 7 + <link rel="stylesheet" href="/../style.css">
28 - <div class="container box_1620"> 8 +</head>
29 - <!-- Brand and toggle get grouped for better mobile display -->
30 - <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
31 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
32 - <span class="icon-bar"></span>
33 - <span class="icon-bar"></span>
34 - <span class="icon-bar"></span>
35 - </button>
36 - <!-- Collect the nav links, forms, and other content for toggling -->
37 - <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
38 - <ul class="nav navbar-nav menu_nav justify-content-center">
39 - <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
40 - <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
41 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a>
42 - </ul>
43 - <ul class="nav navbar-nav navbar-right">
44 - <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
45 - </ul>
46 - </div>
47 - </div>
48 - </nav>
49 - </div>
50 - </header>
51 - <!--================Header Menu Area =================-->
52 9
53 - <!--================Home Banner Area =================--> 10 +<body>
54 - <section class="home_banner_area"> 11 + <h1><a href="/food">점심 메뉴 정하기</a></h1>
55 - <div class="swiper-container">
56 - <div class="swiper-wrapper">
57 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
58 - <div class="slider_text_inner">
59 - <div class="container">
60 - <div class="row">
61 - <div class="col-lg-7">
62 - <div class="slider_text">
63 - <h2>음식 추천 설명 <br />사진은 나중에 바꾸자</h2>
64 - </div>
65 - </div>
66 - </div>
67 - </div>
68 - </div>
69 - </div>
70 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
71 - <div class="slider_text_inner">
72 - <div class="container">
73 - <div class="row">
74 - <div class="col-lg-7">
75 - <div class="slider_text">
76 - <h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
77 - </div>
78 - </div>
79 - </div>
80 - </div>
81 - </div>
82 - </div>
83 - <div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
84 - <div class="slider_text_inner">
85 - <div class="container">
86 - <div class="row">
87 - <div class="col-lg-7">
88 - <div class="slider_text">
89 - <h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
90 - </div>
91 - </div>
92 - </div>
93 - </div>
94 - </div>
95 - </div>
96 - </div>
97 - </div>
98 - </section>
99 - <!--================End Home Banner Area =================-->
100 12
101 - <!--================ start footer Area =================--> 13 + <div class="grid">
102 - <footer class="footer-area"> 14 + <ul>
103 - <div class="container"> 15 + <il><a href="/food/search">검색</a></il><br>
104 - <div class="row"> 16 + <il><a href="/food/recommendation">추천</a></il>
105 - <div class="col-lg-3 col-md-6 col-sm-6"> 17 + </ul>
106 - <div class="single-footer-widget">
107 - <h6 class="footer_title">여기는 설명쓰자</h6>
108 - <p>아하하하핳ㅎ</p>
109 - </div>
110 - </div>
111 - <div class="col-lg-3 col-md-6 col-sm-6">
112 - <div class="single-footer-widget">
113 - <h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
114 - <div class="row">
115 - <div class="col-4">
116 - <ul class="list">
117 - <li><a href="#">1</a></li>
118 - <li><a href="#">2</a></li>
119 - </ul>
120 - </div>
121 - </div>
122 - </div>
123 - </div>
124 - </div>
125 18
126 - </div>
127 - <div class="border_line"></div>
128 - <div class="container">
129 - <div class="row footer-bottom d-flex justify-content-between align-items-center">
130 - <p class="col-lg-8 col-md-8 footer-text m-0">
131 - 밑에 하고싶은 말 적는곳
132 - </p>
133 - </div>
134 - </div>
135 - </footer>
136 - <!--================ End footer Area =================-->
137 19
20 + <article class="">
21 + <h2>
22 + <%= title %>
23 + </h2>
24 + <p><%= description %></p>
25 + </article>
26 + </div class="grid">
138 27
28 +</body>
139 29
140 -
141 -
142 - <!-- Optional JavaScript -->
143 - <!-- jQuery first, then Popper.js, then Bootstrap JS -->
144 - <script src="js/jquery-3.2.1.min.js"></script>
145 - <script src="js/popper.js"></script>
146 - <script src="js/bootstrap.min.js"></script>
147 - <script src="js/stellar.js"></script>
148 - <script src="vendors/lightbox/simpleLightbox.min.js"></script>
149 - <script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
150 - <script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
151 - <script src="vendors/isotope/isotope-min.js"></script>
152 - <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
153 - <script src="js/jquery.ajaxchimp.min.js"></script>
154 - <script src="vendors/counter-up/jquery.waypoints.min.js"></script>
155 - <script src="vendors/counter-up/jquery.counterup.js"></script>
156 - <script src="js/mail-script.js"></script>
157 - <script src="vendors/popup/jquery.magnific-popup.min.js"></script>
158 - <script src="vendors/swiper/js/swiper.min.js"></script>
159 - <script src="js/theme.js"></script>
160 - </body>
161 </html> 30 </html>
......
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <link rel="stylesheet" href="/../map.css">
7 + <!-- <link rel="stylesheet" href="/../style.css"> -->
8 + <title>키워드로 장소검색하고 목록으로 표출하기</title>
9 +
10 +</head>
11 +
12 +<body>
13 + <h1><a href="/food">점심 메뉴 정하기</a></h1>
14 + <div class="grid">
15 + <ul>
16 + <il><a href="/food/search">검색</a></il><br>
17 + <il><a href="/food/recommendation">추천</a></il>
18 + </ul>
19 +
20 + <article>
21 + <h2>
22 + <%= title %>
23 + </h2>
24 + <form action='/food/search' method='post'>
25 + <p>
26 + 검색 :
27 + <input type="text" name="title" placeholder="검색">
28 + <input type="submit">
29 + </p>
30 + </form>
31 + </article>
32 + </div class="grid">
33 + <div class="map_wrap">
34 + <div id="map" ></div>
35 +
36 + <div id="menu_wrap" class="bg_white">
37 + <div class="option">
38 + <div>
39 + <form onsubmit="searchPlaces(); return false;">
40 + 키워드 : <input type="text" value='<%=searching%>' id="keyword" size="15">
41 + <button type="submit">검색하기</button>
42 + </form>
43 + </div>
44 + </div>
45 + <hr>
46 + <ul id="placesList"></ul>
47 + <div id="pagination"></div>
48 + </div>
49 + </div>
50 +
51 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a8a43eda451b054ac46a281a3db5d536&libraries=services"></script>
52 + <script>
53 + // 마커를 담을 배열입니다
54 + var markers = [];
55 +
56 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
57 + mapOption = {
58 + center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
59 + level: 3 // 지도의 확대 레벨
60 + };
61 +
62 + // 지도를 생성합니다
63 + var map = new kakao.maps.Map(mapContainer, mapOption);
64 +
65 + // 장소 검색 객체를 생성합니다
66 + var ps = new kakao.maps.services.Places();
67 +
68 + // 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
69 + var infowindow = new kakao.maps.InfoWindow({
70 + zIndex: 1
71 + });
72 +
73 + // 키워드로 장소를 검색합니다
74 + searchPlaces();
75 +
76 + // 키워드 검색을 요청하는 함수입니다
77 + function searchPlaces() {
78 +
79 + var keyword = document.getElementById('keyword').value;
80 +
81 + if (!keyword.replace(/^\s+|\s+$/g, '')) {
82 + alert('키워드를 입력해주세요!');
83 + return false;
84 + }
85 +
86 + // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
87 + ps.keywordSearch(keyword, placesSearchCB);
88 + }
89 +
90 + // 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
91 + function placesSearchCB(data, status, pagination) {
92 + if (status === kakao.maps.services.Status.OK) {
93 +
94 + // 정상적으로 검색이 완료됐으면
95 + // 검색 목록과 마커를 표출합니다
96 + displayPlaces(data);
97 +
98 + // 페이지 번호를 표출합니다
99 + displayPagination(pagination);
100 +
101 + } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
102 +
103 + alert('검색 결과가 존재하지 않습니다.');
104 + return;
105 +
106 + } else if (status === kakao.maps.services.Status.ERROR) {
107 +
108 + alert('검색 결과 중 오류가 발생했습니다.');
109 + return;
110 +
111 + }
112 + }
113 +
114 + // 검색 결과 목록과 마커를 표출하는 함수입니다
115 + function displayPlaces(places) {
116 +
117 + var listEl = document.getElementById('placesList'),
118 + menuEl = document.getElementById('menu_wrap'),
119 + fragment = document.createDocumentFragment(),
120 + bounds = new kakao.maps.LatLngBounds(),
121 + listStr = '';
122 +
123 + // 검색 결과 목록에 추가된 항목들을 제거합니다
124 + removeAllChildNods(listEl);
125 +
126 + // 지도에 표시되고 있는 마커를 제거합니다
127 + removeMarker();
128 +
129 + for (var i = 0; i < places.length; i++) {
130 +
131 + // 마커를 생성하고 지도에 표시합니다
132 + var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
133 + marker = addMarker(placePosition, i),
134 + itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
135 +
136 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
137 + // LatLngBounds 객체에 좌표를 추가합니다
138 + bounds.extend(placePosition);
139 +
140 + // 마커와 검색결과 항목에 mouseover 했을때
141 + // 해당 장소에 인포윈도우에 장소명을 표시합니다
142 + // mouseout 했을 때는 인포윈도우를 닫습니다
143 + (function(marker, title) {
144 + kakao.maps.event.addListener(marker, 'mouseover', function() {
145 + displayInfowindow(marker, title);
146 + });
147 +
148 + kakao.maps.event.addListener(marker, 'mouseout', function() {
149 + infowindow.close();
150 + });
151 +
152 + itemEl.onmouseover = function() {
153 + displayInfowindow(marker, title);
154 + };
155 +
156 + itemEl.onmouseout = function() {
157 + infowindow.close();
158 + };
159 + })(marker, places[i].place_name);
160 +
161 + fragment.appendChild(itemEl);
162 + }
163 +
164 + // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
165 + listEl.appendChild(fragment);
166 + menuEl.scrollTop = 0;
167 +
168 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
169 + map.setBounds(bounds);
170 + }
171 +
172 + // 검색결과 항목을 Element로 반환하는 함수입니다
173 + function getListItem(index, places) {
174 +
175 + var el = document.createElement('li'),
176 + itemStr = '<span class="markerbg marker_' + (index + 1) + '"></span>' +
177 + '<div class="info">' +
178 + ' <h5>' + places.place_name + '</h5>';
179 +
180 + if (places.road_address_name) {
181 + itemStr += ' <span>' + places.road_address_name + '</span>' +
182 + ' <span class="jibun gray">' + places.address_name + '</span>';
183 + } else {
184 + itemStr += ' <span>' + places.address_name + '</span>';
185 + }
186 +
187 + itemStr += ' <span class="tel">' + places.phone + '</span>' +
188 + '</div>';
189 +
190 + el.innerHTML = itemStr;
191 + el.className = 'item';
192 +
193 + return el;
194 + }
195 +
196 + // 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
197 + function addMarker(position, idx, title) {
198 + var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
199 + imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
200 + imgOptions = {
201 + spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
202 + spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
203 + offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
204 + },
205 + markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
206 + marker = new kakao.maps.Marker({
207 + position: position, // 마커의 위치
208 + image: markerImage
209 + });
210 +
211 + marker.setMap(map); // 지도 위에 마커를 표출합니다
212 + markers.push(marker); // 배열에 생성된 마커를 추가합니다
213 +
214 + return marker;
215 + }
216 +
217 + // 지도 위에 표시되고 있는 마커를 모두 제거합니다
218 + function removeMarker() {
219 + for (var i = 0; i < markers.length; i++) {
220 + markers[i].setMap(null);
221 + }
222 + markers = [];
223 + }
224 +
225 + // 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
226 + function displayPagination(pagination) {
227 + var paginationEl = document.getElementById('pagination'),
228 + fragment = document.createDocumentFragment(),
229 + i;
230 +
231 + // 기존에 추가된 페이지번호를 삭제합니다
232 + while (paginationEl.hasChildNodes()) {
233 + paginationEl.removeChild(paginationEl.lastChild);
234 + }
235 +
236 + for (i = 1; i <= pagination.last; i++) {
237 + var el = document.createElement('a');
238 + el.href = "#";
239 + el.innerHTML = i;
240 +
241 + if (i === pagination.current) {
242 + el.className = 'on';
243 + } else {
244 + el.onclick = (function(i) {
245 + return function() {
246 + pagination.gotoPage(i);
247 + }
248 + })(i);
249 + }
250 +
251 + fragment.appendChild(el);
252 + }
253 + paginationEl.appendChild(fragment);
254 + }
255 +
256 + // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
257 + // 인포윈도우에 장소명을 표시합니다
258 + function displayInfowindow(marker, title) {
259 + var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
260 +
261 + infowindow.setContent(content);
262 + infowindow.open(map, marker);
263 + }
264 +
265 + // 검색결과 목록의 자식 Element를 제거하는 함수입니다
266 + function removeAllChildNods(el) {
267 + while (el.hasChildNodes()) {
268 + el.removeChild(el.lastChild);
269 + }
270 + }
271 + </script>
272 +</body>
273 +
274 +</html>
1 -<!--
2 <!DOCTYPE html> 1 <!DOCTYPE html>
3 <html lang="en" dir="ltr"> 2 <html lang="en" dir="ltr">
4 3
5 <head> 4 <head>
6 <meta charset="utf-8"> 5 <meta charset="utf-8">
7 <link rel="stylesheet" href="/../style.css"> 6 <link rel="stylesheet" href="/../style.css">
8 -<title>Test</title> 7 + <title>Test</title>
8 +
9 +
9 </head> 10 </head>
10 11
11 <body> 12 <body>
...@@ -23,198 +24,58 @@ ...@@ -23,198 +24,58 @@
23 <%= title %> 24 <%= title %>
24 </h2> 25 </h2>
25 <p><%= description %></p> 26 <p><%= description %></p>
26 - <form action='/food/recommendation' method='post'> 27 +
28 + <button id='check_all'>모두 선택</button>
29 + <button id='uncheck_all'>모두 해제</button>
30 + <button id='count_check'>체크 수 확인</button>
27 31
32 + <form action='/food/recommendation' method='post'>
28 <p> 33 <p>
29 가격 : 34 가격 :
30 - <input type="text" name="price" placeholder="price"> 35 + <input type="number" name="price" placeholder="price">
31 </p> 36 </p>
32 <p> 37 <p>
33 - 형태 : 38 + <input type="checkbox" name="shape" value="밥">밥</input>
34 - <input type="text" name="shape" placeholder="밥, 빵, 면"> 39 + <input type="checkbox" name="shape" value="면">면</input>
40 + <input type="checkbox" name="shape" value="고기">고기</input>
41 + <input type="checkbox" name="shape" value="기타">기타</input>
35 </p> 42 </p>
36 <p> 43 <p>
37 - 종류 : 44 + <input type="checkbox" name="kinds" value="한식">한식</input>
38 - <input type="text" name="kinds" placeholder="한식, 중식, 일식, 양식"> 45 + <input type="checkbox" name="kinds" value="중식">중식</input>
46 + <input type="checkbox" name="kinds" value="양식">양식</input>
47 + <input type="checkbox" name="kinds" value="일식">일식</input>
39 </p> 48 </p>
40 <p> 49 <p>
41 <input type="submit"> 50 <input type="submit">
42 </p> 51 </p>
43 -
44 </form> 52 </form>
53 +
54 +
55 + <script src="//code.jquery.com/jquery.min.js"></script>
56 + <script>
57 + $("#check_all").click(function() {
58 + $("input[name=kinds]:checkbox").prop("checked", "checked");
59 + });
60 + $("#uncheck_all").click(function() {
61 + $("input[name=kinds]:checkbox").removeProp("checked");
62 + });
63 + $("#count_check").click(function() {
64 + alert($("input[name=kinds]:checkbox:checked").length);
65 + });
66 + $("#check_all").click(function() {
67 + $("input[name=shape]:checkbox").prop("checked", "checked");
68 + });
69 + $("#uncheck_all").click(function() {
70 + $("input[name=shape]:checkbox").removeProp("checked");
71 + });
72 + $("#count_check").click(function() {
73 + alert($("input[name=shape]:checkbox:checked").length);
74 + });
75 + </script>
45 </article> 76 </article>
46 </div class="grid"> 77 </div class="grid">
47 78
48 </body> 79 </body>
49 80
50 -</html> -->
51 -<!doctype html>
52 -<html lang="en">
53 - <head>
54 - <!-- Required meta tags -->
55 - <meta charset="utf-8">
56 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
57 - <link rel="icon" href="img/favicon.png" type="image/png">
58 - <title>음식 추천 웹사이트 이름</title>
59 - <!-- Bootstrap CSS -->
60 - <link rel="stylesheet" href="css/bootstrap.css">
61 - <link rel="stylesheet" href="vendors/linericon/style.css">
62 - <link rel="stylesheet" href="css/font-awesome.min.css">
63 - <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
64 - <link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
65 - <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
66 - <link rel="stylesheet" href="vendors/animate-css/animate.css">
67 - <link rel="stylesheet" href="vendors/swiper/css/swiper.min.css">
68 - <!-- main css -->
69 - <link rel="stylesheet" href="css/style.css">
70 - <link rel="stylesheet" href="css/responsive.css">
71 - </head>
72 - <body>
73 -
74 - <!--================Header Menu Area =================-->
75 - <header class="header_area">
76 - <div class="main_menu">
77 - <nav class="navbar navbar-expand-lg navbar-light">
78 - <div class="container box_1620">
79 - <!-- Brand and toggle get grouped for better mobile display -->
80 - <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
81 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
82 - <span class="icon-bar"></span>
83 - <span class="icon-bar"></span>
84 - <span class="icon-bar"></span>
85 - </button>
86 - <!-- Collect the nav links, forms, and other content for toggling -->
87 - <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
88 - <ul class="nav navbar-nav menu_nav justify-content-center">
89 - <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
90 - <li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
91 - <li class="nav-item"><a class="nav-link" href="service.html">추천</a>
92 - </ul>
93 - <ul class="nav navbar-nav navbar-right">
94 - <li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
95 - </ul>
96 - </div>
97 - </div>
98 - </nav>
99 - </div>
100 - </header>
101 - <!--================Header Menu Area =================-->
102 -
103 - <!--================Mission Area =================-->
104 - <section class="mission_area">
105 - <div class="row m0">
106 - <div class="col-lg-6 p0">
107 - <div class="left_img"><img src="img/mission-1.jpg" alt=""></div>
108 - </div>
109 - <div class="col-lg-6 p0">
110 - <div class="mission_slider owl-carousel">
111 - <div class="item">
112 - <div class="mission_text">
113 - <h4>Road to Success</h4>
114 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
115 - </div>
116 - <div class="mission_text">
117 - <h4>About Our Mission</h4>
118 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
119 - </div>
120 - </div>
121 - <div class="item">
122 - <div class="mission_text">
123 - <h4>Road to Success</h4>
124 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
125 - </div>
126 - <div class="mission_text">
127 - <h4>About Our Mission</h4>
128 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
129 - </div>
130 - </div>
131 - <div class="item">
132 - <div class="mission_text">
133 - <h4>About Our Mission</h4>
134 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
135 - </div>
136 - <div class="mission_text">
137 - <h4>Road to Success</h4>
138 - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
139 - </div>
140 - </div>
141 - </div>
142 - </div>
143 - </div>
144 - </section>
145 - <!--================End Mission Area =================-->
146 -
147 -
148 - <!--================Project Details Area =================-->
149 - <section class="project_know_area p_120">
150 - <div class="container">
151 - <div class="project_know_inner text-center">
152 - <h3>Get to Know Project Estimate?</h3>
153 - <p>There is a moment in the life of any aspiring astronomer that it is time to buy that first telescope. It’s exciting to think about setting up your own viewing station whether that is on the deck</p>
154 - <a class="white_btn" href="#">Get Free Estimate</a>
155 - </div>
156 - </div>
157 - </section>
158 - <!--================End Project Details Area =================-->
159 -
160 - <!--================ start footer Area =================-->
161 - <footer class="footer-area">
162 - <div class="container">
163 - <div class="row">
164 - <div class="col-lg-3 col-md-6 col-sm-6">
165 - <div class="single-footer-widget">
166 - <h6 class="footer_title">여기는 설명쓰자</h6>
167 - <p>아하하하핳ㅎ</p>
168 - </div>
169 - </div>
170 - <div class="col-lg-3 col-md-6 col-sm-6">
171 - <div class="single-footer-widget">
172 - <h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
173 - <div class="row">
174 - <div class="col-4">
175 - <ul class="list">
176 - <li><a href="#">1</a></li>
177 - <li><a href="#">2</a></li>
178 - </ul>
179 - </div>
180 - </div>
181 - </div>
182 - </div>
183 - </div>
184 -
185 - </div>
186 - <div class="border_line"></div>
187 - <div class="container">
188 - <div class="row footer-bottom d-flex justify-content-between align-items-center">
189 - <p class="col-lg-8 col-md-8 footer-text m-0">
190 - 밑에 하고싶은 말 적는곳
191 - </p>
192 - </div>
193 - </div>
194 - </footer>
195 - <!--================ End footer Area =================-->
196 -
197 -
198 -
199 -
200 -
201 - <!-- Optional JavaScript -->
202 - <!-- jQuery first, then Popper.js, then Bootstrap JS -->
203 - <script src="js/jquery-3.2.1.min.js"></script>
204 - <script src="js/popper.js"></script>
205 - <script src="js/bootstrap.min.js"></script>
206 - <script src="js/stellar.js"></script>
207 - <script src="vendors/lightbox/simpleLightbox.min.js"></script>
208 - <script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
209 - <script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
210 - <script src="vendors/isotope/isotope-min.js"></script>
211 - <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
212 - <script src="js/jquery.ajaxchimp.min.js"></script>
213 - <script src="vendors/counter-up/jquery.waypoints.min.js"></script>
214 - <script src="vendors/counter-up/jquery.counterup.js"></script>
215 - <script src="js/mail-script.js"></script>
216 - <script src="vendors/popup/jquery.magnific-popup.min.js"></script>
217 - <script src="vendors/swiper/js/swiper.min.js"></script>
218 - <script src="js/theme.js"></script>
219 - </body>
220 </html> 81 </html>
......