Con spirito Social movier 모바일웹어플리케이션 PM : 200824415 김다정팀원 : 200824407 경주리 200824429 김소담 200824543 최은미 Ver 1.0 2012 년 12 월 5 일
제, 개정내역 버전 / 릴리스작성일자개요 1.0 2012.12.5 신규제정 작성자 기능명 이름 로그인, 로그아웃탈퇴하기 SNS 추천하기 SNS 댓글리뷰작성영화관검색 김다정, 최은미 영화검색 영화예매 영화예매내역조회 / 취소 경주리, 김소담 그외 공동 2012 년컴퓨터종합설계페이지 1/17
목 차 1. 모바일웹어플리케이션접속방법... 3 1.1. 주소... 3 2. 모바일웹어플리케이션사용방법... 4 2.1. 메인메뉴... 4 2.2. 상세메뉴... 5 2.2.1. 로그인, 로그아웃... 5 2.2.2. 탈퇴하기... 7 2.2.3. SNS 추천하기... 8 2.2.4. SNS 댓글리뷰작성... 9 2.2.5. 영화검색... 11 2.2.6. 영화관검색... 13 2.2.7. 영화예매... 16 2.2.8. 영화예매내역조회 / 취소... 30 2012 년컴퓨터종합설계페이지 2/17
1. 모바일웹어플리케이션접속방법 1. 1. 주소 주소창에아래의링크를입력한다. http://socialmovier.cafe24.com http://socialmovier.cafe24.com/index.jsp 2012 년컴퓨터종합설계페이지 3/17
2. 모바일웹어플리케이션사용방법 2. 1. 메인메뉴메인메뉴는영화 / 영화관검색, 빠른예매하기, 마이페이지, 로그인 / 로그아웃으로구성되어있으며중앙에는현재상영중인영화를볼수있다. 영화, 영화관중사용자가원하는것을검색할수있다. 검색옵션으로 영화 를선택하여영화를검색하여영화를예매할수있고, 영화관 을선택하여영화관을검색하여영화를예매할수있다. [ 검색옵션 : 영화 선택시화면 ] [ 검색옵션 : 영화관 선택시화면 ] 2012 년컴퓨터종합설계페이지 4/17
2. 2. 상세메뉴 2.2.1. 로그인, 로그아웃 Index.jsp페이지에서맨아래의로그인버튺을선택하면로그인을할수있다. 우리시스템은특별한회원가입이필요하지않고, 이미가입된 SNS 중 facebook계정으로간단히로그인할수있다. 한번로그인하면시스템에간단한회원정보 (facebook계정의아이디, 이름, 이메일주소 ) 가자동으로저장이된다. Main2.jsp페이지에서로그아웃을할수있다. 1) Index.jsp페이지의하단로그인버튺을누른다. 2) facebook 로그인페이지로넘어가서이미가지고있는 facebook계정의 id, password를텍스트박스에입력하고로그인을누른다. 3) Main2.jsp페이지로이동하여 Welcome! :-) 에서자신의이름이뜨며로그인되었음을알수있다. 4) 로그아웃을원할경우 Main2.jsp페이지의하단로그아웃버튺을누른다. 5) Index.jsp페이지로이동한다. 2012 년컴퓨터종합설계페이지 5/17
[index.jsp 페이지로그인버튺클릭 ] [facebook 계정 id, password 입력 ] 2012 년컴퓨터종합설계페이지 6/17
[main2.jsp 페이지로그아웃버튺클릭 ] [index.jsp 페이지 ] 2.2.2. 탈퇴하기 Main2.jsp페이지에서마이페이지버튺을클릭하면 mypage.jsp페이지로이동한다. 이페이지에서탈퇴하기버튺을누르면회원탈퇴를할수있다. 회원탈퇴를하면저장된회원의정보와예매내역들이모두삭제된다. 1) Main2.jsp페이지의가운데마이페이지버튺을누른다. 2) mypage.jsp페이지에의탈퇴하기버튺을누른다. 3) 저장된회원정보와예매내역들이탈퇴처리와동시에삭제된다. 2012 년컴퓨터종합설계페이지 7/17
[mypage.jsp 페이지탈퇴하기버튺클릭 ] [mypage.jsp 페이지 ] 2.2.3. SNS 추천하기검색된영화의자세한정보를보는페이지 (resultmovie.jsp) 와검색된영화의자세한정보를보는페이지 (resulttheater2.jsp) 에서특정영화나영화관을예매하기버튺밑의페이스북 좋아요 버튺을눌러자신의페이스북에게시하여추천할수있고 보내기 버튺을눌러친구들에게메시지를보내추천할수있다. 1) 특정영화나영화관의정보를보는페이지에서예매하기버튺아래페이스북 좋아요 버튺을클릭한다. 2) 해당영화나영화관정보가자신의페이스북페이지에업로드ㄴ되어나의페이스북친구인사람들에게추천이된다. 3) 보내기 버튺을누를경우특정친구에게메시지를보내해당영화나영화관을추천할수있다. 2012 년컴퓨터종합설계페이지 8/17
[ 특정영화정보페이지 ] [ 특정영화관정보페이지 ] 2.2.4. SNS 댓글리뷰작성검색된영화의자세한정보를보는페이지 (resultmovie.jsp) 와검색된영화의자세한정보를보는페이지 (resulttheater2.jsp) 에서가장맨하단소셜댓글을클릭하여특정영화나영화관에대해리뷰를작성할수있고특정리뷰글에대해답글을쓸수있고 좋아요 를클릭할수있고자신이쓴소셜댓글을삭제할수도있다. 1) 특정영화나영화관의정보를보는페이지의제일하단의소셜댓글을클릭한다. 2) 텍스트박스에특정영화나영화관에대한리뷰를작성하고댓글달기버튺을클릭한다. 3) 해당영화나영화관의정보를보는페이지에작성한리뷰댓글이최근순서대로업로드된다. 2012 년컴퓨터종합설계페이지 9/17
4) 다른사람이작성한리뷰댓글에대해답글을쓰고싶을경우답글달기버튺을클릭하여답글을쓸수있다. 5) 다른사람이작성한리뷰댓글하단의좋아요버튺을누를경우다른사람이작성한글을추천할수있다. 6) 후에자신이쓴리뷰댓글을삭제하고싶을경우자신이쓴글의오른쪽상단의 X삭제버튺을누르면삭제를할수있다. 2012 년컴퓨터종합설계페이지 10/17
[ 특정영화정보페이지 ] [ 특정영화관정보페이지 ] 2.2.5. 영화검색메인페이지 (main2.jsp) 에서상단의검색옵션으로 영화 를선택한상태에서입력창에 007 이라는영화제목키워드를입력하고검색버튺을누르면키워드와일치하는영화리스트를최근작우선순위로볼수있다. 1) Main2.jsp페이지의상단검색옵션으로 영화 를선택한다 2) 텍스트박스에검색하고싶은영화이름을나타내는음절이나어절을입력하고검색버튺을누른다. 3) 일치하는영화리스트를최근작순서대로볼수있다. 4) 영화이름목록리스트중하나를선택하면선택한영화의자세한정보를볼수있는개별영화정보보는페이지 (resultmovie.jsp) 로이동한다. 2012 년컴퓨터종합설계페이지 11/17
[ 메인페이지의검색옵션 영화 선택 ] [ 키워드와일치하는영화검색리스트 ] 개별영화정보보기페이지 (resultmovie.jsp) 에서간단한영화정보는물롞주요영화정보 ( 줄거리, 평점 ), 사진, 예고편, 소셜댓글세부항목제목을터치하여펼치면자세한영화정보를볼수있다. 5) 개별영화정보보는페이지 (resultmovie.jsp) 에서영화이름, 포스터, 영화상영된날짜, 감독, 주연배우, 영화장르, 영화관람가, 상영시간, 예매하기버튺, 추천된횟수등을볼수있다. 6) 세부항목제목 ( 주요영화정보, 사진, 예고편, 소셜댓글 ) 을터치하면더자세한영화정보를볼수있다. 2012 년컴퓨터종합설계페이지 12/17
7) 예매를원할경우현재상영중인영화에한해예매를할수있다. [ 간단한영화정보페이지세부메뉴클릭 ] [ 자세한영화정보페이지펼쳐짐 ] 2.2.6. 영화관검색메인페이지 (main2.jsp) 에서상단의검색옵션으로 영화관 을선택하면영화관검색을할수있는페이지로이동하여가장먼저지역을선택하고그에따른도시를선택하고주요영화관 ( 롯데시네마, 메가박스, cgv) 을선택하면해당선택옵션에따른영화관리스트를볼수있다. 1) Main2.jsp페이지의상단검색옵션으로 영화관 을선택한다. 2012 년컴퓨터종합설계페이지 13/17
2) 영화관검색페이지 (searchtheater2.jsp) 로넘어와서지역선택 -> 도시선택 -> 영화관순서대로 select박스를선택하고검색버튺을누른다. 3) 선택옵션에따른영화관리스트를볼수있다. 4) 영화관리스트중하나를선택하면선택한영화관의자세한정보를볼수있는개별영화관정보보는페이지 (resulttheater2.jsp) 로이동한다. [ 메인페이지검색옵션 영화관 선택 ] [ 키워드와일치하는영화검색리스트 ] 여기서특정영화관의이름, 예를들어 메가박스장산 을클릭하면해당영화관정보보기페이지 (resulttheater2.jsp) 로이동하여간단한영화관정보는물롞영화관위치, 자세한영화관약도 (naver map), 주차 / 교통정보, 영화관사진, 소셜댓글세부항목제목을터치하여자세한영화관정보를볼수있다. 5) 해당영화관정보보는페이지 (resulttheater2.jsp) 에서영화관로고, 영화관이름, 상영관이름, 홈페이지주소, 전화번호, 추천횟수등을볼수있다. 2012 년컴퓨터종합설계페이지 14/17
6) 세부항목제목 ( 영화관위치, 영화관약도, 주차 / 교통정보, 사진, 소셜댓글 ) 을터치하 면더자세한영화관정보를볼수있다. 7) 예매를원할경우현재상영중인영화에한해예매를할수있다. [ 영화관정보페이지세부메뉴클릭 ] [ 자세한영화관정보페이지펼쳐짐 ] 2012 년컴퓨터종합설계페이지 15/17
2.2.7. 영화예매 영화예매에접근하게되는경우는다양하다. 영화검색도중검색된영화목록에서 예매하기 버튺을누르거나, 영화관검색도중검색된영화관목록에서 예매하기 를누르면해당영화, 영화관이선택된상태에서영화예매를진행할수있다. 예를들면아래의왼쪽그림과같이부산광역시의롯데시네마중부산본점의 예매하기 버튺을누르면오른쪽그림과같이영화관에롯데시네마 / 부산본점정보가포함된상태로예매를시작할수있다. [ 영화관검색결과에서예약하기선택 ] [ 예약하기화면에서영화관내용이채워진 상태 ] 2012 년컴퓨터종합설계페이지 16/17
2.2.7.1. 시간, 영화관, 영화정보입력 [ 예매하기첫페이지 ] 하단의시간. 영화관, 영화버튺중사용자가영화예매시우선순위로여기는것을선택하여정보를입력할수있다. 이때에는먼저선택해놓은정보가기준이되어다음에선택할정보가보여질때고려된다. 예를들면사용자가시간을 16:00 로입력한후영화관, 영화버튺을선택할경우, 16:00 이후에상영되는영화관, 영화를보여주는것이다. 2012 년컴퓨터종합설계페이지 17/17
2.2.7.2. 날짜, 시간정보입력 [ 시간 ] 버튺을선택한화면 시간 버튺을선택하면예매하고자하는영화의날짜, 시간정보를입력할수있다. 1) 날짜를선택해주세요 를선택하면달력이나타나고사용자는특정날짜를선택할수있다. (2012 년 11 월 29 일 ) 2) 날짜완료 버튺을누르면상단의날짜텍스트박스에선택한날짜가입력된다. 2012 년컴퓨터종합설계페이지 18/17
[ 날짜를선택하세요 를누른화면 ] [ 달력에서특정날짜선택 ] 2012 년컴퓨터종합설계페이지 19/17
[ 날짜완료 를선택하여날짜입력이완료된상태 ] 3) 시간의선택도마찬가지이다 [ 시간을선택하세요 를누른화면 ] [ 특정시간선택후 시간완료 까지완료한상 태 ] 이것으로영화예매중시간정보입력이완료되었다. 2012 년컴퓨터종합설계페이지 20/17
2.2.7.3. 영화관정보입력 다음은 영화관 버튺을눌렀을때의화면이다. 지역, 도시, 영화관별로선택을하여사용 자가원하는영화관정보를입력할수있다. [ 영화관 ] 버튺을선택했을때의모습 [ 지역, 도시, 영화관을선택하고 특정영화관선택 ] 2012 년컴퓨터종합설계페이지 21/17
2.2.7.4. 영화정보입력다음은 영화 버튺을눌렀을때의화면이다. 가나다순, 인기순 중원하는순서대로볼수있으며이곳에나타나는정보는앞서선택했던시간, 영화관정보가고려된영화정보들이다. 예를들면시간으로사용자가선택한 21:00 이후의시간들중예매가가능한영화들이 나타나있다. [ 영화버튺을선택한화면 - 인기순 ] [ 영화버튺을선택한화면 - 가나다순 ] 2012 년컴퓨터종합설계페이지 22/17
( 텍스트박스의오른편에있는 새로고침 아이콘을클릭하면칸이비워지며다시값을 입력해넣을수있다 ) 이것으로시간, 영화관, 영화정보가모두입력되었다. 매뉴얼대로시간, 영화관, 영화순 서가아닌, 사용자가원하는우선순위대로선택하여예매가가능하다. 상단의날짜, 시간, 영화관, 영화정보가모두입력되면좌석을선택할수있는화면으로 이동한다. 2.2.7.5. 좌석선택 좌석선택페이지로넘어오면이전에입력했던영화, 시간, 영화관정보가표시되어있 는것을볼수있다. 사용자가원하는좌석을선택한후 다음 버튺을누르면결제페이지로넘어간다. 이 때선택했던좌석을한번더선택하면좌석선택이해제된다. [ 좌석선택화면 ] 2012 년컴퓨터종합설계페이지 23/17
2.2.7.6. 결제하기 결제를시작하기전결제방법을선택하는페이지이다. 영화, 영화관, 시간, 그리고 좌석까지사용자가선택했던정보모두가상단에표시되어있다. [ 결제방법선택화면 ] 총결제금액이나타나있고, 계좌이체, 신용카드중원하는결제방법을선택한다. 2012 년컴퓨터종합설계페이지 24/17
[ 계좌이체로결제하기 ] 를선택 [ 신용카드로결제하기 ] 를선택 두결제창모두, 정확한값이입력되지않았을경우결제가완료될수없도록유효성검 사를하고있다. 2012 년컴퓨터종합설계페이지 25/17
[ 유효성체크로결제가완료되지않은상태 ] 2.2.7.7. 결제완료 2.2.7.6 의결제내용입력을모두마치고, 유효성검사에서문제가발생하지않는다면결제가완료된다. 결제완료는다음과같은페이지의창으로확인할수있다. 2012 년컴퓨터종합설계페이지 26/17
[ 결제완료창 ] 2012 년컴퓨터종합설계페이지 27/17
1) 결제정보 선택시결제한사람의이름과, 결제방법인카드사, 카드번호를확인 할수있다. [ 결제정보 선택 ] 2012 년컴퓨터종합설계페이지 28/17
2) 확인 선택시자세한예매정보확인이가능하도록마이페이지창으로이동한다. [ 확인 선택후마이페이지로이동 ] 2012 년컴퓨터종합설계페이지 29/17
2.2.8. 영화예매내역조회 / 취소 영화예매내역조회로의접근방법은다양하다. 영화예매완료후예매정보를확인하는 페이지로이동하거나, 메인화면에서마이페이지를선택하여예매정보를확인하는페이지 로이동할수도있다. [ 예매내역페이지에접근 ] 예매내역페이지에서는예매한영화이름, 영화관, 상영관, 날짜, 시간, 좌석정보, 구매정 보들을확인할수있다. 또한자세한 결제정보, 실제영화관에서영화를볼때사용될바코 드가들어있는 티켓보기, 영화예매를취소할수있는 취소하기 를제공한다. 2012 년컴퓨터종합설계페이지 30/17
1) 결제정보 : 결제방법 ( 신용카드로결제 or 계좌이체로결제 ), 결제자, 그리고 결제방법에대한간략한정보를나타낸다. [ 결제정보 를선택 ] 2012 년컴퓨터종합설계페이지 31/17
2) 티켓보기 : 실제영화를볼때매표소에서제시할바코드정보를포함하고있다. 팝업창으로나타나며바코드외에도영화예매에대한정보를확인할수있다. [ 티켓보기 를선택 ] 3) 취소하기 : 영화예매를취소할수있는기능이며, 예매내역 DB 와결제내역 DB 에서해당내용이삭제가된다. 한번더삭제여부를묻고, 사용자가삭제를원할경우예매취소가완료된다. 예매취소이후에는마이페이지화면으로이동한다. 2012 년컴퓨터종합설계페이지 32/17
[ 예매내역페이지 ] [ 자칼이온다 영화목록의 취소하기 버튺 ] [ 취소완료후마이페이지로이동함 ] [ 예매취소가완료되었음을확인할수있다 ] 2012 년컴퓨터종합설계페이지 33/17
2012 년컴퓨터종합설계페이지 34/17