⯌ 로그인 페이지 구현 - DB연결 X
<?php
$username = $_POST['id'];
$password = $_POST['pw'];
if ($username == "admin" && $password == "admin1234") {
echo "Login successful! Welcome, $username.";
} else {
echo "Login failed! Please check your User ID and User Password.";
}login2_proc.php
<form method="POST" action="login2_proc.php">
<input type="text" name="id" placeholder="User ID"/>
<input type="password" name="pw" placeholder="User Password"/>
<input type="submit" value="Login"/>
</form>login2.php
⟡ 아이디 & 비밀번호 입력 시 출력화면 (CSS 적용 X)
⯌ CSS를 활용하여 로그인 화면 꾸미기
⟡ HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LogIn Page</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="simple-login-container">
<h2>로그인</h2>
<form method="post" action="login.php">
<div class="row">
<div class="col-md-12 form-group">
<input type="text" name="id" class="form-control" placeholder="ID" required>
</div>
<div class="col-md-12 form-group">
<input type="password" name="pw" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<input type="submit" class="btn btn-block btn-login" value="로그인">
</div>
</div>
</form>
</div>
</body>
</html>login.html
⟡ CSS 코드
body {
background-color: #5286F3;
font-size: 14px;
color: #fff;
}
.simple-login-container {
width: 300px;
max-width: 100%;
margin: 50px auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.simple-login-container h2 {
text-align: center;
font-size: 20px;
}
.simple-login-container .btn-login {
background-color: #FF5964;
color: #fff;
}
.alert {
font-size: 16px;
}
.alert-success {
background-color: #28a745;
color: #fff;
}
.alert-danger {
background-color: #dc3545;
color: #fff;
}login.css
⟡ PHP 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Result</title>
<link rel="stylesheet" href="login.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="simple-login-container">
<h2>로그인 결과</h2>
<?php
$id = $_POST['id'] ?? null;
$pw = $_POST['pw'] ?? null;
if ($id === "admin" && $pw === "admin1234") {
echo '<div class="alert alert-success text-center" role="alert">
<strong>로그인 성공!</strong> 환영합니다.
</div>';
} else {
echo '<div class="alert alert-danger text-center" role="alert">
<strong>로그인 실패!</strong> <br></br>아이디 또는 비밀번호가 올바르지 않습니다.
</div>';
}
?>
<a href="test.html" class="btn btn-primary btn-block mt-3">돌아가기</a>
</div>
</body>
</html>login.php
🪄 최종 로그인 화면 (CSS 적용)
'웹 모의해킹 취업반 스터디 > 과제' 카테고리의 다른 글
| [ 1개월 | 3주차 과제 ] 로그인 로직 4가지 (동시, 분리 처리) (0) | 2025.04.23 |
|---|---|
| [ 1개월 | 2주차 과제 ] 회원가입 & 로그인 DB 연동 (0) | 2025.04.16 |