Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(8) - 부트스트랩과 섬머노트를 이용한 글쓰기 페이지 만들기

이전 게시글은 여기 <<

Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(7) - ajax를 이용한 아이디 중복검사 하기

Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(7) - ajax를 이용한 아이디 중복검사 하기

이제 로그인 했을 때 글을 입력할 창을 만들 것이다.

맨 처음 화면을 먼저 구현하자. 화면은 이전처럼 부트스트랩을 이용할 것이다.

 

부트스트랩 적용 튜토리얼 포스트

Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(3) - 부트스트랩을 이용한 웹 폼 만들기

Servlet 과 JSP를 이용한(모델2 형식) 블로그 만들기(3) - 부트스트랩을 이용한 웹 폼 만들기

 

먼저 결과화면 부터 보자.

무엇이 필요할까?

텍스트를 입력할 수 있는 text 속성의 form과 장문의 글을 입력할 수 있는 textarea속성의 form이 필요하다.

text속성의 부트스트랩은,

 

https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

Bootstrap 4 Forms

여기에 맨 처음, 가장 심플한 코드를 가져오면 된다.

Stacked Form의 두 필드 중 하나를 제거해서 사용할 것이다. 그리고 텍스트 필드는,

 

https://www.w3schools.com/bootstrap4/bootstrap_forms_inputs.asp

Bootstrap 4 Input Groups

이 곳의 textarea 코드를 가져온다.

 

이제 이 코드의 id를 바꾸고 form의 name 속성을 지정해준다(name 속성을 지정하지 않으면 나중에 submit 할 때 서버로 파라미터 값을 보낼 수 없다.). submit 버튼을 구현하면 화면 구현은 완성된다.

 

-write.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../include/nav.jsp"%>
<%@ include file="../include/authentication.jsp"%>

<div class="container">

<form action="/blog/board?cmd=writeProc" method="post">
	<div class="form-group">
		<label for="title">title:</label> 
		<input type="text" class="form-control" placeholder="title" id="title" name="title">
	</div>
	<div class="form-group">
		<label for="content">content:</label>
		<textarea class="form-control" rows="5" id="summernote" name="content"></textarea>
	</div>
	<button type="submit" class="btn btn-primary">글쓰기 등록</button>
</form>
</div>

<%@ include file="../include/footer.jsp"%>

 

이제 입력받은 값을 서버로 전송할 것이다. 그렇기 때문에 form 태그에 action을 걸어준다.

이 때 form 태그 내의 body 값이 전부 서버로 이동해야하므로 매서드 속성은 "post"로 지정한다.

 

모델2의 특징인 MVC 모델에 의거해서 이 폼액션은 먼저 컨트롤러로 이동한다. 컨트롤러에 이 액션을 처리해줄 라우터를 하나 더 제작한다.

 

-boardController.java의 router 부분

	public Action router(String cmd) {
		if(cmd.equals("home")) {
			// 회원가입 페이지로 이동
			return new BoardHomeAction(); //Board의 목록
		}else if(cmd.equals("write")) {
			// 글쓰기 페이지로 이동
			return new BoardWriteAction();
		}else if(cmd.equals("writeProc")) {
			// 글쓰기 정보 넘기기
			return new BoardWriteProcAction();
		}return null;
		
	}

 

이제 라우터의 호출을 받을 액션 파일을 제작한다.

 

-BoardWriteProcAction.java

package com.cos.blog.action.board;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.cos.blog.action.Action;
import com.cos.blog.model.Board;
import com.cos.blog.model.Users;
import com.cos.blog.repository.BoardRepository;
import com.cos.blog.util.Script;

public class BoardWriteProcAction implements Action {
	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 0. 세션 유효성 검사
		HttpSession session = request.getSession();
		if (session.getAttribute("principal") == null) {
			Script.getMessage("잘못된 접근입니다.", response);
		}
		// 1. request에 title이 null인지 공백인지 확인
		if (request.getParameter("title") == null ||
        	request.getParameter("title").equals("")||
            request.getParameter("content") == null || 
            request.getParameter("content").equals("")) {
			return;
		}
		// 2. request에 title 값과 content 값 받기
		String title = request.getParameter("title");
		String content = request.getParameter("content");
		Users principal = (Users) session.getAttribute("principal");
		int userId = principal.getId();

		// 3. title 값과 content값, pricipal.getId()을 board 오브젝트에 담기
		Board board = Board.builder().userId(userId).title(title).content(content).readCount(0).build();
		// 3. Repository 연결해서 save(board) 함수 호출
		BoardRepository boardRepository = BoardRepository.getInstance();
		int result = boardRepository.save(board);

		// 4. result==1이면 성공로직(index.jsp)로 이동
		if (result == 1) {
			Script.href("게시글 등록에 성공하셨습니다.", "/blog/board?cmd=home", response);
		} else {
			// 5. result != 1이면 실패로직(history.back())
			Script.back("게시글 등록에 실패하셨습니다.", response);
		}
	}
}

 

0. 먼저 세션을 가지고 있지 않을 때 접근 할 수 없도록 세션 유효성을 검사하고(로그인 하지 않은 유저가 다음의 uri로 접근할 수 없도록),

 

1. 다음 글의 제목과 내용을 입력하지 않고는 게시글을 입력할 수 없게 유효성을 체크한다(null이나 공백값이면 return 값을 반환받고 액션이 종료됨). 

 

2. 다음 입력받을 값을 가져와야 하는데, 여기서 문제가 생긴다. 게시글은 회원이 쓰는 것이기 때문에 회원간의 구분이 필요하다. 따라서 user을 구분해줄 키를 가져와야하는데, 데이터베이스에서도 이 값을 외래키로서 참조해야한다. 어느 회원인줄 어떻게 구분할까? 어떻게 회원의 정보를 가져올까? 이것을 하기 위해 세션값을 이용한다. 앞서 principal에 setAttribute를 통해 입력했고, 이 principal에는 유저의 정보가 들어있다.

이전에 설정했던 내용들

 

- 세션에 principal이라는 이름으로 user값이 들어있음을 확인.

		if(user!=null) {
			HttpSession session=request.getSession(); //세션 메모리에 접근, 세션은 최초 요청할때 생성
			session.setAttribute("principal", user); //세션 메모리에 값 저장

따라서 세션을 불러내서, 세션 내의 principal을 받아와서 setAttribute로 값을 받은 후 getUserId로 값을 받아온다. (이 때 setAttribute는 object형으로 반환되기 때문에 반드시 User형으로 다운캐스팅 해줘야 Users.model에 접근해서 getUserId() 메서드를 사용할 수 있다.) 

 

3. 받아온 값들을 board 오브젝트에 넣는다. 이 때, lombok을 쓰고 있어서 간단하게 builder로 해결했으나, 없으면 set~()으로 해결하셔야 합니다!

 

4. 이제 오브젝트에 넣은 값을, SQL을 이용해 값을 넣자.

데이터베이스에 접근하는 파일, BoardRepository에 save 매서드를 이용하여 등록하는 로직을 만들자.

 

-BoardRepository.java 의 save 매서드

	public int save(Board board) {
		final String SQL="insert into board(id,userId,title,content,createdate) values (Board_SEQ.nextval,?,?,?,sysdate)";
		try {
			conn=DBConn.getConnection();
			pstmt = conn.prepareStatement(SQL);
			//물음표 완성하기
			pstmt.setInt(1, board.getUserId());
			pstmt.setString(2, board.getTitle());
			pstmt.setString(3, board.getContent());

	
			return pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println(TAG+"save : "+e.getMessage());
		}finally {
			DBConn.close(conn, pstmt);
		}
		
		return -1;
	}

 

getInstance를 통해 내부에 값을 넣고 숫자값을 리턴받는다.

 

5. 숫자값에 따라 이 게시글이 등록되었는지 아닌지 여부를 알리고 그에 따라 알림을 제공한다.

 

(결과 데이터베이스)

 

 

 

그러나 이 에디터의 큰 문제점이 있다. 글을 꾸밀수도, 사진이나 영상을 넣을 수도 없다. 이를 위해 수많은 에디터를 라이브러리로 사용하는데, 그 중 jsp에 적용하기 쉬운 섬머노트를 이용한다.

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

getting Started를 들어가서 샘플 코드를 이용해보자.

 

 

(반드시 바로 적용하지 말고 테스팅 파일을 만들어서 테스트 하자)

-summerNoteTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

정말 내 화면에 에디터가 나온다..!

이제 이 에디터를 내 파일에 적용시켜보자.

근데 지금 nav에 부트스트랩과 jQuery가 이용되고 있기 때문에 넣을 때 반드시 코드를 비교해서, 둘 중 높은 값을 넣고 낮은 것은 빼야만 충돌을 피할 수 있다.

또한, 코드를 보면 알 수 있지만 jQuery를 이용하기 때문에 id를 통해 값이 적용되는데, summerNote를 이용하는 id를 반드시 스크립트와 일치하도록 해야한다.

 

-SummerNote를 적용한 write.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../include/nav.jsp"%>
<%@ include file="../include/authentication.jsp"%>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<div class="container">

<form action="/blog/board?cmd=writeProc" method="post">
	<div class="form-group">
		<label for="title">title:</label> 
		<input type="text" class="form-control" placeholder="title" id="title" name="title">
	</div>
	<div class="form-group">
		<label for="content">content:</label>
		<textarea class="form-control" rows="5" id="summernote" name="content"></textarea>
	</div>
	<button type="submit" class="btn btn-primary">글쓰기 등록</button>
</form>
</div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote({
            tabsize: 2,
            height: 300
        });
    });
  </script>
<%@ include file="../include/footer.jsp"%>