not bad 한 개발

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

Web/CodeIgniter

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

leebean 2021. 12. 29. 15:11

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

 

github link : https://github.com/delight-HK3/ID_check

 

GitHub - delight-HK3/IDcheck: UTF-8 encoding required

UTF-8 encoding required. Contribute to delight-HK3/IDcheck development by creating an account on GitHub.

github.com

(jQuery 파일도 함께 첨부해놓았습니다.)

 

View

<html>
	<head>
    		<meta charset="utf-8">
		<script src="/js/jquery-3.6.0.js"></script>
		<script src="/js/id_check.js"></script>
	</head>
	<body>
		<font>아이디 </font><input type="text" id="chuid" size="20" maxlength="20" value="" oninput="check_id()">
		<font id="id"></font>
	</body>
</html>

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

 

Script

function check_id() {
	var uid = $("#chuid").val(); 
    	// id값이 chuid 인 태그의 value값을 uid에 저장합니다.
	let success = "&nbsp&nbsp&nbsp<font style='color:rgb(0, 201, 0)'>사용가능한 아이디입니다.</font>";
    	// 아이디가 중복일 경우와 아닌 경우에 출력할 메시지를 선언 및 저장합니다.
	let error = "&nbsp&nbsp&nbsp<font style='color:red'>아이디가 중복됩니다.</font>";
    	// 아이디가 중복일 경우와 아닌 경우에 출력할 메시지를 선언 및 저장합니다.
	$.ajax({
		url: "/id_check/check_id", // 검사하는 기능을 가지고 있는 함수로 url을 설정합니다.
		type: "POST", // 전송 타입은 POST로 합니다.
		data:{ // 앞에 있는 uid는 컨트롤러로 넘길 uid이름이고 뒤에 있는 uid는 view에서 받은 uid 값입니다.
			"uid":uid
		},
		dataType:'json', // 데이터 타입은 json으로 합니다.
        	success:function(data){ // 데이터를 성공적으로 받으면 아래의 코드를 실행합니다.
			if(data.responseText == "no"){ 
            		//리턴된 값이 "no"일 경우 view에서 id가 "id"인 태그에 변수 error값을 출력합니다, 
            		//반대로 "no"가 아닌 경우 id가 "id"인 태그에 변수 success값을 출력합니다.
				document.getElementById("id").innerHTML = error;
			} else{
				document.getElementById("id").innerHTML = success;
			}
		},
	});
}

 

Controller 

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Id_check extends CI_Controller {
	function __construct(){
        	parent::__construct();
        	$this->load->database(); //DB 연결   
        	$this->load->model("id_check_m "); //model id_check_m 연결  
	}
    public function index(){
		$this->load->view("id_check_view");
	}
	public function check_id(){
		$uid=$this->input->post("uid",TRUE); 
        	// Script에서 data이름이 uid인 value값을 $uid 변수에 저장합니다.
		$rerult = $this->id_check_m->searchid($uid); 
        	// clientmember_m.php 파일에 있는 searchid 함수에 쿼리를 실행하여 나온 결괏값을 $result변수에 저장합니다.
		$returnArray['responseText'] = $result; 
        	// $returnArray ['responseText'] 배열에 해당되어있는 값을 가진 $result변수를 배열 형태로 저장시킵니다. 
		echo json_encode($returnArray); 
        	// echo json_encode($returnArray) 는 DB에서 가져온 데이터를 JSON형태로 인코딩하여 
            	// 다시 스크립트에 리턴 시키기 위해 반드시 해야 하는 작업입니다.
	}
}
?>

 

Model

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Id_check_m extends CI_Model {
    public function searchid($uid){
        $sql = "select * from <테이블이름> where <컬럼> like '$uid'"; // $sql에 sql문을 입력합니다.
        $query = $this->db->query($sql); //쿼리문을 실행한 결과를 $query변수에 저장시킵니다.
        if( $query->num_rows() > 0 ){ //아이디 중복
            return "no";
        } else { //아이디 중복없음
            return "ok"; 
        }
    }
}

 

저작자표시

'Web > CodeIgniter' 카테고리의 다른 글

CodeIgniter - Pagination 구현  (0) 2022.03.12
CodeIgniter - 서버에 중복 없이 이미지 넣기  (0) 2022.02.19
CodeIgniter - 로그인 구현  (0) 2022.02.18
CodeIgniter - DB에 있는 데이터를 Modal창 으로 보기  (0) 2021.12.31
CodeIgniter - 소개  (0) 2021.12.29
'Web/CodeIgniter' Related Articles more
Comments