눈사람의 해킹공부

[PHP] 로그인 페이지 구현과 CSS를 이용한 디자인 본문

웹

[PHP] 로그인 페이지 구현과 CSS를 이용한 디자인

5n0wman 2023. 10. 30. 14:07

이 포스트에서는 PHP 사이트에서 세션을 통해 로그인과 로그아웃 기능을 구현하는 방법을 설명합니다.
※ 이 포스트의 내용은  제타위키의 PHP 세션 로그인 구현 문서를 참고하여 작성하였습니다.

 

인터넷을 이용할 때 사용자(클라이언트)의 컴퓨터에 저장되는 간략한 정보를 ‘쿠키’라고 부르는데, ‘세션’은 이러한 정보가 서버에 저장되는 것을 말합니다. 서버에 저장되는 만큼 쿠키보다 보안이 좋기 때문에 로그인 기능은 세션을 이용합니다.

 

PHP 쿠키 로그인 구현과 거의 비슷합니다. 세션으로 구현할 때 다른 점은 다음 2가지입니다.

  • 세션 변수 사용 전에 session_start()를 써야 합니다.
  • 로그아웃 시 세션 제거함수 session_destory()를 사용할 수 있습니다.

회원정보 테이블은 다음과 같습니다. 다만 이 포스트에서는 세션 구현에 집중하기 위해 의도적으로 DB부분을 제외하고 간단히 배열에 기록하였습니다. (login_ok.php 참조)

ID PW Name
admin 1234 관리자
user 4321 사용자

먼저, 로그인 기능을 구현할 페이지를 어떻게 만들지 구상해 봅시다.

  1. 메인(index.php)은 로그인 페이지 링크를 생성합니다.
  2. 로그인 페이지(login.php)는 로그인용 폼을 만들고 로그인 처리용 페이지를 만들어서 처리합니다.
  3. 로그인 처리 페이지(login_ok.php)는 테이블에 저장한 계정 정보를 대조하여 로그인 성공 시 그 상태로 메인으로 복귀, 실패 시는 실패 안내 후 로그인 페이지로 돌아옵니다.
  4. 메인 페이지에 로그아웃 용 페이지로 가는 링크가 표시됩니다.
  5. 로그아웃 페이지(logout.php)는 세션을 삭제하여 로그아웃 처리하고 위의 1번으로 돌아갑니다.

이렇게 구현한다고 할 때, 이를 위해 다음과 같이 4개의 php 파일을 만들어 봅시다.

 

index.php

<!DOCTYPE html>
<?php session_start(); ?>
<html>
        <head>
                <meta charset="utf-8" />
                <title>PHP Session Login</title>
                <link rel="stylesheet" href="style.css">
        </head>
        <body>
                <h1>Snowman</h1>
                <?php
                        if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) {
                                echo "<p>로그인을 해 주세요. <a href=\"login.php\">[로그인]</a></p>";
                        } else {
                                $user_id = $_SESSION['user_id'];
                                $user_name = $_SESSION['user_name'];
                                echo "<p><strong>$user_name</strong>($user_id)님 환영합니다.";
                                echo "<a href=\"logout.php\">[로그아웃]</a></p>";
                        }
                ?>
                <hr />
                <p> My First php file.</p>
        </body>
</html>

 

세션에 로그인된 사용자 정보가 있는지 확인한 후 없으면 로그인 페이지로 연결하고 있으면 로그인한 사용자 정보를 보여줌과 함께 로그아웃 페이지로 연결합니다. 세션 정보를 확인하기 위해 PHP는 초전역변수 $_SESSION[]을 제공하고 있습니다. head부분에 css파일 링크 코드가 있는것을 볼 수 있는데 이는 밑에 sytle.css파일을 적용해 꾸며주기 위함입니다.

 

login.php

<!DOCTYPE html>
<?php session_start(); ?>
<html>
        <head>
                <meta charset="utf-8" />
                <title>PHP Session Login</title>
                <link rel="stylesheet" href="style_login.css">
        </head>
        <body>
                <div class="container">
                        <h1>Snowman</h1>
                <?php
                        if(!isset($_SESSION['user_id']) || !isset($_SESSION['user_name'])) { ?>
                <form method="post" action="login_ok.php">
                        <p>아이디: <input type="text" name="user_id"/> </p>
                        <p>비밀번호: <input type="password" name="user_pw"/> </p>
                        <p><input type="submit" value="로그인"/> </p>
                </form>
                <?php } else {
                        $user_id = $_SESSION['user_id'];
                        $user_name = $_SESSION['user_name'];
                        echo "<p><strong>$user_name</strong>($user_id)님은 이미 로그인하고 있습니다. ";
                        echo "<a href=\"index.php\">[돌아가기]</a> ";
                        echo "<a href=\"logout.php\">[로그아웃]</a></p>";
                } ?>
        </body>
</html>

 

로그인을 하기 위한 페이지입니다. session_start() 함수를 사용해 세션을 불러온 후 로그인 상태가 아닐 때 로그인 폼을 보여준 후에 로그인 처리 페이지로 이동시킵니다. 만약 로그인이 됐는데 로그인 페이지로 다시 들어왔다면 이미 로그인됐다는 메시지와 함께 메인으로 가는 링크와 로그아웃하는 링크를 보여주게됩니다. 마찬가지로 sytle_login.css 파일과 링크되어있습니다.

 

login_ok.php

<?php
        if (!isset($_POST['user_id']) || !isset($_POST['user_pw'])) {
                header("Content-Type: text/html; charset=UTF-8");
                echo "<script>alert('아이디 또는 비밀번호가 입력되지 않았거나 잘못된 접근입니다.');";
                echo "window.location.replace('login.php');</script>";
                exit;
        }
        $user_id = $_POST['user_id'];
        $user_pw = $_POST['user_pw'];
        $members = array(
                'admin' => array('password' => '1234', 'name' => '관리자'),
                'user'    => array('password' => '4321', 'name' => '사용자')
        );

        if (!isset($members[$user_id]) || $members[$user_id]['password'] != $user_pw) {
                header("Content-Type: text/html; charset=UTF-8");
                echo "<script>alert('아이디 또는 비밀번호가 잘못되었습니다.');";
                echo "window.location.replace('login.php');</script>";
                exit;
        }
        // id/pw가 동일하면
        session_start();
        $_SESSION['user_id'] = $user_id;
        $_SESSION['user_name'] = $members[$user_id]['name'];
?>
<meta http-equiv="refresh" content="0;url=index.php" />

 

로그인 처리용 페이지입니다. 여기서는 저장된 사용자 정보 테이블을 가져와 로그인 페이지에서 받아온 아이디와 비밀번호를 비교하여 다르면 로그인 실패로 처리하여 다시 로그인 페이지로 이동시키고 동일하면 로그인합니다. 

 

logout.php

<?php
    session_start();
    session_destroy();
?>
<meta http-equiv="refresh" content="0;url=index.php" />

 

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

저장된 세션을 불러온 후 그 세션 정보를 완전히 삭제함으로써 로그인 상태에서 벗어난 후, 다시 메인 페이지로 돌아갑니다.

이제 CSS 파일을 적용해 간단한 디자인을 해보도록 하겠습니다. php파일과 동일한 폴더에 CSS파일을 생성합니다.

style.css

/* 전체 페이지 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
    text-align: center;
    margin-top: 50px;
}
/* 로그인 관련 메시지 스타일 */
p {
    text-align: center;
    margin-top: 20px;
    color: #555;
}
a {
    color: #0077cc;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

 

위 css 파일을 index.php에 링크합니다. css 문법에 대한 자세한 설명은 다음 포스트에서 하도록 하겠습니다.

style_login.css

/* 전체 페이지 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
h1 {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}
form p {
    margin-bottom: 15px;
}
input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
input[type="submit"] {
    background-color: #0077cc;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
input[type="submit"]:hover {
    background-color: #0055a4;
}
a {
    color: #0077cc;
    text-decoration: none;
    margin-left: 10px;
}
a:hover {
    text-decoration: underline;
}

위 css 파일은 login.php파일에 링크합니다.

이렇게 하면 간단한 세션 로그인 기능의 구현이 완료됩니다.

'웹' 카테고리의 다른 글

[PHP/MYSQL] 회원 전용 게시판 만들기 3. 게시글 보기, 작성, 수정, 삭제  (0) 2023.11.21
[PHP/MYSQL] 회원 전용 게시판 만들기 2. 회원가입 및 로그인  (2) 2023.11.20
[PHP/MYSQL] 회원 전용 게시판 만들기 1. 메인페이지 및 헤더(푸터)파일  (0) 2023.11.20
[PHP] 회원가입, 로그인 페이지 만들기(DB활용)  (0) 2023.11.09
웹 서버(Web Server)와 WAS(Web Application Server)  (0) 2023.10.26
'웹' Related Articles more