프로젝트 게시판의 Main 페이지 구성이다.
왼쪽 상단에 ChoBoard라는 웹사이트 이름과 그 옆에는 네 개의 게시판, 회원 관리를 위한 링크들이 있다.
뷰의 기본 설정과 controller를 설정하자.
우선 controller 패키지를 생성하고 MainController 라는 클래스를 생성했다.
기본 페이지를 main이라는 주소로 맵핑하려고 한다.
다음과 같이 root로 들어오는 주소를 main으로 redirect하고 main.jsp를 기본 페이지로 설정한다.
이후로는 http://도메인주소/ 또는 http://도메인주소/main으로 들어오는 요청은 모두 main.jsp라는 view로 보여주게 된다.
@GetMapping("/")
public String index() {
return "redirect:/main";
}
@GetMapping("/main")
public String main() {
return "main";
}뷰를 구성하다 보면 모든 페이지에 상단 메뉴 부분과 하단 개발자 정보는 중복됨을 알 수 있다.
이 중복되는 코드를 모든 jsp 파일에 기록하기보단 하나의 파일로 관리하고 각 파일에서 import해서 사용하자.
각 부분을 top_menu.jsp와 footer.jsp로 나눈 후 views/include 폴더에 저장했다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var='root' value="${pageContext.request.contextPath}/"/>
<!--게시판 상단 네비게이션-->
<nav class="navbar navbar-expand-md bg-info navbar-light shadow-lg">
<a class="navbar-brand" href="${root}main">ChoBoard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav">
<li class="nav-item"><a href="${root}board/main" class="nav-link">자유게시판</a>
</li>
<li class="nav-item"><a href="${root}board/main" class="nav-link">정보게시판</a>
</li>
<li class="nav-item"><a href="${root}board/main" class="nav-link">맛집게시판</a>
</li>
<li class="nav-item"><a href="${root}board/main" class="nav-link">비밀게시판</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="${root}user/login" class="nav-link">로그인</a>
</li>
<li class="nav-item"><a href="${root}user/signIn"
class="nav-link">회원가입</a></li>
<li class="nav-item"><a href="${root}user/update"
class="nav-link">회원수정</a></li>
<li class="nav-item"><a href="${root}user/logout" class="nav-link">로그아웃</a>
</li>
</ul>
</div>
</nav><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--하단 정보-->
<div class="container-fluid bg-dark text-white"
style="margin-top: 50px; padding-top: 30px; padding-bottom: 30px">
<div class="container">
<p>
github : <a class="badge badge-secondary"
href="https://github.com/chosh95/Board_Mini_Project">https://github.com/chosh95/Board_Mini_Project</a>
</p>
<p>연락처 : chosh-95@hanmail.net</p>
</div>
</div>그 후 main.jsp에서 jstl의 taglib를 이용해 top_menu와 footer를 import했다.
<body>
<c:import url="/WEB-INF/views/include/top_menu.jsp"/>
<!-- 메인 페이지 콘텐츠 -->
<c:import url="/WEB-INF/views/include/footer.jsp"/>
</body>main.jps의 body태그 부분이다. 이제부터 다른 모든 view는 위와 같이 구성하면 되므로 코드가 줄고, 중복되는 부분을 각각의 파일에서 관리하면 되므로 간편해진다.
다음으로 top_menu의 링크 부분을 살펴보자.
기존의 정적인 웹 사이트에서는 href="~~.html" 이런식으로 직접 연결할 파일 링크를 썼지만, 이런 상대 경로를 쓰다 보면 경로가 꼬일수가 있다.
예를들어 현재 도메인/main 페이지에 있는데 여기서 다시 홈버튼을 클릭하면 도메인/main/main 이런 식으로 경로가 잘못 꼬일 수 있다.
따라서 jstl의 taglib를 이용해 root 경로를 지정해주자. 아래 코드가 root 경로를 구하는 예시이다.
<c:url var='root' value='/'/>
<c:set var='root' value="${pageContext.request.contextPath}/"/>c:url과 c:set중 원하는 걸 쓰면 되지만, c:url은 페이지 이동시 session 정보가 링크에 함께 나타나는 경우가 있다.
따라서 c:set을 사용해서 contextPath를 구해주자.
위의 top_menu.jsp의 예시에서처럼 href="${root}main" 처럼 사용하면 된다.
다음은 view 초기 구성 상태이다.
views 하위에 각 기능별로 페이지를 구분했다.
게시판 관리를 위한 board 하위 폴더, 회원 관리를 위한 user 하위 폴더와, top_menu와 footer를 위한 include 폴더로 나눴고, 가장 상위 경로에 main.jsp가 있다.
다음은 class 파일 구조이다.
config 하위에는 spring 설정을 위한 파일들이 있고
controller 하위에 각 controller들이 있다.
게시판 관리를 위한 BoardController, 회원 관리를 위한 UserController, 메인 페이지 관리를 위한 MainController로 나누었고, 필요시 다른 컨트롤러를 더 생성할 예정이다.
'프로젝트 > 게시판미니프로젝트' 카테고리의 다른 글
| [프로젝트] 회원가입 관리 (0) | 2020.05.07 |
|---|---|
| [프로젝트] 상단 메뉴 관리 (0) | 2020.05.07 |
| [프로젝트] 데이터베이스 테이블 & Mybatis 초기 설정 (0) | 2020.05.06 |
| [프로젝트] Spring 프로젝트 초기 설정 (0) | 2020.05.05 |
| [프로젝트] Eclipse 초기 설정 (0) | 2020.05.05 |