[블로그프로젝트] 23. 글 상세보기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

글을 작성하고 페이징 처리 까지 했다면 이제 작성한 글을 읽어보는(상세보기) 기능을 작성하자

Index.jsp 에서 상세보기를 할 a태그에 주소를 변경해주자

변경전

변경후

 

상세보기를 클릭해보면 해당 주소로 이동할 수 있는걸 확인할 수 있다.

이동만 하는거지 해당 기능은 작성하지 않아 주소가 잘못되었다는 화면을 보게 될것이다.

 

boardController로 이동해서 컨트롤러 부분을 작성을하자

PathVariable은 주소를 "/{}"방식으로 받기위해 필요한 어노테이션이다.

    @GetMapping("/board/{id}")
    public String findById(@PathVariable int id){
		boardService.상세보기(id;)
    }

 

 

boardService로 이동해 기능을 작성하자

@Transactional(readOnly = true)
    public Board 상세보기(int id) {
        return boardRepository.findById(id)
                .orElseThrow(() ->{
                    return new IllegalArgumentException("글 상세보기 실패 : 아이디를 찾을 수 없습니다");
                });
    }

 

다시 boardController 로 이동해 마저 코드를 작성하였다.

컨트롤러에선 서비스에 상세보기 메서드를 불렀고 해당 메서드를 "board"라는 이름으로 추가한 후 board/detail로 값을 리턴해준다.

    @GetMapping("/board/{id}")
    public String findById(@PathVariable int id, Model model){
        model.addAttribute("board",boardService.상세보기(id));
        return "board/detail";
    }

 

 

board에 detail로 리턴을 해주었으니 board패키지에 detail.jsp을 생성해준다.

detail.jsp의 작성할 내용은 아래와 같다.

각각 뒤로가기, 수정, 삭제 기능을 담당하는 버튼을 3개 작성해주고

뒤로가기 기능을 가질 버튼에 클릭이 되었을 때 작동하도록 onclick을 사용하고 history.back()을 작성해 뒤로가는 기능을 추가해준다.

수정과 삭제기능은 각각 다음글에 작성할 예정이다.

버튼마다 색상을 다르게하기 위해 각각 secondary, warning, danger를 추가해주었다.

색상은 w3school에서 원하는 색으로 변경할 수 있다.

https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

br태그를 활용해 버튼과 div태그사이의 거리를 조절한다.

 

제목에는 아까 모델에 담은 정보에 board라는 이름을 사용해서 사용할 수 있고 board.title을 작성해주고

내용에는 같은 방법으로 board.content라고 작성을 해준다.

hr 태그를 활용해 제목과 내용 사이에 선을 추가해준다

<div class="container">

        <button class="btn btn-secondary" onclick="history.back()">Back</button>
        <button id="btn-update" class="btn btn-warning">Modify</button>
        <button id="btn-delete" class="btn btn-danger">Delete</button>
        <br>

        <div>
            <h3>${board.title}</h3>
        </div>

        <hr />

        <div>
            <div>${board.content}</div>
        </div>

        <hr />

</div>

 

서버를 재실행해서 결과를 확인해보면 아래와 같은 결과를 얻을 수 있다.