설 연휴가 시작 되었습니다. 모두 새해 복 많이 받으세요 ~~~~~


오늘은 게시판 글 작성하기입니다.


제목, 내용을 입력하고 데이터베이스에 저장하기 입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
CREATE TABLE `tbl_notice` (
    `nno` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'pk',
    `ntitle` VARCHAR(200) NULL DEFAULT NULL COMMENT '제목',
    `ncontent` TEXT NULL DEFAULT NULL COMMENT '내용',
    `nwriter` VARCHAR(50) NULL DEFAULT NULL COMMENT '작성자',
    `nrdate` TIMESTAMP NULL DEFAULT '',
    `nviewcnt` INT(11) NULL DEFAULT '',
    `nisdelete` CHAR(1) NULL DEFAULT 'N' COMMENT '삭제여부',
    PRIMARY KEY (`nno`)
)
cs


테이블을 이렇게 생성해주세요 


JSP 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                  
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <form id="boardFrm" name="boardFrm" action="/board/boardSave.do" method="post">
                        <div class="row form-group">
                            <label class="col-lg-2">제목</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" id="ntitle" name="ntitle" min="1" max="3">
                             </div>
                        </div>
                           <div class="row form-group">
                           <label class="col-lg-2">내용</label>
                           <div class="col-lg-8">
                               <textarea class="form-control" id="ncontent" name="ncontent"></textarea>
                           </div>
                       </div>
                  </form>
                       <button class="btn btn-outline btn-info" onclick="fn_MoveToUrl('/board/boardSave.do','저장')">저장하기</button>
                          <button class="btn btn-outline btn-primary" onclick="location.href='/board/boardList.do'">리스트</button>
                </div>
            </div>
        </div>
    </div>
</div>
cs



Contoller

1
2
3
4
5
6
7
8
9
10
11
12
    @RequestMapping(value="/boardWrite.do", method=RequestMethod.GET)
    public String boardWrite() {
        return "board/boardwrite";
    }
    
    @RequestMapping(value="/boardSave.do", method=RequestMethod.POST)
     public String boardSave(BoardVO boardVO) {
        
        service.boardSave(boardVO);
        
        return "redirect:boardList.do";
    }
cs


우선 게시판 작성 화면을 띄여줄 boardWrite.do 

저장처리를 할 boardSave.do 


이제 Service/DAO단은 생략하겠습니다.  :D (앞부분 부터 보셨다면 이제 익술해지셨으리라ㅎㅎㅎ)

이후에 게시판 작성과, 수정? 한번에 처리하기 에서 서비스단이랑 DAO단은 다시 다루겠으니

이번엔 생략하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
<insert id="boardSave">
            INSERT INTO tbl_notice(
                ntitle,
                ncontent,
                nwriter
            )VALUES(
                #{ntitle},
                #{ncontent},
                '관리자'
            )
                
</insert>
cs


스크립트 버튼 이벤트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
    function fn_MoveToUrl(url,msg){
        var ntitle = $("#ntitle").val();
        var ncontent = $("#ncontent").val();
        
        if(ntitle.length == 0){
             alert("제목을 입력해 주세요");  
            $("#ntitle").focus();
            return false;
    
        }
        
        if(ncontent.length == 0){
             alert("내용을 입력해 주세요");  
            $("#ncontent").focus();
            return false;
        }
        
        if(msg){
            if(confirm(msg + "하시겠습니까???"))
            $("#boardFrm").submit();
            return;
        }
        location.href=url;
    }
</script>
cs


우선 공백 확인을 하고 

fn_MoveToUrl('/board/boardSave.do','저장')

fn_MoveToUrl 에 Url과 msg 두개의 두개의 매개변수를 념겨줍니다.

그럼 msg = 저장 + 하시겠습니까 의 alert메시지를 확인할 수 있어 편리합니다. 사실 따로 빼서 관리하면 

fn_MoveToUrl 를 써서 수정하시겠습니까 ? 삭제하시겠습니까? 자장하시겠습니까 ? 등 

메시지와 url을 사용할 수 있어 엄청 편합니다. ~ 


다음엔 게시글 상세조회 처리에대하여 올리겟습니다~


저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

6. 스프링 기본 게시판 만들기(리스트출력하기)  (3) 2018.02.13
5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07

주말에 지방에 잠시다녀와 해산물을 좀 먹었더니 ㅠㅠ 장염에 걸려 조금 늦게 올렸습니다. ~ 

오늘은 아주 기본적인 게시판(공지사항) 만들기에대해 작성하겠습니다.


우선 게시판 폼을 디자인합니다~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>boardList</title>
</head>
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                      <button type="button" class="btn btn-outline btn-primary pull-right">
                          <i class="fa fa-edit fa-fw"></i> 공지사항 작성
                      </button>
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No.1</th>
                                <th>제목</th>
                                <th>작성자</th>
                                <th>작성일</th>
                                <th>조회수</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>제목</td>
                                <td>작성자</td>
                                <td>작성일</td>
                                <td>조회수</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
cs


VO


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//pk
    private Integer nno;
    //  제목
    private String ntitle;
    //  내용
    private String ncontent;
    //  작성자
    private String nwriter;
    //  작성일
    private Date nrdate;
    //  조회수
    private Integer nviewcnt;
    //  삭제여부
    private String nisdelete;
 
getter/setter ...
 
 
cs

저같은 경우에는 nrdate를 Date 타입으로 받았습니다.

이럴경우 

작성일 타입이 저렇게 출력이 됩니다 . 정상적으로 2018-02-13 21:04 이런식으로 출력하기 위해서는 

화변단에서 패턴을 사용해서 처리해야합니다.


1
2
3
4
5
6
7
8
9
10
11
12
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
//jstl 추가
 
 <c:forEach items="${list}" var="boardVO">
    <tr>
      <td>${boardVO.nno}</td>
      <td>${boardVO.ntitle}</td>
      <td>${boardVO.nwriter}</td>
      <td><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${boardVO.nrdate}"/></td>
      <td>${boardVO.nviewcnt}</td>
     </tr>
</c:forEach>
cs

JSTL을 추가하고 fmt:formDate pattern을 사용해서 출력해야만 정상적으로 출력이 됩니다. 

또다른 방법은 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
//pk
    private Integer nno;
    //  제목
    private String ntitle;
    //  내용
    private String ncontent;
    //  작성자
    private String nwriter;
    //  작성일
    private String nrdate;
    //  조회수
    private Integer nviewcnt;
    //  삭제여부
    private String nisdelete;
cs

nrdate를 String 타입으로 바꾸고 쿼리에서 처리하는 방법입니다.


1
2
3
4
SELECT
    nno,ntitle,ncontent,nwriter,date_format(nrdate,'%Y-%m-%d') nrdate,nviewcnt,nisdelete
FROM 
    tbl_notice
cs


date_format(nrdate,'%Y-%m-%d') nrdate 이렇게 쿼리에서 처리하는 방법또한 있으니 상황에 맞게 쓰시면 됩니다.


Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Controller
@RequestMapping("/board/*")
public class BoardCotroller {
    
    @Inject
    private BoardService service;
 
    @RequestMapping(value="/boardList.do", method=RequestMethod.GET)
    public String boardList(BoardVO boardVO, Model model) {
        
        List<BoardVO> list = service.boardList(boardVO);
        model.addAttribute("list", list);
        
        return "board/boardlist";
    }
    
cs

리스트에 넣어서 화면으로 날려주고



Service


1
2
3
4
5
public interface BoardService {
    //게시판 리스트
    public List<BoardVO> boardList(BoardVO boardVO);
 
}
cs

ServiceImpl

1
2
3
4
5
6
7
8
9
10
@Service
public class BoardServiceImpl implements BoardService{
 
    @Inject
    private BoardDAO dao;
 
    @Override
    public List<BoardVO> boardList(BoardVO boardVO) {
        return dao.boardList(boardVO);
    }
cs


DAO

1
2
3
4
5
6
 
public interface BoardDAO {
    //게시판 리스트
    public List<BoardVO> boardList(BoardVO boardVO);
 
}
cs


DAOImpl

1
2
3
4
5
6
7
8
9
10
11
@Repository
public class BoardDAOImpl implements BoardDAO{
 
    @Inject
    private SqlSession session;
 
    @Override
    public List<BoardVO> boardList(BoardVO boardVO) {
        return session.selectList("boardList",boardVO);
    }
 
cs


BoardMapper


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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="board">
    
        <select id="boardList" resultType="com.sjh.board.BoardVO">
            SELECT
                 nno,ntitle,ncontent,nwriter,nrdate,nviewcnt,nisdelete
             FROM
                  tbl_notice
        </select>
        
      
</mapper>
cs


JSP 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>boardList</title>
</head>
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                      <button type="button" class="btn btn-outline btn-primary pull-right">
                          <i class="fa fa-edit fa-fw"></i> 공지사항 작성
                      </button>
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No.1</th>
                                <th>제목</th>
                                <th>작성자</th>
                                <th>작성일</th>
                                <th>조회수</th>
                            </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${list}" var="boardVO">
                            <tr>
                                <td>${boardVO.nno}</td>
                                <td>${boardVO.ntitle}</td>
                                <td>${boardVO.nwriter}</td>
                                <td><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${boardVO.nrdate}"/></td>
                                <td>${boardVO.nviewcnt}</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
cs


MVC를 기본적으로 이해하고 계시다면 어렵지 않은 부분입니다.

 model.addAttribute("list", list);분 DB에서 불러온 리스트를 모델에 넣어 jsp로 넘겨주고 JSP단에서는

JSTL을 forEach를 활용해서 리스트로 뿌져줬습니다.

JSTL을 사용하시기 위해서

<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>  상단에 써주셔야합니다


아직 공지사항 작성을 하지 않았으니 임시로 데이터를 넣겠습니다

1
2
3
4
5
 INSERT INTO tbl_notice(ntitle,ncontent,nwriter    )
 values('반갑습니다 ','많은 이용 바랍니다.','관리자');
  
INSERT INTO tbl_notice(ntitle,ncontent,nwriter    )
values('공지사항 테스트 입니다 ','잘부탁드립니다.','관리자');
cs



서버를 재시작하여 확인하면 !!! 잘 출력됩니다.  조회수는 아직 처리하지 않았습니다. 다음 포스팅에서는 

조회수 처리와 공지사항 작성에대해 올리겠습니다.~


저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

7. 스프링 게시판 글 작성하기  (0) 2018.02.15
5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07

+ Recent posts

티스토리툴바