'분류 전체보기' 카테고리의 글 목록 (8 Page)

분류 전체보기

3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기 2018.02.07
2. 회원가입 암호화 하는방법2 2018.02.07
1. Spring 회원가입하기 2018.02.06 4
1강 HTML5 2018.02.04
웹 디자인 Text 에디터 2018.02.04
spring 회원가입 비밀번호 암호화하여 DB에 저장하기 2018.01.11
이클립스 설치 및 기본설정 2017.11.28
1. 전자정부프레임워크 프로젝트 생성 2017.11.22

3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기

왕초보코딩탈출 2018. 2. 7. 17:19

2018. 2. 7. 17:19

우선 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파일을 따로 빼서 불러왔습니다.~

이제 주소에 해당하는 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>
Colored by Color Scripter
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();
     }
Colored by Color Scripter
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. 회원가입 암호화 하는방법2

왕초보코딩탈출 2018. 2. 7. 16:25

2018. 2. 7. 16:25

암호화 하는 방법은

스프링에서 처리하는 방법, 데이터베이스에서 처리하는 방법 이렇게 저는 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>
Colored by Color Scripter
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>
Colored by Color Scripter
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. Spring 회원가입하기

왕초보코딩탈출 2018. 2. 6. 18:43

2018. 2. 6. 18:43

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

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>
Colored by Color Scripter
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)
);
Colored by Color Scripter
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";
        }
    
    
    
}
Colored by Color Scripter
cs

회원가입 Service Interface

1
2
3
4
5
6
7
public interface SignupService {
 
    //회원가입 Service
    public void insertMember(SignupVO signVO);
 
    
}
Colored by Color Scripter
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);
    }
}
Colored by Color Scripter
cs

회원가입 DAO Interface

1
2
3
4
5
public interface SignupDAO {
    //회원가입 DAO
    public void insertMember(SignupVO signVO);
 
}
Colored by Color Scripter
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);
    }
}
 
Colored by Color Scripter
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>
Colored by Color Scripter
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

1강 HTML5

왕초보코딩탈출 2018. 2. 4. 20:19

2018. 2. 4. 20:19

HTML(HyperText Markup Language)

웹 페이지를 기술하기위한 마크업 언어

html 파일을 만든 후

brackets 의 경우 html:5 를 작성 후 Tab키를 누르면

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
cs

이렇게 자동완성이 됩니다.

HTML5의 경우 <!DOCTYPE html>

시작을 해야합니다.

document는 <html> </html> 사이에 작성하며

<head>사이에는 meta 정보들이 들어갑니다.

웹 브라우저에 나타내는 요소들은 <body> 사이에 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>   
     <p>안녕하세요! HTML5</p>
</body>
</html>
cs

body 안에

     <h1>Hello World</h1>   

     <p>안녕하세요! HTML5</p>

요소를 추가하고

우측 상단에 번개 표시 를 눌러보자 !

이제 여러가지 바꿔가면서 출력을 해보시면서 테스트를 해보세요 ~

'웹 프론트엔드 > HTML' 카테고리의 다른 글

1. HTML 웹 디자인 학습 사이트 모음 (2)	2018.02.15
웹 디자인 Text 에디터 (0)	2018.02.04

웹 디자인 Text 에디터

왕초보코딩탈출 2018. 2. 4. 19:43

2018. 2. 4. 19:43

내가 사용해본 애디터 툴은 Atom과 Brackets 이렇게 두가지 이다.

설치방법은 간단하니 설치하여 두가지 다 사용해보는 것을 추천드립니다.

Atom의 경우 유명한 GIthub , Brackets의 경우 Adobe 둘다 막강하죠

사실 뭘 쓰나 먼져 접한 툴을 사용할 가능성이 크죠 ㅎㅎ 둘다 너무너무 사용하기 좋기 때문입니다.

설치방법은

Atom

https://atom.io/

아톰 화면

Brackets

http://brackets.io/

두가지 다 설치나 사용은 어렵지 않습니다.

다만 개인적인 소견으로는 입문에게는 브라켓은 한글을 지원하기 때문에

초보차에게 더 편할것 같아요 익숙해지면 아톰도 사용해 보시길 권장해드립니다.

'웹 프론트엔드 > HTML' 카테고리의 다른 글

1. HTML 웹 디자인 학습 사이트 모음 (2)	2018.02.15
1강 HTML5 (0)	2018.02.04

spring 회원가입 비밀번호 암호화하여 DB에 저장하기

왕초보코딩탈출 2018. 1. 11. 18:01

2018. 1. 11. 18:01

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

그중에서

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);
 
    }
    
Colored by Color Scripter
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