JSP CRUD 게시판 만들기

* Create Read Update Delete 를 줄여서 CRUD라고 부른다.

 

 

 

게시판을 제작하는데 필요한 것들을 대략 6가지로 정리할 수 있다.

 

1. Database 선택, 설치하기 (여기서는 MySQL을 사용한다)
2. Table, Query 생성
3. 새 프로젝트 생성 (STS > new project > dynamic web project > Maven Project 변환)
4. Maven(pom.xml) 라이브러리 추가: MySQL Connector, JSTL
5. JDBC(Java Database Connectivity)를 사용한 클래스 추가
6. 웹페이지 제작 (list.jsp, nform.html, nform_ok.jsp, eform.html, eform_ok.jsp, delete_ok.jsp)

 

 

 

 

---

 

 

 

1. MySQL DB 설치 및 준비

 

이 때 서버에 직접 설치, 설정을 할 수도 있지만 무료 MySQL 서버 사이트를 사용해본다.

 

https://db4free.net/ 

db4free.net - MySQL Database for free

회원가입을 해야 하는데, Database name/Username/Password를 설정해서 잘 기억해야 한다.

 

 

 

 

그리고 입력한 email 주소로 이런 메일이 오면 정상적으로 회원가입이 된 것이다.

 

 

phpMyAdmin 로그인했을 때 모습

 

 

그리고 본인의 username>SQL 을 순서대로 클릭해서 Board라는 이름의 테이블을 생성했다.

 

테이블 생성 코드

 

 

 

테이블 생성 완료

 

 

 

 

그리고 이젠 insert, select, delete, update 쿼리를 각각 연습해보자.

 

 

 

 

1) insert (데이터 추가)

 

다시 한번 SQL을 입력해 insert into 쿼리를 사용해서 레코드 데이터를 추가해준다. 

 

첫번째 insert into query

두번째 insert into query

 

insert 결과

그러면 위의 사진에서와 같이 총 두 개의 게시글이 등록된다.

 

 

 

 

 

2) update (데이터 수정)

 

update query

 

2번째 게시글의 내용을 'update 후 바뀐 내용'으로 바꾸어보았다.

 

 

update query 결과

 

 

 

 

3) delete (데이터 삭제)

 

delete query

2번째 게시글을 삭제하는 query문이다

 

2번째 게시글을 삭제한 결과

 

 

 

 

4) select (데이터 목록)

 

1. 등록된 게시글들 뒤에서부터 정렬

 

위의 결과

 

 

 

 

2. 세번재 게시글만 보인 결과

 

 

 

 

 

 

 

 

 

2. Maven Project 생성

STS에서  new project > dynamic web project > Maven Project 변환 순서대로 해주면 된다.

 

 

Dynamic web project 생성

 

 

 

프로젝트명 우클릭>Configure>Conver to Maven Project

 

 

Maven Project로 변환 완료된 상태

 

 

 

 

 

 

3. Maven 라이브러리 추가 (mysql-connector, JSTL)

 

1)

mvnrepository.com/artifact/mysql/mysql-connector-java

Maven Repository: mysql » mysql-connector-java

 

위의 사이트에 들어가서 사용할 MySQL Connector 를 선택해야 하는데, 많은 사용자들이 사용한 버전으로 선택했다.

 

 

 

 

 

 

그리고 원하는 버전을 선택한 뒤, 가장 아래에서 Maven에 해당되는 코드들을 복사한다.

 

 그런 다음 아까 새로 만든 Maven Project 안에 pom.xml 파일을 열어 <dependencies></dependencies> 안에 붙여넣는다.

 

 

 

 

 

2)

mvnrepository.com/artifact/jstl/jstl

Maven Repository: jstl » jstl

두번째로는, 위의 링크를 클릭해 JSTL 라이브러리를 설정해야 한다.

 

 

위와 동일한 방법으로 하면 된다. 

 

 

 

 

 

 

 

아래에서 Maven에 해당하는 코드 복사

 

 

 

 

 

STS에서 Maven 라이브러리가 추가된 것을 확인

위의 두 라이브러리(mysql-connetcor, jstl)을 성공적으로 잘 설정했을 때, project이름>Java Resources>Libraries>Maven Dependencies 에서 추가된 것을 확인해볼 수 있다.

 

 

 

 

 

5. JDBC를 이용한 class 생성

 

여기서는 총 세 개의 class를 생성한다.

 

 

 

1) JDBCUtil class

   - 패키지: com.crud.common

   - Database 연결정보를 담는다. 따라서 본인의 db4free 정보를 입력해 주어야 한다. 검정색 펜으로 가려진 세 곳을 입력해주어야 하는데, 순서대로 username, id(username과 동일), pwd이다. "" 안에 각각 입력해야 한다.

 

 

JDBCUtil.java 파일 내용 수정

 

+ 29번 줄에서 main 함수를 만든 이유는, 입력한 db4free 정보가 올바른지 확인하기 위함이다. 해당 파일 오른쪽 클릭해서 run>java application을 실행했을 때 아래 console에서 확인 할 수 있다.

 

 

 

 

2) BoardVO class

   - 패키지: com.crud.bean

   - 테이블에 들어가는 한 레코드를 구성하는 필드를 멤버변수로 bean 생성

   - 여기서는 Board 테이블 구조와 같은 변수 이름으로 getters, setters를 제작해야 한다. 위에서 만든 table의 변수들만 입력해준 뒤 마우스 우클릭>Source>Generate Getters and Setters를 누르면 자동으로 원하는 만큼 생성된다.

 

 

 

 

Getters&Setters 생성 완료

 

 

 

3) BoardDAO class

   - 패키지: com.crud.dao

   - Data Access Object (DAO). 데이터를 추가, 수정, 삭제 등을 하는 기능을 가진 class이다.

   - MySQL DB에서 실행하기 위한 CRUD 쿼리를 구현

 

 

 

 

 

 

6. WebContent 제작

총 7개의 .jsp 파일을 생성했다.

 

• addpost.jsp
  • 새로운 게시글의 데이터를 db에 저장하는 페이지
• addpostform.jsp
  • 새로운 게시글을 작성하는 form 페이지
• deletepost.jsp
  • 게시글 삭제 페이지
• editform.jsp
  • 기존 게시글을 수정하는 form 페이지
• editpost.jsp
  • 수정한 게시글의 데이터를 처리하는 페이지
• index.jsp
  • 프로젝트를 실행했을 때 제일 처음으로 들어가지는 화면
• posts.jsp
  • list를 보여주는 목록 페이지
  • postDAO (상단 page import 줄을 통해 BoardDAO를 가져온다)
  • <c:forEach> tag library 반복문, var="u" BoardVO 하나씩 u에 할당함으로 가져오기

정한 게시글의 데이터를 처리하는 페이지

 

 

 

 

 

 

그리고 위의 7개의 jsp 파일들에서 사용된 JSP 기능들에 대해 정리해 보면, 

 

• JSP Directives
  • JSP 페이지에 대한 기본 정보를 저장할 때 사용되는 것. 
  • <%@ directive attribute="value"%>  JSP 페이지를 servlet 클래스로 변환할 때 필요한 여러 정보를 기술하기 위해 사용
  • 1) Page Directive --> jsp 전체 페이지에 적용되는 정보를 기술하기 위해 사용
  • 2) Include Directive --> 다른 jsp or html 페이지를 불러와 현재 페이지의 일부를 만들기 위해 사용
  • 3) Taglib Directive --> jsp문법 중 Action or JSTL 등 사용자 정의 태그를 사용할 때 필요
    • <%@taglib prefix="c" uri="http//java.sun.com/jsp/jstl/core" %>

 

 

1. Page Directive
   1. contentType 속성
      1. <%@page contentType="text/html; charset=euc-kr" %>
   2. import 속성
      1. <%@page import="java.util.ArrayList" %>
      2. <%@page import="java.util.*"%>
   3. 기타
      1. buffer, autoFlash, isThreadSafe, session, errorPage ...
2. Include Directive
   1. main.jsp 페이지 안에서 <%@include file="top.jsp"%> 같은 형식의 코드를 작성해 다른 페이지를 불러올 수 있다.

 

 

 

# JSP Action Tags

     -> 동적으로 파일을 삽입하고, JavaBeans 요소 구성을 재사용하고, 사용자를 다른 page로 전달할 수 있게 한다.

 

     1. jsp:forward --> 다른 페이지나 리소스로 이동할 때 사용 

            <jsp:forward page="list.jsp"/>

 

     2. jsp:param --> 파라미터를 설정할 때 사용

            <jsp:forward page="list.jsp">

              <jsp:param name="name" value="ok!!" />

            </jsp:forward>

 

      3. jsp:include --> 다른 페이지나 리소스를 포함하여 사용

            <jsp:include page=“top.jsp" />

 

 

      4. jsp:useBean

            - 해당하는 Bean(자바객체)이 존재하는지 확인하고 없으면 생성

            <jsp:useBean id= "instanceName" scope= "page | request | session | application"

                        class= "packageName.className" type= "packageName.className"

                                    beanName="packageName.className | <%= expression >" >

                                                </jsp:useBean>

 

      5. jsp:setProperty

            - Bean(자바 객체)의 속성을 설정

            <jsp:setProperty name="bean" property="*" />

            <jsp:setProperty name="bean" property="username" />

            <jsp:setProperty name="bean" property="username" value="Kumar" />

 

      6. jsp:getProperty

            - 주어진 속성값을 가져오는데 사용됨 

             <jsp:getProperty name="obj" property="name" />

 

 

 

 

# Expression Language (EL)

           -> 자바빈의 property, value를 JSP 표현식을 사용하는 것보다 더 간단하게 사용할 수 있는 기술

            -> Request, Session, Application에서 값을 꺼낼 때도 사용한다            ${변수명}

            -> 변수를 가져올 때 영역을 지정하지 않으면 순차적으로 찾아온다

                        --> pageScope / requestScope / sessionScope / ApplicationScope

            -> EL Operator 제공

                        --> [ ], ( ), 산술연산, 관계연산, 조건연산, 조건(a? b:c), 논리연산(&&. ||), empty 등

 

 

                        

 

 

 

실행 결과

 

프로젝트명 우클릭>Run on Server에서 tomcat으로 실행하면 이런 화면이 뜬다.

 

 

 

 

 

게시글 추가

 

 

 

삭제버튼 누른 뒤 알림창

 

 

삭제 완료

밑에 콘솔 창의 메세지를 통해 삭제처리가 되었음을 확인할 수 있다.

 

 

 

 

edit

 

 

이제 10번째 게시글을 수정 해본다.

 

edit form

수정된 내용