웹 프로그래밍 기술 웹 활용 강좌 김 영 국 충남대학교 컴퓨터전공
목 차 웹 애플리케이션 개발 기술 개요 웹 프로그래밍의 분류 서버 사이드 프로그래밍 기술 클라이언트 사이드 프로그래밍 기술 고급 서버 사이드 프로그래밍 기술 웹 활용 강좌 웹 프로그래밍 기술
웹 애플리케이션 개발기술 CGI 프로그래밍 웹서버 API 프로그래밍 스크립트 프로그래밍 Perl, C, Shell Script 등 웹서버 API 프로그래밍 ISAPI, NSAPI 스크립트 프로그래밍 ASP, JSP, PHP 컴포넌트 + 스크립트 기반의 웹 에플리케이션 Active X, EJB 웹 활용 강좌 웹 프로그래밍 기술
플랫폼별 웹 애플리케이션 개발 환경 Microsoft 기반 자바 기반 리눅스 기반 플랫폼 독립적: Web Services HTML, DHTML, Internet Explorer, IIS, ASP, XML COM/DCOM, Active X 컴포넌트, MTS, .NET SQL Server 자바 기반 Servlet, JSP JavaBeans/EJB, EJB 컨테이너, J2EE 리눅스 기반 Apache, PHP CORBA MySQL, PostgresSQL, Oracle 플랫폼 독립적: Web Services 웹 활용 강좌 웹 프로그래밍 기술
웹 프로그래밍의 분류 Client side Programming Server side Programming ActiveX Controls (Visual C++ 또는 VB 등으로 작성) Java Applet JavaScript DHTML Server side Programming CGI (Perl, C, ShellScript 등) Java Servlet ASP (Active Server Page) JSP (Java Server Page) PHP (Personal Home Page Tools) 웹 활용 강좌 웹 프로그래밍 기술
Client side VS Server side 웹브라우저 HTTP 서버 - Server side 서버 페이지 요청 (JSP, ASP, PHP) 서버 페이지 결과 HTML 요청 HTML 응답 HTML & Client Script 컴파일 컴파일 & 실행 실행!! 웹 활용 강좌 웹 프로그래밍 기술
Client Side Technology ActiveX created by C++ or VB <OBJECT> tag를 통해 사용 MS에서 만들어졌으며, 넷스케이프에서는 지원 안함. Ncompass라는 Plug-in을 통해 사용 가능 Java Applet <Applet> tag를 통해 사용 사용자에 의해 바이트코드로 변환 이러한 바이트코드는 Java Enabled browser에서 번역 JavaScript Client side의 대표적 스크립트언어 (NC2.0 이상 IE 3.0 이상에서 작동) 웹브라우저에서 소스를 인터프리트하여 실행 자바와 닮긴 했지만 별개 웹 활용 강좌 웹 프로그래밍 기술
Server Side Technology ASP Platform dependent (Windows) IIS4.0이 배급되면서 더욱 발전 VB의 많은 부분을 웹에서 사용가능 Java Servlet 동적 웹페이지 구현을 위한 CGI를 자바로 구현 CGI의 단점을 보완하고, 자바의 장점을 활용 Platform independent 웹브라우저의 애플릿과 서버와의 통신을 위한 인터페이스로 주로 사용 JSP 자바코드 속에 HTML을 넣는 자바 서블릿의 한계 극복 HTML안에 자바 코드 삽입 소스 수정시 자동으로 서블릿으로 전환되어 수행되므로 이점에서 서블릿과 동일 웹 활용 강좌 웹 프로그래밍 기술
Server Side Technology 비교 (1) 성능면 ASP는 스크립트로 쓰여졌지만 일단 컴파일되면 CGI로 바뀌므로 CGI가 갖고 있는 여러 가지 문제점을 그대로 지님 ASP와 CGI가 성능면에서 가장 취약 PHP의 경우는 대체적으로 매우 뛰어난 속도 Servlet과 JSP는 JVM에 그 성능이 의존적 현재는 ASP나 CGI보다는 빠르지만 PHP보다는 느림 여러 미들웨어를 사용하거나 DB와의 많은 트랜잭션이 있는 경우는 Servlet과 JSP가 PHP에 앞섬 웹 활용 강좌 웹 프로그래밍 기술
Server Side Technology 비교 (2) 확장성면 ASP와 JSP가 우월 ASP는 수많은 컴포넌트가 제공되며 필요한 경우 VB, VC++ 등으로 원하는 컴포넌트를 제작해 기능 확장 가능 Servlet+JSP 방식은 자바가 제공하는 모든 기능을 자유롭게 사용할 수 있으며 코드의 재사용 등에서 탁월 JDBC를 사용하여 모든 데이터베이스와 똑같은 인터페이스로 데이터 교환이 가능한 점에서도 Servlet+JSP 방식이 뛰어난 확장성을 갖음 난이도 ASP나 PHP는 간단한 문법이므로 초보자도 쉽게 사용 가능 Servlet과 JSP는 자바를 알아야 한다는 전제 때문에 쉽게 다가서기 어려움. 웹 활용 강좌 웹 프로그래밍 기술
Server Side Script (1) 기존의 Client Side Script의 문제점을 개선 소스 공개 클라이언트에 따라서 실행 결과가 다를 수 있고, 버전에 따라 실행이 안 될 수도 있음. HTML 안에 Server에서 실행되는 스크립트 코드를 embed하여 사용하는 형식 클라이언트 버전 및 성능이 크게 중요하지 않음. Server와 Client에 업무를 분담. 클라이언트에는 HTML(소스에 포함된 HTML과 그것에 의해서 만들어진 상의 HTML)과 그 밖의 Client Side Script 만이 전송됨. JavaScript/Applet과 같이 클라이언트에서 실행되는 기존의 웹 관련 기술을 그대로 이용 가능. ASP, PHP, JSP 가 해당 웹 활용 강좌 웹 프로그래밍 기술
Server Side Script (2) 장점 (CGI와 같이 컴파일된 서버 프로그래밍에 비해) 웹 페이지 제작 및 테스트를 훨씬 더 빠르고 효과적으로 처리 가능 웹 기반 양방향성 어플리케이션을 보다 쉽고 빠르게 개발 동적으로 생성되는 어플리케이션의 로직 부분과 실제로 제공되는 페이지의 외양(appearance)의 분리 가능. 일반적인 HTML 기반 웹 페이지는 물론 XML 페이지도 제작 가능 웹 활용 강좌 웹 프로그래밍 기술
CGI(Common Gateway Interface)란? 웹 브라우저와 웹 서버 그리고, 응용 프로그램간의 인터페이스 The Common Gateway Interface (CGI) is a standard for interfacing external applications with information servers, such as HTTP or Web servers. : NCSA CGI 프로그램의 형태 Content-type : text/html <HTML> CGI를 수행한 결과 </HTML> 흔히 CGI는 CGI를 수행하는 외부 프로그램을 포함 웹 활용 강좌 웹 프로그래밍 기술
CGI 개념 CGI 정보 전달 방식 GET Method POST Method CGI 환경변수(QUERY_STRING)를 통한 입출력 $ENV(‘QUERY_STRING’) 데이터의 크기에 제한을 받음 입력 받는 변수 값이 URL에 나타나므로 보안에 불리, 부분적으로 손실의 위험이 존재 POST Method 표준입출력(Standard I/O)을 통한 입출력(요청 Packet의 Data부분을 통해 전달) read(STDIN,$QUERY_STRING, $ENV(‘ONTENT_STRING’)); 데이터의 크기에 제한을 받지 않음 입력 받는 변수 값이 URL에 나타나지 않으므로 보안에 유리 웹 활용 강좌 웹 프로그래밍 기술
CGI의 동작 (1) 웹 활용 강좌 웹 프로그래밍 기술
CGI의 동작 (2) 클라이언트(웹 브라우저)에서 서버로 TCP/IP 연결을 통해 데이터 요청한다. CGI 프로그램에서 실행 결과로 나오는 정보를 이용하여 동적인 HTML 문서를 만들어 서버로 출력이 전달된다. 적절한 MIME헤더를 갖고 서버가 클라이언트로 응답한 후, 연결이 해제 웹 활용 강좌 웹 프로그래밍 기술
CGI의 장단점 장점 단점 웹 서버의 기능 확장 웹 서버와 통신하기 위한 표준규약을 제공 서버 쪽에만 설치하므로 운영이 수월 URL을 요청할 때 CGI를 따로 요청할 필요가 없음. 동적인 서비스가 가능 단점 요청마다 프로세스를 생성하여 시스템에 부하 보안에 취약 앞뒤 서비스 연결을 거의 유지 못함 상태를 저장하거나 유지하지 못함 대화형 웹페이지 작성이 어려움 웹 활용 강좌 웹 프로그래밍 기술
VB Script의 개요 MS사가 Visual Basic 문법에 따라 제작 자바스크립트보다 배우기 쉬움. 객체지향언어가 아님. Active X와 연결하고, Active X 컨트롤 조작 가능 ASP에서 사용 가능해서 IIS에서 서버 측면의 스크립트로도 가장 많이 사용됨 클라이언트 스크립트로서는 인터넷 익스플로러에서만 동작하기 때문에 범용성에 문제가 있음. 웹 활용 강좌 웹 프로그래밍 기술
JavaScript의 개요 넷스케이프사와 SUN사가 공동으로 개발 브라우저에 의해 해석, 실행 스크립트 스타일 인터프리터 언어 HTML 문서에서 독립적으로 사용 => 사용자의 요구에 따른 적절한 대응 예) 사용자가 마우스를 어떤 이미지 위에 갖다 놓으면 이미지가 변하는 것 Dynamic HTML과 연동되어 웹 문서를 동적으로 만들어 냄 웹 활용 강좌 웹 프로그래밍 기술
프로그래머가 웹 브라우저가 사용하는 속성을 이용하게 해 준다. JavaScript의 특징 Built-in Object를 지원 HTML과 함께 사용 HTML과 함께 편집이 용이 실행시 객체 참조가 동적 CGI의 폼 형식과 결합시켜 사용가능 브라우저 인터프리터 방식 프로그래머가 웹 브라우저가 사용하는 속성을 이용하게 해 준다. 웹 활용 강좌 웹 프로그래밍 기술
JavaScript의 사용법 <Script> 태그 안에 정의되며 페이지가 읽혀진 후에 실행 <Script language = “JavaScript”> … </Script> 함수들은 화면의 이벤트에 의해 실행 “ *.js ” 확장자를 사용 주석 태그를 사용 <!-- ….. --> 따옴표(‘)는 겹따옴표(“)를 대신하여 쓸 수 있음 대소문자 구별 웹 활용 강좌 웹 프로그래밍 기술
JavaScript의 활용분야 CGI 연동시 사용자의 입력을 제어 브라우저내의 여러가지 기능을 조절 사용자에게 메시지 전달 Cookie를 이용한 페이지간의 데이터 이동 윈도우와 프레임의 생성 및 제어 자바와의 연동 웹 활용 강좌 웹 프로그래밍 기술
JavaScript의 기본 형식 1. <Script Language = “javaScript”> <!-- 자바 스크립트 코드 //--> </Script> 2. <Script Src = “xxx.js”> 웹 활용 강좌 웹 프로그래밍 기술
JavaScript의 간단한 예 화면에 글자를 출력하는 Script 만들기 Text Editor에서 다음을 입력 <HTML> <HEAD> <TITLE> 간단한 자바스크립트</TITLE> <SCRIPT> document.write("<I><B>이 곳은 Document객체의 Write 메소드를 사용하여 자바스크립트로 출력하였습니다.</I></B>") </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 웹 활용 강좌 웹 프로그래밍 기술
글자 출력을 위해서는 document 객체의 write method 이용. 출력될 문자열에 HTML tag를 포함시키면 tag가 적용되어 나타남 웹 활용 강좌 웹 프로그래밍 기술
ASP란? (1) ASP의 특징 ASP사용 환경 CGI의 서버에서 돌아가는 성질과 자바스크립트의 성질을 동시에 가짐 데이터베이스와 연동하는 프로그램을 작성하기가 쉬움 동시 접속자를 위해서 쓰레드로 동작하므로 서버의 부담이 적음 ASP사용 환경 ASP를 구동하기 위해서는 기본적으로 웹 서버를 가지고 있어야 한다. WinNT : IIS 4.0(Internet Information Server) Window 98 : Personal Web Server 웹 활용 강좌 웹 프로그래밍 기술
ASP란? (2) ASP문서가 클라이언트 웹 브라우저로 보여지는 과정 웹 활용 강좌 웹 프로그래밍 기술
ASP 파일 구성 기본 구성 HTML 태그 사이에 <%….%> 태그를 사용하여 서버에서 실행되는 스크립트를 기록 서버 측 스크립트 작성방법 (두 가지) <% 서버 스크립트 %> <Script language = “스크립트 타입” Runat=Server> …………… </Script> 웹 활용 강좌 웹 프로그래밍 기술
PHP3 소개 (1) PHP란? Example: HTML 문서에 PHP 코드 삽입 PHP는 HTML에 포함되는 스크립트 언어로서 작성된 PHP는 서버에 존재하고 서버에서 구동된다. PHP 코드를 HTML에 포함시키는 형태는 자바스크립트나 VBScript를 추가하는 것과 유사하다. Example: HTML 문서에 PHP 코드 삽입 <html><head><title>PHP 예제</title></head> <body> <?php echo "Hello! PHP world"; ?> </body></html> 웹 활용 강좌 웹 프로그래밍 기술
PHP3 소개 (2) PHP 코드는 Perl이나 C와 같은 다른 언어와 다르게 HTML을 출력하는데 많은 명령어가 필요 없다. HTML내에 하고자 하는 일(앞의 예제참조 : 한 줄의 문자열(“Hello! PHP world”) 출력)에 대한 스크립트를 적어 준다. PHP 코드는 특정한 시작(<?)과 끝(?>) 태그 사이에 들어가게 되는데 이 태그는 "PHP 모드"로 들어가거나 나오게 하는 것이다. PHP가 JavaScript나 VBScript와 구별되는 점은 PHP 코드가 클라이언트가 아닌 서버에서 실행된다는 점 웹 활용 강좌 웹 프로그래밍 기술
PHP3로 할 수 있는 작업들 PHP는 다음과 같은 작업을 할 수 있다. 1. CGI 프로그램이 할 수 있는 모든 작업들 2. 데이터베이스와의 연동 3. 네트워크 서비스 PHP는 CGI 프로그램에서 할 수 있는 것은 모두 가능. form data를 가져오고, 동적인 웹 페이지 작성, Cookie사용. 가장 강력한 부분은 데이터베이스와의 연동부분. PHP는 IMAP이나 SNMP, NNTP, POP3, HTTP 등의 프로토콜들을 사용해서 다른 서비스들에 대해 접근하여 데이터를 교환 가능. raw network 소켓을 사용하면, 그 외의 프로토콜들도 사용 가능 웹 활용 강좌 웹 프로그래밍 기술
PHP의 사용 이유 무료 (Open Source) Platform Independent 문법이 단순하고 쉽다. 간편하게 DB를 연동 빠른 수행 속도 웹 활용 강좌 웹 프로그래밍 기술
JavaServer Pages(JSP) Overview JSPs Look like standard HTML or XHTML Normally include HTML or XHTML markup Known as fixed-template data Used when content is mostly fixed-template data Small amounts of content generated dynamically Servlets Used when small amount of content is fixed-template data Most content generated dynamically 웹 활용 강좌 웹 프로그래밍 기술
A Simple JavaServer Page Example Simple JSP example Demonstrates Fixed-template data (XHTML markup) Creating a Java object (java.util.Date) Automatic conversion of JSP expression to a String meta element to refresh Web page at specified interval First invocation of clock.jsp Notice the delay while: JSP container translates the JSP into a servlet JSP container compiles the servlet JSP container executes the servlet Subsequent invocations should not experience the same delay 웹 활용 강좌 웹 프로그래밍 기술
meta element refreshes the Web page every 60 seconds Clock.jsp (1 of 2) meta element refreshes the Web page every 60 seconds
Clock.jsp (2 of 2) Creates Date object that is converted to a String implicitly and displayed in paragraph (p) element
Clock.jsp