안녕하세요! 연쇄창업가 최대표입니다.
워드프레스의 웹 빌더 플러그인 사용을 넘어, 직접 제작단계를 가기 위해 PHP를 연습하고 있는데, 가장 먼저 HTML의 Form태그를 어떻게 PHP에서 활용하는지 알려드리겠습니다.
먼저 Form 태그는 우리가 홈페이지에서 쉽게 볼 수 있는 기능인데, 대표적인 것이 바로 아이디와 패스워드를 입력하는 공간입니다. 아래 이미지는 네이버 로그인 화면인데, 여기 보이는 아이디, 비밀번호를 넣고 로그인 버튼을 클릭하여 로그인하는 기능이 바로 HTML의 Form 태그 기능입니다.
서버에 연습용 php 파일 만들어서 Form 연습하기
local에 php와 apache 서버를 설치해서 실행해도 되지만, 저는 편하게 호스팅 업체의 서비스를 이용하고 있습니다. 이전에 Fastcomet에 PHPstorm을 연결하는 방법에 대해 포스팅 하였으니 참고하시면 되겠습니다.
저는 서버에 study.php 라는 파일을 새로 만들어서 테스트해보았습니다. 이렇게 하니 정말 간편하게 실행할 수 있어서 좋네요.
디자인 부분은 무시하고, 아이디와 비밀번호를 입력하고 로그인하는 버튼을 간단하게 HTML로 작성해보면 다음과 같습니다.
[study.php 파일]
<form>
<label>아이디 <input name="id" type="text"></label>
<label>비밀번호 <input name="password" type="password"></label>
<label><input type="submit" value="로그인"></label>
</form>서버에 업로드하고 실행하보니 아래와 같이 나오네요.
“아이디” 텍스트 옆 입력 칸(input)의 이름은 “id”이고 type은 “text”로 처리됩니다.
“비밀번호” 텍스트 옆 입력 칸(password)의 이름은 “password”이고 type은 “password”로 처리됩니다.
type이 text면 일반 텍스트로 인식하고, type이 password면 비밀번호 입력시 “***”과 같이 별표가 보이게 됩니다. name=””은 데이터를 주고 받을 때 이름표가 됩니다. 이후에 코드를 작성하면서 자연스럽게 알 수 있습니다.
입력받은 “아이디”와 “비밀번호”의 데이터를 받아 다른 파일에 넘겨주기
먼저, 입력받은 “아이디”와 “비밀번호”의 데이터를 받을 파일을 하나 생성합니다.
저는 login_page.php를 만들어보았습니다. 이곳에 앞서서 입력한 아이디와 패스워드를 보이도록 설정해보겠습니다.
[login_page.php 파일]
<?php
echo "아이디와 패스워드 보여주기";
echo "아이디 : ".$_POST["id"];
echo "패스워드 : ".$_POST["password"];
?>php에서 echo는 화면에 출력하는 명령어입니다. 첫 줄에는 “아이디와 패스워드 보여주기”라는 문장을 그대로 보여주고, 그 다음 줄에는 입력한 아이디 값을, 그 다음 줄에는 입력한 패스워드 값을 보여주고자 합니다.
데이터를 가져오기 위해서는 “$_POST[“name 값”];” 형태로 입력합니다. POST는 데이터 전송방식인데, 이는 뒤에서 다루겠습니다. 이 사이 값에 “name 값”이 바로 Form 태그에서 사용했던 name=”xxx” 안의 값입니다.
“아이디 : “와 “$_POST[“name 값”];” 사이에 “.” 이 보이시나요? 이 “.” 점 하나가 중요합니다. 점이 없다면 다음과 같이 코딩해야 합니다.
[login_page.php 파일]
<?php
echo "아이디와 패스워드 보여주기";
echo "아이디 : "; echo "$_POST["id"];
echo "패스워드 : "; echo "$_POST["password"];
?>차이가 느껴지시나요? 바로 echo가 두 번 들어가야 합니다. 하지만, 사이에 점을 입력하면 이 echo를 생략하고 한 줄로 입력이 가능해집니다.
자 그 다음에 할 일은 바로 study.php 파일에 만든 Form에서 아이디와 패스워드를 넣고 로그인 버튼을 입력하면 login_page.php로 넘어와서 입력한 데이터를 출력하도록 만드는 일입니다.
[study.php 파일]
<form action="login_page.php" method="post">
<label>아이디 <input name="id" type="text"></label>
<label>비밀번호 <input name="password" type="password"></label>
<label><input type="submit" value="로그인"></label>
</form>추가된 코드는 바로 <form action=”login_page.php” method=”post”> 입니다.
action=””은 이 form 입력하고 제출했을 때, 이 데이터를 어디에 보낼지 설정할 수 있습니다. 저는 방금 만든 login_page.php 파일에 이 데이터를 보내도록 설정했습니다.
다음 method=””는 데이터를 보내는 방식을 결정합니다. 크게 GET과 POST가 있는데, 이에 대한 자세한 내용은 이후에 포스팅하도록 하겠습니다. 간단하게 이야기하면, GET은 www.example.com/show?name1=value1&name2=value2와 같이 각각 name과 value 값으로 데이터를 전송하게 됩니다. URL에 데이터가 모두 노출되기에 보안이 필요한 데이터는 이 방식으로 전송하지 않습니다.
POST의 경우 이용자가 서버로 데이터를 보낼 때 사용합니다. GET처럼 주소에 데이터들이 노출되지 않고, 길이에 제한이 없습니다. (다만, 암호화를 하지 않으면 데이터를 볼 수 있는 것은 똑같습니다) 결국, 아이디나 패스워드 처럼 중요한 데이터의 경우는 POST로 암호화하여 보내야 합니다.
업데이트를 했다면 이제 study.php에서 아이디와 비밀번호를 넣고 “로그인” 버튼을 클릭합니다. 그러면 login_page.php 파일로 이동하면서 내가 입력한 아이디와 비밀번호가 정상적으로 출력이 됩니다.
위와 같이 다른 페이지로 이동할 수도 있지만, 페이지를 이동하지 않고 동일 페이지에서 데이터를 보이게 할 수도 있습니다.
[study.php 파일]
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<label>아이디 <input name="id" type="text"></label>
<label>비밀번호 <input name="password" type="password"></label>
<label><input type="submit" value="로그인"></label>
</form>
<?php
echo "아이디 : ".$_POST["id"];
echo "비밀번호 : ".$_POST["password"];
?>위와 같이 action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”를 입력하면, 페이지를 넘기지 않고도 데이터를 받을 수 있습니다.
이렇게 실행해보면 페이지가 변동되지 않은 상태에서 값을 입력할 수 있게 됩니다.