(Web Programming & Practice) CGI(Common Gateway Interface) 웹 프로그래밍 및 실습 (Web Programming & Practice) CGI(Common Gateway Interface) 문양세 강원대학교 IT대학 컴퓨터과학전공
CGI 개요 (1/2) Common Gateway Interface CGI란? CGI는 Common Gateway Interface의 약어 무언가와의 Gateway 역할? 사용자가 1) 브라우저를 통해 입력한 정보가 웹 서버를 거쳐 2) 응용프로그램에 전달되고 가공되어 3) 다시 사용자에게 전달되기까지의 인터페이스 HTML과 사용자 사이의 상호 작용 및 피드백을 가능하게 하는 강력한 웹 문서 교환 방식 외부 프로그램과 웹 서버(Web Server) 간의 연결 역할
CGI 개요 (2/2) 사용 이유 CGI 프로그램의 사용 예 Common Gateway Interface 사용 이유 웹에서 데이터 전달의 양방향성(Input, Output)을 가능하게 함 웹 사용자와 서버 사이의 Interface가 가능한 웹 페이지 제작 CGI 프로그램의 사용 예 방문객 카운터, 방명록, 사용자 ID 및 비밀번호 확인 웹 게시판, 웹 대화방, 자료실(uploading 포함) 검색엔진, …
CGI 동작 절차 사용자가 브라우저 안에 입력한 내용을 웹 서버로 보낸다. Common Gateway Interface 사용자가 브라우저 안에 입력한 내용을 웹 서버로 보낸다. 서버는 입력을 CGI 프로그램을 (스크립트로) 보낸다. 즉, 서버는 CGI를 호출한다. CGI 프로그램은 입력에 따른 처리를 수행하고, 그 결과를 웹 서버에게 전달한다. 웹 서버는 사용자의 브라우저, 즉 클라이언트에게 CGI의 실행 결과를 출력한다.
CGI 프로그램 vs. 일반 프로그램 처리 방식 기동 방식 일반 프로그램 CGI 프로그램 Common Gateway Interface 처리 방식 일반 프로그램 자체 시스템에서 실시간으로 실행됨 프로그램이나 데이터가 메모리에 상주 CGI 프로그램 자료의 요청과 응답으로 이루어짐 요청에 대한 응답이 종료되면 실행이 종료 기동 방식 일반 프로그램은 해당 컴퓨터(서버든 클라이언트든)에서 자체의 목적에 의해 기동 CGI프로그램은 클라이언트의 요청을 서버에서 수용할 수 있도록 하기 위해 만들어진 서버 종속용 프로그램
CGI 개발 도구 제 1세대 제 2세대 PHP (Personal Home Page Tools) 제 3세대 C/C++ Perl Common Gateway Interface 제 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
<FORM> 태그 (1/2) Common Gateway Interface HTML 문서에서 정보 입력 방식, 정보 전달 방식, 실행할 CGI 프로그램의 위치 등을 지정하는 태그이다. 기본 구조 <FORM> Form 시작 <INPUT> 여러 가지 방법 중 하나의 정보를 질의 <INPUT> 원하는 만큼 사용 </FORM> Form 종료 속성(attribute) action = “.…” 서버로부터 데이터를 입력 받아서 동작할 CGI 프로그램을 지정
<FORM> 태그 (2/2) 속성(attribute) (계속) Common Gateway Interface 속성(attribute) (계속) action = “.…” 서버로부터 데이터를 입력 받아서 동작할 CGI 프로그램을 지정 method = GET or POST 폼 데이터를 서버의 CGI 프로그램에 전달하는 방식을 지정 GET: 환경 변수를 이용한 CGI 방법을 사용 (데이터가 URL 주소에 포함되어 전송되며, 데이터 양이 많지 않은 경우에 유리함) POST: 표준 입출력 방식(stdin)을 이용한 CGI 방법을 사용 (데이터가 HTTP 프로토콜 Header에 포함되어 전송되며, 데이터 많은 경우에 유리함) target = “...” 결과를 나타낼 창을 지정 (_blank, _self, _parent, _top): 새로운 창, 현재 창 등등
<FORM> 태그 사용 예제 Common Gateway Interface form1.html
<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로 보내는 역할
<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="숨겨진 양식 값> 사용자 화면에 보이지 않고 스크립트로 전송되는 필드이다.
<INPUT> 태그 사용 예제 (1/2) Common Gateway Interface form5.html
<INPUT> 태그 사용 예제 (2/2) Common Gateway Interface form6.html
<SELECT> 태그 Common Gateway Interface 태그 형식: <SELECT name=“리스트명" <option> … </SELECT> 클라이언트에서 선택할 수 있는 항목을 리스트(목록) 형태로 제공할 수 있는 사용자 인터페이스 제공 클라이언트는 제공된 리스트의 여러 항목들 중 하나를 선택 사용 형식 form3.html <SELECT name = "리스트 이름”> <option> 항목-1 <option> 항목-2 : <option> 항목-n </SELECT> 속성: SIZE, NAME, MULTIPLE
<SELECT> 태그 사용 예제 (1/2) Common Gateway Interface
<SELECT> 태그 사용 예제 (2/2) Common Gateway Interface
<TEXTAREA> 태그 Common Gateway Interface 태그 형식: <TEXTAREA name=“입력필드명" rows=“…” cols=“…” </TEXTAREA> 일반적인 텍스트를 입력 받을 때, 한 줄이 아닌 여러 줄의 텍스트 입력이 필요한 경우에 사용하는 인터페이스 사용 형식 <TEXTAREA name = “content” rows=“4” cols=“8”> 초기 입력 내용 </TEXTAREA> 속성: NAME, ROWS, COLS
<TEXTAREA> 태그 사용 예제 Common Gateway Interface
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> </BODY> </HTML>
Input to CGI Program (2/2) Common Gateway Interface GET을 사용하는 경우 (REQUEST_METHOD == “GET”) #!/usr/local/bin/perl print “Content-type: text/plain”,”\n\n”; $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);
Output from CGI Program Common 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 예제 (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!"); }
CGI 예제 (폼 데이터 그대로 전송) (1/4) – skip 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]); 브라우저로 출력하기 전의 필수 코드 printf(“Content-type: text/html\n\n”); HTML임을 알리는 표시
CGI 예제 (폼 데이터 그대로 전송) (2/4) – skip Common Gateway Interface /* 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); }
CGI 예제 (폼 데이터 그대로 전송) (3/4) – skip Common Gateway Interface 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]);
CGI 예제 (폼 데이터 그대로 전송) (4/4) – skip Common Gateway Interface void SendNameValue(char *ContentBuffer, int n) { int i; for (i=0; i<n; i++) { if (ContentBuffer[i] != '&') putchar(ContentBuffer[i]); else printf("<br>"); }
Homework #5 (실습 #3) Common Gateway Interface