웹 프로그래밍 및 실습(Web Programming & Practice)

CGI(Common Gateway In-terface)

최미정 강원대학교 IT 대학 컴퓨터과학전공

Web Program-mingPage 2

CGI 란 ?• CGI 는 Common Gateway Interface 의 약어

무언가와의 Gateway 역할 ?• 사용자가

1) 브라우저를 통해 입력한 정보가 웹 서버를 거쳐2) 응용프로그램에 전달되고 가공되어3) 다시 사용자에게 전달되기까지의 인터페이스

• HTML 과 사용자 사이의 상호 작용 및 피드백을 가능하게 하는 강력한 웹 문서 교환 방식

• 외부 프로그램과 웹 서버 (Web Server) 간의 연결 역할

CGI 개요 (1/2)Common Gateway Interface

Web Program-mingPage 3

사용 이유• 웹에서 데이터 전달의 양방향성 (Input, Output) 을 가능하게 함

• 웹 사용자와 서버 사이의 Interface 가 가능한 웹 페이지 제작

CGI 프로그램의 사용 예• 방문객 카운터 , 방명록 , 사용자 ID 및 비밀번호 확인

• 웹 게시판 , 웹 대화방 , 자료실 (uploading 포함 )• 검색엔진 , …

CGI 개요 (2/2)Common Gateway Interface

Web Program-mingPage 4

1. 사용자가 브라우저 안에 입력한 내용을 웹 서버로 보낸다 .2. 서버는 입력을 CGI 프로그램을 ( 스크립트로 ) 보낸다 . 즉 , 서버는 CGI 를 호출한다 . 3. CGI 프로그램은 입력에 따른 처리를 수행하고 , 그 결과를 웹 서버에게 전달한다 . 4. 웹 서버는 사용자의 브라우저 , 즉 클라이언트에게 CGI 의 실행 결과를 출력한다 .

CGI 동작 절차Common Gateway Interface

Web Program-mingPage 5

처리 방식• 일반 프로그램

자체 시스템에서 실시간으로 실행됨

프로그램이나 데이터가 메모리에 상주

• CGI 프로그램 자료의 요청과 응답으로 이루어짐

요청에 대한 응답이 종료되면 실행이 종료

기동 방식• 일반 프로그램은 해당 컴퓨터 ( 서버든 클라이언트든 ) 에서 자체의 목적에

의해 기동

• CGI 프로그램은 클라이언트의 요청을 서버에서 수용할 수 있도록 하기 위해 만들어진 서버 종속용 프로그램

CGI 프로그램 vs. 일반 프로그램Common Gateway Interface

Web Program-mingPage 6

제 1 세대• C/C++• Perl• C Shell

제 2 세대• ASP (Active Server Page)• JSP (Java Server Page)• PHP (Personal Home Page Tools)

제 3 세대• ASP.NET• JSP+EJB

CGI 개발 도구Common Gateway Interface

Web Program-mingPage 7

HTML 문서에서 정보 입력 방식 , 정보 전달 방식 , 실행할 CGI 프로그램의 위치 등을 지정하는 태그이다 .

기본 구조

<FORM> 태그 (1/2)Common Gateway Interface

<FORM> Form 시작

<INPUT> 여러 가지 방법 중 하나의 정보를 질의

<INPUT> 원하는 만큼 사용

</FORM> Form 종료

속성 (attribute)• action = “.…”

서버로부터 데이터를 입력 받아서 동작할 CGI 프로그램을 지정

Web Program-mingPage 8

<FORM> 태그 (2/2)Common Gateway Interface

속성 (attribute) ( 계속 )• action = “.…”

서버로부터 데이터를 입력 받아서 동작할 CGI 프로그램을 지정

• method = GET or POST

− 폼 데이터를 서버의 CGI 프로그램에 전달하는 방식을 지정

− GET: 환경 변수를 이용한 CGI 방법을 사용( 데이터가 URL 주소에 포함되어 전송되며 , 데이터 양이 많지 않은 경우에 유리함 )

− POST: 표준 입출력 방식 (stdin) 을 이용한 CGI 방법을 사용 ( 데이터가 HTTP 프로토콜 Header 에 포함되어 전송되며 , 데이터 많은 경우에 유리함 )

• target = “...”결과를 나타낼 창을 지정 (_blank, _self, _parent, _top): 새로운 창 , 현재 창 등등

Web Program-mingPage 9

<FORM> 태그 사용 예제Common Gateway Interface

form1.html

Web Program-mingPage 10

<INPUT> 태그 (1/2)Common Gateway Interface

태그 형식 : <INPUT type=" 입력양식 형태 " name=" 입력양식 이름 ">간단한 텍스트의 입력 , 체크박스 (check-box), 라디오 박스 (radio-box), 버튼 등의 사용자 인터페이스를 지원

속성 form2.html• 텍스트 입력 양식 <INPUT type = "text" name = "....">

사용자로부터 한 줄 짜리 문자열을 입력받기 위해 사용하는 형식

• 암호 입력 양식 <INPUT type = "password" name = "....">사용자가 입력한 글자들은 “ *” 로 표시

• 라디오 버튼 양식 <INPUT type = "radio" name = "...." value=" 버튼글자” >사용자에게 선택할 수 있는 목록들을 나열해 주고 한 가지만 선택

• Submit 버튼 양식 <INPUT type = "submit" name = "...." value=" 버튼글자” >입력한 모든 데이터를 <FORM> 태그의 action 속성에서 지정한 URL 로 보내는 역할

Web Program-mingPage 11

<INPUT> 태그 (2/2)Common Gateway Interface

속성 ( 계속 )• Reset 버튼 양식 <INPUT type = "reset" name = "...." value=“value”>

<FORM> 안에 있는 모든 양식들의 값을 각 양식의 value 속성에서 정한 값으로 초기화

• 체크 박스 양식 <INPUT type = "checkbox" name = "....">사용자에게 선택할 수 있는 목록들을 나열해 주고 선택하도록 하는 입력 양식 ( 여러 개 동시 선택 가능 )

• 이미지 입력 양식 <INPUT type = "image" name = "....">HTML 문서에서 입력 양식으로 이미지를 사용할 수 있으며 , 지정한 이미지를 누르면 Submit 버튼처럼 동작한다 .

• 숨겨진 입력 양식 <INPUT type = "hidden" name = "...." value=" 숨겨진 양식 값 >사용자 화면에 보이지 않고 스크립트로 전송되는 필드이다 .

Web Program-mingPage 12

<INPUT> 태그 사용 예제 (1/2)Common Gateway Interface

form5.html

Web Program-mingPage 13

<INPUT> 태그 사용 예제 (2/2)Common Gateway Interface

form6.html

Web Program-mingPage 14

<SELECT> 태그Common Gateway Interface

태그 형식 : <SELECT name=“ 리스트명 " <option> … </SELECT>클라이언트에서 선택할 수 있는 항목을 리스트 ( 목록 ) 형태로 제공할 수 있는 사용자 인터페이스 제공

클라이언트는 제공된 리스트의 여러 항목들 중 하나를 선택

사용 형식

<SELECT name = " 리스트 이름” ><option> 항목 -1<option> 항목 -2 : :<option> 항목 -n

</SELECT>

속성 : SIZE, NAME, MULTIPLE

form3.html

Web Program-mingPage 15

<SELECT> 태그 사용 예제 (1/2)Common Gateway Interface

Web Program-mingPage 16

<SELECT> 태그 사용 예제 (2/2)Common Gateway Interface

Web Program-mingPage 17

<TEXTAREA> 태그Common Gateway Interface

태그 형식 :<TEXTAREA name=“ 입력필드명 " rows=“…” cols=“…” </TEXTAREA>일반적인 텍스트를 입력 받을 때 , 한 줄이 아닌 여러 줄의 텍스트 입력이 필요한 경우에 사용하는 인터페이스

사용 형식<TEXTAREA name = “content” rows=“4” cols=“8”>

초기 입력 내용</TEXTAREA>

속성 : NAME, ROWS, COLS

Web Program-mingPage 18

<TEXTAREA> 태그 사용 예제Common Gateway Interface

Web Program-mingPage 19

Input to CGI Program (1/2)Common Gateway Interface

Simple Form 의 예제 (Client Side) form4.html

<HTML> <HEAD><TITLE> Simple Form </TITLE></HEAD> <BODY> <H1> 간단한 Form </H1> <HR> <FORM action=“/cgi-bin/ex1.pl” method=“GET”> Command <Input Type=“text” Name=“command” SIZE=10> <BR> <Input Type=“submit” Value=“submit”> <Input Type=“reset” Value=“clear”> </FORM> <HR> </BODY></HTML>

Web Program-mingPage 20

Input to CGI Program (2/2)Common Gateway Interface

GET 을 사용하는 경우 (REQUEST_METHOD == “GET”)#!/usr/local/bin/perlprint “Content-type: text/plain”,”\n\n”;$query_string = “ENV{‘QUERY_STRING’};

POST 을 사용하는 경우 (REQUEST_METHOD == “POST”)#!/usr/local/bin/perl$size_of_form_information = $ENV{‘CONTENT_LENGTH’};read(STDIN, $form_info, $size_of_form_information);

• GET 을 이용하여 정보를 얻는 경우 , URL 에 붙는 데이터는 Encoding 되어 전달된다 .• 특수문자와 한글 코드에 대해서는 %xx(xx 는 16 진수 ) 로 변환• 인코딩된 데이터의 예

− Space %20 (since ASCII code value of space is 20.)− 한글의 경우 ( 한글 = %C7%D1%B1%DB)

Web Program-mingPage 21

Output from CGI ProgramCommon Gateway Interface

Simple Document 를 출력할 수 있다 . • Plain Text • HTML Document그림 혹은 그외의 이진 데이터 ( 영상 , 소리 , 등등 ) 를 출력할 수 있다 .Client 에게 HTTP Status Code 를 보낼 수 있다 .Server 에게 특정 Document 를 Client 에게 보내도록 지시할 수 있다 .

Decoding Process• Request Protocol 확인 (REQUEST_METHOD 가 POST 인지 GET 인지 ...)• GET 인 경우 , Query 를 QUERY_STRING 에서 읽어 들이고 , PATH_INFO 를 참조• POST 인 경우 , Request 의 길이를 CONTENT_LENGTH 에서 읽어 들인 후 ,

Request 를 표준입력 Data Stream 에서 읽어 들인다 .• Query String 을 “ &” 단위로 잘라내고 해석 (key=value&key=value...)• Hexadecimal 및 Character 를 해석

Web Program-mingPage 22

CGI 예제 (Hello World!)Common Gateway Interface

상황 : UNIX 상에 Web Server 가 있는 경우 , 다음과 같이 C 프로그램을 작성한다 .

작성한 C 프로그램을 Compile 한다 . ( 예 : $ cc –o hello.cgi hello.c)CGI 프로그램 “ hello.cgi” 를 Web Browser 에서 실행시켜 본다 .

#include <stdio.h>#include <stdlib.h>

void main(int argc, char *argv[]){

printf("Content-type: text/plain\n\n");printf("Hello Wordl!");

}

Web Program-mingPage 23

CGI 예제 ( 폼 데이터 그대로 전송 ) (1/4) – skipCommon Gateway Interface

Web Browser 입력 상황

폼 데이터 크기 알아내기• CONTENT_LENGTH 환경변수를 정수로

변환• int n =

atoi(getenv(“CONTENT_LENGTH”));

폼 데이터 읽어들이기• for(i=0; i<n; i++)

contentBuffer[i] = getchar();

브라우저로 출력하기• for(i=0; i<n; i++)

printf(“%c”, contentBuffer[i]);

브라우저로 출력하기 전의 필수 코드• printf(“Content-type: text/html\n\n”);• HTML 임을 알리는 표시

Web Program-mingPage 24

Common Gateway InterfaceCGI 예제 ( 폼 데이터 그대로 전송 ) (2/4) – skip

/* cgitest1.c - Echo request in a raw form */#include <stdio.h>#include <stdlib.h>

char *GetContent(int*);void ReleaseContent(char*);void EchoReqHeader(char*, int);

void main(){

char *ContentBuffer; int n;

ContentBuffer = GetContent(&n);printf("Content-type: text/html\n"); printf("\

n");printf("<html><head><title>aa</title></head>");printf("<body><h1>CGI Program “);

printf(“responds as follows</h1>");printf("<hr noshade>");printf("<h1>Request Header</h1>");printf("Content-Length=%d\n", n);EchoReqHeader(ContentBuffer, n);printf("</body></html>");ReleaseContent(ContentBuffer);

}

Web Program-mingPage 25

Common Gateway InterfaceCGI 예제 ( 폼 데이터 그대로 전송 ) (3/4) – skip

char *GetContent(int *n){

char *ContentBuffer; int i;

*n = atoi(getenv("CONTENT_LENGTH"));ContentBuffer = (char *)malloc(*n+1);for (i=0; i<*n; i++)

ContentBuffer[i] = getchar();ContentBuffer[i] = 0;return(ContentBuffer);

}

void ReleaseContent(char *buf){

free(buf);}

void EchoReqHeader(char *ContentBuffer, int n){

int i;for (i=0; i<n; i++)

putchar(ContentBuffer[i]);}

Web Program-mingPage 26

Common Gateway InterfaceCGI 예제 ( 폼 데이터 그대로 전송 ) (4/4) – skip

void SendNameValue(char *ContentBuffer, int n){

int i;for (i=0; i<n; i++) {

if (ContentBuffer[i] != '&')putchar(ContentBuffer[i]);

elseprintf("<br>");

}}