3. 과제관리시스템 개발 방법 - 프로젝트 CRUD

forest71 2017. 5. 7. 22:22

2017. 5. 7. 22:22

과제 관리 시스템을 개발하기 위해

가장 먼저 과제에 대한 기본 기능(CRUD)을 개발한다.

과제(이하 프로젝트)의 기본 기능은

프로젝트 전체 리스트 (조회 - Read),

개별 프로젝트에 대한 읽기 (Read)

개별 프로젝트 생성(Create)과 수정(Update),

그리고 삭제(Delete)로 구성된다.

이것은 거의 모든 데이터 베이스 기반 프로그램에서

동일하게 구현 되는 것으로,

가장 기초가 되는 것이 게시판이니

잘 모르는 경우 여기를 참조하면 된다.

코드에 대한 설명은 정리하지 않는다.

개발에 대해 어느 정도 알고 있다는 전제하에

일종의 개발 요령만을 정리한다.

요령으로 단순 게시판의 소스를 가져와서

코드만 조금 고치면 프로젝트 기능을 구현할 수 있다.

다만, project9에 있는 게시판은

기능이 많고 복잡해서 사용하기 어렵다.

이 게시판을 별도의 간단한 샘플 코드로 제작해서

CRUD라는 이름으로 개발해 두었다.

그림의 왼쪽 메뉴 중에서 샘플 메뉴 하위에서 실행해 볼 수 있다.

따라서, 다음 내용을 쉽게 이해하기 위해서

단순 게시판에 대해서 잘 알고 있어야 한다.

관련 내용을 설명하지 않기 때문에

모른 다면, 본 블로그의 관련 내용(최소한 게시판 1, 2)을 읽어보기 바란다.

이 소스를 복사해서 CPR(Copy, Paste, Replace)로 구현할 것이다.

MVC(Model–View–Controller) 개발에서

하나의 CRUD를 복사해서 구현하기 위해서는

Java에서는 컨트롤(Control), VO (Value Object), 서비스(Service)를 복사하고,

SQL문을 저장한 XML 파일도 있어야 하고

화면에 보여주는 JSP(HTML) 파일등

5개 이상의 파일이 있어야 한다.

(리스트, 읽기, 쓰기폼의 jsp파일이 있어야 하니 실제로는 7개의 파일)

그림에서 보는 것 처럼

Java 파일은 java > gu > crud 폴더에 있고

sql 파일은 resources > sql 폴더에 crud.xml 파일

JSP 파일은 webapp > WEB-INF > jsp > crud 폴더에 있다.

지금부터 이 파일들을 복사한 뒤 (Copy, Paste)

각각의 이름을 project로 바꾸어서 (Replace)

프로젝트 CRUD가 만들어 지도록 한다.

먼저, java > gu > crud 폴더를 선택하고 복사(Ctrl + C)를 한다.

java > gu 폴더를 선택하고 붙여넣기(Ctrl +P)를 한 뒤,

다음과 같이 project라는 폴더명을 입력한다.

java > gu > project 폴더에 있는

CrudCtr.java, CrudSvc.java, CrudVO.java

파일을 선택하고 F2키를 눌러서

PrjoectCtr.java, PrjoectSvc.java, PrjoectVO.java로

각각 파일명을 수정해 준다 [다음 그림 왼쪽 참조].

각 파일을 열어 보면 패키지(package) 이름 gu.crud와

클래스 이름(Crud*)에 오류가 표시 되어 있는 것을 볼 수 있다.

아직 오류가 나지 않았지만

컨트롤명인 crudList등 crud란 단어가 포함된 것은

crud 폴더에서 복사해 왔기 때문에

모두 잠재적으로 오류를 발생시킨다.

별도의 프로젝트 기능을 구현하고

오류를 해결하기 위해 crud (또는 Crud)로 된 글자를

project(Project)로 모두 바꾸어 주면 된다.

각자 재미로 하나 하나 crud를 project로 수정해서 완성해도 되고

여기서는 바꾸기(replace) 기능으로 간단하게 해결한다.

Eclipse 각 파일 편집창에서 찾기(Ctrl + F)를 실행하고

찾을 문자에 crud

바꿀 문자에 project를 입력하고

옵션에 대소문자 구분(Case sensitive)를 체크하고

[Replace All] 버튼을 클릭한다.

Java에서 클래스는 대문자로 시작하고

인스턴스는 소문자로 시작하는 명명 규칙이 있어서

그냥 바꾸기를 하면 문제가 생길 수 있기 때문에

대소문자를 구분(Case sensitive)해서 실행해야 한다.

즉, crud와 Crud를 project와 Project로 두번 실행해야 한다.

그림과 같이 PrjoectCtr.java, PrjoectSvc.java파일 등에

빨간 표시들이 사라진 것을 확인할 수 있다.

또, 컨트롤명, 서비스의 메소드명, 호출한 sql id,

컨트롤에서 반환할 jsp 파일명등이 모두 바뀌어 있다.

이러한 작업을 고려해서

처음 crud 샘플을 만들때 동일한 명명 규칙으로 제작하였다.

다음 그림에서 도형안에 있는 영어는

컨트롤명이자 jsp 파일 명이 된다.

도형 밖에 있는 insert, delete 등은

컨트롤에서 사용하는 서비스의 메소드명,

서비스에서 호출하는 SQL id를 나타낸다.

서비스의 메소드명과 SQL id는 같은 이름을 사용한다.

이렇게 이름에 기능과 테이블 명(crud)을 조합하여 부여하고

테이블명만 교체해서

기본기능(crud)을 간단하게 작성한다.

Java 파일을 수정 한 후,

JSP (HTML) 관련 파일들을 수정한다.

Java에서 처리한 것과 같이

webapp > WEB-INF > jsp > crud 폴더를 복사해서

webapp > WEB-INF > jsp 에서 붙여넣기 하여

project 폴더를 생성한다.

다음 그림의 왼쪽 그림과 같이

Crud로 시작하는 jsp 파일을

모두 Project로 시작하도록 수정한다.

ProjectForm.jsp, ProjectList.jsp, ProjectRead.jsp로 생성하고

3개의 파일을 모두 열어서

앞서와 같이

crud를 project로 모두 바꾸어 준다.

다만 기억해야 할 것이

위 그림에 중앙에 표시한 것처럼

다국어 처리를 위해 사용된 변수명인 crud가 있다.

이것은 앞서 언급한 java, jsp, xml(sql)외에

추가로 수정해야 할 파일이 있다는 것을 의미한다.

resources > message 폴더에 있는

message.properties 파일을 열어서 다음과 같이 작성한다.

이 내용들은

프로젝트 관련 해서 사용할 문자열들로

개발 중에 필요에 따라서 추가해서 사용하지만

여기서는 편의상

다음 문장을 그대로 복사해서 사용하면 된다.

project.title=프로젝트
project.prtitle=프로젝트명
project.prdate=작성일자
project.usernm=등록자
project.prstartdate=시작일자
project.prenddate=종료일자
project.prendreal=종료일자(실제)
project.prstatus=상태
project.prstatus0=진행중
project.prstatus1=종료
project.new=새프로젝트
project.term=프로젝트 기간
project.child=자식
project.rate=진행율
project.worker=작업자
project.task=작업
project.taskterm=작업 기간
project.taskMgr=작업
project.calendar=일정
project.taskWorker=작업자
project.taskMine=내것만
project.gray=미시작
project.red=종료일자를 지났음
project.green=좋습니다.
project.yellow=일정에 신경써야 합니다.
project.orange=종료일자 이후에 완료.
project.attach=첨부파일(산출물)
project.copy=다른 프로젝트에서 작업 항목 복사

마지막으로 가장 어렵고

처리가 많은 SQL문을 수정한다.

다음 그림과 같이

resources > sql 폴더에 있는

crud.xml 파일을 복사해서

project.xml을 생성하고,

XML 파일 내용에서 crud, Crud를

각각 project, Project로 모두 바꾸어 준다.

이 상태에서 톰캣을 가동하고 서버를 실행해도 된다.

다국어 처리 리소스가 맞지 않아 오류가 생기고,

수정 후 실행해도

아직 사용 테이블(TBL_CRUD)을 바꾸지 않아서

의미 없는 화면이 출력된다.

지금까지의 작업 내용을 정리해 보면

Java 파일 복사 해서 crud를 project로

Jsp 파일 복사 해서 crud를 project로

Jsp(XML) 파일 복사 해서 crud를 project로

바꾸어 주었다.

이 것은 단순한 CPR(Copy, Paste, Replace)의 반복이었다.

이번에는 테이블을 바꾸면서 발생하는

조금 복잡한 CPR처리를 진행한다.

다음 표에서 보듯이

기본 CRUD는 TBL_CRUD 테이블을 사용하고

프로젝트는 PRJ_PROJECT 테이블을 사용한다.

필드 구조가 다른 것 같지만 제법 많이 비슷하다.

TBL_CRUD		PRJ_PROJECT
번호	CRNO	프로젝트 번호	PRNO
제목	CRTITLE	프로젝트 제목	PRTITLE
내용	CRMEMO
작성일자	CRDATE	작성일자	PRDATE
삭제 여부	CRDELETEFLAG	삭제	DELETEFLAG
사용자번호	USERNO	사용자번호	USERNO
		상태	PRSTATUS
		시작일자	PRSTARTDATE
		종료일자	PRENDDATE

이렇게 정리한 이유는

현재 표로 매칭한 것처럼 바꾸기를 진행할 것이기 때문이다.

바꾸기 대상은 주로 테이블을 사용하는 SQL 문과

화면에 출력(jsp)하기 위해 데이터(값) 오프젝트를 사용하는 부분이다.

먼저 SQL 파일을 열어서

테이블 명을 TBL_CRUD에서 PRJ_PROJECT로 바꾸어 준다.

다음으로

표에서 정리한 것 처럼 각 필드를 바꾸어 준다.

다만, SQL문 작성 규칙이

SQL문은 대문자로

mybatis에서 사용하는 파라메타는 소문자로 작성했다.

예로, 그림의 53 라인을 보면

필드명인 [글 번호]는 CRNO이고

조건으로 값을 넘기기 위해 사용한 변수는 #{crno}이다.

즉, 변환할때 모두 대문자(CRNO)로 한번,

모두 소문자(crno)로 한번해서 두번 실행해야 한다.

TBL_CRUD를 기준으로 바꾸고 나면

내용(CRMEMO)은 비슷한 것이 없어서 남게 되는데,

지우거나 대충 비슷한 것으로 바꾸어 주면 된다.

여기에서는 프로젝트의 상태(PRSTATUS) 필드로 바꾸어 주었다.

프로젝트 테이블(PRJ_PROJECT)에서 처리하지 못한

시작일자(PRSTARTDATE), 종료일자(PRENDDATE)는

다음과 같이 수작업으로 추가한다.

    <select id="selectProjectList" resultType="gu.project.ProjectVO" parameterType="gu.common.SearchVO">
        SELECT PRNO, PRTITLE, TC.USERNO, USERNM, PRSTATUS, DATE_FORMAT(PRDATE,'%Y-%m-%d') PRDATE
                , PRSTARTDATE, PRENDDATE
          FROM PRJ_PROJECT TC
         INNER JOIN COM_USER CU ON TC.USERNO=CU.USERNO
         <include refid="includeProject"/>
         ORDER BY PRNO DESC
         <if test="rowStart != null">
             LIMIT ${rowStart-1}, 10
         </if>
    </select>

    <insert id="insertProject" parameterType="gu.project.ProjectVO" >
        INSERT INTO PRJ_PROJECT(PRTITLE, USERNO, PRSTATUS, PRDATE, DELETEFLAG, PRSTARTDATE, PRENDDATE)
        VALUES (#{prtitle}, #{userno}, #{prstatus}, NOW(), 'N', #{prstartdate}, #{prenddate})
    </insert>

    <update id="updateProject" parameterType="gu.project.ProjectVO">
        UPDATE PRJ_PROJECT
           SET PRTITLE=#{prtitle}, PRSTATUS=#{prstatus}
              , PRSTARTDATE=#{prstartdate}, PRENDDATE=#{prenddate}
         WHERE PRNO=#{prno}
    </update>

    <select id="selectProjectOne" parameterType="gu.project.ProjectVO" resultType="gu.project.ProjectVO">
        SELECT PRNO, PRTITLE, TC.USERNO, USERNM, PRSTATUS, DATE_FORMAT(PRDATE,'%Y-%m-%d') PRDATE
                , PRSTARTDATE, PRENDDATE
          FROM PRJ_PROJECT TC
         INNER JOIN COM_USER CU ON TC.USERNO=CU.USERNO
         WHERE DELETEFLAG='N' AND PRNO=#{prno}
    </select>

이 상태에서 실행하면

DELETEFLAG필드가 중복된다고 오류가 난다.

DELETEFLAG필드는 프로젝트 테이블(PRJ_PROJECT)에도 있고

작성자 정보를 가져오기 위해 조인하는

사용자 테이블(COM_USER)에도 있다.

따라서, 필드 사용시 테이블을 명시해야 한다.

바꾸기 기능을 이용해 DELETEFLAG를 TC.DELETEFLAG로 바꾸어 준다.

조건절에 사용된 2개만 바꾸면 되니 잘 보고 수정한다.

앞서 TBL_CRUD를 TC로 별칭(Aliase)을 사용했다.

TC를 PP(PRJ_PROJECT)로 바꾸기 해 준다.

(하지 않아도 되지만 코딩 규칙 준수를 위해서 처리)

SQL에서 소문자 변환시

ProjectForm.jsp, ProjectList.jsp, ProjectRead.jsp파일도

같이 변환하면 빠르게 작업 할 수 있다.

그림에서 보는 것과 같이

jsp 파일에서도 동일한 명칭을 소문자로 사용하기 때문이다.

마지막으로 다음 그림과 같이

ProjectVO 파일을 열어서 (왼쪽그림)

모두 지우고 오른쪽 그림과 같이 작성한다.

프로젝트 테이블(PRJ_PROJECT)구조를 그대로 작성한 것으로

Amateras에서 제공되는 코드를 수정하여 작성한 것이다.

작성자 이름(usernm)은 프로젝트에서도 사용하므로 그대로 뒀다.

노란 밑줄이 생긴 변수를 선택하고

마우스 오른쪽 버튼을 클릭해서 메뉴를 실행한다.

source > Generate Getters and Setters를 선택한다.

(실행이 안될 경우, 편집창을 닫았다가 다시 열어서 ...)

우측에 있는 [Select All] 버튼을 클릭해서

모든 변수를 선택하고 [OK]버튼을 클릭하여

그림과 같이 VO클래스를 완성한다.

ProjectVO를 저장하면 위 그림에서 보듯이

ProjectCtr과 ProjectSvc 파일에 오류가 생긴다.

이 오류는 삭제된 메소드를 호출해서 생긴 것으로

Crno를 찾는 것이다.

(PK값으로 수정과 쓰기를 구분하는 것으로 자세한 설명은 게시판 참조)

표에서 crno는 prno(Prno)로 바꾸었기 때문에

다시 바꾸기 기능을 이용해 바꾸어 주면 된다.

지금까지의 내용은

테이블 필드를 기준으로 바꾸기 기능을 이용하였다.

테이블 필드명, 데이터 오프젝트(Data Object, Value Object-VO)의

변수 이름을 동일하게 구성하고

이들을 참조하는 파일들(Java, JSP)도 같은 이름을 사용하게 되어

한번에 변환하는 과정을 정리하였다.

웹 브라우저에서 다음 주소로 접속해서 실행 결과를 확인한다.

http://localhost:8080/pms9/projectList

프로젝트 CRUD 제작의 마지막 작업으로

적절하게 화면(JSP)을 보강한다.

실행 화면은 프로젝트 리스트 화면으로

프로젝트에서 중요하게 여기는 정보가 빠져있다.

앞서, SQL 수정에서도 다루었지만

CRUD 샘플 테이블에는 프로젝트 정보 테이블의

상태, 시작일자, 종료일자 필드가 없어서 추가했다.

화면에서도 마찬가지로 이 세가지 필드가 없어서 추가해야 한다.

리스트에서는 작성일자 필드보다

시작일자와 종료일자를 보여 주는 것이 더 좋을 것이다.

다음의 화면설계서와 같이

프로젝트 상태도 보여주는 것이 좋다.

프로젝트 읽기 (개별 정보 출력)와 등록도 동일하다.

CRUD 샘플에서 사용된 글 내용은

프로젝트 관리 기능에서는 필요 없다.

따라서, 앞서 SQL문 작성에서는

글 내용(crmemo)을 프로젝트 상태(prstatus)로 바꾸어 주었다.

화면에서도 동일하게 처리한다.

또, 글 리스트에서만 사용한 작성일자(prdate)도

굳이 필요가 없어서 시작일자(prstartdate)로 바꾸어 준다.

(작성일자, 삭제 필드는 보이지 않고 데이터 관리를 위해 내부적으로만 사용)

마지막으로, 종료일자(prenddate)를 추가할 것이다.

ProjectList.jsp 파일을 열어서

다음과 같이 (빨강색) 작성한다.

기존에 있던 prdate를 지우고 위와 같이 작성한다.

처음부터 타이핑하지 말고

한줄 복사해서 붙여넣기 한 후

굵게(bold)표시된 글자만 수정한다.

(foreach) 앞에 추가한 것들은 (listHead)

프로젝트 리스트의 헤드 부분으로

출력할 데이터들의 필드명(상태, 시작일자, 종료일자)을 의미한다.

뒤에 작성한 것들은 (listBody)

화면에 출력해줄 필드들을 추가한 것이다.

이번에는 프로젝트 등록 화면을 수정한다.

실행화면에서 글쓰기를 선택하면

(각자가 알아서 [새프로젝트]로 바꾸어준다.)

다음과 같은 화면이 실행된다.

프로젝트 생성 폼(projectForm.jsp)파일을 열어서 다음과 같이 수정한다.

데이터를 서버로 전송하기 전에 (fn_formSubmit)

입력 값 확인 부분은 적절하게 수정 추가하면 된다.

여기서는 편의상 주석(삭제)으로 처리했다.

~~ 생략 ~~

<div class="panel-body">
    <div class="row form-group">
        <label class="col-lg-2"><s:message code="project.prtitle"/></label>
        <div class="col-lg-8">
            <input type="text" class="form-control" id="prtitle" name="prtitle" maxlength="255"
            value="<c:out value="${projectInfo.prtitle}"/>">
        </div>
    </div>
    <div class="row form-group">
        <label class="col-lg-2"><s:message code="project.term"/></label>                              ①
        <div class="col-lg-2">
            <input class="form-control" size="16" id="prstartdate" name="prstartdate" type="text" value="<c:out value="${projectInfo.prstartdate}"/>" readonly>
        </div>
        <div class="col-lg-2">
            <input class="form-control" size="16" id="prenddate" name="prenddate" type="text" value="<c:out value="${projectInfo.prenddate}"/>" readonly>
        </div>
    </div>
    <div class="row form-group">
        <label class="col-lg-2"><s:message code="project.prstatus"/></label>
        <div class="col-lg-8">
            
            <label class="radio-inline"><input type="radio" name="prstatus" value="0"                     ②
            <c:if test="${projectInfo.prstatus==0}">checked</c:if>><s:message code="project.prstatus0"/></label>
            <label class="radio-inline"><input type="radio" name="prstatus" value="1"
            <c:if test="${projectInfo.prstatus==1}">checked</c:if>><s:message code="project.prstatus1"/></label>
        </div>
    </div>
</div>

시작일자(prstartdate), 종료일자(prenddate)는

HTML 입력상자(text)로 작성하면 된다 ①.

상태(prstatus)는 textarea로 작성되어 있는 것을

진행중과 종료를 선택할 수 도록 radio 테그로 작성했다 ②.

이 부분은 타이핑을 쳐야한다.

이렇게 실행해도 되지만

시작일자, 종료일자는 달력을 사용하는 것이 더 좋다.

따라서, Project 9 실행 페이지에서 샘플 > 샘플 2: 날짜 선택을 실행하면,

(또는 http://localhost:8080/pms9/sample2 실행)

시작일자, 종료일자와 같이 기간을 선택하는 페이지가 실행된다.

우측의 [코드 보기]를 선택한다.

그림에서

위에 있는 박스는 달력 라이브러리를 사용하는데

필요한 자바 스크립트 코드들이고

아래 박스에 있는 코드들은 HTML 입력 상자(text) 코드이다.

HTML 입력 상자(text)는 달력을 지정할 필드로

시작일자, 종료일자에 적용할 것이다 ①.

즉, HTML 입력 상자(text)는 앞서 작성했기 때문에

위에 있는 박스의 코드만 복사해서 사용하면 된다.

위에 있는 박스의 자바 스크립트 코드는 다음과 같다.

윗 두줄은 (link, script)은

projectForm.jsp파일에서 head 부분에 넣어주고

코드에서 사용된 단어중

term1은 prstartdate로,

term2는 prenddate로 수정한다.

실행해서 데이터를 넣어 보면 잘 되는 것을 알 수 있다.

이렇게 사용하기 위해 5개의 샘플을 제작해 둔 것이다.

다음으로 프로젝트 리스트에서 프로젝트 하나를 선택하여

그림과 같이 프로젝트 읽기(projectRead)를 실행하면

남아 있는 작업을 알 수 있다.

앞서 글내용(crmemo)을 프로젝트 상태(prstatus)로 바꾸었기 때문에

글 내용 부분에 0 (또는 1)이 출력되어 있다.

ProjectRead.jsp 파일을 열어서

다음과 같이 수정해 준다.

작성자 위치에 프로젝트 시작일자와 종료일자를 넣었다 ②.

프로젝트 상태는 사용하지 않을 것이기 때문에 없애버렸다 ①.

이 둘은 작업자 마음이니 각자 편한데로 하면 된다.

마지막으로 projectList를 왼쪽에 있는 메뉴에 등록한다.

common폴더에 있는 navigation.jsp 파일을 열어서

적당한 위치에 다음과 같은 코드를 추가해 준다.

<li>
    <a href="boardList"><i class="fa fa-files-o fa-fw"></i> <s:message code="board.boardName"/></a>
</li>
<li>
    <a href="projectList"><i class="fa fa-files-o fa-fw"></i> <s:message code="project.title"/></a>
</li>
<li>
    <a href="#"><i class="fa fa-music fa-fw"></i> 샘플<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="sample1">샘플 1: 조직도/사용자</a>
        </li>
        <li>
            <a href="sample2">샘플 2: 날짜 선택 </a>
        </li>
        <li>
            <a href="sample3">샘플 3: 챠트</a>
        </li>
        <li>
            <a href="sample4">샘플 4: List & Excel</a>
        </li>
        <li>
            <a href="crudList">샘플 5: CRUD</a>
        </li>
    </ul>
</li>

게시판 메뉴를 복사해서

URL(projectList)과 메뉴 글자를 수정해서 작성했다.

이상과 같이

게시판 입출력 예제(CRUD)를 이용하여

프로젝트 관리 페이지를 제작하였다.

일부 타이핑한 것을 제외하면

모두 복사/붙여넣기와 바꾸기 (CPR)로 작성하였다.

이렇게 작성하면 유사한 페이지들은

천천이 해도 약 30분 이내에 기능을 구현 할 수 있다.

지금까지 진행한 것이 복잡하게 느껴질 수 있는데

다시 정리하면

1. crud 샘플을 복사해서 project 페이지를 제작한다.

2. 두 페이지간에 차이가 나는 필드를

삭제하거나 추가한다 (SQL, JSP).

3. 라이브러리(달력)가 필요한 경우

준비된 샘플의 코드를 복사해서 사용한다.

이렇게 간단한 작업으로 그럴듯한 기능을 구현했다.

이렇게 간단하게 개발하기 위해서는

생략된 기본 개념들을 모두 알고 있어야 한다는 전제가 있으니

Spring MVC, 게시판 등의 개념들을 잘 익혀두어야 한다.

저작자표시

'Java > PMS9' 카테고리의 다른 글

1. 과제관리시스템 개발 방법 (2)	2017.05.07
2. 과제관리시스템 개발 방법 - 사전 준비 (1)	2017.05.07
4. 과제관리시스템 개발 방법 - 작업 할당 I (0)	2017.05.07
5. 과제관리시스템 개발 방법 - 작업 할당 II (1)	2017.05.07
6. 과제관리시스템 개발 방법 - 일정 (0)	2017.05.07

SW 개발이 좋은 사람

3. 과제관리시스템 개발 방법 - 프로젝트 CRUD

'Java > PMS9' 카테고리의 다른 글

+ Recent posts

티스토리툴바