메뉴 DB화 하기(1)

웹 개발을 할때 메뉴 탭은 거의

필수적으로 만든다. 메뉴탭의 위치는 보통

홈페이지 상단이나 오른쪽 또는 왼쪽에 위치한다.

그리고 웹 개발을 공부하며 혼자 웹을 개발할땐

매뉴를 보통 아래와같이  jsp 단에서 만든다

+++++++++ 2018/09/07 추가 +++++++++

pageSubmitFn 프로퍼티는 스크립트단 안에 생성해주자.

+++++++++++++++++++++++++

하지만 메뉴를 DB화에서 만든다면 여러 이점이 있다.

처음에 메뉴를 DB화 하기위한 과정은 쉽지 않지만

만들어 둔다면 보안과 유지보수에 굉장히 좋다.

먼저 레프트 메뉴를 DB화 하기전엔

두가지를 고민해야한다.

ajax로 갈것인지 jstl로 갈것인지

속도면에서는 jstl이 빠르기 때문에

jstl로 구현할수 있으면 jstl로 구현한다.

프로젝트에서 left메뉴가 타일즈로 구성되었다면

ajax가 편하다. 난 프로젝트가 타일즈로

구성되어있기 때문에 ajax를 사용해

left메뉴를 DB화 했다.

그리고 left메뉴를 DB화 한다고 하면

메뉴마다 각각의 테이블을 만든다고

생각할수 있지만 테이블은 하나면 된다

먼저 DB에 테이블을 생성해 줘야한다.

테이블에 들어갈 컬럼은

MENU_ID, 메뉴의 이름인 MENU_NM

메뉴 클릭시 이동할 경로 MENU_URL

메뉴앞에 올 아이콘같은 MENU_CLASS

다음 메뉴의 사용여부를 결정할 USE_YN

메뉴의 순서를 정해줄 SORT_NO

하위메뉴의 존재 여부를 위한 COLLAPSE_YN

다음 메뉴의 DEPTH

부모 메뉴를 알기위한 PARENT_ID

이때 데이터 유형은 MENU_ID, SORT_NO, DEPTH, PARENT_ID

는 number 로 주고 나머지는 varchar2 로준다.

그리고 jsp에 있던 메뉴들의 데이터를 DB에 넣어주면된다

 

다음 메뉴 클래스들의 특성을 파악 해야한다.

COLLAPSE는 하위 메뉴의 존재여부이고

DEPTH는 메뉴의 깊이이다 

위 이미지처럼 상위메뉴는 1 하위메뉴는 2가 된다

PARENT_ID는 상위메뉴의 SORT_NO을

적어주면 끝이다.

다음 jsp의 스크립트단에 

var left = 
{        
    findMainMenuFn : function() {
        ajaxCl.ajaxCallFn({url: "mainMenuList.do", FCGubun: "F"});    
    }

메뉴를 DB에서 뽑아와 화면에 뿌려줄 준비를한다.

다음 도큐먼트 레디에서 스크립트단에서 만든

findMainMenuFn 메소드를 실행시킨다.