백엔드 개발/PHP

[PHP]PHP를 이용한 로그인환경 구현

독학하는 정호빈 2022. 2. 10. 10:42

이번 글에서는 로그인 파트를 다루어 보겠습니다.

(데이터베이스는 MariaDB를 사용 중에 있습니다. 테이블은 따로 설명하지 않겠습니다.)

 

이전에 설명드렸던 함수들을 사용해서 로그인 환경을 구현을 해보았습니다. 디자인보다는 연동 과정에 신경을 써보았으며, 처음에 뜨는 화면부터 차근차근 살펴보겠습니다.

 

 

 

우선 첫 화면입니다. index.php인데요

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>반갑습니다!</title>
    <link rel="stylesheet" href="model2.css">
    <script>
        var parameter1 = "<?= $_COOKIE['userid'] ?>";
        var parameter2 = "<?= $_COOKIE['nickname'] ?>";

        function start() {
            location.href = "Dev://" + parameter1 + "/" + parameter2;
        }
    </script>
</head>

<body>
    <?php if (!$_COOKIE['userid']) { ?>
        <h1 class="title">중고거래 게임</h1>
        <div class="main">
            <h1>로그인</h1>
            <form action="login.php" method="POST">
                ID<br>
                <input class="input1" type="text" name="id"><br>
                비밀번호<br>
                <input class="input1" type="password" name="pw"><br><br>
                <input class="submit1" style='cursor:pointer' type="submit" value="로그인">
                <p>
                    <a href="createid.php"><span class="a1">회원가입</span></a>
                </p>
            </form>
        </div>
    <?php } else { ?>
        <h1 class="title">중고거래 게임</h1>
        <div class="container">
            <div class="main_login">
                <h2><?= $_COOKIE['nickname'] ?>님 반갑습니다.</h2>
                <p>
                    <a href="logout.php"><span class="a2">로그아웃</span></a>
                    <a href="modify.php"><span class="a1">정보수정</span></a>
                </p>
                <p style="margin-top: 30px;">
                    <input class="a3" style='cursor:pointer' type="button" value="게임시작" onclick="start()">
                </p>
                <p>
                    <a href=""><span class="a4">게임 다운로드</span></a>
                </p>
            </div>
            <div class="navbar">
                <div class="navbar2">
                    <h3>메뉴</h3>
                    <a href="index.php"><span class="a1">홈</span></a> <br><br>
                    <a href="board.php"><span class="a1">게시판</span></a>
                </div>
            </div>
        </div>
    <?php }
    ?>
</body>

</html>

첫 화면답게 로그인 창이 뜨도록 꾸며보았습니다. 이제 여기서 로그인 과정을 거칠 것입니다. 아이디와 비밀번호를 입력하여서 로그인 버튼을 누른다면, 아이디와 비밀번호를 비교하여 로그인 성공시켜주는 페이지와 회원가입을 해서 새로운 계정을 만들어내는 회원가입 페이지가 있을 것입니다. 회원가입부터 살펴보겠습니다.

 

 

 

createid.php입니다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
    <link rel="stylesheet" href="model2.css">
</head>

<body>

        <h1 class="title">중고거래 게임</h1>
        <div class="main">
            <h1>회원가입</h1>
            <form action="inputdata.php" method="POST">
                이름<br>
                <input class="input1" type="text" name="name"
                 placeholder="예시) 홍길동" onfocus="this.placeholder=''"
                 onblur="this.placeholder='예시) 홍길동'"><br>
                아이디<br>
                <input class="input1" type="text" name="id"
                 placeholder="예시) ABC123" onfocus="this.placeholder=''"
                 onblur="this.placeholder='예시) ABC123'"><br>
                비밀번호<br>
                <input class="input1" type="password" name="pw"
                 placeholder="예시) 1234" onfocus="this.placeholder=''"
                 onblur="this.placeholder='예시) 1234'"><br>
                email<br>
                <input class="input1" type="text" name="email"
                 placeholder="예시) ABC123@xxx.xxx" onfocus="this.placeholder=''"
                 onblur="this.placeholder='예시) ABC123@xxx.xxx'"><br>
                닉네임<br>
                <input class="input1" type="text" name="nick"
                 placeholder="예시) 장보고옴" onfocus="this.placeholder=''"
                 onblur="this.placeholder='예시) 장보고옴'"><br>
                전화번호<br>
                <input class="input1" type="text" name="number"
                 placeholder="예시) 010xxxxxxxx" onfocus="this.placeholder=''"
                 onblur="this.placeholder='예시) 010xxxxxxxx'"><br><br>
                <input class="submit1" style='cursor:pointer' type="submit" value="회원가입"><br>
                <p>
                    <a href="index.php"><span class="a1">홈으로</span></a>
                </p>
            </form>
        </div>
</body>

</html>

이름과 아이디 그리고 비밀번호, 이메일, 닉네임, 전화번호를 정보로 입력받고 있으며 해당 입력 폼을 클릭하면 글자가 사라지고 바깥 부분을 클릭하면 다시 글자가 생겨나도록 해보았습니다. 계정을 생성해보겠습니다.

 

회원가입이 성공했고 해당 과정의 코드를 살펴보겠습니다.

 

 

 

inputdata.php입니다.

<?php
$name = $_POST['name'];
$id = $_POST['id'];
$pw = $_POST['pw'];
$e_pw = password_hash($pw, PASSWORD_DEFAULT);
$email = $_POST['email'];
$phone = $_POST['number'];
$nickname = $_POST['nick'];
if ($name == null || $id == null || $pw == null || $email == null || $phone == null || $nickname == null) {
    echo "<script>alert('정보를 기입해주십시오')</script>";
    echo "<script>location.replace('createid.php')</script>";
} else {
    $conn = mysqli_connect('', '', '', '','');
    $qry = "INSERT INTO logintest (w_id,pw,email,w_nickname,phone,name)
            VALUES('$id','$e_pw','$email','$nickname','$phone','$name');";
    if ($result = mysqli_query($conn, $qry)) {
        echo "<script>alert('회원가입 성공')</script>";
        echo "<script>location.replace('index.php')</script>";
    } else {
        switch (mysqli_errno($conn)) {
                //아이디중복 1062
            case 1062:
                echo "<script>alert('중복된 아이디 혹은 닉네임 입니다.')</script>";
                echo "<script>location.replace('createid.php')</script>";
                break;
            default:
                echo "<script>alert('오류입니다. 다시 시도해주세요.')</script>";
                echo "<script>location.replace('createid.php')</script>";
                break;
        }
    }
}
?>

POST로 넘어온 입력값들을 변수에 받아주고, 비밀번호는 암호화 함수를 이용해 암호화해서 데이터베이스에 저장합니다. 이렇게 하면 보안을 높일 수 있습니다. 어떠한 정보라도 입력하지 않으면 다시 입력하도록 코드를 짜두었고, UNIQUE조건을 가지고 있는 아이디와 닉네임이 겹친다면 에러코드를 검출하여 중복된 아이디와 닉네임임을 알립니다. 이제 회원가입을 마쳤으니 로그인을 해보도록 하겠습니다.

 

 

 

login.php입니다.

<?php
$id = $_POST['id'];
$pw = $_POST['pw'];
if ($id == null || $pw == null) {
    echo "<script>alert('빈칸을 채워주세요')</script>";
    echo "<script>location.replace('index.php')</script>";
} else {
    $conn = mysqli_connect('', '', '', '', '');
    $qry = "SELECT * FROM logintest WHERE w_id='{$id}';";
    if ($result = mysqli_query($conn, $qry)) {
        if ($row = mysqli_fetch_assoc($result)) {
            if (password_verify($pw, $row['pw'])) {
                setcookie('userid', $row['w_id'], time() + 10800);
                setcookie('email', $row['email'], time() + 10800);
                setcookie('name', $row['name'], time()+ 10800);
                setcookie('phone', $row['phone'],time()+ 10800);
                setcookie('nickname', $row['w_nickname'],time()+ 10800);
                setcookie('pw', $row['pw'],time()+ 10800);
                echo "<script>alert('로그인성공')</script>";
                echo "<script>location.replace('index.php')</script>";
            } else {
                echo "<script>alert('비밀번호가 다릅니다.')</script>";
                echo "<script>location.replace('index.php')</script>";
            }
        } else {
            echo "<script>alert('ID가 존재하지 않습니다.')</script>";
            echo "<script>location.replace('index.php')</script>";
        }
    }
}
?>

받아온 아이디가 속하는 튜플의 정보들을 불러와서 해당 비밀번호를 비교합니다. 비밀번호가 일치하면 나중에 정보 수정에 쓰일 정보들을 쿠키에 저장합니다. 로그인 화면입니다.

 

쿠키에 저장된 닉네임을 보여주면서 꾸며둔 페이지가 뜨면서 로그인이 이루어졌다는 것을 알 수 있습니다. 로그아웃을 해보겠습니다.

 

 

 

logout.php입니다.

<?php
    setcookie('userid','' , time() -1);
    setcookie('email', '', time() -1);
    setcookie('name', '', time()-1);
    setcookie('phone','',time()-1);
    setcookie('nickname', '',time()-1);
    setcookie('pw', '',time()-1);
?>
<meta http-equiv="refresh" content="0;url=index.php" />

생성했던 쿠키 정보들을 모두 삭제시켜줍니다.

 

 

 

 

이상으로 로그인 구현 과정은 마쳤습니다. 다음에는 정보수 정과정과 게시판 구현에 대해서 알아보도록 하겠습니다. 감사합니다.

저작자표시

'백엔드 개발 > PHP' 카테고리의 다른 글

[PHP]PHP를 이용한 게시판구현  (0) 2022.02.14
[PHP]PHP를 이용한 정보수정  (0) 2022.02.12
[PHP]PHP를 이용한 졸업작품 프로젝트  (0) 2022.02.07
[PHP] 개발환경 설정  (0) 2022.01.26
PHP  (0) 2021.12.27

'백엔드 개발/PHP'의 다른글

  • 현재글[PHP]PHP를 이용한 로그인환경 구현

관련글

댓글

티스토리툴바