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


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


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



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

저도 Ajax는 아직 완벽하게 이해한게 아니라 시간이 좀 걸렸네요 ㅠㅠ 400에러 404에러 415에러 500에러 

안본게 없네요 ㅎㅎ


부족하더라도 정리해보겠습니다. ~


우선 동기와 비동기 방식이 있는데 음.. 

이해하기 쉽게 설명드리자면 .. 음 동기는 이어달리기 ? 비동기는 그냥 달리기 시합 이라고 생각하시면 

쉬울것같아요 

동기방식은 요청이 들어오면 응답을 받기전까지 다음 요청을 처리하지 않습니다. 

이어달리기에서 바톤을 받아야 다음 주자가 뛸 수 있는것과 비슷하죠 ??ㅎㅎㅎ

비동기는 그냥 달리기 시합과 같습니다 ~

그냥 다같이 뛰는거죠 먼져 도착한사람이 먼져 응답을 주는 식? 이렇게 하면 이해가 쉽겟죠 ?

흔한 예제에서는 

은행 업무를 많이 들고 있습니다.  

나의 잔고가 10만원인데 . 친구에게 10만원을 입금해줍니다. 그런데 중간에 자동이체로 후르륵 빠져나가면

큰일 나겠죠 ? 그래서 이럴땐 10만원이 이체완료 후에 자동이체가 진행되는 동기 방식을 쓰는거죠 

비동기는 엄청나게 매력적이에요 node.js를 잠깐 해봤는데 단일 페이지에서 이것저것 하는것은 

사용자로 하여금 엄청나게 매력을 줍니다 ㅠㅠ 하지만 저는 이게 왜이렇게 어려운지 한번만 이해하면 쉽다고하는데

ㅠㅠ 각설하고 코드로 설명드리겠습니다.


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
<script type="text/javascript">
//아이디 체크여부 확인 (아이디 중복일 경우 = 0 , 중복이 아닐경우 = 1 )
var idck = 0;
$(function() {
    //idck 버튼을 클릭했을 때 
    $("#idck").click(function() {
        
        //userid 를 param.
        var userid =  $("#userid").val(); 
        
        $.ajax({
            async: true,
            type : 'POST',
            data : userid,
            url : "idcheck.do",
            dataType : "json",
            contentType: "application/json; charset=UTF-8",
            success : function(data) {
                if (data.cnt > 0) {
                    
                    alert("아이디가 존재합니다. 다른 아이디를 입력해주세요.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-error")
                    $("#divInputId").removeClass("has-success")
                    $("#userid").focus();
                    
                
                } else {
                    alert("사용가능한 아이디입니다.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-success")
                    $("#divInputId").removeClass("has-error")
                    $("#userpwd").focus();
                    //아이디가 중복하지 않으면  idck = 1 
                    idck = 1;
                    
                }
            },
            error : function(error) {
                
                alert("error : " + error);
            }
        });
    });
});
 
 
</script>
cs


우선 Ajax부터 작성했습니다.

var idck = 0; 우선 아이디 체크를했는지 안했는지 안했다면 회원가입이 불가하게 처리하기 위해

변수를 먼져 선언했습니다. 아이디 체크 여부에 따라 1 or 0 으로 처리할것입니다. 


컨트롤러


1
2
3
4
5
6
7
8
9
10
11
12
13
 @RequestMapping("/idcheck.do")
    @ResponseBody
    public Map<Object, Object> idcheck(@RequestBody String userid) {
        
        int count = 0;
        Map<Object, Object> map = new HashMap<Object, Object>();
 
        count = signupService.idcheck(userid);
        map.put("cnt", count);
 
        return map;
    }
 
cs


Ajax사용을 위해 @ResponseBody 위를 어노테이션을 써줘야하구요 

JSON으로 넘어온 userid를 매개변수로 받습니다.


signupService.idcheck(userid); 쿼리를 먼져 확인해보면 


1
2
3
4
5
<select id="idcheck" parameterType="String" resultType="Integer">
      SELECT COUNT(*) FROM tbl_member
      WHERE
          userid = #{userid}
</select>
cs

 

테이블에 저장되어 있는 userid의 COUNT를 가져옵니다.  


다시 컨트롤러에서 count = 1 이 될것입니다. 

이렇게 맵에 넣어서 다시 jsp로 넘겨줍니다. 다시 AJAX 작성한것을 보면 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (data.cnt > 0) {    
        alert("이미 아이디가 존재합니다.");               
    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-error")
        $("#divInputId").removeClass("has-success")
        $("#userid").focus();
                    
                
} else {
         alert("사용가능한 아이디입니다.");
     //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-success")
        $("#divInputId").removeClass("has-error")
        $("#userpwd").focus();
        //아이디가 중복하지 않으면  idck = 1 
        idck = 1;
}
cs


컨트롤러에서 아이디가 중복이라면  cnt = 1 아니면 0이 넘어 왔을 때 

data.cnt > 0 이면 중복!

아니라면 사용 가능합니다!


설명을 어렵게 드린거 같네요 ㅠㅠ 


그리고 회원가입을 해봤더니 이전에 유효성 검사에서 버튼을 submit으로 만들었었습니다. 

아이디가 중복인데 ㅠㅠ 막 에러를 뿜뿜  primary key ㅠㅠ

그래서 유효성 검사에서 


1
2
3
4
5
6
7
8
9
if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }
cs


마지막 부분에 이렇게 추가 했습니다.


이전 글을 보신분은 회원가입 버튼에 TYPE을 submit에서 button으로 바꿔주시고 

form 에 name="frm" id="frm"을 추가해주세요  





존재하는 아이디를 넣었을 때 count = 1 은 아이디가 존재 합니다.






아이디가 존재할 경우 빯갛게 표시 ㅎㅎㅎㅎ 





아이디가 존재하는데 회원가입을 진행했을 경우  

if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }








다시 정상적인 아이디를 입력했을 경우 



디비를 확인해보니 아주 이쁘게 잘 들어갔네요 ㅎㅎㅎㅎㅎㅎ






설명이 많이 부족합니다 .ㅠㅠ ajax는 추가로 따로 음...공부하고  스크립트 카테고리에 올리겠습니다 ㅠㅠ 

이것으로 회원가입에 필요한 비밀번호 암호화 , 유효성검사, 주소 자동완성, 아디디 중복검사를 했습니다. 

다음엔 게시판(공지사항) 을 만들겠습니다. 

공지사항에는 1. 게시글 등록 2.리스트 3. 수정 4. 삭제(CRUD)  5. 검색 6. 페이징  이렇게 다루겠습니다. 

코드가 필요하신 분은 댓글 달아주시면 git으로 코드를 올리겠습니다~ 

저작자표시 비영리

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

7. 스프링 게시판 글 작성하기  (0) 2018.02.15
6. 스프링 기본 게시판 만들기(리스트출력하기)  (3) 2018.02.13
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07



이번에는 회원가입시 꼭 필요한 유효성 검사입니다.


간단하게 공백 시 alert메시지를 띄우는 것만 하겠습니다. 


저도 아직 정규표현식은 ... 구글링을 통해 하는지라.. 




우선 유효성 검사를 위해 다음과 같이 스크립트를 추가합니다.

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
function DosignUp() {
    
    var userid = $("#userid").val();
    var userpwd = $("#userpwd").val();
    var inputPwdCfm = $("#signUpUserPwdCfm").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var addr1 = $("#addr1").val();
    var addr2 = $("#addr2").val();
    var addr3 = $("#addr3").val();
    
    if(userid.length == 0){
        alert("아이디를 입력해 주세요"); 
        $("#userid").focus();
        return false;
    }
    
    if(userpwd.length == 0){
        alert("비밀번호를 입력해 주세요"); 
        $("#userpwd").focus();
        return false;
    }
 
    if(userpwd != inputPwdCfm){
        alert("비밀번호가 서로 다릅니다. 비밀번호를 확인해 주세요."); 
        $("#signUpUserPwd").focus();
        return false; 
    }
 
    if(username.length == 0){
        alert("이름을 입력해주세요");
        $("#username").focus();
        return false;
    }
    
    if(email.length == 0){
        alert("이메일을 입력해주세요");
        $("#email").focus();
        return false;
    }
    
    if(addr1.length == 0 || addr2.length == 0 || addr3.length == 0 ){
        alert("주소를 입력해주세요");
        $("#addr3").focus();
        return false;
    }
    
    if(confirm("회원가입을 하시겠습니까?")){
        alert("회원가입을 축하합니다");
        return true;
    }
    
}
cs



1
2
<input type="submit" class="btn btn-lg btn-success btn-block" value="회원가입" onclick="DosignUp();" />
 
cs


회원가입 제출 버튼에 type="submit" 으로 변경해주세요 .


onclick="DosignUp(); 추가해주세요


보통 화면단에서 이렇게 유효성 검사를 1차로 진행한 후 , 자바단(스프링) validation 으로 다시 처리를 하고 

DB단 에서 한번 더 유혀성 검사를 하는 것으로 알고 있는데 ?? 맞나요 ?? 실무자님 계시면 댓글좀 ㅠㅠ


스프링에서 validation을 사용하는 것은 이후 시간이 있으면 포스팅 하겠습니다. 

DB단은 저도 잘 ;;    :D 모르겟어요 ㅎㅎ 누가 좀 알려주세요 ㅎㅎㅎㅎ


다음 글은 AJAX를 활용해서 아이디 중복 검사를 해보겠습니다. ㅎㅎㅎㅎ

저작자표시 비영리

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

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

우선 http://postcode.map.daum.net/guide 여기 들어가시면

 자세하게 다음에서 사용 방법까지 친절하게 설명해주고 있습니다. 

 회원 가입시에 우편번호,주소 외에 추가로 요구되는 사항이 있으면 확인하시어 변경하시면 되겠습니다.



우선 지금까지 작성하신 회원가입에서 코드를 추가하겠습니다. ~ 기본 회원가입, 비밀번호 암호화를 익시히고 

오시면 되겠습니다.~


Signup.JSP에서 


1
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script src="/resources/js/addressapi.js"></script>
cs

스크립트를 추가합니다.


저같은경우엔 js파일을 따로 빼서 불러왔습니다.~

<script src="/resources/js/addressapi.js"></script> 이부분은 선택 사항입니다.


이제 주소에 해당하는 form을 수정하겠습니다.


1
2
3
4
5
6
7
8
9
10
<div class="form-group">                   
<input class="form-control" style="width: 40%; display: inline;" placeholder="우편번호" name="addr1" id="addr1" type="text" readonly="readonly" >
    <button type="button" class="btn btn-default" onclick="execPostCode();"><i class="fa fa-search"></i> 우편번호 찾기</button>                               
</div>
<div class="form-group">
    <input class="form-control" style="top: 5px;" placeholder="도로명 주소" name="addr2" id="addr2" type="text" readonly="readonly" />
</div>
<div class="form-group">
    <input class="form-control" placeholder="상세주소" name="addr3" id="addr3" type="text"  />
</div>
cs


우편번호 검색 버튼을 만들고 onclick="execPostCode(); 이벤트 버튼을 추가해주세요  각각 id=addr1를 부여하고


다음에서 제공하는 


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
function execPostCode() {
         new daum.Postcode({
             oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
 
                // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 도로명 조합형 주소 변수
 
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }
                // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
                if(fullRoadAddr !== ''){
                    fullRoadAddr += extraRoadAddr;
                }
 
                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                console.log(data.zonecode);
                console.log(fullRoadAddr);
                
                
                $("[name=addr1]").val(data.zonecode);
                $("[name=addr2]").val(fullRoadAddr);
                
                /* document.getElementById('signUpUserPostNo').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('signUpUserCompanyAddress').value = fullRoadAddr;
                document.getElementById('signUpUserCompanyAddressDetail').value = data.jibunAddress; */
            }
         }).open();
     }
cs


고대로~ 복사 하여 붙여넣기하고 제가 수정한 부분은 이부분입니다.

 $("[name=addr1]").val(data.zonecode);
 $("[name=addr2]").val(fullRoadAddr);


저는 이렇게 처리를 하였는데 


1
2
3
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample3_postcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sample3_address').value = fullAddr;
cs


다음에서 제공하는 코드에는 이런식으로 작성 되어있을 것입니다.

// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('addr1').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('addr2').value = fullAddr;


요런식으로 바꿔주면 되겠죠 ??ㅎㅎ  끝입니다.  처음엔 데이터베이스에 테이블을 생성해야하나, 

컬럼이 30개가 넘는걸 어떻게 다 만들어서 넣지 ㅠㅠ 엄청 고민했던 기억이 있네요 ㅎㅎㅎ


다른곳에서도 api를 제공하겠지만 , 저는 안해봐서 모르겠어요 ㅎㅎ 다음이 처음이자 마지막?ㅎㅎㅎ

사이트 들어가시면 초보자도 쉽게 이해 할 수있게 예제를 잘 만들어 뒀으니 ~ 활용해보시기 바랍니다.




우편 번호와 , 주소는 readonly처리하면 더 확실 하겠습니다~ ㅎㅎ 


다음엔 회원가입시  유효성검사 validation 를 하겠습니다~ 

저작자표시 비영리

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

5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07
1. Spring 회원가입하기  (4) 2018.02.06
spring 회원가입 비밀번호 암호화하여 DB에 저장하기  (0) 2018.01.11

암호화 하는 방법은 


스프링에서 처리하는 방법, 데이터베이스에서 처리하는 방법 이렇게 저는 2가지 알고있어요 ㅎㅎ


우선 스프링에서 암호화처리하여 DB에 저장하는 방법은

http://kingchobocoding.tistory.com/4?category=978301 여기에 올려 뒀으니 참고 하세요 


데이터베이스에서 처리하는 방법은 너무 간단해서 따로 버튼을 추가하진 않겠습니다.


기존에 작성하셨던 회원가입에서 signup.xml 에서 mabatis 쿼리만 바꿔주면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
        INSERT INTO tbl_member(
            userid,
            userpwd,
            username,
            email,
            addr1,
            addr2,
            addr3
        )VALUES(
            #{userid},
            #{userpwd},
            #{username},
            #{email},
            #{addr1},
            #{addr2},
            #{addr3}
        )
    </insert>
cs


기존 작성하신 것에서 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
            INSERT INTO tbl_member(
                userid,
                userpwd,
                username,
                email,
                addr1,
                addr2,
                addr3
            )VALUES(
                #{userid},
                PASSWORD(#{userpwd}),
                #{username},
                #{email},
                #{addr1},
                #{addr2},
                #{addr3}
            )
        </insert>
cs


무엇이 바뀌었는지 아시겠나요 ?ㅎㅎㅎ

PASSWORD(#{userpwd}), 이부분입니다.


앞에 password만 적어주시고 괄호로 묶어주시면 

기존 test로 회원가입했을 땐 1234 로 들어갔던것이 

암호화처리되어 입력된것이 보이시죠 ?ㅎㅎㅎ 엄청 간단합니다!!!! 


스프링에서 암호화하는 방법과 , DB에서 암호화 처리하는 방법 어떤것이 보안에 더 좋은지는 잘 모르겠습니다.

지금은 mysql 환경이지만 ORACLE 이나 기타 DBMS에서는 저렇게 해두 되나요 ?? 한번 해봐야겠네요 

안된다면 , 스프링에서 처리해야하니 두가지 다 익히셨으면 하는게 저의 생각입니다. 


물론 화면에서 넘어오는 pwd는 암호화해서 처리해서 VO로 넘어 오는 것이 아니기 때문에 

토큰?? 복호화가 가능한 ? 그렇게 처리해서 넘겨주는 것으로 알고있습니다. 자료를 많이 찾아보긴 했으나 너무 어려워서 ㅠㅠ

후에 다시 시도해보고 올리도록 해보겠습니다. 


다음엔 주소를 다음 API를 써서 처리하는 글을 올리겠습니다. ~

저작자표시 비영리

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

5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
1. Spring 회원가입하기  (4) 2018.02.06
spring 회원가입 비밀번호 암호화하여 DB에 저장하기  (0) 2018.01.11

우선 메인 화면에는 각 기능을 구현 할 링크를 만들겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>Main</title>
</head>
 
<body>
 
<div class="container">
  <h3>회원가입</h3>
  <a href="/signup/signup.do" class="btn btn-primary">회원가입</a>
</div>
 
</body>
</html>
cs


요런식으로 계속 기능을 만들어 갈 예정입니다.



메인 페이지 매핑  @RequestMapping("/main.do")


1
2
3
4
5
6
7
8
9
10
@Controller
public class MainController {
    
        //메인 GET 공통
        @RequestMapping("/main.do")
        public String main() {
            return "main";
        }
}
 
cs



앞으로 버튼을 계속 추가하여 기능 구현을 하는게 목표입니다.


우선 회원가입을 위해 Table 을 생성하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
create table tbl_member(
    userid varchar(50) not null,
    userpwd varchar(100) not null,
    username varchar(50) not null,
    email varchar(100) not null,
    addr1 varchar(50),
    addr2 varchar(100),
    addr3 varchar(100),
    rdate timestamp default now(),
    updatedate timestamp default now(),
    primary key (userid)
);
cs


SignupVO 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class SignupVO {
 
    private String userid;
    
    private String userpwd;
    
    private String username;
    
    private String email;
    
    private String addr1;
    private String addr2;
    private String addr3;
    
    private Date rdate;
    
    private Date updatedate;
 
    //getter/setter ..
cs


회원가입 폼은 저와 동일하게 만들어주세요 디자인은 따로 다루지 않겠습니다.

이번엔는 아이디 중복확인, 우편번호 찾기는 구현하지 않겠습니다. 

이후에 구현 예정이니 폼은 동일하게 만들어 주세요.


회원가입 Controller

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
@Controller
@RequestMapping("/signup/*")
public class SingupController {
    
    @Inject
    private SignupService signupService;
    
    //SignUp GET
    @RequestMapping(value="/signup.do", method=RequestMethod.GET)
    public void signupGET() {
        
    }
    
    //SignUp PSOT
        @RequestMapping(value="/signup.do", method=RequestMethod.POST)
        public String signupPOST(SignupVO signVO) {
            
            signupService.insertMember(signVO);
            
            return "main";
        }
    
    
    
}
cs


회원가입 Service Interface

1
2
3
4
5
6
7
public interface SignupService {
 
    //회원가입 Service
    public void insertMember(SignupVO signVO);
 
    
}
cs


회원가입 ServiceImpl

1
2
3
4
5
6
7
8
9
10
11
@Service
public class SignupServiceImpl implements SignupService {
 
    @Inject
    private SignupDAO dao;
 
    @Override
    public void insertMember(SignupVO signVO) {
        dao.insertMember(signVO);
    }
}
cs


회원가입 DAO Interface

1
2
3
4
5
public interface SignupDAO {
    //회원가입 DAO
    public void insertMember(SignupVO signVO);
 
}
cs


회원가입 DAOImpl

1
2
3
4
5
6
7
8
9
10
11
12
@Repository
public class SignupDAOImpl implements SignupDAO {
 
    @Inject
    private SqlSession session;
 
    @Override
    public void insertMember(SignupVO signVO) {
        session.insert("insertMember",signVO);
    }
}
 
cs


회원가입 xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
        INSERT INTO tbl_member(
            userid,
            userpwd,
            username,
            email,
            addr1,
            addr2,
            addr3
        )VALUES(
            #{userid},
            #{userpwd},
            #{username},
            #{email},
            #{addr1},
            #{addr2},
            #{addr3}
        )
    </insert>
cs


이렇게 작성하고 내용을 넣겠습니다 . 아직 아이디중복확인 및 비밀번호 확인은 구현하지 않았습니다.~


데이터 베이스를 확인하면 ~ 짠 잘 들어 갔습니다.~


다음에는 비밀번호 암호화하여 저장하기, Daum 주소 API를 사용하여 우편번호 및 주소 찾기를 해보겠습니다.~


저작자표시 비영리

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

5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07
spring 회원가입 비밀번호 암호화하여 DB에 저장하기  (0) 2018.01.11

스프링 사이트에 가면 여러가지 프로젝트 들이 있다.


그중에서


SPRING SECURITY 를 선택하여 

pom. xml에 dependencies와 repository를 넣고 메이븐 업데이트를 하면 준비가 완료된다.


이제 회원가입시 입력받은 비밀번호를 암호화아여 디비에 잘 저장되는지 확인해보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Override
    public void insert(SignupVO vo) throws Exception {
        
        
        BCryptPasswordEncoder scpwd = new BCryptPasswordEncoder();
        System.out.println(vo.toString());
        //암호화 하기전
          String password = scpwd.encode(vo.getCppwd());
        //암호화 하여 password에 저장
        vo.setCppwd(password);
        System.out.println(vo.toString());
        
        dao.insert(vo);
 
    }
    
cs



우선 암호화 하기전에 입력받은 값을 출력해보고 

scpwd.encode(암호화 할 비밀번호) = password에 저장하고


암호화 처리 된 password를 출력해보시면 암호화가 잘 처리된 것을 확일할 수 있습니다.



vo를 찍어보면 암호하하기전에 입력 받은 값은 qwer 이고

함호화 이후엔 $2a$10$.lCIFYSuP26ioqh4dJHlXeWEaZiyCFSCD1k./D4paL/nbXIzaXmqC  로 입력된걸 확인할 수 있다.


데이터 베이스에 잘 저장되었는지 확인해보면

잘 저장되었다. 


BCryptPasswordEncoder는 복호화가 되지 않으므로 로그인 할때도 암호화한걸 비교해서 로그인 하시면 됩니다.~




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

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. Spring 회원가입하기  (4) 2018.02.06

+ Recent posts

티스토리툴바