DAY 54 - projectMVC HOMEWORK (2024.09.20)

1. 글이 길어서 boardView.jsp의 내용이 깨졌다 ==> 해결하시오.

boardDetail.jsp

 <table border="1">
        <tr>
            <th width="100px">제목</th>
            <td colspan="5">${boardDTO.subject}</td>
        </tr>
        <tr>
            <th>글 번호</th>
            <td>${boardDTO.seq}</td>

            <th>작성자</th>
            <td>${boardDTO.name}</td>

            <th>조회수</th>
            <td>${boardDTO.hit}</td>
        </tr>
		<tr>
            <th>내용</th>
            <td colspan="5" style='white-space: pre-wrap;'>${boardDTO.content}</td>
        </tr>
    </table>

 

이런식으로 쭉 길게 적어도 밑에처럼 알아서 테이블 크기에 맞춰서 나오는 것을 확인할 수 있다.

---

강사님 답

        <tr>
            <th>내용</th>
            <td colspan="5" style="white-space: pre-line; word-break: break-all;">
                ${boardDTO.content}
            </td>
        </tr>

---

2. 글수정, 글삭제 버튼은 자기글이 아니면 나타나지 않는다.

package board.service;

import java.text.SimpleDateFormat;

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

import com.control.CommandProcess;

import board.bean.BoardDTO;
import board.dao.BoardDAO;

public class BoardDetailService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {		
		int seq = Integer.parseInt(request.getParameter("seq"));
		int pg = Integer.parseInt(request.getParameter("pg"));
		
		BoardDAO boardDAO = BoardDAO.getInstance();
		BoardDTO boardDTO = boardDAO.boardDetail(seq);
		
		HttpSession session = request.getSession();
        String id = (String) session.getAttribute("memId"); //세션 ID
        boolean isWriter = false;
        if (id != null && id.equals(boardDTO.getId())) {  // 로그인 상태이면서 로그인 회원이랑 작성자 같은지 여부 체크 !
            isWriter = true;
        }
	        
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd");
	    String logtime = sdf.format(boardDTO.getLogtime());
	        
	    request.setAttribute("boardDTO", boardDTO);
	    request.setAttribute("pg", pg);
        request.setAttribute("logtime", logtime);    
        request.setAttribute("isWriter", isWriter);    
		return "/board/boardDetail.jsp";
	}

}

---

        <c:if test="${isWriter}">
            <input type="button" id="updateBtn" value="수정" onclick="location.href='/projectMVC/board/boardUpdate.do?seq=' + ${boardDTO.seq}"/>
            <input type="button" id="deleteBtn" value="삭제" />
        </c:if>

---

강사님 답

boardDetail.jsp

<input type="hidden" id="memId" value="${memId }" />

    <div class="table-buttons">
        <input type="button" value="목록" onclick="location.href='/projectMVC/board/boardList.do?pg=${pg}'" />
        <span id="boardDetailSpan">
            <input type="button" id="updateBtn" value="수정" onclick="location.href='/projectMVC/board/boardUpdateForm.do?seq=' + ${boardDTO.seq}"/>
            <input type="button" id="deleteBtn" value="삭제" />
        </span>
    </div>

---

boardDetail.js

$(function(){
	if($('#memId').val() == $('#id').text())
		$('#boardDetailSpan').show();
	else
		$('#boardDetailSpan').hide();
});

---

3. 조회수 - 작성한 글을 확인할 때마다 조회수 증가 ===> hitUpdate()

board.js

// 제목을 클릭했을 때
$('.subjectA').click(function(){
    // 로그인 여부 확인
    if ($('#memId').val() == '') {
        alert('먼저 로그인하세요.');
    } else {
        let seq = $(this).parent().prev().text(); 
        let pg = $('#pg').val(); 

        $.ajax({
            type: 'post',
            url: '/projectMVC/board/boardHit.do', 
            data: { 'seq': seq },
            success: function() {
                location.href = '/projectMVC/board/boardDetail.do?seq=' + seq + '&pg=' + pg;
            },
            error: function(e) {
                console.log(e);
            }
        });
    }
});

---

command.properties

#글 조회수
/board/boardHit.do=board.service.BoardHitService

---

BoardHitService.java

package board.service;

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

import com.control.CommandProcess;

import board.dao.BoardDAO;

public class BoardHitService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
        int seq = Integer.parseInt(request.getParameter("seq"));
        System.out.println("seq = " + seq);
        // DAO를 통해 조회수 증가 처리
        BoardDAO boardDAO = BoardDAO.getInstance();
        boardDAO.boardHit(seq);
       
        return "none"; 
	}

}

 

---

BoardDAO.java

	public void boardHit(int seq) {
	    SqlSession sqlSession = sqlSessionFactory.openSession();
        sqlSession.update("boardSQL.boardHit", seq);
        sqlSession.commit();
        sqlSession.close();
	}

 

---

boardMapper.xml

    <!-- 조회수 증가 -->
	<update id="boardHit" parameterType="int">
	   update board
	   set hit = hit + 1
	   where seq = #{seq}
	</update>

 

---

4. 글수정 ===> 제목, 내용, 날짜 수정

BoardUpateFormService.java

package board.service;

import java.text.SimpleDateFormat;

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

import com.control.CommandProcess;

import board.bean.BoardDTO;
import board.dao.BoardDAO;

public class BoardUpdateFormService implements CommandProcess{
	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
int seq = Integer.parseInt(request.getParameter("seq"));
		
		BoardDAO boardDAO = BoardDAO.getInstance();
		BoardDTO boardDTO = boardDAO.boardDetail(seq);
		
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd");
	    String logtime = sdf.format(boardDTO.getLogtime());
	        
	    request.setAttribute("boardDTO", boardDTO);
        request.setAttribute("logtime", logtime);    
        
		return "/board/boardUpdateForm.jsp";		
	}
}

---

boardUpateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시글 수정</title>
<style type="text/css">
body {
    background-color: #FFE2FA;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    border-radius: 10px;
    background-color: white;
    width: 700px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

th, td {
    padding: 10px 15px;
    text-align: left;
    font-size: 14px;
}

th {
    color: #333;
    font-size: 16px;
}

td {
    color: #333;
}

input[type="text"], textarea {
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #CCC;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
}

textarea {
    resize: none;
}

input[type="button"], input[type="submit"], input[type="reset"] {
    background-color: #FF9ADB;
    border: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
    margin: 5px;
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: #FF70C0;
}

img {
    margin-bottom: 20px;
    cursor: pointer;
    display: block;
}

table td[colspan="2"] {
    text-align: center;
}
</style>
</head>
<body>
     <div id="header">
		<h1>
			<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
			MVC를 활용한 미니프로젝트
		</h1>
   </div>
   
    <form action="${ pageContext.request.contextPath }/board/boardUpdate.do" method="post">
        <table border="1">
            <tr>
                <th width="100px">제목</th>
                <td colspan="5">
                    <input type="text" name="subject" id="subject" value="${boardDTO.subject}" size="65" />
                </td>
            </tr>
            <tr>
                <th>글 번호</th>
                <td>
                    <input type="text" name="seq" id="seq" value="${boardDTO.seq}" readonly />
                </td>
    
                <th>작성자</th>
                <td>
                    <input type="text" name="name" id="name" value="${boardDTO.name}" readonly />
                </td>
    
                <th>조회수</th>
                <td>
                    <input type="text" name="hit" id="hit" value="${boardDTO.hit}" readonly />
                </td>
            </tr>
            <tr>
                <th>내용</th>
                <td colspan="5">
                    <textarea name="content" id="content" cols="65" rows="15">${boardDTO.content}</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="6" align="center">
                    <span id="boardDetailSpan">
                        <input type="button" id="updateBtn" value="수정" /> <!-- seq, pg 가지고간다. -->
                        <input type="button" id="deleteBtn" value="삭제" /> <!-- seq만 가지고간다. -->
                    </span>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

---

BoardUpateService.java

package board.service;

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

import com.control.CommandProcess;

import board.bean.BoardDTO;
import board.dao.BoardDAO;

public class BoardUpdateService implements CommandProcess {

    @Override
    public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
        int seq = Integer.parseInt(request.getParameter("seq"));
        String subject = request.getParameter("subject");
        String content = request.getParameter("content");
        
        System.out.println(seq);
        System.out.println(subject);
        System.out.println(content);
        BoardDTO boardDTO = new BoardDTO();
        boardDTO.setSeq(seq);
        boardDTO.setSubject(subject);
        boardDTO.setContent(content);
        
        BoardDAO boardDAO = BoardDAO.getInstance();
        boardDAO.boardUpdate(boardDTO);
        
        return "redirect:/board/boardList.do?pg=1";
    }
}

---

강사님 답

글수정

boardDetail.jsp

	<input type="hidden" id="memId" value="${sessionScope.memId }" />
   	<input type="hidden" name="seq" value="${boardDTO.seq}" />
   	<input type="hidden" name="pg" value="${requestScope.pg}" />
   	
    <table border="1" id="boardDetailForm">

        <span id="boardDetailSpan">
            <input type="button" id="updateBtn" value="수정" /> <!-- seq, pg 가지고간다. -->
            <input type="button" id="deleteBtn" value="삭제" /> <!-- seq만 가지고간다. -->
        </span>

---

boardDetail.js

	$('#updateBtn').click(function(){
		$('#boardDetailForm').attr('action', '/projectMVC/board/boardUpateForm.do');
		$('#boardDetailForm').submit(); //seq, pg를 가지고 이동한다.
	});

---

command.properties

#글 수정
/board/boardUpdateForm.do=board.service.BoardUpdateFormService

---

BoardUpdateFormService.java

1. 데이터 (seq, pg) 

2. DB(데이터를 먼저 뿌려줘야하므로)

3. return  "/board/boardUpdateForm.jsp"

package board.service;

import java.text.SimpleDateFormat;

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

import com.control.CommandProcess;

import board.bean.BoardDTO;
import board.dao.BoardDAO;

public class BoardUpdateFormService implements CommandProcess{
	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
		int seq = Integer.parseInt(request.getParameter("seq"));
		int pg = Integer.parseInt(request.getParameter("pg"));
		
		BoardDAO boardDAO = BoardDAO.getInstance();
		BoardDTO boardDTO = boardDAO.boardDetail(seq);
		
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd");
	    String logtime = sdf.format(boardDTO.getLogtime());
	        
	    request.setAttribute("boardDTO", boardDTO);
        request.setAttribute("logtime", logtime);    
        request.setAttribute("pg", pg);    
        
		return "/board/boardUpdateForm.jsp";		
	}
}

---

BoardDAO.java

	public BoardDTO boardDetail(int seq) {
		SqlSession sqlSession = sqlSessionFactory.openSession(); //생성
		BoardDTO boardDTO = sqlSession.selectOne("boardSQL.boardDetail", seq);
		sqlSession.close();
		return boardDTO;
	}

---

boardMapper.xml

	<!-- 글 상세보기 -->
	<select id="boardDetail" parameterType="int" resultType="board.bean.BoardDTO">
 		select * from board where seq = #{seq}
 	</select>

---

boardUpdateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시글 수정</title>
<style type="text/css">
body {
    background-color: #FFE2FA;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    border-radius: 10px;
    background-color: white;
    width: 700px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

th, td {
    padding: 10px 15px;
    text-align: left;
    font-size: 14px;
}

th {
    color: #333;
    font-size: 16px;
}

td {
    color: #333;
}

input[type="text"], textarea {
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #CCC;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
}

textarea {
    resize: none;
}

input[type="button"], input[type="submit"], input[type="reset"] {
    background-color: #FF9ADB;
    border: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
    margin: 5px;
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: #FF70C0;
}

img {
    margin-bottom: 20px;
    cursor: pointer;
    display: block;
}

table td[colspan="2"] {
    text-align: center;
}
</style>
</head>

<body>
     <div id="header">
		<h1>
			<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
			MVC를 활용한 미니프로젝트
		</h1>
   </div>
   
    <form id="boardUpateForm">
        <table border="1">
            <tr>
                <th width="100px">제목</th>
                <td colspan="5">
                    <input type="text" name="subject" id="subject" value="${boardDTO.subject}" size="65" />
                </td>
            </tr>
            <tr>
                <th>글 번호</th>
                <td>
                    <input type="text" name="seq" id="seq" value="${boardDTO.seq}" readonly />
                </td>
    
                <th>작성자</th>
                <td>
                    <input type="text" name="name" id="name" value="${boardDTO.name}" readonly />
                </td>
    
                <th>조회수</th>
                <td>
                    <input type="text" name="hit" id="hit" value="${boardDTO.hit}" readonly />
                </td>
            </tr>
            <tr>
                <th>내용</th>
                <td colspan="5">
                    <textarea name="content" id="content" cols="65" rows="15">${boardDTO.content}</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="6" align="center">
                   <input type="button" value="목록" onclick="location.href='/projectMVC/board/boardList.do?pg=${pg}'" />
                   <input type="submit" value="수정 완료" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

---

        <tr>
            <td colspan="6" align="center">
               <input type="button" value="목록" onclick="location.href='/projectMVC/board/boardList.do?pg=${pg}'" />
               <input type="submit" value="수정 완료" id="updateBtn" />
            </td>
        </tr>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$('#updateBtn').click(function(){
    event.preventDefault();  // 기본 폼 제출 방지

    $('#subjectDiv').empty();
    $('#contentDiv').empty();
    let isValid = true;

    // 제목 검사
    if ($('#subject').val().trim() === '') {
        $('#subjectDiv').html('제목을 입력하세요.');
        $('#subject').focus();
        isValid = false;
    }

    // 내용 검사
    if ($('#content').val().trim() === '') {
        $('#contentDiv').html('내용을 입력하세요.');
        $('#content').focus();
        isValid = false;
    }

    // 유효성 검사를 모두 통과한 경우에만 ajax 요청 실행
    if (isValid) {
        $.ajax({
            type: 'post',
            url: '/projectMVC/board/boardUpdate.do',
            data: {
				'seq' : $('#seq').val(),
				'subject' : $('#subject').val(),
				'content' : $('#content').val()
			},  
            success: function() {
                alert('글수정에 성공하였습니다!');
                window.location.href = "/projectMVC/board/boardList.do?pg=" + $('#pg').val();  
            },
            error: function(e) {
                console.log(e);
            }
        });
    }
});
</script>
</body>
</html>

---

command.properties

/board/boardUpdate.do=board.service.BoardUpdateService

---

BoardUpdateService.java

package board.service;

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

import com.control.CommandProcess;

import board.bean.BoardDTO;
import board.dao.BoardDAO;

public class BoardUpdateService implements CommandProcess {

    @Override
    public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
        int seq = Integer.parseInt(request.getParameter("seq"));
        String subject = request.getParameter("subject");
        String content = request.getParameter("content");
        
        System.out.println(seq);
        System.out.println(subject);
        System.out.println(content);
        BoardDTO boardDTO = new BoardDTO();
        boardDTO.setSeq(seq);
        boardDTO.setSubject(subject);
        boardDTO.setContent(content);
        
        BoardDAO boardDAO = BoardDAO.getInstance();
        boardDAO.boardUpdate(boardDTO);
        
        return "none";
    }
}

---

BoardDAO.java

	public void boardUpdate(BoardDTO boardDTO) {
		SqlSession sqlSession = sqlSessionFactory.openSession(); //생성
		sqlSession.update("boardSQL.boardUpdate", boardDTO);
		sqlSession.commit();
		sqlSession.close();
	}

---

boardMapper.xml

 	<!-- 글 수정하기 -->
 	<update id="boardUpdate" parameterType="board.bean.BoardDTO">
 		update board set subject=#{subject}, content=#{content}, logtime=sysdate where seq=#{seq} 
 	</update>

---

글삭제

	$('#deleteBtn').click(function(){
		$('#boardDetailForm').attr('action', '/projectMVC/board/boardDeleteForm.do');
		$('#boardDetailForm').submit(); //seq를 가지고 이동한다.
	});

 

먼저 비밀번호 입력하기부터 하고 맞으면 삭제시켜주기