Spring Boot 14분 읽기
springboot 블로그 10.화면구현
목차
해당 게시물은 이 강의를 보고 제작하게되었습니다.
화면구현
1. 메뉴와 푸터
- header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<sec:authorize access="isAuthenticated()">
<sec:authentication property="principal" var="principal"/>
</sec:authorize>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">kbox</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<c:choose>
<c:when test="${empty principal}">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/auth/loginForm">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/auth/joinForm">회원가입</a></li>
</ul>
</c:when>
<c:otherwise>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/board/form">글쓰기</a></li>
<li class="nav-item"><a class="nav-link" href="/user/form">회원정보</a></li>
<li class="nav-item"><a class="nav-link" href="/logout">로그아웃</a></li>
</ul>
</c:otherwise>
</c:choose>
</div>
</nav>
<br>- footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<br />
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>Created by kbox</p>
<p>📞 010-0000-0000</p>
<p>🏴 인하공업전문대학 컴퓨터정보과</p>
</div>
</body>
</html>2. 회원가입 화면
- joinForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form>
<div class="form-group">
<label for="username">Username</label> <input type="text" class="form-control" placeholder="Enter username" id="username">
</div>
<div class="form-group">
<label for="password">Password</label> <input type="password" class="form-control" placeholder="Enter password" id="password">
</div>
<div class="form-group">
<label for="email">Email</label> <input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
</form>
<button id="btn-save" class="btn btn-primary">회원가입완료</button>
</div>
<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>3. 로그인 화면
- loginForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form action="/auth/loginProc" method="POST">
<div class="form-group">
<label for="username">Username</label> <input type="text"
class="form-control" name="username" placeholder="Enter username"
id="username">
</div>
<div class="form-group">
<label for="password">Password</label> <input type="password"
class="form-control" name="password" placeholder="Enter password"
id="password">
</div>
<div class="form-group form-check">
<label class="form-check-label"> <input
class="form-check-input" name="remember" type="checkbox">
Remember me
</label>
</div>
<button id="btn-login" class="btn btn-primary">로그인</button>
</form>
</div>
<%@ include file="../layout/footer.jsp"%>4. 회원 수정 화면
- updateForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form>
<input type="hidden" id="id" value="${principal.user.id}" />
<div class="form-group">
<label for="username">Username</label> <input type="text" value="${principal.user.username}" class="form-control" placeholder="Enter username" id="username" readonly>
</div>
<div class="form-group">
<label for="password">Password</label> <input type="password" class="form-control" placeholder="Enter password" id="password">
</div>
<div class="form-group">
<label for="email">Email</label> <input type="email" value="${principal.user.email}" class="form-control" placeholder="Enter email" id="email">
</div>
</form>
<button id="btn-update" class="btn btn-primary">회원수정완료</button>
</div>
<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>5. 글 목록 화면(메인화면)
- index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="layout/header.jsp"%>
<div class="container">
<c:forEach var="board" items="${boards.content}">
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">${board.title}</h4>
<a href="/board/${board.id}" class="btn btn-primary">상세보기</a>
</div>
</div>
</c:forEach>
<ul class="pagination justify-content-center ">
<c:choose>
<c:when test="${boards.first}">
<li class="page-item disabled"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${boards.last}">
<li class="page-item disabled"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
</c:otherwise>
</c:choose>
</ul>
</div>
<%@ include file="layout/footer.jsp"%>6. 글 상세보기 화면
- detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<button class="btn bg-secondary" onclick="history.back();">돌아가기</button>
<c:if test="${board.user.id == principal.user.id }">
<a href="/board/${board.id}/updateForm" class="btn btn-warning">수정</a>
<button id="btn-delete" class="btn btn-danger">삭제</button>
</c:if>
<br /> <br />
<div>
글 번호 : <span id="id"><i>${board.id} </i></span> 작성자 : <span><i>${board.user.username} </i></span>
</div>
<br />
<div>
<h3>${board.title}</h3>
</div>
<hr />
<div>
<div>${board.content }</div>
</div>
<hr />
</div>
<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>7. 글 수정 화면
- updateForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form action="" method="POST">
<input type="hidden" id="id" value="${board.id}">
<div class="form-group">
<label for="title">Title</label>
<input value="${board.title}" type="text" class="form-control" placeholder="Enter title" id="title">
</div>
<div class="form-group">
<label for="comment">Content:</label>
<textarea class="form-control summernote" rows="5" id="content">${board.content}</textarea>
</div>
</form>
<button id="btn-update" class="btn btn-primary">글수정 완료</button>
</div>
<script>
$('.summernote').summernote({
tabsize : 2,
height : 300
});
</script>
<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>