[ jsp 프로젝트 ] 여행 커뮤니티 사이트 만들기

주제

: 제주도 여행관련 정보를 공유하는 간단한 커뮤니티 사이트

공통 관심사인 사진과 여행과 관련된 주제를 프로젝트에 담고 싶었기 때문

 

 

목적

: 앞서 배운 게시판 기능을 좀 더 상세하게 다루어보고자 한다 

 

 

방향성

: 첫 팀프로젝트이면서도 개발기간이 짧기 때문에 최대한 [기능 중심으로 완성]하기로 했다

 

개발인원

: 2인

 

개발기간

: 5일 (2023.12.17 ~ 2023.12.21)

 

개발환경

Tool	eclipse
DataBase	Oracle DB (sql Developer)
Server	tomcat
Backend	JSP
frontend	HTML , CSS

 

 

---

 

 기획단계 

 

 

변수 이름 지정

: 언더바를 이용한 스네이크 케이스 사용하기로 함 (board_idx)

 

 

테이블 구조 짜기 및 ERD 작성

: 테이블은 3개로 구성

 

 

member (회원)

board(게시판)

reply(댓글)

 

 

 

구현할 기능 및 메서드 이름 지정

 

 

UI프로토타이핑 작성

: 페이지 이동도 생각하면서 작성 

 

 

 

---

 DB 테이블 생성 

drop table member cascade constraints purge;
drop table board cascade constraints purge;
drop table reply cascade constraints purge;


create sequence member_seq 
    start with 1
    maxvalue 99999
    increment by 1
    nocycle
    nocache;


create sequence board_seq 
    start with 1
    maxvalue 99999
    increment by 1
    nocycle
    nocache;


create sequence reply_seq 
    start with 1
    maxvalue 99999
    increment by 1
    nocycle
    nocache;
    
    

create table member (
    idx         number              default member_seq.nextval primary key,
    userid      varchar2(100)       unique not null,
    userpw      varchar2(100)       not null,
    username    varchar2(100)       not null,
    email       varchar2(500)       not null
);


create table board (    --  외래키 : member에 있는 회원만 게시글을 작성할 수 있음 
    idx         number              default board_seq.nextval primary key,
    title       varchar2(1000)      not null,
    image       varchar2(3000)      default 'default.jpg',
    category    varchar2(100)       check (category in('관광' , '맛집')) not null,
    writer      varchar2(100)       not null,
    content     varchar2(4000)      not null,
    writeDate   Date                default sysdate,
    
    constraint board_member_fk
    foreign key(writer)
    REFERENCES member(userid)
);



create table reply (    --  외래키 1 : 원본 게시글의 순번 == reply 테이블의 board_idx
                        --  외래키 2 : member 테이블에 있는 회원만 댓글을 작성할 수 있다
    idx         number          default reply_seq.nextval primary key,
    board_idx   number          not null, 
    writer      varchar2(100)   not null,
    content     varchar2(2000)  not null,
    writeDate   date            default sysdate,
    
    constraint reply_board_fk
    foreign key(board_idx)
    REFERENCES board(idx),
    
    constraint reply_member_fk
    foreign key(writer)
    REFERENCES member(userid)
);


select * from member;

select * from board;

select * from reply;

commit;

 

 

 더미데이터 생성

 

: 추가적으로 회원가입 / 게시글 작성 등을 할 것이지만, 

Read 기능이 제대로 구현되고 있는지 파악하기 위해서

더미데이터를 생성하기로 했다 

 

member 더미데이터

( ..중략.. )
INSERT INTO member (userid, userpw, username, email) VALUES ('jeju1', '1234','제주살고싶퍼용','jeju1@naver.com');

INSERT INTO member (userid, userpw, username, email) VALUES ('jeju2', '1234','제주뭐랭','jeju2@naver.com');

INSERT INTO member (userid, userpw, username, email) VALUES ('jeju3', '1234','제주한량','jeju3@naver.com');

INSERT INTO member (userid, userpw, username, email) VALUES ('jeju4', '1234','자연인','jeju4@naver.com');

INSERT INTO member (userid, userpw, username, email) VALUES ('jeju5', '1234','제주낭만사진가','jeju5@naver.com');

 

 

board 더미데이터

( ..중략.. )
INSERT INTO board (title, writer, content, image, category) VALUES (
        '제주 나무식탁','jeju1', '제주 고등어 온소바/국물만 먹으면 다소 심심할 수 있지만 영귤청이 우려지면 우려질수록 달콤한 맛을 느낄 수 있습니다 먹으면 먹을수 록 국물의 감칠맛이 계속 국물을 먹게 한다 고등어에 간이 되어 있어 같이 먹으면 간이 아주 적절하게 맞는다 
밑반찬인 줄기 상추 무침의 특유의 식감으로 먹는 재미 또한 있다 디저트로 나오는 옥수수 아이스크림은 입안에서 옥수수가 씹히면서 재밌는 식감과 달콤함을 함께 즐길 수 있다', '고등어온소바.jpg','맛집');

INSERT INTO board (title, writer, content, image, category) VALUES (
        '제주 모리노아루요', 'jeju2', '제주 모리노 아루요 /
TBC 효리네 민박2에서 박보검이 먹으면서 화제가 된 메로동 달큰한 간장과 부드러운 메로가 만나서 밥과 아주 잘 어울리는 조화가 펼쳐진다 ', '메로동.jpg', '맛집');

INSERT INTO board (title, writer, content, image, category) VALUES (
        '제주 삼성혈', 'jeju3', '삼성혈 개인적으로 제주에서 벚꽃이 필 무렵에 가면 이쁜 장소이다 근처에 전농로 벚꽃거리가 있어서 벚꽃 개화시기에 맞추어 제주가게 된다면 
이쁜 사진들을 많이 담을 수 있는 장소이기도 하다 ', '삼성혈.jpg', '관광');

INSERT INTO board (title, writer, content, image, category) VALUES (
        '한라산 백록담', 'jeju4', '제주 한라산 백록담 /
제주에 간다면 꼭 가보기를 추천하는 백록담 1년 중 운해가 없는 날이 손에 꼽기 때문에 3대가 덕을 쌓아야 볼 수 있다는 말이 있다 살면서 한번쯤 가본다면 자연의 경치에 매료될 수 있는 장소이다', '백록담.jpg','관광');

INSERT INTO board (title, writer, content, image, category) VALUES (
        '제주 새별오름', 'jeju5', '새별오름 /
가을에 가면 이쁜 새별오름이지만 밤에 별을 보러 가는 것이 10배 더 이쁜 제주의 오름중 하나이다 언덕이나 산을 올라갈 필요없이 주차장에서 제주 밤하늘에 수 놓은 별들의 바다를 볼 수 있는 곳 중 하나이다 ', '새별오름.jpg', '관광');

INSERT INTO board (title, writer, content, image, category) VALUES (
        '제주 김녕해수욕장', 'jeju5', '김녕해수욕장 /
제주 동쪽의 바다중 차분한 바다를 느낄수 있는 장소 중 하나이다 봄 늦은 오후시간에 방문하면 오묘한 분위기를 느낄 수 있는 바다 중 하나 해수욕장이 오픈하기 전에는 사람이 많이 없어 조용하게 바다 산책을 하고 싶다면 추천하는 여행지', '김녕해수욕장.jpg','관광');

 

 

 

header.jsp 

: 모든 페이지에 적용할 태그 선언 및 링크 작성함

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="member.* , reply.*"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<c:set var="cpath" value="${pageContext.request.contextPath }" />
<c:set var="memberDAO" value="${MemberDAO.getInstance() }" />
<c:set var="boardDAO" value="${BoardDAO.getInstance() }" />
<c:set var="replyDAO" value="${ReplyDAO.getInstance() }" />
<c:set var="fileUtil" value="${FileUtil.getInstance() }" />





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



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
        .frame {
            width: 900px;
            text-align: center;
            margin: 0 auto;
        }
        .flex {
            display: flex;
        }
        .sb {
            display: flex;
            justify-content: space-between;
        }
        div.login {
            text-align: end;
        }
        div.login > a {
            padding: 0px 20px;
        }
        div.category  {
            padding-top: 150px;
        }
        div.category > p.categoryLeft {
            padding-left: 50px;
        }
        div.category > p.categoryRight {
            padding-right: 50px;
        }
        
    </style>

</head>
<body>

   
   
<div class="login">
   <a href="${cpath }/login.jsp">로그인</a>
   <a href="${cpath }/join.jsp">회원가입</a>
</div>

<div class="category">
   <a href="${cpath }/board.jsp?category=관광">관광</a>
   <a href="${cpath }/board.jsp?category=맛집">맛집</a>
</div>