스프링 프레임워크

[스프링 프레임워크] 10장 ckeditor5를 응용한 문의사항 게시판(작성, 리스트 출력)

반응형

 

ckeditor5 사용 전 파일 (create는 미리 작성해놓음)

 

 

cont_us 라는 테이블을 생성한다.

create table cont_us(
    cu_code varchar2(20),
    name varchar2(90),
    email varchar2(50),
    subject varchar2(300),
    message CLOB,
    constraint pk_cu primary key(cu_code)
);

 

 

아래의 파일들을 이용하여 진행한다.

 

결과 화면1

 

 

 

ckeditor5 사용

 

 

  • ckeditor5 파일 임포트

아래의 파일을 폴더 안에 넣는다.

경로

 

 

 

 

  • create.jsp

가장 상단에 추가

<link type="text/css" href="/resources/ckeditor5/sample/css/sample.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="/resources/ckeditor5/ckeditor.js"></script>

 

 

textarea 위에다가 div 추가

<div id="ckMessage"></div>

 

 

하단에 script 와 함께 추가

<script type="text/javascript">
ClassicEditor.create(document.querySelector('#ckMessage'),{ckfinder:{uploadUrl:'/image/upload'}})
	.then(editor=>{window.editor=editor;})
	.catch(err=>{console.error(err.stack);});
</script>

 

결과 화면2

 

 

 

  • create.jsp

가장 상단에 추가

<script type="text/javascript" src="/resources/js/jquery.min.js"></script>

 

 

script의 가장 하단에 추가

$(function(){
   //ckeditor 내용 => textarea로 복사
   $(".ck-blurred").keydown(function(){
      console.log("str : " + window.editor.getData());
      
      $("#message").val(window.editor.getData());
   });
   
   $(".ck-blurred").on("focusout",function(){
      $("#message").val(window.editor.getData());
   });
});

 

결과 화면3 : 글을 쓰면 아래에 똑같이 쳐짐

 

 

 

list 출력

 

 

ContUsController.java

하단에 추가

	/*
	요청URI : /contUs/list
	요청 파라미터 : 
	요청 방식 : get
	 */
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		log.info("list에 왔다");
		
		//forwarding : jsp
		mav.setViewName("contUs/list");
		
		return mav;
	}

 

 

결과 화면4

 

 

 

  • list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="row">
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <div class="card-tools">
               <div class="input-group input-group-sm" style="width: 150px;">
                  <input type="text" name="table_search"
                     class="form-control float-right" placeholder="Search">
                  <div class="input-group-append">
                     <button type="submit" class="btn btn-default">
                        <i class="fas fa-search"></i>
                     </button>
                  </div>
               </div>
            </div>
         </div>

         <div class="card-body table-responsive p-0">
            <table class="table table-hover text-nowrap">
               <thead>
                  <tr>
                     <th>ID</th>
                     <th>User</th>
                     <th>Date</th>
                     <th>Status</th>
                     <th>Reason</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>183</td>
                     <td>John Doe</td>
                     <td>11-7-2014</td>
                     <td><span class="tag tag-success">Approved</span></td>
                     <td>Bacon ipsum dolor sit amet salami venison chicken flank
                        fatback doner.</td>
                  </tr>
                  <tr>
                     <td>219</td>
                     <td>Alexander Pierce</td>
                     <td>11-7-2014</td>
                     <td><span class="tag tag-warning">Pending</span></td>
                     <td>Bacon ipsum dolor sit amet salami venison chicken flank
                        fatback doner.</td>
                  </tr>
                  <tr>
                     <td>657</td>
                     <td>Bob Doe</td>
                     <td>11-7-2014</td>
                     <td><span class="tag tag-primary">Approved</span></td>
                     <td>Bacon ipsum dolor sit amet salami venison chicken flank
                        fatback doner.</td>
                  </tr>
                  <tr>
                     <td>175</td>
                     <td>Mike Doe</td>
                     <td>11-7-2014</td>
                     <td><span class="tag tag-danger">Denied</span></td>
                     <td>Bacon ipsum dolor sit amet salami venison chicken flank
                        fatback doner.</td>
                  </tr>
               </tbody>
            </table>
         </div>

      </div>

   </div>
</div>

 

Dashboard 가 고정으로 출력되기에 변경한다.

 

 

mainTemplate.jsp

Dashboard 가 적힌 글 부분을 아래와 같은 식으로 수정한다.

          <div class="col-sm-6">
          	<c:if test="${title!=null}">
            	<h1 class="m-0">${title}</h1>
           	</c:if>
          	<c:if test="${title==null}">
            	<h1 class="m-0"></h1>
           	</c:if>
          </div><!-- /.col -->

 

 

 

  • list 값 출력

 

ContUsController.java

상단에 추가

@Autowired
ContUsService contUsService;

 

 

하단에 메소드 추가

/*
요청URI : /contUs/list
요청 파라미터 : 
요청 방식 : get
 */
@RequestMapping(value="/list", method=RequestMethod.GET)
public ModelAndView list(ModelAndView mav, ContUsVO contUsVO) {
	log.info("list에 왔다");
	
	//Model
	mav.addObject("title", "문의 게시판");
	
	List<ContUsVO> contUsListVO = this.contUsService.list();
	
	//forwarding : jsp
	mav.setViewName("contUs/list");
	
	return mav;
}

 

 

=> createPost의 경우 service나 dao 같은 것들을 추가하지 않았기에 코드를 전부 수정한다.

 

 

 

  • create와 list 전부 수정

ContUsController.java

package kr.or.ddit.controller;

import java.util.List;

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.servlet.ModelAndView;

import kr.or.ddit.service.ContUsService;
import kr.or.ddit.vo.ContUsVO;
import lombok.extern.slf4j.Slf4j;

@RequestMapping("/contUs")
@Slf4j
@Controller
public class ContUsController {
	
	@Autowired
	ContUsService contUsService;
	
	/*
	 요청URI : /contUs/create
	 요청파라미터 :
	 요청방식 : get
	 */
	@RequestMapping(value="/create",method=RequestMethod.GET)
	public ModelAndView create(ModelAndView mav) {
		log.info("create에 왔다");
		//View. jsp
		mav.setViewName("contUs/create");
		
		return mav;
	}
	
	/*
	요청URI : /contUs/createPost
	요청 파라미터 : {name=개똥이, email=test@test.com, subject=궁금해요, message=궁금한게 궁금해요}
	요청 방식 : post
	 */
	@RequestMapping(value="/createPost", method=RequestMethod.POST)
	public ModelAndView createPost(ContUsVO contUsVO,
				ModelAndView mav) {
		log.info("createPost->contUsVO : " + contUsVO);
		
		// CONT_US 테이블에 insert
		int result = this.contUsService.createPost(contUsVO);
		
		// 목록으로 이동
		mav.setViewName("redirect:/contUs/list");
		
		return mav;
	}
	
	/*
	요청URI : /contUs/list
	요청 파라미터 : 
	요청 방식 : get
	 */
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		log.info("list에 왔다");
		
		//Model
		mav.addObject("title", "문의 게시판");
		
		List<ContUsVO> contUsVOList = this.contUsService.list();
		mav.addObject("contUsVOList", contUsVOList);
		log.info("contUsVOList : " + contUsVOList);
		
		//forwarding : jsp
		mav.setViewName("contUs/list");
		
		return mav;
	}
}

 

 

ContUsService.java

package kr.or.ddit.service;

import java.util.List;

import kr.or.ddit.vo.ContUsVO;

public interface ContUsService {

	public int createPost(ContUsVO contUsVO);
	
	// 목록 출력
	public List<ContUsVO> list();
}

 

 

ContUsServiceImpl.java

package kr.or.ddit.service.impl;

import java.util.List;

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

import kr.or.ddit.dao.ContUsDao;
import kr.or.ddit.service.ContUsService;
import kr.or.ddit.vo.ContUsVO;

@Service
public class ContUsServiceImpl implements ContUsService {

	@Autowired
	ContUsDao contUsDao;
	
	@Override
	public int createPost(ContUsVO contUsVO) {
		return this.contUsDao.createPost(contUsVO);
	}
	
	@Override
	public List<ContUsVO> list() {
		return this.contUsDao.list();
	}
	
}

 

 

ContUsDao.java

package kr.or.ddit.dao;

import java.util.List;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import kr.or.ddit.vo.ContUsVO;

@Repository
public class ContUsDao {
	
	@Autowired
	SqlSessionTemplate sqlSessionTemplate;
	
	public int createPost(ContUsVO contUsVO) {
		return this.sqlSessionTemplate.insert("contUs.createPost", contUsVO);
	}

	public List<ContUsVO>  list() {
		return this.sqlSessionTemplate.selectList("contUs.list");
	}

}

 

 

contUs_SQL.xml

src/main/resources/sqlmap 안에 추가로 생성한다.

 

<?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="contUs">
	<insert id="createPost" parameterType="contUsVO">
		<!-- CU001 
		전 : ContUsVO(cuCode=null, name=개똥이, email=test@test.com
		   , subject=제목글, message=<p>ㄴㅇㄻㄴㅇㄹㄴㄹㅇㄴㅇㄹㅇㄴㅁㄹㅇㄴㄻ</p>)
		후 : ContUsVO(cuCode=CU001, name=개똥이, email=test@test.com
		   , subject=제목글, message=<p>ㄴㅇㄻㄴㅇㄹㄴㄹㅇㄴㅇㄹㅇㄴㅁㄹㅇㄴㄻ</p>)
		-->
		<selectKey resultType="String" order="BEFORE" keyProperty="cuCode">
			SELECT NVL(SUBSTR(MAX(CU_CODE),1,2)
	             		|| TRIM(TO_CHAR(SUBSTR(MAX(CU_CODE),3) + 1,'000')),'CU001')
			FROM CONT_US
		</selectKey>
		
		INSERT INTO CONT_US(CU_CODE, NAME, EMAIL, SUBJECT, MESSAGE)
		VALUES(#{cuCode}, #{name}, #{email}, #{subject}, #{message})
	</insert>
	
	<select id="list" resultType="contUsVO">
		SELECT CU_CODE, NAME, EMAIL, SUBJECT, MESSAGE
		FROM CONT_US
	</select>
</mapper>

 

 

결과 화면5 : 문의 하기 클릭 시 list로 이동됨

 

결과 화면6

 

 

 

  • 데이터 삽입
/
--서울에 갈땐 걸어간다/뻐스타고간다 => 빠르니까, 트래픽이 낮아짐
--뻐스타(Package, User Function, Stored Procedure, Trigger, Anonymous Block)
--PL/SQL
DECLARE
BEGIN
    -- I : 자동 선언 정수형 변수
    FOR I IN 10..127 LOOP
        INSERT INTO CONT_US(CU_CODE,NAME,EMAIL,SUBJECT,MESSAGE)
        VALUES(
            (SELECT NVL(SUBSTR(MAX(CU_CODE),1,2)|| TRIM(TO_CHAR(SUBSTR(MAX(CU_CODE),3) + 1,'000')),'CU001')
            FROM CONT_US), '개똥이'||I, 'test@test.com', '제목'||I, '내용'||I
        );
    END LOOP;
    
    --commit;
    EXCEPTION
        WHEN OTHERS THEN
            DBMS_OUTPUT.PUT_LINE('ERR:'||SQLERRM);
END;
/
COMMIT;

 

 

반응형

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 12장 book 파일을 ajax로 변경  (0) 2024.04.30
[스프링 프레임워크] 11장 컨트롤러 요청 매핑  (0) 2024.04.29
[스프링 프레임워크] 9장 기존 파일을 타일즈를 이용하여 분리  (0) 2024.04.26
[스프링 프레임워크] 8장 타일즈  (0) 2024.04.26
[스프링 프레임워크] 6장 도서 쇼핑몰 delete  (0) 2024.04.24

티스토리툴바