Contents of CGI 사용하기

CGI 사용하기

CGI (Common Gateway Interface) 프로그램의 정의

두가지 web 처리 방식
1. client 가 web server 에게 자료를 요청하면 web server 가 자료를 전송하는 방식
2. client 가 자료를 web server 에게 전송하면 web server 는 이를 처리할 프로그램을 이용처리하는 방식
두번째 방식에서 web server 가 넘겨준 자료를 처리하는 프로그램을 CGI 프로그램이라함

Figure 2.1: CGI 동작 방식
$\begin{figure}\centerline{\setlength{\epsfxsize}{0.8\textwidth} \epsfbox{/home/shjung/public_html/kor/lec/uinternet/images/cgi.ps}}\end{figure}$
CGI 프로그램을 위하여 사용되는 프로그래밍 언어
- C, C++, PERL, TCL, Unix shell, Visual Basic, Applescript 등이 있음
- Unix OS: C, C++, PERL, TCL, Unix shell 이 유용
- Windows NT: C, C++, Visual Basic 등이 유용
- Macintosh: Applescript 유용
- 실행화일 생성 tool: C, C++
- script tool: PERL, TCL, Unix shell, Applescript
보통 web server directory 밑에 cgi-bin 안에 CGI 프로그램이 있다

**Figure 2.1:** CGI 동작 방식
$\begin{figure}\centerline{\setlength{\epsfxsize}{0.8\textwidth} \epsfbox{/home/shjung/public_html/kor/lec/uinternet/images/cgi.ps}}\end{figure}$

CGI 프로그램을 사용하기 위한 HTML 태그

<form> 태그

html 문서내에서 CGI 를 호출하는데 사용
속성으로 action, method, enctype 이 있음
action 속성: CGI 프로그램의 위치를 URL 로 지정
method 속성: server로 전달 방식 지정
- get 방식: CGI 환경변수인 query string 으로 전달
- post 방식: 환경변수 및 표준입력을 통해 전달
- get 방식은 전달되는 자료의 양이제한됨, post 는 제한없음
enctype 속성: 전달 타입을 지정
- 기본값타입은 application/x-www-form-urlencoded

<input> 태그

입력양식을 지정, 반드시 <form> 태그내에 있어야함
속성으로 name, type 이 있음
name 속성: name 으로 입력자료를 구분
value 속성: 초기입력자료를 표시
checked 속성: 입력값의 초기화

type 속성: 입력양식의 타입을 지정

**Table 2.3:** type 속성의 종류
type 속성	양식	설명
checkbox	체크박스 입력양식	여러개중 다수개 선택가능
file	파일 upload 입력양식	화일 upload 를 수행
radio	라디오버튼 입력양식	여러개중 하나만 선택가능
text	text 입력양식	한줄의 텍스트를 입력 가능
reset	리셋버튼 입력양식	입력을 지우고 재입력시 사용
submit	자료전송 입력양식	입력된 자료를 전송할때 사용
button	버튼 입력양식	버튼모양을 만들때 사용 name 은 사용되지 않음
password	암호 입력양식	암호입력시 사용, * 로 표시됨
hidden	숨겨진 입력양식	web browser 에는 표시되지 않음

checkbox 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
         <TITLE> 체크박스 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
           <CENTER><H1><B> 당신의 PC 시스템 사양 <B></H1></CENTER><BR> 
           <FORM> 
           <OL> 
             <LI><INPUT TYPE="checkbox" NAME="checkbox_name1"> 모뎀  
             <LI><INPUT TYPE="checkbox" NAME="checkbox_name2" CHECKED> 사운드 카드    
             <LI><INPUT TYPE="checkbox" NAME="checkbox_name3"> 비디오 카드 
             <LI><INPUT TYPE="checkbox" NAME="checkbox_name4"> LAN 카드 
             <LI><INPUT TYPE="checkbox" NAME="checkbox_name5"> MPEG 카드  
           </OL> 
           </FORM> 
  </BODY> 
 
</HTML>

file upload 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD>  
         <TITLE> 파일 업로드 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
         <CENTER> 
         <H1><B> 업로드 할 파일의 경로와 이름을 입력하시오. </B></H1><BR>  
         <FORM> 
           <INPUT TYPE="file" NAME="file_name"> 
         </FORM> 
         </CENTER> 
  </BODY> 
 
</HTML>

라디오 버튼 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
         <TITLE> 라디오버튼 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
 
         <CENTER><H1><B> 당신의 직업 <B></H1></CENTER><BR> 
         <FORM> 
           <OL> 
             <LI><INPUT TYPE="radio" NAME="radio_name1"> 학생  
             <LI><INPUT TYPE="radio" NAME="radio_name2"> 기술자   
             <LI><INPUT TYPE="radio" NAME="radio_name3" CHECKED> 교수 
             <LI><INPUT TYPE="radio" NAME="radio_name4"> 디자이너 
             <LI><INPUT TYPE="radio" NAME="radio_name5"> 연예인  
           </OL> 
         </FORM> 
  
  </BODY> 
 
</HTML>

텍스트 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
         <TITLE> 텍스트 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
 
         <CENTER><H1><B> 건강 기록부 <B></H1></CENTER><BR> 
         <FORM> 
           <OL><H3> 
             <LI> 성명 <INPUT TYPE="text" NAME="name" SIZE=10>   
             <LI> 학년 <INPUT TYPE="text" NAME="grade">     
             <LI> 주소 <INPUT TYPE="text" NAME="address" SIZE=55 MAXLENGHT=200>   
             <LI> 몸무게(kg) <INPUT TYPE="text" NAME="weight">   
             <LI> 키(cm) <INPUT TYPE="text" NAME="length">    
             <LI> 성별 <INPUT TYPE="text" NAME="sex" VALUE="여자"> 
           </H3></OL> 
         </FORM> 
  
  </BODY> 
 
</HTML>

리셋버튼 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
         <TITLE> 리셋버튼 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
         <CENTER><H1><B> 건강 기록부 <B></H1></CENTER><BR> 
         <FORM> 
           <OL><H3> 
             <LI> 성명 <INPUT TYPE="text" NAME="name" SIZE=10>   
             <LI> 학년 <INPUT TYPE="text" NAME="grade">     
             <LI> 주소 <INPUT TYPE="text" NAME="address" SIZE=55 MAXLENGHT=200>   
             <LI> 몸무게(kg) <INPUT TYPE="text" NAME="weight">   
             <LI> 키(cm) <INPUT TYPE="text" NAME="length">    
             <LI> 성별 <INPUT TYPE="text" NAME="sex" VALUE="여자"> <BR><BR><BR> 
                       <CENTER><INPUT TYPE="reset" VALUE="  재입력 (Reset)  "></CENTER> 
           </H3></OL> 
         </FORM> 
  </BODY> 
 
</HTML>

자료전송 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
        <TITLE> 자료전송 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
        <CENTER><H1><B> 건강 기록부 <B></H1></CENTER><BR> 
        <FORM> 
          <OL><H3> 
            <LI> 성명 <INPUT TYPE="text" NAME="name" SIZE=10>   
            <LI> 학년 <INPUT TYPE="text" NAME="grade">     
            <LI> 주소 <INPUT TYPE="text" NAME="address" SIZE=55 MAXLENGHT=200>   
            <LI> 몸무게(kg) <INPUT TYPE="text" NAME="weight">   
            <LI> 키(cm) <INPUT TYPE="text" NAME="length">    
            <LI> 성별 <INPUT TYPE="text" NAME="sex" VALUE="여자"> <BR><BR><BR> 
                 <INPUT TYPE="submit" VALUE="  자료전송(Submit)  "> 
                 <INPUT TYPE="button" VALUE="  재입력 (Reset)  "> 
          </H3></OL> 
        </FORM> 
  </BODY> 
 
</HTML>

버튼 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
        <TITLE> 버튼 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"> 
 
          <CENTER><BR><BR><BR><BR> 
          <FORM> 
             <INPUT TYPE="button" VALUE=" <=  전화면 "> 
          </FORM> 
          </CENTER> 
 
  </BODY> 
 
 
 
</HTML>

암호 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
        <TITLE> 암호 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"><BR><BR><BR> 
 
        <CENTER><H1><B> 이름과 암호를 입력하세요 <B></H1></CENTER><BR> 
        <FORM> 
           <OL><H3> 
               <LI> 이름 <INPUT TYPE="text" NAME="text_name" SIZE=10> 
              <LI> 암호 <INPUT TYPE="password" NAME="password_name"> <BR><BR><BR> 
                            <INPUT TYPE="submit" VALUE="  자료전송(Submit)  "> 
                            <INPUT TYPE="reset" VALUE="  재입력 (Reset)  "> 
           </H3></OL> 
        </FORM> 
 
  </BODY> 
 
</HTML>

숨겨진 입력양식의 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
        <TITLE> 숨겨진 입력양식 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"> 
 
         <CENTER><BR><BR><BR><BR> 
         <FORM> 
            <INPUT TYPE="hidden" NAME="hidden_name" VALUE="hidden_value"> 
            <INPUT TYPE="submit" VALUE=" 자료전송(Submit)  "> 
        </FORM> 
        </CENTER> 
 
  </BODY> 
 
 
</HTML>

<select> 태그
- 여러개의 목록중 하나를 선택하게 함
- 반드시 <form> 태그내에 있어야함
- 속성으로 name, size, multiple 등이 있음
- name 속성: select 태그의 이름 지정
- size 속성: 목록의 줄수를 지정 기본값은 1
- multiple 속성: 여러개의 목록을 동시에 선택시 사용
<option> 태그
- 목록을 나열할때 사용
- 속성으로 value, selected 를 갖음
- value 속성: CGI 로 전달되는 값 지정
- selected 속성: 초기목록으로 지정됨

<select> 와 <option> 태그를 사용한 예) (수행하기)

 
<HTML> 
 
  <HEAD> 
         <TITLE> SELECT 태그, OPTION 태그 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" TEXT="#008000"> 
 
           <CENTER><BR><BR> 
           <H2><B> 선호하는 과자 종류 </B></H2><BR> 
           <FORM> 
              <SELECT NAME="name1">   
                 <OPTION VALUE="potato"> 감자칩   
                 <OPTION VALUE="onion" SELECTED> 양파링 
                 <OPTION VALUE="nine"> 짱구 
                 <OPTION VALUE="choco"> 초코칩 쿠키 
                 <OPTION VALUE="roast"> 포비 
              </SELECT> 
              <BR><BR><BR><BR><BR><BR> 
 
              <H2><B> 주로 사용하는 검색엔진 </B></H2><BR> 
              <SELECT NAME="name2" SIZE=5 MULTIPLE> 
                 <OPTION VALUE="kachi" DISABLED> 까치네 
                 <OPTION VALUE="mochanni"> 미스 다찾니 
                 <OPTION VALUE="simmany" SELECTED> 심마니 
                 <OPTION VALUE="aistar"> 정보탐정 
                 <OPTION VALUE="kyahoo"> 야후 코리아 
                 <OPTION VALUE="altavista"> 알타비스타 
              </SELECT> 
           </FORM> 
           </CENTER> 
 
  </BODY>

<textarea> 태그
- 많은양의 자료를 전송시 사용
- 속성으로 name, rows, cols 를 갖음
- name 속성: 태그 이름 지정
- rows 속성: 입력영역의 줄수 지정
- cols 속성: 입력영역의 칸수 지정

<textarea> 태그 사용예 (수행하기)

 
<HTML> 
 
  <HEAD>  
         <TITLE> TEXTAREA 태그 예제 </TITLE> 
  </HEAD> 
 
  <BODY BACKGROUND="sky.jpg" text="#008000"> 
 
          <CENTER><H2><B>  게시판에 자신의 의견을 올려 주시기 바랍니다..! </B></H2> 
          <FORM><BR><BR> 
             <TEXTAREA NAME="memo" ROWS=17 COLS=60>                     
             </TEXTAREA><BR><BR> 
             <INPUT TYPE="submit" VALUE="자료전송(Submit) "> 
             <INPUT TYPE="reset" VALUE="재입력(Reset)"> 
         </FORM> 
         </CENTER> 
 
  </BODY> 
 
</HTML>

실습

위의 form 예를 실행시켜본다.
자신만의 form 을 구성하는 html을 작성하고 테스트해본다.

2004-11-02