Semi Login Page : Bootstrap version

DATE : 2023/10/28

Previous정적 페이지 vs 동적 페이지 NextSemi Login Page : CSS version

Last updated 1 year ago

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>';
}
?>

사용자가 username & password를 입력하고 Enter(or SUBMIT button)를 누르면

위에 작성된 result.php가 동작하게 된다.

result.php에서는

(1) 사용자가 입력한 username & password 값을 각각 앞 뒤 공백을 제거한 후 (trim())

변수 user & password에 할당한다.

(2) 만약 사용자가 username or password 중 하나라도 입력하지 않았다면

"Enter ID & Password" 문구를 출력하고 다시 login.html로 이동한다.

(3) 사용자가 입력한 값이 공백이 아닐 경우,

user 값이 "admin"이고 password 값이 "admin1234"를 만족하는 지 확인한다.

(4) 조건을 만족한다면 " Login Success!! You are admin." 문구를,

사용자가 username:password를 입력했지만 그 값이 admin:admin1234가 아닐 경우에는

"Login Fail!! You are not admin" 문구를 출력한다.

(작성된 코드는 단순히 admin:admin1234를 만족하는 경우에만 로그인에 성공하는 경우를

구현한 것이기 때문에 따로 DB를 사용하지는 않았다.)

마지막으로 로그인을 시도해 결과가 잘 나오는 지 확인해보자!

username:password를 입력해준다.

username : admin
password : admin1234

만약 사용자가 이와 같이 값을 입력했다면

"Login Success" 문구가 Popup으로 출력된다.

username : admin
password : ""

만약 password(or username)을 공백으로 입력했다면 (둘 다 공백일 경우에도)

"Enter ID & Password" 문구가 출력 되는 걸 확인할 수 있다.

username : admin
password : password

사용자가 username:password를 모두 입력했지만 admin:admin1234가 아닐 경우에는

"Login Fail" 문구가 나오는 걸 확인할 수 있다.

이렇게 해서 간단한 Login form을 만들어보았다.

지금은 특정 계정 값을 만족하면 로그인에 성공하도록 구현했지만 이후에는 어떻게 업그레이드 될지

기대 된다..!