Bài giảng
Công nghệ Web và Dịch vụ trực tuyến
Giới thiệu môn học và các khái niệm cơ bản
Bài giảng
Công nghệ Web và Dịch vụ trực tuyến
Giới thiệu môn học và các khái niệm cơ bản
Giảng viên: TS. Tạ Tuấn Anh
,
Mục tiêu học phần
Làm chủ công nghệ và có thể sử dụng một ngôn
ngữ lập trình như JSP, ASP, PHP để phát triển
ứng dụng web theo mô hình 3 lớp;
Nắm vững các kiến thức về xây dựng các dịch vụ
dữ liệu dựa trên nền tảng công nghệ web hiện
đang thịnh hành như XML, Web Service;
Hiểu rõ để có thể thiết kế và phát triển ứng dụng
web theo các mô hình của hệ quản trị nội dụng
(CMS), cổng thông tin (Portal), hay các ứng dụng
điện tử (eCommerce, eLearning, eGoverment,…).
Làm chủ công nghệ và có thể sử dụng một ngôn
ngữ lập trình như JSP, ASP, PHP để phát triển
ứng dụng web theo mô hình 3 lớp;
Nắm vững các kiến thức về xây dựng các dịch vụ
dữ liệu dựa trên nền tảng công nghệ web hiện
đang thịnh hành như XML, Web Service;
Hiểu rõ để có thể thiết kế và phát triển ứng dụng
web theo các mô hình của hệ quản trị nội dụng
(CMS), cổng thông tin (Portal), hay các ứng dụng
điện tử (eCommerce, eLearning, eGoverment,…).
Bài giảng Công nghệ Web và dịch vụ trực tuyến
2
Các nội dung chính
Kiến trúc ứng dụng web
Các công nghệ web
Các framework lập trình web
Ngôn ngữ dữ liệu web
Dịch vụ web
Các framework ứng dụng
Quản trị nội dung CMS
Cổng thông tin điện tử
Các mô hình ứng dụng trực tuyến
eLearning
eCommerce
eGoverment
Kiến trúc ứng dụng web
Các công nghệ web
Các framework lập trình web
Ngôn ngữ dữ liệu web
Dịch vụ web
Các framework ứng dụng
Quản trị nội dung CMS
Cổng thông tin điện tử
Các mô hình ứng dụng trực tuyến
eLearning
eCommerce
eGoverment
Bài giảng Công nghệ Web và dịch vụ trực tuyến
3
Sự phát triển của web
Bài giảng Công nghệ Web và dịch vụ trực tuyến
4
Web là gì?
Hệ thống thông tin toàn cầu được đề xuất bởi Tim
Berners-Lee ban đầu được xây dựng cơ bản trên
3 thành phần chính
Định danh tài nguyên URL
Tài nguyên siêu văn bản HTML
Giao thức trao đổi dữ liệu siêu văn bản HTTP
Chủ yếu hoạt động trên mô hình client-server với
Máy chủ web (server): Apache, IIS,…
Trình duyệt (client): IE, Firefox, Chrome,…
Hệ thống thông tin toàn cầu được đề xuất bởi Tim
Berners-Lee ban đầu được xây dựng cơ bản trên
3 thành phần chính
Định danh tài nguyên URL
Tài nguyên siêu văn bản HTML
Giao thức trao đổi dữ liệu siêu văn bản HTTP
Chủ yếu hoạt động trên mô hình client-server với
Máy chủ web (server): Apache, IIS,…
Trình duyệt (client): IE, Firefox, Chrome,…
Bài giảng Công nghệ Web và dịch vụ trực tuyến
5
Định danh tài nguyên
URI (Uniform Resource Identifier) gồm
URL (Uniform Resource Locator)
URN (Uniform Resource Name)
URL định danh tài nguyên theo vị trí truy cập
URL = scheme + host + path
Eg. /> URL thay đổi khi vị trí thay đổi. Có thể sử dụng thêm
dịch vụ PURL. Ví dụ
URL định danh tài nguyên không theo vị trí
URN = scheme + namespace + identifier
Eg. URN:ISBN:1234567890
URI (Uniform Resource Identifier) gồm
URL (Uniform Resource Locator)
URN (Uniform Resource Name)
URL định danh tài nguyên theo vị trí truy cập
URL = scheme + host + path
Eg. /> URL thay đổi khi vị trí thay đổi. Có thể sử dụng thêm
dịch vụ PURL. Ví dụ
URL định danh tài nguyên không theo vị trí
URN = scheme + namespace + identifier
Eg. URN:ISBN:1234567890
Bài giảng Công nghệ Web và dịch vụ trực tuyến
6
Ngôn ngữ đánh dấu siêu văn bản
HTML (Hyper Text Markup Language)
Rich Text = văn bản có định dạng
Hyper Text là văn bản có định dạng đồng thời có thể
chèn thêm hình ảnh và các đường dẫn liên kết
Markup Language là ngôn ngữ văn bản có cấu trúc
thông qua sử dụng các thẻ đánh dấu
Ví dụ HTML
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML (Hyper Text Markup Language)
Rich Text = văn bản có định dạng
Hyper Text là văn bản có định dạng đồng thời có thể
chèn thêm hình ảnh và các đường dẫn liên kết
Markup Language là ngôn ngữ văn bản có cấu trúc
thông qua sử dụng các thẻ đánh dấu
Ví dụ HTML
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Bài giảng Công nghệ Web và dịch vụ trực tuyến
7
Các thẻ cấu trúc thường dùng
Phân đoạn văn bản
<h1>, <h2>, … <p>
Định dạng font chữ
<b>, <i>,<u>
Danh sách
<ol>, <ul>,<li>
Bảng
<table>, <tr>,<td>
Hình ảnh
<img>
Liên kết
<a href="…">
Phân đoạn văn bản
<h1>, <h2>, … <p>
Định dạng font chữ
<b>, <i>,<u>
Danh sách
<ol>, <ul>,<li>
Bảng
<table>, <tr>,<td>
Hình ảnh
<img>
Liên kết
<a href="…">
Bài giảng Công nghệ Web và dịch vụ trực tuyến
8
CSS
CSS = Cascading Style Sheets là ngôn ngữ bổ
sung cho HTML để định tách định dạng hiển thị ra
khỏi nội dung văn bản
Định nghĩa cách thức trình bày cho các cấu trúc của
văn bản
Cho phép nhiều cách trình bày khác nhau cho cùng
một nội dung
Ví dụ:
body { background-color:#d0e4fe; }
h1 { color:orange; text-align:center; }
p { font-family:"Times New Roman"; font-size:20px; }
CSS = Cascading Style Sheets là ngôn ngữ bổ
sung cho HTML để định tách định dạng hiển thị ra
khỏi nội dung văn bản
Định nghĩa cách thức trình bày cho các cấu trúc của
văn bản
Cho phép nhiều cách trình bày khác nhau cho cùng
một nội dung
Ví dụ:
body { background-color:#d0e4fe; }
h1 { color:orange; text-align:center; }
p { font-family:"Times New Roman"; font-size:20px; }
Bài giảng Công nghệ Web và dịch vụ trực tuyến
9
HTTP
Hyper Text Transfer Protocol
HTTP Request luôn được khởi tạo bởi client
HTTP Response được trả lời cho mỗi request của
client.
Sử dụng giao thức TCP trong trao đổi dữ liệu
Giao thức dạng phi trạng thái
Version HTTP/1.1
HTTPS là giao thức mã hóa dữ liệu của HTTP dựa
trên SSL (Socket Secure Layer)
Hyper Text Transfer Protocol
HTTP Request luôn được khởi tạo bởi client
HTTP Response được trả lời cho mỗi request của
client.
Sử dụng giao thức TCP trong trao đổi dữ liệu
Giao thức dạng phi trạng thái
Version HTTP/1.1
HTTPS là giao thức mã hóa dữ liệu của HTTP dựa
trên SSL (Socket Secure Layer)
Bài giảng Công nghệ Web và dịch vụ trực tuyến
10
Ví dụ một request
GET / HTTP/1.1
Host: www.vub.ac.be
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1.3)
Gecko/20090824 Firefox/3.5.3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
GET / HTTP/1.1
Host: www.vub.ac.be
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1.3)
Gecko/20090824 Firefox/3.5.3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Bài giảng Công nghệ Web và dịch vụ trực tuyến
11
Ví dụ một response
HTTP/1.1 200 OK
Date: Wed, 30 Sep 2009 13:01:41 GMT
Server: Apache/1.3.33 (Unix) PHP/5.2.8
X-Powered-By: PHP/5.2.8
Keep-Alive: timeout=15, max=1000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" InstanceBegin
template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" >
<head> <title>Vrije Universiteit Brussel</title> <link rel="shortcut icon"
href="/favicon.ico" type="image/x-icon" /> </html>
HTTP/1.1 200 OK
Date: Wed, 30 Sep 2009 13:01:41 GMT
Server: Apache/1.3.33 (Unix) PHP/5.2.8
X-Powered-By: PHP/5.2.8
Keep-Alive: timeout=15, max=1000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" InstanceBegin
template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" >
<head> <title>Vrije Universiteit Brussel</title> <link rel="shortcut icon"
href="/favicon.ico" type="image/x-icon" /> </html>
Bài giảng Công nghệ Web và dịch vụ trực tuyến
12
Cấu trúc message
Gồm 3 phần
Dòng bắt đầu
Phần header
Nội dung (body)
Dòng bắt đầu của request chứa câu lệnh yêu cầu
GET, POST, PUT, DELETE,…
Dòng bắt đầu của response luôn chứa mã kết quả
200-299: thành công (vd., 200 = OK)
400-499: lỗi phía client (vd., 404 = Not Found)
500-599: lỗi phía server (vd., 503 = Service
Unavailable)
Gồm 3 phần
Dòng bắt đầu
Phần header
Nội dung (body)
Dòng bắt đầu của request chứa câu lệnh yêu cầu
GET, POST, PUT, DELETE,…
Dòng bắt đầu của response luôn chứa mã kết quả
200-299: thành công (vd., 200 = OK)
400-499: lỗi phía client (vd., 404 = Not Found)
500-599: lỗi phía server (vd., 503 = Service
Unavailable)
Bài giảng Công nghệ Web và dịch vụ trực tuyến
13
Một số trường header
Accept
Định nghĩa MIME type chấp nhận đối với client
User-Agent
Loại client
Keep-Alive (HTTP/1.0) and Persistent (HTTP/1.1)
Mỗi request tương ứng với một kết nối. Có thể yêu cầu giữ kết nối
để tăng cường hiệu năng hệ thống
Content-Type
Kiểu dữ liệu MIME type trong nội dung
If-Modified-Since
Yêu cầu chỉ trả về dữ liệu nếu có sự thay đổi mới. Sự dụng cơ chế
cache để tăng cường hiệu năng hệ thống
Accept
Định nghĩa MIME type chấp nhận đối với client
User-Agent
Loại client
Keep-Alive (HTTP/1.0) and Persistent (HTTP/1.1)
Mỗi request tương ứng với một kết nối. Có thể yêu cầu giữ kết nối
để tăng cường hiệu năng hệ thống
Content-Type
Kiểu dữ liệu MIME type trong nội dung
If-Modified-Since
Yêu cầu chỉ trả về dữ liệu nếu có sự thay đổi mới. Sự dụng cơ chế
cache để tăng cường hiệu năng hệ thống
Bài giảng Công nghệ Web và dịch vụ trực tuyến
14
MIME Types
Định nghĩa loại nội dung dữ liệu được biểu diễn dưới dạng
chuỗi ASCII
Toplevel / SubType
Ví dụ các định dạng thông dụng
text/plain
text/html
image/jpeg
application/pdf
Phân biệt giữa MIME Type và phương thức mã hóa dữ liệu
7bit
quoted-printable
base64
Định nghĩa loại nội dung dữ liệu được biểu diễn dưới dạng
chuỗi ASCII
Toplevel / SubType
Ví dụ các định dạng thông dụng
text/plain
text/html
image/jpeg
application/pdf
Phân biệt giữa MIME Type và phương thức mã hóa dữ liệu
7bit
quoted-printable
base64
Bài giảng Công nghệ Web và dịch vụ trực tuyến
15
Bài tập lập trình
Tìm hiểu và lập trình mô phỏng ứng dụng web
server để có thể trả về kết quả cho browser như
sau:
http://localhost:8080/html : trả về một file html có nội
dung tùy ý
http://localhost:8080/jpeg : trả về một ảnh jpeg để hiện
thị trên browser
http://localhost:8080/mjpeg: trả về một video dạng
motion jpeg để hiển thị trên browser
Tìm hiểu và lập trình mô phỏng ứng dụng web
server để có thể trả về kết quả cho browser như
sau:
http://localhost:8080/html : trả về một file html có nội
dung tùy ý
http://localhost:8080/jpeg : trả về một ảnh jpeg để hiện
thị trên browser
http://localhost:8080/mjpeg: trả về một video dạng
motion jpeg để hiển thị trên browser
Bài giảng Công nghệ Web và dịch vụ trực tuyến
16
Một số khái niệm
Cache
Lưu nội dung đã truy cập tại client để tránh việc download nhiều
lần một nội dung
Cookie
Cho phép server thực hiện lưu dữ liệu trên client và có thể đọc
lại trong từng request
Session
Cho phép server quản lý phiên kết nối cho mỗi browser.
Proxy
Không gửi request trực tiếp tới server xử lý mà thông qua một
máy chủ trung gian
Cache
Lưu nội dung đã truy cập tại client để tránh việc download nhiều
lần một nội dung
Cookie
Cho phép server thực hiện lưu dữ liệu trên client và có thể đọc
lại trong từng request
Session
Cho phép server quản lý phiên kết nối cho mỗi browser.
Proxy
Không gửi request trực tiếp tới server xử lý mà thông qua một
máy chủ trung gian
Bài giảng Công nghệ Web và dịch vụ trực tuyến
17
Công nghệ web 2.0
Bài giảng Công nghệ Web và dịch vụ trực tuyến
18
Blog và Mạng xã hội
Bài giảng Công nghệ Web và dịch vụ trực tuyến
19
Công nghệ Web ngữ nghĩa
Bài giảng Công nghệ Web và dịch vụ trực tuyến
20
Kiến trúc web ngữ nghĩa
Bài giảng Công nghệ Web và dịch vụ trực tuyến
21
Các công nghệ lập trình
Bài giảng Công nghệ Web và dịch vụ trực tuyến
22
Phương pháp học tập
Lý thuyết và bài tập trên lớp
Mô hình, phương pháp phát triển các ứng dụng web
Các framework lập trình cơ bản: PHP. Java
Công nghệ xử lý dữ liệu web: XML, web service
Các ứng dụng cơ bản: CMS, Portal,…
Bài tập lớn lập trình theo nhóm 4 người (bắt buộc)
Xây dựng một CMS mini, xây dựng một ứng dụng web gis,…
Trình bày kết quả sản phẩm tuần 14-15. Kết quả tính điểm giữa kì
(30%)
Bài tập tiểu luận theo cá nhân (không bắt buộc)
Tự lựa chọn 1 chủ đề bất kì đã giới thiệu trong môn học. Đi sâu phân
tích viết thành báo cáo tổng hợp dưới dạng tutorial trong 20-30 trang.
Các báo đạt chất lượng (tự viết - không phải là copy) được tính vào bài
thi cuối kì tối thiểu 8 điểm. Nộp tiểu luận vào tuần thứ 15 qua email.
Kiểm tra cuối kì (bắt buộc)
Lý thuyết và bài tập trên lớp
Mô hình, phương pháp phát triển các ứng dụng web
Các framework lập trình cơ bản: PHP. Java
Công nghệ xử lý dữ liệu web: XML, web service
Các ứng dụng cơ bản: CMS, Portal,…
Bài tập lớn lập trình theo nhóm 4 người (bắt buộc)
Xây dựng một CMS mini, xây dựng một ứng dụng web gis,…
Trình bày kết quả sản phẩm tuần 14-15. Kết quả tính điểm giữa kì
(30%)
Bài tập tiểu luận theo cá nhân (không bắt buộc)
Tự lựa chọn 1 chủ đề bất kì đã giới thiệu trong môn học. Đi sâu phân
tích viết thành báo cáo tổng hợp dưới dạng tutorial trong 20-30 trang.
Các báo đạt chất lượng (tự viết - không phải là copy) được tính vào bài
thi cuối kì tối thiểu 8 điểm. Nộp tiểu luận vào tuần thứ 15 qua email.
Kiểm tra cuối kì (bắt buộc)
Bài giảng Công nghệ Web và dịch vụ trực tuyến
23