6. 과제관리시스템 개발 방법 - 일정

forest71 2017. 5. 7. 22:22

2017. 5. 7. 22:22

프로젝트별 작업 내역을 월별로 보여주는 기능(달력)은

앞서 다운받은 fullCalendar 라이브러리를

그대로 복사해서 사용하면 된다.

fullCalendar은 구글의 캘린더와 비슷한 인터페이스를

쉽게 사용할 수 있도록 해주는 라이브러리이다.

작성방식은 treegrid와 비슷하지만

저장과 삭제가 없이

조회만 구현하기 때문에

라이브러리 사용법만 알면 간단하게 구현할 수 있다.

fullCalendar를 다운받아서 압축 해제한 폴더 중에서

데모(fullcalendar-3.3.1\fullcalendar-3.3.1\demos)에

파일들을 확인해서 맘에 드는 것을 사용하면 된다.

데모들은 fullCalendar의 다양한 옵션을 지정하여 제작되었다.

여기에서는 basic-views.html 파일에 있는 내용을 복사해서 사용한다.

이상의 코드는 모두 fullCalendar에 대한 기본 설정이므로

자바 스크립트를 그대로 복사해서 사용하면 된다.

옵션들을 간단하게 정리하면,

옵션들은 Json으로 지정한다.

그 중에서 Header는 실행된 달력 화면에서 [라인 15]

이전달(prev), 다음달(), 오늘(이번달)로 이동하는 기능, [라인 16]

현재 출력된 월(title)에 대한 정보 출력 [라인 17],

날짜를 보는 기간(월, 주, 일)을 지정하는 옵션이다 [라인 18].

이러한 버튼을 왼쪽(left), 중앙(center), 오른쪽(right)에 지정할 수 있다.

defaultDate는 fullCalendar가 [라인 20]

처음 실행되면서 보여줄 일자(월)을 의미한다.

예제는 특정 일자를 지정했는데

오늘 (PC에서 지정된 일자)을 보여주도록

날짜 값 대신에 new Date()로 수정해서 사용한다.

navLinks는 월/주별 달력에서 일자를 클릭하면 [라인 21]

일별 보기로 전환하는 기능을 사용하지 여부를 결정한다.

editable는 실행된 달력에서 일정(event)을 표시한 바(bar)를

마우스로 이동할 수 있게 하는 것으로

여기서는 사용하지 않는다(false) [라인 22].

마우스로 날짜를 바꾸면

저장된 데이터도 바꾸어 줘야 하는 어려움이 있기 때문이다.

eventLimit는 하루에 일정(event)을 3개만 보여주고

그 이상은 more로 처리할지 여부를 결정한다 [라인 23].

마지막으로 events 속성이 있다 [라인 24].

Events는 표현할 일정들로 일정 데이터를 의미한다.

즉, 작성 일정을 넣어주면 된다.

일정은 많기 때문에 배열로 지정하고

배열의 원소는 Json으로 지정한다.

즉, 하나의 일정을 Json으로 지정하는 것이고

이것은 일정명(작업명-title), 시작일자(start), 종료일자(end),

데이터 식별(id)로 구성되어 있다.

데이터 식별(id) 속성은 생략해도 되지만

향후 구현에서 일정을 클릭하면

상세한 작업 정보를 팝업으로 제공하기 위해서 사용할 것이다.

보다 자세한 정보는 fullCalendar에서 제공하는

문서를 확인하면 된다.

해당 프로젝트에 대한 작업 내역을

일정별로 보는 기능을 구현한다.

작업 내역을 관리하는 페이지나

일정별로 보는 페이지는

프로젝트 상세 정보 페이지(읽기 - ProjectRead.jsp)에서 구현된다.

이외에도 화면설계서에서는

작업자별로 보거나 내것만(내 작업) 보는 기능도

프로젝트 상세 정보 페이지에서 구현된다.

즉 작업, 일정, 작업자, 내것만이라는 탭으로 디자인하고

각각을 누르면

각각의 컨트롤을 호출하도록 구현한다.

따라서 다음 코드를

프로젝트 관리 버튼과 과제 관리 버튼 사이에 작성한다.

bootstrap 코드로 탭 기능을 구현한 코드이다.

li 테그에 active 클래스를 주면

탭이 활성화 된 것처럼 보이게 된다.

일정별 보기는 taskCalendar로 명명하였다.

이 파일을 복사해서

taskCalendar.jsp 파일을 생성한다.

taskCalendar.jsp 파일에서 treegrid 관련 코드를 모두 지운다.

treegrid와 조직도를 위해 사용한 dynatree용

외부 파일(script, style)을 지우고,

작업 관리를 위한 버튼과

treegrid용 Table 태그도 지운다

(하나의 bootstrap row만 지우면 됨).

프로젝트 읽기 기능과 탭만 남기고 모두 지운 것이다.

다음으로 앞서 정리한 basic-views.html 파일의 내용을

taskCalendar.jsp 파일에 넣어주면 된다.

먼저, fullCalendar 라이브러리를 위한

1개의 style과 2개의 자바스트립트 파일을

Eclipse에서 프로젝트에 복사한다.

fullcalendar.print.min.css는 복사해도 되지만

출력하지 않을 것이기 때문에 제외하고,

jquery.min.js 파일은 기존에 사용하는

Jquery가 있기 때문에 제외한다.

1개의 CSS 파일과 2개의 자바스트립트 파일을

복사한 뒤에 다음과 같이 경로를 수정하고

taskCalendar.jsp 파일 head에 작성한다.

앞서 정리한 스트립트를 복사해서 붙여넣기 한 후,

다음과 같이 수정한다.

앞서 정리한 스트립트에 추가된 내용은

작업 리스트(listview)를 가져와서

출력할 데이터(dataset)를 구성하는 것 뿐이다.

var dataset = [
    <c:forEach var="listview" items="${listview}" varStatus="status">
        <c:if test="${listview.tsstartdate != ''}">
            {"id":'<c:out value="${listview.tsno}" />'
            ,"title":'<c:out value="${listview.tstitle}" />'
            ,"start":"<c:out value="${listview.tsstartdate}" />"
            <c:if test="${listview.tsenddate != ''}">
                ,"end":"<c:out value="${listview.tsenddate}" />"
            </c:if>
            } <c:if test="${!status.last}">,</c:if>
        </c:if>
    </c:forEach>
];

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: new Date(),
        navLinks: true,
        editable: false,
        eventLimit: true,
        events: dataset
    });
});

이 과정은 앞서 작업 관리에서

treegrid를 대상으로 진행한 것과 동일한 방식이다.

달력을 배치할 적당한 위치(탭 밑)에 다음 코드를 작성한다.

ProjectCtr에서

projectRead를 복사해서 다음과 같이 작성한다.

projectRead를taskCalendar로 바꾸어 준것이다.

    @RequestMapping(value = "/taskCalendar")
    public String taskCalendar(HttpServletRequest request, ProjectVO projectVO, ModelMap modelMap) {
        // 페이지 공통: alert
        String userno = request.getSession().getAttribute("userno").toString();

        Integer alertcount = etcSvc.selectAlertCount(userno);
        modelMap.addAttribute("alertcount", alertcount);

        ProjectVO projectInfo = projectSvc.selectProjectOne(projectVO);

        List<?> listview = taskSvc.selectTaskList(projectVO.getPrno());

        modelMap.addAttribute("projectInfo", projectInfo);
        modelMap.addAttribute("listview", listview);

        return "project/taskCalendar";
    }

작업 관리의 리스트와

일정 중심의 리스트는 기본적으로 같은 방식으로 구현된다.

둘다 지정된 프로젝트 정보와 작업 데이터를 가져오는 것이기 때문이다.

보여주는 방식(jsp)이 다른 것이기 때문에

위 코드와 같이 taskCalendar.jsp 파일을 지정하고

컨트롤 이름만 수정하면 된다.

PMS9에서는 좀더 복잡하게 구현했지만

이 글은 개발 개념을 잡기 위한 것으로 간단하게 구현했다.

작업자별 보기와 내것만 보기는 구현하지 않는다.

projectRead, taskCalendar 컨트롤과 구현 방식이 동일하고

SQL문의 조건만 바꾸어 주면

작성 할 수 있기 때문에 정리하지 않는다.

이상으로 작업과 일정을 중심으로

treegrid와 fullCanlendar를 사용하여 구현하였다.

작업과 일정을하나로 구현한 간트(gantt) 챠트를 이용하여

MS-Project 처럼 구현해 보는 것도

실력향상에 도움이 되고 재미도 있을 것이다.

PMS9에서는 구현하지 않았지만

직접 구현해 보길 바란다 (의외로 간단하다).

http://taitems.github.io/jQuery.Gantt/
http://jsgantt.com/
https://developers.google.com/chart/interactive/docs/gallery/ganttchart
https://frappe.github.io/gantt/
https://github.com/robicch/jQueryGantt

지금까지 crud 샘플을 복사해서

프로젝트 마스터 정보를 생성/관리하는 웹 페이지를 구현하였고,

treegrid를 이용하여 과제를 생성/관리하는 페이지를

fullcalendar를 이용하여 과제를 일정별로

확인하는 페이지를 구현하였다.

추가적으로 기간 선택(datePicker)과

사용자 선택에 Project9의 샘플을 복사하여 사용하였다.

작업을 생성하고 관리하는 부분에서 다소 복잡한 코드가 사용되었지만

대부분의 코드는 복사/붙여넣기/바꾸기를 이용하여 작성하였다.

(실제로 PMS9 개발시 거의 타이핑은 하지 않았다.)

이글의 핵심이자

과제 관리 시스템(PMS9)의 핵심,

쉽고 빠르게 개발하는 방법의 핵심은

업무에 대하여 정확하게 알고

사용할 기술에 대하여 정리되어 있으면

복사/붙여넣기/바꾸기(CPR)로 쉽게 개발할 수 있다는 것이다.

저작자표시

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

1. 과제관리시스템 개발 방법 (2)	2017.05.07
2. 과제관리시스템 개발 방법 - 사전 준비 (1)	2017.05.07
3. 과제관리시스템 개발 방법 - 프로젝트 CRUD (5)	2017.05.07
4. 과제관리시스템 개발 방법 - 작업 할당 I (0)	2017.05.07
5. 과제관리시스템 개발 방법 - 작업 할당 II (1)	2017.05.07

SW 개발이 좋은 사람

6. 과제관리시스템 개발 방법 - 일정

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

+ Recent posts

티스토리툴바