JSP를 이용한 화면 구성과 처리
메인 홈 http://localhost:8888/
카드 형식으로 TourArea 출력
mainHome.jsp
<div class="contanier cards mt-3 d-flex align-content-stretch flex-wrap justify-content-center">
<c:forEach items="${tourareaDTOs.content }" var="tourareaDTO">
<div class="card col-4" style="max-width: 18rem;">
<div class="card p-1">
<img class="card-img-top" src="/resources/img/${tourareaDTO.thumimagefile }" onerror="this.src='/resources/img/basis.jpg'" >
<div class="card-body">
<h6 class="card-title "><b>${tourareaDTO.title }</b></h6>
<p class="card-text">${tourareaDTO.contents_name }</p>
</div>
<button type="button" onclick="location.href='/tourarea/tourAreaView/${tourareaDTO.contents_id}'" class="btn btn-light"><small>Tour</small></button>
</div>
</div>
</c:forEach>
</div>
c:forEach : c태그를 통해 반복
<!-- 상단에 선언 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:forEach items="${tourareaDTOs.content }" var="tourareaDTO">
값 표현 : ${ .. }
그전에 JSP 에서 DTO 객체를 사용하고 싶다면
@Controller 클래스에서 해당 페이지가 맵핑된 메소드에 Model 객체를 이용해 담아놓아야된다.
model.addAttribute("tourareaDTOs",tourareaDTOs);
TourReviewDTO
@Data
@NoArgsConstructor
@AllArgsConstructor
public class TourReviewDTO
{
private int num;
private String title;
private String nick_name;
private Date regdate;
private int hitcount;
}
jsp 에서 dot(.) 을 이용해 객체의 속성값을 가져올 수 있다.
<h6 class="card-title "><b>${tourareaDTO.title }</b></h6>
드랍다운 메뉴
enum 클래스 정의
public enum Area
{
부산전체, 중구, 서구, 동구, 영도구, 부산진구, 동래구, 남구, 북구, 해운대구, 금정구, 강서구, 연제구, 수영구, 사상구, 기장군
}
컨트롤러
model.addAttribute("area1",Area.values());
mainHome.jsp
<ul class="dropdown-menu" id="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<c:forEach var="area1" items="${area1 }">
<li ><a class="dropdown-item" >${area1 }</a></li>
</c:forEach>
</ul>
<!-- 구군을 선택하면 input에 넣는 방식 -->
<div class="input-group-sm col-xs-3">
<input class=" form-control col-xs-3" type="text" class="form-control" id="area" name="area" aria-describedby="구군" value="${param.area }" readonly="readonly"
style="background-color: transparent;" >
</div>
Jquery이용하여 선택시 값이 <input>에 들어가도록 설정
<script>
//구군 드랍다운
$("#dropdown-menu li > a").on('click',function(){
$("#area").val($(this).text());
})
</script>
$("#id") id값을 통해 원하는 태그 가져오기
전체 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="includes/boardHeader.jsp" %>
<head>
<meta charset="UTF-8">
<title>I'm home</title>
</head>
<body>
<div class="container">
<div class="container main-img text-center mt-3">
<img class="img-fluid rounded float-start" src="\resources\img\mainimage.jpg" height="300" alt="홈으로">
</div>
<hr>
<div class="mt-5 mb-5 text-center">
<h4>함께하는 부산여행</h4>
</div>
<div class="contanier cards mt-3 d-flex align-content-stretch flex-wrap justify-content-center">
<c:forEach items="${tourareaDTOs.content }" var="tourareaDTO">
<div class="card col-4" style="max-width: 18rem;">
<div class="card p-1">
<img class="card-img-top" src="/resources/img/${tourareaDTO.thumimagefile }" onerror="this.src='/resources/img/basis.jpg'" >
<div class="card-body">
<h6 class="card-title "><b>${tourareaDTO.title }</b></h6>
<p class="card-text">${tourareaDTO.contents_name }</p>
</div>
<button type="button" onclick="location.href='/tourarea/tourAreaView/${tourareaDTO.contents_id}'" class="btn btn-light"><small>Tour</small></button>
</div>
</div>
</c:forEach>
</div>
<div class="container button mt-5 mb-5">
<ul class="pagination justify-content-center mb-5">
<c:choose>
<c:when test="${tourareaDTOs.first}"></c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="/main/?area=${param.area }÷=${param.divide }&page=0">처음</a></li>
<li class="page-item"><a class="page-link" href="/main/?area=${param.area }÷=${param.divide }&page=${tourareaDTOs.number-1 }">←</a></li>
</c:otherwise>
</c:choose>
<!-- 페이지 그룹 -->
<c:forEach begin="${startBlockPage}" end="${endBlockPage}" var="i">
<c:choose>
<c:when test="${tourareaDTOs.pageable.pageNumber+1 == i}">
<li class="page-item disabled"><a class="page-link" href="/main/?area=${param.area }÷=${param.divide }&page=${i-1}">${i}</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="/main/?area=${param.area }÷=${param.divide }&page=${i-1}">${i}</a></li>
</c:otherwise>
</c:choose>
</c:forEach>
<!-- 다음 -->
<c:choose>
<c:when test="${tourareaDTOs.last}"></c:when>
<c:otherwise>
<li class="page-item "><a class="page-link" href="/main?area=${param.area }÷=${param.divide }&page=${tourareaDTOs.number+1}">→</a></li>
<li class="page-item "><a class="page-link" href="/main?area=${param.area }÷=${param.divide }&page=${tourareaDTOs.totalPages-1}">마지막</a></li>
</c:otherwise>
</c:choose>
</ul>
<div class="page-button text-xs-center">
<div class="ms-5 row" >
<form action="/main" method="GET">
<div class="search input-group col">
<div class="input-group-sm col-xs-3">
<!-- <span class="input-group-text form-control col-xs-3" >구군</span> -->
<div class="input-group-sm">
<button type="button" class="btn btn-secondary btn-sm input-group-text form-control col-xs-3 dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="dropdownBtn">
구군
</button>
<ul class="dropdown-menu" id="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<c:forEach var="area1" items="${area1 }">
<li ><a class="dropdown-item" >${area1 }</a></li>
</c:forEach>
</ul>
</div>
<!-- 구군을 선택하면 input에 넣는 방식 -->
</div>
<div class="input-group-sm col-xs-3">
<input class=" form-control col-xs-3" type="text" class="form-control" id="area" name="area" aria-describedby="구군" value="${param.area }" readonly="readonly"
style="background-color: transparent;" >
</div>
<!-- 테마 -->
<div class="input-group-sm col-xs-3 ml-3">
<span class="input-group-text form-control" >테마</span>
</div>
<div class="input-group-sm col-xs-3 ">
<input class="form-control" type="text" class="form-control" id="divide" name="divide" aria-describedby="테마" value=${param.divide }>
</div>
<input type="submit" class="btn btn-outline-info btn-sm col-xs-3 ml-3" value="검색" id="serach-button">
</div>
</form>
<!-- 여행지 쓰기 -->
<button type="button" class="btn btn-light btn-sm ml-5" , onclick="location.href='/tourarea/tourAreaInsert'">여행지 쓰기</button>
</div>
</div>
</div>
<script>
//구군 드랍다운
$("#dropdown-menu li > a").on('click',function(){
$("#area").val($(this).text());
})
</script>
</body>
</html>
게시글 상세보기
<c:if test , eq >
<!-- 시큐리티 적용 -->
<c:if test="${reviewBoard.member.userid eq sessionUserid }">
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="dropdownBtn">
편집하기
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/tourreview/tourreviewUpdateForm/${reviewBoard.boardId }/${reviewBoard.num}">수정하기</a></li>
<li><a class="dropdown-item btn-danger" href="javascript:deleteBoard(${reviewBoard.num })">삭제하기</a></li>
</ul>
</div>
</c:if>
조건을 통해 태그 생성
<c:if test="${reviewBoard.member.userid eq sessionUserid }">
Jquery 를 통해 삭제 기능 처리
<script>
function deleteBoard(num)
{
if(confirm("삭제 하시겠습니까?") == true)
{
$.ajax({
type:"delete",
url:"/tourreview/delete/${reviewBoard.num}",
success:function(resp){
location.href="/tourreview/tourreviewList"
},
error:function(e){
alert("삭제 실패")
}
})
}
return;
}
</script>
tourAreaView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../includes/boardHeader.jsp" %>
<head>
<meta charset="UTF-8">
<title>여행 리뷰 상세보기</title>
</head>
<body>
<%@ include file="../includes/boardCategory.jsp" %>
<div class="container root border-dark" >
<div class="container review-header ">
<!-- 여행리뷰로 가능 a 태그 -->
<div class="div_link mt-1">
<a href="../../tourreview/tourreviewList" class="link" style = "color: rgb(0, 0, 150);">여행 리뷰</a>
</div>
<!-- 글 제목 -->
<div class="div_title mt-1 d-flex justify-content-between">
<div class="">
<h4 class="title">${reviewBoard.title }</h4>
</div>
<div class="justify-content-end">
<!-- Example single danger button -->
<!-- 시큐리티 적용 -->
<c:if test="${reviewBoard.member.userid eq sessionUserid }">
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="dropdownBtn">
편집하기
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/tourreview/tourreviewUpdateForm/${reviewBoard.boardId }/${reviewBoard.num}">수정하기</a></li>
<li><a class="dropdown-item btn-danger" href="javascript:deleteBoard(${reviewBoard.num })">삭제하기</a></li>
</ul>
</div>
</c:if>
</div>
</div>
<div class="div_member mt-1 ">
<p class="fw-bold"> <strong>${reviewBoard.member.nickName }</strong></p>
<div class="date-hitcount">
<ul class="list-inline"><small>
<li class="list-inline-item date text-muted">
<fmt:formatDate value="${reviewBoard.regdate }" pattern="yyy-MM-dd HH:ss:mm"/>
</li>
<li class="list-inline-item hitcount text-muted">조회 ${reviewBoard.hitcount }</li>
</small></ul>
</div>
<!-- 글쓴이 정보 -->
</div>
<hr/>
<div class="row review-main">
<!-- 내용 -->
<div class="container contents">
<p class="text">
${reviewBoard.contents }
</p>
</div>
</div>
</div>
<script>
function deleteBoard(num)
{
if(confirm("삭제 하시겠습니까?") == true)
{
$.ajax({
type:"delete",
url:"/tourreview/delete/${reviewBoard.num}",
success:function(resp){
location.href="/tourreview/tourreviewList"
},
error:function(e){
alert("삭제 실패")
}
})
}
return;
}
</script>
</body>
</html>
TourArea 입력 페이지
tourAreaInsert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../includes/header.jsp" %>
<div class="container">
<div class="mt-3 mb-3">
<h4>부산 관광지</h4>
</div>
<form action="tourAreaInsert" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="contentsName">콘텐츠 명</label>
<input type="text" class="form-control" id="contentsName" placeholder="Enter 콘텐츠 명" name="contentsName">
</div>
<!-- <div class="form-group"> -->
<!-- <label for="pwd">글쓴이:</label> -->
<!-- <input type="text" class="form-control" id="writer" -->
<!-- placeholder="Enter writer" name="writer" > -->
<!-- </div> -->
<div class="form-group">
<label for="area">지역</label>
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle " type="button" id="area1" name="area1" data-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
부산전체
</button>
<ul class="dropdown-menu dropdown" id="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<c:forEach var="area1" items="${area1 }">
<li ><a class="dropdown-item" >${area1 }</a></li>
</c:forEach>
</ul>
<input type="hidden" class="form-control" id="area" name="area" value="부산전체">
</div>
<div class="form-group">
<label for="location">장소</label>
<input type="text" class="form-control" id="location" placeholder="Enter 장소" name="location">
</div>
<div class="form-group">
<label for="divide">테마</label>
<input type="text" class="form-control" id="divide" placeholder="Enter 테마" name="divide">
</div>
<div class="form-group">
<label for="course">코스 명</label>
<input type="text" class="form-control" id="course" placeholder="Enter 코스" name="course">
</div>
<div class="form-group">
<label for="title">제목</label>
<input type="text" class="form-control" id="title" placeholder="Enter 제목" name="title">
</div>
<div class="form-group">
<label for="thumimage_url">썸네일:</label>
<input type="file" class="form-control" id="thumimage_url"
placeholder="Enter 썸네일" name="thumimage_url">
</div>
<div class="form-group">
<label for="image_url">파일:</label>
<input type="file" class="form-control" id="imageUrl"
placeholder="Enter 이미지" name="imageUrl">
</div>
<div class="form-group">
<label for="content">내용</label>
<textarea class="form-control" rows="5" id="content" name="content"></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-sm">글쓰기</button>
</div>
</form>
</div>
<script>
$("#area1").text("부산전체"); //초기값
$("#dropdown-menu li > a").on('click',function(){
$("#area1").text($(this).text());
$("#area").val($(this).text());
})
</script>
submit 버튼 클릭시 URL: tourAreaInset 으로 post 통신, 이미지 포함시 enctype="multipart/form-data" 추가
<form action="tourAreaInsert" method="post" enctype="multipart/form-data">
TourAreaController
@PostMapping("tourAreaInsert")
public String tourAreaInsert(TourArea tourarea, HttpSession session, @AuthenticationPrincipal PrincipalDetails principal)
{
final String uploadFolder = session.getServletContext().getRealPath("/")+"\\resources\\img";
tourarea.setMember(principal.getMember());
tourAreaService.insertTourArea(tourarea,uploadFolder);
return "redirect:/main";
}
TourArea tourarea 의 속성명과
private String title;
<input type="text" class="form-control" id="title" placeholder="Enter 제목" name="title">에서 name 값이 일치하는 속성이 있다면 값이 바인딩
이미지 저장
<div class="form-group">
<label for="image_url">파일:</label>
<input type="file" class="form-control" id="imageUrl"
placeholder="Enter 이미지" name="imageUrl">
</div>
Controller
@PostMapping("tourAreaInsert")
public String tourAreaInsert(TourArea tourarea, HttpSession session, @AuthenticationPrincipal PrincipalDetails principal)
{
// 세션을 통해 이미지를 저장할 경로를 설장해준다.
final String uploadFolder = session.getServletContext().getRealPath("/")+"\\resources\\img";
// 서비스를 통해 이미지포함 데이터 저장 메소드 실행
tourAreaService.insertTourArea(tourarea,uploadFolder);
//...
}
Service
// 사용자가 tourarea 등록하는 메소드
public void insertTourArea(TourArea tourarea, String uploadFolder)
{
System.out.println("service insertTourArea");
UUID uuid = UUID.randomUUID(); //파일 이름 겹치지 않게
MultipartFile mfImage = tourarea.getImageUrl();
MultipartFile mfThumImage = tourarea.getThumimage_url();
String mfImageName="";
String mfThumImageName="";
try
{
if(!mfImage.isEmpty())
{
mfImageName = uuid.toString()+mfImage.getOriginalFilename();
mfImage.transferTo(new File(uploadFolder, mfImageName));
tourarea.setImagefile(mfImageName);
System.out.println(mfImageName);
}
if(!mfThumImage.isEmpty())
{
mfThumImageName = uuid.toString()+mfThumImage.getOriginalFilename();
mfThumImage.transferTo(new File(uploadFolder, mfThumImageName));
tourarea.setThumimagefile(mfThumImageName);
System.out.println(mfThumImageName);
}
tourAreaJpaRepository.save(tourarea);
} catch (IllegalStateException | IOException e) {
System.out.println("TourAreaService error: "+e.getMessage());
}
}
폼(form)태그가 아닌 jquery를 통해 리뷰 글 쓰기
tourreviewForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../includes/boardHeader.jsp" %>
<head>
<meta charset="UTF-8">
<title>tourreviewList</title>
</head>
<body>
<%@ include file="../includes/boardCategory.jsp" %>
<div class="container form">
<div class="mt-3">
<h4>여행 리뷰 글쓰기</h4>
</div>
<hr>
<div class="form-group row">
<div class="btn-group col-sm dropdown">
<button class="btn btn-secondary dropdown-toggle " type="button" id="area1" name="area1" data-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
부산전체
</button>
<ul class="dropdown-menu dropdown" id="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<c:forEach var="area1" items="${area1 }">
<li ><a class="dropdown-item" >${area1 }</a></li>
</c:forEach>
</ul>
</div>
<input type="text" class="form-control col-sm" id="divide"
placeholder="테마" name="divide">
</div>
<div class="form-group">
<label for="title">제목</label>
<!-- placeholder 속성 입력한 데이터가 없는 경우 배경으로 나타난다.실제적으로 입력을 100자까지로 지정 -->
<!-- required 속성을 설정하면 필수입력 사항이된다. -->
<!-- pattern 속성을 이용한 정규표현식으로 데이터의 유효성 검사를 할 수 있다. -->
<input type="text" class="form-control" id="title"
placeholder="제목 입력(4-100)" name="title"
maxlength="100" required="required"
pattern=".{4,100}">
</div>
<div class="form-group">
<label for="contents">내용</label>
<!-- 여러줄의 데이터를 입력하고 하고자 할때 textarea 태그를 사용한다. -->
<!-- textarea 안에 있는 모든 글자는 그대로 나타난다. 공백문자, tag, enter -->
<textarea class="form-control" rows="5" id="contents"
name="contents" placeholder="내용 작성"></textarea>
</div>
<button id="btnRegister" class="btn btn-success">등록</button>
</div>
<script>
//지역 드랍다운
$("#area1").text("부산전체"); //초기값
$("#dropdown-menu li > a").on('click',function(){
$("#area1").text($(this).text());
})
//등록
// boardId 게시판고유번호 100
// num 자동생성
// userid : 세션의 사용자 이름값
// contentsId : 해당 게시글의 쿼리 스트링값
// hitcount, replycnt, regdate 자동생성
$("#btnRegister").click(function(){
if($("#divide").val()==""){
alert("테마를 입력해주세요")
return;
}
var data={
"title":$('input[name=title]').val(),
"contents":$('textarea[name=contents]').val(),
"area1":$("#area1").text(),
"divide":$("#divide").val(),
}
console.log(data)
$.ajax({
type:"post",
url:"register",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(data),
success:function(resp){
if(resp=="success"){
location.href="/tourreview/tourreviewList" //상세보기로
}else{
alert("등록실패, 다시 확인해 주세요.")
}
}
}) //ajax
})//click
</script>
</body>
</html>
var data={
"title":$('input[name=title]').val(), // <input type="text" name="title" />
"contents":$('textarea[name=contents]').val(),
"area1":$("#area1").text(), // id="area1"
"divide":$("#divide").val(),
}
It is header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>함께해요 부산여행</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light border-bottom">
<div class="container">
<!--왼쪽 -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand" href="/">HOME</a>
</li>
</ul>
<!-- 오른쪽 -->
<!-- 로그인 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/myBoard/tourReviewList">마이페이지</a>
</li>
<sec:authorize access="isAnonymous()">
<li class="nav-item">
<a class="nav-link" href="/join">회원가입</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login">로그인</a>
</li>
</sec:authorize>
<sec:authorize access="isAuthenticated()">
<li class="nav-item">
<a class="navbar-brand" href="/logout">
로그아웃(<sec:authentication property="principal.member.name"/>)
</a>
</li>
</sec:authorize>
</ul>
</div>
</nav>
전체 코드는 깃허브에 올렸습니다.
감사합니다.
https://github.com/llsrrll96/BusanTour
'Dev > [프로젝트] 2022 Spring Boot + JSP' 카테고리의 다른 글
[프로젝트] Spring Boot + JSP 시큐리티 로그인, 권한부여, url 접근 제어, (0) | 2022.08.01 |
---|---|
[프로젝트] Spring Boot + JSP를 이용한 함께 부산 여행할 사람을 구하는 웹 사이트-이슈 (0) | 2022.08.01 |
[프로젝트] Spring Boot + JSP를 이용한 함께 부산 여행할 사람을 구하는 웹 사이트-3-JPA (0) | 2022.07.31 |
[프로젝트] Spring Boot + JSP를 이용한 함께 부산 여행할 사람을 구하는 웹 사이트-2-요구분석, 설계 (0) | 2022.07.30 |
[프로젝트] Spring Boot + JSP를 이용한 함께 부산 여행할 사람을 구하는 웹 사이트-1-기획 (0) | 2022.07.30 |
댓글