KDT/WEB

240215 WEB - 글 수정, 삭제, 파일 업로드 1

001cloudid 2024. 2. 15. 12:52
728x90

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>center/content.jsp</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 메인이미지 -->
<div id="sub_img_center"></div>
<!-- 메인이미지 -->

<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Notice</a></li>
<li><a href="#">Public News</a></li>
<li><a href="#">Driver Download</a></li>
<li><a href="#">Service Policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->

<!-- 게시판 -->
<article>
<h1>Content Notice</h1>
<table id="notice">
<tr><td>글번호</td><td>${boardDTO.num}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.name}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.date}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>

<div id="table_search">
<c:if test="${! empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.name }">
		<input type="button" value="글수정" class="btn" onclick="location.href='${pageContext.request.contextPath}/board/update?num=${boardDTO.num}'">
		<input type="button" value="글삭제" class="btn" onclick="location.href='${pageContext.request.contextPath}/board/delete?num=${boardDTO.num}'">
	</c:if>
</c:if>

<input type="button" value="글목록" class="btn" onclick="location.href='${pageContext.request.contextPath}/board/list'">

</div>

<div class="clear"></div>
</article>
<!-- 게시판 -->
<!-- 본문들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>
</body>
</html>

 

글 수정

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>center/update.jsp</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 메인이미지 -->
<div id="sub_img_center"></div>
<!-- 메인이미지 -->

<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Notice</a></li>
<li><a href="#">Public News</a></li>
<li><a href="#">Driver Download</a></li>
<li><a href="#">Service Policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->

<!-- 게시판 -->
<article>
<h1>Update Notice</h1>
<form action="${pageContext.request.contextPath}/board/updatePro" method="post">
<input type="hidden" name="num" value="${boardDTO.num }">
<table id="notice">
<!-- 글쓴이 : 로그인 값 -->
<tr><td>글쓴이</td><td><input type="text" name="name" value="${sessionScope.id}" readonly></td></tr>
<!-- input name, value에 값을 넣어줘야 서버로 넘어감 -->
<tr><td>글제목</td><td><input type="text" name="subject" value="${boardDTO.subject }" required></td></tr>
<tr><td>글내용</td><td><textarea name="content" rows="10" cols="20">${boardDTO.content }</textarea></td></tr>


</table>

<div id="table_search">
<!-- location 자바스크립트 내장 객체 => 웹 브라우저 주소줄을 객체로 정의
     location 내장객체 멤버 변수 => href 변수 : 웹 브라우저 주소줄 내용을 저장하고 있는 변수
						  => href 변수 내용이 변경되어지면 웹 브라우저 주소도 변경 
						  location.href='${pageContext.request.contextPath}/board/write -->
<input type="submit" value="글수정" class="btn">
<input type="button" value="글목록" class="btn" onclick="location.href='${pageContext.request.contextPath}/board/list'">
</div>
</form>

<div class="clear"></div>
</article>
<!-- 게시판 -->
<!-- 본문들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>
</body>
</html>

 

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, Model model) {
		System.out.println("BoardController content()");
		System.out.println(boardDTO);
		//boardDTO 리턴할형 = boardService.getBoard(boardDTO) 메소드 호출
		boardDTO = boardService.getBoard(boardDTO);
		//조회수 증가
		boardService.updateReadcount(boardDTO);
		
		
		//model 저장
		model.addAttribute("boardDTO", boardDTO);
		
		System.out.println(boardDTO);
		// board/content.jsp 글 목록으로 주소변경없이 이동
		return "/center/content";
	}
	
	//GET방식 /board/update?num=
	//BoardDTO boardDTO 전달받으면 자동으로 request에 담긴 파라미터 값이 저장
	//boardDTO 리턴할형 = boardService.getBoard(boardDTO) 메소드 호출
	//model 저장 "boardDTO",boardDTO
	// /center/update.jsp 글 수정으로 주소변경없이 이동
	@GetMapping("/update")
	public String update(BoardDTO boardDTO,Model model) {
		System.out.println("BoardController update()");
		boardDTO = boardService.getBoard(boardDTO);
		System.out.println(boardDTO);
		
		model.addAttribute("boardDTO",boardDTO);
		return "/center/update";
	}
	
	//POST방식 /board/updatePro 주소 매핑
	//BoardDTO board 전달 받으면 자동으로 request에 담긴 파라미터 값이 저장
	//boardService.updateBoard(boardDTO) 메소드 호출
	// /board/list 글 목록으로 주소 변경하면서 이동
	@PostMapping("updatePro")
	public String updatePro(BoardDTO boardDTO) {
		System.out.println("BoardController updatePro()");
		boardService.updateBoard(boardDTO);
		
		return "redirect:/board/list";
	}

 

BoardService

 

	public void updateBoard(BoardDTO boardDTO) {
		System.out.println("BoardService updateBoard()");
		boardDAO.updateBoard(boardDTO);
	}

 

BoardDAO

	public void updateBoard(BoardDTO boardDTO) {
		System.out.println("BoardDAO updateBoard()");
		sqlSession.update(namespace+".updateBoard", boardDTO);
	}

 

boardMapper

	<update id="updateBoard">
	update board
	set subject = #{subject}, content = #{content}
	where num = #{num}
	</update>

 

글 삭제

BoardController

	@GetMapping("/delete")
	public String delete(BoardDTO boardDTO) {
		System.out.println("BoardController delete()");
		boardService.deleteBoard(boardDTO);
		return "redirect:/board/list";
	}

 

BoardService

	public void deleteBoard(BoardDTO boardDTO) {
		System.out.println("BoardService deleteBoard()");
		boardDAO.deleteBoard(boardDTO);
	}

 

BoardDAO

	public void deleteBoard(BoardDTO boardDTO) {
		System.out.println("BoardDAO deleteBoard()");
		sqlSession.delete(namespace+".deleteBoard", boardDTO);
	}

 

boardMapper

	<delete id="deleteBoard">
	delete from board
	where num = #{num}
	</delete>

 

파일업로드 게시판

inc left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<nav id="sub_menu">
<ul>
<li><a href="${pageContext.request.contextPath}/board/list">Notice</a></li>
<!-- <li><a href="#">Public News</a></li> -->
<li><a href="${pageContext.request.contextPath}/board/flist">Driver Download</a></li>
<!-- <li><a href="#">Service Policy</a></li> -->
</ul>
</nav>

 

fnotice.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="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!-- => 날짜 모양 변경 태그 라이브러리 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>center/fnotice.jsp</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 메인이미지 -->
<div id="sub_img_center"></div>
<!-- 메인이미지 -->

<!-- 왼쪽메뉴 -->
<jsp:include page="../inc/left.jsp" />
<!-- 왼쪽메뉴 -->

<!-- 게시판 -->
<article>
<h1>File Notice [전체 글의 개수 ${pageDTO.count }]</h1>
<table id="notice">
<tr><th class="tno">No.</th>
    <th class="ttitle">Title</th>
    <th class="twrite">Writer</th>
    <th class="tdate">Date</th>
    <th class="tread">Read</th></tr>

<c:forEach var="boardDTO" items="${boardList}">
<tr onclick="location.href='${pageContext.request.contextPath}/board/fcontent?num=${boardDTO.num}'">
	<td>${boardDTO.num}</td>
	<td class="left">${boardDTO.subject}</td>
    <td>${boardDTO.name}</td>
    
    <td><fmt:formatDate value="${boardDTO.date}" pattern="yyyy-MM-dd"/></td>
    <td>${boardDTO.readcount}</td></tr>

</c:forEach>

</table>

<!-- 로그인을 하지 않으면 글쓰기 버튼이 보이지 않게 설정 -->
<c:if test="${!empty sessionScope.id }">
<div id="table_search">
<!-- location 자바스크립트 내장 객체 => 웹 브라우저 주소줄을 객체로 정의
     location 내장객체 멤버 변수 => href 변수 : 웹 브라우저 주소줄 내용을 저장하고 있는 변수
						  => href 변수 내용이 변경되어지면 웹 브라우저 주소도 변경 
						  location.href='${pageContext.request.contextPath}/board/write -->
<input type="button" value="글쓰기" class="btn" onclick="location.href='${pageContext.request.contextPath}/board/fwrite'">
</div>
</c:if>

<div id="table_search">
<input type="text" name="search" class="input_box">
<input type="button" value="search" class="btn">
</div>
<div class="clear"></div>
<div id="page_control">
<c:if test="${pageDTO.startPage > pageDTO.pageBlock }">
<a href="${pageContext.request.contextPath}/board/flist?pageNum=${pageDTO.startPage - pageDTO.pageBlock}">Prev</a>
</c:if>

<c:forEach var="i" begin="${pageDTO.startPage }" end="${pageDTO.endPage }" step="1">
<a href="${pageContext.request.contextPath}/board/flist?pageNum=${i}">${i}</a>
</c:forEach>

<c:if test="${pageDTO.endPage < pageDTO.pageCount}">
<a href="${pageContext.request.contextPath}/board/flist?pageNum=${pageDTO.startPage + pageDTO.pageBlock}">Next</a>
</c:if>

</div>
</article>
<!-- 게시판 -->
<!-- 본문들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>
</body>
</html>

 

fwirte.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 메인이미지 -->
<div id="sub_img_center"></div>
<!-- 메인이미지 -->

<!-- 왼쪽메뉴 -->
<jsp:include page="../inc/left.jsp" />
<!-- 왼쪽메뉴 -->

<!-- 게시판 -->
<!-- 파일첨부할 때 form태그에 multipart 파일이라는 것을 반드시 표시해줘야함 -->
<!-- form 태그에 enctype="mutipart/form-data" -->
<article>
<h1>File Write Notice</h1>
<form action="${pageContext.request.contextPath}/board/fwritePro" method="post" enctype="multipart/form-data">
<table id="notice">
<!-- 글쓴이 : 로그인 값 -->
<tr><td>글쓴이</td><td><input type="text" name="name" value="${sessionScope.id}" readonly></td></tr>
<!-- input name, value에 값을 넣어줘야 서버로 넘어감 -->
<tr><td>글제목</td><td><input type="text" name="subject" required></td></tr>
<tr><td>첨부파일</td><td><input type="file" name="file" required></td></tr>
<tr><td>글내용</td><td><textarea name="content" rows="10" cols="20"></textarea></td></tr>


</table>

<div id="table_search">
<!-- location 자바스크립트 내장 객체 => 웹 브라우저 주소줄을 객체로 정의
     location 내장객체 멤버 변수 => href 변수 : 웹 브라우저 주소줄 내용을 저장하고 있는 변수
						  => href 변수 내용이 변경되어지면 웹 브라우저 주소도 변경 
						  location.href='${pageContext.request.contextPath}/board/write -->
<input type="submit" value="글쓰기" class="btn">
<input type="button" value="글목록" class="btn" onclick="location.href='${pageContext.request.contextPath}/board/flist'">
</div>
</form>

<div class="clear"></div>
</article>
<!-- 게시판 -->
<!-- 본문들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>
</body>
</html>

 

프로그램 설치 pom.xml

		<!-- 파일 업로드 프로그램 설치 commons-fileupload, commons-io, javax-annotation 설치-->
		<!-- Apache Commons fileupload 1.3.1-->
		<dependency>
		    <groupId>commons-fileupload</groupId>
		    <artifactId>commons-fileupload</artifactId>
		    <version>1.3.1</version>
		</dependency>
		<!-- Apache Commons IO 2.4-->
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>2.4</version>
		</dependency>
		<!-- Jakarta Annotations API	2.1.1 -->
		<!-- https://mvnrepository.com/artifact/jakarta.annotation/jakarta.annotation-api -->
		<dependency>
		    <groupId>jakarta.annotation</groupId>
		    <artifactId>jakarta.annotation-api</artifactId>
		    <version>1.3.5</version>
		</dependency>

추가

 

설정 servlet-context

	<!-- 파일 업로드 객체 생성, 업로드 파일 크기 10MB 지정 -->
	<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<beans:property name="maxUploadSize" value="10485760"></beans:property>
	</beans:bean>
	
	<!-- 서버에 있는 파일 업로드 폴더 지정 : src/main/webapp/resources/upload 폴더 만들기-->
	<!-- 폴더의 물리적인 경로 찾아줘야함 : D:\workspace_sts\funweb\src\main\webapp\resources\upload
		 자바에서 \는 특수문자로 받아들이기 때문에 \\ 또는 / 
		 즉 D:\\workspace_sts\\funweb\\src\\main\\webapp\\resources\\upload 또는
		 D:/workspace_sts/funweb/src/main/webapp/resources/upload-->
	<beans:bean id="uploadPath" class="java.lang.String">
		<beans:constructor-arg value="D:\\workspace_sts\\funweb\\src\\main\\webapp\\resources\\upload"></beans:constructor-arg>
	</beans:bean>

 

BoardController

	//servlet-context.xml id="uploadPath"에서 정의한 파일 경로 이름 @@Resources(name = "uploadPath")
	@javax.annotation.Resource(name = "uploadPath")
	private String uploadPath;
    
    	// get 방식 /board/write 주소 매핑
	// center/write.jsp 주소변경없이 이동
	@GetMapping("/fwrite")
	public String fwrite() {
		System.out.println("BoardController fwrite()");
		return "center/fwrite";
	}
	
	//
		@PostMapping("/fwritePro")
	public String fwritePro(BoardDTO boardDTO, HttpServletRequest request, MultipartFile file) throws Exception{
		//throws Exception => 메소드 호출하는 곳에서 예외처리를 함
		System.out.println("BoardController fwritePro()");
		//파일 업로드 -> 프로그램 설치
		//commons-fileupload, commons-io, javax-annotation 설치
		//pom.xml에 코드 작성
		//servlet-context.xml에서 프로그램 설정
		// 1) 대용량 데이터베이스(오라클) 컬럼에 저장
		// 2) 저용량 데이터베이스(Mysql) 서버 폴더에 파일을 업로드하고, 데이터베이스에 파일 이름이 저장 <- 사용할 예정
		
		//name = "file" => MultipartFile file => file 이름이 동일(name="이름"과 MultipartFile 이름 동일해야함)
		//업로드 파일 이름이 동일할 경우 => 랜덤문자_파일이름 => 이름 변경
		//랜덤 문자 만들기
		UUID uuid = UUID.randomUUID();
		String filename = uuid.toString() + "_" + file.getOriginalFilename();
		System.out.println(filename);
		
		//업로드 원본 파일 file.getBytes() => upload폴더에 복사(파일 업로드)
		//FileCopyUtils.copy(원본파일, 복사파일);
		System.out.println(uploadPath);
		FileCopyUtils.copy(file.getBytes(), new File(uploadPath,filename));
		
		//boardDTO에 파라미터값 저장
		//name,subject, content, file
		boardDTO.setName(request.getParameter("name"));
		boardDTO.setSubject(request.getParameter("subject"));
		boardDTO.setContent(request.getParameter("content"));

		//file 저장
		boardDTO.setFile(filename);
		System.out.println(boardDTO);
		
		//insertBoard() 메소드 호출
		boardService.insertBoard(boardDTO);
		return "redirect:/board/flist";
	}

 

BoardDTO

package com.itwillbs.domain;

import java.sql.Timestamp;

public class BoardDTO {

	private int num;
	  private String name;
	  private String subject;
	  private String content;
	  private int readcount;
	  private Timestamp date;
	  //file 추가
	  private String file;
	  
	  @Override
	  public String toString() {
		  return "BoardDTO [num=" + num + ", name=" + name + ", subject=" + subject + ", content=" + content
				  + ", readcount=" + readcount + ", date=" + date + ", file=" + file + "]";
	  }
	  

	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public int getReadcount() {
		return readcount;
	}
	public void setReadcount(int readcount) {
		this.readcount = readcount;
	}
	public Timestamp getDate() {
		return date;
	}
	public void setDate(Timestamp date) {
		this.date = date;
	}
	public String getFile() {
		return file;
	}
	public void setFile(String file) {
		this.file = file;
	}
	
	  
	  
}

 

boardMapper

<!-- file을 넣기 전 데이터베이스에 file 컬럼 추가 작업 
	alter table board add file varchar(100);
-->


	<insert id="insertBoard">
		insert into board(num, name, subject, content, readcount, date, file)
		values (#{num},#{name}, #{subject}, #{content}, #{readcount}, #{date}, #{file}) 
	</insert>

 

728x90