통합

53일차-1 22.12.05

leo lee 2022. 12. 5.

기본적으로 공통적으로 사용하는 header와 footer는 따로 만들어서 한줄로 아래와 같이 정리 할 수 있다.

<%@include file="include/header.jsp" %>

<%@include file="include/footer.jsp" %>

쉽게 설명하면 공유하는 부분을 하나의 jsp로 만들어서 여러 번 같은 내용을 문서마다 작성하는게 아니라 include를 통해서 편리하게 사용 할 수 있다.

HEADER

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-idth, initial-scale=1">
   

    <title>Welcome to MyWorld</title>

    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/business-casual.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
	
	<!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script>
    $('.carousel').carousel({
        interval: 2000 //changes the speed
    }) 
    </script>
	<style>
	.abc {
		position: sticky;
		top: 0px;
		width: 100%; 
		z-index: 10;
	}
	</style>
    
    
</head>

<body>
	<!-- header -->
	<div class="brand">My Web</div>        
    <div class="address-bar">Welcome to MyWorld</div>
    
    <nav class="navbar navbar-default abc" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <a class="navbar-brand" href="/hong">My First Web</a>
            </div>
           
           
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                	
                    <li>
                        <a href="${pageContext.request.contextPath}/index.main">HOME</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/member/member.main">Member</a>
                    </li>
                    <li>
                        <a href="">BOARD</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/user/user_login.user">LOGIN</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/user/user_join.user" style="color:red">JOIN</a>
                    </li>
                </ul>
            </div>
            
            
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
 	<!-- end header -->

이 부분이 헤더 부분인데 여기는 계속 공통으로 사용이 되기 때문에 header를 따로 생성하여 계속 include해주는 방식으로 여러 번 사용 할 수 있다.

SECTION

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<%@include file="include/header.jsp" %>
 
    <div class="container">

		<div class="row ">
        	
        	       
            <div class="box">
                
                       
                <div class="col-lg-6 text-center">
			      	<h2>coding404</h2>
					<p>강의가 궁금하다면?</p>
					<hr>
					<h3><a href="https://www.youtube.com/channel/UCXiyuCYo4dUqM556XpgqAcQ">둘러보기</a></h3>
					
                	
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- data-ride="carousel" 자동 슬라이드 기능 -->
                       
                        <ol class="carousel-indicators hidden-xs">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            
                        </ol>

                     
                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="img-responsive img-full" src="img/1.png">
                            </div>
                            <div class="item">
                                <img class="img-responsive img-full" src="img/2.png"> <!-- img-full 옵션 class -->
                            </div>
                            <div class="item">
                                <img class="img-responsive img-full" src="img/3.png">
                            </div>
                           
                        </div>

                       	
                        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                            <span class="icon-prev"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                            <span class="icon-next"></span>
                        </a>
                    </div>
                        
                </div>
                    
                <div class="col-lg-6 text-center" >    
                    
						<h2>hello world</h2>
						<p>
							깜빡하신게 있는것 같아요!
						</p>
						<hr>
						<h3>구독과 좋아요</h3>
				<iframe width="100%" height="351px" src="https://www.youtube.com/embed/nOTpuof2YG8?list=PLK7AWkPYwus6SdPJyhK9SNnKJybIC5qCs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>						
                </div>   
                    
                
            </div>
            
          
            
        </div>

        <div class="row">
            <div class="box">
            
                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">hello World
                        <strong>유의 사항!</strong>
                    </h2>
                    <hr>
		                <div class="inner" align="center">
		                    <img class="img-responsive img-center" src="img/intro.png" alt=""><!-- img-border --> 
		                    
		                    <hr class="visible-xs">
		                   
		                    <p>1. 모든 자료는 회원 가입 후에 이용하실 수 있습니다.</p>
		                    <p>2. ------------------------------------------------------</p>
		                    <p>3. ------------------------------------------------------</p>
	                    	
	                    </div>
	                    	
                    
                </div>
              
                
                
                
            </div>
        </div>

          
    <!-- /.container -->
    </div>
    
    <%@include file="include/footer.jsp" %>

이렇게 위에 모든 페이지가 메인 페이지다. header와 footer를 include하여 중간에 section부분만 다른 페이지와 달라진다고 보면 될듯하다.

FOOTER

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Copyright &copy; By Park 2018.XX.XX~</p>
                </div>
            </div>
        </div>
    </footer>
	
</body>
</html>

이 부분이 footer부분이다 여기도 계속 어떤 페이지로 넘어가든지 간에 공통으로 사용이 되기 때문에 하나의 파일로 만들어서 여러 번 공유 해준다.

MEMBER PAGE

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<%@include file="../include/header.jsp" %>


<div class="container">
		<div class="row">
            <div class="box">
                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">
                        <strong>Profile</strong>
                    </h2>
                    <hr>
                </div>
                
                
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member7.jpg" alt="">
                    <h3>Actor
                        <small>한지민</small>
                    </h3>
                </div>
               
                <div class="col-sm-4 text-center">
                    
                </div>
                <div class="col-sm-4 text-center">
                  	<img class="img-responsive" src="../img/member8.jpg" alt="">
                    <h3>Age
                        <small>37</small>
                    </h3>
                </div>
                <div class="clearfix"></div>
                
            </div>
        </div>



        <div class="row">
            <div class="box">
                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">
                        <strong>화보</strong>
                    </h2>
                    <hr>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member1.jpg" alt="">
                    <h3>
                        <small></small>
                    </h3>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member2.jpg" alt="">
                    <h3>
                        <small></small>
                    </h3>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member3.jpg" alt="">
                    <h3>
                        <small></small>
                    </h3>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
		<div class="row">
            <div class="box">
                
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member4.jpg" alt="">
                    <h3>
                        <small></small>
                    </h3>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member5.jpg" alt="">
                    <h3>
                        <small></small>
                    </h3>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="../img/member6.jpg" alt="">
                    <h3>
                        <small></small>
                    </h3>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        
        
    </div>
    <!-- /.container -->
    
     <%@include file="../include/footer.jsp" %>

위에 표시해 놓은 부분을 누르게 되면 member 페이지로 넘어가는데 이 페이지 또한 header와 footer를 include 받아서 위에 부분과 아래 부분이 main 페이지와 동일하다.

여기서 가장 중요한 부분이 controller를 사용하여 사용자의 입력 처리와 흐름 제어 담당. 화면과 Model과 View를 연결시켜주는 역할을 해야한다는 것이다. 아래 링크에는 정말 자세한 설명이 매우 잘 되어있다. 참고 하시면 좋을 듯하다.

https://cocoon1787.tistory.com/733

[개발상식] MVC 패턴이란? (Model-View-Controller)

🚀 이번 포스팅은 개발자 면접에서 자주 나오는 질문 중의 하나인 "MVC패턴"에 대한 내용입니다. MVC패턴의 의미와 사용해야 하는 이유, 사용 예시 등등에 대해 알아보겠습니다. 💡 MVC 패턴이란?

cocoon1787.tistory.com

Controller 사용법

@WebServlet("*.main")

1. .main으로 끝나는 모든 파일을 불러온다.

2. 그 후에 doAction이라는 매서드를 통해서 get방식과 post 방식으로 넘겨지는 파일 모두를 처리해 주는게 중요하다.

protected void doAction(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//한글 처리
		request.setCharacterEncoding("utf-8");
		
		//요청분기
		String uri = request.getRequestURI();
		String path = request.getContextPath();
		
		String command = uri.substring(path.length());
		
		System.out.println("요청경로:" + command);
		
		switch(command) {
		
			case "/index.main":
				
				request.getRequestDispatcher("index.jsp").forward(request, response);//파일의 경로 
				
				break;
				
			case "/member/member.main":
				
				request.getRequestDispatcher("member.jsp").forward(request, response);//파일의 경로 
				
				break;
				
			default:
				break;
		}
	}

이렇게 매서드를 생성하고, doGet과 doPost매서드에서 실행 시켜준다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doAction(request,response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doAction(request,response);
	}

3. 한글 처리를 공통으로 해주고

request.setCharacterEncoding("utf-8");

4.URI와 PATH를 통해서 받아올 주소 값의 공통 부분을 제거해 준다. (요청 분기)

	String uri = request.getRequestURI();
		String path = request.getContextPath();
		
		String command = uri.substring(path.length());
		
		System.out.println("요청경로:" + command);

5. Switch문을 통해서 원하는 주소값일 경우에 해당하는 페이지로 이동이라든지 여러 값을 처리해주면 된다.

switch(command) {
		
			case "/index.main":
				
				request.getRequestDispatcher("index.jsp").forward(request, response);//파일의 경로 
				
				break;
				
			case "/member/member.main":
				
				request.getRequestDispatcher("member.jsp").forward(request, response);//파일의 경로 
				
				break;
				
			default:
				break;
		}

실제 위에 처럼 사용해 주기 위해서는 링크를 통해서 넘어가는 주소를 아래와 같이 지정한 주소로 설정해주어야 한다.

여기서 중요한 것은 주소 값 공백, 대소문자 차이 그리고 오타로 인해서 오류가 발생할 수 있다. 이 부분을 유의해서 잘 활용해야 한다.

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                	
                    <li>
                        <a href="${pageContext.request.contextPath}/index.main">HOME</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/member/member.main">Member</a>
                    </li>
                    <li>
                        <a href="">BOARD</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/user/user_login.user">LOGIN</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/user/user_join.user" style="color:red">JOIN</a>
                    </li>
                </ul>
            </div>

'통합' 카테고리의 다른 글

MVC2 사용자 삭제 54일차-2 22.12.06 (0)	2022.12.06
54일차-1 22.12.06 사용자 정보 수정 (0)	2022.12.06
54일차-1 22.12.06 홈페이지 로그아웃 (0)	2022.12.06
53일차-3 22.12.05(로그인 페이지 만들기) SQL, JAVA, JSP (0)	2022.12.05
53일차-2 22.12.05(회원가입 페이지 만들기) SQL, JAVA, JSP (0)	2022.12.05

53일차-1 22.12.05

'통합' 카테고리의 다른 글

댓글

티스토리툴바