[목표]

1. admin / admin1234 라고 입력했을 때 로그인 되는 페이지 만들기

2. 예쁘게 꾸미기 (CSS, Bootstrap)

 

 

[HTML 파일 만들기]

우선 편의를 위해 index.html를 로그인 창으로 쓰기로 결정했다.

간단하게 id, pw만 input으로 받고 이 정보는 POST method를 사용하기로 한다.

이렇게 받은 name값은 login.php로 전달해준다.

 

비밀번호가 생각나지 않거나, 계정이 없는 사용자를 위한 링크도 만들어 두었다. (해당 php는 지금 굳이 만들지 않음)

CSS를 적용하기 위해 style.css파일을 만들고 header에 link했다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Login</title>
</head>

<body>
    <div class="container">
        <div class="login_warp">
            <h1>Welcome!!!</h1>
            <form action="./login.php" method="POST">
                <div class="login_input"><input type="text" name="id" placeholder="ID"></div>
                <div class="login_input"><input type="password" name="pw" placeholder="Password"></div>
                <div class="login_input"><input type="submit" value="로그인"></div>
                <hr>
                <p><a href="find_pw.php">Forgot Password?</a></p>

                <p>Don't have an account?
                    <a href="sign_up.php">Sign up</a>
                </p>

            </form>
        </div>
    </div>
</body>

</html>

 

 

 

[login.php 파일 만들기]

최대한 단순하게 작성했다.

index.html에서 name으로 받은 id, pw 파라미터를 각각의 이름 변수에 저장한다.

if제어문을 사용하여 id, pw의 값이 admin, admin1234와 동일하다면 로그인 성공 메세지를, 다르다면 비밀번호 확인 요청 메세지를 내보낸다.

 

메세지 확인 후 다시 로그인 창으로 돌아갈 수 있게 링크를 넣었다. 

<?php
// 아이디와 비밀번호 각 변수에 넣기
$id = $_POST['id'];
$pw = $_POST['pw'];

// 설정된 정보와 일치하는지 체크하여 그에 맞는 메시지 출력
if ($id === 'admin' && $pw === 'admin1234') {
    $message = '로그인에 성공했습니다.';
} else {
    $message = '비밀번호를 확인해 주세요.';
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>로그인 결과</title>
</head>
<body>
    <h1>로그인 결과</h1>
    <?php echo $message; ?>
    <p><a href="index.html">로그인 창으로 이동</a></p>
</body>
</html>

 

 

 

[CSS 파일 만들기]

chat-gpt의 도움을 받았다.

원하는 모양이 나올 때까지 수정 요청을 했다.

body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login_warp {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    padding: 40px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #262626;
    font-size: 24px;
    margin-bottom: 40px;
}

form {
    width: 100%;
}

.login_input {
    margin-bottom: 15px;
}

input[type="text"],
input[type="password"],
input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
    box-sizing: border-box; /* 추가: 박스 모델에 패딩과 테두리 포함 */
}

input[type="submit"] {
    background-color: #ff8080; /* 붉은 파스텔 계열 */
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #ff6666; /* 붉은 파스텔 계열 (마우스 호버 시) */
}


hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #dbdbdb;
}

a {
    color: #0095f6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p {
    text-align: center;
    margin-top: 15px;
    color: #262626;
    font-size: 14px;
}

 

 

 

 

PHP 학습은 생활코딩에서 진행했다.

전체 내용을 다 봤지만, 그 중에서도 <PHP에서 FORM과 POST>부분이 도움됐다.

 

 

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

[3주차 - 2] PHP, Session 연결과 로그아웃  (0) 2023.11.15
[3주차 - 1] PHP, HASH (비밀번호 저장, 로그인 과정)  (0) 2023.11.13
[2주차 - 3] Mini-Mission (php mysql 점수출력 페이지 만들기, DB활용)  (0) 2023.11.05
[2주차 - 2] DB 연결 (linux mysql DB 연결 확인, 연결 티켓 만들기)  (0) 2023.11.05
[2주차 - 1] DB 연결 환경설정(Mysql설치, phpMyAdmin 설치)  (0) 2023.11.05

+ Recent posts

티스토리툴바