6 coffeeshopschema js var Schema Schema create Schema

  • Slides: 48
Download presentation

커피숍 스키마 만들기 6 • 데이터베이스 스키마 추가 – coffeeshop_schema. js var Schema =

커피숍 스키마 만들기 6 • 데이터베이스 스키마 추가 – coffeeshop_schema. js var Schema = { }; Schema. create. Schema = function(mongoose) { var Coffee. Shop. Schema = mongoose. Schema({ name : {type : String, index : 'hashed', 'default' : ''}, address : {type : String, 'default' : ''}, tel : {type : String, 'default' : ''}, geometry : { 'type' : {type : String, 'default' : "Point"}, coordinates : [{type : "Number"}] }, created_at : {type : Date, index : {unique : false}, 'default' : Date. now}, updated_at : {type : Date, index : {unique : false}, 'default' : Date. now} }); Do it! Node. js 프로그래밍

메소드 추가하고 설정에 정보 추가 8 • 메소드는 find. All 메소드만 추가하고 새로 만든

메소드 추가하고 설정에 정보 추가 8 • 메소드는 find. All 메소드만 추가하고 새로 만든 스키마 정보를 config. js 파일에 추가 Coffee. Shop. Schema. static('find. All', function(callback) { return this. find({ }, callback); }); module. exports = { server_port : 3000, db_url : 'mongodb: //localhost: 27017/local', db_schemas : [ {file : '. /user_schema', collection : 'users 6', schema. Name : 'User. Schema', model. Name : 'User. Model'}, {file : '. /coffeeshop_schema', collection : 'coffeeshop', schema. Name : 'Coffee. Shop. Schema', model. Name : 'Coffee. Shop. Model'} ], Do it! Node. js 프로그래밍

커피숍 데이터 추가 함수 작성 9 • 라우팅 함수들을 만들기 위해 coffeeshop. js 파일을

커피숍 데이터 추가 함수 작성 9 • 라우팅 함수들을 만들기 위해 coffeeshop. js 파일을 만들고 add 함수 추가 var add = function(req, res) { console. log('coffeeshop 모듈 안에 있는 add 호출됨. '); var param. Name = req. param('name'); var param. Address = req. param('address'); var param. Tel = req. param('tel'); var param. Longitude = req. param('longitude'); var param. Latitude = req. param('latitude'); var database = req. app. get('database'); if (database. db) { add. Coffee. Shop(database, param. Name, param. Address, param. Tel, param. Longitude, param. Latitude, function(err, result) { if (err) { …. . } Do it! Node. js 프로그래밍

커피숍 데이터 추가 함수 작성 10 • 라우팅 함수들을 만들기 위해 coffeeshop. js 파일을

커피숍 데이터 추가 함수 작성 10 • 라우팅 함수들을 만들기 위해 coffeeshop. js 파일을 만들고 add 함수 추가 if (result) { console. dir(result); res. write. Head('200', {'Content-Type' : 'text/html; charset=utf 8'}); res. write('<h 2>커피숍 추가 성공</h 2>'); res. end(); } else { res. write. Head('200', {'Content-Type' : 'text/html; charset=utf 8'}); res. write('<h 2>커피숍 추가 실패</h 2>'); res. end(); } }); } else { res. write. Head('200', {'Content-Type' : 'text/html; charset=utf 8'}); res. write('<h 2>데이터베이스 연결 실패</h 2>'); res. end(); } }; Do it! Node. js 프로그래밍

데이터베이스에 추가하는 함수 작성 11 • 데이터베이스에 커피숍 데이터를 추가하는 addcoffee. Shop 함수 작성

데이터베이스에 추가하는 함수 작성 11 • 데이터베이스에 커피숍 데이터를 추가하는 addcoffee. Shop 함수 작성 var add. Coffee. Shop = function(database, name, address, tel, longitude, latitude, callback) { console. log('add. Coffee. Shop 호출됨. '); var coffeeshop = new database. Coffee. Shop. Model({name : name, address : address, tel : tel, geometry : { type : 'Point', coordinates : [longitude, latitude] } } ); coffeeshop. save(function(err) { if (err) { callback(err, null); return; } console. log("커피숍 데이터 추가함. "); callback(null, coffeeshop); Do it! Node. js 프로그래밍

커피숍 리스트 조회 함수 추가 12 • 데이터베이스에서 커피숍 리스트 조회하는 함수 추가 var

커피숍 리스트 조회 함수 추가 12 • 데이터베이스에서 커피숍 리스트 조회하는 함수 추가 var list = function(req, res) { console. log('coffeeshop 모듈 안에 있는 list 호출됨. '); 경도 좌표 : results[i]. _doc. geometry. coordinates[0 위도 좌표 : results[i]. _doc. geometry. coordinates[1] var database = req. app. get('database'); if (database. db) { database. Coffee. Shop. Model. find. All(function(err, results) { if (err) { …. . } if (results) { console. dir(results); res. write. Head('200', {'Content-Type' : 'text/html; charset=utf 8'}); res. write('<h 2>커피숍 리스트</h 2>'); res. write('<div><ul>'); for (var i = 0; i < results. length; i++) { var cur. Name = results[i]. _doc. name; var cur. Longitude = results[i]. _doc. geometry. coordinates[0]; var cur. Latitude = results[i]. _doc. geometry. coordinates[1]; Do it! Node. js 프로그래밍

라우팅 설정 방식 13 • 라우팅 함수 정보 등록 route_info : [ {file :

라우팅 설정 방식 13 • 라우팅 함수 정보 등록 route_info : [ {file : '. /coffeeshop', path : '/process/addcoffeeshop', method : 'add', type : 'post'} , {file : '. /coffeeshop', path : '/process/listcoffeeshop', method : 'list', type : 'post'} ], Do it! Node. js 프로그래밍

웹페이지 작성 14 • 커피숍 정보를 추가하는 웹페이지 작성 <form method="post" action="/process/addcoffeeshop"> <table> <tr>

웹페이지 작성 14 • 커피숍 정보를 추가하는 웹페이지 작성 <form method="post" action="/process/addcoffeeshop"> <table> <tr> <td><label>이름</label></td> <td><input type="text" name="name" value="스타벅스 삼성역점" /></td> </tr> <td><label>주소</label></td> <td><input type="text" name="address" value="서울특별시 강남구 테헤란로 103길 9 제일빌딩" /></td> </tr> <td><label>경도</label></td> <td><input type="text" name="longitude" value="127. 0638104" /></td> </tr> <td><label>위도</label></td> <td><input type="text" name="latitude" value="37. 5101225" /></td> Do it! Node. js 프로그래밍

웹페이지 작성 16 • 커피숍 리스트를 조회하는 웹페이지 작성 <h 1>커피숍 리스트</h 1> <form

웹페이지 작성 16 • 커피숍 리스트를 조회하는 웹페이지 작성 <h 1>커피숍 리스트</h 1> <form method="post" action="/process/listcoffeeshop"> <table> <tr> <td><label>아래 [전송] 버튼을 누르세요. </label></td> </tr> </table> <input type="submit" value="전송" name="" /> </form> Do it! Node. js 프로그래밍

스키마에 메소드 추가 20 • 가장 가까운 커피숍을 찾을 수 있는 find. Near 메소드

스키마에 메소드 추가 20 • 가장 가까운 커피숍을 찾을 수 있는 find. Near 메소드 추가 // 가장 가까운 커피숍 조회 Coffee. Shop. Schema. static('find. Near', function(longitude, latitude, max. Distance, callback) { console. log('Coffee. Shop. Schema의 find. Near 호출됨. '); this. find(). where('geometry'). near( {center : {type : 'Point', coordinates : [parse. Float(longitude), parse. Float(latitude)] }, max. Distance : max. Distance }). limit(1). exec(callback); }); ……. find(). where(속성 이름). near(조회 조건) Do it! Node. js 프로그래밍

라우팅 함수 추가 21 • 가장 가까운 커피숍을 찾기 위한 라우팅 함수 추가 var

라우팅 함수 추가 21 • 가장 가까운 커피숍을 찾기 위한 라우팅 함수 추가 var find. Near = function(req, res) { console. log('coffeeshop 모듈 안에 있는 find. Near 호출됨. '); var param. Longitude = req. param('longitude'); var param. Latitude = req. param('latitude'); var max. Distance = 1000; var database = req. app. get('database'); if (database. db) { database. Coffee. Shop. Model. find. Near(param. Longitude, param. Latitude, max. Distance, function(err, results) { if (err) { …. . } if (results) { console. dir(results); res. write. Head('200', {'Content-Type' : 'text/html; charset=utf 8'}); res. write('<h 2>가까운 커피숍</h 2>'); res. write('<div><ul>'); Do it! Node. js 프로그래밍

라우팅 함수 추가 22 • 가장 가까운 커피숍을 찾기 위한 라우팅 함수 추가 for

라우팅 함수 추가 22 • 가장 가까운 커피숍을 찾기 위한 라우팅 함수 추가 for (var i = 0; i < results. length; i++) { var cur. Name = results[i]. _doc. name; var cur. Address = results[i]. _doc. address; var cur. Tel = results[i]. _doc. tel; var cur. Longitude = results[i]. _doc. geometry. coordinates[0]; var cur. Latitude = results[i]. _doc. geometry. coordinates[1]; res. write(' <li>#' + i + ' : ' + cur. Name + ', ' + cur. Address + ', ' + cur. Tel + ', ' + cur. Longitude + ', ' + cur. Latitude + '</li>'); } res. write('</ul></div>'); res. end(); } else { res. write. Head('200', {'Content-Type' : 'text/html; charset=utf 8'}); res. write('<h 2>가까운 커피숍 조회 실패</h 2>'); res. end(); Do it! Node. js 프로그래밍

웹페이지 작성 23 • 가까운 커피숍 검색 요청을 위한 웹페이지 작성 <p>삼성역 3번 출구

웹페이지 작성 23 • 가까운 커피숍 검색 요청을 위한 웹페이지 작성 <p>삼성역 3번 출구 버스 정류장</p> <form method="post" action="/process/nearcoffeeshop"> <table> <tr> <td><label>경도</label></td> <td><input type="text" name="longitude" value="127. 0632954" /></td> </tr> <td><label>위도</label></td> <td><input type="text" name="latitude" value="37. 5079523" /></td> </tr> </table> <input type="submit" value="전송" name="" /> </form> Do it! Node. js 프로그래밍

설정에 등록 후 확인 24 • config. js 파일에 라우팅 함수 등록 후 확인

설정에 등록 후 확인 24 • config. js 파일에 라우팅 함수 등록 후 확인 route_info : [ {file : '. /coffeeshop', path : '/process/addcoffeeshop', method : 'add', type : 'post'} , {file : '. /coffeeshop', path : '/process/listcoffeeshop', method : 'list', type : 'post'} , {file : '. /coffeeshop', path : '/process/nearcoffeeshop', method : 'find. Near', type : 'post'} ], ▶ http: //localhost: 3000/public/nearcoffeeshop. html Do it! Node. js 프로그래밍

스키마에 메소드 추가 26 • 앞에서 했던 과정과 같은 과정으로 진행 // 일정 범위

스키마에 메소드 추가 26 • 앞에서 했던 과정과 같은 과정으로 진행 // 일정 범위 안의 커피숍 조회 Coffee. Shop. Schema. static('find. Within', function(topleft_longitude, topleft_latitude, bottomright_longitude, bottomright_latitude, callback) { console. log('Coffee. Shop. Schema의 find. Within 호출됨. '); this. find(). where('geometry'). within( {box : [[parse. Float(topleft_longitude), parse. Float(topleft_latitude)], [parse. Float(bottomright_longitude), parse. Float(bottomright_latitude)]] }). exec(callback); }); find(). where(속성 이름). within(조회 조건) Do it! Node. js 프로그래밍

라우팅 함수 추가 27 • 커피숍 검색을 위한 라우팅 함수 추가 var find. Within

라우팅 함수 추가 27 • 커피숍 검색을 위한 라우팅 함수 추가 var find. Within = function(req, res) { console. log('coffeeshop 모듈 안에 있는 find. Within 호출됨. '); var param. Top. Left. Longitude = req. param('topleft_longitude'); var param. Top. Left. Latitude = req. param('topleft_latitude'); var param. Bottom. Right. Longitude = req. param('bottomright_longitude'); var param. Bottom. Right. Latitude = req. param('bottomright_latitude'); var database = req. app. get('database'); if (database. db) { database. Coffee. Shop. Model. find. Within(param. Top. Left. Longitude, param. Top. Left. Latitude, param. Bottom. Right. Longitude, param. Bottom. Right. Latitude, function(err, results) { if (err) { …. . } ……. module. exports. find. Within = find. Within; Do it! Node. js 프로그래밍

웹 페이지 작성 28 • 검색 요청을 위한 웹페이지 작성 <p>삼성역 3번 출구와 4번

웹 페이지 작성 28 • 검색 요청을 위한 웹페이지 작성 <p>삼성역 3번 출구와 4번 출구 부근의 영역 (사각형 박스)</p> <form method="post" action="/process/withincoffeeshop"> <table> <tr> <td><label>왼쪽 윗부분의 경도</label></td> <td><input type="text" name="topleft_longitude" value="127. 0617076" /></td> </tr> <td><label>왼쪽 윗부분의 위도</label></td> <td><input type="text" name="topleft_latitude" value="37. 5082076" /></td> </tr> <td><label>오른쪽 아랫부분의 경도</label></td> <td><input type="text" name="bottomright_longitude" value="127. 0637568" /></td> </tr> Do it! Node. js 프로그래밍

설정에 추가 후 확인 29 • 라우팅 함수를 config. js 파일에 추가 후 기능

설정에 추가 후 확인 29 • 라우팅 함수를 config. js 파일에 추가 후 기능 동작 확인 route_info : [ {file : '. /coffeeshop', path : '/process/addcoffeeshop', method : 'add', type : 'post'} , {file : '. /coffeeshop', path : '/process/listcoffeeshop', method : 'list', type : 'post'} , {file : '. /coffeeshop', path : '/process/nearcoffeeshop', method : 'find. Near', type : 'post'} , {file : '. /coffeeshop', path : '/process/withincoffeeshop', method : 'find. Within', type : 'post'} ], ……. ▶ http: //localhost: 3000/public/withincoffeeshop. html Do it! Node. js 프로그래밍

스키마에 메소드 추가 31 • 앞에서 했던 과정과 같은 과정으로 진행 // 일정 반경

스키마에 메소드 추가 31 • 앞에서 했던 과정과 같은 과정으로 진행 // 일정 반경 안의 커피숍 조회 Coffee. Shop. Schema. static('find. Circle', function(center_longitude, center_latitude, radius, callback) { console. log('Coffee. Shop. Schema의 find. Circle 호출됨. '); // change radian : 1/6371 -> 1 km this. find(). where('geometry'). within( {center : [parse. Float(center_longitude), parse. Float(center_latitude)], radius : parse. Float(radius/6371000), unique : true, spherical : true }). exec(callback); }); Do it! Node. js 프로그래밍

라우팅 함수 추가 32 • 커피숍 검색을 위한 라우팅 함수 추가 var find. Circle

라우팅 함수 추가 32 • 커피숍 검색을 위한 라우팅 함수 추가 var find. Circle = function(req, res) { console. log('coffeeshop 모듈 안에 있는 find. Circle 호출됨. '); var param. Center. Longitude = req. param('center_longitude'); var param. Center. Latitude = req. param('center_latitude'); var param. Radius = req. param('radius'); var database = req. app. get('database'); if (database. db) { database. Coffee. Shop. Model. find. Circle(param. Center. Longitude, param. Center. Latitude, param. Radius, function(err, results) { if (err) { …. . } ……. module. exports. find. Circle = find. Circle; Do it! Node. js 프로그래밍

웹 페이지 작성 33 • 검색 요청을 위한 웹페이지 작성 <p>삼성역 3번 출구 버스

웹 페이지 작성 33 • 검색 요청을 위한 웹페이지 작성 <p>삼성역 3번 출구 버스 정류장 반경 100 m (원)</p> <form method="post" action="/process/circlecoffeeshop"> <table> <tr> <td><label>중심점 경도</label></td> <td><input type="text" name="center_longitude" value="127. 0632954" /></td> </tr> <td><label>중심점 위도</label></td> <td><input type="text" name="center_latitude" value="37. 5079523" /></td> </tr> <td><label>반경</label></td> <td><input type="text" name="radius" value="100" /></td> </tr> </table> Do it! Node. js 프로그래밍

설정에 추가 후 확인 34 • 라우팅 함수를 config. js 파일에 추가 후 기능

설정에 추가 후 확인 34 • 라우팅 함수를 config. js 파일에 추가 후 기능 동작 확인 route_info : [ ……. , {file : '. /coffeeshop', path : '/process/withincoffeeshop', method : 'find. Within', type : 'post'} , {file : '. /coffeeshop', path : '/process/circlecoffeeshop', method : 'find. Circle', type : 'post'} ], ……. ▶ http: //localhost: 3000/public/circlecoffeeshop. html Do it! Node. js 프로그래밍

구글맵으로 내 위치 표시 36 • 내 위치를 표시할 수 있음 <!DOCTYPE html> <head>

구글맵으로 내 위치 표시 36 • 내 위치를 표시할 수 있음 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1“ > <title>구글맵 1</title> <style> *{ margin: 0; padding: 0; } … <body onload="on. Load()"> <p>구글맵으로 내 위치 표시하기</p> <div id="map"></div> </body> Do it! Node. js 프로그래밍

자바스크립트 코드 추가 37 • 구글맵 라이브러리 로딩하여 사용 <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="https: //maps. googleapis. com/maps/api/js"></script>

자바스크립트 코드 추가 37 • 구글맵 라이브러리 로딩하여 사용 <script src="https: //maps. googleapis. com/maps/api/js"></script> <script> function on. Load() { init. Map(); } var map; var center. Location = {lat: 37. 5079523, lng: 127. 0632954}; function init. Map() { map = new google. maps. Map(document. get. Element. By. Id('map'), { center: center. Location, zoom: 17 }); var marker = new google. maps. Marker({ position: center. Location, icon: 'mylocation. png', animation: google. maps. Animation. BOUNCE }); marker. set. Map(map); } Do it! Node. js 프로그래밍

가장 가까운 커피숍 찾아 보여주기 40 • 웹페이지 작성 <form method="post" action="/process/nearcoffeeshop 2"> <table>

가장 가까운 커피숍 찾아 보여주기 40 • 웹페이지 작성 <form method="post" action="/process/nearcoffeeshop 2"> <table> <tr> <td><label>경도</label></td> <td><input type="text" name="longitude" value="127. 0632954" ></td> </tr> <td><label>위도</label></td> <td><input type="text" name="latitude" value="37. 5079523" ></td> </tr> </table> <input type="submit" value="전송" name="" > </form> Do it! Node. js 프로그래밍

새로운 라우팅 함수 만들고 등록 41 • find. Near 2 함수 만들어 등록 if

새로운 라우팅 함수 만들고 등록 41 • find. Near 2 함수 만들어 등록 if (database. db) { database. Coffee. Shop. Model. find. Near(param. Longitude, param. Latitude, max. Distance, function(err, results) { if (err) { …. . } if (results) { console. dir(results); if (results. length > 0) { res. render('findnear. ejs', {result: results[0]. _doc, param. Latitude: param. Latitude, param. Longitude: param. Longitude}); } else { res. write. Head('200', {'Content-Type': 'text/html; charset=utf 8'}); res. write('<h 2>가까운 커피숍 데이터가 없습니다. </h 2>'); res. end(); } Do it! Node. js 프로그래밍

템플레이트 파일 작성 42 • 라우팅 함수에서 사용하는 findnear. ejs 파일 작성 <script> function

템플레이트 파일 작성 42 • 라우팅 함수에서 사용하는 findnear. ejs 파일 작성 <script> function on. Load() { init. Map(); } var map; var center. Location = {lat: <%= param. Latitude %>, lng: <%= param. Longitude %>}; var coffee. Location = {lat: <%= result. geometry. coordinates[1] %>, lng: <%= result. geometry. coordinates[0] %>}; function init. Map() { map = new google. maps. Map(document. get. Element. By. Id('map'), { center: center. Location, zoom: 17 }); Do it! Node. js 프로그래밍

템플레이트 파일 작성 43 • 라우팅 함수에서 사용하는 findnear. ejs 파일 작성 var my.

템플레이트 파일 작성 43 • 라우팅 함수에서 사용하는 findnear. ejs 파일 작성 var my. Marker = new google. maps. Marker({ position: center. Location, icon: '/public/mylocation. png', animation: google. maps. Animation. BOUNCE }); my. Marker. set. Map(map); var coffee. Marker = new google. maps. Marker({ position: coffee. Location, icon: '/public/coffee. png' }); coffee. Marker. set. Map(map); } </script> Do it! Node. js 프로그래밍

일정 범위 안의 커피숍 검색 45 • 이전 과정과 마찬가지로 진행 • 뷰 엔진으로

일정 범위 안의 커피숍 검색 45 • 이전 과정과 마찬가지로 진행 • 뷰 엔진으로 응답 문서 만들어지도록 구성 if (results. length > 0) { res. render('findwithin. ejs', {result: results[0]. _doc, param. Longitude: param. Longitude, param. Latitude: param. Latitude, param. Top. Left. Longitude: param. Top. Left. Longitude, param. Top. Left. Latitude: param. Top. Left. Latitude, param. Bottom. Right. Longitude: param. Bottom. Right. Longitude, param. Bottom. Right. Latitude: param. Bottom. Right. Latitude}); Do it! Node. js 프로그래밍

템플레이트 파일 작성 46 • 라우팅 함수에서 사용하는 findwithin. ejs 파일 작성 // 사각형

템플레이트 파일 작성 46 • 라우팅 함수에서 사용하는 findwithin. ejs 파일 작성 // 사각형 검색 영역을 위한 좌표 var coords =new google. maps. Lat. Lng. Bounds( {lat: <%= param. Top. Left. Latitude %>, lng: <%= param. Top. Left. Longitude %>}, {lat: <%= param. Bottom. Right. Latitude %>, lng: <%= param. Bottom. Right. Longitude %>} ); …. // 검색하려는 영역 표시 var rectangle = new google. maps. Rectangle({ bounds: coords, stroke. Color: "#0000 FF", stroke. Opacity: 0. 8, stroke. Weight: 2, fill. Color: "#0000 FF", fill. Opacity: 0. 4 }); rectangle. set. Map(map); Do it! Node. js 프로그래밍