Semi Login Page : Bootstrap version

DATE : 2023/10/28

1주차 과제로 간단한 login page를 만들어 보도록 하자!!

전체적인 흐름은 사용자가 admin:admin1234를 입력했을 때만

로그인에 성공하도록 처리할 것!

완성된 페이지를 먼저 확인해보면 아래와 같다.

Username & Password를 입력하는 두 개의 <input>과 제출 버튼 역할을 하는 element가 필요해 보인다.

그럼 바로 login.html 코드를 확인해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="./login.css">
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <form action="result.php" method="post">
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label"> Username </label>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="user">
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" name="pass">
            </div>
            <button type="submit" class="btn btn-primary">SUBMIT</button>
        </form>
    </div>
</body>
</html>

지금 살펴보는 코드는 bootstrap을 이용해 스타일을 입히기 때문에

<head> - <link>로 Bootstrap을 사용할 수 있도록 연결해준다.

(추가적인 부분은 간단하게 css로 작성했기 때문에 login.css 파일도 연결)

<body> tag 안에 작성된 내용을 살펴보면

container 역할을 하는 <div> 안에 form이 구성되어 있는 걸 확인할 수 있다.

form은 앞에서 말했듯이 Username & Password를 입력하는 용도의 <input>과

제출 버튼 용도의 <button> tag를 사용하고 있다.

code의 대부분은 작성된 bootstrap code를 가져온 것이고

PHP를 고려해 <input>에 name 속성만 추가했다.

다음으로 PHP code를 살펴보기 전에!

<form> tag에 작성한 내용에 의해

method = " post" -> input에 입력한 데이터가 $_POST로 들어간다.
action = "result.php" -> button을 누르면 result.php가 실행된다.

위와 같이 동작한다는 걸 알고 넘어가자.

[result.php]

<?php
$user = trim($_POST['user']);
$password = trim($_POST['pass']);


if ($user == '' || $password == '') {
    echo 
    '<script>alert("Enter ID & Password");
        location.href = "login.html";
    </script>';
}

if($user == 'admin' && $password == 'admin1234') {
    echo 
    '<script>alert("Login Success!! You are admin.");
    location.href = "login.html";
    </script>';
} else {
    echo 
    '<script>alert("Login Fail!! You are not admin.");
    location.href = "login.html";
    </script>';
}
?>