로그인 페이지 제작 실습이다. 해당 실습의 목표는 다음과 같다.
- DB 연결 없이 ID admin PW admin1234로 로그인이 가능한 페이지 제작
- 지정된 ID와 PW가 아닌 경우, 예외 처리된 페이지로 넘어가도록 설정
- 로그인 성공 시, 기존 입력창 대신 로그인 성공 화면 출력 + 로그아웃 버튼
- 로그인 실패 시, alert 출력
스켈레톤 코드를 통한 기본 동작 확인
- login.php
<!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="styles.css"> // CSS 파일 연동
</head>
<body>
<h1> 로그인 </h1>
<form method="POST" action="login_proc.php">
<label for="id"> 사용자 ID: </label>
<input type="text" name="id" id="id" placeholder="User ID" required>
<br>
<label for="pass"> 비밀번호: </label>
<input type="password" name="pass" id="pass" placeholder="User Password" required>
<br>
<input type="submit" value="로그인">
</form>
</body>
</html>- login_proc.php
<?php
function login($username, $password) { // 로그인 처리 함수
if ($username === 'admin' && $password === 'admin1234') {
return true; // 사용자가 "admin"일 때 비밀번호가 "password"면 로그인 성공
}
return false;
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['id'];
$password = $_POST['pass'];
if (login($username, $password)) {
echo "로그인 성공! 환영합니다, " . htmlspecialchars($username) . "!";
// TODO: 로그인 후 리다이렉션 처리
} else {
echo "로그인 실패! ID와 비밀번호를 확인하세요.";
// TODO: 로그인 실패 시 처리
}
} else {
echo "잘못된 접근입니다.";
}
?>
실행 시 결과는 다음과 같다. 위 화면에 디자인을 추가하기 위해 login_style.css를 구현했다. 또한, 추가로 계획한 의도에 맞게 logout.php 또한 구현했다.
CSS를 활용한 웹 페이지 꾸미기
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics
CSS 기초 - Web 개발 학습하기 | MDN
CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠
developer.mozilla.org
▲ 참고
login.php
- 디자인 요소: left-side, right-side 분할 설정
- 디자인 요소: 이미지 추가
- 세션 사용: 로그인 정보 출력
- 로그인 여부에 따른 코드 추가
<?php
session_start(); // 세션 시작
// 로그인 성공 여부와 메시지 초기화
$login_success = isset($_SESSION['login_success']) ? $_SESSION['login_success'] : false;
$message = isset($_SESSION['message']) ? $_SESSION['message'] : '';
unset($_SESSION['message']); // 메시지 출력 후 세션에서 제거
// 로그인 상태 확인
$is_logged_in = isset($_SESSION['username']);
?>
<!DOCTYPE html>
<html lang="ko">
<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_style.css"> <!-- CSS 파일 연동 -->
<script>
function showAlert(message) {
alert(message); // 로그인 실패 시 경고 메시지 표시
}
</script>
</head>
<body>
<div class="container"> <!-- 제목과 폼을 감싸는 컨테이너 -->
<!-- 왼쪽 박스 시작 -->
<div class="left-side">
<div class="title-box"> <!-- 제목 박스 -->
<h1>SIGN IN</h1>
<p>Administrator Login Only</p>
<p>Please sign in to admin account!</p>
</div> <!-- 제목 박스 -->
<div class="image-box"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuMnkE3772W9MGxqe-w0e5VMszC0xdK5bC1w&s" alt="Placeholder Image"></div>
<!-- 로그인 상태에 따른 내용 출력 -->
<?php if ($is_logged_in): ?>
<p>Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</p> <!-- 성공 메시지 출력 -->
<form method="POST" action="logout.php"> <!-- 로그아웃 처리 -->
<input type="submit" value="LOGOUT" />
</form>
<?php else: ?>
<form method="POST" action="login_proc.php">
<input type="text" name="id" placeholder="ID or Phone Number" required /> <!-- name 속성 추가 -->
<input type="password" name="pass" placeholder="Password" required /> <!-- name 속성 추가 -->
<input type="submit" value="LOGIN" />
</form>
<?php endif; ?>
<p class="copy">@tsh05</p> <!-- 새로운 copy 텍스트 추가 -->
</div>
<!-- 왼쪽 박스 끝 -->
<div class="right-side"> <!-- 오른쪽 박스 --> </div>
</div> <!-- 컨테이너 끝 -->
<!-- 사용자 로그인하지 않았는데 메세지 존재하는 경우 -->
<?php if (!$is_logged_in && $message): ?>
<script>
showAlert("<?php echo addslashes($message); ?>"); // 실패 메시지 팝업 표시
</script>
<?php endif; ?>
</body>
</html>login_proc.php
- 로그인 처리를 위한 조건문
<?php
session_start(); // 세션 시작
session_destroy(); // 세션 종료
header("Location: login.php"); // 로그인 페이지로 리다이렉트
exit();
?>login_style.css
- 페이지 꾸미기 상세 설정
- 사용하는 컬러 차트를 변수로 선언하여 사용
/* 컬러 차트 변수 선언 (HEX 또는 RGB) */
:root {
--gray: #E9E8E6;
--blue: rgba(69, 105, 144, 1);
--lightblue: rgba(69, 105, 144, 0.7); /* 투명도 70% 조절 */
--shadow: rgba(0, 0, 0, 0.3);
}
/* 전체 문서 (background) 설정 */
body {
font-family: "Times New Roman", sans-serif; /* 글꼴을 Times New Romaan으로 설정, 대체 글꼴 sans-serif */
background-color: whitesmoke; /* 배경색 설정 */
margin: 0 auto; /* 기본 마진 제거 */
padding: 150px 200px 0px 200px; /* 박스 밖 여백 설정 (개별 값은 시계 방향으로 상단-우측-하단-좌측) */
}
/* 모든 요소에 box-sizing 설정, ID PW 입력란과 로그인 버튼이 달라서 추가한 코드 */
* {
box-sizing: border-box; /* 패딩과 경계선을 포함한 너비 계산 */
}
/* 제목 및 폼 박스 스타일 설정 */
.container {
display: flex; /* 플렉스 박스를 사용하여 반으로 나누기 */
border-radius: 10px; /* 모서리 둥글게 */
overflow: hidden; /* 자식 요소가 부모 요소의 경계 넘지 않도록 설정, 모서리 둥글이지지 않아 추가 */
box-shadow: -5px -5px 10px #fff, 5px 5px 10px #babebc; /* 그림자 효과 추가 */
position: absolute; /* 요소를 절대 위치로 설정하여 부모 요소에 상대적으로 배치 */
top: 50%; /* 상단에서 50% 위치로 설정 */
left: 50%; /* 왼쪽에서 50% 위치로 설정 */
transform: translate(-50%, -50%); /* 요소의 중심을 화면의 중심으로 이동 */
width: 900px; /* 너비 설정 */
min-height: 600px; /* 최소 높이 설정 */
}
/* 왼쪽 박스 스타일 */
.left-side {
flex: 0 0 90%; /* 왼쪽 박스 공간 비율 */
padding: 20px; /* 내부 여백 설정 */
background-color: var(--gray); /* 배경색 설정 */
color: var(--blue);/* 텍스트 색상 설정 */
}
/* 이미지 박스 스타일 */
.image-box img {
display: block; /* 블록 요소로 설정 */
margin: 0 auto; /* 자동 여백으로 가운데 정렬 */
width: 50%; /* 이미지의 최대 너비를 100%로 설정 */
height: auto; /* 자동으로 높이 조정 */
}
/* 오른쪽 박스 스타일 */
.right-side {
flex: 0 0 10%; /* 오른쪽 박스 공간 비율 */
padding: 20px; /* 내부 여백 설정 */
background-color: var(--lightblue); /* 배경색 설정 */
}
/* 메인 페이지 제목 스타일 설정 */
h1 {
text-align: center; /* 가운데 정렬 */
font-size: 50px; /* 텍스트 크기 설정 */
color: var(--blue); /* 텍스트 색상 설정 */
text-shadow: 2px 2px 5px var(--shadow); /* 텍스트 그림자 효과 추가 */
margin: 80px 0 0; /* 위 아래 여백 조정 */
}
.title-box {
overflow: hidden; /* 여백 병합 방지 */
}
/* 일반 텍스트 스타일 설정 */
p {
text-align: center; /* 가운데 정렬 */
font-size: 15px; /* 텍스트 크기 설정 */
color: var(--lightblue); /* 텍스트 색상 설정 */
margin: 5px 0px; /* 위 아래 여백 조정 */
}
/* copyright 스타일 설정 */
.copy {
font-size: 14px; /* 텍스트 크기 설정 */
text-align: center; /* 가운데 정렬 */
margin-top: 80px; /* 텍스트 위 여백 설정 */
color: var(--blue); /* 텍스트 색상 설정 */
}
/* 폼 스타일 설정 */
form {
margin-top: 30px;
text-align: center; /* 폼 내의 요소를 가운데 정렬 */
}
/* 텍스트 입력 필드 (ID, PW 입력란) 스타일 설정 */
input[type="text"], /* ID */
input[type="password"] /* PW */
{
width: 50%; /* 너비 설정 */
padding: 10px; /* 입력란 세로 길이 조정 */
margin: 10px auto; /* 위 아래 여백 설정 */
border: none; /* 경계선 제거 */
border-radius: 5px; /* 모서리 둥글게 설정 */
display: block; /* 블록 요소로 설정하여 가운데 정렬 */
}
/* 로그인 버튼 스타일 설정 */
input[type="submit"] {
width: 50%; /* 너비 설정 */
padding: 10px; /* 내부 여백 설정 */
margin: 10px auto; /* 위 아래 여백 설정 */
border: none; /* 경계선 제거 */
box-shadow: -5px -5px 10px #fff, 5px 5px 10px #babebc; /* 그림자 효과 추가 */
border-radius: 5px; /* 모서리 둥글게 설정 */
background-color: var(--lightblue); /* 버튼색 설정 */
color: whitesmoke; /* 텍스트 색상 설정 */
cursor: pointer; /* 마우스 커서를 포인터로 변경 */
font-family: "Times New Roman", sans-serif; /* 폰트 설정 추가 */
font-size: 17px;
}최종 결과물
접속 기본 화면이다.
admin/admin1234로 로그인에 성공하면 다음과 같이 화면이 나온다. 로그아웃 버튼을 누르면 본래 로그인 화면으로 되돌아간다.
반면, 지정된 아이디와 비밀번호를 입력하지 않았을 경우 로그인 실패로 처리한다. alert(message)가 뜨는 것을 확인할 수 있고, 닫기를 누르면 본래 로그인 화면으로 되돌아간다.
'모의해킹 > 웹해킹스터디' 카테고리의 다른 글
| 로그인 로직 이해하기 - 식별과 인증, 그리고 해시 (Hash) (1) | 2024.11.27 |
|---|---|
| [실습] 회원가입 페이지 만들기 + DB연동 (0) | 2024.11.27 |
| 데이터베이스와 SQL (3) | 2024.11.27 |
| [macOS] MAMP로 PHP 웹 개발 환경 세팅 (1) | 2024.11.27 |
| 웹 서버 이해하기 (0) | 2024.11.27 |
