또자의 코딩교실

[스마트인재개발원]-1차 프로젝트를 진행하며-(4-2) 본문

코딩공부/프로젝트 진행

[스마트인재개발원]-1차 프로젝트를 진행하며-(4-2)

또자자 2021. 12. 1. 14:35

이번 포스팅에서는 실제 개발했던 프로젝트 사이트의 이동경로에 맞춘 Back-end Process중

마이페이지 수정 - 영화 메인 페이지 - 영화 상세보기 페이지를 유즈케이스와 화면설계서를 동반하여 설명하고자 한다.

 

사이트의 서비스 흐름도는 다음과 같다.

사이트 이용 흐름도

 

이제 각 사이트들의 최종 결과 화면을 보며 백엔드적인 요소들을 살펴보자.


위는 마이 페이지의 화면설계서이다. 코딩이 진행된 View에서 중요한 body 부분만 발췌하겠다.

<body>
	<!-- 툴바 -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<%=cpath%>/moviemain.do">BESPOKE CINEMA</a>
    </div>
    <div class="wrap">
        <div class="search">
           
          </button>
        </div>
     </div>
     <ul class="nav navbar-nav navbar-right">
      <li><a href="<%=cpath%>/moviemain.do">Main</a></li>
      <li><a href="<%=cpath%>/moviemycal.do">캘린더</a></li>
      <li><a href="<%=cpath%>/logout.do">로그아웃</a><li>
    </ul>
    </div>
</nav>
<div class="wrap1">
    <div class="form-wrap">
			
			<!-- form태그로 기존 정보가 수정된 것을 보내준다. 사용하는 컨트롤러는 movieUpdate.do -->
        <form id="login" action="<%=cpath%>/movieUpdate.do"" class="input-group" mehtod="post">
            <h1 style="font-weight: bold; text-align: center; color: white;">마이 페이지</h1>
            <br>
            <input type="hidden" name="idx" value="<%=vo.getIdx()%>">
            <td><input  name="id"  id=id" type="id" class="input-field" style="color: gray" value="<%=vo.getMb_id()%>" required style="color: white;" ></td>
            <td><input  name="pwd" id="password1" type="password" class="input-field"   placeholder="변경하실 비밀번호를 입력해주세요" required style="color: white;"></td>
            <td><input id="password2" name="pwd2" type="password" class="input-field" placeholder="비밀번호를 한번 더 입력하세요"  required style="color: white;"></td>
            <td><input class="input-field" style="color: gray"  value="당신의  MBTI는 <%=vo.getMb_mbti()%>입니다." required style="color: white;" ></td>
            <p class="input-field" style="color: gray; font-size: 15px; font-weight:lighter; "> MBTI 수정 : <span class="MBT">
            </span>
             &nbsp
              &nbsp
               &nbsp
               <!-- 변경할 mbti 선택 -->
            <select name="mbti" id="mbtilist" style="height:100%;">
              <option value="INTJ">INTJ</option>
              <option value="INTP">INTP</option>
              <option value="ENTJ">ENTJ</option>
              <option value="ENTP">ENTP</option>
              <option value="INFJ">INFJ</option>
              <option value="INFP">INFP</option>
              <option value="ENFJ">ENFJ</option>
              <option value="ENFP">ENFP</option>
              <option value="ISTJ">ISTJ</option>
              <option value="ISFJ">ISFJ</option>
              <option value="ESTJ">ESTJ</option>
              <option value="ESFJ">ESFJ</option>
              <option value="ISTP">ISTP</option>
              <option value="ISFP">ISFP</option>
              <option value="ESTP">ESTP</option>
              <option value="ESFP">ESFP</option>
          </select></p>
            
           	<!-- 데이터 완료 결과 최종 제출 -->
            <button class="submit" onclick="test()">수정완료</button>
            
            <br>
            <br>
        </form>
         
    </div>
</div>
<!-- 비밀번호 일치 확인 기능 자바스크립트로 구현 -->
 <script type="text/javascript">
    function test() {
      var p1 = document.getElementById('password1').value;
      var p2 = document.getElementById('password2').value;
      if( p1 != p2 ) {
        alert("비밀번호가 일치 하지 않습니다");
        return false;
        
      } else{
        alert("비밀번호가 일치합니다");
        return true;
      }

    }
  </script>

</body>

다음은 사용했던 controller이다.

//사용한 DAO
public UserVO isLogin(UserVO vo) {
		SqlSession session=sqlSessionFactory.openSession();
		vo=session.selectOne("isLogin",vo);
		session.close();
		return vo;
	}
    
    
//사용한 Controller 
public class MemUpdateController implements Controller{

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		BoardDAO dao = new BoardDAO();
		
		//getParameter로 사용할 객체들을 불러온다.
		String pwd = request.getParameter("pwd");
		String mbti = request.getParameter("mbti");
		int idx=Integer.parseInt(request.getParameter("idx"));
        
		
		UserVO vo = new UserVO();
		vo.setMb_pwd(pwd);
		vo.setMb_mbti(mbti);
		vo.setIdx(idx);
		//회원정보 갱신여부를 cnt로 표시
		int cnt = dao.memberUpdate(vo);
		
		String nextPage = null;
		String cpath = request.getContextPath();
		System.out.println(vo);
		if(cnt > 0) { //성공했을경우 moviembti.do로 redirect
			nextPage = "redirect:/moviembti.do";
		} else { 
			throw new ServletException("error");
		}
		return nextPage;
	}

}

위는 영화 메인 페이지의 화면설계서이다. 코딩이 진행된 View에서 중요한 body 부분만 발췌하겠다.

<!-- 사용할 데이터들을 불러온다. -->
      <%
    String cpath = request.getContextPath(); // /m02
    UserVO vo=(UserVO)session.getAttribute("vo");
    ArrayList<ReviewVO> list=(ArrayList<ReviewVO>)request.getAttribute("list");
    MovieVO vo1 =(MovieVO)request.getAttribute("vo1");
    MovieVO vo2 =(MovieVO)request.getAttribute("vo2");
    MovieVO vo3 =(MovieVO)request.getAttribute("vo3");
    MovieVO vo4 =(MovieVO)request.getAttribute("vo4");
    %>
    
<body>
<!-- 툴바 -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<%=cpath%>/moviemain.do">BESPOKE CINEMA</a>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="<%=cpath%>/moviembti2.do?mb_mbti=<%=vo.getMb_mbti()%>&mb_id=<%=vo.getMb_id()%>&mb_pwd=<%=vo.getMb_pwd()%>">MBTI 추천</a></li>
        <li><a href="<%=cpath%>/movieContent.do?idx=<%=vo.getIdx()%>">내정보</a><li>
        <li><a href="<%=cpath%>/logout.do">로그아웃</a><li>
          <li></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 사이트 메인 제목 -->
<div class="jumbotron text-center">
    <h1 style="font-size: 80px; position:static; "> MOVIE CHART </h1>
    <p style="color: white; font-size: 25px; font-family: arial;">Bespoke Cinema</p>
  </div>


<!-- 영화 랜덤 디스플레이. mbtimain과 비슷하나 mbti가 같은것끼리 내보내주는 것은 아님. -->
<div class="container-fluid text-center bg-grey">
    <!-- 첫번재 영화 포스터와 제목 -->
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail" style="position: relative; left: -15%;">
          <img src="<%=vo1.getMovie_pos()%>" alt="Paris">
          <p style="color: white; font-size: 20px;"><%=vo1.getMovie_title()%><strong></strong></p>
          <!-- 좋아요 기능 -->
          <div class="h_container">
            <i id="heart" class="far fa-heart"></i>
          <!-- 상세보기 기능 -->  
          </div>
              <a href="<%=cpath%>/reviewList.do?movie_seq=<%=vo1.getMovie_seq()%>" class="myButton">상세보기</a>
            </div>
        </div>
     
		<!-- 두번째 기능 -->
        <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail" style="position: relative; left: -10%;">
          <img src="<%=vo2.getMovie_pos()%>" alt="Paris">
          <p style="color: white; font-size: 20px;"><%=vo2.getMovie_title()%><strong></strong></p>
          <div class="h_container">
            <i id="heart" class="far fa-heart"></i>
          </div>
              <a href="<%=cpath%>/reviewList.do?movie_seq=<%=vo2.getMovie_seq()%>" class="myButton">상세보기</a>
            </div>
        </div>
        
        <!-- 세번재 기능 -->
           <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail" style="position: relative; left: 0%;">
          <img src="<%=vo3.getMovie_pos()%>" alt="Paris">
          <p style="color: white; font-size: 20px;"><%=vo3.getMovie_title()%><strong></strong></p>
          <div class="h_container">
            <i id="heart" class="far fa-heart"></i>
          </div>
              <a href="<%=cpath%>/reviewList.do?movie_seq=<%=vo3.getMovie_seq()%>" class="myButton">상세보기</a>
            </div>
        </div>
        
        <!-- 네번째 기능 -->
           <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail" style="position: relative; left: 10%;">
          <img src="<%=vo4.getMovie_pos()%>" alt="Paris">
          <p style="color: white; font-size: 20px;"><%=vo4.getMovie_title()%><strong></strong></p>
          <div class="h_container">
            <i id="heart" class="far fa-heart"></i>
          </div>
              <a href="<%=cpath%>/reviewList.do?movie_seq=<%=vo4.getMovie_seq()%>" class="myButton">상세보기</a>
            </div>
        </div>
        </div>
      </div>
  </div>
  
  <!-- 영화 리뷰 유튜버 추천 -->
<br><br><br><br><br>
  <p style="color: white; font-size: 25px; font-family: arial;">REVIEW  YOUTUBER</p>
  
  <br><br><br><br>
  <!-- 첫번째 유튜버 -->
  <div class="container-fluid text-center bg-grey">
    <div class="row text-center">
      <div class="col-sm-4">
      <!-- 채널 프로필 사진 -->
        <div class="ythumbnail" style="position: relative; left: 10%;">
          <img src="https://yt3.ggpht.com/ytc/AKedOLSD3Wln2VwVObO7CpC6vXvVeSasNRaQk7y_hAaQ=s88-c-k-c0x00ffffff-no-rj" alt="고몽 유튜브" style="right: 2.5%;" >
          <!-- 채널 이름 -->
          <p style="color: white; font-size: 20px;"><strong>고몽</strong></p>
          <div class="h_container">
          <!-- 채널 링크 이동 -->
          </div>
              <a href="https://www.youtube.com/channel/UCpcft4FJXgUjnxWoQYsl7Ug" target='_blank' class="myButton">채널보기</a>
            </div>
        </div>
        
        <!-- 두번째 유튜버 -->
        <div class="row text-center">
          <div class="col-sm-4">
            <div class="ythumbnail"  style="position: relative; right: 5%;">
            
              <img src="https://yt3.ggpht.com/ytc/AKedOLSGnXjtNPvb7tvKccV2sOdbHzJQCKG_ct3c6ujegg=s88-c-k-c0x00ffffff-no-rj" alt="삐맨 유튜브" style="right: 2.5%;">
              <p style="color: white; font-size: 20px; text-align: center;"><strong>B-man 삐맨</strong></p>
              <div class="h_container">
              </div>
                  <a href="https://www.youtube.com/c/BMan%EC%82%90%EB%A7%A8" target='_blank' class="myButton">채널보기</a>
                </div>
            </div>
            
            <!-- 세번째 유튜버 -->
            <div class="row text-center">
              <div class="col-sm-4">
                <div class="ythumbnail" style="position: relative; right: 15%;">
                
                  <img src="https://yt3.ggpht.com/ytc/AKedOLRKnTogxZeoG1Fsqu317E90IsFK_Gu2r2bVm16eOQ=s88-c-k-c0x00ffffff-no-rj" alt="지무비 유튜브" style="right: 2.5%;">
                  <p style="color: white; font-size: 20px;"><strong>지무비:G Movie</strong></p>
                  <div class="h_container">
                  </div>
                      <a href="https://www.youtube.com/c/%EC%A7%80%EB%AC%B4%EB%B9%84" target='_blank' class="myButton">채널보기</a>
                    </div>
                </div>
                
                <!-- 네번째 유튜버 -->
                <div class="row text-center">
                  <div class="col-sm-4">
                    <div class="ythumbnail" style="position: relative; right: 30%;">
                  
                      <img src="https://yt3.ggpht.com/ytc/AKedOLSpVQUoPExGx6XJZlW1l0Z4Q_W208yIkHUh5s2Dvg=s88-c-k-c0x00ffffff-no-rj" alt="리뷰마스터 유튜브" style="right: 2.5%;">
                      <p style="color: white; font-size: 20px;"><strong>리뷰MASTER</strong></p>
                      <div class="h_container">
                      </div>
                          <a href="https://www.youtube.com/c/%EB%A6%AC%EB%B7%B0MASTER" target='_blank' class="myButton">채널보기</a>
                        </div>
                      </div>
                    </div>
                   <br>
                   <br>
                  </div>
                </div>
                <hr>
                <!-- 하단 풋바 -->
                <span style="color: white;">Bespoke cinema</span>
                <!-- 좋아요 기능 -->
                <script>
					$('i').on('click', function(){
 					 $('i').removeClass('selected');
 					 $(this).addClass('selected');
	

						});
</script>
</body>

사용한 컨트롤러는 다음과 같다.

public class MovieMainContentController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter writer = response.getWriter();
		MovieDAO dao1=new MovieDAO();
		//객체들을 가져오고 모든 영화 리스트들을 같이 가져온다.
		ArrayList<MovieVO> list = (ArrayList<MovieVO>)dao1.allMovieList();

		//랜덤으로 4개의 배열크기의 추천 movie seq를 추천해주는 알고리즘
		Random rd = new Random();
		int suggest[] = new int[4];
	      
		//랜덤 시퀀스 뽑아오는 이중for문
	      for(int i=0; i<suggest.length; i++) {
	         suggest[i] = rd.nextInt(list.size())+1;
	         
	         for(int j=0; j<i; j++) {
	            if(suggest[i] == suggest[j]) {
	               i--;
	            }
	         }
	      }
	      MovieVO vo1=dao1.movieList1(suggest[0]);
	      request.setAttribute("vo1", vo1);
	     
	      MovieVO vo2=dao1.movieList1(suggest[1]);
	      request.setAttribute("vo2", vo2);
	      
	      
	      MovieVO vo3=dao1.movieList1(suggest[2]);
	      request.setAttribute("vo3", vo3);
	      
	      MovieVO vo4=dao1.movieList1(suggest[3]);
	      request.setAttribute("vo4", vo4);
		return "main";
	}

}

위는 영화 상세보기 페이지의 화면설계서이다. 코딩이 진행된 View에서 중요한 body 부분만 발췌하겠다.

<!-- cpath를 가져온 다음 써야하는 데이터들을 vo를 통해 가져온다. -->
<%String cpath = request.getContextPath();%>

<%
    // Object Cating(객체형변환-제일중요)
    ArrayList<ReviewVO> r_list=(ArrayList<ReviewVO>)request.getAttribute("list");

    UserVO vo1=(UserVO)session.getAttribute("vo");
	MovieVO m_list=(MovieVO)request.getAttribute("list2");
	//m_list == m_seq
    
    
    //기존 user가 로그인이 되어있는지 확인하기 위해 세션값을 읽어오는 코드
    ReviewVO user=(ReviewVO)session.getAttribute("succ");
    
%>

<body>
<!-- 툴바 -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<%=cpath%>/moviemain.do">BESPOKE CINEMA</a>
    </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="<%=cpath%>/movieContent.do?idx=<%=vo1.getIdx()%>">내정보</a></li>
        <li><a href="<%=cpath%>/logout.do">로그아웃</a><li>
      <li><a href="<%=cpath%>/moviemycal.do">캘린더</a></li>
      </ul>
    </div>
</nav>

<!-- 포스터 -->
<div class="container-fluid bg-1"></div>
 <div class="img-1">
   <img src="<%=m_list.getMovie_pos()%>" class="img-1" alt="포스터">
</div>
 
 <!-- 유튜브 예고편 링크 -->
 <div>
  <iframe width="650" height="400" src="https://www.youtube.com/embed/<%=m_list.getMovie_pre()%>" 
  frameborder="8" style="position:absolute; left:800px; top:100px; "></iframe>
  </div>
  
  <hr>
<!-- 포스터 와 감독, 영화배우 -->

    <div id="minfo">
        
        <h3 style=" font-size:35px; color: white;"><%=m_list.getMovie_title() %></h3>
        <!-- list.get(0).getReview_seq()%> /// m_list.get(51).getMovie_direct()%> -->
        <p style="   color: white;">감독 : <span><%=m_list.getMovie_direct() %></span></p>
        <p style="   color: white;">배우 : <span><%=m_list.getMovie_actor() %></span></p>
        <p style="   color: white;">MBTI : <span><%=m_list.getMovie_MBTI() %></span></p>
        <p style="   color: white;">장르: <span><%=m_list.getGenre_name() %></span></p>
        <p style="   color: white;">개봉일자<span><%=m_list.getOpen_date() %></span></p>
      
    </div>
<!-- 줄거리 -->    
    <div id="story">
          <h2>줄거리</h2>
            <p><%=m_list.getMovie_story() %></p>
    </div>
    
  <hr>
  
     <div id="y_n">
        
        <h3 style=" font-size:35px; color: white;">영화</h3>
     	<!-- 영화 리뷰를 평점을 기준으로 7점이상이면 긍정적인 리뷰와 부정적인 리뷰로
     	바로 구분할 수 있게 하는 간단한 코드 -->
     	<% int cnt=0; %> <!-- 긍정 -->
        <% int cnt2=0; %> <!-- 부정 -->
        <% for(ReviewVO vo : r_list ){  %><!-- 리뷰리스트내의 모든 영역을 돔 -->
        <% if(vo.getLabel()==1){ %>
        	<% cnt+=1; %>
        	<!-- 7점이상일 경우 Label값은 1이 됨. 긍정카운트는 (cnt)이므로 cnt에 누적 1을 더해줌 -->
        <% }else{%>
        	<% cnt2+=1; %>
			<!-- 7점 이하일 경우 cnt2에 1누적시킴. -->       	
        <% }%>
        <% }%>
        
        <!-- 긍정 부정 퍼센트 계산 -->
        <% double cnt3 = cnt*1.96; %>
        <% double cnt4 = cnt2*1.96; %>
        <% System.out.print(cnt3); %>
        <h4 style="color: white;">이 영화는 약 <%=cnt3%>%의 사용자들이 긍정이라고 평가했습니다</h4>
        <h4 style="color: white;">이 영화는 약 <%=cnt4%>%의 사용자들이 부정이라고 평가했습니다</h4>
        
        <% if(cnt3>=cnt4){ %>
		<!-- 긍정 부정에 따라 다른 이미지 출력 -->
		<img alt="긍정" src="https://w7.pngwing.com/pngs/1003/955/png-transparent-smiley-emoticon-wink-computer-icons-smiley-miscellaneous-face-smiley.png" style="width: 50px; height: 50px;">
            <% }else{ %>
            <img alt="부정" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQT1aeNMJTxv0c9GBhinzSnW9RfFatI4DocLvjzi1Z5vtWVVewg0Ut8LucvhGyDLWjyA2I&usqp=CAU" style="width: 50px; height: 50px;">
            <%   }  %>
	 </div>
	 
	
   <div id="review">
   <div class="wrap1">
    <div class="form-wrap">
    <%for(ReviewVO vo : r_list){ %>
   
   <!-- 익명으로 리뷰를 남길 수 있는 form태그 -->
        <form id="update" action="<%=cpath%>/reviewUpdate.do?movie_seq=<%=vo.getMovie_seq()%>" class="input-group" mehtod="post">
        <input type="hidden" name="movie_seq" value="<%=vo.getMovie_seq()%>">
        <%} %>
        <input type="hidden" name="review_seq">
             <p><p class="input-field" style="color: gray; font-size: 15px; font-weight:lighter; "> 평점 : <span class="MBT">
            </span><select name="score" id="star_scroe" style="height:100%;">
            &nbsp&nbsp&nbsp
              <option value="10">10</option>
              <option value="9">9</option>
              <option value="8">8</option>
              <option value="7">7</option>
              <option value="6">6</option>
              <option value="5">5</option>
              <option value="4">4</option>
              <option value="3">3</option>
              <option value="2">2</option>
              <option value="1">1</option>
          </select></p>
            <tr>
            <td>리뷰 작성하기</td>
            <td><textarea class="form-control" rows="3" style="width : 100%" name="review"></textarea></td>
          </tr>
            
           &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
            <button class="submit" sytle="color:black;" onclick="alert('리뷰 등록 완료!');">리뷰 작성</button>
            
            <br>
            <br>
        </form>
    </div>
</div>
			<!-- 크롤링한 영화 리뷰 출력 -->
			<%for(ReviewVO vo : r_list){ %>
          	<hr>
          	<p>평점 :<%= vo.getStar_score()%></p>
            <p>No.<%= vo.getReview_seq()%> : <%= vo.getDocument()%></p>
            <% if(vo.getLabel()==1){ %> 
            <img alt="긍정" src="https://w7.pngwing.com/pngs/581/80/png-transparent-computer-icons-cursor-positive-hand-silhouette-black.png" style="width: 50px; height: 50px;">
            <% }else{ %>
            <img alt="부정" src="https://w7.pngwing.com/pngs/894/176/png-transparent-thumb-signal-computer-icons-down-miscellaneous-text-thumb-signal-thumbnail.png" style="width: 50px; height: 50px;">
            <%   }  %>
            <%   }  %>
        </div>
</body>
public class ReviewListController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		
		int movie_seq = Integer.parseInt(request.getParameter("movie_seq"));
		MovieDAO dao=new MovieDAO();
		MovieVO vo = new MovieVO();
		vo.setMovie_seq(movie_seq);
		
		MovieVO list2 = dao.movieList(movie_seq);
		request.setAttribute("list2", list2);//중요
		//request.setAttribute의 키와 값을 이용하여 Attrubute에 담아 JSP로 보내게 된다.
		//Controller에서-ArrayList-Vo를-JSP로-보내고-JSP에서-받고-사용하기
		// View의 경로를 만들어서 문자열로 리턴해주는 역할 
		
		
		ReviewDAO dao1=new ReviewDAO();
		
		ArrayList<ReviewVO> list=(ArrayList<ReviewVO>) dao1.reviewList(vo);
		request.setAttribute("list", list);//중요
		//request.setAttribute의 키와 값을 이용하여 Attrubute에 담아 JSP로 보내게 된다.
		//Controller에서-ArrayList-Vo를-JSP로-보내고-JSP에서-받고-사용하기
		// View의 경로를 만들어서 문자열로 리턴해주는 역할
		return "reviewList"; 
	}

 


위는 영화 관련 일정의 화면설계서이다. 코딩이 진행된 View에서 중요한 body 부분만 발췌하겠다.

<!-- 유저 세션값 불러오기 -->
 <%
    String cpath = request.getContextPath(); // /m02
    UserVO vo=(UserVO)session.getAttribute("vo");
    %>
    
<body>
	<!-- 툴바 -->
    <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
            </button>
            <a class="navbar-brand" href="<%=cpath%>/moviemain.do">BESPOKE CINEMA</a>
          </div>
 
            </div>
         <div>
            <ul class="nav navbar-nav navbar-right">
            <li><a href="<%=cpath%>/moviemain.do">main</a></li>
     		 <li><a href="<%=cpath%>/movieContent.do?idx=<%=vo.getIdx()%>">내정보</a></li>
      		
            </ul>
          </div>
      </nav>
   <!-- iframe으로 네이버 캘린더 import -->
        <div id="ca">
            <iframe src="http://naver.me/58HLKV0p" width="800" height="800" frameborder="0" id="cale"></iframe>
        </div>
</body>
public class calController implements Controller{
	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		return "cal";
	}
	

}
Comments