게시판5) 게시판 화면 구성
in Web Dev on Java Spring
드디어 본론, 게시판을 만들 것이다. 화면은 다음과 같다
이 포스트에서는 1~4번 노란 박스까지 보도록 할 것이다. 글번호와 페이징은 다음 포스트에서 다룰 것이다.
1. home 버튼 누르면 index로 돌아가기
- 맞다. 당신이 생각하는 바로 그것… image 태그를 a태그로 감싸서 이미지를 클릭하면 index페이지로 돌아가게 한다.
- 그러나 틀리다. 당신이 생각한 바로 그것… a href = “/” 를 주려고 하지 않았는가? 아님말구
- 만약 “/” 게 보내면, http://localhost:8089/board/ 여기가 아니라 http://localhost:8089/ 여기로 돌려보낸다.
- a href = “/board”를 준 당신도 틀렸다.
- 이렇게 하면 배포하는 시점에서 문제가 생겨버린다. (deep 한 설명은 담번에..?)
- ${pageContext.request.contextpath}/ 이렇게 서버에서 직접 page 컨텍스트 패스를 가져와야한다.
<div class= "home">
<!-- spring - appservlet 에 servelt-context에서 설정을 해주어서 이렇게 해줄 수 있다. -->
<a href="${pageContext.request.contextPath}/"><image src = "images/home.jpg" style = "width : 30px; height : 30px;"></a></div>
2. DB에서 받은 정보 출력
controller에서 다음과 같이 DB에서 받은 객체들을 model 에 “list”로 저장해준다.
repository.boardList(searchItem,searchWord);의 args는 3번에서 설명할 예정이니 지금은 스킵!
List<Board> list = repository.boardList(searchItem,searchWord);//글 목록 조회 model.addAttribute("list",list);jstl core library를 이용해 <c:forEach 문 사용
<!--헤더 빼먹지 말고 쓰기--> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 형식은 다음과 같다.--> <c:forEach var= "i" items="${list}"> </c:forEach>forEach 문에서 list 안 board 객체들을 하나씩 꺼낸다. 제목을 클릭하면 그 글을 확인할 수 있게 해야함으로, 게시글 title에는 a href를 걸어준다.
아래처럼 a href = “javascript:함수명(args)” 를 사용하면 js 함수를 부를 수 있다.
<a href="javascript:boardDetail(${board.boardseq})">${board.title}</a>요로케..테이블 형식으로 만들어준다.
boardlist.jsp
<table border="1"> <tr> <th>번호</th> <th class="title">글제목</th> <th>글쓴이</th> <th>글쓴날</th> <th>조회수</th> </tr> <c:forEach var= "board" items="${list}" varStatus="status"> <tr> <!--일단 글 번호대신 boardseq을 넣어놓음.페이징 포스트에서 변경예정--> <td>${board.boardseq}</td> <td> <!-- javascript 호출하는걸로 바꾼다... --> <a href="javascript:boardDetail(${board.boardseq})">${board.title}</a> </td> <td>${board.userid }</td> <td>${board.regdate} </td> <td>${board.hitcount}</td> </tr> </c:forEach> </table>
3. 글 검색
주요 개념
1. ${ 조건 ? 값1:값2 }의 실사용. ${searchItem=='title' ? 'selected' : ' '}
2. @RequestParam(value="변수명", defaultValue ="기본값") String 변수명,
3. 쿼리 choose when 구문
1. ${ 조건 ? 값1:값2 }
- ${searchItem==’title’ ? ‘selected’ : ‘ ‘} 이런 형식으로 사용해 서버에 저장된 변수 값을 읽어와 화면에 설정이 남아있게 할 수 있다.
form 이 submit 되면서, select option 의 value값이 controller로 날아간다. (searchItem = “userid” 이런 식으로)
jsp에서 온 searchItem 와 searchWord의 변수값을 controller에서 받아 model에 저장한다.
jsp에서 ${searchItem==’title’ ? ‘selected’ : ‘ ‘} 이렇게 확인해서 selected를 넣어준다.
그럼 페이지가 바뀌더라도 검색창에 키워드와 option 이 리셋되지 않고 남아있게된다.
<form id = "search" action = "boardlist" method = "GET">
<select name = "searchItem">
<option value = "title" ${searchItem=='title' ? 'selected' : ' '}>제목</option>
<option value = "userid" ${searchItem=='userid' ? 'selected' : ' '}>작성자 </option>
<option value = "message" ${searchItem=='message' ? 'selected' : ' '}>글내용 </option>
</select>
<input type= "text" name = "searchWord" value = "${searchWord }">
<input type= "submit" value = "검색">
</form>
2. @RequestParam
boardList 함수의 param 은 좀 다르다. String 변수명의 형식이 아니라.
@RequestParam(value="변수명", defaultValue ="변수값") String 변수명의 형식을 가진다. 의미는 어렵지 않다. 만약 jsp 파일에서 해당 변수명이 넘어오지 않을 때, defaultValue로 “변수값”을 해라 라는 뜻이다.
이렇게 쓰인다.
public String boardList( @RequestParam(value="searchItem", defaultValue ="title") String searchItem, @RequestParam(value="searchWord", defaultValue ="") String searchWord, Model model){}코드의 재사용을 위해서 이렇게 한다. index 페이지에서 게시판을 넘어올 때와 글 검색한 후 확인을 누를 때 페이지 코드가 거의 똑같다. 다른 점은 전자의 경우,
model 에 search item 과 word 저장해 줘서 jsp에서 가져올 수 있도록 한다. searchItem과 searchWord가 존재하지 않아 넘어오지 않고 후자는 searchItem과 searchWord와 변수값이 넘어온다는 점이다. 이렇게 @RequestParam을 사용하면 전자 후자의 경우를 하나의 메소드로 처리할 수 있어 좋다.
@RequestMapping("/boardlist")
public String boardList(
@RequestParam(value="searchItem", defaultValue ="title") String searchItem,
@RequestParam(value="searchWord", defaultValue ="") String searchWord,
Model model) {
List<Board> list = repository.boardList(searchItem,searchWord);//글 목록 조회
model.addAttribute("list",list);
model.addAttribute("searchItem", searchItem);
model.addAttribute("searchWord", searchWord);
return "board/boardList";
}
3. 쿼리 choose when 구문
choose when 으로 조건을 걸어준다. (switch case 문 처럼 사용하면 된다.)
LIKE ‘%’ #{searchWord} ’%’ (SQL 다 까묵어부렀..) xml 문법에서는, 서버에 저장된 정보를 꺼내올 때 ${}이렇게 사용하지 않고, #{} 이렇게 사용한다.
또한 태그 안에 넣는 변수면
<when test = "searchItem=='title'">이런식으로 그냥 “” 안에 넣어서 사용한다.
<select id = "boardList" resultType="Board" parameterType = "map">
SELECT
boardseq,userid, title,message,to_char(regdate,'YYYY-MM-DD') as regdate
,hitcount, originalfile, savedfile
FROM
BOARD
WHERE
<choose>
<when test = "searchItem=='title'">title</when>
<when test = "searchItem=='userid'">userid</when>
<when test = "searchItem=='message'">message</when>
</choose>
LIKE '%' || #{searchWord} || '%'
ORDER BY boardseq DESC
</select>
repository
public List<Board> boardList(String searchItem, String searchWord) {
Map<String,String> map = new HashMap<String,String>();
BoardMapper mapper = session.getMapper(BoardMapper.class);
map.put("searchItem",searchItem);
map.put("searchWord",searchWord);
List<Board> list = mapper.boardList(map);
return list;
}
4.로그인 했을시에만 글쓰기 가능
저번 포스트에서 로그인 시 httpsession 에 loginId를 저장했다. 그게 httpsession 에 저장되어있고, sessionScope.loginId 로 loginId를 get할 수 있다.
- <c: if test 를 이용해 sessionScope.logId가 not empty면 보이게 한다.
- ${sessionScope.loginId}
<c:if test = "${not empty sessionScope.loginId }">
<div class = "write">
<a href = "boardwrite">글쓰기</a>
</div>
</c:if>
◇ Spring 게시판 포스팅 시리즈 ◇
