본문 바로가기

IT, 인터넷/JSP

jsp 를 알아보자 (6) - 게시판 등록, 수정, 삭제 만들기

반응형

이제 프로그램을 이용해서 jsp 쿼리를 날려서 등록, 수정, 삭제를 해보겠습니다.

먼저 bbs_list.jsp를 수정을 하겠습니다.

그리고 디비 연결 하는 부분을 db_common.jsp 에 담아서 jsp include 를 사용해서 공통으로 관리를 하겠습니다.

import 하는 부분을 지우고 include로 db_common.jsp 를 가져 옵니다.

그리고 수정을 위해 modify_page 를 추가를 해줍니다

 

  • db_common.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.PreparedStatement"%>

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

 

<%

    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) {

        e.printStackTrace();

    }

 

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

    Connection connection = null;

    Statement statement = null// 조회시 사용

    PreparedStatement pstmt = null// 등록 수정 삭제시 사용

    ResultSet resultSet = null;

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

 

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

%>

  • bbs_list.jsp 소스

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

 

<%@ include file="/db_common.jsp" %>

 

<!DOCTYPE html>

<html>

<head>

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

    <script>

        function add_page() {

            location.href = "/bbs_add_page.jsp";

        }

 

        function modify_page(valuevalue1) {

            var param = "?key=" + value + "&col2=" + value1;

            location.href = "/bbs_add_page.jsp" + param;

        }

    </script>

</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 onClick="modify_page('<%=resultSet.getString("column1")%>', '<%=resultSet.getString("column2")%>')">

            <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>

 

    <div style="width:50%;margin-top: 30px;text-align:right;">

        <button onClick="add_page()">등록 페이지</button>

    </div>

</body>

</html>

이렇게 공통으로 디비 커넥션을 만들고 리스트 페이지에서 인클루드로 가지고 옵니다.

이제 등록, 수정, 삭제를 하는 bbs_process.jsp 페이지를 만들겠습니다.

request.getParameter로 넘어오는 파라미터를 받아 줍니다.

 

파라미터의 null 값 및 공백 처리는 자바스크립트에서 해도 됩니다.

jsp에서는 위와 같이 해주면 파라미터가 null 또는 공백이면 경고창을 띄워 줍니다.

 

proc_gbn 으로 등록(I), 수정(U), 삭제(D)를 구분을 해서 쿼리문을 작성 하고 커넥션에 쿼리를 담고 파라미터를 처리해

줍니다.

 

마지막으로 쿼리문을 실행을 해주고 sendRedirect로 리스트 페이지로 이동을 합니다.

sendRedirect 를 이용하면 jsp 에서 원하는 페이지로 이동이 가능 합니다.

 

  • bbs_process.jsp 소스

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

 

<%@ include file="/db_common.jsp" %>

 

<%

    String err_msg = ""// 에러 메시지를 담을 변수    

 

    try {

 

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

        String query = "";

 

        String col_1 = request.getParameter("column1");

        String col_2 = request.getParameter("column2");

 

        if(proc_gbn == null || proc_gbn.equals("")) {

            out.println("<script>");

            out.println("alert('프로세스 구분 코드(proc_gbn)이 입력 되지 않았습니다.');");

            out.println("</script>");            

        }

 

        if(col_1 == null || col_1.equals("")) {

            out.println("<script>");

            out.println("alert('프로세스 컬럼1(col_1)이 입력 되지 않았습니다.');");

            out.println("</script>");            

        }

 

        if(col_2 == null || col_2.equals("")) {

            out.println("<script>");

            out.println("alert('프로세스 컬럼2(col_2)이 입력 되지 않았습니다.');");

            out.println("</script>");            

        }

 

        if(proc_gbn.equals("I")) {

            query = "INSERT INTO TEST (COLUMN1, COLUMN2) VALUES (?, ?)";            

 

            pstmt = connection.prepareStatement(query);

            pstmt.setString(1, col_1);

            pstmt.setString(2, col_2);

        } else if(proc_gbn.equals("U")) {

            query = "UPDATE TEST SET COLUMN1 = ?, COLUMN2 = ? WHERE COLUMN1 = ? ";            

 

            pstmt = connection.prepareStatement(query);

            pstmt.setString(1, col_1);

            pstmt.setString(2, col_2);

            pstmt.setString(3, col_1);

        } else if(proc_gbn.equals("D")) {

            query = "DELETE FROM TEST WHERE COLUMN1 = ? ";            

 

            pstmt = connection.prepareStatement(query);

            pstmt.setString(1, col_1);

        } 

 

        pstmt.executeUpdate(); //쿼리문 실행

 

        response.sendRedirect("/bbs_list.jsp"); // 게시판 리스트 페이지로 이동

 

    } catch (Exception e) {

        e.printStackTrace();

        err_msg = e.getMessage();

    }

%>

 

이제 마지막으로 bbs_add_page.jsp 를 수정 합니다.

하단에 등록과 수정,삭제를 구분 해서 버튼을 만들어 줍니다.

key 파라미터가 없으면 등록 이고 있다면 수정과 삭제를 해야 합니다.

 

그리고 등록 수정 삭제를 위한 스크립트를 추가해 줍니다.

proc_gbn에 등록(I), 수정(U), 삭제(D)를 위한 값을 넣어 줍니다.

그리고 column1의 값이 없으면 경고창을 보여주고 프로세스를 return;을 해서 멈추어 줍니다.

 

  • bbs_add_page.jsp 소스

 

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

 

<!DOCTYPE html>

<html>

<head>

    <title>JSP 게시판 등록 페이지</title>

    <script>

        function insert() {

            var frm = document.add_frm;

 

            frm.proc_gbn.value = "I";

 

            if(frm.column1.value == "") {

                alert("컬럼1을 입력해 주세요.");

                return;

            }

 

            if(frm.column2.value == "") {

                alert("컬럼2을 입력해 주세요.");

                return;

            }

 

            frm.method = "post";

            frm.action = "/bbs_process.jsp";

            frm.submit();

        }

 

        function update() {

            var frm = document.add_frm;

 

            frm.proc_gbn.value = "U";

 

            if(frm.column1.value == "") {

                alert("컬럼1을 입력해 주세요.");

                return;

            }

 

            if(frm.column2.value == "") {

                alert("컬럼2을 입력해 주세요.");

                return;

            }

 

            frm.method = "post";

            frm.action = "/bbs_process.jsp";

            frm.submit();

        }

 

        function remove() {

            var frm = document.add_frm;

 

            frm.proc_gbn.value = "D";

 

            if(frm.column1.value == "") {

                alert("컬럼1을 입력해 주세요.");

                return;

            }

 

            frm.method = "post";

            frm.action = "/bbs_process.jsp";

            frm.submit();

        }

    </script>

</head>

<body>

    <h1>JSP 게시판 등록 페이지</h1>

    <form name="add_frm" id="add_frm">

        <!-- 등록 : I, 수정 : U, 삭제 : D -->

        <input type="hidden" name="proc_gbn" id="proc_gbn" />

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

            <tr>

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

                    컬럼1

                </td>

                <td>

                    <input type="text" name="column1" id="column1" style="width:98%;"

                        value="<%=request.getParameter("key")%>" />

                </td>

            </tr>

            <tr>

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

                    컬럼2

                </td>

                <td>

                    <input type="text" name="column2" id="column2" style="width:98%;" 

                        value="<%=request.getParameter("col2")%>" />

                </td>

            </tr>

        </table>

    </form>

 

    <div style="width:50%;margin-top: 30px;text-align:right;">

<%

    if(request.getParameter("key") == null) {

%>    

        <button onClick="insert()">등록</button>

<%

    } else {

%>

        <button onClick="update()">수정</button>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <button onClick="remove()">삭제</button>

<%        

    }

%>        

    </div>

</body>

</html>

 

이렇게 jsp 게시판에서 리스트, 등록, 수정, 삭제를 디비를 연동해서 하는걸 완료 하였습니다.

따라오는냐고 수고 하셨습니다.

 

다음 게시글 에서는 jsp의 명령어를 정리해서 올리 겠습니다.

반응형