PHÁT TRIỂN ỨNG DỤNG WEB · PDF fileBộ môn Mạng và Truyền thông Máy tính ... • Ứng dụng web ... (điều hướng, nhập dữ liệu,

1

Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN

E-mail: [email protected], [email protected]: 0987.257.504

Bài giảng

PHÁT TRIỂN ỨNG DỤNG WEB

2

Kiến trúc ứng dụng webBài 1

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

3

Nội dung

• Kiến trúc của ứng dụng Web• HTTP• URL• HTTP Request• Request methods• HTTP Response


4

Kiến trúc Web

Web Client/Browser

Web Server

IE, Firefox, Chrome, …

IIS, Apache, Tomcat, …

Yêu cầu

Đáp ứng

HTTP


5

Web Browser

Mã nguồn trang web được thểhiện bằngHTML, CSSjavascript Web Browser

Do Web Servergửi tới.

Trình diễn trên giao diện người dùng

•Gửi yêu cầu và nhận nội dung (mã nguồn HTML, CSS, javascript) trang web từ Web Server.•Thông dịch mã nguồn trang web và trình diễn kết quả trên giao diện người dùng.


6

Web Browsers


7

Web Server

Yêu cầu

Web Client

Web Server

Đáp ứng

•Nhận yêu cầu của Web Client, chuyển cho ứng dụng web hoặc App. Server•Nhận trang web từ ứng dụng web hoặc App. Server rồi gửi cho Web client.

HTTP


8

Web Servers, App Servers

TomcatApache

ASP, ASP.NET PHP JSP

Apache Tomcat


9

Phân loại web

• Tùy vào cách thức cung cấp nội dung trang Web của Web Server, ta có trang Web tĩnh hoặc động.

– Web tĩnh (static web): Trang web được lưu sẵn trong đĩa cứng (.htm, .html).

– Web động (dynamic web): Trang web được ứng dụng Web sinh ra khi có yêu cầu.

• Có nhiều công nghệ sinh web động như PHP, ASP, ASP.NET, JSP


10

Web tĩnh

*.htm, *.html


11

Web động


12

Ứng dụng web

• Web Server quản lý tất cả các ứng dụng web

• Các ứng dụng web được tổ chức theo nhóm ứng dụng (Application Pool)

• Một ứng dụng web sử dụng một cổng để giao tiếp với client (cổng mặc định là 80)

• Địa chỉ ứng dụng = địa chỉ máy (IP):số hiệu cổng = socket.


13

Tài nguyên của ứng dụng web

• Một ứng dụng web có các tài nguyên (tệp tài liệu, kịch bản, chương trình, …)

• Web Server – Application Pool 1

● Application 1– Resource 1– Resource 2

● Application 2● Application 3

– Application Pool 2● Application 4

• Địa chỉ của tài nguyên được xác định bằng URL.


14

URL: Uniform Resource Locator

• URL hay Định vị tài nguyên đồng nhất dùng để xác định vị trí (toàn cầu) của một tài nguyên trên Internetscheme://domain:port/path?query_string#bookmark

• Ví dụ http://uet.vnu.edu.vn:8080/daotao/Monhoc.aspx

?mamon=15&hanhdong=xem#mota

Địa chỉ Server

Tên tài nguyên

Cổng chạy ứng dụng web, mặc định là 80

Tên thư mục

Giao thức

Chuỗi truy vấn Điểm đánh dấu


15

HTTP (HyperText Transfer Protocol)

• HTTP là giao thức dùng để truyền siêu văn bản

• Không trạng thái: server không giữ thông tin về các lần yêu cầu trước của client.

• HTTP Request và HTTP Response…


16

HTTP Request

• Client gửi yêu cầu đến Server bằng một thông báo yêu cầu (http request)

• Một thông báo yêu cầu bao gồm một số dòng văn bản

– Dòng đầu tiên là dòng yêu cầu(request line) chứa ba thông số:

● Phương thức yêu cầu (request method): GET/ HEAD/POST/PUT/DELETE/…

● Đường dẫn trong URL● Phiên bản HTTP được sử dụng

– Các dòng tiếp theo chứa thông tin về các kiểu tệp, tập ký tự được chấp nhận, phiên bản trình duyệt, hệ điều hành sử dụng trên client, …


17

HTTP Request – Ví dụ

GET /Default.aspx HTTP/1.1accept: image/gif, image/jpeg,

image/png, *.*accept-charset: iso-8858-1, utf-8host: www.vnu.edu.vnaccept-language: enuser-agent: Internet Explorer/6.0

[en] (WinXP)


18

Request method: GET• GET là phương thức hay được sử dụng nhất để gửi

yêu cầu từ client đến server. Yêu cầu GET chỉ để nhận dữ liệu mà không gây ra hiệu ứng khác.

• Khi không chỉ rõ yêu cầu theo phương thức nào thì GET được sử dụng

• Với GET, – Các cặp tham số/giá trị được đưa vào chuỗi truy vấn

của URL

Ví dụ: http://www.uet.vnu.edu.vn/daotao/Monhoc.aspx?maMon=24&action=1

– Chiều dài URL có giới hạn nên số lượng tham số là hạn chế


19

Request method: POST

• POST là phương thức khác được sử dụng để gửi yêu cầu có chứa dữ liệu từ client đến server

• Với POST, – Các cặp tham số/giá trị được đưa vào

thân HTTP request.– Không giới hạn số lượng tham số


20

HTTP Response

• Dữ liệu do server gửi về cho client được định dạng bởi HTTP Response

• Một HTTP Response bao gồm– Dòng trạng thái (status line): Giao thức được dùng, số

trạng thái và giá trị trạng thái– Đầu đáp ứng (response header): Chứa chuỗi các cặp

tên/giá trị, – Dữ liệu thực sự: HTML, Javascript, css.


21

HTTP Response – Ví dụHTTP/1.1 200 OKDate: Sun, 27 Dec 2006 18:16:31 GMTServer: IIS (Win2000)Last-Modified: Tue, 22 Nov 2006 05:12:38 GMTEtag: d828b-371-376flb46”Accept-Ranges: bytesConnection: closeConnection-Type: text/html<!DOCTYPE HTML><HTML><HEAD><TITLE>

Đây là trang ví dụ</TITLE><BODY>

Xin chào tất cả các bạn.</BODY></HEAD></HTML>Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

CGI và API• Webserver không biên/phiên dịch và thực thi chương trình tạo web động

mà giao trách nhiệm đó cho các trình biên, phiên dịch trợ giúp• Nếu trình biên/phiên dịch là một module của web server thì giao tiếp giữa

web server và trình biên/phiên dịch được thực hiện thông qua API– Ví dụ Apache và mod_php, mod_python, mod_perl

• Nếu trình biên/phiên dịch không được chứa trong web server thì giao tiếp giữa web server và trình biên/phiên dịch được thực hiện qua Giao diện cổng chung (CGI – Common Gateway Interface)– Ví dụ Apache và ActivePerl


23

Tiếp theoTạo và quản trị ứng dụng web


Các khái niệm

• Trang web (Webpage): Một tài liệu HTML cùng các tài liệu hình ảnh, âm thanh, … được tham chiếu

• Tài nguyên web (Web resource): Trang web, tài liệu khác, chương trình, …

• Website: Hệ thống các trang web và tài nguyên web khác có liên quan với nhau

• World Wide Web (WWW, W3, Web): Là ứng dụng trên Internet cho phép duyệt hệ thống tất cả các website có thể truy cập qua Internet


Các khái niệm• Ứng dụng web (Web application): Ứng dụng tạo ra các trang web• Trình khách web (Web client): Ứng dụng tiêu thụ/sử dụng/khai thác

trang web• Trình duyệt web (Web browser): Web client hiển thị trang web trên giao

diện người dùng và cho phép người dùng tương tác (điều hướng, nhập dữ liệu, copy dữ liệu, lưu dữ liệu, …) trên giao diện

– Những web client không cung cấp giao diện người dùng sử dụng trang web cho mục đích khác như khai phá dữ liệu, tìm kiếm, …, Ví dụ web spider (crawler) là chương trình tự động đi theo các siêu liên kết để thu thập các tài liệu.

• Plugin: Thành phần phần mềm làm tăng các khả năng của trình duyệt như chạy video, applet, quét virus, …


Các khái niệm

• Trình phục vụ web (Web server): Ứng dụng cung cấp các trang web cho web client

• Trình phục vụ ứng dụng (Application server): Ứng dụng cung cấp các dịch vụ (ví dụ an ninh, cân bằng tải, …) cho ứng dụng khác


Các khái niệm

• Siêu văn bản (hypertext): Tập đối tượng (văn bản, hình ảnh, âm thanh, chương trình, …) có thể được tạo liên kết logic (còn gọi là siêu liên kết (hyperlink)) đến nhau.


Documents

PHÁT TRIỂN ỨNG DỤNG WEB · PDF fileBộ môn Mạng và Truyền thông Máy tính ... • Ứng dụng web ... (điều hướng, nhập dữ liệu,