CodeIgniter - Ajax를 활용한 아이디 중복체크

CodeIgniter - Ajax를 활용한 아이디 중복체크

예전에는 쇼핑몰등 각종 사이트에서 회원가입을 시도하면 반드시 아이디혹은 비밀번호를 입력하고 중복체크 버튼을 눌러서 중복체크를 해줘야했습니다. 하지만 시간이 지나면서 나온지 얼마 안된 사이트는 중복체크를 별도로 하지않고 아이디를 입력하면 바로 사용이 가능한지 알려주는 기능을 가지고 있습니다. 이번에는 Ajax를 활용하여 CodeIgniter 와 php언어를 사용하여 실시간 아이디 중복체크를 구현해보겠습니다.

View

아이디

input태그에서 check_id()함수를 통해 입력할 때 마다 Script를 실행하여 중복체크를 합니다.

Script

function check_id() { var uid = $("#chuid").val(); // 1 let success = " 사용가능한 아이디입니다."; // 2 let error = " 아이디가 중복됩니다."; // 2 $.ajax({ url: "/<경로>/check_id", // 3 type: "POST", // 4 data:{ // 5 "uid":uid }, dataType:'json', // 6 success:function(data){ // 7 if(data.responseText == "no"){ //8 document.getElementById("id").innerHTML = error; } else{ document.getElementById("id").innerHTML = success; } }, }); }

id값이 chuid 인 태그의 value값을 uid에 저장합니다. 아이디가 중복일 경우와 아닌경우에 출력할 메세지를 선언 및 저장합니다. 검사하는 기능을 가지고 있는 함수로 url을 설정합니다. 전송타입은 POST로 합니다. 앞에 있는 uid는 컨트롤러로 넘길 uid이름이고 뒤에있는 uid는 view에서 받은 uid 값입니다. 데이터타입은 json으로 합니다. 데이터를 성공적으로 받으면 아래의 코드를 실행합니다. 리턴된값이 "no"일 경우 view에서 id가 "id"인 태그에 변수 error값을 출력합니다, 반대로 "no"가 아닌경우 id가 "id"인 태그에 변수 success값을 출력합니다.

Controller

public function check_id(){ $uid=$this->input->post("uid",TRUE); // 1 $rerult = $this->clientmember_m->searchid($uid); // 2 $returnArray['responseText'] = $result; // 3 echo json_encode($returnArray); // 4 }

Script에서 data이름이 uid인 value값을 $uid 변수에 저장합니다. clientmember_m.php 파일에 있는 searchid 함수에 쿼리를 실행하여 나온 결과값을 $result변수에 저장합니다. $returnArray['responseText'] 배열에 $result변수 값을 저장 시키고 리턴시킵니다. echo json_encode($returnArray) 는 chrome 개발자 모드에서 $returnArray에 어떤 값이 저장되었는지 확인하기 위해 넣었기 때문에 사용해도되고 안해도 상관이 없습니다.

Model

public function searchid($uid){ $sql = "select * from <테이블이름> where <컬럼> like '$uid'"; //1 $query = $this->db->query($sql); //2 if( $query->num_rows() > 0 ){ //아이디 중복 return "no"; } else { //아이디 중복없음 return "ok"; } }

$sql에 sql문을 입력합니다. 쿼리문을 실행한 결과를 $query변수에 저장시킵니다.

from http://juniorprogram.tistory.com/43 by ccl(A) rewrite - 2021-12-29 15:26:26