웹 캠프: JSP4 1/21

o   실습 1) JSP CRUD 프로젝트 제작

§  Database 준비

§  https://db4free.net/ 가입 (이메일 인증):

https://db4free.net/ 에서 가입 절차를 마치면 아래와 같이 인증 메일을 통해 가입을 완료시킵니다.

 

§  phpMyAdmin 로그인을 하여 간단한 실습을 해봅니다.

§  Board 테이블 생성 및 sample 데이터 추가

§  create table 쿼리 실행

§  insert into 쿼리 사용하여 레코드 데이터 추가 (2개 이상)

 

결과:

§  select, update, delete 쿼리 연습

 

결과:

 

결과: seq=0 이 없어서 DELETE 쿼리에도 아무런 변화가 없었다.

 

§  CRUD Project 생성

§  새 프로젝트 생성 (Dynamic Web project)

Project Explorer-> 우클릭-> new -> Dynamic Web Project 생성

maven project로 변환-> 프로젝트명 우클릭-> configure-> convert to maven project

§  Maven project로 변환 후, library 추가

아래 사진과 같이 pom.xml 파일로 들어가서 build 태그 하단에 <dependencies> 태그 삽입 후 안에, 아래의 링크를 방문하여 maven project dependencies에 필요한 mysql-connector 라이브러리와 JSTL 라이브럴리를 추가해줍니다.

https://mvnrepository.com/artifact/mysql/mysql-connector-java/8.0.21

https://mvnrepository.com/artifact/jstl/jstl/1.2

§  관련 클래스 제작 및 원본 소스 복사

§  JDBCUtil class

§  패키지명 : com.crud.common

§  소스 수정

§  Database 연결정보 수정 (본인의 db4free 정보 기입)

§  BoardVO class

§  패키지명 : com.crud.bean

§  주의 : Board 테이블 구조와 동일한 변수이름으로 getters & setters 제작

§  BoardDAO class

§  패키지명 : com.crud.dao

아래 URL링크로 구글 공유 드라이브 폴더로 접속하여 필요한 모든 코드를 복붙하면 된다.

https://drive.google.com/drive/folders/1vEKel6dvj1ILyVP69xRZVZCRp7NotGd0

§  WebContent 제작

§  원본 JSP 파일 다운로드하여 추가

src 폴더에 있는 내용이 DB연결 및 백엔드 작업이었다면, jsp파일은 프런트엔드 작업이라고 생각하면 되겠다. webcontent 폴더 및에 아래 사진과 같이 코드를 추가한다.

o   실습 2) 사이트 실행 테스트

§  index.jsp 실행하여 게시판 목록 표시 확인

§  10개 이상 샘플 게시물 등록

§  게시물 수정, 삭제기능 확인

 

§  실습1), 실습2) 과정 정리. 필요한 화면 캡쳐

§  프로젝트 소스파일 분석

§  각 파일의 역할정리

§  7개의 JSP 파일에 대한 분석

§  어떤 일을 하고 있는가?

·   addpost.jsp: 이 jsp 파일은 jsp action tags를 사용하여 자바빈 객체를 생성하여 새로운 포스트를 작성하면 추가 완료 메세지를 띄우거나, 꽉 찼을 경우에는 에러 메시지를 띄웁니다.

·   addpostform.jsp: 새로운 포스틀 작성하기 위해 html에서 보여질 내용입니다. 해당 텍스트 박스에서 새로운 값을 입력할 수 있습니다.

·   deletepost.jsp: 삭제하고자 하는 란이 선택되면, 해당 id 가 넘겨져서 그 id 값을 가지고 새로운 BoardVO객체를 생성하여 이 객체로 BoardDAO table에서 값을 지울 수 있게 되는 것입니다.

·   editform.jsp: deletePost.jsp 와 비슷하게 선택된 항목에 대한 id가 넘겨져서 해당 항목을 편집한다.

·   editpost.jsp: editform.jsp에서 수정된 사항을 editpost.jsp를 통해 새로운 내용을 업데이트하고 (boardDAO.updateBoard(u);)  HTTP redirection을 하여 새로운 페이지를 로드한다. (response.sendRedirect("posts.jsp");

·   index.jsp: index.jsp가 시작 페이지이다. 이 페이지는 posts.jsp 파일의 도움으로 페이지 html을 제작한다.

·   posts.jsp: html의 모습을 html태그와 internal css 방식으로 꾸며주고 Edit과, delete, add new post 부분에서는 EL 언어를 사용하여 jsp에서 자바빈 seq번호를 ${u.getSeq()}을 사용하여 작업을 처리한다.

§  사용된 JSP 기능에 관한 설명을 찾아 정리

§  각 소스에 다음 기능이 사용된 부분들을 찾아 주석문 추가(jsp action tag, jsp directives, tag library, el(expression language) 사용된 부분) - 주석문을 포함한 소스를 직접 보고서에 Text로 복붙하여 추가

// jsp directives (page directives)

// 전체 페이지는 자바 언어를 사용하고 html 텍스트만을 사용하고(이미지와 같은 binary 파일은 )

// 제외, UTF-8을 사용하여 엔코딩 방식을 페이지 전체에 적용함)

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

    pageEncoding="UTF-8"%>

<%@ page import="com.crud.dao.BoardDAO"%>

 

<% request.setCharacterEncoding("utf-8"); %>

 

//jsp action tags

<jsp:useBean id="u" class="com.crud.bean.BoardVO" />

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

 

<%

                    BoardDAO boardDAO = new BoardDAO();

                    int i = boardDAO.insertBoard(u);

                    String msg = "데이터 추가 성공 !";

                    if(i == 0) msg = "[에러] 데이터 삭제 ";

%>

 

<script>

                    alert('<%=msg%>');

                    location.href='posts.jsp';

</script>