웹기반 제어를 위한 CGI 프로그래밍 - Speech Square 음성 및 언어

Transcript 웹기반 제어를 위한 CGI 프로그래밍 - Speech Square 음성 및 언어

Slide 1

웹기반 시스템 제어를 위한
CGI 프로그래밍
창원대학교 메카트로닉스 공학부
조철우

Slide 2

목차
CGI란 무엇인가?
CGI를 이용한 데이터 전달방법
CGI프로그램의 예
CGI응용사례

Slide 3

CGI란 무엇인가?(1)
Common Gateway Interface
외부 프로그램과 웹서버(HTTP Server) 간의
연결 역할을 하기 위한 규약이 CGI
그 때 사용하는 프로그램을 gateway프로그램
= CGI 프로그램(혹은 스크립트)
통상 C/C++, PERL혹은 UNIX Shell, Tcl/Tk 등
을 사용하여 구현

Slide 4

CGI를 통한 데이터 흐름(1)
사용자 컴퓨터

HTML
페이지

서버 컴퓨터

FORM tag

1
4
인터넷

HTML
웹서버
프로그램

2
CGI
프로그램

3

3
정보처리
정보저장
입출력

Slide 5

CGI를 통한 데이터 흐름(2)
클라이언트(웹브라우저)에서 서버로 TCP/IP 연결
을 통해 데이타 요청
2. 서버가 CGI프로그램에게 실행을 하도록 요청을
건네줌
3. -CGI프로그램에서 서버로 출력이 전달
-CGI프로그램 실행
-실행결과를 HTML파일형식으로 작성
4.서버로부터 HTML파일을 읽어서 결과 확인
1.

Slide 6

입력값 전달방식
대표적 형식
FORM을 사용하는 경우

ACTION="http://www.abc.com/cgibin/abc.cgi">
또는
FORM을 사용하지 않는 경우
http://www.abc.com/cgibin/abc.cgi?First+Name=foo&Last+Name=bar

Slide 7

Get Method
FORM택에 METHOD=get으로 하거나 생략

사용자의 입력값들이 환경변수(Environment Variable)
에 저장되어 전달
입력값들은 환경변수의 하나인 QUERY_STRING을 통
해 전달
CGI스크립트는 그 QUERY_STRING에 들어 있는 값을
읽음
그 값들은 입력된 그대로 넘어가는 것이 아니라 서버에
의해 여러가지로 변환(인코딩)되어 넘어가게됨
CGI스크립트에서는 그 값들을 해독(decoding)해야
입력값들이 많지 않는 경우 혹은 그냥 URL에 붙는 파라
미터로 넘겨서 CGI스크립트로 전달할 때에 사용

Slide 8

Post Method
값이 stdin(standard input:표준입력) 을 통
해서 전달됩니다
get METHOD가 인수를 통해서 전달되므로
커맨드라인 의 길이에 의한 제한을 받는 반
면에, post METHOD는 stdin을 이용하므
로 데이타양의 제한이 없음
환경변수들은 stdin과 함께 전달
Get Method와 마찬가지로 입력값들이
encoding되어 넘어오므로 CGI에서 그 값
들을 decoding해야함

Slide 9

Get 과 Post
Get

Post

변수값
전달방법

환경변수
Query String이용

표준입출력(Stdin)
환경변수도 같이 전
달

변수길이

커맨드라인의 길이
에 따라 제한

무제한

필요

필요

CGI에서의
Decoding

Slide 10

Slide 11

CGI작성의 예 - 방명록
Name, Email, 홈페이지, 남길말을 서버에
기록해 주는 방명록을 작성
1. 방명록 작성을 위한 HTML문서 작성
2. C언어를 이용한 CGI작성
3. 작성된 방명록을 확인하는 HTML문서
작성

Slide 12

CGI프로그램의 설정
Web server계정의 root아래
/cgi-bin/ 디렉토리에 cgi프로그램을 위치

Slide 13

CGI프로그램 작성언어
C, Basic, Perl, PHP, ASP,

Slide 14

CGI프로그램에의 변수전달의 예
http://sarim.changwon.ac.kr/cgi-bin/cgi-program?name1=
내용1&name2=내용

이때 서버의 환경변수의 QUERY_STRING은
'name1=내용1&name2=내용2'이 된다.

Slide 15

입력 페이지 FORM Tag

이 름 :
Email :

홈페이지 :
남길 말씀 :

<input type=submit name=enter_guest value="입력 완료"> <input type=reset value="재 입력"> Slide 16 방명록 입력페이지의 구성 이름: Email : 홈페이지 : 남길 말씀 : 입력 완료 재 입력 Slide 17 FORM tag의 구성 METHOD는 post action에는 사용하는 cgi프로그램의 URL 이름, E_Mail, 홈페이지: 한 줄로 나타나는 text input 속 성 남길 말씀: 여러 줄의 입력이 가능하도록 textarea input 속성 submit란 input속성은 글단추로서 입력된 값을 웹서버 로 전달하는 역할 reset란 input 속성은 글단추로서 입력된 값을 모두 지 우고 새로 입력 "입력완료" 글단추를 누르면 입력되어 있는 값을 웹서버 를 경유하여 CGI프로그램으로 전달한다 Slide 18 데이터의 Encoding과정 각 입력변수 필드는 &로 구분되어있다. 입력변수 필드의 이름과 값은 =로 구분되어있다. 공백(space)는 +로 치환되어 넘어온다. +, &, = 등의 특별한 의미가 있는 기호문자는 16진수값 으로 바뀌어 넘어온다. 이름에 ‘Mickey, Mouse’를 입력하였다면 encoding된 값은 ‘Mickey%2C+Mouse’ 가 된다. Slide 19 정보의 Decoding 과정 1. 2. 3. 4. 각 변수명/변수값 쌍을 분리 변수명과 변수값을 분리 %16진수 형태의 특수문자를 원래 문자로 복원 +를 공백으로 변환 Slide 20 전달 파라미터의 획득 UNIX환경, C언어에서 C함수 getenv(“QUERY_STRING”)이용 Slide 21 C언어를 이용한 변수Decoding Decoding용 함수의 예 void getword(char *word, chat *line, char stop) ;변수, 변수값쌍을 분리 void plustospace(char *str) ; +를 공백문 자로 변환 void unescape_url(char *url) ; %16진수 형태의 특수문자 복원 Slide 22 getword 사용예 getword(gentries[x].val,query,’&’); 처리전: ab= 123&cd=456 이고 구분자 & 처리후: ab=123 cd=456 과 같이 분리 결과로부터 변수 ab는 123, cd는 456으로 값을 얻는다. Slide 23 plustospace 사용예 처리전: ‘Korea+Seoul’ 처리후: ‘Korea Seoul’ unescape_url 사용예 처리전: ‘Korea+%28Seoul%29’ 처리후: ‘Korea+(Seoul)’ Slide 24 전달 변수 type정의 전달된 변수를 받기 위한 변수type정의 typedef struct{ char name[21]; char val[50]; } gentry; Slide 25 환경변수의 종류 환경변수 이름 설명 SERVER_PROTOCOL 클라이언트 요청이 사용하는 프로토콜. 보통 HTTP 1.0 혹은 HTTP 1.1 SERVER_PORT REQUEST_METHOD 클라이언트 요청을 보내는 포트 번호. HTML 폼이 사용하는 METHOD 보통 GET이나 POST 클라이언트에 의해 전달되는 추가 PATH 정보. 이 환경변수를 이용하여 스크립트를 부를 수 있습니다. PATH_INFO에 나타난 가상 경로(path)를 실제의 물리적인 경로로 바뀐 값. 현재 실행이 요청된 스크립트 명 GET 방식에서 URL의 뒤에 나오는 정보를 저장하거나 폼입력 정보를 저장합니다.(POST방식은 제외) 클라이언트의 IP주소 클라이언트의 호스트 이름 서버가 사용자 인증을 지원하고, 스크립트가 그 확인을 요청한다면, 이 것이 확인된 사용자이름이 됩니다. 서버가 RFC931 사용자 확인을 지원한다면 서버로부터 발췌된 사용자 이름이 이 환경변수에 저장된다. 이 변수 의 용도는 로그인에만 한정됩 니다. POST방식일 경우 클라이언트에서 넘겨 지는 사용자 입력의 길이를 표 시합니다. POST방식을 이용하여 검색문에 정보가 들어있는 경우에 그 정보의 타 입을 나타냅니다. 클라이언트의 사용 프로그램(웹브라우저)을 표시합니다. PATH_INFO PATH_TRANSLATED SCRIPT_NAME QUERY_STRING REMOTE_ADDR REMOTE_HOST REMOTE_USER REMOTE_IDENT CONTENT_LENGTH CONTENT_TYPE HTTP_USER_AGENT Slide 26 출력된 환경 변수의 예 SERVER_SOFTWARE : Apache/1.3.9 (Unix) (ALZZA/Linux) SERVER_NAME : chaos.inje.ac.kr GATEWAY_INTERFACE : CGI/1.1 SERVER_PROTOCOL : HTTP/1.1 SERVER_PORT : 80 REQUEST_METHOD : GET HTTP_ACCEPT : image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-shockwave-flash, */* PATH_INFO : (null) PATH_TRANSLATED : (null) SCRIPT_NAME : /BBS/cgi-ex/getcgi.cgi QUERY_STRING : Yinix REMOTE_HOST : (null) REMOTE_ADDR : 221.162.141.35 REMOTE_USER : (null) CONTENT_TYPE : (null) CONTENT_LENGTH : (null) Slide 27 C언어를 통한 CGI구현 예 http://www.newbreedsoftware.com/cgi-util/ cgi-util.c cgi-util.h filetest.c , filetest.html Test.c TODO.txt INSTALL.txt README.txt Slide 28 CGI data format typedef struct entry_type { char * name; char * val; char * content_type; int content_length; } cgi_entry_type; Slide 29 원격제어를 위한 CGI프로그램 기본적으로 방명록과 동일 전달된 값을 제어 프로그램에 전달 Slide 30 원격위치제어 FORWARD LEFT RIGHT BACKWARD Slide 31 원격위치제어 ‘SUBMIT’버튼 과 연결 Value=1 (right를 의미) FORWARD LEFT RIGHT BACKWARD Slide 32 원격위치제어 ‘SUBMIT’버튼 과 연결 Value=1 (right를 의미) FORWARD LEFT RIGHT BACKWARD CGI에서 구동프로그램 실행 변수전달 Slide 33 원격위치제어에의 응용 모델구동 ‘SUBMIT’버튼 과 연결 Value=1 (right를 의미) FORWARD LEFT RIGHT BACKWARD CGI에서 구동프로그램 실행 변수전달 Slide 34 원격위치제어에의 CGI응용 모델구동 모니터 확인 ‘SUBMIT’버튼 과 연결 Value=1 (right를 의미) FORWARD LEFT RIGHT BACKWARD CGI에서 구동프로그램 실행 변수전달 Slide 35 CGI연습문제 CGI를 실행하면 환경변수를 출력해서 evnout.html로 출력해 주는 CGI프로그램 을 작성하시오. (HW) 4개 이상의 버튼으로부터 CGI입력 을 받아서 전달된 값에 의해 출력 그림을 변경하는 CGI프로그램을 작성하시오. </div>
			</section>

</div>
		</div>
	</div>
</main>

</div>

<div class="row mt-3">
				<ul class="col-sm-6 list-unstyled">
					<li>
						<h6 class="mb-3">Company</h6>
					<li>
						
						Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040
					<li>
						
						+357 64-733-402
					<li>
						
						info@slideum.com				</ul>

<ul class="col-6 col-sm-3 list-unstyled">
					<li>
						<h6 class="mb-3">Links</h6>
					<li>
						<a href="/about">About</a>
					<li>
						<a href="/contacts">Contact</a>
					<li>
						<a href="/faq">Help / FAQ</a>
				</ul>

<ul class="col-6 col-sm-3 list-unstyled">
					<li>
						<h6 class="mb-3">Legal</h6>
					<li>
						<a href="/terms">Terms of Service</a>
					<li>
						<a href="/privacy">Privacy policy</a>
					<li>
						<a href="/page.html?code=public.usefull.cookie">Cookie policy</a>
					<li>
						<a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a>
				</ul>
			</div>
		
		<hr>
		slideum.com ©
			2024, Inc. All rights reserved.
	</div>
</footer>

<div class="modal directory" id="directory-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Directory</h5>
				<button class="close" type="button" data-dismiss="modal">×</button>
			</div>
			<div class="modal-body"></div>
		</div>
	</div>
</div>

!function __draw_directory(data, root, uuid)
	{
		var ul = $('<ul>', uuid &&
		{
			id: 'category' + uuid,
			class: !__path_directory.includes(uuid) ? 'collapse' : null
		});

for (var item in data)
		{
			var li = $('<li>').appendTo(ul);

if (item = data[item], item.children)
			{
				li.append('<a href=#category' + item.id + ' data-toggle=collapse>')
				__draw_directory(item.children, li, item.id);
			}
			else
			{
				li.append('<a href=' + item.url + '>');
			}

var a = $('> a', li).addClass('item').text(item.name)
					.append($('<a class="link fa fa-external-link" href=' + item.url + '>'));

if (item.id === +__path_directory.slice(-1))
			{
				a.addClass('active');
			}
			/*
            if (item.id !== __path_directory[0])
            {
                a.addClass('collapsed');
            }
            */
		}

root.append(ul);
	}
	([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside'));

var __root_directory = $('#directory-aside > ul');

$('#directory-aside')
		.on('show.bs.collapse', function()
	{
		//console.log('show.collapse')
	})
		.on('hide.bs.collapse', function()
	{
		//console.log('hide.collapse')
	});

$('#directory-modal')
		.on('show.bs.modal', function()
	{
		$('[class$="body"]', this).prepend(__root_directory);
	})
		.on('hide.bs.modal', function()
	{
		$('#directory-aside').prepend(__root_directory);
	});

$('.directory-mobile').on('click', function(e)
	{
		e.preventDefault();
	});
	$('.directory .link').on('click', function(e)
	{
		e.stopPropagation();
	});
</script>

$('[data-toggle="tooltip"]').tooltip();
</script>

<script type="text/javascript">
 (function (d, w, c) {
 (w[c] = w[c] || []).push(function() {
 try {
 w.yaCounter28397281 = new Ya.Metrika({
 id:28397281
 });
 } catch(e) { }
 });

var n = d.getElementsByTagName("script")[0],
            s = d.createElement("script"),
            f = function () { n.parentNode.insertBefore(s, n); };
        s.type = "text/javascript";
        s.async = true;
        s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
 d.addEventListener("DOMContentLoaded", f, false);
 } else { f(); }
 })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>