오늘의 목표
1. 구글의 다양한 예제를 참고하여 내가 만든 코드 좀 더 그럴듯하게 수정하기
2. 로그인 페이지 꾸며보기
우선 로그인 페이지를 어떻게 꾸밀 것인가?
처음에는 내가 좋아하는 게임 중 하나인 레드 데드 리뎀션2의 서부극 스타일로 만들어보려고 했으나,
옆에서 지켜보던 남편이 귀여운 걸로 만들어달라고 하도 졸라대서 하는 수 없이 알겠다고 했다.(만드는건 난데;;)
천천히 수영하던 귀여운 해달이 로그인에 성공하면 기뻐하는 모습을 만들어달란다.
음..
내 수준에 그건 좀 많이 힘든 것이었기에 우선 지피티 선생님께 조언을 좀 구했다.
친절한 선생님 덕에 코드를 좀 더 깔끔하게 수정할 수 있는 방법을 많이 배웠고,
내가 구현하고자 하는 것에 대한 힌트도 얻을 수 있었다.
1. 코드 수정
1-1. 로그인 정보가 맞는지 판단하는 코드
<?php
$username = $_POST["username"];
$password = $_POST["password"];
if ($username == "admin" && $password == "admin1234") {
echo "환영합니다.";
} else {
echo "등록되지 않은 사용자입니다.";
}
?>
나의 기존 코드는 위와 같이 correct username과 password를 관리하기 어려운 형태이므로 수정이 필요했다.
correct 로그인 정보와, 사용자가 입력한 로그인 정보의 변수를 분리하는게 좋겠다.
<?php
$correct_username = 'user';
$correct_password = 'password';
$username = $_POST["username"];
$password = $_POST["password"];
if ($username == $correct_username && $password == $correct_password) {
echo "환영합니다.";
} else {
echo "등록되지 않은 사용자입니다.";
}
?>
1-2 로그인 실패시, 다시 한 번 기회를 주는 코드
구글이든 네이버든 티스토리든 보통 로그인 정보가 틀리면, 화면이 넘어가지 않으면서 error가 뜨고, 다시 입력할 수 있도록 기회를 준다.
이걸 구현하는 것은 내 머리로 떠올려서 될 일이 아니라 먼저 예시를 직접 찾아서 학습해야 되는 문제였다.
우선 새로 배운 것은 다음의 세 가지였다.
1) header() 함수
예시 : header('Location: href="http://www.example.com/');
PHP에서는 header() 함수를 활용해서 페이지를 이동(redirect) 할 수 있었다.
즉, location을 콜론(:) 이후의 주소로 이동하라는 헤더 메시지다.
2) isset() 함수
PHP에서는 isset()함수를 활용해서 변수가 설정되었는지 확인해줄 수 있다.
즉 Boolean함수인데, 비슷하게 변수의 상태를 확인하는 함수의 일종으로 empty()가 있으나 이는 변수가 비어있는지를 확인하는 함수다.
isset() : 변수가 존재하지만 null인지 아닌지 확인 (null이 아닐 때 true 반환)
empty() : 변수가 비어있는지 확인 (0, '', null, false, array() 등과 같은 빈 값일 때 true 반환)
$var1 = '';
$var2 = null;
$obj = new myClass();
var_dump(isset($var1)); // true
var_dump(isset($var2); // false
var_dump(empty($var1)); // true
var_dump(empty($var2)); // true
var_dump(empty($obj)); // false (빈 객체는 empty가 아님)
** var_dump() : 변수의 정보를 출력하는 함수
3) PHP에서의 if 축약형
if문을 사용하는 다양한 방법이 있지만 다음과 같은 활용법을 배웠다.
<?php if($this->value): ?>
Hello
<?php elseif($this->asd): ?>
Your name is: <?= $this->name ?>
<?php else: ?>
You don't have a name.
<?php endif; ?>마치 깔대기처럼 위에서부터 하나씩 조건을 만족하는지 여부를 체크해 내려가면서 실행시키는 점이
보기도 좋고 쓰기도 좋고 깔끔한 것 같다.
출처 : https://stackoverflow.com/questions/564130/difference-between-if-and-if-endif
이것들을 종합해서 다음과 같이 header 함수를 이용한 redirect코드를 구현했다.
1. 로그인 실패시 메인 페이지(main.php)로 보낸다. (정확히는 main.php?error=1로)
<?php
$correct_username = 'admin';
$correct_password = 'admin1234';
$username = $_POST["username"];
$password = $_POST["password"];
if ($username == $correct_username && $password == $correct_password){
echo "<script>location.href = 'http://localhost:8080/success.php'; </script>";
//이건 javascript로 redirect하는 방법.
//로그인 성공시 success.php 페이지로 이동한다.
}
else {
header("Location: http://localhost:8080/main.php?error=1");
//이건 header()로 redirect하는 방법.
//로그인 실패시 이전 페이지로 (error 카운트하고) redirect한다.
}
?>
2. 메인페이지(main.php) 파일에, main.php?error=1로 Url이 변경되면 출력해줄 내용을 if문으로 덧붙여준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<Title>Please log in to my Ocean</Title>
</head>
<body>
<div>
<form action="mainLogin.php" method="post">
<p>입력해주세요.</p>
<p>아이디 : <input type="text" name="username"></p>
<p>비밀번호 : <input type="text" name="password"></p>
<input type="submit" value="로그인">
</form>
<?php if(isset($_GET['error']) && $_GET['error'] == '1'): ?>
<p class="error-message">로그인 실패! 다시 시도해주세요.</p>
<?php endif; ?>
</div>
</body>
</html>
위와 같이 코딩하면 $_GET['error'] 값이 null이거나, 1이 아닌 2,3,4 같은 다른 에러 코드일 경우에 실행되지 않을 것이다.
처음에는 자꾸 실패해서(Error : Cannot modify header information - headers already sent ~~~)
두어 시간 헤맸는데,
[1] header 함수 사용시 http:// 부터 시작되는 제대로 된 주소를 입력하고
[2] mainLogin.php에 쓸데없는 html 태그들을 아예 지우고 <? php ~ 로 시작했더니 해결되었다.
1-3 div 태그를 이용해 로그인 컨테이너 박스 만들기
좀 더 꾸미기 용이하게 만들기 위해서, 로그인 상자를 따로 정의하고,
로그인 버튼도 input 태그가 아닌 button 태그로 변경하여 따로 지정해주기로 했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<Title>Please log in to my Ocean</Title>
</head>
<body>
<div class="login-container">
<div class="login-box">
<h2>Login</h2>
<form action="mainLogin.php" method="post">
<p>입력해주세요.</p>
<p>아이디 : <input type="text" name="username"></p>
<p>비밀번호 : <input type="text" name="password"></p>
<button type="submit">로그인</button>
</form>
<?php if (isset($_GET['error']) && $_GET['error'] == '1'): ?>
<p class="error-message">로그인 실패! 다시 시도해주세요.</p>
<?php endif; ?>
</div>
</div>
</body>
</html>
이제 꾸미기 위한 준비는 모두 끝난 셈이다.
2. 꾸미기 시작
오늘 다 꾸미기는 힘들 것 같으니 최대한 큰 틀에서 기본적인 구상만 해보기로 결심했다.
현재 구상하고 있는 모습은 메인 화면, 로그인 실패 화면, 로그인 성공 화면 모두 동영상 형태로 이어지게 하는 것이지만,
해달이 계속해서 둥둥 떠다니는 영상을 유지하려면 비디오를 재생-역재생-재생-역재생하는 순환 패턴(부메랑 같은..)을 짜야 할 것 같아
일단 그건 나중으로 미루고 지금은 우선 간단한 사진을 이용해 전체적인 틀만 잡아보려고 한다.
2-1. 동영상 배경화면 위에 로그인 페이지 정중앙에 띄우기
아주 많이 헤매면서 삽질했다.
어떻게 동작하는지 아직도 잘 모르겠지만 어쨌든 대충 성공한거같긴 하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<Title>Please log in to my Ocean</Title>
<script src="main.js">
</script>
<style>
body,
html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.login-background{
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.login-background-video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1500;
}
.login-box {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
text-align: center;
z-index: 100;
}
.error-message {
color: red;
}
.success-message {
color : green;
}
</style>
</head>
<body>
<div class="login-background">
<video autoplay loop muted class="login-background-video">
<source src="img/seaOtterSwimming.mp4" type="video/mp4">
</video>
<div class="login-box">
<h2>Login</h2>
<form action="mainLogin.php" method="post">
<p>입력해주세요.</p>
<p>아이디 : <input type="text" name="username" placeholder="Username"></p>
<p>비밀번호 : <input type="text" name="password" placeholder="Password"></p>
<button type="submit">로그인</button>
</form>
<?php if (isset($_GET['error']) && $_GET['error'] == '1'): ?>
<p class="error-message">로그인 실패! 다시 시도해주세요.</p>
<?php elseif (isset($_GET['success']) && $_GET['success'] == '1'): ?>
<p class="success-message"> 로그인에 성공했습니다.
</p>
<?php endif; ?>
</div>
</div>
</body>
</html>
사실 위의 <?php~ 를 보면 알겠지만 이 과정에서 코드를 한번 더 수정했다.
원래 로그인 성공시 success.php로 이동시키려고 했는데, 새로운 페이지를 따로 만들기가 귀찮아서(...)
그냥 실험해볼 겸 mainLogin.php도 다음과 같이 수정해보았다.
<?php
$correct_username = 'admin';
$correct_password = 'admin1234';
$username = $_POST["username"];
$password = $_POST["password"];
if ($username == $correct_username && $password == $correct_password){
header("Location: http://localhost:8080/main.php?success=1");
}
else {
header("Location: http://localhost:8080/main.php?error=1");
}
?>
2-2 로그인 실패시 배경사진을 화난 해달 표정으로 바꾸기.
아무래도 자바스크립트로 해야 할 것 같아 main.js를 따로 만들어주었다.
나의 지식 수준이 짧아 임시방편으로 innerHTML을 활용하여 코드를 만들었다.
그 과정에서 main.php의 id와 class, div도 살짝씩 수정.
main.js 파일은 다음과 같다.
var loginBackgroundImg = document.getElementById("login-background-img");
function changeBackgroundImgError() {
loginBackgroundImg.innerHTML = "<img src=\"img/angryOtter.webp\">";
}
function changeBackgroundImgSuccess() {
loginBackgroundImg.innerHTML = "<img src=\"img/cuteOtter.gif\">";
loginBoxForm.innerHTML = "<h1>Welcome!</h1>";
}
참고로, 따옴표 ("") 안에 또 따옴표("") 를 넣어야 하는 상황에서는,
하위 항목의 " 앞에 \ 를 붙여서 \" 의 형태로 작성하면 된다는 것을 새로 배웠다.
제대로 작성했다고 생각했는데도 실행되지 않았다.
이 부분에서는 검색해봐도 한계가 있어서 할 수 없이...
..왜 console창에서 loginBackgroundImg가 null값으로 출력되었는지 조금은 이해할 수 있었다.
함수 외부에서 선언되었고, 이것이 실행되는 시점이 문제라는 것이다.
• 예를 들어, HTML 문서가 완전히 로드되기 전에 스크립트가 실행되었다면, 해당 요소를 찾지 못하게 되어 나중에 이 변수에 null 값이 들어가게 돼.
• 그 이후 함수 changeBackgroundImgError()가 호출될 때 loginBackgroundImg는 이미 null이기 때문에 innerHTML을 설정할 수 없어, 즉, 작동하지 않는 거야.
해결 방법
1. 변수를 함수 내부에 선언 : 이 방법은 각 함수 호출마다 DOM에서 해당 요소를 다시 찾기 때문에 안정적이야.
2. DOMContentLoaded 이벤트 사용: 스크립트가 실행되기 전에 DOM이 완전히 로드되었는지 확인하려면 DOMContentLoaded 이벤트를 사용할 수 있어.
document.addEventListener("DOMContentLoaded", function() { var loginBackgroundImg = document.getElementById("login-background-img"); function changeBackgroundImgError() { loginBackgroundImg.innerHTML = "<img src=\"img/angryOtter.webp\">"; } });
• 이렇게 하면 DOM이 완전히 로드된 후에야 loginBackgroundImg를 찾고 사용할 수 있어.
고백컨대 완벽하게는 절대 아니고 어렴풋이, 대충 이해했지만 각잡고 공부하기엔 DOM의 개념부터 생소했기 때문에 여기서 또 하루가 다 가겠구나 싶어 막막했다. 사실 여기까지 오는데에도 이미 꽤나 많은 시간이 걸렸기 때문에(ㅎㅎ) 코드를 개선하겠다는 생각보다는 대충이라도 완성하자는 마음이 앞섰다. 그래서 사진과 동영상 등 이미지 파일부터 먼저 준비해둔 뒤, 임시방편으로 main.js를 이렇게 완성했다.
function changeBackgroundImgError() {
document.getElementById("login-background-img").innerHTML = "<img src=\"img/angryOtter.webp\">";
}
function changeBackgroundImgSuccess() {
document.getElementById("login-background-img").innerHTML = "<video autoplay loop muted>" +
"<source src=\"img/Welcome.mp4\" type=\"video/mp4\">" +
"</video>"
document.getElementById("login-box-form").innerHTML = "<h1>Sea Otter Welcomes you!!</h1>";
}
그리고 main.php는 이렇게 완성했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<Title>Please log in to my Ocean</Title>
<script src="main.js">
</script>
<style>
body,
html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.login-background {
background-color: #A4B7CA;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#login-background-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 비디오 자체의 크기 기준으로 중앙 정렬 */
width: 100%;
height: auto; /* 비율을 유지하면서 비디오 크기 조정 */
z-index: 2;
text-align: center;
object-fit: cover;
}
.login-box {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
text-align: center;
z-index: 100;
}
.error-message {
color: red;
}
.success-message {
color: green;
}
</style>
</head>
<body>
<div class="login-background">
<div id="login-background-img">
<video class="video" autoplay loop muted>
<source src="img/seaOtterSwimming.mp4" type="video/mp4">
</video>
</div>
<div class="login-box">
<form id="login-box-form" action="mainLogin.php" method="post">
<h2>Login</h2>
<p>Welcome to my Ocean</p>
<p>Username : <input type="text" name="username" placeholder="Username"></p>
<p>Password : <input type="text" name="password" placeholder="Password"></p>
<button type="submit">로그인</button>
</form>
<?php if (isset($_GET['error']) && $_GET['error'] == '1'): ?>
<p class="error-message">로그인 실패! 다시 시도해주세요.</p>
<script>
changeBackgroundImgError();
</script>
<?php elseif (isset($_GET['success']) && $_GET['success'] == '1'): ?>
<p class="success-message"> 로그인에 성공했습니다.
</p>
<script>
changeBackgroundImgSuccess();
</script>
<?php endif; ?>
</div>
</div>
</body>
</html>
그리하여 결과물.
이제 세세한 코드수정 등은 미래의 나에게 맡기기로 했다.
'Learning Web > 2024~2025 Web Development' 카테고리의 다른 글
| 원격 DB (MySQL) 와 연결하기 (0) | 2025.02.02 |
|---|---|
| [KRATOS] #0 밑그림 작업 (2) | 2024.12.17 |
| PHP를 활용하여 간이 로그인 페이지 만들기 (0) | 2024.10.21 |
| UTM으로 SSH 접속하기 (2) | 2024.10.18 |
| Ubuntu server에서 화면 돌리기 (세로모드) (1) | 2024.10.15 |