순천향대학교컴퓨터공학과이상정 순천향대학교컴퓨터공학과 1 학습내용 WWW, HTTP, HTML 아파치웹서버 HTML 문서 CGI 프로그래밍 순천향대학교컴퓨터공학과 2
World Wide Web WWW HTTP 프로토콜을이용하여 HTML 문서를전달 웹서버 (Web Server) : Apache, IIS, Nginx, Lighttpd 등 웹브라우저 (Web Browser ): Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari HTTP (Hyper Text Transfer Protocol) HTML 문서의전달을정의한프로토콜 HTML (Hyper Text Markup Language) Web에서사용될하이퍼텍스트문서를만들기위한언어 테그 (tag) 를기반으로원하는정보를표현 순천향대학교컴퓨터공학과이상정 3 웹클라이언트 / 서버모델 클라이언트 / 서버모델 클라이언트는웹객체들을요청하고 받아서디스플레이하는브라우저 (browser) 서버는요청에응답하여객체들을보내는웹서버 순천향대학교컴퓨터공학과 4
윈도우아파치웹서버구축 아파치웹서버 서버 현재가장많이사용되는 HTTP 웹서버 전세계웹서버의 53% 사용 (2013 년기준 ) 최신버전 2.4.25 (2016년 12월기준 ) http://httpd.apache.org/ 윈도우용웹서버바이너리는제 3 자가제공 ApacheHaus, Apache Lounge, BitNami WAMP Stack, WampServer, XAMPP ApacheHaus http://www.apachehaus.com/cgi-bin/download.plx x86 다운로드 httpd-2.4.25-x86-vc14-r1.zip (2017년 5월현재 ): 바이너리 순천향대학교컴퓨터공학과 5 Apache Haus 설치 (1) [ 실습 1] httpd-2.4.25-x86-vc14-r1.zip 압축해제 httpd-2.4.25-x86-vc14-r1 폴더생성 httpd-2.4.25-x86-vc14-r1 Apache24폴더를 C: 로이동 순천향대학교컴퓨터공학과 6
Apache24 폴더를 C: Apache24 로이동 ( 잘라내기, 붙여넣기 ) Apache Haus 설치 (2) 순천향대학교컴퓨터공학과 7 Apache 환경변수설정 윈도우환경변수설정 탐색기컴퓨터메뉴 시스템속성 고급시스템설정 환경변수 PATH 변수값끝에다음을추가 C: Apache24 bin 순천향대학교컴퓨터공학과 8
Apache 환경설정 Apache 실행환경설정 환경설정파일위치 C: Apache24 conf httpd.conf 주요환경설정 라인 38, 아파치서버루트디렉토리지정 Define SRVROOT "/Apache24" ServerRoot "${SRVROOT}" 라인 60, 웹서버포트지정 Listen 80 라인 223, 서버이름지정 ServerName localhost:80 라인 247, 웹문서위치지정 DocumentRoot "${SRVROOT}/htdocs" <Directory "${SRVROOT}/htdocs"> 순천향대학교컴퓨터공학과 9 Apache 서비스설치 Apache 윈도우서비스 ( 백그라운드실행 ) 설치 C: > httpd k install Apache 실행 C: > httpd k start 순천향대학교컴퓨터공학과 10
Apache 설치테스트 순천향대학교컴퓨터공학과 11 기타사용명령 httpd-2 2.4.25 425-x86-vc14-r1 readme r1 readme_first.html 파일참조 명령 서비스설치, httpd k install 서비스시작, httpd k kstart 서비스재시작, httpd k restart 서비스중지, httpd k stop 서비스해제, httpd k uninstall 설정테스트, httpd t 버전정보, httpd V 도움말, httpd -h 순천향대학교컴퓨터공학과 12
HTML 문서테스트 (1) [ 실습 2] HTML 테스트 C: Apache24 htdocs 디렉토리에 test1.html 문서작성 <HTML> <HEAD> <TITLE>TEST</TITLE> </HEAD> <BODY> <H3>Test</H3> Hello, world! </BODY> </HTML> 순천향대학교컴퓨터공학과 13 IP 주소 인터넷에연결된컴퓨터는각각고유의 IP (Internet Protocol) 주소를가짐 IPv4: 32 비트, IPv6: 128 비트 윈도우에서자신의컴퓨터 IP 주소확인 ipconfig 명령 순천향대학교컴퓨터공학과 14
IP 주소로접근 (1) 순천향대학교컴퓨터공학과 15 IP 주소로접근 (2) 루프백주소 (loopback address) 자기자신의컴퓨터주소 127.0.0.1 순천향대학교컴퓨터공학과 16
HTML 문서한글테스트 (1) [ 실습 3] 한글인경우아래와같이한글이깨짐 HTML 문서는유니코드입력인반면에, 웹서버는 UTF-8 등의바이트열을요구 <HTML> <HEAD> <TITLE>TEST</TITLE> </HEAD> <BODY> <H3>Test</H3> Hello, world! <br> 안녕하세요 </BODY> </HTML> 순천향대학교컴퓨터공학과 17 HTML 문서한글테스트 (2) <HEAD> 태그에아래와같은태그삽입 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <HTML> <HEAD> <TITLE>TEST</TITLE> <meta http-equiv= equiv="content-type Type" content="text/html; text/html; charset=utf-8 8" /> </HEAD> <BODY> <H3>Test</H3> Hello, world! <br> 안녕하세요 </BODY> </HTML> 순천향대학교컴퓨터공학과 18
Form 태그 (1) Form 태그 HTML 에서사용자의입력, 선택을위한태그 text, button, check box 등의일반적인 GUI 포함 Form 태그의매개변수값전달방식 ( 메서드, METHOD) 사용자의입력을인코딩하여전달함 GET 입력매개변수값을 URL 에포함시켜전달 POST 입력매개변수값을 HTML 몸체 (body) 에포함하여전달 큰데이터전송시사용 순천향대학교컴퓨터공학과이상정 19 Form 태그 (2) 기본구조 구 <FORM> form의시작 <INPUT> 여러가지방법중하나의정보를질의 <INPUT> 원하는만큼사용 </FORM> form 종료 <FORM method="..." action="..." > <INPUT name="..." type = "..."...>... </FORM> action: 서버가입력된데이터를받아서처리할 CGI 프로그램이름 name: 태그이름을지정 type: 태그모양을지정, text, radio, checkbox, password, button, hidden, fileupload, submit, reset 순천향대학교컴퓨터공학과이상정 20
서파톤 HTML 예 [ 실습 4] Form 태그를사용하여 4 장의서파톤서핑대회의점수를입력 순천향대학교컴퓨터공학과 21 <html> <head> <title> 서핑대회 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1> 순천향서핑대회 </h1> <hr> <form method="get" action="res.html"> 이름 : <input name="name" type="text"> <br><br> 평균점수 : <input name="score" type="text"> <br><br> 성별 : 남 <input type = "radio" name = "gender" value = "male"> 여 <input type = "radio" name = "gender" value = "female"><br><br> 국가 : <select name = "country" size="3"> <option value = "kor"> 한국 </option> <option value = "usa"> 미국 </option> </form> </body> </html> <option value = "chn"> 중국 </option> <option value = "jpa"> 일본 </option> <option value = "eng"> 영국 </option> <option value ="fra"> 프랑스 </option> <option value = "aus"> 호주 </option> </select> <br><br> <input type="submit" value="send"> <br> 순천향대학교컴퓨터공학과 22 surf1.html
res.html <html> <head> <title>form Response</title><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <h3>form 태그가수행되었습니다. </h3> </body> </html> 순천향대학교컴퓨터공학과 23 GET 매개변수값전달 입력매개변수값이 URL 로전달 http://localhost/res.html?name=%ed%99%8d%eb%af%bc%ec %8B%9D&score=9.1&gender=male&country=kor name= 홍민식, score=9.1, gender=male, country=kor 순천향대학교컴퓨터공학과 24
<html> <head> <title> 서핑대회 </title> surf2.html [ 실습 5] <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1> 순천향서핑대회 </h1> <hr> <form method="post" action="res.html"> 이름 : <input name="name" type="text"> text <br><br> 평균점수 : <input name="score" type="text"> <br><br> 성별 : 남 <input type = "radio" name = "gender" value = "male"> 여 <input type = "radio" name = "gender" value = "female"><br><br> 국가 : <select name = "country" size="3"> <option value = "kor"> 한국 </option> <option value = "usa"> 미국 </option> <option value = "chn"> 중국 </option> <option value = "jpa"> 일본 </option> <option value = "eng"> 영국 </option> <option value = "fra"> 프랑스 </option> <option value = "aus"> 호주 </option> </select> <br><br> <input type="submit" value="send"> <br> </form> </body> </html> 순천향대학교컴퓨터공학과 25 POST 매개변수값전달 순천향대학교컴퓨터공학과 26
CGI CGI (Common Gateway Interface) 웹상에서실행되는프로그램 상호작용지원 요청시점에따라다른html 문서를제공 C/C++, Python, Java 등을이용하여작성 기본동작 CGI Program (2) 실행 (3) 결과 Web Server (1) 요청 (4) 응답 Web Browser 순천향대학교컴퓨터공학과이상정 27 아파치 CGI 설정 환경설정파일 C: Apache24 conf httpd.conf conf 수정 CGI 관련환경설정 라인 364, CGI 디렉토리지정 ScriptAlias /cgi-bin/ "${SRVROOT}/cgi-bin/" 라인 380, C: Apache24/cgi-bin 디렉토리에파이썬 CGI 프로그램파일인식수행 <Directory "${SRVROOT}/cgi-bin"> AllowOverride None Options +ExecCGI Require all granted AddHandler cgi-script.cgi.py </Directory> 수정후서비스재시작 c: > httpd k restart 순천향대학교컴퓨터공학과 28
CGI 프로그램테스트 [ 실습 6] HTML 테스트 C: Apache24 cgi-bin 디렉토리에 test.py 문서작성 파이썬프로그램첫줄에 #! 로시작하는파이썬프로그램위치기술 셔뱅 (shebang) 이라고하며, 스크립트인터프리터경로표시 설치위치는환경변수 PATH 참조 #!/Users/sjlee/AppData/Local/Progra ms/python/python36-32/python # print("content-type: text/html n n") print( """ <HTML> <HEAD>TEST</HEAD> <BODY> <H3>Test</H3> Hello. world! <br> 안녕하세요! </BODY> 순천향대학교컴퓨터공학과 29 </HTML>""") 빈자러스웹사이트예 (1) [ 실습 7] Beans R US ( 빈자러스 ) 웹사이트에서커피원두의현재가격정보 CGI 프로그램 순천향대학교컴퓨터공학과 30
빈자러스웹사이트예 (2) #!/Users/sjlee/AppData/Local/Programs/Python/Python36-32/python 32/python # import random import time price = random.uniform(4,7) daytime = time.asctime() print("content-type: text/html n n") print("<html><head><title>welcome to the Beans'R'Us Pricing Page </title> </head><body>") print("<h2>welcome to the Beans'R'Us Pricing Page</h2>") print("<p>current t price of coffee beans = <strong>$%4.2f</strong></p>" t ></ >" % (price)) print("<p>price on " + daytime + ".</p>") print("</body></html>") 순천향대학교컴퓨터공학과 31 서파톤 CGI 예 [ 실습 8] Form 태그를사용하여입력한서핑대회의점수를파이썬 CGI 프로그램이받아서웹으로출력 surf3.html, cgi-bin/res.py 순천향대학교컴퓨터공학과 32
파이썬 CGI 모듈 파이썬은 CGI 모듈을사용하여매개변수값을획득 cgi.fieldstorage() 함수 폼의정보를갖는객체를획득예 ) fm = cgi.fieldstorage() fm.getvalue() 메서드 지정된매개변수 ( 태그이름 ) 의값을리턴예 ) sc = fm.getvalue("score") 순천향대학교컴퓨터공학과 33 <html> <head> <title> 서핑대회 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1> 순천향서핑대회 </h1> <hr> <form method="post" action="/cgi-bin/res.py"> 이름 : <input name="name" type="text"> text <br><br> 평균점수 : <input name="score" type="text"> <br><br> 성별 : 남 <input type = "radio" name = "gender" value = "male"> 여 <input type = "radio" name = "gender" value = "female"><br><br> 국가 : <select name = "country" size="3"> <option value = "kor"> 한국 </option> <option value = "usa"> 미국 </option> <option value = "chn"> 중국 </option> <option value = "jpa"> 일본 </option> <option value = "eng"> 영국 </option> <option value = "fra"> 프랑스 </option> <option value = "aus"> 호주 </option> </select> <br><br> <input type="submit" value="send"> <br> </form> </body> </html> 순천향대학교컴퓨터공학과 34 surf3.html
res.py #!/Users/sjlee/AppData/Local/Programs/Python/Python36-32/python # import cgi print("content-type: text/html n n") form = cgi.fieldstorage() na = form.getvalue("name") sc = form.getvalue('score') gn = form.getvalue('gender') ') cn = form.getvalue('country') print("<h3> 순천향서핑대회폼입력값 </h3>") print(" 이름 : " + na + "<br><br>" ) print(" 평균점수 : " +sc+"<br><br>" + ) print(" 성별 : " +gn + "<br><br>" ) print(" 국가 : " + cn) 순천향대학교컴퓨터공학과 35 CGI 에러정보출력 파이썬 CGI 프로그램에러발생시상태추적정보제공 cgitb 모듈사용 import cgitb; cgitb.enable() 순천향대학교컴퓨터공학과 36
res1.py #!/Users/sjlee/AppData/Local/Programs/Python/Python36-32/python # import cgi import cgitb; cgitb.enable() print("content-type: text/html n n") form = cgi.fieldstorage() na = form.getvalue("name") #sc = form.getvalue('score') gn = form.getvalue('gender') cn = form.getvalue('country') print("<h3> 순천향서핑대회폼입력값 </h3>") print(" 이름 : " + na + "<br><br>" ) print(" 평균점수 : " + sc + "<br><br>") print(" 성별 : " +gn + "<br><br>" ) print(" 국가 : " + cn) 순천향대학교컴퓨터공학과 37 8 장실습 [ 실습 1] Apache Haus 설치및테스트 [ 실습 2] HTML 문서테스트 [ 실습 3] HTML 문서한글테스트 [ 실습 4] 서파톤 HTML 예 [ 실습 5] 서파톤 HTML 예 POST 메서드 [ 실습 6] CGI 프로그램테스트 [ 실습 7] 빈자러스웹사이트예 [ 실습 8] 서파톤 CGI 예 순천향대학교컴퓨터공학과 38
과제 1. 자신의 PC 에아파치웹서버를설치하고, 임의의 HTML 문서또는CGI 프로그램을작성한후다음접속을시도 PC에서다양한주소로접속 (local host, IP 주소, 루프백주소 ) 스마트폰 WiFI 에서 IP 주소로접속 단, PC 가무선공유기에연결된상태 ( 같은서브넷, subnet) 이어야함 2. 앞의서핑대회 CGI 프로그램을수정하여 Form 태그로입력된값을파일로저장하는 CGI 프로그램을작성하라. 새로이입력된값들은파일에추가되어야함 순천향대학교컴퓨터공학과 39