R's Hacking Daily Log

php - HTML Form으로 데이터 전송하기 (1) 본문

PHP

php - HTML Form으로 데이터 전송하기 (1)

hanhxx 2023. 7. 23. 19:35

 Step :: POST & GET 

웹 사이트를 이용하다 보면 로그인, 회원 가입, 댓글 등

Form을 입력하고 전송 버튼을 누르는 경우를 흔하게 마주할 수 있다. 

 

 

전송 버튼을 누른 다는 건 다른 말로, 현재 페이지의 데이터를 다음 페이지로 전달한다고 할 수 있다.

데이터를 전달할 때 사용되는 http method는 POST OR GET method이며

전달할 데이터를 입력하는 형태는 html elemnt를 통해 선택할 수 있다. 

 

 

POST or GET method를 통해 전달되는 데이터를 php에서는 글로벌 변수 $_POST & $_GET을 통해 저장한다.

$_SESSION, $_COOKIE와 같이 key - value 형태로 데이터를 저장하고 참조할 수 있다.

 

 

POST & GET 방식을 이용한 사례를 살펴보기 전, 두 방식이 어떻게 다른지에 대해 알아보자.

GET method의 경우,

데이터를 전달할 때 전달되는 데이터가 URL에 드러나게 되는 특징이 있다. 

그렇다보니 중요한 정보를 전달하는 경우에는 GET method가 적합하다고 하기 어렵다. 

 

예를 들어 productID가 지정된 상품 페이지를 클릭하는 경우,

~shopping.com/product?productID=2

브라우저는 productID가 2인 상품 페이지를 줘!라고 서버에게 요청을 보내고

서버는 productID parameter를 기반으로 페이지를 만들어 보내준다. 

 

이때 위와 같이 productID라는 key가 2라는 value를 가진다는 걸 url에 포함하고 있음을 볼 수 있다. 

$_GET['productID'] = 2;

서버는 url을 보고 GET method로 받은 데이터를 글로벌 변수 $_GET에 위와 같은 형태로 저장하게 되는 것!

 

 

 

POST method의 경우는

데이터를 전달할 때 전달되는 데이터를 html body 부분에 넣어서 보낸다.

그렇다보니 url에 정보가 노출되지 않는다. 

 

GET method에서와 같이 productID 값을 POST method로 전달한다면 

$_POST['productID'] = 2;

서버에서는 html body를 통해 값을 받고 이를 글로벌 변수 $_POST에 저장할 것이다. 

 

 

지금부터는 POST & GET Method를 각각 이용해 데이터를 전달하는 코드를 살펴보도록 하자!

 

[ post.php ]

<html>
    <head>
        <title>Post</title>
    </head>
    <body>
        <h1>Post Example</h1>
        <form action="./post_result.php" method="post">
            name : <input type="text" name="name"><br/>
            id : <input type="text" name="id"><br/>
            mail : <input type="text" name="email"><br/>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

위와 같은 html 태그로 이루어진 post.php code가 있다.

내용을 살펴보니 form tag 안에 input tag가 4개가 들어있는 데 그중 3개는 text, 1개는 submit type인 걸 확인할 수 있다.

 

 

우선 form tag부터 보면, action & method 속성이 설정되어 있는 상태이다.

<form action="./post_result.php" method="post"></form>

action 속성은 "action 속성 값" 경로로 가줘 라는 의미이다. 따라서 위의 코드의 form이 제출되면

post_result.php로 이동하게 된다. 

 

method 속성은 form에 작성된 데이터를 전달할 때 어떤 방식으로 전달할 지를 지정하기 위해 사용한다.

HTTP POST method를 원한다면 post, GET method를 원한다면 get이라 적으면 된다. 

 

 

다음으로 input tag는 type에 따라 유형이 달라지는 데 여기서는 text & submit 유형만 살펴볼 것이다.

<input type="text" name="name">

type이 text인 경우에는 텍스트 문자를 입력 받을 수 있는 input tag가 만들어진다. 

name 속성은 해당 태그를 가르킬 이름을 지정하기 위해 사용한다. 

 

method에 따라 데이터를 저장하기 위해서는 input tag에 입력된 데이터(= value)를 저장할 때

이 데이터를 가르킬 이름(= key)이 필요하다.

 

즉, tag에 지정된 name 속성 값을 글로벌 변수에 저장할 때

key 값으로 사용하기 위해서 name 속성을 사용하고 있는 것!!

 

<input type="submit" value="Submit">

type이 submit인 경우에는 input tag가 버튼 모양으로 만들어진다. 

해당 버튼을 누르면 말 그대로 "제출" 기능이 수행된다. 

 

따라서 (1)form 안에 input tag를 데이터로 채워주고 (2)submit type의 input tag를 누르면

(3)form 데이터가 action 경로에 적힌 페이지로 전달된다. 

 

그렇다면 결과가 어떻게 나오는지 post_result.php를 확인해 보자!

 

 

[ post_result.php ]

<?php
$name = $_POST['name'];
$id = $_POST['id'];
$email = $_POST['email'];
?>


<html>
    <head>
        <title>Post Result</title>
    </head>
    <body>
        <h1>Post Example</h1>
        <?php echo $name."님의 id는 ".$id." 메일주소는 ".$email."입니다."; ?>
    </body>
</html>

 

form의 데이터가 post_result.php로 전달되면 name 속성이 각각 name, id, email이기 때문에

$_POST['name'] = '상어밥';
$_POST['id'] = 'shark';
$_POST['email'] = 'shark@abc.com';

이와 같은 형태로 $_POST에 저장되었을 것이다. 

 

이 값을 변수 id, name, email에 할당하고 있는 형태라고 보면 된다. 

값을 할당했으니 html tag 안에서 변수 값을 출력하면 

(html tag 내에서 php를 사용하기 위해서는 당연히 <?php ?>로 php code 부분을 감싸줘야 한다.)

 

input tag에 내용을 작성하고 submit 버튼을 누르면 post_result.php 페이지로 이동해 

입력했던 값들이 정상적으로 출력되는 걸 볼 수 있다. 

 

 

동일한 흐름을 이번에는 GET Method로 구현해 보자.

 

[ get.php ]

<html>
    <head>
        <title>Get</title>
    </head>
    <body>
        <h1>Get Example</h1>
        <form action="./get_result.php" method="get">
            name : <input type="text" name="name"><br>
            id : <input type="text" name="id"><br>
            email : <input type="text" name="email"><br>
            <input type="submit" value="SUBMIT">
        </form>
    </body>
</html>

post.php 코드에서 form - method를 get, form - action을 get_result.php로 수정해 준다.

 

 

[ get_result.php ]

<?php
$name = $_GET['name'];
$id = $_GET['id'];
$email = $_GET['email'];
?>

<html>
    <head>
        <title>Get Result</title>
    </head>
    <body>
        <h1>Get Example</h1>
        <?php echo $name."님의 아이디는 ".$id." 메일주소는 ".$email."입니다"; ?>
    </body>
</html>

get Method로 데이터를 전달했기 때문에 이번에는 $_POST가 아닌 $_GET으로부터 값을 할당한다.

 

 

 

Get method는 전달하는 데이터가 url에 노출되는 특징이 있다고 위에서 언급한 바 있다.

결과를 보면 get_result.php url에 name, id, email에 대한 정보가 포함되어 있는 걸 볼 수 있다.

 

/get_result.php?name=상어밥&id=shark&email=shark@abc.com

url 상에서 데이터가 전달될 때는 key=value 형태로 나열되는 데

해당 데이터는 전달된 경로 뒤에 물음표(?)가 붙고 나서 앰퍼샌드(&)로 연결되는 구조를 가진다. 

 

즉 위의 url을 보면 누구든지 

"name 값은 상어밥이고 id는 shark, email은 shark.com이구나"라는 걸 쉽게 알 수 있기 때문에

데이터를 전달할 때 보안을 생각한다면 Get method를 사용하는 건 적절치 못하다!!!

 

 

Get Method로 데이터를 전달하는 방법에는 input tag를 활용하는 것 말고도 다른 방법이 존재한다. 

 

[ geturl.php ]

<?php
$name = "상어밥";
$id = "shark";
$email = "shark@abc.com";
?>

<head>
    <head>
        <title>Get</title>
    </head>
    <body>
        <h1>Get Example</h1>
        <a href="./get_result.php?name=<?php echo $name; ?>&id=<?php echo $id; ?>&email=<?php echo $email; ?>">전송</a>
    </body>
</head>

input tag를 사용해서 값을 전달하는 것이 아닌 직접 php 변수를 만들고 

해당 변수를 html 안에서 선언하여 전달하는 것이다. 

 

a tag를 보면 href 속성 값에 GET method로 인해 생성되는 url 형태로 php 변수를 호출하고 있는 걸 볼 수 있다.

이렇게 데이터를 전달하더라도 서버 측에서 데이터를 $_GET에 넣고 값을 참조하는 과정은 변함없기 때문에 

 

결과는 get.php로부터 얻은 결과와 동일하다!

'PHP' 카테고리의 다른 글

php - File Upload (1)  (0) 2023.07.25
php - HTML Form으로 데이터 전송하기 (2)  (0) 2023.07.24
php Cookie  (0) 2023.07.22
php Session  (0) 2023.07.21
php 예외 처리  (0) 2023.07.19
'PHP' Related Articles more
Comments