JSP 교육정리 13일차(project)

예제 순서

- 웹 세미 프로젝트 1일차

  ㅇ 기능 구체적 문서화

- 주제 선정 : 지역 빵집 맛집 소개

  ㅇ 참고 사이트 : 2개 선정

https://www.siksinhot.com/(식신)

식신 : 대한민국 No.1 맛집검색,맛집추천

https://www.mangoplate.com/

망고플레이트: 나만의 맛집 검색

 

 

오늘 공부 한 것

- 웹개발 설계

  ㅇ 요구사항

    1. 기능, 구체적(문서화)

    2. 화면(UI) - 설계의 시각화

 

asd

 

오늘 업무의 요구사항, 화면 UI 구성설계
개발을 한다고 하면 외부에서 입찰 등의 의뢰를 받아서 프로젝트를 진행하게 된다. 
그러면 기업의 요구에 따라 사이트를 만들어야 하는데 요구에 맞는 설계를 해야한다. 


1)
[주제 선정]
무엇을 만들어달라고 하는지 요구사항을 정리하는 것이 중요하다. 
기능은 무엇인지 구체적 문서를 만들어야 한다. 
1. 회원  
(회원만 가능하게 할지 비회원도 가능하게 할지 정하기 -내가 생각한것과 실제 만들려고 하는것은 다르다-)
   문서화 시키고 정리하는게 중요하다. 그래야 이 기능을 어떻게 구현할지 알 수가 있다. 

 

2)
[화면에 대한 구성(UI)]
 기업들은 하나하나 기능들에 대해서 문서화 시킨다.

프로젝트 관리(인터넷 안에서 문서관리를 해보자)

-발사믹을 이용해 웹사이트설계하기
browser를 드래그해 가져온다. 
all assets big등등의 요소를 이용해서 임의적으로 사이트 구성을 해보도록한다.- 

*설계는 
PM이나 DESIGNER가 설계를 완료하고 분배를 하게 된다. 
발사믹을 이용해서 구성을 한번 만들어보고나면 TABLE이 무엇이 필요할지 알 수 있게 된다. 

 

 

- 채팅창 사진업로드 구현(write.jsp)

  ㅇ사진이 저장되는 경로

C:\eclipse\web_workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\web\upload

 

- 다른 서버(톰캣)을 사용해서 사진이미지 올리기

  ㅇ 톰캣 위치가 기준

  ㅇ DB가 경로를 저장(db에서 url은 가져오지만 실제 이미지가 없다)

  ㅇ 다른 톰캣이기 때문에 타인의 이미지는 보이지 않는다.(동일 톰캣일때만)

  ㅇ 개발이 끝나면 한 서버에 올려서 접근할 것

 

- 웹 세미 프로젝트 1일차

  ㅇ 기능 구체적 문서화

세부 항목

- 이벤트(우리회사)   
- 이벤트 상세   
- 이벤트 결제   
- community 페이지   
- community 글쓰기  페이지   
- community 수정 페이지   
- community 관리자 페이지   
- 리뷰   
- 사이트소개   
- 관리자페이지   
- 맛집 페이지    
- 마이 페이지    
 

 

 

요구사항 명세서	클라이언트 요구 : 기능 적인 측면보다 소비자들이 저희 동네에 이런 빵집들이 있다는 것을 인지 할 수 있도록 사이트에 자주 노출시켜주세요.
목  록
메인화면
회원가입
로그인
우리동네 목록
우리 동네 상세
이벤트(우리 회사)
이벤트(제휴업체)
이벤트(제휴업체)- 상세
이벤트(제휴업체)- 결제
community 페이지
community 글쓰기  페이지
community 수정 페이지
community 관리자 페이지
리뷰
사이트소개
맛집 페이지
마이 페이지
마이페이지-수정페이지
관리자페이지

    
메인화면   
1)메뉴바에 로그인,검색,이벤트,우리동네(6개 지역) 페이지로 넘어갈 수 있게한다. 메뉴바는 화면을 스크롤시 fixed로 고정해 준다.   
2)우리동네 part에 해당 지역 사진을 클릭하면 우리동네 페이지로 이동하도록 한다. /(모든 part에서 동일 기능 적용)   
3) 검색기능을 통해 해당 맛집에 대한 정보로 이동하도록 한다.    
4)맛집 part에서 슬라이드 형식으로 맛집이 노출되도록 한다. 추천수가 가장 많은 순으로 top6를 뽑아 슬라이드를 만들고 특정 이미지를 클릭할 시에 해당 가게의 상세 페이지로 넘어가도록 만든다.    
5)리뷰 part에서 그림과 타이틀 제목 작성자 조합으로 신뢰성을 강조하도록 한다. 
리뷰 part를 클릭시 해당 페이지로 넘어가도록 한다. 리뷰part에 이미지를 클릭하게 되면 해당 가게의 네이버 블로그로 이동하고 ,하단 메뉴바의 후기 텍스트를 클릭하면 후기 목록 페이지로 넘어가도록 만든다.   
6)핫딜 part에서 가격을 할인율을 적용해 보여준다.  메뉴바의 핫딜을 클릭할 경우 핫딜 목록페이지로 이동하고 핫딜의 이미지를 클릭할경우 해당 핫딜의 상세 페이지로 넘어간다.
   핫딜에는 우리 회사(5조) 이벤트와 사업자 이벤트 목록이 존재한다.   
7)메뉴바 하단      About us,후기,Community(문의,자유게시판),제휴문의,+상단bar에 있는 내용 추가 한다.    
8) 메뉴바의 로그인 버튼을 누르면 로그인 창이 뜨고 로그인 되면 로그인 버튼이 아이콘으로 바뀌고 아이콘을 클릭하면 마이페이지로 넘어간다.   
로그인   
1)position으로 현재 창위에 구역을 만들고 뒤의 페이지는 사용불가능 상태를 만든다.    
2)로그인,비밀번호 기능을 넣는다. 비밀번호는 password 속성 기능으로 표현해 보안을 더해준다.    
3)계정이 없을 시에 회원 가입 페이지로 넘어가는 버튼이 있다.   
4)아이디/비밀번호 찾기 기능을 구현한다.클릭시 아이디 비밀번호 찾는 페이지로 넘어간다.   
   
회원가입   
1)아이디 입력창과  아이디 중복검사 기능, 비밀번호 입력창 비밀번호 입력확인창을 만들어 동일한지 확인한다.   
2)아이디나 비밀번호를 잃어버렸을 때 찾을 수 있도록 하는 질문 답변 창을 구성한다.   
3)이름,성별,생일,주소,전화번호,이메일을 입력하는 부분이 존재한다.   
4)확인 버튼을 누르면 가입이 완료되며 가입완료 창이 뜨고 메인으로 넘어가는 버튼이 생성되어 버튼을 누르면 메인 페이지로 넘어간다. 취소를 누를경우에도 메인 페이지로 넘어간다.   
   
우리동네-(특정지역 하나)   
1)하나의 가게만 순차적으로 보여주며 스크롤을 내릴 시 자동으로  가게목록이 생성된다. 
2)왼쪽엔 사진이 설명보다 크게 존재하고 설명란에는 가게이름, 평점,대표메뉴,가게 전화번호를 간단하게 보여준다. 설명의 아래쪽엔 추천 비추천 부분이 보여지도록 한다. 
3)이미지 또는 설명란을 클릭하면 상세페이지로 넘어간다.    
   
우리동네-디테일페이지    
1)맨 위 상단에 해당 가게의 가게이름,평점,전화번호을 적시하여 어떤 가게인지 보여준다. 
2) 사진을 슬라이드 형식으로 나열한다. 
3)상세설명 
º오시는길
º안내사항
4)댓글기능을넣어 소비자들이 평가를 남기도록 한다. 
5)마음에 드는 가게를 위시리스트에 담으면 정보창에 1이 추가된다.   
   
맛집   
1) 우리 동네-디테일페이지와 이하 동일한 페이지이다.    
   
이벤트(핫딜)-(사업자이벤트) *특이점: 이외의 페이지는 구입할 수 없지만 이페이지에서는 구매하기가 가능하다.
핫딜하는 상품은 이 사이트에서만 구매할 수 있기 때문에 구매 페이지를 따로 만든것이다. 소상공인들이 할인하기 쉽지 않기 때문에 이 페이지를 만든다.    
1.목록 페이지 
1) 상단에 큰 사이즈의 이미지가 보이고 이미지 오른쪽 하단에 기존의 금액과 할인된 금액을 표시한다. 사진의 아래에는 가게 이름 상품이름을 보이도록 하고 코멘트를 조금 달아 한줄씩 보여지도록한다. 
   
2.상세 페이지 
1) 상단에는 해당 할인 상품의 이미지가 보이고 이미지 아래에는 가게 이름, 상품 이름, 할인가격, 할인 기간을 명시한다.
2) 상세 내용에는 식당소개 메뉴 소개 유의사항 환불규정을 자세히 적는다. 
3) 구매하기 버튼은 스크롤을 내려도 고정되도록하여 어느 위치에서도 구매할 수 있도록한다. 구매하기 버튼을 누르면 새창이 떠서 결제 페이지를 띄운다.
    
2-1.결제 페이지 
1) 결제방법(핸드폰,신용카드,payco,kakaopay,무통장입금)을 선택란에 주어지도록 하고 몇개 살지 수량을 선택하도록 한다. 

2) 결제하기 버튼을 누르면 쿠폰번호가 주어지는 페이지로 이동하도록 한다.(시간남을때 쿠폰발급까지 구현하도록 한다.)   
   
이벤트(핫딜)-(우리 회사(5조)이벤트) 
1)  배너형식으로 이벤트 중인 목록이 보여지도록 한다. 
2)  상세페이지로 들어가서 무언가를 하는 것이 아니라 알림 형식의 이벤트만 진행한다(ex)회원가입시 500포인트 증정,카드할인,특정시간 타임어택 할인)
      
리뷰    
1)리뷰 목록 페이지에는  상단에는 이미지, 이미지 아래에는 블로그의 내용을 한줄로 요약해서 명시한다. 클릭시 해당 내용의 네이버 블로그로 이동하도록 한다. 
       
About us   
1)회사 위치 ,회사 이념, 창업자 comment 의 내용을 보여주도록 한다. 
2)제휴문의 알림 텍스트를 포함시킨다.    
   
community
   
1) 제목, 작성자,게시판 번호, 작성시간이  표시되어 있다. 
2)  게시판 글 목록 하단에는  글쓰기버튼이 존재한다.  글쓰기 버튼을 누르면 글쓰기 페이지로 넘어간다.   
community-1 글쓰기 페이지
1) 제목을 작성하고 , 이미지를 올리는 기능이 있도록한다.
2) 하단에는 등록 기능,돌아가기 버튼이 있다.   
community-2 수정 페이지 
1) 해당 작성자만 수정 및 삭제 버튼이 보이도록 설정한다.    
community-3 관리자 권한 페이지 
1)일반 사용자의 기능을 그대로 사용할 수 있도록 하고  게시판 list는 그대로 보이되 check 기능을 넣어서 관리자 권한으로 삭제할 수 있도록 설정한다. 
      
마이페이지 
   
1) 수정 페이지로 넘어가는 버튼이 있다.
2) 자신의 주소 ,이름, wishlist, 포인트가 기재되어 있다.    
1-1.수정 페이지
1) 이름과id를 제외한 모든 요소들을 수정가능하게 만든다. 
2)  회원탈퇴 버튼을 누르면 탈퇴가 되도록하며 탈퇴가 되면 말없이 메인페이지로 넘어가도록 만든다.    
       
관리자 페이지    
1-1.회원관리 페이지    
2-1 이벤트 관리 페이지    
2-2이벤트 관리 페이지(사업자)   
! 관리자 로그인시 로그인 버튼이 아이콘으로 바뀌며 아이콘 클릭시 관리자 페이지로 이동한다. 
관리자 페이지 헤더 메뉴 - 우리동네 / 맛집/ 5조 이벤트 / 사업자 이벤트 / 회원 관리 / 커뮤니티 / 리뷰를 관리할 수 있는 (ajax또는 페이지 이동)
테이블을 생성한다. (삭제 수정)   

 

 

복습 할 것

- 네이터 에디터 글쓰기 및 사진 업로드 구현 다시 재정리 할 것

-  JSP 교육정리 10일차 미구현된 부분

 

 

tip.

- 설계 시각화 유틸 : adobe에서 만든 프로그램

https://balsamiq.com/wireframes/ => download desktop app ver

 

- logo 제작 유틸

https://www.aaa-logo.com/ => download now => Download aaalogo5-setup.exe

 

 

용어