글쓰는 개발자
PHP 기초문법 (5) Form, POST 본문
1. HTTP
HTTP는 웹 브라우저와 웹 서버가 서로 소통하기 위한 프로토콜이며 다음과 같은 흐름으로 진행된다.
① 사용자가 웹 브라우저 주소 창에 URL을 입력하거나 웹 페이지의 링크를 클릭한다.
② HTTP 프로토콜을 통해 사용자의 요청이 웹 서버로 전달된다.
③ 웹 서버는 사용자의 요청을 처리하여 그 결과를 사용자의 웹 브라우저에 전송한다.
④ 웹 브라우저는 웹 서버가 보낸 데이터를 분석하여 화면에 출력한다.
⑤ 웹 브라우저 화면에 텍스트, 글자, 동영상 등의 형태로 나타난 요청 결과를 사용자가 확인한다.
웹 브라우저에서 웹 서버로 데이터를 전달하는 방식은 HTTP 메서드라 불리며 크게는 GET, POST, PUT, PATCH, DELETE가 존재한다. 그 중 가장 많이 사용되는 방식은 GET과 POST 방식이며 GET 방식은 필요한 파라미터를 URL 주소 뒤에 붙여서 전송하며 POST 방식은 눈에 보이지 않는 파라미터 형태로 데이터를 전송하는 형태다.
2. POST 방식
1) 폼 양식의 데이터 처리
다음은 폼 양식에 사용자가 입력한 데이터를 POST 방식으로 처리하는 예제이다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form name="form" method="post" action="post-test.php">
<input type="text" name="input-name">
<input type="submit" value="확인">
</form>
</body>
</html>form태그 내부에는 text타입과 submit 타입의 input들이 존재한다. 이 input의 value들은 submit input이 click되는 순간 form에 지정된 action 페이지로 전달되고 이때 form 태그에 method에 명시된 방식으로 전달된다. 위 코드를 보면 post-test.php 페이지로 input-name이라는 텍스트 형태의 input 값을 전달하도록 지정되어 있는 것을 알 수 있다.
결과 페이지에서는 input-name이라는 name을 가진 text input의 값을 받아서 처리해야 한다. 앞에서 입력한 이름을 받아서 출력해준다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
$name = $_POST["input-name"];
echo $name."님 반갑습니다!!";
?>
</body>
</html>
2) input 태그들의 종류 및 처리
form으로 전송할 수 있는 input의 종류는 다양하다. 그 중 일부인 text, password, textarea, radio, checkbox, select를 사용하는 방법에 대해 간단히 알아보자.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form name="form" method="post" action="post-test2.php">
<input type="text" name="id"><br>
<input type="password" name="pass"><br>
<div>
성별: 남성 <input type="radio" name="gender" value="남" checked>
성별: 여성 <input type="radio" name="gender" value="여">
</div>
<ul>
<li>취미1 <input type="checkbox" name="hobby[]" value="취미1"></li>
<li>취미2 <input type="checkbox" name="hobby[]" value="취미2" checked></li>
<li>취미3 <input type="checkbox" name="hobby[]" value="취미3" ></li>
</ul>
<select name="fruit">
<option value="딸기" >딸기</option>
<option value="사과" >사과</option>
<option value="오렌지" selected>오렌지</option>
</select>
<input type="submit" value="확인">
</form>
</body>
</html>위 코드를 보면 text 타입, password 타입의 input tag를 볼수 있다. 이는 각각 text와 비밀번호를 입력하는 항목이며 password로 지정된 input의 내용은 입력시 가려진 글자가 표시된다.
radio는 같은 name으로 묶인 그룹중 하나만 선택이 되는 컴포넌트이며 checkbox는 여러개 항목이 동시에 선택이 가능하다. 여기에 checked라는 attribute를 지정하면 처음에 선택된 항목을 지정할 수 있다. checkbox의 이름은 배열형태로 되어있기때문에 대괄호를 넣어준것을 주의하자.
select는 여러개의 옵션중 하나를 선택할때 많이 사용된다. 옵션은 각각의 value를 가지고 그 사이에 들어가는 내용이 실제 화면에 표시된다.
다음은 form 데이터를 전송받을 페이지에 대한 php 페이지다. 각각의 데이터를 받아서 출력해 주는데 특이한 점은 hobby는 배열이기 때문에 그 개수를 count 내장함수를 사용해 출력하고 마지막 인덱스가 아닐경우 콤마(,)를 붙여주는 부분이 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
$id = $_POST["id"];
$pass = $_POST["pass"];
$gender = $_POST["gender"];
$hobby = $_POST["hobby"];
$hobbyCount = count($hobby);
$fruit = $_POST["fruit"];
echo "아이디: $id 비밀번호: $pass<br>";
echo "성별: $gender<br>";
echo "취미:";
for($i = 0; $i < $hobbyCount; $i++) {
echo $hobby[$i];
if($i != $hobbyCount -1) {
echo ", ";
}
}
echo "<br>";
echo "과일: $fruit";
?>
</body>
</html>
3) hidden 필드와 파일 업로드
hidden 필드는 미리 지정된 값을 저장해서 post에 함께 보내는 역할을 하며 form으로 함께 보내고 싶은 값이 존재할 때 사용한다. 파일은 input type을 file로 변경해서 전달할 수 있으며 file의 이름은 tmp_name으로 저장된다. 이번 예제에서는 전달된 이미지를 특정 위치에 저장하고 이를 이용해 이미지를 출력하도록 하겠다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form
name="form"
method="post"
enctype="multipart/form-data"
action="file-upload-test.php">
이미지 업로드 : <input type="file" name="upload">
<br><br>
<input type="submit" value="확인">
</form>
</body>
</html>위 코드는 파일을 업로드 하기 위한 폼과 input을 설정한다. file이 포함된 form은 enctype을 multipart/form-data로 지정해야 한다.
다음은 파일이 업로드 되었을 때 처리하는 php 페이지이다. 파일이 업로드 되면 자동으로 만들어진 이름으로 저장이 된다. 이를 서버에 특정위치에 이름을 변경해서 이동시킨뒤에 이미지를 출력해준다. move_uploaded_file은 업로드 된 파일을 내가 지정한 위치에 지정한 파일명으로 파일을 이동시키는 역할을 한다.
php 사이에 html을 사용하고 싶으면 php end tag(?>)를 사용한 뒤에 다시 시작태크(<?php)를 사용해 php를 연결해 주어야 한다는 것도 알아두자.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
$file_dir = "E:/xampp/htdocs/php/form/";
$file = $_FILES["upload"];
$file_name = $file["name"];
$file_path = $file_dir.$file_name;
$tmp_name = $file["tmp_name"];
echo "tmp_name: $tmp_name<br>";
if (move_uploaded_file($tmp_name, $file_path)) {
?>
<img src="<?=$file_name?>">
<?php
} else {
echo "파일 업로드 에러 발생!!";
}
?>
</body>
</html>실제 저장되는 임시 위치 및 이름과 함께 이미지가 출력된 것을 확인할 수 있다.
'Development > PHP' 카테고리의 다른 글
| PHP 기초문법 (7) 쿠키, 세션 (0) | 2020.05.09 |
|---|---|
| PHP 기초문법 (6) Form GET (0) | 2020.05.06 |
| PHP 기초문법 (4) 함수 (0) | 2020.05.05 |
| PHP 기초문법 (3) 배열 (0) | 2020.05.05 |
| PHP 기초문법 (2) 조건문, 반복문 (0) | 2020.05.04 |
