<1주차 과제>
- 로그인 페이지 만들기(DB연동 x)
- CSS 를 활용한 로그인 페이지 꾸미기
목표: ID: admin / Password: admin1234 로 로그인이 되는 페이지를 만들어보자!
<index.php>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="div.css" rel="stylesheet" type = "text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<title>GamJa National University</title>
</head>
<body>
<div class="full">
<div class="half-frame">
<h1 style = "text-align:center ; color: #B86824; font-size:40px ; font-weight:lighter"> GamJa National University</h1>
</div>
<div class="Rhalf-frame">
<div class="login-box">
<form action="login_proc.php" method="POST">
<p style="text-align:center; font-weight:bold; font-family:Inter" >Login</p>
<p style="text-align:center"><input type="text" name ="ID" placeholder = "Enter your ID " maxlength='30' class="id-form" ></p>
<p style="text-align:center"><input type="password" name ="password" placeholder = "Enter your PassWord" maxlength='30' class="password-form"></p>
<p style="text-align:center"><input type = submit class="submit-btn" value="Login"></p>
</div>
</div>
</div>
</body>
</html><head> 부분에는 css 파일 연동 + 구글폰트 연동을 해주었다.
<body> 부분에는 div 태그를 이용하여 로그인 페이지를 나누어주었다.
*특이사항 : ID 와 Password 칸에 쓸수있는 글자수를 30자로 제한하였습니다.
(Response Time 을 이용한 취약점이 될수도 있다고 생각하여서 제한했습니다)
Response Time 에 관하여 링크걸어둔 글 ,<Username enumeration> 부분에 서술하였습니다.
관련 URL : https://jamesbexter.tistory.com/entry/Authentication-vulnerabilities
Authentication vulnerabilities
우선 개념적으로, Authentication vulnerabilities 는 이해하기는 쉽습니다. 그러나 authentication 과 security 의 명확한 관계 때문에 이것은 매우 중요합니다. Authentication vulnerabilities 는 공격자가 민감한 데이
jamesbexter.tistory.com
<login_proc.php>
<?php
$user_id = $_POST['ID'];
$user_password = $_POST['password'];
if($user_id=="admin" && $user_password=="admin1234"){
header('Location: /page.php'); //리다이렉션 하는 코드
}
else if(empty($user_id)||empty("$user_password")){
echo "<script>alert('ID 혹은 비밀번호를 입력해주세요.');
location.href='/index.php'
</script>"; //알림창이 뜨고 다시 index.php로 리다이렉션 하는 코드
}
else{
echo "<script>alert('ID 혹은 비밀번호가 틀렸습니다.');
location.href='/index.php'
</script>"; //알림창 뜨고 다시 index.php로 리다이렉션 하는코드
}
?>
로그인 인증은 간단하게 php 문법을 이용한 if 문으로 구성하였습니다.
변수는 POST 를 사용하여 넘겨주었습니다.
<div.css>
*{
border: none;
}
.full{
display:flex;
height:97vh;
width:100%;
flex-direction: row;
align-content: center;
}
.half-frame{
flex-grow:1;
align-content:center;
}
.half-frame::before{
content: "";
position:absolute;
background-image: url("gamja.png");
background-repeat: no-repeat;
background-position: 20%;
opacity: 0.3;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.Rhalf-frame{
flex-grow:3;
flex-direction: column;
align-content: center;
background-color:rgb(223, 209, 134);
}
.login-box{
background-color: #dcdcdc;
border-radius: 5px;
width:70%;
transform:translate(25%,0%);
height:55%;
align-content: center;
}
.submit-btn{
font-size: 14px;
background-color:rgb(223, 209, 134);
width:60%;
height:35px;
border-radius: 5px;
border-color: #dcdcdc;
}
.id-form{
width:60%;
height:35px;
border-radius: 5px;
border-color: #dcdcdc;
}
.password-form{
width:60%;
height:35px;
border-radius: 5px;
border-color: #dcdcdc;
}
- 1. 첫번째로 깔끔함 미관성을 위하여 border 를 전부 none 으로 초기화 시켜주었습니다.
- 2.flex 를 사용하여 조금더 유연하게 배치를 하였습니다.
- 3.이미지 삽입을 위하여 가상요소 ::before 를 사용해주었습니다.
<완성된 로그인 페이지>
앞으로 제가 만들어갈 페이지는 가상의 대학교인 '국립 감자대학교' 페이지를 구축하려고 합니다.
뭔가 컨셉과 방향성을 잡았기 때문에 더 애지중지 키우듯이 만들어 볼수 있을거 같습니다.
이런식으로 로그인을 성공하였고 ,아무것도 입력하지 않거나 회원정보가 틀리게 되면...
예외의 경우엔 알림이 뜨고 다시 index.php 로 리다이렉션 할 수 있게 되었습니다.
<to be continue...>
'웹개발(PHP-Mysql)' 카테고리의 다른 글
| [웹 개발] 마이페이지(비밀번호 변경 & 개인정보 수정) (0) | 2024.07.16 |
|---|---|
| [웹 개발] 검색 및 정렬 기능 구현 (0) | 2024.07.16 |
| [웹 개발] CRUD(생성,읽기,수정,삭제) 페이지 만들기 (0) | 2024.07.15 |
| <2주차 과제> 회원가입 페이지 만들기 (0) | 2024.05.15 |
| <2주차 과제> mini mission (0) | 2024.05.15 |