김동진 / HealthProtector

Go to a project
Toggle navigation Toggle navigation pinning
양효빈
3e26c083 2 parents 2b22d890 476b59b9

countKcal 페이지 효과 추가

Expand all
Inline Side-by-side
Showing 11 changed files with 96 additions and 99 deletions
...@@ -117,7 +117,3 @@ dist ...@@ -117,7 +117,3 @@ dist
117 117
118 118
119 package-lock.json 119 package-lock.json
120 -# db
121 -lib/db.js
122 -lib/appkey.js
123 -food.sql
...\ No newline at end of file ...\ No newline at end of file
......
1 +var key = {
2 + kakaomapKey : "900b1f5dd2fee32f1ee91d18266bbfe4",
3 + kakaoRestKey : "ab6b32bc5d4705f517ee753c63be465c",
4 +};
5 +
6 +module.exports = key; //key을 바깥에서 사용할 수 있도록 exports한다.
This diff is collapsed. Click to expand it.
1 +var mysql = require('mysql');
2 +var db = mysql.createConnection({
3 + host: "myfooddb.czvswclxcy8d.us-east-1.rds.amazonaws.com",
4 + user: "user",
5 + password: "user1234",
6 + port: 3306,
7 + database : 'food'
8 +
9 +});
10 +db.connect();
11 +module.exports = db;
...\ No newline at end of file ...\ No newline at end of file
...@@ -18,6 +18,50 @@ exports.foodInfo = function(request, response){ ...@@ -18,6 +18,50 @@ exports.foodInfo = function(request, response){
18 response.end(html); 18 response.end(html);
19 19
20 } 20 }
21 +function foodTable(foodInfo, list, num){
22 + var tag = '';
23 + tag += `<table`;
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 +
21 exports.foodInfo_search = function(request, response){ 65 exports.foodInfo_search = function(request, response){
22 var body = ''; 66 var body = '';
23 request.on('data', function(data){ 67 request.on('data', function(data){
...@@ -45,23 +89,13 @@ exports.foodInfo_search = function(request, response){ ...@@ -45,23 +89,13 @@ exports.foodInfo_search = function(request, response){
45 <h2>${title}</h2> 89 <h2>${title}</h2>
46 <p>${description}</p> 90 <p>${description}</p>
47 <form action="/foodInfo_search" method="post"> 91 <form action="/foodInfo_search" method="post">
48 - <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off"> 92 + <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "${search}" autocomplete = "off">
49 <button type = "submit" name = "click">검색</button> 93 <button type = "submit" name = "click">검색</button>
50 </form> 94 </form>
51 <br> 95 <br>
52 ${search}(으)로 검색된 결과 : ${num}개 96 ${search}(으)로 검색된 결과 : ${num}개
53 - <form action="/foodInfo_chooseAdd_process" method="post"> 97 + ${foodTable(foodInfo, list, num)}
54 - ${template.foodTable(foodInfo, list, num)} 98 +
55 - <button type = "submit" name = "chooseAdd">추가하기</button>
56 - </form>
57 - <style>
58 - table{
59 - border-collapse: collapse;
60 - }
61 - td{
62 - border:1px solid black;
63 - }
64 - </style>
65 `); 99 `);
66 response.writeHead(200); 100 response.writeHead(200);
67 response.end(html); 101 response.end(html);
......
1 -
2 var template = require('./template.js'); 1 var template = require('./template.js');
3 -
4 exports.home = function(request, response){ 2 exports.home = function(request, response){
5 var title = 'HealthProtector란?'; 3 var title = 'HealthProtector란?';
6 var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.'; 4 var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.';
7 var html = template.html(title,` 5 var html = template.html(title,`
6 +
8 <br><br><br> 7 <br><br><br>
9 8
10 <style> 9 <style>
11 @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); 10 @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
12 11
13 </style> 12 </style>
14 -
15 <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script> 13 <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
16 14
17 -
18 -
19 <style type="text/css"> 15 <style type="text/css">
20 div{ 16 div{
21 @import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap'); 17 @import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
...@@ -29,52 +25,48 @@ exports.home = function(request, response){ ...@@ -29,52 +25,48 @@ exports.home = function(request, response){
29 a:hover { text-decoration: none; } 25 a:hover { text-decoration: none; }
30 a:focus { text-decoration: none; } 26 a:focus { text-decoration: none; }
31 a:hover, a:active { text-decoration: none; } 27 a:hover, a:active { text-decoration: none; }
32 -
33 } 28 }
34 </div> 29 </div>
30 + </style>
31 +
35 32
36 - </style>
37 <div style= font-size:40px;background-image:url("https://source.unsplash.com/jFCViYFYcus");padding:50px;> 33 <div style= font-size:40px;background-image:url("https://source.unsplash.com/jFCViYFYcus");padding:50px;>
38 34
39 <h1 style=font-family: 'Do Hyeon', sans-serif;><a href="/"><font color="white">HealthProtector</font></a></h1> 35 <h1 style=font-family: 'Do Hyeon', sans-serif;><a href="/"><font color="white">HealthProtector</font></a></h1>
40 36
41 </div> 37 </div>
42 -
43 -
44 <div style= font-size:20px;text-align:left;width: 100%;float:left:> 38 <div style= font-size:20px;text-align:left;width: 100%;float:left:>
45 <h2><font color="black">&nbsp &nbsp &nbspOur Services</font></h2> 39 <h2><font color="black">&nbsp &nbsp &nbspOur Services</font></h2>
46 </div> 40 </div>
47 41
42 +
48 43
49 - <div style= width:31%;float:left;padding:5px;> 44 + <div style= width:30%;float:left;padding:5px;>
50 <div style="color : gray";> 45 <div style="color : gray";>
51 - <i class="fas fa-calculator fa-3x"></i> 46 + <i class="fas fa-calculator fa-3x"></i>
52 </div> 47 </div>
53 -
54 <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h2> 48 <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h2>
55 <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">나에게 맞는 일일 권장 섭취량(kcal)을 계산해보세요!</font></h4> 49 <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">나에게 맞는 일일 권장 섭취량(kcal)을 계산해보세요!</font></h4>
50 +
56 </div> 51 </div>
57 - 52 +
58 - <div style= width:36%;float:right;padding:0px;> 53 + <div style= width:33%;float:right;padding:5px;>
59 <div style="color : gray";> 54 <div style="color : gray";>
60 <i class="fas fa-book fa-3x"></i> 55 <i class="fas fa-book fa-3x"></i>
61 </div> 56 </div>
62 <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/foodInfo"><font color="black">음식별 영양정보</font></a></h2> 57 <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/foodInfo"><font color="black">음식별 영양정보</font></a></h2>
63 <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">음식별 식품 영양정보에 대해 알려드립니다!</font></h4> 58 <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">음식별 식품 영양정보에 대해 알려드립니다!</font></h4>
64 </div> 59 </div>
65 - 60 + <div style= width:33%;float:right;padding:5px;>
66 - <div style= width:31%;float:right;padding:0px;>
67 <div style="color : gray";> 61 <div style="color : gray";>
68 <i class="fas fa-location-arrow fa-3x"></i> 62 <i class="fas fa-location-arrow fa-3x"></i>
69 </div> 63 </div>
70 <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/searchGym"><font color="black">헬스장 찾기</font></a></h2> 64 <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/searchGym"><font color="black">헬스장 찾기</font></a></h2>
71 <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">위치를 입력하면 그 주위의 헬스장을 찾아드립니다!</font></h4> 65 <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">위치를 입력하면 그 주위의 헬스장을 찾아드립니다!</font></h4>
72 </div> 66 </div>
73 -
74 <br><br><br><br><br><br><br><br> 67 <br><br><br><br><br><br><br><br>
75 -
76 ` ); 68 ` );
77 69
78 response.writeHead(200); 70 response.writeHead(200);
79 response.end(html); 71 response.end(html);
80 -} 72 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 var template = require('./template.js'); 1 var template = require('./template.js');
2 var key = require('./appkey.js'); 2 var key = require('./appkey.js');
3 -
4 -
5 exports.searchGym = function(request, response){ 3 exports.searchGym = function(request, response){
6 var title = '헬스장 찾기'; 4 var title = '헬스장 찾기';
7 var description = '위치를 입력하면 그 주위의 헬스장을 찾아드립니다!'; 5 var description = '위치를 입력하면 그 주위의 헬스장을 찾아드립니다!';
8 var html = template.html(title,` 6 var html = template.html(title,`
9 - 7 + <style>
10 - <style> 8 + @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
11 - @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); 9 + </style>
12 - </style> 10 + <br><br>
13 - <br><br> 11 + <div style= "font-size:25px; background-color:#ffffff">
14 - <div style= "font-size:25px; background-color:#ffffff"> 12 +
15 - 13 + <h2><font color="black">${title}<br><div style= "font-size:20px;font-family: 'Do Hyeon', sans-serif;">${description}</font></div></h2>
16 - <h2><font color="black">${title}<br><div style= "font-size:20px;font-family: 'Do Hyeon', sans-serif;">${description}</font></div></h2>
17 </div> 14 </div>
18 -
19 <style> 15 <style>
20 .map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;} 16 .map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
21 .map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;} 17 .map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
...@@ -174,7 +170,6 @@ exports.searchGym = function(request, response){ ...@@ -174,7 +170,6 @@ exports.searchGym = function(request, response){
174 var keyword = document.getElementById('keyword').value; 170 var keyword = document.getElementById('keyword').value;
175 window.open('https://map.kakao.com/link/search/' + keyword + " " + title) 171 window.open('https://map.kakao.com/link/search/' + keyword + " " + title)
176 }); 172 });
177 -
178 itemEl.onmouseover = function () { 173 itemEl.onmouseover = function () {
179 displayInfowindow(marker, title); 174 displayInfowindow(marker, title);
180 }; 175 };
...@@ -294,10 +289,8 @@ exports.searchGym = function(request, response){ ...@@ -294,10 +289,8 @@ exports.searchGym = function(request, response){
294 el.removeChild (el.lastChild); 289 el.removeChild (el.lastChild);
295 } 290 }
296 } 291 }
297 -
298 </script> 292 </script>
299 `); 293 `);
300 -
301 response.writeHead(200); 294 response.writeHead(200);
302 response.end(html); 295 response.end(html);
303 } 296 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 <br><br><br><br> 31 <br><br><br><br>
32 ${body} 32 ${body}
33 33
34 - <div style= width:100%;font-size:9px;position:fixed;bottom:0;float:left;padding:0px;background-color:#ffffff;> 34 + <div style= width:100%;font-size:9px;position:fixed;bottom:0;float:left;padding:0px;background-color:#a3a19e;>
35 <h4><font color="white">Copyright(C) HealThProtector 2020</h4> 35 <h4><font color="white">Copyright(C) HealThProtector 2020</h4>
36 </div> 36 </div>
37 </body> 37 </body>
......
1 module.exports = { 1 module.exports = {
2 -
3 html:function(title, body){ 2 html:function(title, body){
4 return ` 3 return `
5 <!DOCTYPE html> 4 <!DOCTYPE html>
...@@ -13,7 +12,6 @@ module.exports = { ...@@ -13,7 +12,6 @@ module.exports = {
13 </style> 12 </style>
14 13
15 </head> 14 </head>
16 -
17 <body> 15 <body>
18 16
19 <style type="text/css"> 17 <style type="text/css">
...@@ -27,61 +25,24 @@ module.exports = { ...@@ -27,61 +25,24 @@ module.exports = {
27 a { text-decoration:none } 25 a { text-decoration:none }
28 } 26 }
29 </div> 27 </div>
30 -
31 </style> 28 </style>
32 29
33 <div style="font-family: 'Do Hyeon', sans-serif;";> 30 <div style="font-family: 'Do Hyeon', sans-serif;";>
31 +
34 <h3 style=width:180px;float:left;><a href="/"><font color="black">HealthProtector</font></a></h3> 32 <h3 style=width:180px;float:left;><a href="/"><font color="black">HealthProtector</font></a></h3>
35 <h3 style=width:120px;float:left;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h3> 33 <h3 style=width:120px;float:left;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h3>
36 - <h3 style=width:120px;float:left;><a href="/searchGym"><font color="black">헬스장 찾기</a></h3> 34 + <h3 style=width:120px;float:left;><a href="/searchGym"><font color="black">헬스장 찾기</a></h3>
37 -
38 <h3 style=width:120px;float:left;><a href="/foodInfo"><font color="black">식품 영양정보</font></a></h3> 35 <h3 style=width:120px;float:left;><a href="/foodInfo"><font color="black">식품 영양정보</font></a></h3>
39 - <h3 style=width:150px;float:right;><a href="/"><font color="black";text-align="right">About us</font></a></h3> 36 + <h3 style=width:150px;float:right;><a href="/"><font color="black">About us</font></a></h3>
37 +
40 </div> 38 </div>
41 39
42 ${body} 40 ${body}
43 - <div style= width:100%;font-size:9px;position:fixed;bottom:0;float:left;padding:0px;background-color:#0B610B;> 41 + <div style= width:100%;font-size:9px;position:fixed;bottom:0;float:left;padding:0px;background-color:#213b19;>
44 <h5><font color="white" font size = 2px;>Copyright(C) HealThProtector 2020</font></h5> 42 <h5><font color="white" font size = 2px;>Copyright(C) HealThProtector 2020</font></h5>
45 </div> 43 </div>
46 </body> 44 </body>
47 </html> 45 </html>
48 ` 46 `
49 }, 47 },
50 -
51 - foodTable : function(foodInfo, list, num){
52 - var tag = '';
53 - tag += `<table`;
54 - tag += `
55 - <tr>
56 - <td>선택</td>
57 - <td>이름</td>
58 - <td>종류</td>
59 - <td>지역/제조사</td>
60 - <td>1회 제공량(g)</td>
61 - <td>칼로리(kcal)</td>
62 - <td>단백질(g)</td>
63 - <td>지방(g)</td>
64 - <td>탄수화물(g)</td>
65 - <td>나트륨(mg)</td>
66 - </tr>
67 - `
68 - for(var i =0; i < num; i++ ){
69 - tag += `
70 - <tr>
71 - <td><input type="checkbox" name="choose" value="${foodInfo[list[i]].id}"></td>
72 - <td>${foodInfo[list[i]].name}</td>
73 - <td>${foodInfo[list[i]].type}</td>
74 - <td>${foodInfo[list[i]].company}</td>
75 - <td>${foodInfo[list[i]].servingSize}</td>
76 - <td>${foodInfo[list[i]].kcal}</td>
77 - <td>${foodInfo[list[i]].protein}</td>
78 - <td>${foodInfo[list[i]].fat}</td>
79 - <td>${foodInfo[list[i]].carbohydrate}</td>
80 - <td>${foodInfo[list[i]].natrium}</td>
81 - </tr>
82 - `
83 - }
84 - tag+= `</table>`;
85 - return tag;
86 - }
87 } 48 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -28,9 +28,6 @@ var app = http.createServer(function(request,response){ ...@@ -28,9 +28,6 @@ var app = http.createServer(function(request,response){
28 else if(pathname === '/foodInfo_search'){ 28 else if(pathname === '/foodInfo_search'){
29 foodInfo.foodInfo_search(request, response); 29 foodInfo.foodInfo_search(request, response);
30 } 30 }
31 - else if(pathname === '/foodInfo_chooseAdd_process'){
32 - foodInfo.foodInfo_chooseAdd_process(request,response);
33 - }
34 else if(pathname === '/countKcal'){ 31 else if(pathname === '/countKcal'){
35 countKcal.countKcal(request, response); 32 countKcal.countKcal(request, response);
36 } 33 }
...@@ -40,6 +37,12 @@ var app = http.createServer(function(request,response){ ...@@ -40,6 +37,12 @@ var app = http.createServer(function(request,response){
40 else if(pathname === '/countKcal_body_process'){ 37 else if(pathname === '/countKcal_body_process'){
41 countKcal.countKcal_body_process(request,response); 38 countKcal.countKcal_body_process(request,response);
42 } 39 }
40 + else if(pathname === '/countKcal_food'){
41 + countKcal.countKcal_food(request,response);
42 + }
43 + else if(pathname === '/countKcal_food_process'){
44 + countKcal.countKcal_food_process(request,response);
45 + }
43 else{ 46 else{
44 response.writeHead(404); 47 response.writeHead(404);
45 response.end("Not found"); 48 response.end("Not found");
......
...@@ -16,9 +16,10 @@ ...@@ -16,9 +16,10 @@
16 "url": "http://khuhub.khu.ac.kr/2019102154/HealthProtector.git" 16 "url": "http://khuhub.khu.ac.kr/2019102154/HealthProtector.git"
17 }, 17 },
18 "dependencies": { 18 "dependencies": {
19 + "jquery": "^3.5.1",
19 "mysql": "^2.18.1", 20 "mysql": "^2.18.1",
20 "pm2": "^4.5.0", 21 "pm2": "^4.5.0",
21 "react": "^17.0.1", 22 "react": "^17.0.1",
22 "react-dom": "^17.0.1" 23 "react-dom": "^17.0.1"
23 } 24 }
24 -}
...\ No newline at end of file ...\ No newline at end of file
25 +}
......