cgi(common gateway interface)cs.kangwon.ac.kr/~ysmoon/courses/2010_1/wp/06.pdf• jsp (java server...

1

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

CGI(CGI(CCommon ommon GGateway ateway IInterface)nterface)

문양세문양세강원대학교강원대학교 ITIT대학대학 컴퓨터과학전공컴퓨터과학전공

CGI란?

• CGI는 Common Gateway Interface의 약어

무언가와의 Gateway 역할?

CGI CGI 개요개요 (1/2)(1/2)Common Gateway Interface

• 사용자가

1) 브라우저를 통해 입력한 정보가 웹 서버를 거쳐

2) 응용프로그램에 전달되고 가공되어

3) 다시 사용자에게 전달되기까지의 인터페이스

• HTML과 사용자 사이의 상호 작용 및 피드백을 가능하게 하는 강력한

웹 문서 교환 방식

Web Programmingby Yang-Sae MoonPage 2

웹 문서 교환 방식

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

2

사용 이유

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

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

CGI CGI 개요개요 (2/2)(2/2)Common Gateway Interface

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

CGI 프로그램의 사용 예

• 방문객 카운터, 방명록, 사용자 ID 및 비밀번호 확인

• 웹 게시판, 웹 대화방, 자료실(uploading 포함)


• 검색엔진, …

1. 사용자가 브라우저 안에 입력한 내용을 웹 서버로 보낸다.

2. 서버는 입력을 CGI 프로그램을 (스크립트로) 보낸다. 즉, 서버는 CGI를 호출한다.

3. CGI 프로그램은 입력에 따른 처리를 수행하고, 그 결과를 웹 서버에게 전달한다.

4. 웹 서버는 사용자의 브라우저, 즉 클라이언트에게 CGI의 실행 결과를 출력한다.

CGI CGI 동작동작 절차절차Common Gateway Interface


3

처리 방식

• 일반 프로그램

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

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

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

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

• CGI 프로그램

자료의 요청과 응답으로 이루어짐

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

기동 방식


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

기동

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

만들어진 서버 종속용 프로그램

제 1세대

• C/C++

• Perl

CGI CGI 개발개발 도구도구Common Gateway Interface

• C Shell

제 2세대

• ASP (Active Server Page)

• JSP (Java Server Page)

• PHP (Personal Home Page Tools)


제 3세대

• ASP.NET

• JSP+EJB

4

HTML 문서에서 정보 입력 방식, 정보 전달 방식, 실행할 CGI 프로그램의

위치 등을 지정하는 태그이다.

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

기본 구조

<FORM> Form 시작

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

<INPUT> 원하는 만큼 사용

</FORM> Form 종료


속성(attribute)

• action = “.…”서버로부터 데이터를 입력 받아서 동작할 CGI 프로그램을 지정

<FORM> <FORM> 태그태그 (2/2)(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): 새로운 창, 현재 창 등등

5

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

form1.html


<INPUT> <INPUT> 태그태그 (1/2)(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로 보내는 역할

6

<INPUT> <INPUT> 태그태그 (2/2)(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="숨겨진 양식 값>


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

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


7

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


<SELECT> <SELECT> 태그태그Common Gateway Interface

태그 형식: <SELECT name=“리스트명" <option> … </SELECT>

클라이언트에서 선택할 수 있는 항목을 리스트(목록) 형태로 제공할 수

있는 사용자 인터페이스 제공

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

사용 형식

<SELECT name = "리스트 이름”>

<option> 항목-1

<option> 항목-2

:

form3.html


:

<option> 항목-n

</SELECT>

속성: SIZE, NAME, MULTIPLE

8

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


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


9

<TEXTAREA> <TEXTAREA> 태그태그Common Gateway Interface

태그 형식:<TEXTAREA name=“입력필드명" rows=“…” cols=“…” </TEXTAREA>

일반적인 텍스트를 입력 받을 때, 한 줄이 아닌 여러 줄의 텍스트 입력이

필요한 경우에 사용하는 인터페이스필요한 경우에 사용하는 인터페이스

사용 형식

<TEXTAREA name = “content” rows=“4” cols=“8”>

초기 입력 내용

</TEXTAREA>


속성: NAME, ROWS, COLS

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


10

Input to CGI Program (1/2)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>

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

GET을 사용하는 경우 (REQUEST_METHOD == “GET”)

#!/usr/local/bin/perl

print “Content-type: text/plain”,”\n\n”;

$ t i “ENV{‘QUERY STRING’}$query_string = “ENV{‘QUERY_STRING’};

• GET을 이용하여 정보를 얻는 경우, URL에 붙는 데이터는 Encoding되어 전달된다.

• 특수문자와 한글 코드에 대해서는 %xx(xx 는 16진수)로 변환

• 인코딩된 데이터의 예

− Space %20 (since ASCII code value of space is 20.)

− 한글의 경우(한글 = %C7%D1%B1%DB)


POST을 사용하는 경우 (REQUEST_METHOD == “POST”)

#!/usr/local/bin/perl

$size_of_form_information = $ENV{‘CONTENT_LENGTH’};

read(STDIN, $form_info, $size_of_form_information);

11

Output from CGI ProgramOutput 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를 해석

CGI CGI 예제예제 (Hello World!)(Hello World!)Common Gateway Interface

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

성한다.

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

http://cs1.kangwon.ac.kr/~ysmoon/cgi-bin/hello.cgi

작성한 C 프로그램을 Compile한다. ($ cc –o hello.cgi hello.c)

CGI 프로그램 “hello cgi”를 Web Browser에서 실행시켜 본다

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

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

}


CGI 프로그램 hello.cgi 를 Web Browser에서 실행시켜 본다.

12

CGI CGI 예제예제 ((폼폼 데이터데이터 그대로그대로 전송전송) (1/4)) (1/4)Common 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]);


p ( , [ ]);

브라우저로 출력하기 전의 필수 코드

• printf(“Content-type: text/html\n\n”);

• HTML임을 알리는 표시

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

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

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

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

char *GetContent(int*);void ReleaseContent(char*);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 “);

i tf(“ d f ll </h1>")

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 “);

i tf(“ d f ll </h1>")


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);

}

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);

}

13


char *GetContent(int *n){

char *ContentBuffer; int i;

*n = atoi(getenv("CONTENT_LENGTH"));ff ( h *) ll (* 1)

char *GetContent(int *n){

char *ContentBuffer; int i;

*n = atoi(getenv("CONTENT_LENGTH"));ff ( h *) ll (* 1)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);}

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]);

}

void EchoReqHeader(char *ContentBuffer, int n){

int i;for (i=0; i<n; i++) putchar(ContentBuffer[i]);

}


void SendNameValue(char *ContentBuffer, int n){

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

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

void SendNameValue(char *ContentBuffer, int n){

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

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

elseprintf("<br>");

}}

putchar(ContentBuffer[i]);else

printf("<br>");}

}


14

Common Gateway InterfaceHomework #5 (Homework #5 (실습실습 #3)#3)


cgi(common gateway interface)cs.kangwon.ac.kr/~ysmoon/courses/2010_1/wp/06.pdf• jsp (java server...

Documents