티스토리 뷰

게시판정복/JSP게시판

4. 게시판 상세보기

/daydreamer 2017. 4. 4. 18:57

JSP만 사용해서 만드는 게시판

  • MariaDB 사용
  • 기본적인 CRUD
    Create/Read/Update/Delete




게시판 상세보기

게시판 목록을 만들었고, 글 생성 페이지도 만들었다.
이제 작성한 글을 볼 수 있도록 상세 페이지를 만들어 보댜!

상세 페이지는 글 생성 페이지와 비슷하다. 

input 박스로 입력받았던 곳에 입력했던 내용이 나온다는 차이 빼면 결국 동일하다.

리스트에서 상세 보고싶은 리스트를 클릭하면 상세 페이지로 넘어올텐데, 
상세 페이지에는 작성했던 글의 정보가 있어야 하며 수정/ 삭제가 가능해야 하고,
목록 페이지로 다시 돌아갈 수 있어야 한다.

1.

먼저 html 코드를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/JSP_Board/css/layout.css"/>
<title>게시판</title>
</head>
<body>
    <div>
        <h1>상세</h1>
    </div>
        
    <div>
        <form>
            제목 :  </br>
            작성자 :  <br/>
            작성시간 : <br/><br/>
            =============================================<br/>
 
        </form>
    </div>
 
    <div>
        <button type=button title="수정" >수정</button>
        <button type=button title="삭제" >삭제</button>
        <input type=button value="목록"/>
    </div>
</body>
</html>
cs


게시판 생성 코드와 다른건 input 박스가 사라진것과 수정, 삭제, 목록 버튼이 생긴 것이다.


2.

DB연결을 하자!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %> 
<%@ page import="java.util.*" %>      
<%@ page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% 
    //DB연결
    Connection conn = null;
    Statement stmt = null;
    
    String idx = request.getParameter("idx");
    
    try{
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/haeun?useUnicode=true&characterEncoding=utf-8","","");
        //db insert시 한글 깨져서 db명 뒤에 ?useUnicode=true&characterEncoding=utf-8 붙여준다.
        if(conn == null)
            throw new Exception("데이터베이스에 연결할 수 없습니다.");
        stmt = conn.createStatement();
        ResultSet rs = stmt.executeQuery("select * from board where idx="+idx);
        
    
        
%>
cs


html 코드 위에 <% %> 자바 코드를 삽입하여 DB에 연결한다.
리스트에서 클릭 시 파라미터로 idx를 넘겨주었다.

게시판 글 생성


idx를 받으려면 request.getParameter를 이용하여 받을 수 있다.
받아온 idx를 가지고 쿼리를 실행하여 select 문으로 idx가 idx 인 데이터를 가지고 온다.

"select * from board where idx=" + idx

이 쿼리를 실행시키면 된다.


그리고 나서 가져온 데이터를 rs.next()를 이용하여 html 코드에 넣어준다.


3. 

전체코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %> 
<%@ page import="java.util.*" %>      
<%@ page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% 
    //DB연결
    Connection conn = null;
    Statement stmt = null;
    
    String idx = request.getParameter("idx");
    
    try{
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/haeun?useUnicode=true&characterEncoding=utf-8","","");
        //db insert시 한글 깨져서 db명 뒤에 ?useUnicode=true&characterEncoding=utf-8 붙여준다.
        if(conn == null)
            throw new Exception("데이터베이스에 연결할 수 없습니다.");
        stmt = conn.createStatement();
        ResultSet rs = stmt.executeQuery("select * from board where idx="+idx);
        
    
        
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/JSP_Board/css/layout.css"/>
<title>게시판</title>
<script type="text/javascript">
 
    function deletePage(idx){
        if(confirm("글이 삭제됩니다!")==true){
            location.href="delete.jsp?idx="+idx;
        }
    };
    
    
</script>
</head>
<body>
    <div>
        <h1>상세</h1>
    </div>
<%
        while(rs.next()){
            
%>            
    <div>
        <form>
            제목 : <%= rs.getString("title") %> </br>
            작성자 : <%= rs.getString("name") %> <br/>
            작성시간 : <%= rs.getString("time") %> <br/><br/>
            =============================================<br/>
            <%= (rs.getString("text")).replace("\r\n","<br>") %>
        </form>
    </div>
 
    <div>
        <button type=button title="수정" onClick="location.href='update.jsp?idx=<%=idx%>'">수정</button>
        <button type=button title="삭제" onClick="deletePage(<%=idx %>)">삭제</button>
        <input type=button value="목록" onclick="location.href='list.jsp'"/>
    </div>
<%
    }
        conn.close();
    }catch(Exception e){
        out.println("데이터베이스에 문제가 있습니다.");
        out.println(e.getMessage());
        e.getStackTrace();
    }
%>        
</body>
</html>
cs


이해 안가는 부분은 없을것이다(혹 나중에 보더라도)

수정 버튼을 눌렀을 때 바로 수정페이지로 이 글의 idx 를 가지고 넘어가도록 onClick 이벤트를 주었고, 
삭제 버튼을 눌렀을 때는 유효성 체크를 위해 javascript로 deletePage 함수로 가도록 해주었다.
deletePage 함수에서도 idx를 가지고 넘어간다.

하나 중요한 것을 보면
내용을 받아오는 곳에 <%= (rs.getString("text")).replace("\r\n","<br>") %> 이렇게 DB값을 replace 해주는데
textarea 줄바꿈 해주는 코드이다!.

DB 연결 끊는것 잊지말고 그럼 완성~~~~


 





저작자표시

'게시판정복 > JSP게시판' 카테고리의 다른 글

6. 게시판 글 삭제  (0) 2017.04.07
5. 게시판 글 수정  (0) 2017.04.07
3. 게시판 글 생성  (0) 2017.03.28
2. 게시판 목록  (0) 2017.03.28
1. 페이지설계/ TABLE설계/ JDBC/ 이클립스DB연결  (1) 2017.02.21
공유하기 링크
댓글