..loading

jsp 프로젝트 만들기 - 시작

September 29, 2019

본격적으로 jsp를 이용한 servlet 프로젝트를 만들어보겠다. jsp와 servlet의 활용 목적이 주된 내용이기 html/css 는 가급적 손대지 않고 비즈니스 로직에 집중하도록 하겠다.

새 프로젝트 생성

이클립스를 사용하여 dynamic web project를 생성해주자. IDE없이 예제를 진행하려고 했으나, 초기 설정부터 설명해야할게 너무 많아 기본적인 설정은 이클립스에게 맡기고 프로젝트만 바로 구현하도록 할것이다.

dynimic web project 생성(이름은 상관 없으나 jsp-project 와 같은 명칭을 사용)
기본 폴더 구조를 확인
자바를 사용할 코드는 resource/src 하위에 생성 및 사용
client에 보여줄 문서 html, jsp 등은 WebContent 하위에 생성 및 사용
화면을 보일 문서는 홈, 목록, 상세보기 페이지를 가지고 설명
WebContent 하위에 index.jsp 파일 생성
WebContent 하위에 lists폴더를 만들고 폴더 내부에 board-list.jsp 파일 생성
WebContent 하위에 details폴더를 만들고 폴더 내부에 board-detail.jsp 파일 생성

파일들의 소스코드는 다음과 같다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <nav>
        <a href="/">홈</a>
        <a href="/lists/board-list.jsp">게시글 목록</a>
    </nav>
    <hr/>
    <h1>메인 페이지</h1>
</body>
</html>

board-list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <nav>
        <a href="/">홈</a>
        <a href="/lists/board-list.jsp">게시글 목록</a>
    </nav>
    <hr/>
    <h1>게시글 목록</h1>
    
    <form action="">
        <select name="">
            <option value="">제목</option>
            <option value="">작성자</option>
        </select>
        <input name=""/>
        <button type="submit">검색</button>
    </form>
    <hr/>
    
    <table>
        <tr>
            <th>게시 번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
        </tr>
        <tr>
            <td>1</td>
            <td>테스트 제목</td>
            <td>관리자</td>
            <td>yyyy:mm:dd</td>
        </tr>
        <tr>
            <td>2</td>
            <td>테스트 제목</td>
            <td>관리자</td>
            <td>yyyy:mm:dd</td>
        </tr>
    </table>
</body>
</html>

board-detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <nav>
        <a href="/">홈</a>
        <a href="/lists/board-list.jsp">게시글 목록</a>
    </nav>
    <hr/>
    <h1>제목</h1>
    <p>작성자: / 작성일: / 조회수:  </p>
    <p>첨부 파일: </p>
    <div style="width:500px; height:300px; border:2px dotted gray; padding:10px;">
        내용 입력
    </div>
    <hr/>
    <a href="">다음 글</a>
    <span style="font-weight:bold">/</span>
    <a href="">이전 글</a>
</body>
</html>