반응형

안녕하세요 무작정 일단 따라 해 보는 Spring 커뮤니티 만들기 4탄 시작합니다.

 

환경

Eclipse 2019-9 Jee
JDK 1.8_231
Apache Tomcat 8.5.47
MariaDB 10.4.10
MyBatis 3.2.2
+ JSTL 1.2
+ jackson 2.9.4

오늘의 할 일

1.URL 8080,프로젝트 명 제거
2.JSTL,EL 설정
3.게시판 CRUD 기능 만들기

 

시작하기에 앞서 지금 상태에서 Run on Server 하시면

http://localhost:8080/springEx01/ 이렇게 8080이랑 springEx01이라는 프로젝트명이 붙는걸 보시게 되는데요

이걸 안보이게 하려면 설정을 조금 해줘야합니다.

 

 

8080 포트와 프로젝트명 URL에서 없애기

이클립스 하단 Servers 클릭 -> Tomcat v8.5 Server at localhost 더블 클릭 -> Overview 클릭 -> HTTP/1.1 PortNumber 8080에서 80으로 변경


그리고 저장 바로 Modules 클릭 -> 해당 프로젝트 클릭 Edit… 버튼 클릭 -> Path 프로젝트명 지우고 "/" 만 남기고 저장 "/" 남겨야 합니다.

짜잔! URL 깔끔해진 모습

index.jsp a 태그 href <a href="/view/dashboard">대시보드 보러가기</a> 이렇게 변경해줍니다.

 

현재 인덱스 페이지와 대시보드 페이지만 존재하고 있는데요.

일단 대시보드 페이지에 게시판 리스트를 보여주고 작성,수정,삭제는 다른 페이지에서 진행하겠습니다.

로그인은 다음 5장에서 다룹니다.

 

먼저 JSP에서 Java 코드<%= %> 쓴다면 가독성이 매우 떨어지므로 저희는 JSTL & EL ${} 이라는걸 사용하겠습니다.

 

새로운 라이브러리를 추가할 ? 정답! pom.xml

pom.xml 디펜던시<dependency> 추가

<!-- jstl dependecy -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>

<dependency> 추가 후

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 문구를 JSTL & EL 태그를 사용 할

JSP 파일 최상단에 넣어주면 되는데요. Prefix="c"말고도 여러 개가 있으므로

include 전용 JSP 만들어줍니다.

 

 

views -> jstlHeader.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/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

 

이제 JSTL,EL 태그를 사용할 JSP 페이지 <!DOCTYPE html> 위에 넣어주시면 됩니다.

<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>

 

그럼 준비가 끝났으니 본격적으로 게시판 만들기 CRUD 시작합니다.

먼저 CRUD R(read)부터 만들겠습니다.

 

대시보드에 들어가면 제일 먼저 게시판 리스트가 보이도록 만들 예정입니다.

리스트를 보여주려면 먼저 DB에서 데이터를 Select 해와야겠죠


ViewController.java

@RequestMapping("view/dashboard") 
public ModelAndView dashboard() { 
List result = boardService.getBoardList();  
ModelAndView mav = new ModelAndView(); 

mav.addObject("result",result); 

return mav; 
}

BoardService.java

List getBoardList();

BoardServiceImpl.java

public List<Board> getBoardList() {
return boardDAO.getBoardList(); }

BoardDAO.java

public List<Board> getBoardList() {	
return sqlSession.selectList("getBoardList"); }

board-Mapper.xml

<select id="getBoardList" resultType="board">
SELECT * FROM board order BY id DESC;
</select>

 

원래 작성 순서는 Mapper -> DAO -> Service -> Controller 순이지만 일단 익숙지 않은 분들을 위해 Controller부터 작성하였습니다.

dashboard.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dashboard</title>
<style>
  table {
    width: 100%;
    border: 1px solid #444444;
  }
  th, td {
    border: 1px solid #444444;
  }
</style>
</head>
<body>
<p>dashboard</p>
<div>게시글 리스트</div>
<table>
<thead><tr>
<td>제목</td>
<td>조회수</td>
<td>좋아요</td>
<td>첨부파일</td>
<td>글 작성 날짜</td>
</tr></thead>

<c:forEach var="b" items="${result }">
<fmt:formatDate value="${b.create_time}" pattern="yyyy-MM-dd HH:MM:ss" var="dateFormat_cr"/>
<tr>
<td>${b.subject }</td>
<td>${b.views }</td>
<td>${b.likes }</td>
<td>${b.attachments }</td>
<td>${dateFormat_cr }</td>
</tr>
</c:forEach>
</table>
<div> <a href="/view/boardwrite">글 작성하기</a></div>
</body>
</html>

 

UI는 아직 허접하지만 일단 게시판 리스트가 잘 출력되는 모습입니다.

이제 글 작성하기 링크를 누르면 글을 작성할 수 있게 C(Create)를 만들어봅시다.


 

먼저 작성을 다 한 후 jQuery ajax를 이용한 POST 방식을 사용할 겁니다.

views -> view -> boardwrite.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<meta charset="UTF-8">
<title>글 작성</title>
<script type="text/javascript">

function boardValidation(){
	
	var subject = $("#subject").val();
	var content = $("#content").val();
	
	if(!subject){
		alert("제목 입력은 필수입니다.");
		$("#subject").focus();
		return false;
	}else if(!content){
		alert("내용 입력은 필수 입니다.");
		$("#content").focus();
		return false;
	}else {
		boardWrite(subject,content);
	}
	
}

function boardWrite(sub,con){
	
	$.ajax({
		
		url : "/jquery/boardwrite",
		type:'POST',
		data : {
			subject : sub,
			context : con
		},
		success:function(data){
			if(data == 1){
				alert("글 등록이 완료되었습니다.");
				location.href="/view/dashboard";
			}else {
				alert("글 등록 실패");
			}
		},error:function(){
			console.log("error");
		}
		
	})
	
}

</script>
</head>
<body>
<form>
<table>
        <caption>게시판 글쓰기 </caption>
    <tbody>
            <tr>
                <th>제목: </th>
                <td><input type="text" placeholder="제목을 입력하세요. " id="subject"/></td>
            </tr>
            <tr>
                <th>내용: </th>
                <td><textarea cols="30" rows="10" placeholder="내용을 입력하세요. " id="content"></textarea></td>
            </tr>
           <!--  <tr>
                <th>첨부파일: </th>
                <td><input type="text" placeholder="파일을 선택하세요. " name="filename"/></td>
            </tr> -->
            <tr>
                <td colspan="2">
                    <input type="button" value="등록" onclick="boardValidation()"/>
                    <input type="button" value="뒤로" onclick="javascript:location.href='dashboard'"/>
                </td>
            </tr>
    </tbody>
</table>
</form>
</body>
</html>

jQuery 플러그인이 필요하겠죠 저희는 *CDN 방식으로 받겠습니다.

boardwrite.jsp <head></head>안에 넣어줍니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

*CDN :콘텐츠 전송 네트워크(Content delivery network)는 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다. 인터넷 서비스 제공자에 직접 연결되어 데이터를 전송하므로, 콘텐츠 병목을 피할 수 있는 장점이 있다


 

하지만 Spring 입장에선 boardwrite.jsp를 못 찾겠죠?

무조건 jsp를 view로 등록할 땐 Controller에서 받아줘야 합니다.

 

ViewController.java

@RequestMapping(value="view/boardwrite",method = RequestMethod.GET)
	public ModelAndView boardwrite() {
		ModelAndView mav = new ModelAndView();
		return mav; }

그리고 위에 boardWrite() 메서드를 보시면 URL를 /jquery/boardwrite로 보내고 있죠

저희는 Controller의 용도를 나눠서 가독성이 좋도록 할 겁니다.

 

ViewController.java : View를 보여주는(연결해주는) Controller

JqueryController.java : jquery + ajax를 이용한 메서드들

 

자 그럼 JqueryController.java를 만들어야겠죠

src/main/java -> controller -> JqueryController.java 생성

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.company01.springEx01.logic.Board;
import com.company01.springEx01.service.BoardService;

@Controller
@RequestMapping("jquery/*")
public class JqueryController {

	@Autowired
	BoardService boardService;
	
	@RequestMapping(value="jquery/boardwrite",method = RequestMethod.POST)
	@ResponseBody
	public int boardwrite(Board board) {
		int result = 0; 
		result = boardService.boardwrite(board); 
		return result;
	}
	
}

@ResponseBody : json으로 응답해주는 어노테이션

 

여기서 보면 boardwrite 메서드의 리턴 타입이 int라고 돼있는데

어라? 저는 int로 리턴하면 String or Object로 리턴하라고 에러가 나던데요? 네 맞습니다.

 

원래 스프링은 Model 객체를 리턴해 "view"를 보여주려고 하는 성질이 존재하는데,

갑자기 int를 리턴해버리면 처음부터 형태가 맞지 않다며 예외를 뱉습니다.

 

그럼 아예 값을 리턴해주는 JSON 형태로 던져주면 어떨까요? 네 바로 그 작업을 하는 것입니다.

 

 

pom.xml

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.4</version>
</dependency>

BoardService.java

int boardwrite(Board board);

BoardServiceImpl.java

@Override
public int boardwrite(Board board) {
return boardDAO.boardwrite(board);}

BoardDAO.java

public int boardwrite(Board board) {
return sqlSession.insert("boardwrite",board);
}

board-Mapper.xml

<insert id="boardwrite">
insert into board (id,subject,context,attachments,likes,views,create_time,update_time) 
values(#{id},#{subject},#{context},#{attachments},#{likes},#{views},now(),null);
</insert>

만들었으니 한번 해볼까요?

대시보드에 있는 글 작성하기 버튼(링크)을 클릭합니다.


글 작성 UI

일단 첨부파일은 로직이 조금 필요하므로 나중에 하고 제목, 내용만 입력하도록 하였습니다.


글 작성 후 등록


대시보드

짠! 잘 들어왔죠 이제 저 글 제목을 클릭하면 내용을 볼 수 있고, 조회수가 1씩 증가하도록 해보겠습니다.


dashboard.jsp

제목 부분에 a 태그 링크 추가

<td><a href="/view/boardDetail?id=${b.id }">${b.subject }</a></td>

/view/boardDetail 페이지가 없죠? 새로운 페이지 추가 Controller는 뭐였죠??

네 맞습니다!!

ViewController.java

@RequestMapping(value="view/boardDetail",method = RequestMethod.GET)
	public ModelAndView boardDetail(int id) {
		boardService.viewsUpdate(id);
		Board result = boardService.getBoardDetail(id);
		ModelAndView mav = new ModelAndView();
		mav.addObject("result",result);
		return mav;
	}

매개변수 int id : get으로 넘어오는 "id" 매개변수를 받는다.

viewUpdate : 조회수 추가 메서드

getBoardDetail : 특정 글 하나의 데이터를 조회하는 메서드

 

views -> view -> boardDetail.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jstlHeader.jsp" %>
<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
<title>글 내용</title>
<style>
  table {
    width: 100%;
    border: 1px solid #444444;
  }
  th, td {
    border: 1px solid #444444;
  }
</style>
<script type="text/javascript">
function boardDelete(){
	
	
}

function boardUpdate(){
	
	
}
</script>
</head>
<body>
<form>
<table>
        <caption>게시판 글 내용 </caption>
    <tbody>
            <tr>
                <th>제목: </th>
                <td>${result.subject}</td>
            </tr>
            <tr>
                <th>내용: </th>
                <td>${result.context}</td>
            </tr>
            
            <tr>
                <th>조회수: </th>
                <td>${result.views}</td>
            </tr>
            <tr>
                <th>좋아요: </th>
                <td>${result.likes}</td>
         	</tr>
         	
            <tr>
                <td colspan="2">
                    <input type="button" value="수정" onclick="boardDelete()"/>
                    <input type="button" value="삭제" onclick="boardUpdate()"/>
                    <input type="button" value="목록보기" onclick="javascript:location.href='dashboard'"/>
                </td>
            </tr>
    </tbody>
</table>
</form>
</body>
</html>

 

BoardService.java

Board getBoardDetail(int id);
void viewsUpdate(int id);

BoardServiceImpl.java

@Override
public Board getBoardDetail(int id) {
return boardDAO.getBoardDetail(id);}

@Override
public void viewsUpdate(int id) {
boardDAO.viewUpdate(id);}

BoardDAO.java

public Board getBoardDetail(int id) {
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("id",id);
		return sqlSession.selectOne("getBoardDetail",map);
	}

public void viewUpdate(int id) {
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("id",id);
		sqlSession.update("viewUpdate", map);
	}

board-Mapper.xml

<select id="getBoardDetail" resultType="board">
SELECT * FROM board where id = #{id};
</select>

<!-- update -->
<update id="viewUpdate">
UPDATE board SET views = views+1 WHERE id = #{id}
</update>

대시보드

제목에 클릭할 수 있는 링크가 생겼습니다.


글 내용(boardDetail)

내용 페이지에서 새로고침을 하게 되면 조회수가 1씩 증가하는 걸 볼 수 있습니다.

 

삭제와 수정은 아무나 하면 안 되기 때문에 다음 글인 로그인 구현하기를 하고 진행하도록 하겠습니다.

귀찮아서 그런 거 아닙니다.

그럼 다음은 회원가입 그리고 로그인 후 세션 저장까지 해보겠습니다.


최종 Project Explorer

 

반응형

+ Recent posts