[과제] 01주차 (간이 로그인 페이지 제작)

모의 해킹 스터디/모의 해킹 - 과제

[과제] 01주차 (간이 로그인 페이지 제작)

Gearvirus(junyup2) 2023. 11. 1. 17:33

모의 해킹 스터디 - 1주차 과제 (간이 로그인 페이지 제작)

제작 조건

DB 연결 X - 하드코딩 방식
ID / PW == admin / admin1234 입력시 로그인
- 로그인 페이지 꾸미기 (CSS / Bootstrap 이용)
- 추후 원하는대로 적용 가능하도록 하기 위하여 CSS로 하나부터 쌓아 올리는것으로 제작 연습.

동작 과정

첫 화면인 http://192.168.xxx.xxx:1018/(index.php)에 접속
Login 클릭시 http://192.168.xxx.xxx:1018/login.php로 이동
http://192.168.xxx.xxx:1018/login.php 에서 올바른 ID/PW 입력시
http://192.168.xxx.xxx:1018/home.php 로 이동 하여 "Hello, user명" 을 출력

코드 목록

inc/header.php : 공통 헤더
index.php : 초기 화면
login.php : 로그인 화면
login_proc.php : 로그인 정보 확인
home.php : 로그인 완료 화면
css/style.css : 적용할 CSS

inc/header.php

<p style='text-align:right'>
	<?php
	if(!session_id()){
		session_start();
	}

	if(!isset($_SESSION['member_id'])){
	?>
	<a href="/login.php">Login</a>
	<?php
	}else{
	?>
	<a href="/index.php">Logout</a>
	<?php
	}
	?>
</p>

초기화면에서 로그인 창으로 넘어가거나, 로그인 완료 창에서 로그아웃을 하는 경우에 따라 변하는 공통 헤더

if(!isset($_SESSION['member_id']))
- $_SESSION['member_id'] 의 여부에 따라 표기할 헤더를 다르게 설정

Index.php

<?php
session_start();
unset($_SESSION['member_id']);
?>

<!DOCTYPE html>
<html>
	<head>
		<title>LJY</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="container">
			<h1 class="spacing grad">Index</h1>
			<?php require_once("inc/header.php"); ?>
			<h2>Please, Login</h2>
			<p>Click the Login</p>
		</div>
	</body>
</html>

사이트의 첫 화면, unset($_SESSION['member_id']); 상태이므로 inc/header.php 로부터 Login 헤더를 불러옴

<!DOCTYPE html>
<html lang="en">
	<head>
	<meata charset="utf-8">
		<title>Login Page</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>			
		<div class="container">
			<h1 class="shadow spacing grad">Gearvirus</h1>
				<form method="POST" action="login_proc.php" autocomplete="off">
					<br>
					<label for="user_id">아이디</label>
					<input type="text" name="user_id" placeholder="User ID" autofocus required/>
					<p>
					<label for="user_pw">비밀번호</label>
					<input type="password" name="user_pw" placeholder="User Password" required/>
					<br>
					<input type="submit" value="로그인"/>
				</form>
			<br><br>
			<footer class="footer">
				<div class="footer-info">Login Test</div>
			</footer>
		</div>
	</body>
</html>

<form method="POST" action="login_proc.php" autocomplete="off">
- method="POST" : url에 출력을 안하기 위해서 "POST" 이용
- action="login_proc.php" : action은 파일을 다른 곳에서 확인(action에 지정되어 있는 login_proc.php 로 정보 전달)
- autocomplete="off" : 아이디 입력시 자동완성 방지
<input type="text" name="user_id" placeholder="User ID" autofocus required/>
- placeholder="User ID" : 내용 입력 힌트
- autofocus : 웹 문서를 불러오자마자, 해당 텍스트 필드에 입력 커서가 위치하도록 함.
- required : 필수 입력 필드 지정, 미 입력시 아래의 문구 출력

login_proc.php

<?php
	$user_id = $_POST['user_id'];
	$user_pw = $_POST['user_pw'];

	$login_id = "admin";
	$login_pw = "admin1234";

	$is_pw = password_verify($user_pw, $login_pw);
	
	if($user_id == $login_id && $user_pw == $login_pw){
		session_start();
		$_SESSION['member_id'] = $user_id;
		header("Location: /home.php");
		exit();
	}else{
		echo '<script>alert("로그인 정보를 찾을 수 없거나 잘못 입력"); history.back(-1)</script>';
	}
?>

if($user_id == $login_id && $user_pw == $login_pw)
- 로그인 아이디와 비밀번호가 모두 맞을 경우, $_SESSION['member_id'] = $user_id; : 어떤 유저가 로그인 하였는지 파악 하기 위함
- header("Location: /home.php"); : home.php 로 이동
  - 보통은 header("Location: /home.php"); 만 사용하는 경우가 많음
  - 매번 문제가 있는 것은 아니지만, 위처럼 사용하면 정상적으로 동작하지 않는 경우가 있음
  - 그럴때는 exit;를 한줄 추가해 주면됨
    - exit();
echo '<script>alert("로그인 정보를 찾을 수 없거나 잘못 입력"); history.back(-1)</script>';
- alert("로그인 정보를 찾을 수 없거나 잘못 입력"); : 아이디 or 비밀번호가 일치하지 않는 경우 상단의 경고창 출력
- history.back(-1) : 이전 페이지로 이동
- ' " " ' 순으로 입력 (" ' ' ")도 가능 하지만 서로 구분을 지어 줘야 함

home.php

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8">
		<title>Wellcome</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class ="container">
			<h1 class="spacing grad">Home</h1>
			<?php require_once("inc/header.php"); ?>
				<?php 
				$name = $_SESSION['member_id'];
				echo "Hello, " .$name;
				?>
		</div>
	</body>
</html>

사이트의 홈 화면,$_SESSION['member_id'] 를 login_proc.php 로 부터 받아온 상태이므로 inc/header.php 로부터 ㅣLogout 헤더를 불러옴
$name = $_SESSION['member_id']; : login_proc.php 에서 받아온 정보를 저장
echo "Hello, " .$name;
- .$name; : 출력시에는 .$변수명 으로 표기

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: grid;
    place-items: center;
    height: 100vh;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 500px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 10px;
}

h1 {
    padding: 10px;
    background-color: #222;
    color: #fff;
    text-align: center;
}

.shadow {
    text-shadow: 3px 3px 2px #111;
}

.spacing {
    letter-spacing: 0.1em;
}

.grad {
    background: linear-gradient(to right bottom, black, white);
}

input {
    width: 100%;
    padding: 5px;
    border: none;
    border-bottom: 1px solid #111;
    outline: none;
    font-size: 20px;
}

* : 전체에 적용
.shadow : 텍스트에 그림자 효과를 추가하는 속성
- 기본형 text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>
.spacing : 글자 간격을 조절하는 속성
.grad : 그라데이션
- 기본형 linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ......]);

후기

HTML / PHP / CSS 를 전부 처음 해보는 관계로 허접한 결과물이 나옴.

차차 공부를 통해, 결과물과 블로그의 구조를 바꿔나갈 예정.

다양하게 뜨는 오류 방지를 위한 트러블 슈팅의 중요성에 대해 상기. (PHP - 트러블 슈팅(Trouble Shooting))

질문 환영, 수정 및 보완에 대한 지적 환영

현재글[과제] 01주차 (간이 로그인 페이지 제작)

📓 Codegear_Archive

[과제] 01주차 (간이 로그인 페이지 제작)

모의 해킹 스터디 - 1주차 과제 (간이 로그인 페이지 제작)

'모의 해킹 스터디/모의 해킹 - 과제'의 다른글

티스토리툴바

[과제] 01주차 (간이 로그인 페이지 제작)

모의 해킹 스터디 - 1주차 과제 (간이 로그인 페이지 제작)

'모의 해킹 스터디/모의 해킹 - 과제'의 다른글

관련글

티스토리툴바