Backend/PHP

[PHP] 로그인 페이지 만들기 - 1 (login, login_ok)

💡 로그인, 로그아웃 동적 페이지를 만들어 보자!

⭐️ 완성샷

🖼️ 로그인 전 index.php

🖼️ login/login.php -> login_ok.php

🖼️ 로그인 후 index.php

🔴 login.php

<title>로그인</title>

<style type="text/css">
  body,select,option,button{font-size:16px}
  input{border:1px solid #999;font-size:14px;padding:5px 10px}
  input,button{vertical-align:middle}
  form{width:320px;margin:auto}
  span{font-size:14px;color:#f00}
  legend{font-size:20px;text-align:center}
  p span{display:block;margin-left:90px}
  button{cursor:pointer}
  .txt{display:inline-block;width:80px}
  .btn{background:#fff;border:1px solid #999;font-size:14px;padding:4px 10px}
  .btn_wrap{text-align:center}
</style>

<script type="text/javascript">
function login_check() {
  var u_id = document.getElementById("u_id");
  var pwd = document.getElementById("pwd");

  if (u_id.value == "") {
    var err_txt = document.querySelector(".err_id");
    err_txt.textContent = "아이디를 입력하세요.";
    u_id.focus();
    return false;
  }
  var u_id_len = u_id.value.length;
  if (u_id_len < 4 || u_id_len > 12) {
    var err_txt = document.querySelector(".err_id");
    err_txt.textContent = "아이디는 4~12글자만 입력할 수 있습니다.";
    u_id.focus();
    return false;
  }

  if (pwd.value == "") {
    var err_txt = document.querySelector(".err_pwd");
    err_txt.textContent = "비밀번호를 입력하세요.";
    pwd.focus();
    return false;
  }
  var pwd_len = pwd.value.length;
  if (pwd_len < 4 || pwd_len > 8) {
    var err_txt = document.querySelector(".err_pwd");
    err_txt.textContent = "비밀번호는 4~8글자만 입력할 수 있습니다.";
    pwd.focus();
    return false;
  }
}
</script>
  
</head>
<body>
  <form name="login_form" action="login_ok.php" method="post" onsubmit="return login_check()">
    <fieldset>
      <legend>로그인</legend>
      <p>
        <label for="u_id" class="txt">아이디</label>
        <input type="text" name="u_id" id="u_id" class="u_id" autofocus>
        <br>
        <span class="err_id"></span>
      </p>

      <p>
        <label for="pwd" class="txt">비밀번호</label>
        <input type="password" name="pwd" id="pwd" class="pwd">
        <br>
        <span class="err_pwd"></span>
      </p>

      <p class="btn_wrap">
        <button type="button" class="btn" onclick="history.back()">이전으로</button>
        <button type="submit" class="btn">로그인</button>
      </p>
    </fieldset>
  </form>
</body>

그 전 회원가입 폼과 유효성검사에서 부분적으로 가져 오면된다.(아이디, 비밀번호)
form태그 action속성에 login_ok.php로 이동하라고 알려준다.
button을 2개 만들어 줬다.
이전으로 버튼에는 뒤로가기 버튼을 만들어 준다. => history.back()

🟠 login_ok.php (로그인 처리 페이지)

login_ok.php에서 로그인 폼에서 받은 값들을 처리한다.

<?php
/* 세션 실행 */
session_start();

/* 이전 페이지에서 값 가져오기 */
$u_id = $_POST["u_id"];
$pwd = $_POST["pwd"];
// echo "ID : ".$u_id." / PW : ".$pwd;

/* DB 접속 */
include "../inc/dbcon.php";

/* 쿼리 작성 */
$sql = "select idx, u_name, u_id, pwd from members where u_id='$u_id';";
// echo $sql;

/* 쿼리 전송(연결 객체) */
$result = mysqli_query($dbcon, $sql);

/* DB에서 결과값 가져오기 */
// mysqli_fetch_row // 필드 순서
// mysqli_fetch_array // 필드명
// mysqli_num_rows // 결과행의 개수
$num = mysqli_num_rows($result);
// echo

/* 조건 처리 */
if(!$num){ // 아이디가 존재하지 않으면
    // 메세지 출력 후 이전 페이지로 이동
    echo "
        <script type=\"text/javascript\">
            alert(\"일치하는 아이디가 없습니다.\");
            history.back();
        </script>
    ";
    exit;
} else{ // 아이디가 존재하면

    // DB에서 사용자 정보 가져오기
    $array = mysqli_fetch_array($result);
    // $g_idx = $array["idx"];
    // $g_u_name = $array["u_name"];
    // $g_u_id = $array["u_id"];
    $g_pwd = $array["pwd"];

    // 사용자가 입력한 비밀번호와 DB에 저장된 비밀번호가 일치하지 않는다면
    if($pwd != $g_pwd){
        echo "
            <script type=\"text/javascript\">
                alert(\"비밀번호가 일치하지 않습니다.\");
                history.back();
            </script>
        ";
    exit;
    } else{ // 비밀번호가 일치한다면
        // 세션 변수 생성
        // $_SESSION["세션변수명"] = 저장할 값;
        $_SESSION["s_idx"] = $array["idx"];
        $_SESSION["s_name"] = $array["u_name"];
        $_SESSION["s_id"] = $array["u_id"];
        // echo "idx : ".$_SESSION["s_idx"]." / "."NAME : ".$_SESSION["s_name"]." / "."ID : ".$_SESSION["s_id"];

        /* DB 연결 종료 */
        mysqli_close($dbcon);

        /* 페이지 이동 */
        echo "
            <script type=\"text/javascript\">
                location.href = \"../index.php\";
            </script>
        ";
    };
};

?>

🟤 이전 페이지에서 값 가져오기

$u_id = $_POST["u_id"];
$pwd = $_POST["pwd"];

// 값이 잘 받아와졌나 확인하고 싶으면 echo로 출력해보기
echo "ID : ".$u_id." / PW : ".$pwd;

🟤 DB 접속

include "../inc/dbcon.php";

dbcon.php에 작성한 것

<?php
    $dbcon = mysqli_connect("localhost", "root", "", "front") or die("접속에 실패하였습니다.");
    mysqli_set_charset($dbcon, "utf8");
?>

🟤 쿼리 작성

$sql = "select idx, u_name, u_id, pwd from members where u_id='$u_id';";

// 쿼리 작성도 출력해보고 데이터베이스에 입력해서 잘 입력되는지 확인해본다.
echo $sql;

🟤 쿼리 전송(연결 객체)

$result = mysqli_query($dbcon, $sql);

🟤 DB에서 결과값 가져오기

// mysqli_fetch_row // 필드 순서
// mysqli_fetch_array // 필드명
// mysqli_num_rows // 결과행의 개수
$num = mysqli_num_rows($result);

결과행의 개수를 가지고와서 아이디가 존재하면 1, 안하면 0을 출력하게끔 한다.

🟤 조건 처리

if(!$num){ // 아이디가 존재하지 않으면
    // 메세지 출력 후 이전 페이지로 이동
    echo "
        <script type=\"text/javascript\">
            alert(\"일치하는 아이디가 없습니다.\");
            history.back();
        </script>
    ";
    exit;
} else{ // 아이디가 존재하면

    // DB에서 사용자 정보 가져오기
    $array = mysqli_fetch_array($result);
    // $g_idx = $array["idx"];
    // $g_u_name = $array["u_name"];
    // $g_u_id = $array["u_id"];
    $g_pwd = $array["pwd"];

    // 사용자가 입력한 비밀번호와 DB에 저장된 비밀번호가 일치하지 않는다면
    if($pwd != $g_pwd){
        echo "
            <script type=\"text/javascript\">
                alert(\"비밀번호가 일치하지 않습니다.\");
                history.back();
            </script>
        ";
    exit;
    } else{ // 비밀번호가 일치한다면
        // 세션 변수 생성
        // $_SESSION["세션변수명"] = 저장할 값;
        $_SESSION["s_idx"] = $array["idx"];
        $_SESSION["s_name"] = $array["u_name"];
        $_SESSION["s_id"] = $array["u_id"];
        // echo "idx : ".$_SESSION["s_idx"]." / "."NAME : ".$_SESSION["s_name"]." / "."ID : ".$_SESSION["s_id"];

        /* DB 연결 종료 */
        mysqli_close($dbcon);

        /* 페이지 이동 */
        echo "
            <script type=\"text/javascript\">
                location.href = \"../index.php\";
            </script>
        ";
    };
};

만약 아이디가 존재하지 않으면 -> 메세지를 출력한 후, 이전 페이지로 이동하게 끔 한다.
아이디가 존재하면 ->
- DB에서 사용자 정보를 mysqli_fetch_array를 이용해 가져온다.
- 가져온 필드명에서 비밀번호가 일치하는지 일치하지 않는지를 비교한다.
비밀번호가 일치하지 않으면 -> 메세지 출력해주고, 이전페이지 이동
비밀번호가 일치하면 ->

🟤 조건처리 -> 비밀번호 일치

// 세션 변수 생성
// $_SESSION["세션변수명"] = 저장할 값;
$_SESSION["s_idx"] = $array["idx"];
$_SESSION["s_name"] = $array["u_name"];
$_SESSION["s_id"] = $array["u_id"];
// echo "idx : ".$_SESSION["s_idx"]." / "."NAME : ".$_SESSION["s_name"]." / "."ID : ".$_SESSION["s_id"];

/* DB 연결 종료 */
mysqli_close($dbcon);

/* 페이지 이동 */
echo "
<script type=\"text/javascript\">
location.href = \"../index.php\";
</script>
";

세션 변수를 생성해준다.

php의 세션?
php의 세션은 기본적으로 '파일 기반'이다.
이 방식은 세션 데이터를 서버의 디스크에 임시파일을 생성한 뒤 그 파일에 데이터를 저장하는 방식이다.
php의 설정에 따라 일정 시간이 지나면 세션 파일을 삭제를 하지만 일정 확률로 파일을 삭제하는 것이라서 완전히 삭제가 되지는 않는다. 또한 php 코드로 세션을 종료한 것이 아닌 브라우저 종료로 연결을 끊는 경우나 크롤링 등 프로그램으로 연속적으로 접근하는 경우에는 파일이 그대로 남아있게 된다. 결국 로그아웃을 하지 않고 브라우저만 종료를 하는 사람이 많다면 그만큼 세션 파일이 쌓이게 되는 것이다. 한 번씩 세션이 저장되는 폴더를 확인하여 오래된 파일을 삭제해 주는 것이 좋다.

그 전에 세션을 시작하기 위해서는 세션을 시작해줘야한다. session_start(); 문장으로 세션을 시작해주자!!

확인을 다 했으면 DB연결을 종료 후 index.php 페이지로 이동한다.

로그인 페이지 만들기 - 2 (index, logout)

로그인 페이지 만들기 - 1 (login, login_ok) 💡 로그인, 로그아웃 동적 페이지를 만들어 보자! ⭐️ 완성샷 로그인 전 index.php login/login.php -> login_ok.php 로그인 후 index.php 🔴 login.php 로그인 로그인 아

dpdnjs402.tistory.com

'Backend > PHP' 카테고리의 다른 글

[PHP] 관리자 페이지 만들기 - 2 (0)	2023.12.13
[PHP] 관리자 페이지 만들기 - 1 (0)	2023.12.13
[PHP] 회원탈퇴 페이지 만들기 (0)	2023.12.13
[PHP] 정보 수정 페이지 만들기 (0)	2023.12.11
[PHP] 로그인 페이지 만들기 - 2 (index, logout) (0)	2023.12.11

Contents

새소식

인기 검색어