1 / 30

웹 프로그래밍의 이해

웹 프로그래밍의 이해. JSP 와 Ajax 의 소개와 이해 2002122189 이강렬. 개 요. 웹 프로그래밍이란 ? 동적 웹페이지의 이점 정적페이지와 동적페이지의 비교 Server Side 웹 프로그래밍 Server Side 웹 프로그래밍 원리 JSP 의 소개와 이해 Client Side 웹 프로그래밍 Client Side 웹 프로그래밍 원리 Ajax 의 소개와 이해. 웹 프로그래밍이란 ?. 웹을 기반으로 실행되는 프로그램을 개발하는 것

natasha-delis
Download Presentation

웹 프로그래밍의 이해

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 웹 프로그래밍의 이해 JSP와 Ajax의 소개와 이해 2002122189 이강렬

  2. 개 요 • 웹 프로그래밍이란? • 동적 웹페이지의이점 • 정적페이지와동적페이지의 비교 • Server Side 웹 프로그래밍 • Server Side 웹 프로그래밍 원리 • JSP 의소개와 이해 • ClientSide 웹 프로그래밍 • Client Side 웹 프로그래밍 원리 • Ajax의 소개와 이해

  3. 웹 프로그래밍이란? • 웹을 기반으로 실행되는 프로그램을 개발하는 것 • 웹은 Server-Client 모델로 이루어져 있음 • 웹 페이지는 정적페이지와 동적 페이지로 분류 • 웹 프로그래밍의 종류는 웹프로그래밍 언어에 따라 분류 • 기본 프로그래밍 언어 : HTML • Server용 프로그래밍 언어 : JSP(자바), ASP(Vbscript) 등 • Client 용 프로그래밍 언어 : Javascript, Vbscript등 • 최근 Javascript와 XML을 이용한 Ajax 가 화두

  4. 정적페이지와동적페이지의 비교 • 정적 페이지는 Server가 보내준 page 그대로를 사용자가 보는 것 • 이 page는 언제 어디서나 누구에게나 같은 page 사용자 Web browser Web Sever Client Web page Web page

  5. 정적페이지와동적페이지의 비교 • 동적 페이지는 요청한 페이지가 Server 에서 사용자의 need에 맞게 변환한 페이지 또는 client 에서 변환한 페이지 • 실제 1개의 페이지로 사용자에 따라, 시간에 따라, 장소에 따라 다른 페이지로 변경 가능 사용자 Web browser Web Sever Client Web page Web page

  6. 동적 웹페이지의이점 • 클라이언트는 각각 자신에게 필요한 페이지를 요청 • 서버는 각 클라이언트가 요청한 페이지를 가져야 함 요청 Server Client A Data Base Server Web Sever If(a) A 맞는 코드 Else if(b) B 맞는 코드 Else if (c) C 맞는 코드 Client A.htm 응답 Client B.htm Client B Client C.htm Client C

  7. Server Side 웹 프로그래밍 • Client 가 Server에 Web page 요청시Server는 프로그램 실행 Client에게 맞는 HTML형태의 Web page를 변환 생성 후 응답 • Client 는 사용자 상황에 맞는 Web page를 받을 수 있음 • Server에는 Web page를 변환 할수 있는 프로그램 실행 • 프로그램 실행 방식에 따라 (구)CGI 방식과 Application 방식으로 구분 • Server Side 웹 프로그래밍 Application server 방식이라고 함 • Web page 수정시 전체 페이지를 리로딩해야함

  8. Server Side 웹프로그래밍의 구성 Server Client Web Sever Web Application Server Request HTML,ASP, JSP,PHP …. Client Client Response HTML Client DataBase Server DB driver Client Client

  9. Application Server 동작 순서(1) Server Client Web Sever Request Client Client Client (1) 클라이언트가 URL을 통해 서버에 page를 요청한다 Client Client

  10. Application Server 동작 순서(2) Server Web Application server Web Sever (2)요청한 Page가 동적page면 Web Server는WAS에게 page 변환을 요청한다

  11. Application Server 동작 순서(3) (3)WAS은 해당 모듈을 실행하고 ,필요한 데이터를 DB에서 사용한다 Server Web Application server DB Driver DB Web Sever 각 프로그램에 따라 필요한 모듈

  12. Application Server 동작 순서(4) Server Web Application server Return Output DB Web Sever (4)WAS 실행결과를 HTML 코드로 변환하여 Web Server에 넘겨준다 각 프로그램에 따라 필요한 모듈

  13. Application Server 동작 순서(5) Server Web Application server Client (5)HTML로 변환된 Page를 Client에 넘겨준다. DB Client Client Response (HTML) Web Sever Client 각 프로그램에 따라 필요한 모듈 Client Client

  14. JSP의 소개 • JSP(Java Server Pages)의 약자로 자바를 기반으로 웹페이지의 내용과 모양을 제어하는 기술 • 플랫폼에 상관없이 사용가능 • Java의깊은 이해없이 구현가능 • 서블릿/EJB 등의 엔터프라이즈 기술들과 잘 융합

  15. JSP의 소개 Server Client Web Sever Web Application Server 톰켓 JVM Request JSP Request HTML,ASP, JSP Client Client Response HTML Client DataBase Server DB driver JDBC Client Client

  16. Client Side 웹 프로그래밍 • Client 측에서 프로그램 실행 • 서버의 부하를 줄일수 있음 • Page의 요청/응답 없이 Client 자체에서 파악후변환 가능 • 항상 전체페이지가 로딩되어야 하는 불리함 해소 가능 • Client측에서 프로그램을 받아서 실행하거나, 웹페이지에 프로그램 코드가 들어가 있어 보안에 취약 • 각브라우저에 따라 다른 결과 발생 • JavaScript와 XML을 이용한 Ajax 기술이 화두

  17. Clientside 웹 프로그래밍 구성 Web page ….. 프로그램 또는 프로그램 코드 …… Client Web Browser Web Sever Web Browser 가 프로그램 코드를 읽어 실행 또는 Client 에 프로그램 실행 Web page

  18. Ajax의 소개 • Ajax(Asynchronous JavaScript and XML)의 준말 • 비동기식으로Javascript를 이용 페이지 리로딩 없이 필요한 데이터를 얻어내는 기법 • 웹 서버의 응답결과가 Page가 아닌 XML 또는 단순 텍스트 • 다른 Client side 방식과 차이점 • 브라우저가 아닌 XMLHttpRequest객체가 웹서버와통신

  19. Ajax의 소개 • Ajax의 장점 • 페이지 이동없이 고속 화면 전환 가능 • 서버처리 기다리지 않고, 비동기 요청 가능 • 수신 데이터량 감소, 클라이언트 처리 위임 • Ajax의 단점 • Ajax를쓸수없는 브라우저에 대한 문제 • Http 클라이언트 기능 한정 • Script 처리로 보안상의 문제 • 지원 charset이 한정 • 요청을 남발시 역으로 서버 부하 가중

  20. Ajax의 구성 • XMLHttpRequest : 웹 서버와 통신을 담당 • DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 조작 할때 사용 • CSS : 글자색, 배경색, 위체 투명도 등 UI와 관련된 부분을 담당 • Javascript : 객체 기반의 스트립트 언어 interactive 한 웹페이지 작성 가능 • XML : 화면구성 데이터를 저장,DB역활

  21. Ajax의 구성 • DOM의 기능 <DOM TREE> document <html> <head> <title>돔변환 </title> </head> <body> <h1> 돔변환문서</h1> <p> 페이지 내용 </p> </body> </html> DOM 변환 html head body title h1 p “ 돔변환” “ 돔변환 문서” “ 내용입니다”

  22. Ajax의 구성 <html> <style type='text/css'> h1{color : blue} </style> <head> <title>CSS 적용 </title> </head> <body> <h1> 돔변환문서</h1> <p> 페이지 내용 </p> </body> </html> • CSS의 기능 <html> <head> <title>CSS 적용 </title> </head> <body> <h1> 돔변환문서</h1> <p> 페이지 내용 </p> </body> </html> CSS 적용

  23. Ajax의 구동 방식 Client XML Http Request Web Browser Web Sever Request data Javascript &DOM Web page (1) Javascript가 코딩되어있는 web page에서 필요한 data를 XMLHttpRequest에 요청 XML 문서

  24. Ajax의 구동 방식 Client XML Http Request Web Browser Web Sever Request data Javascript &DOM Web page (2) XMLHttpRequest가 웹서버에 data를 요청 XML 문서

  25. Ajax의 구동 방식 Data 처리 Server Web Sever Web Application Server (3) Web Sever는 WAS와 DB를 사용 하여 필요한 data를 추출 한다. DataBase Server

  26. Ajax의 구동 방식 Client XML Http Request Web Browser Web Sever Response data Javascript &DOM Web page (4) XMLHttpRequest에게 data를 준다 XML 문서

  27. Ajax의 구동 방식 Client XML Http Request Web Browser Web Sever Response data Javascript &DOM Web page (5) XMLHttpRequest가 데이터를 전해 주면 Javascript와 DOM은 알맞게 웹페이지를 변환 시킨다. XML 문서

  28. Ajax의 구동 방식 Client XML Http Request Web Browser Web Sever Javascript &DOM Web page (6) 새로 얻은 데이터를 이용 하여 기존의 웹 페이지를 업데이트 시킨다. XML 문서

  29. 시 현

  30. 감사합니다 - Q & A-

More Related