09009

[Spring] 예제1 - 게시판 구현 본문

Back-End/Spring
[Spring] 예제1 - 게시판 구현
09009

시나리오 참고: https://velog.io/@s001lec

레이아웃 잡을 때 br 쓰면 안된다.

HTML5에서는 table 태그를 사용하는 것을 추천하지 않는다. 이번 예제에서는 일단은 사용한다.

 

ctrl + m : 화면 전체보기, 

다시 누르면 돌아온다.

 

게시판 화면 테스트

✍ views/board/mainPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<c:choose> 
	<c:when test="${!empty sessionUser}">
		${sessionUser.nickname}님 환영합니다~!! <a href="../member/logoutProcess">로그아웃</a>
	</c:when>
	<c:otherwise>
		비회원으로 접근하였습니다. <a href="../member/loginPage">로그인</a>
	</c:otherwise>
</c:choose>

<h1> 자유 게시판 </h1>

<br>

<table border="1">
	<tr>
		<td>글번호</td>
		<td>제목</td>
		<td>조회수</td>
		<td>작성자</td>
		<td>작성일</td>
	</tr>
	<tr>
		<td>1</td>
		<td>안녕하세요-!!</td>
		<td>7</td>
		<td>한조</td>
		<td>23.05.17</td>
	</tr>
	<tr>
		<td>2</td>
		<td>안녕하세요-!!</td>
		<td>1</td>
		<td>메르시</td>
		<td>23.05.17</td>
	</tr>	
	
</table>

<br>

<br>
<%--  로그인 하였으면 글쓰기 버튼, 로그인하지 않았으면 글쓰기 버튼이 나오지 않도록 설계한다. -> c:if문 작성 --%>
<c:if  test="${!empty sessionUser}">
	<a href="./writeContentPage">글쓰기</a>
</c:if>
<br>

</body>
</html>

참고로 jsp는 수정하고 저장하면 서버 재가동을 하지 않아도 된다. (f5 클릭하면 됨)

 

글쓰기 작업을 수행하려면 DB가 필요하다.

사람들이 글을 작성할 때마다 DB에 insert되어야 하기 때문이다.

 

게시판 테이블 생성

tip: 대리키는 생성하는 것이 좋다. 언제든지 확장이 가능하기 때문에

 

회원 전용 사이트로 설계할 것이므로 회원만 게시판에 글을 작성할 수 있도록 해야 한다.

대리 키는 항상 외부 테이블의 foreign key가 될 것이다.

 

회원 테이블과 게시판 테이블의 관계 설정

한 명의 회원은 여러 개의 글을 작성할 수 있어요. (o)

한 개의 게시글을 여러 회원이 같이 작성할 수 있나요? (x)

  → 회원(fp_member)과 게시판(fp_board)은 1:N 관계 (식별 관계 설정)

회원이어도 게시판에 글을 작성하지 않을 수 있어요.  → 없거나 한 개 또는 여러 개

NOT NULL과 Foreign key 제약조건은 일단 설정하지 않도록 한다.

 

fp_board 테이블

-- 게시판 T
DROP TABLE fp_board;
CREATE TABLE fp_board(
  id NUMBER PRIMARY KEY,
  member_id NUMBER,
  title VARCHAR2(400),
  content VARCHAR2(4000),
  read_count NUMBER,
  reg_date DATE
);

DROP SEQUENCE fp_board_seq;
CREATE SEQUENCE fp_board_seq;

 

위와 같이 테이블을 정의한 후 DTO를 생성하는 순서로 작업을 진행한다.

 

✍ dto\BoardDto.java

package com.ja.finalproject.dto;

import java.util.Date;

public class BoardDto {
	private int id;
	private int member_id;
	private String title;
	private String content;
	private int read_count;
	private Date reg_date;
	
	public BoardDto() {
		super();
	}

	public BoardDto(int id, int member_id, String title, String content, int read_count, Date reg_date) {
		super();
		this.id = id;
		this.member_id = member_id;
		this.title = title;
		this.content = content;
		this.read_count = read_count;
		this.reg_date = reg_date;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public int getMember_id() {
		return member_id;
	}

	public void setMember_id(int member_id) {
		this.member_id = member_id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public int getRead_count() {
		return read_count;
	}

	public void setRead_count(int read_count) {
		this.read_count = read_count;
	}

	public Date getReg_date() {
		return reg_date;
	}

	public void setReg_date(Date reg_date) {
		this.reg_date = reg_date;
	}
	
}

게시판 테이블과 DTO를 생성하였다.

이제 메인 페이지에서 글쓰기 버튼을 누르면 입력 양식이 나오도록 설계하여야 한다.

→ controller에 RequestMapping 설정  → jsp 페이지 제작

 

✍ BoardController.java

	@RequestMapping("writeContentPage")
	public String writeContentPage() {
		return "board/writeContentPage";
	}

게시판 글쓰기 페이지 만들기

✍ views/board/writeContentPage.jsp

내용은 한 줄이 아닌 여러 줄 작성할 수 있어야 하므로 입력 양식이 input 태그가 아닌 textarea 태그를 사용한다.

<%@ 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>
<h1>게시글 쓰기</h1>

<form action="">
	작성자 : ${sessionUser.nickname} <br>
	제목 : <input type="text"><br>
	내용 : <br>
	<textarea rows="10" cols="60"></textarea>
	<br>
	<button>등록</button>
</form>

</body>
</html>

 

로그인하였을 때, 위 화면에서 글쓰기 버튼을 클릭하면 아래와 같은 화면이 출력된다.

 

그런데 로그인하지 않은 상태에서도 아래 페이지를 request하면 접근이 가능한 문제가 있다.

이러한 문제는 이번 예제에서는 넘어가고 2차 예제에서 다루도록 하겠다.

*Tip

파라미터를 받아서 실행시키는 구조는 process로 명명한다.

 

코드 수정

✍ views/board/writeContentPage.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>
<h1>게시글 쓰기</h1>

<form action="./writeContentProcess" method="post">
	작성자 : ${sessionUser.nickname} <br>
	제목 : <input type="text" name="title"><br>
	내용 : <br>
	<textarea rows="10" cols="60" name="content"></textarea>
	<br>
	<button>등록</button>
</form>

</body>
</html>

✍ BoardController.java

코드 추가

	@RequestMapping("writeContentProcess")
	public String writeContentProcess(HttpSession session, BoardDto params) {
		MemberDto sessionUser = (MemberDto) session.getAttribute("sessionUser"); // key로 값을 뽑아온다.
		int memberId = sessionUser.getId(); // 로그인한 회원 아이디 추출
		params.setMember_id(memberId);
		
		return "redirect:./board/mainPage";
	}

받아온 parameter (BoardDto params)에는 제목과 내용밖에 없다.

로그인한 사람의 아이디도 받아와야 한다. → 로그인을 하면 회원 정보가 세션 저장공간에 저장된다.

→ 세션에서 값을 받아와야 한다.

회원에 대한 정보는 서버에서 가져와야 한다. (ex 세션)

 

쿼리 간단히 작성

이제 insert문을 실행(게시글 등록)할 코드를 작성하면 된다.

우선 서비스부터 생성하자.

 

✍ BoardServiceImpl.java

package com.ja.finalproject.board.service;

import org.springframework.stereotype.Service;

import com.ja.finalproject.dto.BoardDto;

@Service
public class BoardServiceImpl {

	public void writeContent(BoardDto boardDto) {
			
			
	}
}

Mapper 생성

인터페이스 생성 - xml 생성 순서로 진행

 

주의사항: 패키지명 

✍ root-context.xml (주의사항)

<context:component-scan base-package="com.ja.finalproject.*.service" />

<mybatis-spring:scan base-package="com.ja.finalproject.*.mapper"/>

 

인터페이스 생성

✍ BoardSqlMapper.java

package com.ja.finalproject.board.mapper;

import com.ja.finalproject.dto.BoardDto;

public interface BoardSqlMapper {
	
	public void insert(BoardDto boardDto);

}

xml 생성 후 매핑될 쿼리를 작성한다.

xml 생성

✍ mapper\board\BoardSqlMapper.xml 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.ja.finalproject.board.mapper.BoardSqlMapper">

	<insert id="insert">
	INSERT INTO fp_board VALUES(
	  fp_board_seq.nextval,
	  #{member_id},
	  #{title},
	  #{content},
	  0, 
	  SYSDATE
	)	
	</insert>

</mapper>

✍ BoardServiceImpl.java

package com.ja.finalproject.board.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ja.finalproject.board.mapper.BoardSqlMapper;
import com.ja.finalproject.dto.BoardDto;

@Service
public class BoardServiceImpl {
		
	 	@Autowired
		private BoardSqlMapper boardSqlMapper;
	 	
		public void writeContent(BoardDto boardDto) {
			boardSqlMapper.insert(boardDto);
			
		}
}

controller에 코드 추가

	@Autowired
	private BoardServiceImpl boardService;

✍ BoardController.java

package com.ja.finalproject.board.controller;

import javax.servlet.http.HttpSession;

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

import com.ja.finalproject.board.service.BoardServiceImpl;
import com.ja.finalproject.dto.BoardDto;
import com.ja.finalproject.dto.MemberDto;

@Controller
@RequestMapping("/board/*")
public class BoardController {
	
	@Autowired
	private BoardServiceImpl boardService;
	
	@RequestMapping("mainPage")
	public String mainPage() {
		return "board/mainPage";
	}
	
	@RequestMapping("writeContentPage")
	public String writeContentPage() {
		return "board/writeContentPage";
	}
	
	@RequestMapping("writeContentProcess")
	public String writeContentProcess(HttpSession session, BoardDto params) {
		 MemberDto sessionUser = (MemberDto) session.getAttribute("sessionUser"); // key로 값을 뽑아온다.
		 
		int memberId = sessionUser.getId(); // 로그인한 회원 아이디 추출
		params.setMember_id(memberId);
		
		boardService.writeContent(params);
		
		return "redirect:./board/mainPage";
	}
	
	
}

실행 확인

로그인

글쓰기 버튼 클릭 후 글쓰기 등록

게시글을 등록하면 메인 페이지로 이동

DB에 INSERT되었는지 확인

아직 게시글 확인을 하였을 때 조회수를 추가하는 것과

게시글을 추가하였을 때 화면에 추가한 게시글 리스트를 출력하는 작업은 수행하지 않았다.

'Back-End > Spring' 카테고리의 다른 글

[Spring] 예제1 - 게시글 상세보기  (0) 2023.05.17
[Spring] 예제1 - 게시글 목록 출력하기  (0) 2023.05.17
[Spring] 예제1 - 메인 페이지 생성, 로그아웃 처리  (0) 2023.05.16
[Spring] 예제1 - 로그인 페이지 동작 코드 수정  (0) 2023.05.16
[Spring] 예제1 - 회원가입 구현  (0) 2023.05.16
'Back-End/Spring' Related Articles more
Comments