간단한 로그인 페이지

Study/with normaltic

간단한 로그인 페이지

renia256 2025. 4. 8. 23:42

index.php

// index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>nciwo</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="nciwo_title">
            <h1>nciwo</h1>
        </div>
        <div class="login">
            <form action="login_proc.php" method="POST">
                <div class="login-text"><p>ID</p></div>
                <input type="text" name="id">
                <div class="login-text"><p>PASSWORD</p></div>
                <input type="password" name="pw">
                <input type="submit" value="Login">
                <p id="error-message">
                <?php
                    if(!empty($_GET['login']) && !empty($_GET['n'])) {
                        if($_GET['login'] === "failed") {
                            switch($_GET['n']) {
                                case 1:
                                    echo "ID field is empty!";
                                    break;
                                case 2:
                                    echo "PASSWORD field is empty!";
                                    break;
                                case 3:
                                    echo "It's invalid ID or PASSWORD!";
                                    break;
                            }
                        }
                    }
                ?>
                </p>
            </form>
        </div>
    </body>
</html>

`<form>` 태그에서는 POST Method를 이용해 id와 pw를 login_proc.php로 넘긴다.

아래의 php 구문은 로그인에 실패했을 시 login_php에서 파라미터를 통해 로그인 실패 이유를 받아와 띄운다.

login_proc.php

// login_proc.php

<?php
    function goBack($n) {
        header("Location: /?login=failed&n=".$n);
    }
    if(!empty($_POST['id'])) {
        if(!empty($_POST['pw'])) {
            if($_POST['id'] === "admin" && $_POST['pw'] === "admin123") {
                header("Location: home.php");
            }
            else {
                goBack(3);
            }
        }
        else {
            goBack(2);
        }
    }
    else {
        goBack(1);
    }
?>

받아온 id와 pw가 각각 "admin", "admin123"에 일치하는지 판단 후, 맞다면 home.php로, 아니라면 `goBack()` 함수를 통해 로그인 페이지로 돌려보낸다.

home.php

<html>
    <head><title>home</title></head>
    <body style="display: flex; flex-direction: column; justify-content: center; align-items: center; ">
        어 반갑고
    </body>
</html>

살갑게 인사해주는 페이지를 만나볼 수 있다.

스크린샷

사이트 인테리어

/* style.css (connected to index.php) */

* {
    font-family: consolas;
}

div.nciwo_title h1 {
    color: #7b2480;
    margin: 20px 0px 0px 0px;
}

div.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #57ba9b;
    width: 60%;
    margin-left: 20%;
    padding: 10% 8px 10% 8px;
    border-radius: 10px;
}

div.login form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.nciwo_title {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.login input {
    border: none;
    background-color: #d9d9d9;
    border-radius: 10px;
    outline: none;
    padding: 8px;
    margin: 1px 0px 10px 5px;
    width: 150px;
}

div.login-text {
    width: 150px;
}

div.login p {
    margin: 2px 0px 0px 0px;
    color: white;
    font-size: 12px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px #d9d9d9 #fff inset;
    box-shadow: 0 0 0px 1000px #d9d9d9 inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #d9d9d9 inset;
    box-shadow: 0 0 0px 1000px #d9d9d9 inset;
    transition: background-color 5000s ease-in-out 0s;
}

div.login input[type=submit] {
    background-color: #36869e;
    margin-top: 40px;
    cursor: pointer;
    width: 220px;
    font-weight: bold;
    color: #dbdbdb;
}

div.login input[type=submit].focus {
    background-color: #246180;
}

p#error-message {
    color: #8f2828;
}

중간에 input 관련된 코드는 복붙. id field에 자동완성으로 텍스트를 채우면 css 디자인이 초기화돼버리는 상황이 발생하는 것을 막아주는 코드.