DB에 저장된 계정 정보를 활용해 로그인을 하는 페이지를 만들어 보겠습니다
1️⃣ 아이디, 비밀번호 입력 받기
우선 사용자로부터 아이디와 비밀번호를 입력받을 폼을 만들어야 합니다
<form class="loginForm" method="POST" action="">
<div class="input-group">
<label for="userId">아이디</label>
<input type="text" id="username" name="username" placeholder="아이디 입력">
</div>
<div class="input-group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" placeholder="비밀번호 입력">
</div>
<button type="submit">로그인</button>
</form>저는 입력 받은 아이디와 비밀번호를 같은 페이지 내에서 처리할 예정이며, URL로 계정이 노출되면 안되기 때문에 method = “POST” action = “” 로 작성하였습니다
2️⃣ PHP 작성
이제 입력 받은 아이디와 비밀번호를 이용해 실제로 로그인을 진행하는 코드를 작성해야 합니다
우선 계정 정보가 있는 DB와 연결해야겠죠?
<?php
# 상수로 DB 주소, 아이디, 비밀번호, DB 이름 선언
define('DB_SERVER','localhost');
define('DB_USERNAME','admin');
define('DB_PASSWORD','admin1234');
define('DB_NAME','login');
#DB 연결
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
?>
그리고 사용자의 입력을 받아옵니다
<?php
$username = $_POST['username'];
$password = $_POST['password'];
?>
로그인은 아이디와 비밀번호를 모두 입력받았을 때 진행되어야 하니, 먼저 두 값이 모두 있는 지 확인한 후
값이 있다면 SELECT문을 통해 DB에 저장된 아이디 및 비밀번호와 일치하는 것이 있는 지 확인합니다
만약 결과가 있다면 로그인 성공이니 성공 메세지를 보여주고, 그렇지 않다면 로그인 실패 메세지를 보여줍니다
<?php
# 아이디와 비밀번호 모두 입력받았는 지 확인
if($username != "" && $password != ""){
# username = 입력받은 아이디 이면서 password = 입력받은 비밀번호인 데이터를 account 테이블에서 select
$sql = "SELECT * FROM account WHERE username='".$username."' and password = '".$password."';";
# SELECT문 실행하고 결과를 받아와 결과 데이터 1개를 fetch
$result = mysqli_query($db_conn, $sql);
$row = mysqli_fetch_array($result);
if($row[0]==""){ ?> # SELECT의 결과가 없는 경우 == 실패
<div class="error-message">
로그인 실패
</div>
<?php
} else { # select의 결과가 있는 경우 == 성공
# 로그인 성공
header("Location: http://localhost/loginSuccess.php?name=$username");
}
}
?>
저는 성공한 경우 header 함수를 통해 다른 페이지로 리다이렉션 하였습니다
header 함수는 다음과 같이 사용합니다
header('Location: http://www.example.com/');저는 이동할 URL에 $username을 파라미터로 주어 로그인 성공 메세지 페이지에 사용자 아이디를 전달하였습니다
# loginSuccess.php
<html>
<body>
<?php
# 파라미터로 전달받은 아이디를 저장하여 환영 메세지 출력
$username = $_GET['name'];
echo $username."님, 환영합니다";
?>
</body>
</html>만약 아이디나 비밀번호 중 빠진 게 있는 경우에는 아이디 또는 비밀번호를 입력해 달라고 해야합니다
<?php
else if ($username == "" xor $password == "") {
# 아이디 또는 비밀번호 입력 안 함
?>
<div class="error-message">
아이디 또는 비밀번호를 입력해주세요
</div>
<?php
}
?>
위 내용들을 전체 코드로 합치면 아래와 같습니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
<!-- Google Fonts 사용 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="loginPage.css">
</head>
<body>
<div class="login-container">
<h2>LOGIN</h2>
<form class="loginForm" method="POST" action="">
<div class="input-group">
<label for="userId">아이디</label>
<input type="text" id="username" name="username" placeholder="아이디 입력">
</div>
<div class="input-group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" placeholder="비밀번호 입력">
</div>
<button type="submit">로그인</button>
</form>
<?php
# 상수로 DB 주소, 아이디, 비밀번호, DB 이름 선언
define('DB_SERVER','localhost');
define('DB_USERNAME','admin');
define('DB_PASSWORD','admin1234');
define('DB_NAME','login');
#DB 연결
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
$username = $_POST['username'];
$password = $_POST['password'];
if($username != "" && $password != ""){
$sql = "SELECT * FROM account WHERE username='".$username."' and password = '".$password."';";
$result = mysqli_query($db_conn, $sql);
$row = mysqli_fetch_array($result);
if($row[0]==""){ ?>
<div class="error-message">
로그인 실패
</div>
<?php
} else {
# 로그인 성공
header("Location: http://localhost/loginSuccess.php?name=$username");
}
} else if ($username == "" xor $password == "") {
# 아이디 또는 비밀번호 입력 안 함
?>
<div class="error-message">
아이디 또는 비밀번호를 입력해주세요
</div>
<?php
}
?>
</div>
</body>
</html>
