jsp 를 알아보자 (4) - 게시판 리스트 만들기

jsp 로 브라이저에서 hello world 를 띄워 보았습니다.

이번 게시판에서는 디비를 연동해서 리스트를 만들어서 브라우저에서 띄워 보겠습니다.

디비는 마리아 디비를 사용 하겠습니다. 

설치 및 설정은 스프링부트 게시판 만들기의 개발환경설정을 참고해 주세요.

3. 마리아 디비 설치, 4. dbeaver 설치 를 참고해 주세요.

https://astonysia-story.tistory.com/21

스프링부트 + jsp + yml로 게시판 만들기 - (1) 개발환경 설정

dbeaver는 디비툴인데 여기서 sql 쿼리를 작성하고 테스트를 할수 있습니다.

그리고 dbeaver에서 디비 연동은 해당글을 참고해 주세요.

해당 게시글의 마리아디비 데이터베이스 생성 및 dbeaver에서 디비 연결 하기를  참고 하시면 됩니다.

https://astonysia-story.tistory.com/22

스프링부트 + jsp + yml로 게시판 만들기 - (2) 게시판 만들기

 

이제 마리아디비 연동을 위해 마리아디비 커넥터를 다운 받아야 합니다.

https://downloads.mariadb.org/connector-java/2.5.4/

MariaDB Connector/J 2.5.4 Stable - MariaDB

해당 사이트에서 다운로드 할수 있습니다.

MariaDB Connector/J jar files 를 클릭을 합니다.

해당 화면에서 mariadb-java-client-2.5.4.jar 를 클릭을 해서 다운로드를 합니다.

다운 받은 jar 파일을 톰캣의 lib 폴더에 옮기고서 톰캣을 stop, start를 시켜 줍니다.

C:\Program Files (x86)\Apache Software Foundation\Tomcat 10.0\lib

해당 폴더에 옮겨 줍니다.

그리고 톰캣 서버를 내렸다가 올려 줍니다.

이제 톰캣 서버 까지 내렸다가 올렸으면 정상적으로 디비 연결이 되었는지 확인을 해보겠습니다.

bbs_list.jsp 라는 파일을 만들어 줍니다.

bbs_list.jsp 소스

<%@page import="java.sql.DriverManager"%>

<%@page import="java.sql.Connection"%>

<%@page import="java.sql.ResultSet"%>

<%@page import="java.sql.Statement"%>

<%@page import="java.sql.SQLException"%>

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

<%

    String driver = "org.mariadb.jdbc.Driver";

    String connectionUrl = "jdbc:mariadb://localhost:3306/";

    String database = "test";

    String DBuserid = "root";

    String DBpassword = "root";

 

    // 마리아 디비 드라이버가 정상적으로 연결이 되었는지 확인

    try {

        Class.forName(driver);

    } catch (ClassNotFoundException e) {

%>

 

<%-- 디비 드라이버 연결이 되진 않음. --%>

<script type="text/javascript">console.log("-------------- ClassNotFound ----------");</script> 

 

<%  

        e.printStackTrace();

    }

%>

 

<%-- 디비 드라이버 연결 성공 --%>

<script type="text/javascript">console.log("-------------- Class Ok ----------");</script>

 

<%

    // 디비 연결을 위한 변수 선언

    Connection connection = null;

    Statement statement = null;

    ResultSet resultSet = null;

 

    connection = DriverManager.getConnection(connectionUrl+database, DBuserid, DBpassword);

 

    if(connection==null) {

%>

 

        <script type="text/javascript">console.log("-------------- 데이터베이스를 연결X ----------")</script>

 

<%

        throw new Exception("데이터베이스를 연결X");  

    }

%>

 

    <script type="text/javascript">console.log("-------------- 데이터베이스를 연결O ----------");</script>

 

결과 확인

결과는 크롬 기준으로 설명 드리겠습니다. 

크롬을 띄워서 f12를 누르고 개발자 모드에서 console 창을 확인을 해서 디비 연결을 확인을 합니다.

 

이제 디비 연결 까지 되었으니 dbeaver를 실행해서 sql에서 테이블을 만들고 임의의 값을 등록후 게시판에 등록하 글이

정상적으로 나오는지 확인해 보겠습니다.

이렇게 입력후에 test 라는 테이블을 만들고 등록을 해줍니다. (등록 명령문은 insert 입니다)

그리고 특수문자등을 등록 할수 있도록 해당 내용을 쿼리문에서 실행 시켜 줍니다.

; 이 세미콜론은 쿼리문의 종료 되는 끝나는 문자 입니다. 이걸로 각각의 쿼리문을 구분 할수 있습니다.

해당 쿼리문에 마우스 커서를 놓고 CTRL +ENTER를 누르면 쿼리문이 실행이 됩니다.

탐색 > SQL문 실행을 클릭 하셔도 됩니다.

CTRL + ENTER는 단축키 입니다.

 

ALTER TABLE TEST
COLLATE='utf8mb4_general_ci',
CONVERT TO CHARSET utf8mb4

;

 

CREATE TABLE TEST (
  COLUMN1 varchar(100) DEFAULT NULL COMMENT '컬럼1',
  COLUMN2 varchar(100) DEFAULT NULL COMMENT '컬럼2'
) COMMENT='테스트'
;

INSERT INTO TEST (COLUMN1, COLUMN2)
VALUES ('게시글1', '게시글 내용_1')
;

 

이제 bbs_list.jsp에 코드를 추가를 해서 게시판 리스트가 보이는걸 확인을 합니다.

bbs_list.jsp 소스(최종)

<%@page import="java.sql.DriverManager"%>

<%@page import="java.sql.Connection"%>

<%@page import="java.sql.ResultSet"%>

<%@page import="java.sql.Statement"%>

<%@page import="java.sql.SQLException"%>

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

<%

    String driver = "org.mariadb.jdbc.Driver";

    String connectionUrl = "jdbc:mariadb://localhost:3306/";

    String database = "test"; // 데이터베이스 이름

    String DBuserid = "root"; // 아이디

    String DBpassword = "root"; // 비밀번호

 

    // 마리아 디비 드라이버가 정상적으로 연결이 되었는지 확인

    try {

        Class.forName(driver);

    } catch (ClassNotFoundException e) {

%>

<%-- 디비 드라이버 연결이 되진 않음. --%>

<script type="text/javascript">console.log("-------------- ClassNotFound ----------");</script> 

 

<%  

        e.printStackTrace();

    }

%>

<%-- 디비 드라이버 연결 성공 --%>

<script type="text/javascript">console.log("-------------- Class Ok ----------");</script>

 

<%

    // 디비 연결을 위한 변수 선언

    Connection connection = null;

    Statement statement = null;

    ResultSet resultSet = null;

    String strMsg = ""; // 에런 내용을 담을 변수

 

    connection = DriverManager.getConnection(connectionUrl+database, DBuserid, DBpassword);

 

    if(connection==null) {

%>

 

        <script type="text/javascript">console.log("-------------- 데이터베이스를 연결X ----------")</script>

 

<%

        throw new Exception("데이터베이스를 연결X");     

    }

%>

 

    <script type="text/javascript">console.log("-------------- 데이터베이스를 연결O ----------");</script>

 

<!DOCTYPE html>

<html>

<head>

    <title>JSP 게시판 리스트</title>

</head>

<body>

    <h1>JSP 게시판 리스트</h1>

    <table width="50%" border="1">

        <tr align="center" style="background-color: #ececec;">

            <td>

                컬럼1

            </td>

            <td>

                컬럼2

            </td>

        </tr>

<%

    try {

        statement=connection.createStatement(); // 데이터 베이스 연결

        String sql ="select * from test"; // 쿼리문 작성

        resultSet = statement.executeQuery(sql); // 쿼리문 적용

        while(resultSet.next()){ // 해당 건수 만큼 데이터를 loop 돌린다.

%>

        <tr>

            <td>

                <%=resultSet.getString("column1")%>

            </td>

            <td>

                <%=resultSet.getString("column2")%>

            </td>

        </tr>

<%

        }

    } catch (Exception e) {

        // 비정상적으로 종료되어서 에러가 난 경우.

        e.printStackTrace();

        strMsg = e.getMessage();

%>

 

        <script type="text/javascript">console.log("SQLException = " + <%=strMsg%>); </script>

 

<%        

    }

%>        

    </table>

</body>

</html>

 

이제 결과 확인을 위해 크롬을 띄우고 http://localhost:8080/bbs_list.jsp 를 입력 하고 결과를 확인 합니다.

 

결과 확인

이렇게 jsp로 게시판을 만들어 보았습니다.

다음 게시글 에서는 등록 및 수정, 삭제를 하는 게시글을 만들어 보겠습니다.