🆗 현재까지 한것
- DB에 게시글 데이터를 담아 사용하기 위해 board 테이블을 생성 및 샘플데이타 추가
- DBCP 추가
- DTO 만들기(=VO클래스=자바빈클래스)
- jstl라이브러리 추가
- BoardDAO클래스 생성, DBManager클래스 생성
- Action인터페이스 생성, ActionFactory클래스 생성, BoardServlet생성
- 이클립스에서 웹 프로젝트를 실행하였을 때 처음 나타날 index.jsp 만듬
- 데이터베이스의 board테이블에서 모든 정보를 가져오는 쿼리문을 BoardDAO에 작성
- 위에서 만든 메서드를 사용하여 게시글 리스트를 만드는 BoardListAction클래스 생성
- ActionFactory에 해당 Action 등록
💡 해야 할 것
- 게시글을 불러오는 로직은 구성하였으므로 이를 보여주는 jsp페이지를 만든다.
- 앞으로 만들 view에 공통적으로 적용할 css 파일 만들기
위 그림처럼 만들려고 한다. 현재 하고있는 복습의 목적은 jsp의 model2방식에 익숙해지기 위함이므로 디자인은...
boardList.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h2>게시글 리스트</h2>
<table>
<tr>
<td colspan="5" style="border:white;text-align:right;"><a href="BoardServlet?command=board_write_form">글 작성하기</a></td>
</tr>
<tr>
<th>글번호</th>
<th>글제목</th>
<th>작성자</th>
<th>작성날짜</th>
<th>조회수</th>
</tr>
<c:forEach var="posting" items="${list }">
<tr>
<td>${posting.num }</td>
<td>${posting.title }</td>
<td>${posting.name }</td>
<td>${posting.writeDate }</td>
<td>${posting.readCount }</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>드디어 첫 index.jps를 제외한 첫 view를 만들어보았다.
실행을 시켜보면
아직 css를 만들지 않아 매우 허접해보이지만 DB에 저장된 데이터들을 불러와 만든 감동적인 페이지이다. 작성하고 바로 원큐에 성공하여 기분이 좋았다.
CSS파일 만들기
WebContent에 css폴더를 새로 생성, board.css 파일 작성한다.
#wrap {
width: 1000px;
margin:auto;
}
table{
width: 100%;
border-collapse: collapse;
line-height: 24px;
}
table td,th {
border-top:1px solid black;
border-bottom:1px solid black;
border-collapse: collapse;
text-align: center;
padding: 10px;
}
th {
background: rgb(221, 221, 221);
}
a{
text-decoration: none;
color: black;
}
a:hover{
text-decoration: underline;
}그리고 boardList.jsp에서 글 작성하기 링크가 있는 가장 상단의 row는 테두리를 흰색으로 하고 오른쪽 정렬을 시키기 위해 inline css를 작성해준다.
이후의 모습은 아래와 같다.
허접하지만 깔끔하다. 이정도면 됬다!
다음글은 글 작성하기 버튼을 눌렀을 때 글을 작성하는 페이지로 이동하고, 그곳에서 작성한 글이 데이터베이스에 추가하는 CRUD 중 Create를 구현한다.
NOBODY