인천 일보 아카데미 51일차 -1- 비로그인 게시판 만들어보기

나의 수업일지

인천 일보 아카데미 51일차 -1- 비로그인 게시판 만들어보기

GUPING 2023. 5. 7. 20:42

url 조건

MySQL 테이블

DTO

시작페이지 Index

header - nav - section - footer로 나눴고 nav에는 글작성 , 글목록으로 이동할 수 있게 링크가 걸려있음

<nav>
    <ul>
        <li style="display: inline-block;list-style-type: none">
        <a href="/board/save" style="text-decoration: none">글작성</a></li>
        
        <li style="display: inline-block;list-style-type: none">
        <a href="/board/" style="text-decoration: none">글목록</a></li>
    </ul>
</nav>

글 작성 페이지

<section>
    <div>
        <h2 style="text-align: center;">나는야 세이브</h2>
        <form action="/board/save" method="post">
            <table>
                <tr>
                    <th><label for="boardWriter">작성자:</label>
                        <input type="text" id="boardWriter" name="boardWriter"></th>
                    <th><label for="boardPass">글비밀번호:</label>
                        <input type="text" id="boardPass" name="boardPass"></th>
                    <th><label for="boardTitle">글제목</label>
                        <input type="text" id="boardTitle" name="boardTitle"></th>
                <tr>
                    <th colspan="6"><label for="boardContents">내용</label></th>
                </tr>
                <tr>
                    <td colspan="6"><textarea id="boardContents" name="boardContents" COLS="104" ROWS="40"></textarea>
                    </td>
                </tr>
                <tr>
                    <th colspan="6">
                        <input type="submit" style="display: inline" value="등록">
                        <input type="button" style="display: inline" value="취소" onclick="goindex()">
                    </th>
                </tr>
            </table>
        </form>
    </div>
</section>

내용을 작성할 공간은 textarea로 만들어 주었음 clos rows를 이용하여 가로 세로 크기도 정해줌

이렇게 입력된 게시글 내용은 post로 controller의 /board/save에 넘어가게된다

Controller

@Controller
@RequestMapping("/board") // 공통 주소값으로 설정
public class BoardController {
    @Autowired
    private BoardService boardService;

    @GetMapping("/save") // /board/save
    public String BoardSave(){
        return "boardPages/boardSave";
    }

    @PostMapping("/save") // /board/save
    public String BoardSave(@ModelAttribute BoardDTO boardDTO){
        boardService.BoardSave(boardDTO);
        return "redirect:/board/";
    }

Controller에서 RequestMapping을 이용하여 /board를 공통 주소값으로 설정했다

이렇게 공통주소값이 설정된다면 /board는 자동으로 입력되기 때문에 생략 가능하다

이렇게 Controller - Service - Repository - Mapper를 통하여 서버에 저장된다

글 목록 페이지

        <table>
            <tr>
                <th>글번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>작성시간</th>
                <th>조회수</th>
            </tr>
            <c:forEach items="${bList}" var="s">
                <tr>
                    <td style="border: 1px solid black;text-align: center;padding: 5px">
                        <a style="text-decoration: none;color: black" href="/board?id=${s.id}">${s.id}</a></td>
                    <td style="border: 1px solid black;text-align: center;padding: 5px">
                        <a style="text-decoration: none;color: black" href="/board?id=${s.id}">${s.boardTitle}</a></td>
                    <td style="border: 1px solid black;text-align: center;padding: 5px">
                        <a style="text-decoration: none;color: black" href="/board?id=${s.id}">${s.boardWriter}</a></td>
                    <td style="border: 1px solid black;text-align: center;padding: 5px">
                        <a style="text-decoration: none;color: black" href="/board?id=${s.id}">
                            <fmt:formatDate value="${s.boardCreateDate}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
                        </a></td>
                    <td style="border: 1px solid black;text-align: center;padding: 5px">
                        <a STYLE="text-decoration: none;color: black">${s.boardHits}</a></td>
                </tr>
            </c:forEach>
            </table>

롬북의 c태그를 사용하여 forEach문을 통해 Model에 담긴 값을 뿌려준모습

List는 SAVE와 반대로 서버에서 값을 가져온다

Repository

    public List<BoardDTO> BoardList() {
        return sql.selectList("Board.List");
    }

Mapper를 통해 DB에서 가져온 List 정보를 jsp까지 넘겨준다

글 상세 페이지

List에서 글을 누르게 되면 내용을 볼 수 있고

수정 삭제가 가능하다 , 수정과 삭제는 게시글 작성시 받은 비밀번호가 필요하다

    <table>
        <tr>
            <th colspan="6">제목</th>
        </tr>
        <tr>
            <td colspan="6"><textarea cols="104" name="boardTitle" readonly>${boardDTO.boardTitle}</textarea></td>
        </tr>
        <tr>
            <th>글번호</th>
            <th>작성자</th>
            <th>작성시간</th>
            <th>조회수</th>
        </tr>
        <tr>
            <th>${boardDTO.id}</th>
            <th>${boardDTO.boardWriter}</th>
            <th>
                <fmt:formatDate value="${boardDTO.boardCreateDate}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
            </th>
<%--            <th>${boardDTO.boardCreateDate}</th>--%>
            <th>${boardDTO.boardHits}</th>
        </tr>
        <tr>
            <td colspan="6"><textarea id="boardContents" name="boardContents"
                                      COLS="104" ROWS="38" readonly>${boardDTO.boardContents}</textarea></td>
        </tr>
        <tr>
            <th colspan="6">
                <input type="button" value="수정" onclick="goUpdate(${boardDTO.id})">
                <input type="button" value="삭제" onclick="goDelete(${boardDTO.id})">
                <input type="button" value="뒤로" onclick="goList()">
            </th>
        </tr>
    </table>

Controller

    @GetMapping
    public String boardDetail(@RequestParam("id") Long id , Model model){
        boardService.updateHits(id);
        BoardDTO boardDTO = boardService.boardDetail(id);
        model.addAttribute("boardDTO",boardDTO);
        return "boardPages/boardDetail";
    }

상세 페이지의 컨트롤러에서는 조회수 증가까지 함께 해준다

조회수를 1올리고 db에서 파리미터로 받은 id값의 정보를 찾아 화면에 출력한다

상세 페이지 - 수정 / 삭제

수정

<script>
    const updateForm = document.getElementById('updateForm');
    updateForm.addEventListener("submit",function (e){
    e.preventDefault();
    let promptResult = prompt("기존 비밀번호 확인", "입력바랍니다");
    if('${boardDTO.boardPass}' != promptResult){
        alert("비밀번호가 틀립니다");
    }else{
        alert("수정 완료!");
        updateForm.submit();
    }
    })
</script>

updateform에서 서브밋 이벤트가 실행되는 경우 이를 막고 prompt를 실행합니다

이후 prompt에서 받은 값과 기존 비밀번호가 맞는 경우 서브밋을하고 맞지 않는다면 서브밋을 하지 않습니다

삭제

<script>
    const deleteFrom = document.getElementById('deleteForm');
    const passwordResult = document.getElementById('passwordResult');
    deleteFrom.addEventListener("submit",function (e){
        e.preventDefault();
        if(passwordResult.value != ${boardDTO.boardPass}){
            alert("비밀번호가 틀립니다");
        }else{
            alert("삭제 완료!")
            deleteFrom.submit();
        }
    })
</script>

서브밋이 발생되엇을때 preventDefault를 사용하여 이벤트를 막아주고

조건문을 실행합니다 입력받은 값이 기존 비밀번호와 같다면 서브밋을하고

맞지 않다면 삭제를 진행하지 않습니다