index.php
메인페이지
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>로그인 페이지</title> </head> <body> <h1>로그인 화면 구성하기</h1> <form action="login_ok.php" method="GET"> 아이디 : <input type="text" name="user_id" placeholder="아이디를 입력해 주세요." required autocomplete="off" autofocus> 비밀번호 : <input type="password" name="user_pw" placeholder="비밀번호를 입력해 주세요." required> <button>로그인</button> </form> </body> </html>
form 태그
-사용자의 입력을 받은 데이터를 서버로 보내준다.
form 태그 속성
- action 속성을 사용하여 입력받은 데이터를 "login_ok.php" 보내준다.
- method 속성을 사용하여 입력받은 데이터를 "POST" 방식으로 전달한다.
Method 종류
1. GET
- 주소(URL)에 데이터를 추가하여 보내는 방식으로 데이터가 URL에 그대로 노출
User_ID와 User_PassWord가 그대로 노출, 따라서 보안의 취약하다.
2. POST
- 데이터를 URL에 같이 보내지 않습니다.
input 태그
-사용자가 데이터를 입력할 수 있는 필드
아이디 : <- 사용자 ID 입력 필드
비밀번호 : <- 사용자 PassWord 입력 필드
input 태그 속성
* 여러가지 속성이 있지만 위에 작성된 index.php 코드에서 사용된 속성들만 설명하겠습니다.
-
name 속성은 해당 태그에 이름을 정의합니다.
-
type 속성은 해당 input태그에 형태를 정해줍니다.
1. 아이디 : <input type="text">
ex) 아이디 :2. 비밀번호 : <input type="password">
ex) 비밀번호 :만약 "type=password" 를 하지 않을 경우 비밀번호가 그대로 "노출" 됩니다.
2. 비밀번호 : <input type="text">
ex) 비밀번호 : -
placeholder 속성은 사용자 입력 필드에 문구를 표시합니다.
placeholder 속성이 없을 경우
ex) 아이디 :
placeholder 속성이 있는 경우
ex) 아이디 : -
required 속성은 해당 필드가 빈 공간으로 데이터를 전송할 경우 경고문을 표시합니다.
아이디가 비어있는 경우
비밀번호가 비어있는 경우
-
autocomplete 속성은 기본값으로는 autocomplete="on" 으로 자동완성 기능을 제공합니다.
autocomplete="on"
autocomplete="off"
-
autofocus 속성은 자동으로 해당 필드를 선택해 줍니다.
autofocus 없을 경우
autofocus 있을 경우
button 태그
-기본적으로 클릭할 수 있는 기능을 제공하고, 기본값으로 submit(전송) 기능을 가집니다.
-form태그 안에서는 서버로 데이터를 보냅니다.
버튼
login_ok.php
로그인 확인
<?php $id = $_GET["user_id"]; $pw = $_GET["user_pw"]; if ($id == "admin" && $pw == "admin") { echo "<script>location.href='./check.php'</script>"; } else { echo $id . "님 어서오세요. 환영합니다^^"; }
- index.php에서 보내온 데이터를 받습니다.
- 받아온 데이터를 GET방식으로 변수에 저장합니다.
- 조건문 if문에서 받아온 값 id가 "admin" 이고 pw가 "admin" 일 경우 다음 문장을 수행
- 조건을 만족한 경우 check.php 로 페이지이동 합니다.
- 조건을 만족하지 않을 경우 현재페이지 login_ok.php 에서 else문을 수행합니다.
check.php
관리자로 로그인을 성공했을 때
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>관리자 페이지</title> </head> <body> <h1>어서오시오 관리자여</h1> </body> </html>
만들면서 부족했다고 생각하는 부분
로그인
- 아이디 필드에 특수문자("빈 공간", !, @, #, $) 등이 포함되서 로그인
- 비밀번호 필드에 빈공간이 포함되서 로그인
마무리
if문을 사용하여 로그인을 구성해봤습니다.
만들다 보니 생각보다 허술한 부분이 많이 있었습니다.
더욱 보완해서 다시 만들어 볼 생각입니다.
if문으로 계속해서 해당 특수문자를 조건을 준다는 생각도 해봤지만 너무 비효율적이라고 생각했습니다.
다음에는 로그인 할 때 아이디에 특수문자가 들어가지않는 방법을 찾아보겠습니다.
