본문 바로가기
개발 공부 Today I Learned

[국비 66일차 TIL] 공지사항, 글 삭제, 페이징

by 개발자신입 2024. 2. 27.
반응형

공지사항 만들기

공지사항 게시판 notice

  • NoticeController
  • NoticeService
  • NoticeServiceImpl
  • NoticeDAO
  • NoticeDTO
  • notice-mapper.xml


만드는 순서

DTO에 들어갈 내용

int nno, ndel, nread, nlike

String ntitle, ncontent, ndate

NoticeDTO.java

import lombok.Data;

@Data
public class NoticeDTO {
	private int nno, ndel, nread, nlike;
	private String ntitle, ncontent, ndate;
}

DB에 들어갈 내용

테이블명  notice
column nno(int, auto, PK),
ndel(int 1),
nread(int, 기본값 1),
nlike(int, 기본값 1), 
ntitle(varchar, 50), 
ncontent(varchar, 500), 
ndate(datetype, current timestamp)

 

CREATE TABLE notice (
	nno INT AUTO_INCREMENT PRIMARY KEY,
	ndel INT,
	nread INT,
	nlike INT,
	ntitle VARCHAR(255),
	ncontent VARCHAR(500),
	ndate TIMESTAMP
);

NoticeService에 들어갈 추상 메소드 (인터페이스)

  • public List<NoticeDTO> noticeList();
  • public NoticeDTO detail(int no);
  • public int noticeWrite(NoticeDTO);
  • public int noticeDel(int no);
  • public int noticeUpdate(NoticeDTO);

NoticeService.java 

public interface NoticeService {

    public List<NoticeDTO> noticeList();
    public NoticeDTO detail(int no);
    public int noticeWrite(NoticeDTO noticeDTO);
    public int noticeDel(int no);
    public int noticeUpdate(NoticeDTO noticeDTO); 
}

NoticeServiceImpl.java 

  1. 클래스 생성 시, 인터페이스 추가하기
  2. + AbstractService  상속받기
  3. @Service("noticeService") 어노테이션 추가

NoticeServiceImpl 클래스 생성 시 인터페이스 추가

 

@Service("noticeService")
public class NoticeServiceImpl extends AbstractService implements NoticeService {

	@Override
	public List<NoticeDTO> noticeList() {
		return null;
	}

	@Override
	public NoticeDTO detail(int no) {
		return null;
	}

	@Override
	public int noticeWrite(NoticeDTO dto) {
		return 0;
	}

	@Override
	public int noticeDel(int no) {
		return 0;
	}

	@Override
	public int noticeUpdate(NoticeDTO dto) {
		return 0;
	}

}

NoticeDAO.java

superclass 선택 후 생성하기 : AbstractDAO

NoticeDAO 생성 시 superclass 추가

 

@Repository
public class NoticeDAO extends AbstractDAO {

}

 

-> DAO를 NoticeServiceImpl 서비스와 연결시키기 (@Autowired로)

NoticeServiceImpl.java

	@Autowired
	private NoticeDAO noticeDAO;

NoticeController.java

Resource 어노테이션의 name은 NoticeServiceImpl에 적었던 "noticeService"

@Controller
public class NoticeController {
	
	@Resource(name="noticeService") // 서비스와 name이 일치해야함.
	private NoticeService noticeService;
	
	// 2024-02-27 공지 리스트
	@GetMapping("/notice")
	public String notice() {
		return "notice"; // ......./views/notice.jsp
	}

 

notice.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

 

<body> 안에 입력할 내용

			<div class="text-center">
				<h2 class="section-heading text-uppercase">공지사항</h2>
			</div>
			<div class="row text-center">
			<%
			List list = new ArrayList();
			list.add(1);
			list.add(2);
			list.add(3);
			request.setAttribute("list", list);
			%>
				
				<c:choose>
					<c:when test="${fn:length(list) gt 0}">테이블 출력</c:when>
					<c:otherwise>출력할 값이 없습니다.</c:otherwise>
				</c:choose>

 

import 부분 삭제

<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>

NoticeController.java

list를 컨트롤러에서 model로 받아오기

	// 2024-02-27 공지 리스트, 요구사항 확인
	@GetMapping("/notice")
	public String notice(Model model) {
		List<NoticeDTO> list = noticeService.noticeList();
		model.addAttribute("list", list);
		
		return "notice"; // ......./views/notice.jsp
	}

NoticeServiceImpl.java

서비스 안에 기존에 있던 리스트의 return 부분

	@Override
	public List<NoticeDTO> noticeList() {
		return noticeDAO.noticeList();
	}

 

-> noticeList 생성 (DAO)

NoticeDAO.java

@Repository
public class NoticeDAO extends AbstractDAO {

	public List<NoticeDTO> noticeList() {
		return sqlSession.selectList("notice.noticeList"); // 지금은 파라미터가 비어있어서 1개만 적은거임.
	}

notice-mapper.xml

<mapper namespace="notice">
	
	<select id="noticeList" resultType="org.green.dto.NoticeDTO">
		SELECT nno, ndel, nread, nlike, ntitle, ndate
		FROM notice
	</select>
	
</mapper>

notice.jsp

	<!-- 게시판 -->
	<br>
	<br>
	<section class="page-section" id="services">
		<div class="container">
			<div class="text-center">
				<h2 class="section-heading text-uppercase">공지사항</h2>
			</div>
			<div class="row text-center">
				<%-- 			<%
			List list = new ArrayList();
			list.add(1);
			list.add(2);
			list.add(3);
			request.setAttribute("list", list);
			%> --%>

				<c:choose>
					<c:when test="${fn:length(list) gt 0}">
						<table>
							<thead>
								<tr>
									<th>번호</th>
									<th>제목</th>
									<th>작성일</th>
									<th>조회수</th>
								</tr>
							</thead>
							<c:forEach items="${list }" var="row">
								<tr>
									<td onclick="detail(${row.nno })">${row.nno }</td>
									<td class="title"><a href="./detail?no=${row.nno }">
											${row.ntitle } </a></td>
									<td>${row.ndate }</td>
									<td>${row.nlike }</td>
								</tr>
							</c:forEach>
						</table>
					</c:when>
					<c:otherwise>
						<h1>공지사항이 없습니다.</h1>
					</c:otherwise>
				</c:choose>

				<!-- 글쓰기 버튼 -->
				<div class="d-flex justify-content-end">
					<button type="button" class="btn btn-primary btn-lg mt-3" data-bs-toggle="modal" data-bs-target="#write">글쓰기</button>
				</div>
			</div>
		</div>
	</section>

mybatis-config.xml

* alias : mapper의 resultType명 

<typeAlias type="org.green.dto.NoticeDTO" alias="notice"/>

NoticeController.java

	// 공지 글 작성하기 -> admin 관리자 화면에서
	@GetMapping("/admin/noticeWrite")
	public String noticeWrite() {
		return "admin/noticeWrite"; // ...../views/admin/noticeWrite.jsp => admin 폴더 만들어야함.
	}

 

-> admin 폴더 만들기 :     ...../views/admin/noticeWrite.jsp 경로
-> admin 폴더 안에 noticeWrite 생성

 

noticeWrite.jsp

<title>admin Write</title>
</head>
<body>
	<h1>공자사항 글쓰기</h1>
	<form action="./admin/noticeWrite" method="post">
		<input name="ntitle">
		<textarea name="ncontent"></textarea>
		<button type="submit">공지 작성</button>
	</form>
</body>
</html>

NoticeController.java

	@PostMapping("/admin/noticeWrite")
	public String noticeWrite(NoticeDTO dto) {
//		System.out.println(dto.getNtitle());
//		System.out.println(dto.getNcontent());
		
		int result = noticeService.noticeWrite(dto);
		return "redirect:/notice";
		
	}

 

-> noticeWrite (ServiceImpl, DAO에 생성)

NoticeServiceImpl.java

	@Override
	public int noticeWrite(NoticeDTO dto) {
		return noticeDAO.noticeWrite(dto);
	}

NoticeDAO.java

	public int noticeWrite(NoticeDTO dto) {
		return sqlSession.insert("notice.noticeWrite", dto);
	}

 

-> mapper에 sql문 <insert> 추가

	<insert id="noticeWrite" parameterType="notice">
		INSERT INTO notice (ntitle, ncontent)
		VALUES (#{ntitle}, #{ncontent})
	</insert>

NoticeController.java

	@GetMapping("/noticeDetail")
	public String noticeDetail(@RequestParam(value="no", defaultValue = "0", required = true) int no, Model model) {
		
		if(no == 0) {
			return "redirect:/error";
		} else {
			NoticeDTO detail = noticeService.detail(no);
			if(detail.getNno() == 0) {
				return "reidrect:/error";
			} else {
				model.addAttribute("detail", detail);
				return "noticeDetail";
			}
		}
	}
}

공지글 상세보기

notice-mapper.xml

 

   <select id="noticeDetail" resultType="notice" parameterType="Integer">
		SELECT nno, ndel, nread, ntitle, ndate, ncontent
		FROM notice
		WHERE nno=#{nno} AND ndel=1
	</select>

NoticeServiceImpl.java

   @Override
   public NoticeDTO detail(int no) {
      return noticeDAO.detail(no);
   }

 

-> detail 생성 (DAO에)

NoticeDAO.java

	public NoticeDTO detail(int no) {
		return sqlSession.selectOne("notice.noticeDetail", no);
	}

notice.jsp

	<!-- 게시판 -->
	<br>
	<br>
	<section class="page-section" id="services">
		<div class="container">
			<div class="text-center">
				<h2 class="section-heading text-uppercase">공지사항</h2>
			</div>
			<div class="row text-center">

				<c:choose>
					<c:when test="${fn:length(list) gt 0}">
						<table>
							<thead>
								<tr>
									<th>번호</th>
									<th>제목</th>
									<th>작성일</th>
									<th>조회수</th>
								</tr>
							</thead>
							<c:forEach items="${list }" var="row">
								<tr>
									<td onclick="noticeDetail(${row.nno })">${row.nno }</td>
									<td class="title"><a href="./noticeDetail?no=${row.nno }">
											${row.ntitle } </a></td>
									<td>${row.ndate }</td>
									<td>${row.nlike }</td>
								</tr>
							</c:forEach>
						</table>
					</c:when>
					<c:otherwise>
						<h1>공지사항이 없습니다.</h1>
					</c:otherwise>
				</c:choose>

noticeDetail.jsp

	<!-- 게시판 -->
	<section class="page-section" id="detail">
		<div class="container">
			<div class="text-center">
				<h2 class="section-heading text-uppercase">공지사항 디테일</h2>
			</div>

			<c:if test="${not empty detail}">
				<div class="card mb-4" style="min-height: 500px;">
					<div class="card-body">
						<div class="h2">${detail.ntitle}</div>
						<div class="row p-2 bg-secondary">
							<div class="col align-middle text-start">
								관리자
								<a      class="btn btn-primary" href="./noticeDel${detail.nno }">[삭제]</a>
								<button class="btn btn-primary" onclick="location.href='./noticeUpdate?no=${detail.nno}'">수정</button>
							</div>
							<div class="col align-middle text-end">${detail.ndate}</div>
						</div>
						<div class="mt-4 h-auto">${detail.ncontent}</div>
					</div>
				</div>
				<button class="btn btn-warning" onclick="history.back()">공지사항</button>
				<hr>
			</c:if>

			<c:if test="${empty detail}">
				<!-- detail이 null인 경우 처리 -->
				<p>공지사항이 존재하지 않습니다.</p>
			</c:if>
		</div>
	</section>

 

공지 글 삭제하기

NoticeController.java

	    // noticeDel
	    @GetMapping("/noticeDel{no}")
	    public String noticeDel(@PathVariable("no") int no) {
	    	System.out.println("@PathVariable : " + no);

	    	noticeService.noticeDel(no);
	    	return "redirect:/notice";
	}

NoticeServiceImpl.java

	@Override
	public int noticeDel(int no) {
		return noticeDAO.noticeDel(no);
	}

NoticeDAO.java

	public int noticeDel(int no) {
		return sqlSession.update("notice.noticeDel",no);
	}

notice-mapper.xml

    <update id="noticeDel" parameterType="Integer">
    	UPDATE notice SET ndel='0'
    	WHERE nno=#{nno} AND ndel=1
    </update>

 

삭제된 글은 화면에 보이지 않도록 하려면 mapper의 noticeList를 수정해야 함. 

* ndel이 1인 글만 화면에 노출 : WHERE ndel=1

	<select id="noticeList" resultType="notice"> 
		SELECT nno, ndel, nread, nlike, ntitle, ncontent, ndate
		FROM notice
		WHERE ndel=1
		ORDER BY nno DESC
	</select>

페이징 만들기

Board에서 페이징 만들었던 내용 참고

 

NoticeController.java

@Controller
public class NoticeController {
	
	@Resource(name="noticeService") // 서비스와 name이 일치해야함.
	private NoticeService noticeService;

	@Autowired
	private Util util;
	
	// 2024-02-27 공지 리스트, 요구사항 확인
	// 페이징
	@GetMapping("/notice")
	public String notice(@RequestParam(value = "pageNo", required = false) String no ,Model model) {
		
		int currentPageNo=1;
		if(util.str2Int(no) > 0 ) { // 정수=1, 정수가 아니면 currentPageNo
			currentPageNo = Integer.parseInt(no);
		}
			
		// 전체 글 수 totalRecordCount (0, 1인 것들만 가져오기)
		int totalRecordCount = noticeService.totalRecordCount();

		// pagination
		PaginationInfo paginationInfo = new PaginationInfo();
		paginationInfo.setCurrentPageNo(currentPageNo); // 현재 페이지 번호
		paginationInfo.setRecordCountPerPage(10); // 한 페이지에 게시되는 게시물 수 
		paginationInfo.setPageSize(10); // 페이징 리스트의 사이즈 (페이징 숫자 수)
		paginationInfo.setTotalRecordCount(totalRecordCount); // 전체 게시물 건 수
		
		List<NoticeDTO> list = noticeService.noticeList(paginationInfo.getFirstRecordIndex());
		model.addAttribute("list", list);
		
		//페이징 관련 정보가 있는 PaginationInfo 객체를 모델에 반드시 넣어준다.
		model.addAttribute("paginationInfo", paginationInfo); 
		model.addAttribute("pageNo", currentPageNo);		
		
		return "notice"; // ......./views/notice.jsp
	}

 

-> totalRecordCount를 NoticeService에 추가

NoticeService.java

추가 내용 : int totalRecordCount();

public interface NoticeService {

    public List<NoticeDTO> noticeList(int pageNo);
    public NoticeDTO detail(int no);
    public int noticeWrite(NoticeDTO dto);
    public int noticeDel(int no);
    public int noticeUpdate(NoticeDTO dto);
	public int totalRecordCount();
    
}

NoticeServiceImpl.java

* noticeList 매개변수에 int pageNo

* totalRecordCount() 생성

	@Override
	public List<NoticeDTO> noticeList(int pageNo) {
		return noticeDAO.noticeList(pageNo);
	}

	@Override
	public int totalRecordCount() {
		return noticeDAO.totalRecordCount();
	}

notice.jsp

<script type="text/javascript">

// 전자정부 페이징 이동 스크립트
function linkPage(pageNo){
	location.href="./notice?pageNo="+pageNo;
}

</script>

 

페이징 코드 : table이 끝나는 밑에 넣어주기 

<!-- 페이징 -->
<div class="m-2 bg-secondary">
	<ui:pagination paginationInfo="${paginationInfo}" type="text" jsFunction="linkPage" />
</div>

notice-mapper.xml

	<select id="totalRecordCount" resultType="Integer">
		SELECT COUNT(*) FROM notice WHERE ndel=1
	</select>

	<select id="noticeList" parameterType="Integer" resultType="notice">
		SELECT nno, ntitle, ndate
		FROM notice
		WHERE ndel=1
		ORDER BY nno DESC
		LIMIT #{pageNo}, 10
	</select>

notice.jsp 전체코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://egovframework.gov/ctl/ui" prefix="ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />

<title>공지사항</title>

<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js"
	crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
	rel="stylesheet" type="text/css" />
<link
	href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
	rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link href="css/board.css" rel="stylesheet" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
	integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
	crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- summer note -->
<script src="/js/summernote-lite.js"></script>
<script src="/js/summernote/summernote-ko-KR.js"></script>
<link rel="stylesheet" href="/css/summernote/summernote-lite.css">
<link
	href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css"
	rel="stylesheet">
<script
	src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<!-- summer note -->

<script type="text/javascript">
// 전자정부 페이징 이동 스크립트
function linkPage(pageNo){
	location.href="./notice?pageNo="+pageNo;
}
</script>
<style>
thead {
	background-color: #007bff; /* 원하는 배경색으로 수정 가능 */
	color: #fff; /* 텍스트 색상 설정 */
}
</style>
</head>

<body id="page-top">
	<!-- Navigation 코드 이동 : menu.jsp -->
	<%@ include file="menu.jsp"%>

	<!-- 게시판 -->
	<br>
	<br>
	<section class="page-section" id="services">
		<div class="container">
			<div class="text-center">
				<h2 class="section-heading text-uppercase">공지사항</h2>
			</div>
			<div class="row text-center">
				<c:choose>
					<c:when test="${fn:length(list) gt 0}">
						<table>
							<thead>
								<tr>
									<th>번호</th>
									<th>제목</th>
									<th>작성일</th>
									<th>조회수</th>
								</tr>
							</thead>
							<c:forEach items="${list}" var="row">
								<tr>
									<td onclick="noticeDetail(${row.nno})">${row.nno}</td>
									<td class="title"><a href="./noticeDetail?no=${row.nno}">
									${row.ntitle}
									</a></td>
									<td>${row.ndate}</td>
									<td>${row.nlike}</td>
								</tr>
							</c:forEach>
						</table>
						<!-- 페이징 -->
						<div class="m-2 bg-secondary">
							<ui:pagination paginationInfo="${paginationInfo}" type="text"
								jsFunction="linkPage" />
						</div>
					</c:when>
					<c:otherwise>
						<p>공지사항이 없습니다.</p>
					</c:otherwise>
				</c:choose>


				<!-- 글쓰기 버튼 -->
				<div class="d-flex justify-content-end">
					<button type="button" class="btn btn-primary btn-lg mt-3"
						data-bs-toggle="modal" data-bs-target="#write">글쓰기</button>
				</div>
			</div>
		</div>
	</section>

	<!-- Bootstrap core JS-->
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	<!-- Core theme JS-->
	<script src="js/scripts.js"></script>
	<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>

	<script>
$(document).ready(function() {
	//여기 아래 부분
	$('#summernote').summernote({
		lang: "ko-KR", // default: 'en-US'
		height: 400,
		fontNames : ['D2Coding', 'Arial Black', 'Comic Sans MS', 'Courier New'],
		placeholder: '간단하게 작성해주세요🥰',
		toolbar: [
		    // [groupName, [list of button]]
		    ['style', ['bold', 'italic', 'underline', 'clear']],
		    /* ['font', ['strikethrough', 'superscript', 'subscript']], */
		    ['fontname', ['fontname','fontsize', 'color']],
		    ['para', ['ul', 'ol', 'paragraph']],
		    /* ['height', ['height']] */
		    ['table', ['table','link', 'picture', 'video', 'fullscreen', 'codeview', 'help']]
		  ]
	});
});
</script>

</body>
</html>
반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 공부 Today I Learned' 카테고리의 다른 글

[국비 67일차 TIL] 글 제목 앞에 new 붙이기, 비밀번호 암호화  (0) 2024.02.28
[spring] 회원가입 비밀번호 일치 확인  (0) 2024.02.28
[국비 65일차 TIL] 갤러리 글 상세보기  (0) 2024.02.26
[국비 64일차 TIL] 이메일, 파일 업로드, 이미지 갤러리  (0) 2024.02.23
[국비 63일차 TIL] spring 조회수, 좋아요 버튼, myinfo, 이메일 인증  (0) 2024.02.22

관련글

댓글

티스토리툴바