jspblog : content detail

jspblog/src/main/java/com/example/jspblog/domain/board/BoardDao.java

@@ -1,6 +1,7 @@
 package com.example.jspblog.domain.board;
 
 import com.example.jspblog.config.DB;
+import com.example.jspblog.domain.board.dto.DetailResDto;
 import com.example.jspblog.domain.board.dto.WriteReqDto;
 
 import java.sql.Connection;
@@ -87,4 +88,34 @@ public class BoardDao {
         }
         return -1;
     }
+
+    public DetailResDto findById(int id) {
+        String sql = "select b.*, u.username from board b left outer join user u on b.userId = u.id where b.id = ?";
+        Connection conn = DB.getConnection();
+        PreparedStatement pstmt = null;
+        ResultSet rs = null;
+
+        if (conn != null) {
+            try {
+                pstmt = conn.prepareStatement(sql);
+                pstmt.setInt(1, id);
+                rs = pstmt.executeQuery();
+                if (rs.next()) {
+                    DetailResDto dto = DetailResDto.builder()
+                            .id(rs.getInt("b.id"))
+                            .title(rs.getString("b.title"))
+                            .content(rs.getString("b.content"))
+                            .readCount(rs.getInt("b.readCount"))
+                            .username(rs.getString("u.username"))
+                            .build();
+                    return dto;
+                }
+            } catch (Exception e) {
+                e.printStackTrace();
+            } finally {
+                DB.close(conn, pstmt, rs);
+            }
+        }
+        return null;
+    }
 }

jspblog/src/main/java/com/example/jspblog/domain/board/dto/DetailResDto.java

@@ -0,0 +1,18 @@
+package com.example.jspblog.domain.board.dto;
+
+import lombok.Builder;
+import lombok.Data;
+
+@Data
+@Builder
+public class DetailResDto {
+    private int id;
+    private String title;
+    private String content;
+    private int readCount;
+    private String username;
+
+//    public String getContent() {
+//        return content.replaceAll("&lt;", "<").replaceAll("&gt;", ">");
+//    }
+}

jspblog/src/main/java/com/example/jspblog/service/BoardService.java

@@ -2,6 +2,7 @@ package com.example.jspblog.service;
 
 import com.example.jspblog.domain.board.Board;
 import com.example.jspblog.domain.board.BoardDao;
+import com.example.jspblog.domain.board.dto.DetailResDto;
 import com.example.jspblog.domain.board.dto.WriteReqDto;
 
 import java.util.List;
@@ -25,4 +26,8 @@ public class BoardService {
     public int 글개수() {
         return boardDao.count();
     }
+
+    public DetailResDto 글상세보기(int id) {
+        return boardDao.findById(id);
+    }
 }

jspblog/src/main/java/com/example/jspblog/web/BoardController.java

@@ -1,6 +1,7 @@
 package com.example.jspblog.web;
 
 import com.example.jspblog.domain.board.Board;
+import com.example.jspblog.domain.board.dto.DetailResDto;
 import com.example.jspblog.domain.board.dto.WriteReqDto;
 import com.example.jspblog.domain.user.User;
 import com.example.jspblog.service.BoardService;
@@ -58,16 +59,23 @@ public class BoardController extends HttpServlet {
                 }
                 break;
             }
-            case "list" :
+            case "list" : {
                 int page = Integer.parseInt(request.getParameter("page"));
                 List<Board> boards = boardService.글목록보기(page);
                 int boardCount = boardService.글개수();
                 int lastPage = (boardCount - 1) / 4;
-                double currentPosition = (double)page/lastPage*100;
+                double currentPosition = (double) page / lastPage * 100;
                 request.setAttribute("boards", boards);
                 request.setAttribute("lastPage", lastPage);
                 request.setAttribute("currentPosition", currentPosition);
                 request.getRequestDispatcher("board/list.jsp").forward(request, response);
             }
+            case "detail" : {
+                int id = Integer.parseInt(request.getParameter("id"));
+                DetailResDto dto = boardService.글상세보기(id);
+                request.setAttribute("detail", dto);
+                request.getRequestDispatcher("board/detail.jsp").forward(request, response);
+            }
+        }
     }
 }

jspblog/src/main/webapp/board/detail.jsp

@@ -0,0 +1,71 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+
+<%@ include file="../layout/header.jsp" %>
+
+<div class="container">
+    <br />
+    <br />
+    <h6 class="m-2">
+        작성자 : <i>${detail.username}  </i> 조회수 : <i>${detail.readCount}</i>
+    </h6>
+    <br />
+    <h3 class="m-2">
+        <b>${detail.title}</b>
+    </h3>
+    <hr />
+    <div class="form-group">
+        <div id="content" class="m-2"></div>
+    </div>
+
+    <hr />
+
+    <!-- 댓글 박스 -->
+    <div class="row bootstrap snippets">
+        <div class="col-md-12">
+            <div class="comment-wrapper">
+                <div class="panel panel-info">
+                    <div class="panel-heading m-2"><b>Comment</b></div>
+                    <div class="panel-body">
+                        <textarea id="reply__write__form" class="form-control" placeholder="write a comment..." rows="2"></textarea>
+                        <br>
+                        <button onclick="" class="btn btn-primary pull-right">댓글쓰기</button>
+                        <div class="clearfix"></div>
+                        <hr />
+
+                        <!-- 댓글 리스트 시작-->
+                        <ul id="reply__list" class="media-list">
+
+                            <!-- 댓글 아이템 -->
+                            <li id="reply-1" class="media">
+                                <img src="${pageContext.request.contextPath}/images/profile.jpg" class="img-circle" style="width: 50px; height: 50px;" alt="profile-image"/>
+                                <div class="media-body">
+                                    <strong class="text-primary">홍길동</strong>
+                                    <p>
+                                        댓글입니다.
+                                    </p>
+                                </div>
+                                <div class="m-2">
+
+                                    <i onclick="" class="material-icons">delete</i>
+
+                                </div>
+                            </li>
+
+                        </ul>
+                        <!-- 댓글 리스트 끝-->
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <!-- 댓글 박스 끝 -->
+</div>
+<script>
+    let content = $.parseHTML("${detail.content}")
+    $(document).ready(function () {
+        $('#content').append(content[0].data)
+    })
+</script>
+</body>
+</html>

jspblog/src/main/webapp/layout/header.jsp

@@ -13,6 +13,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>