[PHP] 로그인 페이지 만들기

dpdnjs402·2021년 12월 7일
loginphp회원가입
0

PHP, APACHE

목록 보기
5/14

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

⭐️ 완성샷

  • 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개 만들어 줬다.
  • 이전으로 버튼에는 뒤로가기 버튼을 만들어 준다.

🟠 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";
  • inc(lude)폴더에 dbcon.php를 만들어 필요할 때마다 include로 불러오면 편하다.

🟤 쿼리 작성

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

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

// 세션 변수 생성
// $_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 페이지로 이동한다.

🟡 index.php

<?php
    session_start();

    $s_id = isset($_SESSION["s_id"])? $_SESSION["s_id"]:"";
    $s_name = isset($_SESSION["s_name"])? $_SESSION["s_name"]:"";
    // echo "Session ID : ".$s_id." / Name : ".$s_name;
?>
  • isset() 함수를 이용해 세션 아이디와 이름이 있으면 값을 가져오고, 없으면 값을 가져오지 않는다는 문장을 만든다.
<?php if(!$s_id){/* 로그인 전  */ ?>
    <p>
        <a href="login/login.php" class="bar">로그인</a>
        <a href="members/join.php">회원가입</a>
    </p>
    <?php } else{ /* 로그인 후 */ ?>
    <p>"<?php echo $s_name; ?>"님, 안녕하세요.</p>
    <p>
        <?php if($s_id == "admin"){ ?>
        <a href="admin/admin.php" class="bar">관리자</a>
        <?php }; ?>
        <a href="login/logout.php" class="bar">로그아웃</a>
        <a href="members/edit.php">정보수정</a>
    </p>
<?php }; ?>
  • 세션 아이디가 없으면 -> 로그인, 회원가입 링크만 보이게 해주고
  • 세션 아이디가 있으면 이름, 로그아웃, 정보수정이 보인다.
  • 대신 관리자는 관리자 링크가 따로 보인다.

🟢 logout.php

<?php
session_start();

/* 세션 삭제 */
unset($_SESSION["s_idx"]);
unset($_SESSION["s_name"]);
unset($_SESSION["s_id"]);

/* 페이지 이동 */
echo "
    <script type=\"text/javascript\">
        alert(\"로그아웃 되었습니다.\");
        location.href = \"../index.php\";
    </script>
";
?>
  • 로그아웃은 세션을 시작해주고, unset()함수를 이용해 저장된 세션 변수를 해제해주면된다.
profile
전예원
앞으로 나아가는 중~
이전 포스트

[Apache] localhost 오류 해결

다음 포스트

[PHP] 정보 수정 페이지

0개의 댓글