사용자에게 입력의 자유를, CGI
CGI(Common Gateway Interface)라 함은 웹 서비스 제공자가 특정 형식의 문서를 제공하는 경우, 사용자가
브라우저를 이용해 문서의 구성에 맞게 입력하면 그 내용이 서버의 특정 프로그램에 전달될 수 있도록 구현한 것이다. 그러므로
이를 이용하면 일방적으로 서비스를 제공하는 데 그치는 것이 아니라 사용자로부터 원하는 정보를 얻을 수 있다.
CGI의 기본 형식
이런 기능을 담당하는 HTML 문서의 지시자는 <form>을 이용한다.
<form method={POST|GET} action=url> .... </form>
여기서 action에는 입력된 내용을 전달할 프로그램 이름이 오고 method에는 해당 입력 내용을 어떤 형식으로 프로그램에 전달
할 것인지를 명시한다. POST의 경우에는 입력된 내용을 프로그램에 표준 입력을 통해 넘겨주므로 프로그램에서는 해당 내용을 sc
anf나 getch, gets 등의 함수를 이용해 참조할 수 있다. GET은 POST와 달리 프로그램의 인수로서 입력된 내용을 넘겨준다. 그러
므로 입력된 양이 많은 경우에는 스택을 많이 차지하기 때문에 그리 바람직한 방법이 아니다. 그러면 이를 이용해 메시지를 입력
받는 문서를 만들어 보자.
<html>
<head>
<title> 월간 마소에 전하고 싶은 말</title>
</head>
<body bgcolor=#f0f0f0 text=#0000ff link=#ff0000 vlink=#ffff00 >
<h1> <b>월간 마소에 전하고 싶은 말</b></h1>
<hr><hr size=4>
<form method=POST action="/cgi-bin/masomessage">
</form>
<hr size = 3>
<img src="images/up.gif"><a href="maso.html"> 월간 마소 홈페이지로 .. </a>
</html>
이제 모든 준비는 완료되었다. 그러면 이제 <form> 지시자 사이에 입력받으려는 내용을 채워넣기로 하자.
텍스트 입력받기
입력받는 내용의 기본은 텍스트라 할 수 있다. 물론 모든 입력은 일정한 형태의 텍스트로 변환되어 전달되
지만 일단 텍스트를 입력받는 과정을 알아 보자.
<input type = "text|password" name="입력 이름" value="입력" 기본값 size=n maxlengh=m
>
이런 형식을 이용하면 특정 내용을 입력받는 입력란이 나타난다. 이 지시자에서 type이라 함은 사용자가 입력한 내용을 표시할
것인지 표시하지 않을 것인지를 나타내는 것으로 암호를 입력받는 경우에는 password로 하는 것이 좋으리라는 것은 누구나 짐작
할 수 있을 것이다. 그리고 name은 해당 입력란의 이름으로 나중에 프로그램에 전달될 때는
입력 이름=입력된 내용
의 형식으로 전달된다. size는 입력란의 크기를 나타내며, maxlength의 경우는 사용자가 최대한 입력할 수 있는 텍스트의 수를
나타낸다. 그러면 이를 이용해 입력받는 자리를 만들어 보자.
이름 : <input type=text name="name" size=10><p>
주제 : <input type=text name="subject" size=30><p>
하고싶은 말 : <input type=text name="contents" size=100><p>
<화면 8> CGI를 이용한 기본적인 입력 화면 masomsg1.tif
그런데 만들고 보니 '하고 싶은 말'에 해당되는 내용이 별로 마음에 들지 않는다. 사용자가 쓰고 싶은 내용이 많을 것이 분명하
니까 좀 더 커다란 박스로 만드는 것이 어울리리라 생각된다. HTML에는 이런 목적을 위해 다른 텍스트 입력 박스를 제공한다.
<textarea name="입력 이름" rows=n cols=m> 기본 텍스트 </textarea>
이 형식을 이용해 n줄, m칸만큼의 텍스트 영역이 나타난다.
하고싶은 말<br>
<textarea name="contents" rows=5 cols=50></textarea><p>
이렇게 고침으로써 이전보다 훨씬 효율적으로 만들어졌음이 분명하다.
<화면 9> 많은 입력을 받기 위해 텍스트 박스 추가 masomsg2.tif
입력 지시자의 다른 기능
입력 지시자는 일반적인 텍스트 입력에만 사용되는 것이 아니라 라디오(radio) 버튼, 체크(check) 버튼,
서밋(submit) 버튼, 그리고 리셋(reset) 버튼으로서의 역할도 담당한다. 이 기능의 형식과 역할은 다음과 같다.
<input type = "text|password|checkbox|radio|submit|reset" name="입력 이름" value="입력 기본
값" [size=n] [maxlengh=m] [checked]>
· checkbox : 해당 버튼의 입력 이름에 입력 기본값을 지정해 넘겨준다.
· radio : checkbox와 같지만 같은 입력 이름에 대해 하나만이 허용된다.
· submit : form에 입력된 내용을 서버 프로그램에 넘겨준다.
· reset : form의 내용을 모두 초기화한다.
이 기능을 이용하면 메시지를 입력받을 때 다른 정보도 쉽게 입력받을 수 있다.
이름 : <input type=text name="name" size=10><br>
직업<ul>
<li><input type=radio name="jobs" value="student" checked> 학생
<li><input type=radio name="jobs" value="programmer"> 프로그래머
<li><input type=radio name="jobs" value="manager"> 경영자
<li><input type=radio name="jobs" value="other"> 기타
</ul>
보유하고 있는 프로그램 종류<ul>
<li><input type=checkbox name="program" value="word processor"> 워드프로세서류
<li><input type=checkbox name="program" value="spread sheet"> 스프레드쉬트류
<li><input type=checkbox name="program" value="presentation"> 프리젠테이션류
<li><input type=checkbox name="program" value="graphics"> 그래픽 관련 프로그램
<li><input type=checkbox name="program" value="multimedia"> 멀티미디어 관련 프
로그램
<li><input type=checkbox name="program" value="other"> 기타
</ul>
주제 : <input type=text name="subject" size=30><p>
하고싶은 말<br>
<textarea name="contents" rows=5 cols=50></textarea><p>
<input type=submit value="내용을 전달합니다."><input type=reset value="내용을 초기화">
<p>
<화면 10> 버튼 기능 추가masomsg3.tif
Select 지시자
이제 마지막으로 Select 지시자를 살펴 보자. 이것은 여러 개의 값중에서 하나 또는 그 이상을 선택하는
경우에 사용된다. 이를 위해 다음과 같은 형식이 제공된다.
<select name="입력이름" [size=n] [multiple]>
<option value="해당내용의 값" [selected]> 선택내용
<option ...
</select>
여기에서 name은 앞에서 설명한 것과 같고, size는 여러 항목중에서 한 번에 화면에 나타낼 수 있는 개수를, multiple은 이 선
택 지시자가 여러 가지 입력을 허용하는가를 나타내기 위해 필요하다. 앞에서 input의 checkbox를 사용해도 되지만 선택할 수 있
는 종류가 많은 경우에는 이 방식이 훨씬 효율적이다.
사용하는 컴퓨터 : <select name="computer">
<option value="286AT">286기종
<option value="386SXDX">386기종
<option value="486SXDX">486기종
<option value="Pentium">펜티엄기종
</select><p>
갖추고 있는 주변 기기 : <select name="peripheral" size=5 multiple>
<option value="cdrom"> CD-ROM Drive
<option value="printer"> 프린터
<option value="removable"> Removable 저장 매체
<option value="sound"> 사운드 카드
<option value="tvcard"> TV수신카드
<option value="mpeg"> MPEG카드
<option value="backup"> Backup 장비
<option value="digitizer"> 디지타이져
<option value="scanner"> 스케너
</select><p>
<화면 11> 메뉴중에서 선택할 수 있다. masomsg4.tif
/* 사용자가 입력한 내용을 담고 있는 자료 구조 */
typedef struct _Form_entry Form_entry;
struct _Form_entry {
char *name; /* 입력 항목의 이름을 나타낸다. */
char *value; /* 해당 항목에 대해 입력된 내용을 담고 있다.
*/
Form_entry *next; /* 다음 Form_entry를 가리킨다. */
/* 다음이 없는 경우 NULL로 채워진다. */
};
/* 가장 먼저 사용되는 것으로서 Cgi_info에 대한 포인터를 입력받아 해당되는 */
/* 내용을 채워준다. 성공한 경우 TRUE를 되돌려준다. */
int Get_cgi_info( Pcgi_info );
/* 앞의 함수에서 입력된 Cgi_info를 이용해 Form_entry의 Single Linked List를 */
/* 만들고 그 첫번째 것을 되돌려준다. */
Pform_entry Get_form_entities( Pcgi_info );
/* 직접 내용을 서버에 전달하고자 하는 경우 Mime 타입을 입력하면 그 내용을 */
/* 특정 포맷에 맞춰서 표준 출력으로 인쇄한다. 프로그램 상에서 직접 */
/* HTML 문서를 만들어 보내는 경우는 text/html이라고 넘겨주면 된다. */
int Print_mimeheader( Entity_value );
/* 다른 곳을 가리키는 URL을 넘겨주고자 하는 경우 사용된다. */
int Print_url( Pcgi_info );
이 라이브러리를 이용하면 입력을 처리하는 과정을 간단히 만들 수 있다. 하지만 이 라이브러리를 사용할 때 사용자는 main 함
수를 만들 필요가 없음에 주의해야 한다. 예를 보면 알겠지만 라이브러리에서 main 함수가 제공되고 이 함수는 자동으로 Get_cgi
_info를 호출한 후 그 결과를 갖고 Cgi_main_process를 호출한다. 그러므로 사용자는 Cgi_main_process만 만들면 된다. 그러면
라이브러리를 이용해 메시지를 처리하는 프로그램을 보도록 하자.
#include <stdio.h>
#include "cgi.h" /* 해당 라이브러리를 사용하기 위한
인크루드 파일 */
Cgi_main_process(cgi_info) /* 사용자는 이 함수의 내용만을 채워 넣으면 된다. */
Pcgi_info cgi_info;
{
Pform_entry params;
Print_mimeheader("text/html"); /* 직접 HTML 문서를 프로그램 상에서 만들어 보내자 */
printf("<html><head><title>Your Input values are ...</title></head>");
printf("<body bgcolor=#ffffff text=#0000ff link=#00ffff vlink=#ffff00>");
printf("<h1>Your Input Values are ...</h1><hr size=4>");
params=Get_form_entities(cgi_info); /* 사용자가 입력한 정보를 받아오기 위한 함수 호출 */
while (params) { /* 사용자의 입력은 params으로 시작하는 */
/* Single Linked List에 저장된다. */
if (!strcasecmp(params->name, "name")) /* 입력 이름을 확인해 */
printf("Name : <b>%s</b><p>\n", params->value); /* 해당값을 인쇄한다. */
else if(!strcasecmp(params->name, "jobs"))
printf("Job : <b>%s</b><p>\n", params->value);
else if(!strcasecmp(params->name, "program"))
printf("Program that you have : <b>%s</b><p>\n", params->value);
else if(!strcasecmp(params->name, "computer"))
printf("Computer : <b>%s</b><p>\n", params->value);
else if(!strcasecmp(params->name, "peripheral"))
printf("Peripheral Device : <b>%s</b><p>\n", params->value);
else if(!strcasecmp(params->name, "subject"))
printf("Message Subject : <b>%s</b><p>\n", params->value);
else if(!strcasecmp(params->name, "contents"))
printf("Contents : <p><b>%s</b>\n", params->value);
params = params->next; /* 다음번 사용자 입력 항목으로 이동한다. */
}
printf( "</body></html>" ); /* HTML 문서의 끝임을 알린다. */
}
<화면 12> 라이브러리를 이용한 입출력 msgreslt.tif
어떻게 만드느냐 보다 무엇을 만드느냐가 중요하다
지금까지 웹 페이지를 만들고 이를 이용해 사용자의 입력을 받는 방법에 대해 알아 보았다. 독자 여러분은 이 과정에 따라 한
번 정도만 웹 페이지를 만들어 보면 이제는 누가 뭐래도 HTML과 CGI의 도사가 되어 있는 것이다. 이해하기 쉽게 글을 이끌어 가
려고 했지만 뜻하는 바대로 이뤄졌는지 장담하기 어렵다.
참고로 여기에서 사용된 라이브러리는 'http://chopin.kist.re.kr/flute'나 '이달의 디스켓'을 제공되므로 필요한 경우에는 받
아보면 될 것이며, 그외의 궁금한 사항은 flute@chopin.kist.re.kr로 연락주기 바란다.