스프링 팀프로젝트[1] - jsp를 활용한 여행사이트:기획서, DB설계, tiles 활용

세미프로젝트 기획서

이번 세미 팀프로젝트에서는 스프링 프레임워크를 바탕으로 jsp파일을 사용하여 여행사이트를 만들기로 했습니다.

저는 그 중 숙소추천 파트를 맡았고, 아래 사진은 카카오 오븐앱을 활용하여, 프로젝트 시작 전 만든 기획서입니다.

이를 바탕으로 기능 구현을 시작했습니다.

페이지1은 hotel.jsp , 페이지2는 hoteldetail.jsp 라는 이름으로 정했습니다.

1. DB설계

create table hotels
(
    seq        int auto_increment primary key,
    hotel_name varchar(50)   not null,
    readcount  decimal(8)    not null default 0,
    thumbnail  varchar(1000) not null,
    wdate	   timestamp    not null default now(),
    content	   varchar(1000) not null,
    map		   varchar(100)	not null,
    book	   varchar(100)	not null	
);

create table hotel_comments
(
    seq        int auto_increment primary key,
    id         varchar(50),
    hotelseq   int,
    content    varchar(1000) not null,
    wdate timestamp     not null default now(),
    foreign key (hotelseq) references hotels (seq),
    foreign key (id) references member (id)
);

hotels 테이블

hotels 테이블은 hotel의 대한 모든 것을 포함하려고 했습니다.

이때, 가장 중요했던 것은 어떤 것을 DB에 담을 것이냐였습니다.

호텔 메인페이지(hotel.jsp)에서 호텔 사진을 클릭하면 호텔 상세 페이지(hoteldetail.jsp) 로 이동해 

호텔 이름, 사진, 카카오맵, 호텔 설명 텍스트, 호텔 예약페이지 버튼을 보여줘야했기 때문에

그 내용을 DB에 다 담기 위해 위와 같은 컬럼을 만들었습니다.

 

hotel_comments 테이블

오로지 댓글을 위한 테이블이므로 기본적인 댓글 컬럼을 만들어 줬습니다.

이때, 호텔 메인페이지에서 사진을 클릭하고 들어와서 댓글을 달 수 있게 구현해야 했기 때문에

comments 의 hotelseq이 hotels 테이블의 seq 테이블을 참조할 수 있도록 했습니다.

그런데, 이와 같이 둘의 컬럼 이름을 다르게 해 놓아서 개발할 때 조금 헷갈렸습니다.

웬만하면 컬럼 이름을 같게 해서 참조 시키면 좋을 것 같습니다.

 

사이드메뉴바를 구현하기 위해 수도권, 강원도, 전라도 등의 DB를 포함하는 menu 컬럼도 있었으면 좋았겠지만,

세미프로젝트 시간 관계상 만들지 않았습니다.

 

2. tiles 활용하기

먼저, header와 footer 부분에 우리 팀 고유의 "공통" 디자인을 보여주고,

제 페이지에도 왼쪽 사이드바가 필요했기 때문에 tiles를 활용했습니다

tiles를 활용하기 위해 먼저 header, menu, content, empty, footer  jsp파일을 순서대로 만들어줘야 하는데요.

저희 팀은 empty 부분을 활용하지 않을 거기 때문에 만들지 않았습니다.

 

그런 다음, 제가 맡은 숙소추천 페이지에서 다른 팀원들과 다른 점은 menu와 content 부분이기 때문에

팀원들과 동일한 header, footer부분만 상속받고, menu, content 부분만 저만의 페이지로 보내주기 위해 jsp 파일을 따로 만들었습니다.

위 사진에서 menu를 위한 페이지는 hotelmenu,

그 밖에 content를 위한 페이지는 나머지 jsp파일 전부입니다. (hotel, hoteldetail, menu_sudo 등)

 

이를 설정하기 위한 파일은 팀원 공통의 레이아웃을 설정해주기 위한 layout.xml 파일과 저만의 layout 설정 파일인 hoteltiles.jsp 파일입니다.

layouts.xml

2번 방식처럼 hotel을 상속받고 content 경로만 변경해주면, 메뉴까지 상속받아서 hoteldetail 페이지에도 메뉴바가 보이게 됩니다. 

하지만 계획했던건 hoteldetail.jsp 페이지에서는 메뉴바가 보이지 않는 것이었으므로, 저만의 layout 설정파일인 hoteltiles2를 하나 더 만들어서 menu 부분을 주석처리 해주었습니다. 

 

               hoteltiles.jsp                                                                    hoteltiles2.jsp