이번 모의해킹 스터디 1주차 과제는 PHP로 데이터베이스 없이 특정 아이디와 특정 비밀번호로 로그인을 할 수 있는 로그인 페이지를 디자인하고 개발하는 것이다.
개발
먼저, 로그인 성공 여부를 확인하고 해당 메시지를 출력하기 위한 변수를 선언했다. 그리고 로그인 처리를 위한 로직을 작성했다.
<?php
// 로그인 저장 변수
$login_success = false;
$message = "";
// 로그인 처리
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// 아이디와 비밀번호 확인
if ($username === 'admin' && $password === 'admin1234') {
$login_success = true;
$message = "로그인 성공! " . $username . "님 환영합니다."; // 성공 메시지
} else {
$message = "아이디 또는 비밀번호가 잘못되었습니다."; // 실패 메시지
}
}
?>
그다음 위에 작성한 로직에 맞게 HTML 코드를 작성했고, 간단한 디자인을 위해 Bootstrap을 연결했다. 또한, 간단한 CSS 작업도 설계했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.text-center {
margin-bottom: 30px;
}
.form-group {
margin-bottom: 10px;
}
.form-control {
height: 45px;
}
.submit-btn {
width: 100%;
background-color: #70a2ee;
border-color: #c2d7f7;
}
</style>
</head>
<body class="bg-light">
<div class="container">
<div class="row justify-content-center" style="height: 100vh;">
<div class="col-md-4 my-auto">
<h2 class="text-center">웹개발 로그인</h2>
<!-- 메시지 출력 -->
<?php if ($message): ?>
<div class='alert <?= $login_success ? 'alert-success' : 'alert-danger' ?>'><?= $message ?></div>
<?php endif; ?>
<!-- 로그인 실패 및 매인 화면 -->
<?php if (!$login_success): ?>
<form method="post" action="">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="아이디" autocomplete="off">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="비밀번호" autocomplete="off">
</div>
<button type="submit" class="submit-btn btn btn-primary btn-block">로그인</button>
</form>
<?php endif; ?>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>결과
- 로그인 페이지
- 로그인 실패
- 로그인 성공
후기
PHP로 개발하는 것은 처음이었지만, JSP를 사용해 본 경험 덕분에 쉽게 개발할 수 있었다. PHP 문법을 완전히 익힌 건 아니지만 추가로 개발을 하면서 찾아봐야겠다.
728x90
반응형
'모의해킹 > 모의해킹 스터디' 카테고리의 다른 글
| 모의해킹 스터디 2주차 과제(2) - 로그인 (0) | 2024.10.28 |
|---|---|
| 모의해킹 스터디 2주차 과제(1) - 회원가입 (0) | 2024.10.27 |
| 모의해킹 스터디 2주차 과제 - Mini Mission (0) | 2024.10.26 |
| 모의해킹 스터디 2주차 정리 (0) | 2024.10.24 |
| 모의해킹 스터디 1주차 정리 (0) | 2024.10.21 |