DB 연동 X
id: admin / pw: admin1234 로 로그인 성공 될수 있도록 구현 (그 외는 로그인 불가)
CSS 로 꾸며봤지만, 반응형으로는 만들지 못했습니다. (추후 반응형으로 꾸밀 예정)
완성된 페이지
CSS 가 아직 익숙치 않아서, 기기별로 UI가 달리집니다...
코딩을 MacBook M1 에서 했는데, 데스크탑에서 같은 코드를 돌리면 각 요소들의 배치가 달라집니다..
추후에 반응형으로 코딩 예정이니, 참고해서 봐주세요
이후 확인 버튼 누르면 index.html 로 이동합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인페이지</title>
<link rel="stylesheet" href="main.css">
<script defer src="main.js"></script>
</head>
<body>
<div class="login-entire-area" >
<h1 class="login-h1">Login</h1>
<form method="post" name="login" id="login-form" action="login_check.php" autocomplete="off">
<input type="text" name="id" id="id" placeholder="Email"/> <br>
<input type="password" name="pw" id="pw" placeholder="Password"/> <br>
<button id="btn">로그인</button>
</form>
<div class="find-area">
<div class="a1"><a href="#">아이디 찾기</a></div>
<div class="a2"><a href="#">비밀번호 찾기</a></div>
</div>
</div>
<div class="new-sign-up">
<br>
<h4>아직 회원이 아니신가요?</h4><br>
<p>지금 회원가입을 하시면<br> 다양하고 특별한 혜택이 준비되어있습니다.</p>
<div class="as"><a href="#">회원가입</a></div>
</div>
</body>
</html>
/* main.css */
*{
padding: 0;
margin: 0;
border: none;
}
.login-entire-area{
/* background-color: aquamarine; */
position: relative;
width: 25vw;
height: 45vh;
box-sizing: border-box;
margin: auto;
border-radius: 2%;
top: 60px;
text-align: center;
}
.login-h1 {
font-size: 24px;
line-height: 70px;
}
#login-form > input::placeholder{
color: #D2D2D2;
}
#id {
width: 80%;
height: 38px;
padding: 0 10px;
border-radius: 6px;
background-color: #F8F8F8;
box-sizing: border-box;
margin-bottom: 16px;
}
#pw {
background-color: #F8F8F8;
width: 80%;
height: 38px;
padding: 0 10px;
box-sizing: border-box;
border-radius: 6px;
}
#btn {
background-color: bisque;
width: 80%;
height: 38px;
margin-top : 20px;
border-radius: 6px;
}
.find-area{
/* background-color: aqua; */
display: flex;
justify-content: center;
padding: 20px;
}
.a1{
font-size: 12px;
position: relative;
margin-left: 7px;
padding-right: 0.5em;
border-right: 1px solid lightgray;
margin-right: 0.5em;
}
.a2{
font-size: 12px;
position: relative;
}
a:link {
color : black;
text-decoration-line: none;
}
.new-sign-up {
background-color:#F8F8F8;
position: relative;
width: 30vw;
height: 20vh;
box-sizing: border-box;
margin: auto;
border-radius: 0.5%;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.new-sign-up > * {
text-align: center;
margin: auto;
}
.as {
width: 100px;
padding: 5px;
border: 1px solid lightgray;
border-radius: 0.8%;
font-size: small;
}
// main.js
document.addEventListener('DOMContentLoaded', () =>{
const id = document.querySelector('#id')
const pw = document.querySelector('#pw')
const btn = document.querySelector('#btn')
btn.addEventListener('click', (e) => {
e.preventDefault()
if(id.value == ''){
alert('아이디를 입력하세요.')
id.focus()
return false;
}
if(pw.value == ''){
alert('패스워드 입력하세요.')
pw.focus()
return false;
}
document.login_form.submit()
})
})
<!-- login_chenk.php -->
<?php
$id = (isset($_POST['id']) && $_POST['id']!='') ? $_POST['id'] : '';
$pw = (isset($_POST['pw']) && $_POST['pw']!='') ? $_POST['pw'] : '';
if($id == ''){ //id 미입력시
echo '
<script>
alert("아이디를 입력하세요..")
history.go(-1)
</script>
';
exit;
}
if($pw == ''){ //password 미입력시
echo '
<script>
alert("비밀번호를 입력하세요.")
history.go(-1)
</script>
';
exit;
}
if($id == 'admin' && $pw == 'admin1234'){
session_start();
$_SESSION['ss_id'] = $id;
echo '<script>
alert("로그인에 성공했습니다.");
self.location.href="member.php"; //회원전용 페이지로
</script>
';
} else {
echo '<script>
alert("로그인 실패.");
self.location.href="index.html"; //회원전용 페이지로
</script>
';
}
?>
<!-- member.php -->
<?php
session_start();
if(!isset($_SESSION["ss_id"]) || $_SESSION["ss_id"] == ""){
echo "
<script>
alert('여기는 회원 전용 페이지 입니다. 로그인 후 접근이 가능합니다.');
self.location.href='index.html';
</script>
";
exit;
}
?>
<p>회원전용 페이지입니다.</p>
<a href="logout.php">로그아웃</a>
<!-- logout.php -->
<?php
session_start();
session_unset();
session_destroy();
?>
<script>
alert("로그아웃되었습니다.");
self.location.href="index.html";
</script>
'웹 해킹' 카테고리의 다른 글
| CSRF 3번 문제(GET Amin 3) (0) | 2024.07.25 |
|---|---|
| CSRF 2번 문제(GET Amin 2) (0) | 2024.07.25 |
| CSRF 1번 문제(GET Amin 1) (0) | 2024.07.20 |
| (Normaltic 스터디 6기) 3주차 과제 로그인 로직 4가지 케이스 (식별/인증/해싱) (0) | 2024.05.08 |
| 2주차 과제: 회원가입 페이지 만들기 (0) | 2024.05.01 |
