PHP 에서 내용을 다른 파일로 전달하는 방법으로 가장 기본 예제가 로그인 예제다.
네이버 지식인에 올라오는 공통적인 질의사항에 대한 개념이해를 돕기 위함이다.
HTML5 기반 jQuery 입력 필드 체크, 모바일 환경을 고려했다.
<meta name="viewport" content="width=device-width, initial-scale=1"> 이 부분이 모바일 환경을 고려한 부분이다.
bootstrap 폼 예제는 아니다. 기본 Form 에 대한 이해를 하고 나면 bootstrap Form으로 변경하는 것도 쉽다.
Form 을 작성하려면 <form> 태그를 사용한다.
<form> 태그는 두가지 주요 속성을 가진다.
- action 속성 : 어디에 데이터를 보낼지의 URL을 지정
- method 속성 : 어떻게 데이터를 전송할지의 방법을 지정. method 속성값에는 POST와 GET의 두가지 방법이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="form1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
var loginID = $("input[name='loginID']").val();
var loginPW = $("input[name='loginPW']").val();
if( loginID =='') {
alert("아이디를 입력하세요");
$("input[name='loginID']").focus();
return false;
}
if(loginPW =='') {
alert("패스워드를 입력하세요!");
$("input[name='loginPW']").focus();
return false;
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>Form 예제1</h2>
<form method="post" action="form.action.php">
<table>
<tr>
<td>로그인 ID</td>
<td><input type="text" name="loginID" value=""></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="loginPW"></td>
</tr>
<tr>
<td colspan='2' align='center'><input type="submit" value="전송"></td>
</tr>
</table>
</fom>
</div>
</body>
</html>
|
body {
font-family: 나눔바른고딕, NanumBarunGothic, 맑은고딕, "Malgun Gothic", 돋움, Dotum, "Apple SD Gothic Neo", sans-serif;
font-size: 12px;
color: rgb(33, 33, 33);
letter-spacing: 0.03em;
}
table {
width: 300px;
}
tr {
height: 50px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 5px 10px; /* 상하 우좌 */
margin: 3px 0; /* 상하 우좌 */
font-family: inherit; /* 폰트 상속 */
border: 1px solid #ccc; /* 999가 약간 더 진한 색 */
font-size:14pt;
box-sizing: border-box;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus, input[type=password]:focus {
border: 2px solid #555;
}
input[type=submit] {
margin-top: 10px;
width:100px;
height:40px;
line-height: 22px;
padding: 5px, 10px; /* 상하 우좌 */
background: #E6E6E6;
color: #000000;
font-size: 15px;
font-weight: normal;
letter-spacing: 1px;
border: none;
cursor: pointer;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input[type=submit]:hover {
background-color: #FFBF00;
} |
<?php
// 파일을 직접 실행하면 동작되지 않도록 하기 위해서
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST"){
@extract($_POST); // $_POST['loginID'] 라고 쓰지 않고, $loginID 라고 써도 인식되게 함
// POST 배열로 넘어온 값 확인 목적
echo '<pre>';print_r($_POST);echo '</pre>';
// db 접속파일 include 및 정상 로그인 여부 체크하는 함수 실행후 결과 반환처리 하면 된다.
$ref = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER']:'';
// 만약 사용자가 이전 페이지의 링크를 거치지 않고 브라우저에 URL을 직접 입력하여 접속한 경우는 ''
} else { // 비정상적인 접속인 경우
echo 0; // form.action.php 파일을 직접 실행할 경우에는 화면에 0을 찍어준다.
exit;
}
?> |
클라이언트에서 Javascript 로 검증하고 있으면 서버에서 재검증할 필요가 없다고 생각할 수도 있지만 이것은 크게 잘못된 생각이다. 공격자는 모든 요청을 자유롭게 서버에 전송할 수 있으므로, Javascript에서의 검증을 쉽게 빠져나갈 수 있다.
만약 사용자가 이전 페이지의 링크를 거지치 않고 직접 접속한 경우에는 브라우저에 URL을 직접 입력하여 접속한 경우에는 참조원 정보뿐만아니라 $_SERVER['HTTP_REFERER'] 도 없다.
테스트한 파일을 첨부한다.
form-01.zip
