not bad 한 개발

CodeIgniter - 로그인 구현 본문

Web/CodeIgniter

CodeIgniter - 로그인 구현

leebean 2022. 2. 18. 09:37

회원가입이 있는 곳에 반드시 있는 기능인 로그인 기능을 이번에 구현하고자 합니다.

이번 글에는 bootstrap 4.5 버전을 사용했습니다. 

DB설계 (member 테이블)

(위의 DB설계는 MariaDB 기준으로 제작했습니다.)

 

session 설정  

  • 이번에는 session을 사용하기 때문에 codeigniter에서 session을 설정해야 합니다.
  • /application/config/config.php 파일의 388 ~ 394번째에 session 설정하는 부분이 있습니다.

 

github : https://github.com/delight-HK3/login_check

 

GitHub - delight-HK3/login_check

Contribute to delight-HK3/login_check development by creating an account on GitHub.

github.com

(jQuery 및 bootstrap 파일도 첨부해놓았습니다.)

 

Controller

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

class Login_check extends CI_Controller {
    function __construct(){
        parent::__construct();
        $this->load->database(); // 데이터베이스를 연결시킵니다.          
        $this->load->model("login_check_m"); // login_check_m을 실행시킵니다.
    }
    public function index()
    {
        $this->load->view("login_check_view"); 
        //view 부분의 login_check_view.php를 실행시킵니다.                
    }
    public function login(){
        $uid = $this->input->post("inuid",TRUE); 
        // JS에서 가져온 inuid, inpwd를 각각 저장합니다.
	$pwd = $this->input->post("inpwd",TRUE); 
    	// JS에서 가져온 inuid, inpwd를 각각 저장합니다.

        $result = $this->main_m->getrow($uid,$pwd); 
        // 두 개의 값을 가지고 테이블에 공통된 값이 있는지 확인합니다.
        
        if($result == "no"){ //만약 없을 경우 문자열 "no"를 가지고 리턴합니다.
		$returnArray['responseText'] = $result;
		echo json_encode($returnArray);
	}
        else { // 있을 경우 $result에 저장되어있는 값을 배열로 만들고 배열을 사용하여 session을 만든 후 리턴합니다.  
            $returnArray['responseText'] = $result;
            echo json_encode($returnArray);

            $data=array(
		"no" => $result->no,
		"uid" => $result->uid,
                "pwd" => $result->pwd,
		"name" => $result->name
	    );
            $this->session->set_userdata($data);
        }    
    }
}
?>

 

Model

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

class Login_check_m extends CI_Model {
    public function getrow($uid,$pwd){
        $sql="select * from member where uid like '$uid' and pwd like '$pwd'";
	$query = $this->db->query($sql);
	if( $query->num_rows() > 0 ){ //회원 정보가 있습니다.
    		return $this->db->query($sql)->row();
	} else { //회원 정보가 없습니다. 
		return "no";
	}
    }
}
?>

 

View

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

        <!-- bootstrap 4.5 css -->
        <link rel="stylesheet" href="/my/css/bootstrap.css">
        <link rel="stylesheet" href="/my/css/bootstrap.min.css">

        <!-- font css -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&display=swap" rel="stylesheet">
    </head>
    <body>
        <?php 
            if(!$this->session->userdata("no")){
        ?>      
                <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#Login">로그인</button>
        <?php
            }
            else{
        ?>
                <p>로그인 완료</p>
        <?php
            }
        ?>
        <div class="modal fade" id="Login" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Login</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" onClick="javascript:Reset()">&times;</span>
                        </button>
                    </div>
                    <form onsubmit="return login_check(event)"> 
                        <div class="modal-body" style="font-family: 'Noto Sans KR', sans-serif">
                            <div class="form-group row">
                                <label for="inuid" class="col-sm-4 col-form-label">아이디</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="inuid" name="id" value="" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inpwd" class="col-sm-4 col-form-label">비밀번호</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="inpwd" name="pwd" value="" required>
                                </div>
                            </div>
                            <div id="status"></div>
                        </div>
                        <div class="modal-footer" style="font-family: 'Noto Sans KR', sans-serif;">
                            <input type="button" class="btn btn-secondary" onClick="javascript:Reset();" value="닫기" data-dismiss="modal">
                            <input type="submit" class="btn btn-primary" value="로그인"> 
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
<!--bootstrap 4.5 Javascript-->
<script src="/my/js/jquery-3.6.0.js"></script>
<script src="/my/js/bootstrap.js"></script>
<script src="/my/js/bootstrap.js.map"></script>

 

JS

function login(event){
    event.preventDefault(); 
    // 기존에는 로그인 체크기능이 정상적으로 작동하더라도 modal창은 강제로 닫히는 현상이 있었습니다, 
    // 하지만  event.preventDefault() 를 작성하면 에러메세지가 나와도 modal창은 닫히지 않습니다. 
    let error = "<font style='color:red; font-size: 14px;'>아이디 혹은 비밀번호가 맞지 않습니다.</font>";
    $.ajax({
        url: "/Login_check/check", // Controller의 Login_check에 있는 check 함수로 이동합니다.
        type: "POST",
        data: { // view 에서 inuid와 inpwd를 data에 저장합니다.
            "inuid":$("#inuid").val(), 
            "inpwd":$("#inpwd").val(),
        },
        dataType:'json',
        async : true,   
        success:function(data){
            if(data.responseText == "no"){ 
            	// 리턴값이 문자열 "no"인 경우 사전에 만든 error를 id가 status인 부분에 출력시킵니다.
                document.getElementById("status").innerHTML = error;
            }
            else if(data.responseText.no){ 
            	// 리턴값에 no가 있는 경우 페이지를 재부팅합니다.
                location.reload(); 
            }
        },
        error:function(xhr, status, error){ 
            alert('인증오류'); 
        }
    });
}
function Reset(){ // modal 창을 닫기 혹은 아이콘을 눌러 닫을 경우 입력된 값을 초기화 시키는 함수입니다.
    document.getElementById("inuid").value = "";
    document.getElementById("inpwd").value = "";
    document.getElementById("error").innerHTML = null;
}

 

결과물

로그인 modal창입니다.
로그인이 실패했을 경우입니다.

저작자표시

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

CodeIgniter - Pagination 구현  (0) 2022.03.12
CodeIgniter - 서버에 중복 없이 이미지 넣기  (0) 2022.02.19
CodeIgniter - DB에 있는 데이터를 Modal창 으로 보기  (0) 2021.12.31
CodeIgniter - Ajax를 활용한 아이디 중복체크  (0) 2021.12.29
CodeIgniter - 소개  (0) 2021.12.29
'Web/CodeIgniter' Related Articles more
Comments