jQuery 사용하기



여러 방법 중 가장 많이 사용하는 4가지 방법은 다음과 같다.


1. 직접 jquery.js파일을 받아서 사용 (http://jquery.com/download/)


<script src="js/jquery.js"></script>


2. Google CDN을 이용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


3. MS CDN을 이용

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

4. jQuery에서 제공하는 최신버전 URL를 이용

<script src="http://code.jquery.com/jquery-latest.js"></script>


'기타 > 유용한 라이브러리' 카테고리의 다른 글

Meiomask 플러그인 설치  (0) 2018.04.21
validate 플러그인 설치  (0) 2018.04.17
Json 추가 (Spring Maven)  (0) 2018.04.17
Spring security (Spring Maven)  (0) 2018.04.11
Mybatis, Oracle 사용법 (Spring Maven)  (0) 2018.03.07
Posted by 조원오
:

Meiomask란??



jQuery의 플러그인들 중 하나이며, 텍스트 서식을 바꿀 수가 있다


ex) 휴대폰번호 입력시 01055555555라고 입력하면 010-5555-5555라고 알아서 적어진다.



Meiomask 설치방법




1. https://plugins.jquery.com/meiomask에 접속한 후 Download now를 클릭한다.



2. Github로 이동하게 되는데 여기서 가장 최신버전인 1.1.14 버전을 클릭한다.




3. Source code (zip)을 클릭해 다운받는다.



4. 압축 푼 폴더에서 dist 폴더를 클릭한다.




5. meiomask.js파일을 복사한다.


6. 해당 프로젝트의 src/main/webapp/resources/css/images/js/validate에 붙여넣는다.




7. meiomask.js파일의 소스 중에 154번째줄에 가보면 masks: {} 가 있다. 휴대폰형식을 010-1234-1234 형식으로 하기 위해서 해당 소스를 추가한다. 
mask: '010-9999-9999' 에서 0은 숫자 0만 들어갈 수 있으며 다른 숫자를 입력했을 때 입력이 되지 않는다. 1은 0~1만 입력이 되며, 9는 1~9가 입력이 가능하다. 


'mobile': {
                	mask: '010-9999-9999'
                }

8. 휴대폰 입력하는 input 태그 안에 alt="mobile"을 적으면 적용이된다.

'기타 > 유용한 라이브러리' 카테고리의 다른 글

jQuery 사용  (0) 2018.04.21
validate 플러그인 설치  (0) 2018.04.17
Json 추가 (Spring Maven)  (0) 2018.04.17
Spring security (Spring Maven)  (0) 2018.04.11
Mybatis, Oracle 사용법 (Spring Maven)  (0) 2018.03.07
Posted by 조원오
:

validate란 무엇인가?



form 안에 입력된 값을 검증할 수 있도록 한 플러그인이다.


이 플러그인을 사용해서 검증에 통과하지 못 할 경우 통과 못한 값의 아래에 에러 문구가 출력되면서 submit 되는 것을 막아준다.





validate의 사용 전 설치



1. validate에 관한 파일을 설치하기 위해 https://jqueryvalidation.org/ 에 접속한다. 해당 사이트에 validate의 소개에 대한 영상을 보는 것을 추천한다. (영어로 소개하기 때문에 약간 울렁거릴 수 있음)





2. Download를 클릭하면 Github로 이동이 된다. jquery-validation-1.17.0.zip를 클릭해서 해당 zip 파일을 다운 받은 후 압축을 풀도록 한다.





3. 압축 푼 폴더에서 dist 폴더에 들어 간 후 additional-methods.js와 jquery-validate.js, 그리고 localization폴더 안에 있는 message_ko.js를 복사한다. 

(*.min 파일 받아도 상관없음 *.min파일은 한 줄로 소스가 적혀있어 가독성은 떨어지지만 파일의 용량이 더 적기 때문에 소스확인 할 필요 없으면 *.min 파일들을 복사한다)


4. 아래와 같이 사용하고자하는 프로젝트의 src/main/webapp/resources/js/validate 안에 복사했던 파일을 붙여넣는다. (폴더가 없을 경우 생성)





5. 모든 view에서 사용하기 위해 include 폴더를 하나 만든 다음 그 안에서 head.jsp 파일을 만들고 아래 소스를 추가한다.


※여기서 순서가 중요한데 jquery.validate.js 파일은 jquery를 기반으로 만들어진 소스여서 jquery-3.3.1.min.js 파일보다 아래에 선언되어야 한다.

  그리고 additional-methods.jsmessages_ko.js 파일은 jquery-3.3.1.min.jsjquery.validate.js의 아래에 선언되어야 한다. 

 

<script type="text/javascript" src="${_ctx}/res/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${_ctx}/res/js/validate/jquery.validate.js"></script>
<script type="text/javascript" src="${_ctx}/res/js/validate/additional-methods.js"></script>
<script type="text/javascript" src="${_ctx}/res/js/validate/localization/messages_ko.min.js"></script>


6. 모든 view 파일에서 head.jsp를 가져다 쓰기 위해 태그 안에 를 통해 head.jsp를 사용한다.

<c:import url="/WEB-INF/views/inc/head.jsp" />




validate 사용법



Rules

설명 

required

입력 필수 항목설정. text, password, select, radio, checkbox type에 사용된다.  ex) required : true 

remote 

외부 URL을 이용한 validation이 필요한 경우 사용한다. 

equalTo 

다른 FORM 항목과 동일한 값인지 체크한다. 

minlength 

최소 길이 체크. ex) minlength : 3 

maxlength 

최대 길이 체크. ex) maxlength : 10 

rangelength 

길이 범위 체크. ex) rangelength : [2, 6] (2글자 이상 6글자 이하) 

min 

숫자의 최소값 체크. ex) min : 13 (13보다 작을 경우 false) 

max 

숫자의 최대값 체크. ex) max : 5 (5보다 클 경우 false) 

range 

숫자의 범위 체크. ex) range : [13, 24] (13보다 작거나 24보다 클 경우 false) 

email 

이메일 형식의 값인지 체크. ex) email : true 

url 

유효한 url 형식인지 체크. ex) url : true 

date 

유효한 날짜 형식의 값인지 체크 

dateISO 

유효한 국제표준 날짜 형식인지 체크. ex) dateISO : true 

number 

유효한 숫자인지 체크. ex) number : true 

digits 

유효한 digit 값인지 체크. number와 다른점은 양의 정수만 허용한다. 즉, 소수와 음수일 경우 false 

creditcard 

유효한 카드번호 형식인지 체크. 공식페이지에서는 creditcard rule을 그대로 적용하지 말고 현지 사정에 맞게 수정하라고 권장한다. ex) creditcard : true 


참조 : https://m.blog.naver.com/PostView.nhn?blogId=islove8587&logNo=220695921701&proxyReferer=https%3A%2F%2Fwww.google.com%2F

'기타 > 유용한 라이브러리' 카테고리의 다른 글

jQuery 사용  (0) 2018.04.21
Meiomask 플러그인 설치  (0) 2018.04.21
Json 추가 (Spring Maven)  (0) 2018.04.17
Spring security (Spring Maven)  (0) 2018.04.11
Mybatis, Oracle 사용법 (Spring Maven)  (0) 2018.03.07
Posted by 조원오
:

CRUD란?




CRUD는 Create(생성), Read(읽기), Update(갱신), Delete(삭제)로 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능이다.


 이름

조작 

SQL 

Create

생성

Insert

Read

읽기

Select

Update

갱신

Update

Delete

삭제

Delete


Spring MVC에 Model 2 방식으로 적용하기


회원가입을 위해서 view에서 입력한 정보를 DB에 넣기 위해 Create를 해야한다. 


DTO => maps => DAO => Service => Controller 순으로 만들도록 한다.


우선 DTO를 만든다.


UserDTO.java



package kr.co.jwo.user.dto; import java.util.Date; import lombok.Data; //getter setter toString 을 자동으로 만들어줌. @Data public class UserDTO { private Integer userId = null, // 사용자ID status = null; // STATUS(상태) // 0 : 대기 // 3 : IP차단 // 4 : 탈퇴 // 5 : 정지 // 9 : 정상 private String  loginId = null, // 로그인ID         loginPw = null, // 로그인PW         name = null, // 이름 phone = null, // 핸드폰 email = null, // 이메일 role = "USER"; // ROLE(롤) // USER : 사용자 // MANAGER : 매니저 // ADMIN : 관리자 // SUPER_ADMIN : 최고 관리자 private Date regDt = null; // 등록일 }



그리고 mybatis로 xml을 만든다.


User.xml


<insert id="insertData" parameterType="kr.co.jwo.user.dto.UserDTO"> <selectKey keyProperty="userId" resultType="int" order="BEFORE"> SELECT SEQ_USER.NEXTVAL FROM DUAL </selectKey> INSERT INTO TB_USER( USER_ID ,LOGIN_ID ,LOGIN_PW ,NAME ,PHONE ,EMAIL ) VALUES ( #{userId} ,#{loginId} ,#{loginPw} ,#{name} ,#{phone} ,#{email} ) </insert>


DAO를 만든다.


IUserDAO.java


public interface IUserDAO {
	public void insert(UserDTO userDTO);
}

UserDAOImpl.java



@Repository public class UserDAOImpl extends BaseDaoSupport implements IUserDAO{ @Override public void insert(UserDTO userDTO) { SqlSession session = this.getSqlSession(); session.insert("user.insertData",userDTO); } }


여기서 BaseDaoSupport를 상속받는데 필요하다면 아래 파일 받은 다음 해당 패키지에 넣는다.


 BaseDaoSupport.java




IUserService.java



public interface IUserService { public void write(UserDTO userDTO); }

UserServiceImpl.java


@Service public class UserServiceImpl implements IUserService { @Autowired IUserDAO userDAO = null; @Override public void write(UserDTO userDTO) { userDAO.insert(userDTO); } }


Controller를 만든다.


JoinController.java



// 회원가입 @ResponseBody @RequestMapping(value = "/join.god", method = RequestMethod.POST) public String dojoin(UserDTO userDTO) { log.debug("userDTO =========>" + userDTO); userService.write(userDTO); return "s"; }



여기서 사용을 위해 validate js 파일을 받아야 한다. 


Join.jsp


// 검증에 통과하면 if ($("#frmJoin").valid()) { $.get("${_ctx}/captcha/isRight", { captcha : $("#captcha").val() }, function(data) { if (data == 1) { //서버에 데이터 전송 var url = "${_ctx}/join.god"; $.post(url, $("#frmJoin").serialize(), function(data) { if (data == "s") { alert("회원가입 성공"); document.location.href = "/jwo/index.god" } else { alert("회원가입 실패!!"); //화면 새로고침 document.location.reload(); } }); } else { alert("문자가 다릅니다."); } }); }



Posted by 조원오
: