본문 바로가기
IT/PHP

PHP(5) 로그인, 로그아웃

by Sungjun_ 2020. 2. 8.

저번 시간까지 회원가입을 만들었으니, 이번에는 로그인 기능을 만들겠습니다.

 

위와 같이 member 폴더 안에 login.php 파일을 만들어줍니다.

<!-- login.php -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/default.css">
    <link rel="stylesheet" href="../css/style.css?ver=6">
    <title>Sung 영화 리뷰</title>
</head>
<body>
    <header>
        <nav id="navBar">
            <div class="navBarCon">
                <div class="navBarleft">
                    Sung`s 영화 리뷰
                </div>
                <div class="navBarItem">
                    <ul>
                        <a href="../main.php"><li>홈으로</li></a>
                        <a href="../border/review.php"><li>리뷰 보기</li></a>
                    </ul>
                </div>
                <div class="navBarRight"></div>
                    <div class="navBarLogin">
                        <a href="login.php">로그인</a>
                    </div>
            </div>
        </nav>
    </header>
    <section>
        <div class="mainCon">
            <div class="loginTitle">로그인</div>
            <form action="member_process.php?mode=login" method="post" class="loginForm">
                <p class="loginId">아이디 : <input type="text" name="userid"></p>
                <p class="loginPw">비밀번호 : <input type="password" name="pw"></p>
                <div class="loginButton">
                <input type="submit" value="로그인">
                <input type="button" value="취소" onclick="location.href='../main.php'">
                </div>
            </form>
            <div class="registerAndFind">
            <a href="register.php">회원가입</a>&nbsp;|
            <a href="">아이디/비밀번호 찾기</a>
            </div>
        </div>
    </section>
    <footer></footer>
</body>
</html>

그리고 위와 같이 login.php 내용을 작성해줍니다.

저번에 만든 member_process.php 파일을 이용하기 때문에 member_process.php?mode=login 이렇게 입력해줍니다.

 

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
 { 
     margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; 
} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{ 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul
 { 
    list-style: none; 
} 
blockquote, q 
{ 
    quotes: none; 
} 
blockquote:before, blockquote:after, q:before, q:after 
{ 
    content: ''; content: none;
 } 
 table 
 {
     border-collapse: collapse; border-spacing: 0; 
}

 

이건 제가 사용한 default.css이고

#navBar{
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 500;
    background-color: rgb(46, 67, 97);
}
.navBarCon{
    display: flex;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.navBarleft{
    display: flex;
    padding-top: 10px;
    font-size: 40px;
    color: white;
    width: 30%;
}
.navBarItem{
    width: 40%;
}
.navBarItem ul{
    display: block;
    
}
.navBarItem li{
    float: left;
    margin-left: 50px;
    margin-top: 10px;
    font-size: 20px;
}

a:link, a:visited{
    color: gray;
    text-decoration: none;
}

a:hover, a:active{
    color:white
}
.navBarRight{
    width: 20%;
}
.navBarLogin{
    font-size: 20px;
    text-align: right;
    padding-top: 10px;
} 
.mainCon{
    width: 80%;
    height: 800px;
    margin: auto;

}
.registerTitle{
    width: 100%;
    height: auto;
    margin-top: 40px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
} 

.registerTable{
    width: 35%;
    height: auto;
    margin: auto;
    margin-top: 50px;
    font-size: 20px;
    text-align: center;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}
.registerTable tr{
    height: 40px;
}

.registerTable td{
    padding-top: 7px;
}
.registerSubmit{
    width: 35%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}
.loginTitle{
    width: 22%;
    margin: auto;
    margin-top: 50px;
    text-align: center;
    font-size: 45px;
}

.loginForm {
    width: 22%;
    margin: auto;
    margin-top: 50px;
    font-size: 25px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.loginId{
    margin-top: 10px;
    text-align: right;

}
.loginPw{
    margin-top: 5px;
    text-align: right;
}

.loginButton{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.registerAndFind{
    width: 22%;
    margin: auto;
    margin-top: 20px;
    font-size: 15px;
    text-align: center;
}

.registerAndFind a:link, .registerAndFind a:visited{
    color: black;
}

이건 style.css입니다.

 

css까지 적용시키면

login.php

이렇게 화면이 나올겁니다.

 

그리고 이제 member_precess.php 파일로 갑니다.

저번 시간에 만든

case 'register'

.

.

.

.

break;

 

이 코드 바로 아래에

case 'login':
      	    $userid = $_POST['userid'];
            $pw = $_POST['pw'];

            $sql = $db -> prepare("SELECT * FROM register WHERE userid=:userid");
            $sql -> bindParam("userid",$userid);
            $sql -> execute();
            $row = $sql -> fetch();

            if(!$userid){
                errMsg("아이디를 입력해주세요.");
            } elseif(!isset($row['userid'])){
                errMsg('존재하지 않는 아이디입니다.');
            } elseif(!$pw){
                errMsg('비밀번호를 입력해주세요.');
            } elseif($pw != $row['pw']){
                errMsg('비밀번호가 일치하지 않습니다.');
            }     

header('location:../main.php');
break;

이렇게 코드를 넣어 줍시다.

 

 

login.php에서 POST로 보내온 userid, pw를 각각 변수에 저장해주고

SELECT으로 register 테이블에서 userid 값이 $userid인 것을 고릅니다.

 

$row = $sql -> fetch(); 이 부분은

 

현재 register 테이블에 이렇게 저장이 돼있는데

제가 로그인시 아이디 부분에 sungs를 입력했으면

userid가  sungs인 부분의 행의 각 값들을 $row 변수에 저장 시켜주는 것입니다.

 

예를 들어

 

case 'login':
            $userid = $_POST['userid'];
            $pw = $_POST['pw'];

            $sql = $db -> prepare("SELECT * FROM register WHERE userid=:userid");
            $sql -> bindParam("userid",$userid);
            $sql -> execute();
            $row = $sql -> fetch();

            echo $row['userid'], $row['pw'], $row['name'], $row['sex'] ;
            /*
            if(!$userid){
                errMsg("아이디를 입력해주세요.");
            } elseif(!isset($row['userid'])){
                errMsg('존재하지 않는 아이디입니다.');
            } elseif(!$pw){
                errMsg('비밀번호를 입력해주세요.');
            } elseif($pw != $row['pw']){
                errMsg('비밀번호가 일치하지 않습니다.');
            }



            header('location:../main.php');*/
        break;

member_process.php에서 if와 header 부분을 주석 처리하고 그 위에 echo 문을 저렇게 넣어 줍니다.

그 다음에 로그인 창에 위와 같이 sungs를 입력하고 로그인을 클릭하면

 

echo문 결과

화면에 위와 같이 순서대로 아이디. 비밀번호, 이름, 성별이 뜨는 것을 확인 할 수 있습니다.

 

 

다시 주석을 지우고 원래 코드로 돌아옵시다.

case 'login':
            $userid = $_POST['userid'];
            $pw = $_POST['pw'];

            $sql = $db -> prepare("SELECT * FROM register WHERE userid=:userid");
            $sql -> bindParam("userid",$userid);
            $sql -> execute();
            $row = $sql -> fetch();


            if(!$userid){
                errMsg("아이디를 입력해주세요.");
            } elseif(!isset($row['userid'])){
                errMsg('존재하지 않는 아이디입니다.');
            } elseif(!$pw){
                errMsg('비밀번호를 입력해주세요.');
            } elseif($pw != $row['pw']){
                errMsg('비밀번호가 일치하지 않습니다.');
            }



            header('location:../main.php');
        break;

 

if 문은 각각 errMsg에 입력한 그대로 아이디, 비밀번호 미입력 /  비밀번호 일치 등을 확인 하는 것입니다.

아이디 미입력 시
없는 아이디 입력 시
비밀번호 미입력 시
비밀번호가 일치하지 않을 시

이제 로그인이 제대로 됐는지 확인해봅시다.

 

먼저 member_process.php 에 다음과 같이 입력해줍니다.

<?php
    session_start();
    require_once('../db/db.php');

    switch ($_GET['mode']){
        case 'register':
        $id = $_POST['id'];
        $userid = $_POST['userid'];
        $pw1 = $_POST['pw1'];
        $pw2 = $_POST['pw2'];
        $name = $_POST['name'];
        $sex = $_POST['sex'];
        $tel = $_POST['tel'];
        $email = $_POST['email'];
        
        $sql = $db -> prepare('INSERT INTO register
        (id, userid, pw, name, sex, tel, email, redate) /*이 부분은 DB 테이블에서 만든 이름과 똑같이 입력해줍니다.*/
        VALUE(:id, :userid, :pw, :name, :sex, :tel, :email, now())');

        $sql -> bindParam(':id',$id);
        $sql -> bindParam(':userid',$userid);
        $sql -> bindParam(':pw',$pw1);
        $sql -> bindParam(':name',$name);
        $sql -> bindParam(':sex',$sex);
        $sql -> bindParam(':tel',$tel);
        $sql -> bindParam(':email',$email);

        if($pw1 != $pw2){
            errMsg("비밀번호가 일치하지 않습니다.");
        }

        $sql -> execute();
        
        header('location:../main.php');
        break;

        case 'login':
            $userid = $_POST['userid'];
            $pw = $_POST['pw'];

            $sql = $db -> prepare("SELECT * FROM register WHERE userid=:userid");
            $sql -> bindParam("userid",$userid);
            $sql -> execute();
            $row = $sql -> fetch();

            if(!$userid){
                errMsg("아이디를 입력해주세요.");
            } elseif(!isset($row['userid'])){
                errMsg('존재하지 않는 아이디입니다.');
            } elseif(!$pw){
                errMsg('비밀번호를 입력해주세요.');
            } elseif($pw != $row['pw']){
                errMsg('비밀번호가 일치하지 않습니다.');
            }

            $_SESSION['userid'] = $row['userid'];
            $_SESSION['name'] = $row['name'];

            header('location:../main.php');
        break;
    }
?>

 

먼저 가장 위에 session_start();를 넣어줍니다. 그 이유는 로그인 정보를 세션에 저장할 것이기 때문입니다.

그리고 case 'login' 안에서 header 위쪽에

$_SESSION['userid'] = $row['userid'];

$_SESSION['name'] = $row['name'];

이렇게 입력해 세션에 유저의 아이디와 이름을 저장시켜줍니다.

 

다음으로 main.php에 다음과 같이 입력해줍니다.

위 블록이 main.php, 아래 블록이 css 파일입니다.

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/style.css?ver=8">
    <title>Sung's 영화 리뷰</title>
</head>
<body>
    <header>
        <nav id="navBar">
            <div class="navBarCon">
                <div class="navBarleft">
                    Sung's 영화 리뷰
                </div>
                <div class="navBarItem">
                    <ul>
                        <a href="main.php"><li>홈으로</li></a>
                        <a href="border/review.php"><li>리뷰 보기</li></a>
                    </ul>
                </div>
                <div class="navBarRight">
                    <div class="navBarLogin">
                        <?php if(!isset($_SESSION['userid'])){
                            echo '<a href="member/login.php">로그인</a>';
                        } else {
                        echo '<div class="helloUser">'.$_SESSION['name'].'님 환영합니다.</div>';
                        echo '<div class="outAndUpdate"><a href="member/member_process.php?mode=logout">로그아웃</a> | 
                        <a href="member/update.php">정보수정</a>
                        </div>';
                        }
                        ?>  
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <section>
        <div class="mainCon">

        </div>
    </section>
    <footer></footer>
</body>
</html>
/*css 파일*/
#navBar{
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 500;
    background-color: rgb(46, 67, 97);
}
.navBarCon{
    display: flex;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.navBarleft{
    display: flex;
    padding-top: 10px;
    font-size: 40px;
    color: white;
    width: 30%;
}
.navBarItem{
    width: 40%;
}
.navBarItem ul{
    display: block;
    
}
.navBarItem li{
    float: left;
    margin-left: 50px;
    margin-top: 10px;
    font-size: 20px;
}

a:link, a:visited{
    color: gray;
    text-decoration: none;
}

a:hover, a:active{
    color:white
}
.navBarRight{
    width: 30%;
}
.navBarLogin{
    font-size: 20px;
    text-align: right;
    padding-top: 10px;
} 
.mainCon{
    width: 80%;
    height: 800px;
    margin: auto;

}
.registerTitle{
    width: 100%;
    height: auto;
    margin-top: 40px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
} 

.registerTable{
    width: 35%;
    height: auto;
    margin: auto;
    margin-top: 50px;
    font-size: 20px;
    text-align: center;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}
.registerTable tr{
    height: 40px;
}

.registerTable td{
    padding-top: 7px;
}
.registerSubmit{
    width: 35%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}
.loginTitle{
    width: 22%;
    margin: auto;
    margin-top: 50px;
    text-align: center;
    font-size: 45px;
}

.loginForm {
    width: 22%;
    margin: auto;
    margin-top: 50px;
    font-size: 25px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.loginId{
    margin-top: 10px;
    text-align: right;

}
.loginPw{
    margin-top: 5px;
    text-align: right;
}

.loginButton{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.registerAndFind{
    width: 22%;
    margin: auto;
    margin-top: 20px;
    font-size: 15px;
    text-align: center;
}

.registerAndFind a:link, .registerAndFind a:visited{
    color: black;
}

.helloUser{
    color: white;
    width: 100%;
}

.outAndUpdate{
    color: gray;
    margin-top: 5px;
    font-size: 16px;
}

파일 가장 위에 session_start();를 넣어주고 

기존 로그인이 있던 자리에 if문을 사용해 세션 userid 값이 없으면 로그인 표시를

userid 값이 있으면 이름과 문구를 출력하게합니다.

 

이제 메인 페이지에서 로그인을 클릭해서 로그인 화면으로 가서 로그인을 해봅시다.

그럼 메인 페이지로 돌아오면서

이렇게 화면 오른쪽 상단에 이름과 환영 문구가 보이는 것을 확인할 수 있습니다.

 

마지막으로 로그아웃입니다.

로그아웃도 member_process.php에서 진행되기 때문에

member_process.php에 다음과 같이 입력해줍니다.

 

case 'logout':
            session_unset();
            header('location:../main.php');
break;

 

이렇게 입력하면 끝입니다.

 

그리고 메인 페이지에서 로그아웃을 클릭하면

 

이렇게 로그인 표시로 바뀌는 것을 확인할 수 있습니다.

 

 

오늘은 이것으로 마치겠습니다.

다음에는 회원정보 수정으로 찾아오겠습니다.

 

# Visual Studio Code, Xampp, MySQL Workbench 환경에서 작성된 코드입니다.

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

PHP(7) 아이디/비밀번호 찾기  (0) 2020.02.12
PHP(6) 회원정보 수정  (0) 2020.02.09
PHP(4) 회원가입 페이지 만들기  (0) 2020.02.06
PHP(3) 회원가입 페이지 만들기  (0) 2020.02.02
PHP(2) DB생성 및 연결  (0) 2020.02.02

관련글

댓글

티스토리툴바