티스토리 뷰

게시판정복/JSP게시판

3. 게시판 글 생성

/daydreamer 2017. 3. 28. 20:01


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

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


게시판 글 생성

글 목록 페이지에 글 쓰기 버튼이 있다.
글 쓰기 버튼을 클릭하면 글 생성 페이지로 이동한다.
게시 글을 쓴 후에 추가 버튼을 누르면 DB에 작성한 글을 insert하는 페이지로 이동하고, DB 추가 작업이 완료되면 
글 목록 페이지로 다시 이동한다.


1. list.jsp 에 버튼을 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
        <button type="button" title="글쓰기" onclick="location.href='create.jsp'">글쓰기</button>
        <!-- button에 링크 걸때는 onclick을 사용한다 (a태그 안댐) -->
    </div>
</body>
</html>
cs


1. 버튼을 추가하고, 클릭 시 create.jsp로 이동하도록 onclick 속성을 준다. 
2. location.href 는 새로운 페이지로 이동시키는 속성이다. 주소 히스토리가 기록되어 뒤로가기 버튼시 list.jsp로 다시 이동하게 된다.


2. 글 생성 페이지 create.jsp

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
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<link rel="stylesheet" type="text/css" href="/JSP_Board/css/layout.css"/>
<title>게시판</title>
<script type="text/javascript">
    function check(){
        //form 의 요소를 가지고 올 때에는 form의 이름을 사용하여 가져와야 한다. getElementById는 안댕
        var title = document.create.title;
        var name = document.create.name;
        var text = document.create.text;
                
        if(title.value==""){
            alert("제목을 입력해주세요.");
            title.focus();
            return false;
        }else if(name.value==""){
            alert("이름을 입력해주세요.");
            name.focus();
            return false;
        }else if(text.value==""){
            alert("내용을 입력해주세요.");
            text.focus();
            return false;
        }else{
            alert("글이 등록됩니다!");
            return true;
        }
    }
</script>
</head>
<body>
    <div>
        <h1>글쓰기</h1>
    </div>
    
    <div> <!-- form 전송 전 데이터 유효성 체크 onsubmit  -->
        <form name="create" action="insert.jsp" method=post onsubmit="return check()">
            제목 : <input type="text" id="title" name="title"/><br>
            작성자 : <input type="text" id="name" name="name" /><br/><br/>
            =============================================<br/>
            <textarea rows="10" cols="50" id="text" name="text"></textarea>
    <div>
            <input type=submit value="등록"/>
            <input type=reset value="취소"/>
            <input type=button value="목록" onclick="location.href='list.jsp'"/>
        </div>
        </form>
    </div>
    
</body>
</html>
cs


1. form을 만들어서 form안에 내용이 담기게 만든다. input type=submit 으로 주면 form안의 data값이 전송된다.
2. form 태그의 onsubmit은 form 전송시 유효성 체크를 위해 사용된다. javascript 에서 return 값을 false로 줄 때는 form전송이 되지
   않아야 하는데 그렇게 하려면 onsubmit에 return 을 명시해주어야 한다.
3. validation 체크시 form의 요소를 가지고 오는 것은 id값이 아니라 name값이다. 


# input type = button 과 button type = button 의 차이점?
- button 요소 안에는 text, 이미지를 넣을 수 있다.
- form 양식에서는 input type 을 사용한다 : 별도의 javascript 없이 submit 을 사용하여 전송하기 때문이다.
 (button type 을 사용하면 js 필요하다.)


3. 작성한 글을 DB에 추가 insert.jsp

일단 insert 쿼리문을 작성하자

1
insert into board (name, title, text, time) values ('%s','%s','%s',now())
cs


jsp 페이지지만 java 코드만 있어 화면에 보이지 않는 페이지다.
데이터베이스를 연결한 후 받아온 데이터를 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
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
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %>    
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<%
 
    request.setCharacterEncoding("UTF-8");
    String name = request.getParameter("name");
    String title = request.getParameter("title");
    String text = request.getParameter("text");
    String time = null;
    
    if(name==null || title==null || text==null){
        throw new Exception("데이터를 입력하세요.");
    }
    
    Connection conn = null;
    Statement stmt = null;
    
    try{
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/haeun?
                                    useUnicode=true&characterEncoding=utf-8","ID","PW");
        //db insert시 한글 깨져서 db명 뒤에 ?useUnicode=true&characterEncoding=utf-8 붙여주니 안깨지고 들어간다.
        if(conn == null)
            throw new Exception("데이터베이스에 연결할 수 없습니다.");
        stmt = conn.createStatement();
        String command = String.format("insert into board" + "(name, title, text, time) values ('%s','%s','%s',now());"
                                        , name, title, text, time );
        
        int rowNum = stmt.executeUpdate(command);
        
        if(rowNum<1)
            throw new Exception("데이터를 DB에 입력할 수 없습니다.");
    }
    finally{
        try{
            stmt.close();
        }
        catch(Exception ignored){
        }
        try{
            conn.close();
        }
        catch(Exception ignored){
        }
    }
    
    response.sendRedirect("list.jsp");
%>
 
 
cs


1. request.setCharacterEncoding("UTF-8") 은 POST로 form 전송시 한글 깨짐 현상을 방지하기 위해 적어준다.
2. DB insert시에 보내는 form의 값들이 1번을 해주었는데도 불구하고 한글이 깨져서 DB명 뒤에
   ?useUnicode=true&characterEncoding=utf-8 을 적어주었다. 
3. DB에 연결하여 insert 문을 실행한다. 32번째 줄
4. response.sendRedirect("list.jsp"); 로 페이지 리다이렉팅을 해준다.


이렇게 하면 DB에 작성한 내용이 insert 된다.




*나중에 따로 다시 정리해놔야지 


데이터베이스의 데이터에 접근할때

java.sql.Statement 인터페이스 타입의 객체를 이용하여 getConnection 메서드가 리턴한 Connection 객체에 대해 createStatement 메서드를 호출해서 Statement 객체를 구할 수 있다.

Statement stmt = conn.createStatement();

executeQuery  호출 : select 문을 실행할 때 사용한다. java.sql.ResultSet 타입의 객체로 리턴된다.

executeUpdate 호출 : insert 문 / update 문 / delete 문을 실행할 때 사용한다. 리턴값은 수정하거나 삭제된 데이터의 수이다. (int)

저작자표시

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

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