한양대학교 에리카캠퍼스 오픈소스SW개발 수업 프로젝트 - Mukkit_List
Mukkit_List는 제주도에 있는 맛집들을 저장하여 지도를 통해 보여주는 웹입니다.
저희의 도메인 주소는 http://mukkit.dothome.co.kr/ 입니다.
지도api는 카카오맵을 사용하였습니다.
DB에 있는 맛집 뿐만 아니라 등록 기능을 통해 맛집 리스트를 늘릴 수 있습니다.
저희 팀 이름은 Petit Dejeuner입니다.
'Petit Dejeuner'는 프랑스어로 '아침식사'입니다.
아침식사처럼 하루의 원동력이 될 수 있는, 즉 도움이 되는 웹을 만들려합니다.
-김예진 소프트웨어학부 2019069034
-전민지 소프트웨어학부 2019025823
-정연주 소프트웨어학부 2019014739
-한수빈 소프트웨어학부 2019071994
상단에는 웹페이지의 제목인 'Mukkit_List'가 적혀있습니다.
제목 하단에는 메뉴들이 있습니다.
메뉴에는 등록, 검색, 삭제 기능이 있습니다.
등록 기능은 사용자가 mukkit_list에 자신의 제주 맛집을 추가할 수 있습니다.
이는 DB에서 관리됩니다.
검색 기능은 mukkit_list에 있는 맛집 중에서 검색한 결과를 보여줍니다.
삭제 기능은 mukkit_list에 있는 맛집을 삭제할 수 있습니다.
이 역시 DB에서 관리됩니다.
메뉴의 하단 왼쪽에는 지도가 있습니다.
지도에 DB에 있는 맛집들을 마커로 표시하여 보여줍니다.
지도의 오른쪽에는 맛집 리스트들이 나열되어 있습니다.
- 등록을 누르면 'Add mukkit'이라는 팝업창이 뜹니다.
- 팝업창에서 사용자는 list의 number, 가게이름(store_name), 가게설명(description), 주소(location), 평점을 입력합니다.
- 이후, '추가하기' 버튼을 클릭합니다.
- 버튼을 클릭하면, DB에 음식점이 추가됩니다.
- 추가된 음식점은 메인화면의 오른쪽 리스트에서 확인할 수 있습니다.
- 검색을 누르면 새창으로 이동합니다.
- 새창에서 사용자가 원하는 음식점을 검색합니다.
- 검색한 음식점이 DB에 존재한다면 그 음식점의 위치를 지도를 통해 보여줍니다.
- 존재하지 않는다면 '존재하지 않습니다'라는 문구가 나타납니다.
- 삭제를 누르면 'mukkit list'라는 팝업창이 뜹니다.
- 팝업창에는 mukkit_list가 존재합니다.
- list의 맨오른쪽에 존재하는 'Delete'버튼을 통해 음식점을 삭제할 수 있습니다.
- 삭제가 완료되면 상단에 "ID is deleted." 라는 문구가 뜹니다.
저희는 HTML과 CSS를 사용하여 웹을 디자인하였습니다.
또한, phpadmin을 이용하여 DB를 관리하였습니다.
http://mukkit.dothome.co.kr/myadmin/
위 주소가 저희가 사용한 DB 주소입니다.
(위의 ID : mukkit , PW : list4241!)
저희의 ftp 서버는 ftp://mukkit.dothome.co.kr 입니다.
(위의 ID : mukkit , PW : list4241!)
api를 불러오기 위한 도메인 생성을 위하여 http://www.dothome.co.kr 사이트를 이용하였습니다.
웹을 어떤 식으로 구성할지 팀원들과 슬랙을 통해 회의하였습니다.
회의 결과로 우리나라의 대표적인 관광지인 제주도의 맛집리스트를 보여주는 웹을 만들기로 하였습니다.
웹 실행화면에서 지도와 맛집 리스트를 한 번에 보여줌으로써 가독성을 높이기로 하였습니다.
그리고 등록, 검색, 삭제 기능을 통하여 맛집리스트에 대한 접근성을 높이기로 하였습니다.
사용자가 등록하는 과정을 통해 맛집리스트는 풍성해지고 웹의 기능을 향상될 것을 기대하였습니다.
처음 프로젝트를 구상하고 제일 먼저 한 것이 Front-End 구축이었습니다.
HTML을 이용하여 저희가 구상했던 대로 메뉴, 지도, 맛집리스트가 웹에 실행되도록 하였습니다.
api를 불러오기 위하여 도메인을 등록하는 과정에서 어려움이 있었습니다.
도메인을 처음 설정하는 과정에서 html을 ftp에 등록하지 않아 도메인이 제대로 생성되지 않았습니다.
도메인을 제대로 생성되지 않아 api도 제대로 불러올 수 없었고 DB에 접근하는 것에도 어려움을 겪었습니다.
원인을 찾아서 제대로 도메인을 등록한 후 카카오맵 api를 불러와 웹 구성을 얼추 마칠 수 있었습니다.
처음 DB를 만들땐 ms access를 이용하여 table을 작성하였습니다.
table을 작성하고, ms sql server를 이용하여 서버에 DB를 저장하려 하였으나 실패하였습니다.
이후, mysql을 설치한 후 mysql server에 access를 이용해 만든 table을 'mukkit'이라는 데이터베이스에 저장하였습니다.
데이터베이스는 phpadmin을 이용하여 관리하였습니다.
데이터베이스를 구축한 후, php를 이용해 웹에 불러오는 과정에서 연결이 되지 않은 어려움을 겪었습니다.
local로는 연결이 되어서 local로 연결하려 하였습니다.
하지만, php를 이용해 웹에 불러올 때에 ID, PW, DB 설정을 잘못한 상태로 DB에 연결하려 하였다는 문제점을 발견해 'mukkit' 데이터베이스에 연결할 수 있었습니다.
이후, 데이터베이스에 연결하여 지도를 불러오고 맛집리스트를 불러와 웹을 완성하였습니다.
감사합니다.