웹 프로그래밍의  이해
This presentation is the property of its rightful owner.
Sponsored Links
1 / 30

웹 프로그래밍의 이해 PowerPoint PPT Presentation


  • 147 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


6102728

웹 프로그래밍의 이해

JSP와 Ajax의 소개와 이해

2002122189

이강렬


6102728

개 요

  • 웹 프로그래밍이란?

  • 동적 웹페이지의이점

    • 정적페이지와동적페이지의 비교

  • Server Side 웹 프로그래밍

    • Server Side 웹 프로그래밍 원리

    • JSP 의소개와 이해

  • ClientSide 웹 프로그래밍

    • Client Side 웹 프로그래밍 원리

  • Ajax의 소개와 이해


6102728

웹 프로그래밍이란?

  • 웹을 기반으로 실행되는 프로그램을 개발하는 것

  • 웹은 Server-Client 모델로 이루어져 있음

  • 웹 페이지는 정적페이지와 동적 페이지로 분류

  • 웹 프로그래밍의 종류는 웹프로그래밍 언어에 따라 분류

    • 기본 프로그래밍 언어 : HTML

    • Server용 프로그래밍 언어 : JSP(자바), ASP(Vbscript) 등

    • Client 용 프로그래밍 언어 : Javascript, Vbscript등

      • 최근 Javascript와 XML을 이용한 Ajax 가 화두


6102728

정적페이지와동적페이지의 비교

  • 정적 페이지는 Server가 보내준 page 그대로를 사용자가 보는 것

  • 이 page는 언제 어디서나 누구에게나 같은 page

사용자

Web browser

Web

Sever

Client

Web page

Web page


6102728

정적페이지와동적페이지의 비교

  • 동적 페이지는 요청한 페이지가 Server 에서 사용자의 need에 맞게 변환한 페이지 또는 client 에서 변환한 페이지

  • 실제 1개의 페이지로 사용자에 따라, 시간에 따라, 장소에 따라 다른 페이지로 변경 가능

사용자

Web browser

Web

Sever

Client

Web page

Web page


6102728

동적 웹페이지의이점

  • 클라이언트는 각각 자신에게 필요한 페이지를 요청

  • 서버는 각 클라이언트가 요청한 페이지를 가져야 함

요청

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


Server side

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 수정시 전체 페이지를 리로딩해야함


Server side1

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


Application server 1

Application Server 동작 순서(1)

Server

Client

Web

Sever

Request

Client

Client

Client

(1) 클라이언트가 URL을 통해 서버에 page를 요청한다

Client

Client


Application server 2

Application Server 동작 순서(2)

Server

Web

Application server

Web

Sever

(2)요청한 Page가 동적page면 Web Server는WAS에게 page

변환을 요청한다


Application server 3

Application Server 동작 순서(3)

(3)WAS은

해당 모듈을

실행하고 ,필요한 데이터를 DB에서 사용한다

Server

Web

Application server

DB

Driver

DB

Web

Sever

각 프로그램에 따라 필요한 모듈


Application server 4

Application Server 동작 순서(4)

Server

Web

Application server

Return Output

DB

Web

Sever

(4)WAS 실행결과를 HTML 코드로 변환하여 Web Server에 넘겨준다

각 프로그램에 따라 필요한 모듈


Application server 5

Application Server 동작 순서(5)

Server

Web

Application server

Client

(5)HTML로 변환된 Page를 Client에

넘겨준다.

DB

Client

Client

Response

(HTML)

Web

Sever

Client

각 프로그램에 따라 필요한 모듈

Client

Client


6102728

JSP의 소개

  • JSP(Java Server Pages)의 약자로 자바를 기반으로 웹페이지의 내용과 모양을 제어하는 기술

  • 플랫폼에 상관없이 사용가능

  • Java의깊은 이해없이 구현가능

  • 서블릿/EJB 등의 엔터프라이즈 기술들과 잘 융합


6102728

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


Client side

Client Side 웹 프로그래밍

  • Client 측에서 프로그램 실행

    • 서버의 부하를 줄일수 있음

  • Page의 요청/응답 없이 Client 자체에서 파악후변환 가능

    • 항상 전체페이지가 로딩되어야 하는 불리함 해소 가능

  • Client측에서 프로그램을 받아서 실행하거나, 웹페이지에 프로그램 코드가 들어가 있어 보안에 취약

  • 각브라우저에 따라 다른 결과 발생

  • JavaScript와 XML을 이용한 Ajax 기술이 화두


Client side1

Clientside 웹 프로그래밍 구성

Web page

…..

프로그램

또는

프로그램 코드

……

Client

Web

Browser

Web

Sever

Web Browser 가 프로그램 코드를 읽어 실행 또는 Client 에 프로그램 실행

Web page


6102728

Ajax의 소개

  • Ajax(Asynchronous JavaScript and XML)의 준말

  • 비동기식으로Javascript를 이용 페이지 리로딩 없이 필요한 데이터를 얻어내는 기법

    • 웹 서버의 응답결과가 Page가 아닌 XML 또는 단순 텍스트

  • 다른 Client side 방식과 차이점

    • 브라우저가 아닌 XMLHttpRequest객체가 웹서버와통신


6102728

Ajax의 소개

  • Ajax의 장점

    • 페이지 이동없이 고속 화면 전환 가능

    • 서버처리 기다리지 않고, 비동기 요청 가능

    • 수신 데이터량 감소, 클라이언트 처리 위임

  • Ajax의 단점

    • Ajax를쓸수없는 브라우저에 대한 문제

    • Http 클라이언트 기능 한정

    • Script 처리로 보안상의 문제

    • 지원 charset이 한정

    • 요청을 남발시 역으로 서버 부하 가중


6102728

Ajax의 구성

  • XMLHttpRequest : 웹 서버와 통신을 담당

  • DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 조작 할때 사용

  • CSS : 글자색, 배경색, 위체 투명도 등 UI와 관련된 부분을 담당

  • Javascript : 객체 기반의 스트립트 언어 interactive 한 웹페이지 작성 가능

  • XML : 화면구성 데이터를 저장,DB역활


6102728

Ajax의 구성

  • DOM의 기능

<DOM TREE>

document

<html>

<head>

<title>돔변환 </title>

</head>

<body>

<h1> 돔변환문서</h1>

<p> 페이지 내용 </p>

</body>

</html>

DOM 변환

html

head

body

title

h1

p

“ 돔변환”

“ 돔변환

문서”

“ 내용입니다”


6102728

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 적용


6102728

Ajax의 구동 방식

Client

XML

Http

Request

Web

Browser

Web

Sever

Request

data

Javascript

&DOM

Web page

(1) Javascript가 코딩되어있는 web page에서 필요한 data를 XMLHttpRequest에 요청

XML 문서


6102728

Ajax의 구동 방식

Client

XML

Http

Request

Web

Browser

Web

Sever

Request

data

Javascript &DOM

Web page

(2) XMLHttpRequest가 웹서버에 data를 요청

XML 문서


6102728

Ajax의 구동 방식

Data 처리

Server

Web Sever

Web

Application

Server

(3) Web Sever는 WAS와 DB를 사용 하여 필요한 data를 추출 한다.

DataBase

Server


6102728

Ajax의 구동 방식

Client

XML

Http

Request

Web

Browser

Web

Sever

Response

data

Javascript &DOM

Web page

(4) XMLHttpRequest에게 data를 준다

XML 문서


6102728

Ajax의 구동 방식

Client

XML

Http

Request

Web

Browser

Web

Sever

Response

data

Javascript

&DOM

Web page

(5) XMLHttpRequest가 데이터를 전해 주면 Javascript와 DOM은 알맞게 웹페이지를

변환 시킨다.

XML 문서


6102728

Ajax의 구동 방식

Client

XML

Http

Request

Web

Browser

Web

Sever

Javascript

&DOM

Web page

(6) 새로 얻은 데이터를 이용 하여 기존의 웹 페이지를 업데이트 시킨다.

XML 문서


6102728

시 현


6102728

감사합니다

- Q & A-


  • Login