Spring 소규모 게시판 - 6. 글보기

2023. 10. 17. 12:24

위로 아래

글보기 HTML

css는 글작성의 것과 같은 파일을 사용한다.

html 부분은 글쓰기 Form과 전체적으로 똑같되, input 태그를 수정할 수 없도록 readonly처리하고, 데이터베이스에서 게시글에 저장되어 있는 정보를 불러와 value에 넣어 처음부터 입력되어 있도록 설정한다.

<%@ 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="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글내용</title>
<link rel="stylesheet" href="css/list.css" type="text/css">
<script src="jquery/jquery-3.7.0.min.js"></script>
<script src="js/content.js"></script>

</head>
<body>
<form name="form1" action="" method="post">
<table>
	<tr><td colspan="2"><h3>글 내용</h3></td></tr>
	<tr>
		<th>제목</th>
		<td><input type="text" name="subject" title="제목" value="${article.subject}" readonly="readonly"></td>
	</tr>
	<tr>
		<th>작성자</th>
	<td><input type="text" name="writer" title="작성자" value="${article.writer}" readonly="readonly"></td>
	</tr>
	<tr>
		<th>IP</th>
	<td><input type="text" name="ip" title="IP" value="${article.ip}" disabled="disabled"></td>
	</tr>
	<tr>
		<th>작성일자</th>
	<td><input type="text" name="regdate" title="작성일자" value="${article.regdate}" disabled="disabled"></td>
	</tr>
	<tr>
		<th>글 내용</th>
		<td><textarea name="content" title="글내용" readonly="readonly">${article.content}</textarea></td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type="password" name="passwd" title="비밀번호" readonly="readonly" value="${article.passwd}"></td>
	</tr>
	<tr>
		<td colspan="2">
			<input class="btn" type="button" value="글 수정" id="update">
			<input class="btn" type="button" value="글 삭제" id="delete">
			<input class="btn" type="button" value="답글" id="reply">
			<input class="btn" type="button" value="글 목록" onclick="location.href='list?curPage=${pdto.curPage}'">
		</td>
	</tr>
</table>
<input type="hidden" name="bno" value="${article.bno}">
<input type="hidden" name="bref" value="${article.bref}">
<input type="hidden" name="bstep" value="${article.bstep}">
<input type="hidden" name="blevel" value="${article.blevel}">
<input type="hidden" name="curPage" value="${pdto.curPage}">
</form>
</body>
</html>

글보기 JavaScript

글 수정, 삭제 모두에 비밀번호 확인이 필요하기 때문에 비밀번호 확인은 함수로 만든다.

원래 입력되어 있던 비밀번호 value를 불러와 사용자가 입력한 것과 일치하는지 확인하고, 일치하면 true를, 불일치하면 false를 반환하도록 한다.

form 태그를 자주 불러내야하므로 f 변수를 만들어 대입하고,

비워놓은 form 태그의 action 부분에

각 버튼에 따라 알맞은 주소로 교체 후 submit 해준다.

/**
 * 
 */
 $().ready(function(){
		let f = $('form[name=form1]');
		$("#update").on("click", function(){
			if(checkpw()){
				f.attr("action","update");
				f.submit();
			} else 
				alert("비밀번호가 틀렸습니다.");
		})
		$("#delete").on("click", function(){
			if(checkpw()){
				if(confirm("정말 삭제하시겠습니까?"))
				f.attr("action","delete")
				f.submit();
			} else
				alert("비밀번호가 틀렸습니다.");
		})
		
		$("#reply").on("click", function(){
			f.attr('action','writeForm');
			f.submit();
		})
	})
	
	function checkpw(){
		let upw = prompt("비밀번호를 입력하시오.");
		let cpw = $('input[name=passwd]').val();
		if(upw==cpw)
			return true;
		return false;
	}

글보기 컨트롤러

package com.ecom4.hi.board.control;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.ecom4.hi.HomeController;
import com.ecom4.hi.board.model.BoardDTO;
import com.ecom4.hi.board.model.PageDTO;
import com.ecom4.hi.board.model.RowInterPage;
import com.ecom4.hi.board.service.BoardService;

@Controller
public class BoardController {
	
	private static final Logger logger = LoggerFactory.getLogger(BoardController.class);

	//JavaBoard에서 작업했던 Action 역할을 하는 객체 - 비즈니스 로직 BIZ를 갖고 있다
	
	@Autowired
	private BoardService boardService;
	
	@RequestMapping(value = "/content")
	public String getArticle(HttpServletRequest request, HttpServletResponse response,
			BoardDTO dto, Model model, PageDTO pdto) {
		
		logger.info("글보기");
		
		BoardDTO article = boardService.getArticle(dto);
		
		model.addAttribute("article", article);
		model.addAttribute("pdto", pdto);
		
		
		return "board/BoardContent";
	}
}

글목록 Service

boardService 인터페이스

package com.ecom4.hi.board.service;

import java.util.List;
import java.util.Map;

import com.ecom4.hi.board.model.BoardDTO;
import com.ecom4.hi.board.model.PageDTO;

public interface BoardService {
	
	BoardDTO getArticle(BoardDTO dto);

}

boardServiceImpl 구현 클래스

package com.ecom4.hi.board.service;

import java.sql.ResultSet;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.ecom4.hi.board.dao.BoardDAO;
import com.ecom4.hi.board.model.BoardDTO;
import com.ecom4.hi.board.model.PageDTO;
import com.ecom4.hi.board.model.RowInterPage;

@Service(value = "boardService")
public class BoardServiceImpl implements BoardService {

	// DAO DI(Dependency Injection)
	@Autowired
	private BoardDAO boardDao;

	@Transactional // 둘 중에 하나만 되지 않고, 둘 다 되거나 둘 다 안 되게 할 때 쓰는 것
	@Override
	public BoardDTO getArticle(BoardDTO dto) {
		//update - readcount
		
		boardDao.updateReadCnt(dto);
		
		//getArticle
		BoardDTO article = boardDao.getArticle(dto);
		
		return article;
	}

}

글보기 DAO

package com.ecom4.hi.board.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.ecom4.hi.board.model.BoardDTO;

@Repository(value = "boardDao")
public class BoardDAO {

	// 자원을 DI (의존성 주입)
	@Autowired
	private SqlSession sqlSession;

	private String namespace = "board.BoardDAO.";
	
	public BoardDTO getArticle(BoardDTO dto) {
		return sqlSession.selectOne(namespace + "getArticle", dto);
	}

}

bno를 전달받으면 bno에 해당하는 모든 열의 내용을 모두 DTO에 저장한다.

또한 게시글이 클릭되었으니 조회수를 올리기 위해 해당 게시글의 readcount를 +1 update 시킨다.

글보기 Mapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace = "board.BoardDAO">

<update id="updateReadCnt" parameterType="bvo">
	UPDATE board SET readcount = readcount+1
	WHERE bno = #{bno}
</update>

<select id="getArticle" resultType="bvo" parameterType="bvo">
	SELECT bno, bref, bstep, blevel, readcount, 
		subject, content, writer, regdate, ip, passwd 
	FROM board
	WHERE bno = #{bno}
</select>

</mapper>

저작자표시

개 발소리 춉춉