[MySQL & PHP] 17장 PHP 스크립트와 HTML
MySQL & PHP 학습/정리 그리고 체크! 2016. 3. 6. 15:20
정리
1. 동적인 웹 페이지와 정적인 웹 페이지의 차이
1. HTML 소스
매일같이 무의식적으로 브라우저를 통해 보는 웹 페이지, 그 뒷면은 어떻게 생겼는지 본적이 있나요?
이번 장부터 마지막 장까지는 웹 페이지를 만들어 보겠습니다. 먼저, 웹 서버에서 보내온 웹 페이지의 내용을 확인해 보겠습니다.
브라우저에 소스를 표시합니다. Internet Explorer라면, [마우스 오른쪽 클릭] -> [소스 보기], Chrome이라면 [마우스 오른 클릭] -> [페이지 소스 보기]를 선택합니다.
표시한 소스는 <TR>이나 <A~>등, <>안에 작성한 문자로 구성된 HTML 파일입니다. <>을 태그라고 하는데, '여기에 이런 문장을 표시하시오.', '여기에 ◯◯의 이미지 파일을 표시하시오.' 등의 명령을 의미합니다.
HTML 파일은 'HTML'이라는 규칙에 따라 만들어진 단순한 텍스트 파일입니다. 그리고 브라우저는 웹 서버에서 보내온 HTML 파일의 명령에 따라 함께 보내온 문자와 이미지를 배치하는 역할을 할 뿐입니다.
2. 웹 페이지를 생성하는 두가지 방법
15장의 '4. 정적 화면과 동적 화면' 에서 정적인 웹 페이지와 동적인 웹 페이지에 대해 언급했습니다. 이 '정적'과 '동적'에 대해 좀 더 자세하게 설명하겠습니다.
웹 페이지를 만드는 방법에는 두 가지가 있습니다.
① 편집기로 태그를 입력한다. 또는 웹 페이지 생성 프로그램으로 태그를 작성한다.
② PHP 스크립트 등의 프로그램을 이용해서 태그를 출력한다.
2.1 정적인 웹 페이지 만들기 ①
먼저, ①의 웹 페이지를 작성하는 방법입니다.
HTML 파일은 텍스트로 되어 있기 때문에 문법 규칙만 이해하고 있다면 메모장과 같은 편집기로 간단하게 만들 수가 있습니다. 옛날에는 웹 페이지를 만들려면 편집기에 직접 키보드로 태그를 입력하는 방법밖에 없었습니다. 하지만 지금은 태그를 몰라도 Adobe Dreamweaver나 IBM 홈페이지 빌더와 같은 '웹 페이지 생성 프로그램'을 이용하면 자동으로 태그를 만들 수 있습니다.
'편집기로 직접 입력한다.'와 '프로그램으로 자동 생성한다.'라는 차이가 있을 뿐, 이런 방법으로 작성한 웹 페이지의 내용에는 변함없이 태그에서 지정한 내용이 그대로 표시됩니다. 예를 들어, '안녕하세요.'라는 내용의 웹 페이지는 언제 어느 누가 접속해도 '안녕하세요.'라고 표시됩니다. 이런 웹 페이지를 정적인 웹 페이지라고 합니다.
2.2 동적인 웹 페이지 만들기 ②
다음은 ②의 동적인 웹 페이지를 작성하는 방법입니다.
다음은 16장의 '예제 16-16 if.php' 에서 작성한 PHP 스크립트 입니다.
1 2 3 4 5 6 7 8 9 10 11 | <?php if (date("G")>=18) { print "퇴근할 시간이네요."; }else if (date("G")>=9) { print "좋은 아침입니다."; }else if (date("G")>=6) { print "일어나세요."; }else{ print "졸리지 않나요?"; } ?> | cs |
실행하면, 0시에는 '졸리지 않나요?', 6시에는 '일어나세요.', 9시에는 '좋은 아침입니다.', 18시에는 '퇴근할 시간이네요.'라고 브라우저에 표시됩니다. 이는 PHP가 '시간'이라는 조건에 따라 각기 다른 내용을 출력하고 있기 때문입니다.
이처럼 PHP 스크립트 등의 프로그램에 의해 조건별로 다른 내용을 표시하는 웹 페이지를 동적인 웹 페이지라고 합니다.
2.3 브라우저는 정적인 페이지와 동적인 페이지를 구별하지 않는다
브라우저는 다음 2가지 파일을 구별할 수 없습니다. 클라이언트 측에서는 똑같이 표시됩니다.
①의 방법 즉, 편집기나 웹 페이지 생성 프로그램으로 태그를 직접 입력해서 만든 HTML 파일.
②의 방법 즉, PHP 등의 프로그램 언어를 이용해서 간접적으로 작성한 HTML 파일.
우리의 목표는 MySQL을 조작한 결과를 웹 페이지의 형태로 클라이언트에 보내는 것입니다. MySQL을 조작한 결과는 당연히 그때그때 다릅니다. PHP 스크립트를 사용해서 MySQL을 조작하고, MySQL이 처리한 결과를 다시 PHP 스크립트로 받아서 웹 페이지에 동적으로 출력하는 것입니다.
2. HTML 태그의 기본적인 작성 방법
3. HTML의 규칙
PHP 스크립트를 사용해서 MySQL을 조작하려면 HTML 지식이 필요합니다. 여기에서는 MySQL을 조작하는 데 필요한 지식에 한해서 설명하겠습니다.
HTML 파일의 확장자는 .html, PHP 스크립트가 포함되어 있다면 .php
HTML 파일은 <HTML>과 같은 태그로 구성된 텍스트 파일입니다. 확장자는 .html 또는 .htm입니다(여기서는 .html로 통일하고 있습니다). 단, 내용 중에 PHP 스크립트가 포함되어 있으면, .php 확장자를 사용해야 합니다.
태그는 반각으로 입력하고, 대문자와 소문자를 구별하지 않는다
HTML에서는 태그에 반각 문자를 사용해야 합니다. 대문자와 소문자는 구별하지 않습니다. 즉, <HTML>과 <Html>, <html>은 모두 같은 태그로 인식합니다. 여기서는 모든 태그에 소문자를 사용하고 있습니다.
HTML 파일의 구성
HTML 파일은 시작할 때에는 <HTML>, 종료할 때에는 </HTML>이라고 작성합니다. 이처럼, 시작과 끝에 작성하는 태그에서 끝에는 </..>이라고 작성합니다.
<HTML> ~ </HTML>의 사이에는 다음과 같이 2개의 블록이 있습니다.
<HTML> ~ </HTML> 사이의 2개 블록
<HEAD>
페이지의 제목과 링크의 관계를 기술한다.
</HEAD>
<BODY>
웹 페이지에 표시되는 본체를 기술한다.
</BODY>
예를 들어, 예제 17-1과 같은 HTML 파일을 브라우저에 표시하면 다음과 같은 결과가 표시됩니다.
에제 17-1 tag.html
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SQL 블로그 화면</title> </head> <body> SQL 블로그에 오신 걸 환영합니다. </body> </html> | cs |
HTML 소스는 <html>로 시작합니다. 2 <head>에는 타이틀과 링크를 작성하고 3 , <body> 부분이 본체가 됩니다. 7 마지막 에는 </html>을 입력합니다. 10
속성에는 큰따옴표(") 또는 작은따옴표(')를 사용한다.
많은 태그에 속성을 설정할 수 있습니다. 예를 들어, 페이지 전체의 배경색을 설정하려면, <body> 태그의 속성 bgcolor를 다음과 같이 설정합니다.
1 | <body bgcolor="blue"> | cs |
body와 bgcloor=...의 사이에는 반드시 반각 공백을 입력합니다.
앞의 예에서는 페이지의 배경색이 파란색이 됩니다. 참고로, 빨간색은 'red', 노란색은 'yellow', 초록색은 'green', 보라색은 'purple', 검은색은 'black'이라고 입력하면 됩니다. 여기서의 21장의 예제에서는 'lightsteelblue'나 'indigo', 'darkgray', 'orange'등의 색을 설정합니다.
속성으로 설정한 값을 속성값이라고 합니다. 속성값에는 큰따옴표(") 또는 작은따옴표(')를 사용합니다.
PHP에서 동적으로 HTML 태그를 작성할 때에는, 번거롭지만 print나 echo를 사용해야 합니다. 이때, 사용하는 태그는 문자열로 인식되기 때문에 다음과 같이 큰따옴표(")나 작은따옴표(')로 감싸야 합니다.
1 | print "<body>"; | cs |
앞에서 설명한 대로라면 속성값을 <body bgcolor="blue">와 같이 큰따옴표(")로 감쌉니다. 그러나 이렇게 큰따옴표(")를 사용해서 작성한 태그를 PHP로 출력할 때 똑같은 큰따옴표(")로 감싸게 되면 오류가 발생합니다. 즉, 다음은 오류가 발생합니다.
1 | print "<body bgcolor="blue">" | cs |
오류를 피하려면, 안쪽은 큰따옴표(")에 \를 붙여서 이스케이프 처리를 하거나, 안쪽의 작은따옴표(')를 바깥쪽에서 큰따옴표(")로 감싸거나, 안쪽의 큰따옴표(")를 바깥쪽에서 작은따옴표(')로 감싸는 등의 대책이 필요합니다.
여기서는 다음과 같이 PHP에서 출력하는 문자열에는 큰따옴표(")를 사용하고, 안쪽의 HTML 태그의 속성에는 작은따옴표(')를 사용하고 있습니다.
1 | print "<body bgcolor='blue'>" | cs |
큰따옴표(")나 작은따옴표(') 생략하기
HTML에서는 많은 경우, 속성에 사용하는 큰따옴표(")나 작은따옴표(')를 생략할 수가 있습니다. 앞선 예는 다음과 같이 작성할 수 있습니다.
1 | print "<body bgcolor=blue>" | cs |
4. PHP 스크립트로 HTML 파일 출력하기
그럼, 웹 페이지를 PHP 스크립트로 출력해 보겠습니다. 앞에서 소개한 웹 페이지 예제의 배경색을 파란색으로 설정해서 출력하는 PHP 스크립트를 작성해 보겠습니다.
예제 17-2의 스크립트를 작성하고 실행합니다.
예제 17-2 blue.php
1 2 3 4 5 6 7 8 9 10 11 12 | <?php print "<html>"; print "<head>"; print "<title>"; print "SQL 블로그 화면"; print "</title>"; print "</head>"; print "<body bgcolor='blue'>"; print "SQL 블로그에 오신 걸 환영합니다."; print "</body>"; print "</html>"; ?> | cs |
단순하게 print(또는 echo)를 사용해서 태그를 출력합니다(한글이 깨져나온다면 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 를 <head> 여기에 </head> 추가해 주세요). 배경이 파란색으로 표시되었나요?
또한, <html>과 <title>, <head>, <body> 태그는 생략할 수 있습니다. 예를 들어, 15장의 예제 test.php에서는 print "Hello !";라고 작성하고 'Hello !'라는 문자만 출력하고 있습니다.
1 2 3 | <?php print "Hello !"; ?> | cs |
최근에는 웹 페이지를 작성할 때 '웹 표준'에 따라 HTML을 엄밀하게 작성할 것을 요구합니다. 그러나 여기서는 설명의 편의를 위해 PHP 스크립트를 표시하는데 필요한 최소한의 내용만으로 작성하고 있습니다.
5. 그 외에 기억해 두어야 할 태그
이번에는 이 책의 예제에 등장하는 태그를 소개하겠습니다. print를 사용해서 작성하고 하나씩 확인해 보겠습니다.
<br> 태그
줄바꿈을 출력하는 태그입니다. HTML 파일 안의 문자열을 아무리 <Enter>로 줄바꿈해도 브라우저에는 반영되지 않습니다. 텍스트를 줄바꿈할 때에는 <br> 태그를 사용합니다.
예제 17-3 startup.php
1 2 3 | <?php print "SQL 블로그에 오신 걸 <br>환영합니다 !"; ?> | cs |
<font> 태그
문자의 크기와 색을 설정하는 태그입니다. 크기는 1~7까지 설정할 수 있습니다. 여기에서는 문자 크기를 7, 색은 파란색으로 설정하고 있습니다.
예제 17-4 font.php
1 2 3 | <?php print "<font size='7' color='blue'>SQL 블로그에!</font>"; ?> | cs |
<a> 태그
<a> 태그는 링크를 설정합니다. href 속성에 링크할 url을 입력합니다. <a>~</a> 사이에 링크로 표시할 문자열을 입력합니다.
예제 17-7 a.php
1 2 3 | <?php print "<a href='http://recovery.tistory.com/' target='_blank'>회복맨 블로그</a>"; ?> | cs |
이 예에서는 '회복맨 블로그'라는 문자열이 표시되며, 이 링크를 클릭하면 해당 URL의 웹 페이지로 이동합니다.
<img> 태그
이미지를 표시할 때에는 <img> 태그를 사용합니다. 다음과 같이 작성합니다.
<img>태그 사용하기
<img src="이미지_파일의_URL" alt="대체_텍스트">
src 속성에는 표시할 이미지 파일의 이름과 저장된 위치를 설정합니다. 예를 들어 나중에 나올 예제를 작성했습니다.
예제 17-8 img.php
1 2 3 | <?php print "<img src='img/6.jpg'>"; ?> | cs |
이렇게 하면 img 디렉터리에 있는 6.jpg 파일이 표시됩니다.
여기서 alt속성이 생략되어 있지만, 이미지 표시가 OFF로 설정된 경우에 표시되는 텍스트는 alt속성에서 설정합니다.
<meta> 태그
<meta> 태그는 페이지 정보를 설정하는 태그로 많은 기능이 있습니다. 예를 들어, '검색 엔진에서 검색되고자 하는 키워드 설정'이나 '검색 결과에 표시되는 문장 설정', '지정한 페이지로 자동으로 이동하도록 설정', '문자 코드 설정'... 등, 다양한 정보를 설정할 수 있습니다.
여기에서는 PHP로 문자를 출력할 때 글자가 깨지지 않도록 페이지의 문자 코드를 설정하는 방법을 설명하겠습니다.
일반적으로 브라우저는 웹 페이지에서 보내온 문자 코드를 자동으로 판단합니다. 하지만, 항상 정확하게 판다나는 것은 아닙니다. 문자 코드가 잘못 설정되면, 글자가 깨질 수 있습니다. 여러분도 글자가 깨져서 표시된 웹 페이지를 본 적이 있을 것입니다. 이럴 때에는 <meta> 태그를 통해 문자 코드를 브라우저에 전달해 두면 글자 깨짐 현상을 방지할 수 있습니다.
<meta> 태그는 <head> ~ </head>영역에 작성합니다. 작성 방법은 다음과 같습니다.
<meta> 태그에서 문자 코드 설정하기
<meta http-equiv="Content-Type" content="text/html; charset=문자_코드">
다음은 설정할 수 있는 문자 코드의 예입니다.
설정할 수 있는 주요 문자 코드
문자코드 |
설정할 문자 |
EUC-KR |
EUC-KR |
UTF-8 |
UTF-8 |
KIS |
ISO-2022-KR |
다음은 UTF-8을 설정하는 예입니다.
1 2 3 4 5 6 7 8 9 | <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- meta 태그, UTF-8을 설정--> <title>Document</title> </head> <body> </body> </html> | cs |
content=". . ."의 큰따옴표(")의 위치와 사용법에 주의하세요. 여기에서 소개하는 '실용 게시판'에서 이 <meta> 태그를 사용해 보겠습니다.
6. Heredoc과 nl2br() 함수
6.1 Heredoc이란?
PHP 스크립트를 사용해서 웹 페이지를 출력한다는 것은 print나 echo를 사용해서 HTML 태그를 출력한다는 뜻입니다. print 등으로 입력한 태그는 문자열이기 때문에 큰따옴표(")를 사용해야 합니다. 그러나 속성값에 작은따옴표(')를 사용하거나 \를 붙이는 등 번거로운 설정을 해야 합니다.
이럴 때 편리한 것이 대량의 문자열을 변수에 저장하는 Heredoc(히어닥, heredocument)입니다. Heredoc은 문자열의 시작과 종료를 알려주는 방식을 사용합니다. '<<<문자열에_대한_식별자'부터 '문자열에_대한_식별자;'까지를 '일련의 문자열'로 인식합니다.
Heredoc문법
<<<문자열에_대한_식별자
문자열
문자열에_대한_식별자;
예를 들어, 17장의 예제 17-2 blue.php의 웹 페이지를 출력하는 스크립트를 생각해 봅시다. HTML을 출력할 때마다 print "ХХ"를 몇 번씩이나 반복해서 입력하는 것이 번거롭다고 느낀 분도 많을것입니다.
이를 Heredoc을 사용해서 기술한 것이 예제 17-9입니다. 여가서 문자열에_대한_식별자는 eot(end of text)입니다.
예제 17-9 here.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php $mozi=<<<eot <html> <head> <title>SQL 블로그</title> </head> <body bgcolor="blue"> SQL 블로그에 오신 걸 환영합니다! </body> </html> eot; print $mozi; ?> | cs |
3번 라인에서 12번 라인까지의 번위가 $mozi입니다. 이 범위에서는 큰따옴표(")에 신경 쓸 필요가 없습니다. 14번 라인에서 $mozi를 출력하고 있습니다. 즉, $mozi=<<<eot와 eot;사이에 있는 HTML은 인용문자 없이 그대로 작성하면 됩니다.
일반적으로, print로 출력하는 문자열은 큰따옴표(")나 작은따옴표(')로 감싸야 합니다. 큰따옴표(")나 작은따옴표(')로 감싼 문자열 중에 큰따옴표(")나 작은따옴표(') 자체를 문자로 출력하고자 할 때에는 \을 사용해서 이스케이프 처리를 해야 합니다.
하지만 이에 비해 Heredoc에는 큰따옴표(")나 작은따옴표(')를 문자로 사용해도 아무 문제가 없습니다. 큰따옴표(")나 작은따옴표(')가 자주 사용되는 SQL 문이나 HTML 태그를 작성할 때, Heredoc은 매우 요긴한 존재입니다.
6.2 nl2br() 함수란?
그럼 예제 17-10의 PHP 스크립트는 어떻게 표시될까요?
예제 17-10 nl2br_not.php
1 2 3 4 5 6 7 | <?php $str = <<<eot 안녕하세요. 좋은 저녁입니다. eot; print $str; ?> | cs |
'안녕하세요.', '좋은 저녁입니다.'라는 2개의 문자열을 변수 str에 Heredoc으로 대입해서 print로 출력하고 있습니다.
3, 4번 라인에서는 '안녕하세요.'와 '좋은 저녁입니다.'사이에 줄바꿈을 하고 있습니다. 그러나 이 스크립트를 실행하면 그냥 한 줄에 모두 출력됩니다.
문자열에 줄바꿈한다는 것은 문자열 중간에 줄바꿈 코드가 입력되는 것입니다. 그러나 웹 페이지에서는 <br>과 같은 줄바꿈 명령을 하는 태그가 없으면 줄바꿈이 반영되지 않습니다.
예를 들어, 이런 문제가 있습니다. 게시판의 입력란에 줄바꿈한 메시지가 입력되었을 때, 이 입력된 문자를 그대로 print로 출력하면, 문자열은 줄바꿈 없이 한 줄에 모두 출력됩니다.
이처럼, 줄바꿈이 무시되면 곤란할 때도 있습니다. 이럴 때, 줄바꿈 코드가 있으면 줄바꿈 태그를 추가는 기능을 하는 것이 바로 nl2br()이라는 함수입니다.
예제 17-10의 예에서 $str의 값을 nl2br() 함수를 사용해서 print로 출력하고 있습니다. print $str;의 부분을 print nl2br($str);로 수정합니다.
예제 17-11 nl2br.php
1 2 3 4 5 6 7 8 | <?php $str=<<<eot 안녕하세요. 좋은 저녁입니다. eot; print nl2br($str); ?> | cs |
7번 라인에서처럼 nl2br() 함수를 사용하면 줄바꿈이 반영됩니다.
<text area> 태그
많은 문자열을 입력할 수 있는 텍스트 영역을 실정할 때에는 <textarea> ~ </textarea> 태그를 사용합니다. 여기에 입력된 줄바꿈을 화면에 반영하고자 할 때에도 nl2br() 함수를 사용합니다.
3. 웹 페이지에서 데이터를 송신하고, PHP 스크립트에서 데이터를 처리하는 방법
7. 브라우저에서 PHP로 데이터 송수신하기
그러면, 이제 어느 정도 기초 지식을 익혔으니 PHP를 사용해서 브라우저에 데이터를 주고받는 과정에 대해 알아보겠습니다.
7.1 브라우저와 PHP 파일 간의 데이터 주고받기
먼저, 브라우저에서 MySQL을 조작할 때, 데이터를 주고받는 순서는 다음과 같습니다.
① 브라우저에 표시된 웹 페이지에서 사용자가 데이터를 송신한다.
▼
② 웹 서버에 있는 PHP 파일이 데이터를 수신한다.
▼
③ PHP 스크립트가 MySQL 데이터베이스와 데이터 처리를 한다.
▼
④ PHP 스크립트가 결과를 웹 페이지에 출력하여 브라우저에 송신한다.
▼
⑤ 브라우저가 결과를 수신한다.
4. 데이터를 송신하는 폼 작성하기
MySQL을 사용하기 전에 여기에서는 HTML 파일과 PHP 스크립트 사이에서 데이터를 주고받는 과정에 대해 알아보겠습니다. 다음과 같은 구조를 만들어 보겠습니다.
데이터를 송신하는 쪽
■ HTML 파일 send.html
■ 텍스트 상자에 문자열을 입력하고, <확인> 단추를 눌러 송신한다.
데이터를 수신하는 쪽
■ PHP 파일 receive.php
■ 수신한 데이터를 그대로 표시한다.
send.html 파일은 송신하는 쪽의 웹 페이지(HTML 파일)이고, receive.php 파일은 수신하는 쪽의 PHP 스크립트입니다. send.html 파일이 보낸 데이터를 receive.php 파일에서 표시하는 간단한 예입니다. 2개의 파일은 웹 서버의 공개 폴더에 저장합니다.
계속해서, '웹 페이지에서 데이터를 송신'하는 HTML 파일(send.html)을 만들어 보겠습니다.
7.2 데이터를 송신하는 웹 페이지 send.html 만들기
먼저, '웹 페이지에서 데이터를 송신'하는 HTML 파일입니다. 이번에는 단추를 누르면 텍스트 상자에 입력한 데이터를 송신하는 파일을 만들어 보겠습니다.
사용할 요소는 2개입니다. 바로 '단추'와 '텍스트 상자'입니다. 이 2개의 요소는 뒤에서 설명할 <input> 태그를 사용해서 작성합니다. 송신 구조의 웹 페이지는 일반적으로 폼을 작성하고 그 안에 텍스트 상자와 단추 등의 요소를 배치합니다.
예제 17-12에서처럼 텍스트 파일을 작성하고 send.html이라는 파일 이름으로 공개 폴더에 저장합니다. 여기에서는 <html>, <head>, <body> 등의 태그는 생략하고 있습니다.
예제 17-12 send.html
1 2 3 4 5 6 | <meta charset="UTF-8"> <form action="receive.php" method="post"> <input type="text" name="a"> <br> <input type="submit" value="확인"> </form> | cs |
실수 없이 send.html이라는 파일 이름으로 공개 폴더에 저장했나요? Apache가 실행 중 인지, 입력 오류가 없는지 확인했다면 브라우저 주소창에 http://localhost/send.html이라고 입력합니다. 그러면 다음과 같이 표시됩니다.
폼이 정상적으로 표시되었다면 태그의 기능을 확인해 보겠습니다.
<form> 태그
송신용 폼을 정의하는 태그가 <form> 태그입니다. <form> 태그에 송신용 폼을 작성하고 그 안에 <input> 태그 등으로 텍스트 상자와 단추를 설정합니다. <form> 태그는 다음과 같이 작성합니다.
<form> 태그
<form method="송신할_방법" action="데이터를_송신할_곳">
여기에 <input> 태그를 입력해서 단추와 텍스트 상자를 생성한다.
</form>
<form> 태그에는 다음과 같이 action과 method 속성을 설정합니다.
<form> 태그에 설정할 주요 속성
속성 |
내용 |
action |
데이터를 송신할 곳, 즉 데이터를 받아 처리할 프로그램을 설정한다. |
method |
데이터 송신 방법을 지정한다. post와 get 중 하나를 설정한다. |
action과 method 외에도 송신 방법(MIME 유형)을 지정하는 enctype 등을 설정할 수 있습니다.
<input> 태그
<form ХХ> ~ </form> 사이에 <input> 태그를 작성하면 데이터를 입력하는 텍스트 상자와 송신용 단추를 만들 수 있습니다.
<input> 태그
<input type="단추의_종류" name="데이터를_식별하는_이름" size="크기" value="'표시할_문자'_또는 '송신할 값'" "기본값">
<input> 태그에 설정하는 주요 속성
속성 |
내용 |
type |
요소의 종류를 지정하는 문자열을 입력한다. |
name |
데이터를 식별하기 위한 이름을 설정한다. |
size |
텍스트 상자의 폭을 설정한다. |
value |
단추 등에 표시할 문자열을 설정한다. |
type 속성에는 다음과 같은 요소를 설정할 수 있습니다.
설정 |
설정한 요소의 종류 |
type="submit" |
데이터를 송신하는 기능이 있는 단추 |
type="button" |
단추 |
type="text" |
텍스트 상자 |
type="checkbox" |
확인란 |
type="radio" |
라디오 단추 |
type="hidden" |
표시하지 않는다(데이터 송신만 한다) |
<input> 태그를 사용한 예
예제 17-13은 <input> 태그를 사용한 예입니다. 데이터를 식별하는 이름은 a1이고, 크기는 50인 텍스트 상자입니다.
예제 17-13 input_text.html
1 2 | <meta charset="UTF-8"> <input type="text" name="a1" size="50"> | cs |
예제 17-14는 '보내기'라고 표시된 송신용 단추입니다.
예제 17-14 input_submit.html
1 2 | <meta charset="UTF-8"> <input type="submit" value="보내기"> | cs |
예제 17-15는 데이터를 식별하는 이름을 r1으로 설정하고, 'bad'라는 값을 송신하는 라디오 단추를 생성하는 예입니다.
예제 17-15 input_radio.html
1 2 | <meta charset="UTF-8"> <input type="radio" name="r1" value="bad"> | cs |
예제 17-16은 브라우저에는 아무것도 표시되지 않지만, '숨겨진 데이터'라는 문자를 송신하는 예입니다.
예제 17-16 hidden.html
1 2 | <meta charset="UTF-8"> <input type="hidden" value="숨겨진 데이터"> | cs |
type="hidden"으로 설정한 <input> 태그는 브라우저에는 아무것도 표시되지 않습니다. 이는 사용자에게는 보여줄 필요가 없는 데이터를 강제로 송신할 때 사용합니다.
작성한 폼 확인하기
예제 17-12 send.html의 폼을 확인해 보겠습니다.
1 2 3 4 5 6 | <meta charset="UTF-8"> <form action="receive.php" method="post"> <input type="text" name="a"> <br> <input type="submit" value="확인"> </form> | cs |
<form action="receive.php" method="post">
<form> 태그에는 action="receive.php"가 설정되어 있습니다. 그렇기 때문에, <확인> 단추를 누르면 receive.php라는 PHP 스크립트에 데이터를 송신합니다.
method 속성을 'post'로 설정하고 있기 때문에 post 송신을 하게 됩니다. post 송신에 대해서는 다음절에 설명하겠습니다.
<input type="text" name="a">
type 속성이 'text'로 되어 있기 때문에 텍스트 상자를 생성합니다. 데이터를 식별하는 이름인 name 속성에는 'a'를 설정했습니다. 그렇기 때문에, 데이터를 수신하는 PHP 스크립트 receive.php에서는 'a'라는 이름으로 데이터를 판단합니다.
<input type="submit" value="확인">
type 속성이 'submit'이기 때문에 데이터를 송신하는 단추가 설정됩니다. 그리고 value속성이 '확인'이기 때문에 단추에 '확인'이라는 문자가 표시됩니다.
7.3 데이터를 수신해서 표시하는 receive.php 만들기
이번에는 수신하는 쪽의 receive.php에 대해 설명하겠습니다. receive.php는 send.html의 텍스트 상자에 입력된 데이터를 수신합니다.
send.html의 <form> 태그에서 method 속성을 'post'로 설정했기 때문에, post 송신을 하게 됩니다. post 송신으로 보내온 데이터는 다음과 같이 $_POST라는 변수에 저장됩니다.
method="post"로 송신된 데이터가 저장되는 변수
$_POST["데이터를_식별하는_이름"]
$_POST는 PHP에서 미리 정한 변수 이름입니다. 여기에 POST로 보내온 데이터가 배열로 저장됩니다.
$_POST는 연관 배열로 이용할 수도 있습니다. 배열의 첨자는 '데이터를 식별하는 이름'을 지정합니다.
이번에 데이터를 입력하는 텍스트 상자에는 a라는 데이터를 식별하는 이름이 설정되어 있습니다(name="a"). 그렇기 때문에, receive.php에서는 연관 배열의 첨자에 "a"를 설정해서 $_POST["a"]라고 작성하면 송신된 데이터를 가져올 수 있습니다.
name="a"의 텍스트 상자에 입력된 값을 저장하는 변수
$_POST["a"]
예제 17-17은 send.html에서 보내온 데이터를 단순하게 출력만 하는 receive.php입니다. send.html과 마찬가지로 공개 폴더에 저장합니다.
예제 17-17 receive.php
1 2 3 | <?php print $_POST["a"]; ?> | cs |
2번 라인에서 데이터를 식별하기 위해 설정한 이름으로 수신한 값을 출력합니다.
슈퍼 글로벌 변수
$_POST와 같이 아무것도 선언하지 않고 프로그램의 어디에서나 사용할 수 있는 변수를 '슈퍼 글로벌 변수'라고 합니다. 이외에도 GET송신에서 사용하는 $_GET, Cookie를 이용하는 $_Cookie 등이 있습니다.
7.4 데이터 송수신 하기
실제로 데이터를 송수신을 해보겠습니다. send.html과 receive.php 파일이 공개 폴더에 저장되어 있는지 미리 확인하도록 합니다. 그리고 Apache가 실행 중인지도 확인합니다.
브라우저의 주소창에 http://localhost/send.html라고 입력합니다. 브라우저에 출력된 send.html이 표시됩니다. 텍스트 상자에 송신할 문자열을(여기에서는 '보낸 문자열') 입력하고 <확인> 단추를 누릅니다. 이제 receive.php에 데이터가 전달되어 입력한 문자열이 표시될 것입니다.
같은 컴퓨터 내에서 '송신'과 '수신'을 하고 있기 때문에 실감이 나지 않을지도 모르겠지만, 웹상에서 이루어지는 송수신도 기본적으로 이와 같은 방법으로 이루어 집니다.
5. 송신 방법의 종류
8. POST와 GET에 의한 데이터 송신
8.1 데이터 송수신하기
앞에서는 웹 페이지에서 PHP 스크립트에 데이터를 전달할 때, <form> 태그 안에 method="post"라고 작성했습니다. 이런 형식으로 데이터를 전달하는 방법을 post 송신이라고 합니다. post 송신에 대해서는 지금까지 몇 번이나 언급했습니다.
데이터를 전달하는 방법에는 post 외에도 get 송신이 있습니다. post와 get 송신의 특징은 다음과 같습니다.
post 송신
■ 데이터를 URL에 설정하지 않는다.
■ 텍스트와 바이너리 모두 송신할 수 있다.
get 송신
■ URL에 데이터를 설정해서 보낸다(데이터가 노출되고, 부정한 데이터가 전달될 우려가 있다).
■ 송신할 수 있는 데이터는 텍스트뿐이다.
■ 별도로 선언하지 않으면 get 메서드를 이용한다(기본 설정).
8.2 GET 메서드를 이용해 GET 송신하기
GET 송신을 하려면, 앞선 예에서 작성한 send.html과 receive.php 스크립트 안에 post라고 작성한 부분을 get으로 바꾸면 됩니다. 그러면 송신 메서드는 get으로 변경됩니다.
실제로 send.html과 receive.php의 송신 방법을 get으로 변경해 보겠습니다. 예제 17-18은 receive.php의 $_POST["a"]를 $_GET["a"] 로 변경한 것입니다. 이제 GET송신으로 보내온 name="a"의 데이터를 수신할 수 있습니다. PHP 파일의 이름은 get_receive.php입니다.
예제 17-18 get_receive.php
1 2 3 | <?php print $_GET["a"]; ?> | cs |
예제 17-19의 스크립트 get_send.html은 send.html에서 method="post"를 method="get"으로 변경한 것입니다. 그리고 수신하는 쪽의 PHP 파일의 이름을 get_receive.php로 저장했기 때문에 action="get_receive.php"로 변경합니다.
예제 17-19 get_send.html
1 2 3 4 5 6 | <meta charset="UTF-8"> <form action="get_receive.php" method="get"> <input type="text" name="a"> <br> <input type="submit" value="확인"> </form> | cs |
8.3 GET과 POST의 차이
GET 송신은 송신 과정이나 결과 모두 POST와 거의 비슷합니다. 그러나 POST 송신과 다른 점이 한가지 있습니다. 어디가 다른지 주의 깊게 살펴보기 바랍니다.
POST 송신
GET 송신
차이점이 보이나요? 사실은 GET 송신을 할 때에는 URL에 '?a=보낸+문자열'이라는 것이 붙어 있습니다(참고로, Internet Explorer에서는 URL에 '?a=%EB%B3%B4...'). 이에 비해 POST 송신을 할 때에는 주소창에 http://localhost/receive.php만 표시됩니다. 즉, GET 메서드를 사용할 때에는 데이터를 URL에 붙여서 보내는 것입니다.
형식은 다음과 같습니다.
GET 메서드에서 표시하는 주소창
URL?데이터_이름=데이터
'데이터 이름'이란, name="a"와 같이 데이터를 입력한 텍스트 상자에 설정한 '데이터를 식별하는 이름'입니다. 참고로, Internet Explorer에서는 송신된 데이터가 한국어처럼 2바이트(EUC-KR)인 경우, 다른 코드로 변환되어 전달됩니다.
그렇기 때문에, GET 송신에서는 '전달하는 데이터'와 '데이터를 식별하는 이름'이 노출되고 맙니다. 악의를 가진 사람이 부정한 데이터를 URL과 함께 전송하거나 데이터를 몰래 훔쳐 볼 가능성이 있습니다. GET 송신으로 시스템을 구축할 때에는 이런 보안상의 문제점을 충분히 고려해야 합니다.
8.4 GET 메서드를 이용해 URL과 함께 데이터 전송하기
'GET 송신에서는 URL과 함께 데이터를 전달한다.'라고 설명했습니다. 이것은 사실 HTML 파일을 이용하지 않아도 URL에 데이터를 설정하면 GET 통신을 할 수 있다는 뜻 입니다.
그럼, GET 송신으로 데이터를 전달해 보겠습니다. get_send.html을 이용해서 12345라는 데이터를 전달해 보겠습니다. 다음 문자열을 주소창에 입력하고 Enter를 누릅니다.
http://localhost/get_receive.php?a=12345
12345라고 표시될 것입니다.
한국어를 전송할 수도 있습니다. 이번에는 '연습'이라는 문자열을 method="get"으로 전달해 보겠습니다. Chrome에서는 문자 코드가 UTF-8일 때에는 한국어를 직접 사용해도 됩니다. 하지만 문자 코드가 EUC-KR이거나 Internet Explorer에서는 해당 문자 코드로 변환해야 합니다. 문자 코드가 EUC-KR일 때, '연'의 문자 코드는 'BF AC'이고, '습'은 'BD C0'입니다. name="a"라고 설정한 텍스트 상자에 '연습'이라고 입력한 후 submit을 한다는 것은 다음 URL을 송신하는 것과 같습니다.
http://localhost/get_receive.php?a=연습 <- 크롬, 파이어폭스, 오페라 등의 브라우저 사용시
http://localhost/get_receive.php?a=%BF%AC%BD%C0 <- 인터넷 익스플로러 브라우저 사용시
스크린샷은 맥이라 IE가 안깔려서 따로 스샷은 찍지 못했지만 직접 확인해 보시길 바랍니다.
8.5 아무것도 선언하지 않고 데이터 송신하기
아무것도 선언하지 않으면 자동으로 GET 송신을 하게 됩니다. 예를 들어, <form> 태그를 설정하지 않고, 다음과 같이 하이퍼링크만 있는 파일을 만들어 보겠습니다.
예제 17-20 get_send2.html
1 2 | <meta charset="UTF-8"> <a href="get_receive2.php?a=777">777을 전달할게!</a> | cs |
그리고 예제 17-21의 파일에서 이 내용을 전달받습니다.
예제 17-21 get_receive2.php
1 2 3 | <?php print $_GET["a"]; ?> | cs |
get_send2.html의 하이퍼 링크를 클릭하면 '777'이 송수신 되어 '777'이라고 표시됩니다. method="get"과 같이 별도로 선언하지 않아도 데이터를 전달할 수가 있습니다.
이처럼 GET을 이용하면 하이퍼링크에 간단하게 데이터를 설정해서 전달할 수가 있습니다.
Google에서도 URL에 데이터를 설정한다?
Naver나 Google 등의 검색 엔진을 사용해서 검색했을 때, 주소창에 URL의 뒤에 많은 문자열이 붙어 있는 것을 본 적이 있을 것입니다. 이것 역시 URL에 검색 문자열을 설정해서 송신하는 것입니다. 2016년 3월 현재, 주소창에 다음과 같이 입력하고 Enter를 누르면 Google 검색창에 'abcde'를 입력해서 검색하는 것과 같은 결과를 얻을 수 있습니다. 다음은 Google에서 'abcde'의 문자열을 검색하는 예입니다.
http://www.google.co.kr/search?q=abcde
반각 알파벳의 경우, ?q=ХХ의 ХХ에 원하는 문자를 입력하면 간단하게 검색할 수가 있습니다. 꼭 한번 해보기 바랍니다.
웹 응용프로그램을 작성하는 데 있어 POST와 GET은 PHP에 국한되지 않는 기본 지식입니다. POST와 GET의 차이를 확실히 기억하도록 합니다.
체크!
★ HTML의 기본적인 작성법을 이해하고 있다.
★ <BR>과 <FONT>, <U>, <B>, <I>, <HR>, <A>, <IMG>, <META> 태그의 의미를 이해하고 있다.
★ <FORM> 태그를 사용해서 폼을 만들 수 있다.
★ <INPUT> 태그의 사용법을 이해하고 있다.
★ 텍스트 상자의 값을 POST 송신할 수 있다.
★ GET 송신을 할 수 있다.
★ POST와 GET의 차이를 이해하고 있다.
'MySQL & PHP 학습 > 정리 그리고 체크!' 카테고리의 다른 글
| [MySQL & PHP] 19장 PHP와 MySQL로 간단한 게시판 만들기 (4) | 2016.03.11 |
|---|---|
| [MySQL & PHP] 18장 PHP 스크립트를 이용해서 MySQL 조작하기 (2) | 2016.03.09 |
| [MySQL & PHP] 16장 PHP의 기초 지식 (4) | 2016.03.01 |
| [MySQL & PHP] 15장 MySQL을 이용하는 데 필요한 PHP (2) | 2016.02.22 |
| [MySQL & PHP] 14장 파일 사용하기 (0) | 2016.02.13 |