웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크
학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다. 2/27
1 절. 웹시스템구조 웹서비스 : TCP 포트 80 번 클라이언트 - 서버모델 URL 웹서버의자원명칭 사용하는프로토콜, 서버의호스트이름, 서버내부의파일경로명으로구성 예 : http://www.korea.co.kr/welcom.html UNIX/Linux 시스템 로그인이름 hong 홈디렉토리 /public_html/index.html http://www.korea.co.kr/~hong 3/27
1 절. 웹시스템구조 클라이언트 - 서버모델 연결설정과해제 1. 사용자가웹브라우저에게웹서버의 URL 주소입력 2. 웹브라우저가 DNS 서버에게웹서버의호스트이름을 IP 주소로변경요청 3. 웹브라우저가 <IP 주소 + 포트 80번 > 의웹서버와 TCP 접속시도 4. 웹브라우저가웹서버에게최초화면을위한 GET 명령전송 5. 웹서버가웹브라우저에게요청한웹문서를회신 6. 웹브라우저와웹서버사이의연결해제 7. 웹브라우저가사용자화면에웹문서를출력 4/27
1 절. 웹시스템구조 클라이언트 - 서버모델 연결설정과해제 [ 그림 14-1] 5/27
1 절. 웹시스템구조 APM 에서의서버와클라이언트구조 APM (Apache, PHP, MySQL) Apache: 웹서버프로그램 PHP: 유닉스 / 리눅스환경에서지원되며, HTML 언어의기능을보강 MySQL: 데이터베이스기능지원 APM의동작원리 1. 웹브라우저가 Apache에웹문서요청 2. PHP 코드처리필요시 PHP에요청 3. 데이터베이스처리필요시 MySQL에요청 4. 데이터베이스결과회신 5. PHP가실행결과인 HTML 코드회신 6. 웹문서를웹브라우저에회신 6/27
1 절. 웹시스템구조 APM 에서의서버와클라이언트구조 PHP 코드의처리 PHP 코드는 HTML 문서에 Embedded 형식으로작성 : <? 와?> 이구분자 PHP 코드가포함된문서의확장자는.php 예 웹브라우저에회신되는내용 : PHP 코드는서버에서실행되고결과만회신 예 7/27
1 절. 웹시스템구조 APM 에서의서버와클라이언트구조 PHP 코드의처리 화면출력내용 [ 그림 14-3] 8/27
2 절. HTML HTML 명령어 HTML: 웹문서를작성하는언어 <HTML> 로시작하고, </HTML> 로종료 헤더 : <HEAD> 로시작하고, </HEAD> 로종료 바디 : <BODY> 로시작하고, </BODY> 로종료 9/27
2 절. HTML HTML 명령어 HTML 기본명령어 <Hn>: 제목을표시하며, n 값으로크기조정 <HR>: 수평선 <FONT SIZE= n COLOR= #ffffff >: 글자크기와색깔지정 <P>: 문단구분 <BR>: 줄바꿈 <B>: 굵은글씨 <I>: 이탤릭글씨 <U>: 밑줄 <SUB>: 아래첨자 <SUP>: 위첨자 <A HREF= URL 주소 >: 웹문서링크 <IMG SRC= 그림파일 >: 그림표시 10/27
2 절. HTML HTML 명령어 HTML 문서작성의예 그림 14-4 <HTML> <HEAD> <TITLE> 기본웹문서 </TITLE> </HEAD> <BODY> <H2> 기본태그연습 </H2> <HR> <B> 굵은글씨 </B><BR> <I> 이탤릭글씨 </I><BR> <U> 밑줄글씨 </U><BR> <A HREF="http://www.korea.co.kr"> 한국주식회사 </A> </BODY> </HTML> 11/27
2 절. HTML HTML 명령어 HTML 표명령어 <TABLE>: 테이블작성 <TR>: 테이블의한줄 <TD>: 테이블의한칸 <HTML> <HEAD> <TITLE> 표만들기 </TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> 학년 </TD> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD> 인원 </TD> <TD>50</TD> <TD>52</TD> <TD>54</TD> <TD>46</TD> </TR> </TABLE> </BODY> </HTML> 12/27
2 절. HTML 프레임 한화면을여러프레임으로나누는기능을제공 <FRAMESET> 태그 좌우 1:9 의예 [ 그림 14-6] <HTML> <FRAMESET cols="10%,*" border=5> <FRAME name="left" src="left.html"> <FRAME name=right" src="right.html"> </FRAMESET> </HTML> left.html <HTML> <BODY> left </BODY> </HTML> right.html <HTML> <BODY> right </BODY> </HTML> 13/27
3 절. HTTP 웹문서를전송하는프로토콜 HTTP: TCP 포트 80 번 요청과응답 동작원리 : 요청과응답 요청 HTTP 클라이언트가서버에요청을전송 요청메소드, URL, HTTP 버전과기타부가정보포함 응답 HTTP 서버가요청의결과인응답코드가포함된정보를회신 14/27
3 절. HTTP 요청과응답 비상태연결 [ 그림 14-7] 요청과응답이후, 연결이끊어지므로비상태프로토콜 15/27
3 절. HTTP 요청과응답 MIME 유사메시지 HTTP의요청, 응답메시지는 MIME 유사메시지구조로전송됨 요청메시지 [ 그림 14-8] 요청문 요청메소드 URL HTTP 버전 헤더 바디 16/27
3 절. HTTP 요청과응답 요청메시지 요청메소드의종류 GET: 클라이언트가서버에웹문서를요청 HEAD: 문서내용보다문서정보를요청 POST: 클라이언트가서버에정보전송 PUT: 클라이언트가서버에문서전송 17/27
3 절. HTTP 요청과응답 응답메시지 [ 그림 14-9] 상태문 HTTP 버전 상태코드 상태이름 헤더 바디 18/27
3 절. HTTP 요청과응답 응답메시지 상태코드의종류 200 OK: 요청이성공적으로수행 202 Accepted: 요청이수신되었으나, 즉각실행되지않고있음 400 Bad Request: 요청메시지의문법오류 401 Unauthorized: 요청의실행에필요한권한이없음 403 Forbidden: 요청이거부됨 404 Not Found: 원하는문서를찾을수없음 500 Internal Server Error: 서버에오류발생 501 Not Implemented: 요청을수행할수없음 19/27
3 절. HTTP HTTP 의동작과정 요청메시지 개요 HTTP 서버 : uu.ac.kr 요청메소드 : GET 요청문서의 URL: index.php HTTP 버전 : 1 메시지내용 20/27
3 절. HTTP HTTP 의동작과정 응답메시지 개요 상태문 : HTTP/1.1 200 OK 헤더정보 : 5 줄 바디정보 : <HTML> 로시작하는웹문서내용 메시지내용 HTTP/1.1 200 OK Date: Thu, 12 Feb 2009 06:29:38 GMT Server: Apache/1.3.29 (Unix) PHP/4.3.4RC3 X-Powered-By: PHP/4.3.4RC3 Transfer-Encoding: chunked Content-Type: text/html <HTML> <HEAD> <TITLE> 한국주식회사홈페이지 </TITLE> </HEAD> <FRAMESET rows = "100,*" BORDER = "0" frameborder = "NO"> 21/27
3 절. HTTP HTTP 의동작과정 시뮬레이션 HTTP 서버 : uu.ac.kr HTTP 클라이언트 [ 그림 14-10] kihyun.uu.ac.kr telnet 프로그램이대행 22/27
3 절. HTTP HTTP 의동작과정 시뮬레이션 [ 그림 14-11] 23/27
4 절. CGI 사용자가입력하는정보를처리하기위한구조 [ 그림 14-12] 양방향통신을지원 24/27
4절. CGI FORM 태그 사용자의입력을서버에전달 <FORM> 태그의속성 ACTION: 사용자입력을처리한 CGI 프로그램의 URL 주소 METHOD: 사용자데이터를넘기는방식 ENCTYPE: 데이터형식 <INPUT> 태그의속성 TEXT: 텍스트입력 PASSWORD: 암호입력 CHECKBOX: 체크박스 RADIO: 라디오버튼 SUBMIT: 입력허가 RESET: 입력취소 25/27
4 절. CGI FORM 태그 HTML 문서의예 [ 그림 14-13] <HTML> <HEAD><TITLE>INPUT 태그 </TITLE></HEAD> <BODY> <H1> 정보입력 </H1> <FORM action="test.cgi"> 이름 : <INPUT type="text" name="name" size=10> <BR> 암호 : <INPUT type="password" name="passwd" size=10> <BR> 전화 : <INPUT type="text" name="tel" size=15> <BR> 학과 : <INPUT type="text" name="dept" size=20 value=" 정보통신과 "> <BR> <BR><BR> <INPUT type="submit" value=" 승인 "> <INPUT type="reset" value=" 취소 "> </FORM> </BODY> </HTML> 26/27
IT CookBook, 쉽게배우는데이터통신과컴퓨터네트워크