[본격 게시판짜기 Part1.7 JSP, SQLDeveloper] 게시글 입력 및 리스트조회기능

2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.1 - 게시판도 HTML부터] 게시글 리스트

2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글입력폼

2012/06/13 - [Lecture/Javascript-기초] - [본격 게시판짜기 Part1.3 - Dom 맛보기 ] 글입력폼 검사

2012/06/13 - [Lecture/Jsp] - [본격 게시판짜기 Part1.4 - HTML-> JSP] form 파라미터 받기

2012/06/26 - [Lecture/SQL / Oracle] - [본격 게시판짜기 Part1.5 JSP > Oracle] 게시판 DB 테이블 생성

2012/06/26 - [Lecture/Jsp] - [본격 게시판짜기 Part1.6 Oracle > JSP] Database 접속 및 Select

안녕하세요 cocy입니다.

저번시간에는 게시글을 입력하는것까지 진행하였는데요,

입력을 계속 해보셨다면 아마 잘 안되실겁니다.

다음과 같은 에러를 보실 수 있겟네요.

이는 데이터베이스에 PK(Primary Key :  Unique, not null)로 지정한 idx값이 중복되서 insert되었기때문에 그런데요,

바로 다음의 코드 때문입니다.

String sql = "INSERT INTO BOARD "+

 

               "(IDX, TITLE, WRITER, REGDATE, COUNT, CONTENT) "+

 

               "VALUES (" + 2 +", '"+title+"', '"+writer+"', '"+regdate+"', "+count+", '"+content+"')";

그렇다면 idx를 어떻게 처리해 주어야 할까요?

일반적으로 생각해보자면,

우선 board 테이블에 select 쿼리를 날려 가장 큰 idx값을 불러오고

이 값에 +1하여 다음 insert될 게시글의 글번호로 넣으면 되겠네요.

하지만 이는 뭔가 좀 비효율적인 작업처럼 느껴지실텐데요,

그래서 각 데이터베이스들은 자동증가하는 pk를 관리할 수 있도록 하는 기능들을 지원하고 있습니다.

※ my-sql에서 auto increment에 해당하는 기능입니다.

oracle에서는 시퀀스라고 하는 기능을 지원하고 있는데요

사용법은 간단합니다. 우선 다음 화면과같이 시퀀스를 새로 생성합니다.

이름은 소문자로 해도 모두 대문자로 인식하기때문에 신경안쓰고 만드시면 되며,

빈칸안에 값들을 넣어주셔도 되지만, 빈칸그대로 확인을 누르면 기본값으로 셋팅됩니다.

시퀀스의 값을 사용하려면 우선

다음의 쿼리를 워크시트에 적고 F5 또는 F9를 누릅니다.

※ F5 : query excute with commit , F9 : query excute without commit;

쿼리를 보면 시퀀스 명을 적고(board_seq)

.연산자로 접근하여 currval을 호출하고 있습니다.

currval은 current value를 뜻하며 최근값을 말합니다.

nextval은 next value를 뜻하며 현재값에 증분으로 설정한 값(지금은 디폴트로 설정하였기때문에 1)을 더한값을 말합니다.

nextval은 currval과 달리 select할때마다 값이 달라집니다. 확인해보시기바랍니다.

dual 테이블은 가상의 테이블입니다. 

  ※ currval을 출력하기 위해서는 먼저 최초로 nextval이 호출되어야 합니다.

그럼 코드에서 직접 활용해보도록 하겠습니다. 

String sql = "INSERT INTO BOARD "+

 

           "(IDX, TITLE, WRITER, REGDATE, COUNT, CONTENT) "+

 

           "VALUES (board_seq.nextval, '"+title+"', '"+writer+"' , sysdate, "+count+", '"+content+"')";

※   여기서 sysdate는 데이터베이스의 시간을 넣는 구문입니다. 

마찬가지로 "select sysdate from dual" 구문으로 확인하실 수 있습니다.

이렇게 되면 애초에 입력창으로부터 날짜를 입력받을 필요가 없어집니다.

관련 코드들을 삭제해 보시기 바랍니다.

그리고 나서 성공적으로 insert가 되었으면 index.jsp로 돌아갑니다. ( catch문 뒤에 적어주시면 됩니다.)

finally{

 

        out.print("<script>location.href='index.jsp';</script>");

 

    }

out.print              <- <%= %>과 마찬가지로 페이지에 코드를 그대로 뿌리는 역할을 합니다.

location.href        <- 현재의 경로를 변경하는 자바스크립트 구문입니다. jsp구문은 웹서버에서 가장먼저 실행됩니다.

하지만 지금까지 구현한 index.jsp에는 db로부터 데이터를 가져오는 구문은 작성하지 않아 

정상적인 리스트가 표시되지 않을겁니다.

이제 다시 index.jsp를 수정합니다. 고쳐야 할 부분은 스크립트립 영역입니다.

※ 수정 파일 : index.jsp

request.setCharacterEncoding("euc-kr");

 

    int idx = 1;

 

    String title = request.getParameter("title");

 

    String writer = request.getParameter("writer");

 

    String regdate = request.getParameter("regdate");

 

    int count = 10000;

 

    String content = request.getParameter("content");

 

     

 

    if(title == "" ||title == null) out.println("title이 null입니다.");

 

     

 

    if(writer == "" ||writer == null) out.println("writer가 null입니다."); 

 

    else if(!Pattern.matches("^[_0-9a-zA-Z-]+@[0-9a-zA-Z-]+(.[_0-9a-zA-Z-]+)*$", writer))

 

out.println("이메일 형식이 아닙니다.");

 

     

 

    if(regdate == "" ||regdate == null) out.println("regdate가 null입니다.");

 

    else if(!Pattern.matches("^[0-9]*$", regdate))out.println("숫자형식이 아닙니다.");

 

     

 

    if(content == "" ||content == null) out.println("content가 null입니다.");

현재 로직을 보면 전페이지에서 넘어온 값을 변수에 넣고 정규식 체크를 하고 있습니다.

정상적인 리스트페이지라면 변수에는 데이터베이스에서 불러온 값을 넣어야 할것이고,

정규식 체크는 필요없겟죠?

대대적인 수정을 합시다. 우선 데이터베이스를 연결합니다.(write.jsp참고)

※ 수정 파일 : index.jsp

try {

 

        String driverName = "oracle.jdbc.driver.OracleDriver"; 

 

        String url = "jdbc:oracle:thin:@localhost:1521:XE";

 

        ResultSet rs = null;

 

      

 

        Class.forName(driverName);

 

        Connection con = DriverManager.getConnection(url,"board","board");

 

        out.println("Oracle Database Connection Success.");

 

      

 

        Statement stmt = con.createStatement();        

 

        String sql = "select * from board order by idx desc";

 

        rs = stmt.executeQuery(sql);

 

      

 

        con.close();

 

    }catch (Exception e) {

 

        out.println("Oracle Database Connection Something Problem. <hr>");

 

        out.println(e.getMessage());

 

        e.printStackTrace();

 

    }

못보던 코드가 늘었습니다. 이번에는 select구문이기때문에 반환값을 저장할 공간이 필요합니다.

바로 ResultSet이 그 역할을 하는 변수(객체)입니다.

selet쿼리를 excute한 후 반환값을 rs에 저장합니다.

그런데 이때 쿼리의 뒷부분을 보면 orderby idx desc라는 구문을 보실 수 있습니다.

이는 idx를 역순으로 정렬하여 가져오라는 뜻입니다.

order by에 대한 자세한 내용은 다음의 포스팅을 참조하세요. 

http://cusmaker.tistory.com/entry/SQL-%EA%B8%B0%EB%B3%B8%EB%A7%8C-%EC%95%8C%EC%95%84%EB%8F%84-%ED%95%A0%EA%BB%80-%EB%8B%A4%ED%95%9C%EB%8B%A4-%EC%A0%95%EB%A0%AC-Order-by%EC%97%90-%EB%8C%80%ED%95%B4

그럼 한번 가져온 값을 출력해 보도록 하겠습니다.

게시글이 여러개일테니 반복문을 사용해야겠죠?

그런데 출력 위치가 마땅치 않습니다.

이럴땐 어떻게 해야할까요? 스크립트릿은 어디에나 들어갈 수 있다는걸 기억하시나요?

그렇다면 스크립트립을 쪼개버립시다.

전체적인 코드는 다음과 같습니다.

<%@page import="java.util.regex.Pattern"%>

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"

 

    pageEncoding="EUC-KR"%>

 

<%@ 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">

 

<title>본격! 게시판 - 게시글 리스트</title>        <!-- 윈도우 상단에 뜨는 내용입니다. -->

 

</head>

 

<%

 

    try {

 

        String driverName = "oracle.jdbc.driver.OracleDriver"; 

 

        String url = "jdbc:oracle:thin:@localhost:1521:XE";

 

        ResultSet rs = null;

 

      

 

        Class.forName(driverName);

 

        Connection con = DriverManager.getConnection(url,"board","board");

 

        out.println("Oracle Database Connection Success.");

 

      

 

        Statement stmt = con.createStatement();        

 

        String sql = "select * from board order by idx desc";

 

        rs = stmt.executeQuery(sql);

 

%>

 

 

 

 

 

<body>                                            <!-- HTML문서의 주 내용이 들어가는 부분입니다. -->

 

    <h1>게시글 리스트</h1>                        <!-- 헤드라인 글씨를 표현하는 태그입니다. -->

 

    <table>                                       <!-- 표 형식의 데이터를 표현하는 태그입니다. -->

 

        <tr>                                  <!-- table태그 내에서 행을 정의할때 쓰는 태그입니다. -->

 

            <th>번호</th>                     <!-- Table Header의 약자로 table태그 내에서 -->

 

            <th>제목</th>                     <!-- 강조하고싶은 컬럼을 나타낼때 쓰는 태그입니다. -->

 

            <th>작성자</th>

 

            <th>날짜</th>

 

            <th>조회수</th>

 

        </tr>

 

<%   

 

        while(rs.next()){

 

            out.print("<tr>");

 

            out.print("<td>" + rs.getString(1) + "</td>");

 

            out.print("<td>" + rs.getString(2) + "</td>");

 

            out.print("<td>" + rs.getString(3) + "</td>");

 

            out.print("<td>" + rs.getString(4) + "</td>");

 

            out.print("<td>" + rs.getString(5) + "</td>");

 

            out.print("</tr>");

 

        }

 

%>

 

    </table>

 

    <a href="write.jsp">글쓰기</a>

 

<%      

 

        con.close();

 

    }catch (Exception e) {

 

        out.println("Oracle Database Connection Something Problem. <hr>");

 

        out.println(e.getMessage());

 

        e.printStackTrace();

 

    }

 

%>

 

</body>

 

</html>

정상적으로 작동 하시나요?

아직 부족한 감이 있지만 게시판의 형식을 제법 갖추고 있습니다.

다음시간에는 게시글을 확인하기위해 제목에 링크를 걸고

content.jsp라는 파일을 만들어 게시글 하나에 대한 조회 페이지를 작성해 보도록 하겠습니다.

그리고, 위의 화면을 보시면 살짝 스타일을 먹여봤는데요,

바로 CSS(Cascading Style Sheet) 입니다. 

쉽게말해서 css는 html문서를 이쁘게 꾸며주는 역할을 한다고 생각하시면 됩니다.

※ css는 따로 공부해 보시기 바랍니다.

위의 화면에 적용한 코드입니다.

헤드 테그가 닫히기 전에 넣어주시면 됩니다.

<style type="text/css">

 

    table, td, th   {

 

    border:1px solid green;

 

    }

 

    th{

 

    background-color:green;

 

    color:white;

 

    }

 

</style>

수고하셨습니다.

다음장으로 >> http://cusmaker.tistory.com/81