후원으로 잠 못 이루는 밤(후.잠.못)
관리자
view : 1213
| 기간 : | 2015-10-05 ~ 2016-02-29 ( 월,화,수,목,금 ) |
|---|---|
| URL : | 내부서버용 |
| 1. 단순한 후원 / 봉사만이 아닌 물건을 구매 함으로서 어려운 이웃을 도울 수 있다. 2.회원이 아닌 봉사활동을 할 수혜자나 수혜지역을 제안할 수 있다. 3.해외 / 국내에 진행중인 후원프로젝트를 보고 후원할 수 있다. | |
[ 후원으로 잠 못 이루는 밤 ]
|
Final project |
봉사 후원관련 웹사이트 구축 “후.잠.못” |
|||||||||
|
개발환경 |
OS |
Window 7 |
||||||||
|
DBMS |
Oracle Database 11g |
|||||||||
|
Language |
JAVA/ HTML/ CSS/ JQuery/ javaScript/ Ajax/ JSP (WAS : tomcat 8.0) |
|||||||||
|
Development tool |
Spring/ SQL Tools |
|||||||||
|
개발인원 |
개발기간 |
|||||||||
|
6 명 |
2016.01.25(월) ~ 2016.02.25(목) |
|||||||||
|
|
개발 취지 및 목적 |
|||||||||
|
1. 단순한 후원/ 봉사만이 아닌 물건을 구매함으로서 어려운 이웃을 도울 수 있다.
2. 회원이 아닌 봉사활동을 할 수혜자나 수혜지역을 제안할 수 있다.
|
||||||||||
|
DATABASE 구조도(일부) |
||||||||||
|
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 인트로 상단 : 1page : 동영상 url(자동재생) 후원projectlist 사이트로 연결 2 page : 지도 사이트로 연결 3 page : 차트 사이트로 연결
2. 인트로 하단 : Projectlist를 6개의 projectlist를 랜덤 하게 사진과 제목으로 화면에 나타내었다.
3. 인트로 하단의 projectlist의 더보기를 클릭하면 projectlist.jsp에서 해당 projectlist가 Modal로 나타난다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 상단에 ajax요청을 하여 bussinesslist를 불러오며 각 bussinesslist를 통해 ajax요청을하여 projectlist를 불러온다.
2. 중단에는 bussiness의 간략한 설명이 있으며 바로 후원 하기 버튼을 클릭하면 Sponsorform 으로 이동한다.
3. 하단에는 projectlist가 있으며 Projectlist를 클릭하면 modal창을 활용하여 상세 페이지가 띄워진다.
4. Modal 창 하단의 후원하기 버튼을 클릭하면 해당 프로젝트의 후원페이지로 이동한다
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1.회원 아이디와 후원인은 USER_LOGIN에 담긴 값을 사용하여 자동 완성 된다.
2. 프로젝트명은 후원 페이지에서 선택한 프로젝트 리스트로 자동 선택된다.
3.지불금액은 만원 단위로 입력 가능하며 일치하지 않을 시 경고창이 뜬다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 후원 가이드 페이지는 3개의 탭으로 되어있으며 설명, 지도 정보, 차트 정보로 구성 되어 있다.
2. 지도 페이지는 WHO사이트의 정보를 json파일로 가져와 google map API를 사용하여서 데이터를 나타내었다.
3. 항목별(탭) 연도별(셀렉트박스)로 다양한 데이터를 표현 할 수 있다.
4. 차트 페이지는 unicef의 자료를 기반으로 각 항목들을 zing chart API를 활용하여 년도별로 데이터를 표현 하였다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 다음 지도 API를 사용하여 왼쪽에서 지도선택에서 각 구역을 클릭하면 해당위치로 지도가 이동되며 그 위치에 해당하는 샾에 마크가 찍힌다.
2. 샵 리스트에 오른쪽에 있는 마크 버튼을 클릭하면 해당 샵의 간단한 설명과 위치가 modal으로 띄워진다.
3. +버튼을 클릭하면 해당 샵의 상세 페이지로 이동한다.
4. 지도는 확대 축소가 가능 하다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 등록된 샵들의 리스트들이 표시 된다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 각 샵에 해당하는 자료를 주소와 전화번호 홈페이지, 이미지 그리고 지도 api를 통해 위치를 나타내었다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 프로젝트 목록에서 상세보기 버튼을 누르면 프로젝트 수정 폼으로 이동된다.
2. 프로젝트에 관한 상세정보가 보여진다.
3. 프로젝트 사진추가가 가능하다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 프로젝트를 추가할 수 있는 기능
2. selectBox로 사업명을 선택한 후 프로젝트에 대한 설명을 쓸 수 있다.
3. 프로젝트에 해당하는 사진을 추가 할 수 있다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 로그인을 한 후 마이페이지에 들어가면 후원금 관리를 할 수 있다.
2. 어떤 프로젝트에 언제, 얼마를 후원했는지 보여준다.
3. 내가 후원한 후원금 총 금액을 계산해준다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 봉사활동 리스트를 구글 api에 출력해보았다.
2. 신청날짜가 지나거나 모집인원이 완료된 것은 모집마감으로 변경되고 클릭하여도 이동이 안되도록 하였다.
3. API에 나타난 일정을 리스트로 만들어서 좀더 상세하게 나타내었다 |
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 신청 가능한 구글api나 리스트를 선택하면 봉사활동의 상세 정보를 확인 할 수 있다
2. 신청하기를 누르면 Modal효과로 인한 프로그램 신청서 양식이 출력된다
3. 신청서를 입력하면 DB에 저장되고, 관리자 페이지로 저장된다 |
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 제목으로 검색을 하면 리스트에 출력이 된다. |
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 마이페이지로 국내 해외 봉사 신청 내역, 수혜자 신청목록을 출력한다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
현재 홈페이지에서 운영중인 프랜즈샵의 게시판을 관리할 수 있는 페이지이다.
1. 검색 기능을 넣어 필요한 데이터만 받을 수 있다.
2. 게시판 목록갯수를 10개나 20개씩 바꿀 수 있다.
3. 게시글 갯수 및 db에서 가지고오는 데이터의 수에 따라 페이징처리가 된다.
4. 전체 선택과 부분 선택으로 삭제 할 수 있도록 구현하였다.
5. 게시글을 수정 할 수있도록 연결하였다.
6. 추가페이지와 연결하였다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 프랜즈 샵 게시판에 새로운 게시글을 추가하는 관리자 추가 페이지이다.
- form에 게시글의 내용들과 이미지를 업로드 가능하도록 구현 하였고 radio 버튼을 넣어 업종을 선택하게 하였다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 관리자가 수정하는 게시글의 간단한 내용을 확인 할 수 있도록 input박스에 수정 전 내용을 구현 하였고 수정 후 db에서 수정하는게시글의 데이터를 update 하였다. |
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1.홈페이지의 회원들 중에서 프랜즈샵을 등록 원하는 신청서를 올렸을 때 내용을 확인하고 게시판으로 등록& 삭제하는 관리자 페이지이다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 스토어의 상품 등록 페이지 상품을 등록할 수 있다.
2. 사진 등록은 최대 6개까지 등록이 가능 합니다. |
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 스토어 클릭하면 바로 보여지는 리스트 페이지 입니다.
2. 상품 등록하면 바로 리스트 보여집니다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
주문페이지 입니다.
1. 장바구니나 상세페이지에서 주문하면 주문페이지로 이동합니다.
2. 회원정보로 불러와서 그 회원으로 주소를 불러와서 결제를 합니다. |
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 회원 아이디와 비번을 입력받아 일치시에 회원 정보를 LOGIN_USER 세션에 담는다.
2. 비밀번호는 DigestUtils.md5DigestAsHex를 이용해 암호화 하여 저장 되어 있는 값을 입력 받은 값과 함께 비교한다.
3. 로그인 실패시 각각의 메시지가 상단에 표시된다.
4. 로그인 성공시 상단에 사용자의 이름과 로그 아웃 버튼이 활성화 된다.
|
||||||||||
|
실행화면 |
||||||||||
|
|
||||||||||
|
세부내용 |
||||||||||
|
1. 회원정보 수정은 입력값을 수정하게 되면 정규식을 이용하여 값이 변경여부를 확인한다.
2. 수정이 완료되면 상단에 메시지가 나타난다.
3. 회원 아이디와 이름은 LOGIN_USER 세션에 담긴 값을 이용하여 자동 완성된다.
4. 각각 정보는 부분 수정이 가능 하며 비밀번호에 아무 값도 입력 하지 않으면 ‘ ’값으로 인식되기 때문에 null 값으로 바꾸어 변경값으로 값이 입력되지 않게 한다. |
||||||||||
