ATTT ứng dụng Web - Phần 1: Kiến thức cơ sở

PHẦN 1: KIẾN THỨC CƠ SỞ


I. Kiến trúc ứng dụng web.

1. Các thành phần hệ thống ứng dụng web

  • Trong phần đầu tiên này, chúng ta sẽ làm quen đến các khái niệm cơ bản liên quan đến mô hình kiến trúc của một hệ thống ứng dụng web cơ bản. Đây là những khái niệm nền tảng cần nắm vững và phân biệt rõ trước khi tìm hiểu sâu hơn về hệ thống ứng dụng web. Bao gồm:

  • Máy chủ

  • Trình duyệt

  • Tên miền DNS

  • Database

  • Sharehosting – VPS

1.1 Máy chủ (Server)

  • Máy chủ là một hệ thống nhằm mục đích đáp ứng lại các yêu cầu cụ thể nào đó từ mạng máy tính, hay nói một cách khác, máy chủ đóng vai trò cung cấp một hay một số dịch vụ mạng cụ thể.

  • Về cơ bản, máy chủ là một máy tính nhưng được thiết kế với nhiều tính năng vượt trội hơn, khả năng lưu trữ và xử lý dữ liệu cũng lớn hơn các máy tính thông thường rất nhiều. Trên máy chủ được cài đặt các phần mềm và dịch vụ để phục vụ cho các máy tính khác truy cập để yêu cầu cung cấp các dịch vụ và tài nguyên. Có thể nói, máy chủ là nền tảng của mọi dịch vụ trên Internet.

  • Máy chủ web (Webserver) là một máy chủ mà trên đó cài đặt các phần mềm và dịch vụ phục vụ web, và đôi khi người ta cũng gọi chính những phần mềm đó là web server. Tất cả các web server đều hiểu và chạy được các file *.htm và *.html. Tuy nhiên mỗi web server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như llS của Microsoft dành cho các file *.asp, *.aspx; Apache dành cho các file *.php; Sun Java system web server của SUN dành cho *.jsp,…

1.2 Trình duyệt (Web browser)

  • Trình duyệt là một phần mềm ứng dụng dùng để truy xuất, biểu diễn và chuyển các nguồn thông tin trên mạng hệ thống mạng toàn cầu  (World Wide Web). Một nguồn thông tin được nhận dạng bởi một Định danh tài nguyên (Uniform  Resource Identifier - URI), có thể là một trang web, phim - video, hình ảnh (images) hoặc các mẫu thông tin khác.

  • Ngoài việc được sử dụng với mục đích là để truy cập vào hệ thống mạng toàn cầu, các trình duyệt còn được sử dụng để truy cập các thông tin được cung cấp bởi các máy chủ web (web server) trong hệ thống mạng riêng hoặc các tài liệu (files) đến các hệ thống file (file system). Hoặc cũng  được dùng để tiết kiệm tài nguyên thông tin cho các hệ thống lưu trữ  file.  

  • Các trình duyệt hay được sử dụng hiện nay như: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera,…

1.3 Tên miền DNS

  • Tên miền (Domain Name) là sự nhận dạng vị trí của một máy tính trên mạng Internet thông qua việc ánh xạ tương ứng tên miền đó với địa chỉ IP của chính máy tính đó. Việc nhận dạng này được thực hiện thông qua Hệ thống tên miền (Domain Name System - DNS).

  • Hệ thống tên miền (DNS) bao gồm một loạt các cơ sở dữ liệu chứa các tên miền và các địa chỉ IP tương ứng với các tên miền đó. Các hệ thống tên miền trên mạng Internet có nhiệm vụ chuyển đổi tên miền sang địa chỉ IP và ngược lại từ địa chỉ IP sang tên miền.

  • Hiện nay, trên thế giới hệ thống tên miền được phân bố theo cấu trúc hình cây. Tên miền cấp cao nhất là tên miền gốc (ROOT) được thể hiện bằng dấu ‘.’. Dưới tên miền gốc có hai loại tên miền là: Tên miền cấp cao dùng chung- gTLDs (generic Top Level Domains) như .com, .edu, .net,…; và Tên miền cấp cao mã quốc gia – ccTLDs (country code Top Level Domains) như .vn, .us, .uk,…

Hình 1: Sơ đồ cây hệ thống DNS

  • Hệ thống tên miền trên thế giới là ICANN (the Internet Corporation for Assigned Names and Numbers). Tổ chức này quản lý mức cao nhất của hệ thống tên miền (mức ROOT), do đó nó có quyền cấp phát các tên miền ở mức cao nhất.

  • Máy chủ DNS (DNS server) là một máy chủ chứa các cơ sở dữ liệu về tên miền và địa chỉ IP tương ứng với tên miền đó. Khi máy chủ DNS nhận các yêu cầu (request) đề nghị phân giải tên miền thì nó sẽ tra địa chỉ IP tương ứng với tên miền được yêu cầu đó. Giá trị của địa chỉ IP sẽ trả về trong response của máy chủ.

  • Hoạt động của DNS: Khi người dùng (client) gõ một địa chỉ web cần truy cập ở thanh địa chỉ của trình duyệt và ấn phím enter, khi đó máy người dùng sẽ gửi đi một request đến máy chủ DNS bao gồm tên miền (chính là tên web mà người dùng vừa gõ). Khi đó máy chủ DNS sẽ thực hiện việc phân giải tên miền này, trả về địa chỉ IP tương ứng cho client. IP nhận được chính là địa chỉ máy tính chứa ứng dụng web mà người dùng cần truy cập. Như vậy việc tiếp theo là máy tính người sẽ tạo các request tới địa chỉ IP đó để thực hiện các yêu cầu truy cập vào web.

Hình 2: Hoạt động của DNS

1.4 Cơ sở dữ liệu (Database)

  • Cơ sở dữ liệu là một tập hợp các dữ liệu có cấu trúc, có mối quan hệ liên kết với nhau. Các dữ liệu này được lưu trữ và quản lý trong các hệ quản trị cơ sở dữ liệu (Database Management System - DBMS).

  • Các ưu điểm mà Cơ sở dữ liệu mang lại so với việc lưu trữ dữ liệu trong file đơn thuần là:

  • Giảm sự trùng lặp thông tin xuống mức thấp nhất. Do đó đảm bảo thông tin có tính nhất quán và toàn vẹn dữ liệu.

  • Đảm bảo dữ liệu có thể được truy xuất theo nhiều cách khác nhau

  • Nhiều người có thể sử dụng một cơ sở dữ liệu.

  • Hệ quản trị cơ sở dữ liệu là một phần mềm hoặc hệ thống được thiết kết để quản trị một cơ sở dữ liệu. Cụ thể, các chương trình thuộc loại này hỗ trợ khả năng lưu trữ, sửa chữa, xóa và tìm kiếm thông tin trong một cơ sở dữ liệu. Có rất nhiều loại hệ quản trị cơ sở dữ liệu khác nhau: từ phần mềm nhỏ chạy trên máy tính cá nhân cho đến những hệ quản trị phức tạp chạy trên một hoặc nhiều siêu máy tính.

  • Tuy nhiên, đa số hệ quản trị cơ sở dữ liệu trên thị trường đều có một đặc điểm chung là sử dụng ngôn ngữ truy vấn theo cấu trúc mà tiếng Anh gọi là Structured Query Language (SQL). Các hệ quản trị cơ sở dữ liệu phổ biến được nhiều người biết đến là MySQL, Oracle, PostgreSQL, SQL Server, DB2, Infomix, v.v. Phần lớn các hệ quản trị cơ sở dữ liệu kể trên hoạt động tốt trên nhiều hệ điều hành khác nhau như Linux, Unix và MacOS ngoại trừ SQL Server của Microsoft chỉ chạy trên hệ điều hành Windows.

  • Ưu điểm của một hệ quản trị cơ sở dữ liệu:

  • Quản lý được dữ liệu dư thừa.

  • Đảm báo tính nhất quán cho dữ liệu.

  • Tạo khả năng chia sẻ dữ liệu nhiều hơn.

  • Cải tiến tính toàn vẹn cho dữ liệu.

  • Tuy nhiên, nó cũng tồn tại những nhược điểm đáng chú ý:

  • Một hệ quản trị cơ sở dữ liệu tốt thì thường khá phức tạp.

  • Một hệ quản trị cơ sở dữ liệu tốt thường rất lớn chiếm nhiều dung lượng bộ nhớ.

  • Giá cả khác nhau tùy theo môi trường và chức năng.

  • Một hệ quản trị cơ sở dữ liệu được viết tổng quát cho nhiều người dùng thì thường chậm.

1.5 Shared hosting, máy chủ ảo (VPS)

  • Shared Hosting là gói dịch vụ lưu trữ web site chuyên nghiệp có máy chủ với đường truyền tốc độ nhanh. Shared hosting luôn là giải pháp phù hợp cho các cá nhân hoặc doanh nghiệp muốn có một website giới thiệu, giao dịch thương mại trên Internet một cách hiệu quả và tiết kiệm chi phí.

  • Các đặc tính của Shared Hosting:

  • Hỗ trợ nhiều ngôn ngữ lập trình với các phiên bản khác nhau.

  • Miễn phí tạo, quản lý hộp thư điện tử (Email) theo tên miền riêng.

  • Miễn phí tạo tên miền con (Subdomain).

  • Sử dụng nhiều tên miền cho một website, băng thông lớn.

  • Quản lý nhiều website trên cùng một tài khoản hosting.

  • Quản lý đăng nhập, giám sát thông số băng thông và dung lượng.

  • Sao lưu dự phòng và khôi phục dữ liệu.

  • Video, tài liệu, ebook hướng dẫn sử dụng minh họa rõ ràng & dễ hiểu.

  • Máy chủ ảo (Virtual Private Server – VPS) là phương pháp phân chia một máy chủ vật lý thành nhiều máy chủ ảo. Mỗi máy chủ là một hệ thống hoàn toàn riêng biệt, có hệ điều hành riêng, có toàn quyền quản lý root và có thể restart lại hệ thống bất cứ lúc nào. Do vậy, VPS tránh khả năng bị tấn công hack local.

  • Trên một server chạy Shared Hosting có nhiều Website chạy chung với nhau, chung tài nguyên server, do vậy, nếu một website bị tấn công Ddos, botnet quá mạnh sẽ làm ảnh hưởng đến các website khác cùng server; trong khi đó, với server VPS, một tài khoản VPS bị tấn công thì mọi tài khoản VPS khác trên server đều không bị ảnh hưởng.

  • VPS dành cho các doanh nghiệp vừa và những trang web lớn hoặc mã nguồn nặng, nếu chạy trên Shared Hosting sẽ không đáp ứng đủ nhu cầu. Tuy nhiên, VPS sẽ đòi hỏi người sử dụng phải biết thêm một số kiến thức quản lý như cấu hình server, bảo mật.

2.  Giao thức HTTP, HTTPS

  • Phần này chúng ta sẽ tìm hiểu về giao thức cơ bản dùng để giao tiếp giữa máy chủ và trình duyệt là giao thức HTTP và HTTPS.

2.1 Giao thức HTTP

  • HTTP là viết tắt của từ HyperText Transfer Protocol (giao thức truyền tải siêu văn bản). HTTP xác định cách các thông điệp (các file văn bản, hình ảnh đồ hoạ, âm thanh, video, và các file multimedia khác) được định dạng và truyền tải ra sao, và những hành động nào mà các Web server (máy chủ Web) và các trình duyệt Web (browser) phải làm để đáp ứng các request rất đa dạng. Chẳng hạn, khi bạn gõ một địa chỉ Web URL vào trình duyệt Web, một request HTTP sẽ được gửi tới Web server để ra lệnh và hướng dẫn nó tìm đúng trang Web được yêu cầu và kéo về mở trên trình duyệt Web dưới dạng một response. Nói một cách khác, HTTP là giao thức truyền tải các file từ một Web server vào một trình duyệt Web để người dùng có thể xem một trang Web đang hiện diện trên Internet.HTTP là một giao thức ứng dụng của bộ giao thức TCP/IP (các giao thức nền tảng cho Internet).

  • Người ta gọi HTTP là một giao thức “phi trạng thái” (stateless) bởi vì mỗi request đều được thực thi một cách độc lập, request sau không biết bất cứ điều gì về các request đã đến trước mình. Đây chính là một hạn chế, khiếm khuyết của HTTP.

  • Phiên bản mới nhất của HTTP là 1.1. So với phiên bản nguyên thủy (HTTP 1.0), phiên bản mới này truyền tải các trang Web nhanh hơn và giảm tình trạng tắc nghẽn giao thông Web.

  • Giao thức HTTP gồm 2 thành phần chính là:

  • HTTP Request

  • HTTP response

  • HTTP Resquest gồm các phần:

  • Dòng đầu tiền là request (đưa ra yêu cầu), ví dụ GET /images/logo.png HTTP/1.1, thể hiện việc yêu cầu lấy về một file ảnh có tên logo.png nằm ở vị trí /images/logo.png.

  • Request Header

  • Một dòng trống

  • Phần nội dung thông điệp có thể có hoặc không.

Description: 13

Hình 3: Cấu trúc HTTP Request

  • Hình trên cho thấy cấu trúc cơ bản của HTTP Requests. Một HTTP Requests. bắt đầu bởi Request-Line. Request-Line có thể được theo sau bởi một hoặc nhiều header và body.

  • Để cụ thể hơn, hình bên dưới cho thấy một thông điệp http (dưới dạng văn bản) do Internet Explorer của Microsoft gửi khi người dùng truy cập vào trang www.ft.com. Dòng đầu tiên là Request-Line, và tiêu đề thông điệp tạo nên phần còn lại của văn bản.

Description: 14

Hình 4: HTTP request

  • Hình dưới phân tích cụ thể hơn Request-Line, bao gồm 3 phần: Method – phương thức của thông điệp, URI, và Version- phiên bản của HTTP

Description: 15

Hình 5: HTTP Request Line

  • Phương thức (method) cụ thể xuất hiện đầu tiên trong Request-Line. Trong ví dụ trên đây là một phương thức GET.

  • Mục tiếp theo trong Request-Line là Request-URI. Request-URI chứa nguồn tài nguyên cần truy cập. Trong ví dụ trên, Request-uri là (/), chỉ ra một yêu cầu đối với các nguồn tài nguyên gốc. Phần cuối cùng của Request-Line là phiên bản HTTP. Như ví dụ trên cho thấy, HTTP phiên bản 1.1.

  • HTTP Response gồm các phần:

  • Dòng đầu tiên chứa một mã trạng thái (Status Code), ví dụ HTTP/1.1 200 OK, để thông báo là yêu cầu của người dùng đã được thực hiện thành công.

  • Response Header

  • Một dòng trống

  • Phần nội dung thông điệp có thể có hoặc không

Description: 16

Hình 6: Cấu trúc HTTP Response

  • Status-Line bắt đầu bởi số phiên bản của HTTP (trường hợp này là HTTP/1.1), sau đó là mã trạng thái(trường hợp này là 200 OK).

Description: 17

Hình 7: HTTP Response Line

Description: 7

Hình 8: Mã trạng thái trả về của HTTP

2.2 Giao thức HTTPS/SSL

  • HTTPS là viết tắt của HyperText Transfer Protocol Secure. Giao thức này là một sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL hay TLS cho phép trao đổi thông tin một cách bảo mật trên Internet. Giao thức HTTPS thường được dùng trong các giao dịch nhạy cảm, cần tính bảo mật cao.

  • Giao thức HTTPS sử dụng cổng mặc định 443, và cung cấp các dịch vụ hay đảm bảo tính chất sau của thông tin:

  • Tin cậy (Confidentiality): sử dụng các phương thức mã hóa để đảm bảo rằng các thông điệp được trao đổi giữa client và server không bị kẻ khác đọc được.

  • Toàn vẹn (Integrity): sử dụng các hàm băm để cả client và server đều có thể tin tưởng rằng thông điệp mà chúng nhận được có không bị mất mát hay chỉnh sửa.

  • Xác thực (Authenticity): sử dụng các chứng thực số (digital certificate) để giúp client có thể tin tưởng rằng server/website mà họ đang truy cập thực sự là server/website mà họ mong muốn vào, chứ không phải bị giả mạo.

  • Quá trình giao tiếp giữa client và server thông qua HTTPS:

  • 1. Client gửi request cho một secure page (có URL bắt đầu với https://)

  • 2. Server gửi lại cho client chứng thực (certificate) của nó.

  • 3. Client gửi certificate này tới CA (mà được ghi trong certificate) để kiểm chứng.

  • Giả sử certificate đã được xác thực và còn hạn sử dụng hoặc client vẫn cố tình truy cập mặc dù Web browser đã cảnh báo rằng không thể tin cậy được certificate này (do là dạng self-signed SSL certificate hoặc certificate hết hiệu lực, thông tin trong certificate không đúng…) thì mới xảy ra bước 4 sau:

  • 4. Client tự tạo ra ngẫu nhiên một (khóa mã hóa đối xứng) symmetric encryption key, rồi sử dụng public key (trong certificate) để mã hóa symmetric key này và gửi về cho server.

  • 5. Server sử dụng private key (tương ứng với public key trong certificate ở trên) để giải mã ra symmetric key ở trên.

  • 6. Sau đó, cả server và client đều sử dụng symmetric key đó để mã hóa/giải mã các thông điệp trong suốt phiên truyền thông.

  • Các symmetric key sẽ được tạo ra ngẫu nhiên và có thể khác nhau trong mỗi phiên làm việc với server. Ngoài việc mã hóa thì cơ chế băm sẽ được sử dụng để đảm bảo tính toàn vẹn cho các thông điệp được trao đổi.

3.  Nguyên lý hoạt động của WebServer

3.1 Client-side scripting 

  • Client-side scripting (có thể gọi là mã thực thi phía người dùng) là các đoạn mã được thực thi bởi trình duyệt.

  • Các ngôn ngữ client-side scripting là: JavaScript, Ajax, Jquery, ActionScript.

3.2 Server-side scripting

  • Server-side scripting (có thể gọi là mã thực thi phía máy chủ) là một kỹ thuật được sử dụng để thiết kế website. Nó là các đoạn mã sẽ được chạy ở phía máy chủ khi có request từ phía client và sinh ra kết quả trả về chứa trong các response của máy chủ. 

  • Server-side scripting thường được sử dụng để thực hiện chức năng giao tiếp và giới hạn truy cập giữa người dùng với cơ sở dữ liệu hoặc các nguồn tài nguyên dữ liệu.

  • Các ngôn ngữ server-side scripting như: ASP (*.asp), ASP.NET (*.aspx), ngôn ngữ C thông qua các CGI (*.c, *.csp), ColdFusion Markup Language (*.cfm), ngôn ngữ Java thông qua các trang JavaServer (*.jsp), Server-side JavaScript (*.ssjs, *.js), Lua (*.lp *.op *.lua), Perl CGI (*.cgi, *.ipl, *.pl), PHP (*.php) (Open Source Scripting), Python (*.py), Ruby (*.rb),…

3.3 Mô hình hoạt động của Webserver

  • Các bước cơ bản trong tiến trình truyền tải trang web đến màn hình của bạn được thể hiện theo mô hình sau:

Hình 9: Hoạt động của Webserver

  • Theo mô hình trên, trình duyệt web thực hiện một kết nối tới máy chủ web, yêu cầu một trang web và nhận lại nó. Cụ thể các bước máy tính người dùng sẽ thực hiện như sau:

  • Giả sử người dùng gõ địa chỉ http://www.mysite.com/index.html trên thanh địa chỉ của trình duyệt. Đầu tiên, trình duyệt web sẽ phân tách địa chỉ website làm 3 phần:

  • Phần giao thức (Ví dụ: http)

  • Máy chủ tên miền (Ví dụ: www.mysite.com)

  • Tập tin (Ví dụ: index.html)

  • Trình duyệt sẽ gửi yêu cầu phân giải tên miền với máy chủ tên miền để chuyển đổi tên miền "www.mysite.com" ra địa chỉ IP tương ứng. Toàn bộ bước này chính là hoạt động của hệ thống DNS đã tìm hiểu ở bài trên.

  • Sau đó, trình duyệt sẽ gửi tiếp một kết nối tới máy chủ có địa chỉ IP tương ứng qua cổng 80 (cổng mặc định của giao thức HTTP).

  • Dựa trên giao thức HTTP, trình duyệt gửi yêu cầu GET đến máy chủ, yêu cầu tập tin:

  • http://www.mysite.com/index.html

  • Máy chủ khi nhận được yêu cầu trên, nếu tìm được tập tin index.html sẽ gửi tập tin này về trình duyệt web cho client. Trình duyệt web đọc các thẻ HTML, định dạng trang web và trình diễn kết quả ra màn hình của client.

Hình 10: Hoạt động của ứng dụng web

  • Trên đây là hoạt động cơ bản của một webserver đối với web dạng tĩnh HTML. Ngày này, hầu hết các webserver đều hỗ trợ web động với ngôn ngữ server side (JSP, ASP, PHP…). Hình trên trình bày các thành phần cơ bản của một web động cơ bản, với hỗ trợ truy vấn cơ sở dữ liệu:

  • Trình duyệt web client: Nơi gửi đi các HTTP request và nhận về các HTTP response, mã HTML, Client-script trình bày lại cho người dung.

  • Firewall: Chặn giữa người dung/Internet và webserver: Có chức năng cản lọc các gói tin chứa mã độc. Tùy vào mức độ triển khai, Firewall có thể hoạt động ở tầng network, hoặc tầng ứng dụng.

  • Webserver: Nhận các HTTP request và trả về các HTTP reponse cho người dung. Tùy cấu hình của webserver mà quyết định xử lý. Thông thường, nếu client yêu cầu các trang tĩnh (HTML, Javascript, CSS) thì webserver sẽ xử lý trả về mã tương ứng. Trường hợp yêu cầu các server side script (JSP, PHP, ASP) webserver sẽ chuyển các HTTP request đó tới cho server script – web app xử lý.

  • Web App: Nhận các yêu cầu từ webserver, tiến hành tính toán, sinh ra mã HTML và gửi trả về cho webserver, webserver sẽ đóng gói tạo ra các HTTP response trả về.

  • DB: Thành phần trong cùng, nơi lưu trữ dữ liệu của ứng dụng. Web app tiến hành truy vấn DB thông qua các API, DB truy vấn, xử lý trả về kết quả cho webapp. Webapp nhận dữ liệu từ DB, xử lý tính toán sinh ra mã HTML tương ứng.

  • Có thể tóm lược lại hoạt động của ứng dụng web như sau:

  • Web Client 🡪 Firewall 🡪 Web server 🡪 Web App 🡪 DB 🡪 Web App 🡪 Web Server 🡪 Firewall 🡪 Firewal 🡪 Web Client.

II. Các thành phần ứng dụng web

1.  URL – Uniform Resource Locator

  • Được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng các địa chỉ khác nhau, chính là URL. Ví du:

  • Các địa chỉ trên đều là các địa chỉ URL. Cấu trúc cơ bản của một địa chỉ URL như sau:

  • protocol://server-name.domain-name/directory/filename

  • Protocol: Thành phần đầu tiên của URL, miêu tả về phương thức sử dụng, một số phương thức phổ biến bao gồm:

http://

a World Wide Web server (WWW)

ftp://

File Transfer Protocol

mailto: 

email

telnet:// 

Telnet 

gopher://

gopher

  • Server name: Thành phần thư 2 của URL. Ví dụ: http://abc.com.vn thì Server name chính là “abc”

  • Domain name: Là thành phần thứ 3 đứng sau Server name, thành phần này cho biết thông tin cơ bản vể server country, các tổ chức quản lý… Chi tiết về DNS tham khảo phần trên.

  • Directories and filenames: Vị trí thưc mục và file tài nguyên cần truy cập đến. Một địa chỉ URL đầy đủ sẽ gồm các thành phần sau:

  • URL scheme thường là Tên giao thức (ví dụ: http, ftp) nhưng cũng có thể là một cái tên khác (ví du: news, mailto). Muốn hiểu rõ về URL scheme xin xem URI scheme

  • Tên miền (ví dụ: http://vi.wikipedia.org)

  • Chỉ định thêm cổng (có thể không cần)

  • Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (ví dụ: thumuc/trang)

  • Các truy vấn (có thể không cần)

  • Chỉ định mục con (có thể không cần)

2.  URI – Uniform Resource Identifiers

  • Thông thường, chúng ta thường quen thuộc với định nghĩa URL (Uniform Resource Locators) Trên thực tế, không có nhiều khác biệt giữa hai khái niệm URL và URI, URL một chỉ là một loại của URI.

  • URI dùng để xác định một resource nào đó trên web. Như hình dưới cho thấy một URI chứa rất nhiều các thành phần, không đơn giản như URL.


Description: [​IMG]

Hình 11: Cấu trúc URI

  • Protocol: Xác định các giao thức và các ứng dụng cần thiết để truy cập tài nguyên, trong trường hợp này là giao thức HTTP

  • Username: Nếu giao thức hỗ trợ khái niệm về tên người dùng thì username cung cấp tên người dùng để chứng thực truy cập tài nguyên

  • Password: Mật khẩu truy cập tài nguyên

  • Host: Tên miền truyền thông cho webserver,

  • Port: Là port cho các giao thức lớp ứng dụng, ví dụ như HTTP là cổng 80 (có thể bỏ qua tham số này).

  • Path: đường dẫn phân cấp đến tài nguyên được đặt trên Server

  • File: Tên các tập tin tài nguyên trên Server

  • Query: Các tuy vấn thêm thông tin về tài nguyên của Client

  • Fragment: Một vị trí nào đó trong tài nguyên

3.  HTML

A.  Định nghĩa

  • HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản). Một file HTML phải có phần mở rộng là .htm hoặc .html HTML. HTML hiện nay có hai version là HTML 4 và HTML 5.

B.  Thành phần của HTML

  • Một file HTML thường có bố cục như sau:

Ví dụ 1:

<html>
<head>
<title>ABC</title>
</head>
<body>
www.abc.com.vn and www.abc.vn. <b>Example HTML </b>
</body>
</html> 

  • Ở ví dụ 1 <b> Example HTML </b> là một thành phần của HTML bắt đầu với thẻ: <b> nội dung của nó là: Example HTML và được kết thúc bởi thẻ </b> mục đích của thẻ <b> là để xác định một thành phần của HTML phải được thể hiện dưới dạng in đậm. Ví dụ 2:

<body>
www.abc.com.vn and www.abc.vn. <b>Example HTML </b>
</body>

  • Ví dụ 2 ở trên thành phần bắt đầu bằng thẻ <body> và kết thúc bằng thẻ kết thúc </body>. Mục đích của thẻ <body> là xác định thành phần của HTML bao gồm nội dung của tài liệu.

C.  Các thuộc tính của thẻ HTML

  • Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung cấp thông tin về thành phần HTML của trang web. Tag này xác định thành phần thân của trang HTML: <body>. Với một thuộc tính thêm vào là bgcolor, bạn có thể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như sau: <body bgcolor="red"> hoặc <body bgcolor="#E6E6E6"> (#E6E6E6 là giá trị hex của màu)

  • Thẻ này sẽ xác định dạng bảng HTML:<table> với một thuộc tính đường viền (border), bạn có thể báo cho trình duyệt biết rằng bảng sẽ không có đường viền: <table border="0">. Thuộc tính luôn luôn đi kèm một cặp như name/value: name="value" (tên="giá trị") thuộc tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML. Dấu ngoặc kép, "red" hoặc 'red' giá trị thuộc tính nên được đặt trong dấu trích dẫn " và ". Kiểu ngoặc kép như vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng. Ví dụ trong một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thuộc tính đã mang dấu ngoặc kép rồi, thì việc sử dụng ngoặc đơn là cần thiết. Ví du:  name='ban"tay"den' Cơ bản về các thẻ HTML những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và xuống dòng. 

  • Headings
    Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất. <h6> xác định heading nhỏ nhất

<h1>Đây là heading</h1>
<h2>Đây là heading</h2>
<h3>Đây là heading</h3>
<h4>Đây là heading</h4>
<h5>Đây là heading</h5>
<h6>Đây là heading</h6> 

  • HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

  • Đoạn văn – paragraphs: Paragraphs được định dạng bởi thẻ <p>.

<p>Đây là đoạn văn</p>
<p>Đây là một đoạn văn khác</p> 

  • HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

  • Line Breaks - xuống dòng: Thẻ <br> được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn bắt đầu một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn viết nó. 

<p>Đây <br> là một đo<br>ạn văn với thẻ xuống hàng</p> 

  • Thẻ <br> là một thẻ trống, nó không cần thẻ đóng dạng </br>

  • Lời chú thích trong HTML: Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML. Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích để giải thích về code của bạn, để sau này bạn có phải quay lại chỉnh sửa gì thì cũng dễ nhớ hơn.

<!-- Chú thích ở trong này --> 

  • Bạn cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần ở dấu lớn hơn.

  • Những thẻ HTML cơ bản:

Tag

Mô Tả

<html>

Xác định một văn bản dạng HTML

<body>

Xác định phần thân của tài liệu

<h1> to <h6>

Xác định header từ 1 đến 6

<p>

Xác định một đoạn văn

<br>

Chèn một dòng trắng

<hr>

Xác định một đường thẳng

<!-->

Xác định vùng chú thích

4.  Javascript

A.  Định nghĩa

  • Javascript là một ngôn ngữ thông dịch (interpreter), chương trình nguồn của nó được nhúng (embedded) hoặc tích hợp (integated) vào tập tin HTML chuẩn. Khi file được load trong Browser (có support cho javascript), Browser sẽ thông dịch các Script và thực hiện các công việc xác định. Chương trình nguồn javascript được thông dịch trong trang HTML sau khi toàn bộ trang được load nhưng trước khi trang được hiển thị.

B.  Khai báo sử dụng Javascript trong HTML

  • Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>

  • Script được đa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> và </SCRIPT>. Các thẻ <SCRIPT> có thể xuất hiện trong phần <HEAD> hay <BODY> của file HTML. Nếu đặt trong phần <HEAD>, nó sẽ được tải và sẵn sàng trước khi phần còn lại của văn bản được tải.

  • Thuộc tính duy nhất được định nghĩa hiện thời cho thẻ <SCRIPT> là “LANGUAGE=“ dùng để xác định ngôn ngữ script được sử dụng. Có hai giá trị được định nghĩa là "JavaScript" và "VBScript". Với Chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :


<SCRIPT LANGUAGE=”JavaScript”>

// INSERT ALL JavaScript HERE

</SCRIPT>


  • Điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML và JavaScript là cho phép bạn ẩn các mã JavaScript trong các ghi chú của file HTML, để các trình duyệt cũ không hỗ trợ cho JavaScript có thể đọc được nó như trong ví dụ sau đây:

<SCRIPT LANGUAGE=”JavaScript”>

<!-- From here the JavaScript code hidden

// INSERT ALL JavaScript HERE

// This is where the hidden ends -->

</SCRIPT>

  • Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng này dưới dạng mã JavaScript. Các ví dụ trong Chương này không chứa đặc điểm ẩn của JavaScript để mã có thể dễ hiểu hơn.

  • Sử dụng các file nguồn JavaScript: Thuộc tính SRC của thẻ <SCRIPT> cho phép bạn chỉ rõ file nguồn JavaScript được sử dụng (dùng Phương pháp này hay hơn nhúng trực tiếp một đoạn lệnh JavaScript vào trang HTML). Cú pháp:

<SCRIPT SRC="file_name.js">

....

</SCRIPT>

  • Thuộc tính này rấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang khác nhau. Các câu lệnh JavaScript nằm trong cặp thẻ <SCRIPT> và </SCRIPT> có chứa thuộc tinh SRC trừ khi nó có lỗi. Ví dụ bạn muốn đưa dòng lệnh sau vào giữa cặp thẻ <SCRIPT SRC="..."> </SCRIPT>:

document.write("Không tìm thấy file JS đa vào!");

  • Thuộc tính SRC có thể được định rõ bằng địa chỉ URL, các liên kết hoặc các đường dẫn tuyệt đối, ví dụ:

<SCRIPT SRC=" http://abc.com.vn/menu.js">

  • Các file JavaScript bên ngoài không được chứa bất kỳ thẻ HTML nào. Chúng chỉ được chứa các câu lệnh JavaScript và định nghĩa hàm.

  • Tên file của các hàm JavaScript bên ngoài cần có đuôi .js, và server sẽ phải ánh xạ đuôi .js đó tới kiểu MIME application/x-javascript. Đó là những gì mà server  gửi trở lại phần Header của file HTML. Để ánh xạ đuôi này vào kiểu MIME, ta thêm dòng sau vào file mime.types trong đường dẫn cấu hình của server, sau đó khởi động lại server:

type=application/x-javascript

  • Nếu server không ánh xạ được đuôi .js tới kiểu MIME application/x-javascript , Navigator sẽ tải file JavaScript được chỉ ra trong thuộc tính SRC về không đúng cách. Trong ví dụ sau, hàm bar có chứa xâu "left" nằm trong một cặp dấu nháy kép:

function bar(widthPct){

document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>")

}

  • Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML

  • Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó

C.  Các lệnh cơ bản trong javascript

LỆNH/MỞ RỘNG

KIỂU

MÔ TẢ

SCRIPT

thẻ HTML

Hộp chứa các lệnh JavaScript 

SRC

Thuộc tính của thẻ SCRIPT

Giữ địa chỉ của file JavaScript bên ngoài. File này phải có phần đuôi .js

LANGUAGE

thuộc tính của thẻ SCRIPT

Định rõ ngôn ngữ script được sử dụng (JavaScript hoặc VBScript)

//

Ghi chú trong JavaScript 

Đánh dấu ghi chú một dòng trong đoạn script

/*...*/

Ghi chú trong JavaScript 

Đánh dấu ghi chú một khối trong đoạn script 

document.write()

cách thức JavaScript 

Xuất ra một xâu trên cửa sổ hiện thời một cách tuần tự theo file HTML có đoạn script đó

document.writeln()

Cách thức JavaScript 

Tương tự cách thức document.write() nhưng viết xong tự xuống dòng.

alert()

Cách thức của JavaScript 

Hiển thị một dòng thông báo trên hộp hội thoại

promt()

Cách thức JavaScript 

Hiển thị một dòng thông báo trong hộp hội thoại đồng thời cung cấp một trường nhập dữ liệu để người sử dụng nhập vào.

D.  Các đối tượng trong javascript

Sơ đồ minh hoạ sự phân cấp của các đối tượng javascript

  • Trong sơ đồ phân cấp trên, các đối tượng con chính là các thuộc tính của một đối tượng cha. Ví dụ như một form tên là form1 chính là một đối tượng con của đối tượng document và được gọi tới là document.form1

  • Tất cả các trang đều có các đối tượng sau đây:

  • navigator: có các thuộc tính tên và phiên bản của Navigator đang được sử dụng, dùng cho MIME type được hỗ trợ bởi client và plug-in được cài đặt trên client.

  • window: là đối tượng ở mức cao nhất, có các thuộc tính thực hiện áp dụng vào toàn bộ cửa sổ.

  • document: chứa các thuộc tính dựa trên nội dung của document nh tên, màu nền, các kết nối và các forms.

  • location: có các thuộc tính dựa trên địa chỉ URL hiện thời

  • history: Chứa các thuộc tính về các URL mà client yêu cầu trước đó. 

5. CSS

A. Định nghĩa

  • CSS là từ viết tắt của cụm từ Cascading Style Sheets. CSS định nghĩa cách hiển thị của các tài liệu viết bằng ngôn ngữ đánh dấu như HTML. Chẳng hạn, ta có thể dùng CSS để định dạng màu, font chữ và cách trình bày của các thành phần trong trang Web. 

  • CSS được thiết kế với mục đích tách biệt phần nội dung (viết bằng ngôn ngữ HTML) với phần trình bày (viết bằng ngôn ngữ CSS) của tài liệu. Sự tách biệt này giúp tăng khả năng truy xuất nội dung tài liệu, tăng tính uyển chuyển và làm đơn giản, cũng như giảm bớt sự lặp lại các thẻ định dạng trong tài liệu. Đặc tả của CSS hiện đang được quản lý bởi tổ chức World Wide Web Consortium (W3C).

B.  Cú pháp CSS

  • Cú pháp CSS gồm 3 thành phần: 

  • Bộ chọn (selector): xác định loại phần tử bị ảnh hưởng bởi các định dạng chỉ định. Bộ chọn có thể là tên các phần tử HTML (ví dụ: body, p, h1, h2, …), các lớp kiểu do ta xây dựng, …

  • Thuộc tính (property): thể hiện tính chất định dạng. Đi kèm với thuộc tính là giá trị định dạng, giữa thuộc tính và giá trị là dấu hai chấm phân cách.

  • Giá trị (value) 

bộ_chọn { 

thuộc_tính_1: giá_trị;

thuộc_tính_2: giá_trị

}

  • Các cặp thuộc tính và giá trị được phân cách bởi dấu chấm phẩy. Ta không cần thêm dấu chấm phẩy sau lần khai báo thuộc tính – giá trị cuối cùng.

 C.  Chú thích trong CSS

  • Chú thích (comment) được dùng để giải thích nội dung mã định dạng CSS, nhằm 

mục đích dễ chỉnh sửa sau này. Nội dung bao bọc bởi dấu chú thích sẽ được trình 

duyệt sẽ bỏ qua. Chú thích CSS bắt đầu với dấu "/*" và kết thúc bằng dấu "*/":

/* nội dung chú thích */. Ví dụ:

/* Chu thich cho phan tu p */ 

p { 

text-align: center; 

/* Dung mau chu den va font Arial */ 

color: black; 

font-family: arial; 

D.  Khai báo sử dụng CSS trong HTML

  • Có 3 cách để sử dụng CSS.

  • "Inline CSS" : Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style:

<span style="font-weight:bold;text-decoration:underline;color:#FF0000;">Đoạn text cần in đậm, gạch chân, màu đỏ</span>

  • "Internal CSS" : Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa <head> và </head>):

<style type="text/css">
body {font-family:verdana;color:#0000FF;} /* Kiểu chữ trong trang Web là "Verdana", màu chữ thông thường là màu xanh dương */
</style>

  • "External CSS" : Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau. Ví dụ về nội dung tệp style.css:

body {font-family:verdana;color:#0000FF;}

  • Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể nằm ngoài thẻ <head>):

<link rel="stylesheet" type="text/css" href="style.css"/>

6.  Cookie

A.  Khái niệm Cookie

  • Cookie là 1 đoạn dữ liệu được truyền đến browser từ server, đoạn dữ liệu này sẽ được browser lưu trữ (trong memory hoặc trên đĩa) và sẽ gửi trả về server mỗi khi browser tải 1 trang web từ server.

  • Các cookie được lưu trữ dưới dạng file dữ liệu nhỏ dạng text, được ứng dụng tạo ra để lưu trữ/truy cập/nhận biết các thông tin về người dùng đã ghé thăm trang Web và những pages mà họ đã ghé thăm trên website. Những thông tin này có thể bao gồm tên/định danh người dùng, mật khẩu, sở thích, thói quen…cookie được trình duyệt của người dùng chấp nhận lưu trên đĩa cứng của máy mình, tuy nhiên không phải lúc nào trình duyệt cũng hỗ trợ cookie, mà còn tùy thuộc vào người dùng có thiết lập cho phép trình duyệt chấp nhận cookies hay không.

  • Cookie được tạo ra bởi website và gởi tới browser, do vậy 2 website khác nhau (cho dù cùng host trên 1 server) sẽ có 2 cookie khác nhau gởi tới browser. Ngoài ra, mỗi browser quản lý và lưu trữ cookie theo cách riêng của mình, cho nên 2 browser cùng truy cập vào 1 website sẽ nhận được 2 cookie khác nhau.

B.  Các thành phần của một cookie gồm

Domain

Flag

Path

Secure

Expiration

Name

Value

www.redhat. com

FALSE

/

FALSE

1154029490

Apache

64.3.40.151.16

  • Domain: Tên miền tạo cookie

  • Flag: Xác định các máy khác với cùng tên miền có được truy xuất đến cookie hay không

  • Path: Phạm vi các địa chỉ có thể truy xuất cookie. Ví dụ: Nếu path là “/tracuu” thì các địa chỉ trong thư mục /tracuu cũng như tất cả các thư mục con của nó như /tracuu/baomat có thể truy xuất đến cookie này. Còn nếu giá tri là “/” thì cookie sẽ được truy xuất bởi tất cả địa chỉ thuộc miền trang web tạo cookie

  • Secure: Có kết nối SSL hay không

  • Expiration: thời gian hết hạn của cookie, được tính bằng giây kể từ 00:00:00 giờ GMT ngày 01/01/1970. Nếu giá trị này không được thiết lập thì trình duyệt sẽ chỉ lưu trong bộ nhớ RAM và sẽ xoá nó khi trình duyệt bị đóng.

  • Name: Tên biến

  • Value: Giá trị biến đó

7.  Session

A.  Khái niệm Session

  • Session là khoảng thời gian người sử dụng giao tiếp với 1 ứng dụng. Session bắt đầu khi người sử dụng truy cập vào ứng dụng lần đầu tiên, và kết thúc khi người sử dụng thoát khỏi ứng dụng. Mỗi session sẽ có một định danh (ID), 1 session khác nhau sẽ có 2 ID khác nhau. Trong ngữ cảnh ứng dụng web, website sẽ quyết định khi nào session bắt đầu và kết thúc. Trong 1 session, website có thể lưu trữ một số thông tin như đánh dấu bạn đã login hay chưa, những bài viết nào bạn đã đọc qua, … SessionID thường được lưu vào:

  • Biến trên URL

  • Biến ẩn Form

  • Cookie

B.  Điểm giống và khác nhau giữa Session và Cookie

  • Cookie và Session đều có chung mục đích là lưu giữ data để truyền từ 1 pages sang 1 pages khác (trên cùng website). Nhưng phương thức lưu trữ và quản lý data của Cookie và Session khác nhau.

  • Cookie sẽ được lưu trữ tại browser, do browser quản lý và browser sẽ tự động truyền cookie ngược lên server mỗi khi truy cập vào 1 trang web trên server.

  • Dữ liệu lưu trữ trong Session sẽ được ứng dụng quản lý, trong ngữ cảnh web, ứng dụng ở đây sẽ là website và webserver. Browser chỉ truyền ID của session lên server mỗi khi truy cập vào website trên server.

  • Mỗi Session gắn với 1 định danh (ID). ID sẽ được tạo ra trên server khi session bắt đầu và được truyền cho browser. Sau đó browser sẽ truyền lại ID này lên server mỗi khi truy cập vào website. Như vậy ta có thể thấy rằng sẽ rất tiện nếu như Session ID được lưu trữ trong Cookie và được browser tự động truyền lên server mỗi khi truy cập vào website.

  • Sử dụng Session hoặc Cookie là tuỳ vào lựa chọn của Lập trình viên, tuy nhiên Session thường được ưa chuộng hơn Cookie vì một số lý do sau:

  • Trong một số trường hợp Cookie không sử dụng được. Có thể browser đã được thiết lập để không chấp nhận cookie, lúc đó session vẫn sử dụng được bằng cách truyền session ID giữa các trang web qua URL, ví dụ: script.php?session=abc123.

  • Lượng data truyền tải giữa browser và server: chỉ mỗi session ID được truyền giữa browser và server, data thực sự được website lưu trữ trên server.

  • Bảo mật: càng ít thông tin được truyền tải qua lại giữa browser và client càng tốt, và càng ít thông tin được lưu trữ tại client càng tốt.

C.  Quản lý Session

Description: http://tech.blog.framgia.com/vn/wp-content/uploads/2012/10/3.jpg

Hình 13: Quản lý Session

  • Khi User lần đầu tiên truy cập sẽ yêu cầu web server khởi tạo một phiên làm việc (session), web server khởi tạo một sessionID và tạo một file để lưu trữ các biến session liên quan đến user đó. Đồng thời web server tạo một Cookie để đưa sessionID vào đáp ứng yêu cầu của user. Sau đó trình duyệt sẽ lưu lại cookie và đưa sessionID gắn vào trong cookie trong các request lên server tiếp theo.

D.  Bảo mật Session

  • Thông thường, sau khi người dùng được chứng thực dựa trên những thông tin cá nhân như tên/mật khẩu, session ID được xem như một mật khẩu tĩnh tạm thời cho những lần yêu cầu tiếp theo. Điều này đã khiến cho Session ID là mục tiêu lớn cho những hacker. Trong nhiều trường hợp, hacker giành được session ID hợp lệ của người dùng để từ đó đột nhập vào phiên làm việc của họ. Tấn công vào một phiên làm việc thường được thực hiện theo 2 kiểu chính sau:

  • Ấn định phiên làm việc (Session Fixation).

  • Đánh cắp phiên làm việc (Session Hijacking).

  • Ấn định phiên làm việc

Description: http://tech.blog.framgia.com/vn/wp-content/uploads/2012/10/4.png

Hình 14: Ấn định phiên làm việc

  • Cách phòng chống:

  • Chống việc đăng nhập với một sessionID có sẵn (luôn tạo sessionID mới khi người dùng đăng nhập hệ thống

  • Giới hạn phạm vi ứng dụng của session ID

  • Kết hợp SessionID với địa chỉ trình duyệt

  • Xóa bỏ session khi người dùng thoát hệ thống hay tắt trình duyệt

  • Thiết lập thời gian hết hiệu lực cho session

  • Đánh cắp phiên làm việc

  • Dự đoán phiên làm việc

  • Hacker là người dùng của hệ thống

  • Từ các sessionID nhận được tìm qui luật phát sinh

  • Dự đoán được sessionID của phiên người dùng kế tiếp

  • Vét cạn phiên làm việc(Brute force ID)

  • Hacker tự tạo một chương trình gửi nhiều yêu cầu trong một khoảng thời gian đến trình chủ kèm sessionID

  • Lợi dụng thói quen developer hay lấy địa chỉ IP của người dùng làm sessionID để vét cạn

  • Tấn công kiểu dùng đoạn mã để đánh cắp phiên làm việc

  • Thực hiện qua lỗi Cross-Site-Scripting, chèn đoạn mã vào trình duyệt của nạn nhân để lấy được cookie

8.  View-state

A.  Định nghĩa

  • ViewState là một kĩ thuật giúp giữ lại trạng thái của trang mặc dù trang được Postbacks. Lưu thông tin của mỗi WebForm do Server quản lý, chứa thông tin của tất cả các người dùng trong trang. Khi trả về cho trình khách,ViewState được trình bày dưới dạng thẻ hidden và các giá trị được mã hóa. Có thể vô hiệu hóa hay cho phép viewstate bằng cách sử dụng thuộc tính EnableViewState trong từng thẻ hay trong trang cấu hình của ứng dụng. Ví dụ:

Description: http://htmlimg1.scribdassets.com/gsojv3ydc2tua5f/images/29-139c3fb4c2.jpg

B.  Tác dụng của View-state

  • Trong ASP hoặc PHP: Khi submit 1 form trong ngôn ngữ ASP trước kia, tất cả các giá trị trong form (text, textarea, text hidden) đều bị xóa. Nếu bạn đã gửi một form với rất nhiều thông tin và máy chủ phản hồi với một lỗi. Bạn sẽ phải trở về form và sửa lại các thông tin. Bạn bấm vào nút trở lại, nhưng tất cả giá trị form này đều đã bị xóa trắng, bạn phải gõ thông tin lại từ đầu ! Các trang web đã không duy trì trạng thái ViewState. 

  • Ví dụ đơn giản: Nếu bạn đăng tin lên forum và nếu forum dùng ASP hoặc PHP thôi. Bạn điền đầy đủ thông tin cá nhân như tiêu đề, nội dung rồi, sau đó nhấn nút Gửi đến server. Nếu trong thông tin đó có lỗi chẳng hạn thì bạn phải refresh lại trang, khi đó mọi thông tin đã điền sẽ mất hết và phải gõ lại từ đầu.

  • Khi submit 1 form trong ASP NET thì hoàn toàn khác, form lại xuất hiện trong cửa sổ trình duyệt cùng với tất cả các giá trị trong form. Vậy cơ chế nào để giữ mấy giá trị đó.  Điều này là do ASP. NET duy trì trạng thái ViewState của bạn. ViewState này cho thấy tình trạng của các trang khi được gửi đến máy chủ. tình trạng được định nghĩa thông qua một trường ẩn (TEXT HIDDEN) và được đặt trong control <form runat=”server”>. Và thông tin này được mã hóa như sau:

<form name="_ctl0" method="post" action="page.aspx" id="_ctl0">

<input type="hidden" name="__VIEWSTATE"

value="dDwtNTI0ODU5MDE1Ozs+ZBCF2ryjMpeVgUrY2eTj79HNl4Q=" />

.....some code

</form>

C.  Sử dụng view-state khi nào

  • ViewState là đối tượng phía Server dùng để lưu dữ liệu trên một trang khi trang đó được postback. Dữ liệu này được gửi lại client dưới các thẻ hidden. Nếu ViewState quá lớn, nó sẽ làm giảm khả năng thi hành của bộ thu gom rác. Bạn nên tối ưu hệ thống sử dụng ViewState theo các trường hợp sau:

  • Mặc định các control đều dùng ViewState. Nếu như trang của bạn chỉ là trang output, hoặc mỗi request đều cần nạp lại dữ liệu thì bạn không cần dùng đến ViewState. Ví dụ:

  • Trang của bạn không postback: nếu trang không postback lại dữ liệu, hoặc chỉ là trang output, thì không nên dùng ViewState.

  • Bạn không handler các sự kiện của control: nếu các control không handler sự kiện, hoặc không bound data thì bạn cũng không cần dùng ViewState.

  • Bạn khởi tạo lại dữ liệu mỗi khi refresh: nếu bạn bỏ qua dữ liệu cũ, thì cũng không cần dùng ViewState.

III.Các công nghệ phổ biến trong phát triển ứng dụng web

1.  JSON

A.  Khái niệm Json

  • JSON là viết tắt của JavaScript Object Notation (dịch sơ sơ là đối tượng JavaScript). Nó là một chuẩn để định dạng dữ liệu, về mặt này, có thể so sánh JSON với XML, YAML… Nhưng khi JSON đi với JavaScript hoặc ActionScript thì nó có tính ưu việt hơn.

  • Tại sao JSON có liên quan đến JavaScript, ActionScript. Đơn giản là vì dữ liệu được định dạng thành chuỗi JSON chính là cách biểu diễn một đối tượng trong các Scripting Language này.

B.  Lợi ích của JSON

  • Khi sử dụng JSON với JavaScript hay ActionScript, không cần phải có các bước phân tích phức tạp như đối với XML. Mà có thể truy vấn trực tiếp giá trị theo tên (khóa) được định nghĩa trong JSON. Ví dụ: Một dữ liệu XML:

<data>

<x>2</x>

<y>3</y>

</data>

  • Sử dụng JavaScript để đọc dữ liệu này, hải thực hiện qua một bước phân tích, đưa văn bản XML thành một đối tượng dữ liệu và đọc dữ liệu theo nodes. Giả sử object là xmlObj, để lấy dữ liệu x và y ta làm như sau:

var x = xmlObj.childNodes[0].text;

var y = xmlObj.childNodes[1].text;

Trong trường hợp tương tự, bạn có một dữ liệu JSON:

var jsonStr = '{ data : { x : 2 , y : 3}}';

Sử dụng JavaScript bạn chỉ cần gọi:

eval( 'var jsonObj = ' + jsonStr + ';');

var x = jsonObj.x;

var y = jsonObj.y;

  • JSON là một chuẩn cực kỳ quan trọng trong lập trình web ở phía client. Khi sử dụng JSON rút ngắn thời gian viết mã Javascript, actionscript hơn là sử  dụng XML.

C.  Nên sử dụng JSON trong những tình huống nào

  • Lưu trữ dữ liệu đơn thuần. Đó là khi bạn muốn lưu trữ dữ liệu dưới dạng metadata ở phía server. Chuỗi JSON sẽ được lưu vào database và sau đó khi cần dữ liệu thì sẽ được giải mã. Ví dụ với PHP, cung cấp các hàm liên quan đến JSON để mã và giải mã là json_encode và json_decode.

  • Chú ý: phương pháp này cũng tương tự như sử dụng tính năng serialize và unserialize của PHP. Nhưng trong khi serialize và unserialize sử dụng với cả dữ liệu và biến, tức là phụ thuộc vào ngôn ngữ lập trình là PHP và dĩ nhiên không thể transfer sang ngôn ngữ lập trình khác để unserialize được. Vì vậy, nếu dữ liệu của bạn chỉ đơn thuần là dữ liệu cơ bản (chuỗi kí tự, số…) thì bạn hoàn toàn không nên sử dụng serialize mà nên sử dụng JSON.

  • Sử dụng JavaScript, ActionScript để xử lý thông tin trả về từ phía server. Rất nhanh và rất dễ dàng.

2.  XML 

A.  Khái niệm

  • Xml (viết tắt từ tiếng Anh eXtensible Markup Language, "Ngôn ngữ Đánh dấu Mở rộng") là ngôn ngữ đánh dấu với mục đích chung do W3C đề nghị, để tạo ra các ngôn ngữ đánh dấu khác. Đây là một tập con đơn giản của SGML, có khả năng mô tả nhiều loại dữ liệu khác nhau. Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được kết nối với Internet. Các ngôn ngữ dựa trên XML (thí dụ: RDF, RSS, MathML, XHTML, SVG, GML và cXML) được định nghĩa theo cách thông thường, cho phép các chương trình sửa đổi và kiểm tra hợp lệ bằng các ngôn ngữ này mà không cần có hiểu biết trước về hình thức của chúng.

B.  Cách tạo một tệp tài liệu XML

  • Tệp tài liệu XML bao gồm nội dung và các dấu được thêm vào nội dung đó. Các thẻ được chèn vào bao quanh nội dung văn bản. Thí dụ, bạn cần tạo một tài liệu hướng dẫn nấu ăn bằng XML. Giả sử bạn muốn viết công thức làm món Ice Cream Sundae trong XML. Để đánh dấu tên công thức, bạn bao quanh đoạn văn bản đó bên trong phần tử của bạn bằng việc đặt thẻ bắt đầu vào trước đoạn văn bản này và đặt thẻ kết thúc ở cuối đoạn văn. Như vậy, bạn có thể gọi đó là một phần tử recipename. Để đánh dấu thẻ bắt đầu của một phần tử, hãy đặt tên của phần tử bên trong ngoặc nhọn (<>) như sau: <recipename>. Sau đó, đánh nội dung Ice Cream Sundae. Ở cuối văn bản, bạn cho thêm thẻ kết thúc, thẻ này là tên của phần tử bên trong ngoặc nhọn cùng với dấu gạch chéo (/) trước tên của phần tử đó, giống như sau: </recipename>. Những thẻ này tạo thành một phần tử, mà bạn có thể thêm nội dung vào hoặc bạn có thể thêm các phần tử khác vào bên trong nó. 

  • Bắt đầu tệp XML của bạn: Dòng đầu tiên trong tệp tài liệu XML của phải là dòng khai báo XML. Phần tùy chọn này dùng để nhận dạng nó là một tệp tài liệu XML, việc khai báo này giúp các công cụ và chính chúng ta nhận ra chúng là tệp tài liệu XML, SGML hay một vài loại ngôn ngữ đánh dấu khác. Khai báo có thể viết ở dạng đơn giản như sau <?xml?> hoặc bao gồm phiên bản của XML (<?xml version="1.0"?>) hoặc thậm chí cả việc mã hóa ký tự, thí dụ <?xml version="1.0" encoding="utf-8"?> cho bộ mã tiêu chuẩn quốc tế đa ngôn ngữ Unicode. Vì khai báo này phải được ưu tiên thiết lập ở phần đầu tiên trong tệp dữ liệu, cho nên nếu bạn có kế hoạch kết hợp các tệp tài liệu XML nhỏ thành một tệp tài liệu XML lớn hơn, bạn nên loại bỏ thông tin tùy chọn này.

  • Tạo phần tử gốc trong tài liệu: Thẻ bắt đầu và thẻ kết thúc của phần tử gốc bao quanh toàn bộ nội dung của tệp tài liệu XML. Và chỉ có duy nhất một phần tử gốc trong một tệp dữ liệu, và bạn cần "Giấy gói" này để chứa đựng tất cả nội dung của tệp tài liệu XML. Ví dụ 1 là phần đầu của thí dụ I. Thí dụ này sử dụng phần tử gốc có tên <recipe>.

  • Ví dụ 1. Phần tử gốc

<?xml version="1.0" encoding="UTF-8"?>

<recipe>

</recipe>

  • Khi bạn tạo tài liệu, nội dung của bạn và các thẻ thêm vào sẽ đặt ở giữa <recipe> và </recipe>.

C.  Kết luận

  • Ngoài một vài các quy tắc đơn giản, bạn có thể linh động thiết kế các phần tử và các thuộc tính XML. Các quy tắc của XML không khó, soạn thảo một tệp tài liệu XML cũng không khó. Điều khó khăn đó là bạn phải mường tượng điều bạn cần từ tài liệu của chính mình dưới dạng có thể sắp xếp hay có thể tìm kiếm được, sau đó thiết kế các phần tử và các thuộc tính nhằm phù hợp với những gì bạn cần. 

  • Khi bạn có ý tưởng tốt về mục tiêu và cách đánh dấu nội dung của mình, bạn có thể xây dựng các phần tử và các thuộc tính một cách hiệu quả. Từ đó, cẩn thận khi dùng thẻ là tất cả những gì bạn cần để có thể tạo được một tài liệu XML được tổ chức tốt và hợp lệ. 

3.  XHTML

A.  Định nghĩa

  • XHTML (viết tắt của tiếng Anh Extensible HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng") là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn. XHTML 1.0 là Khuyến cáo của World Wide Web Consortium (W3C) vào ngày 26 tháng 2, 2000.

  • Tổng quan:

  • Về phương diện kĩ thuật, XHTML là một họ các kiểu tài liệu hiện tại và tương lai cùng các mô đun nhằm tái tạo lại, mở rộng, thâu nạp HTML, tái cấu trúc lại dưới dạng XML. Các dạng tài liệu thuộc họ XHTML tất cả đều dựa trên XML, và được thiết kế để làm cho các trình duyệt hiểu XML. XHTML là thế hệ kế tiếp HTML, và đã có một loạt các đặc tả được phát triển cho XHTML.

B.  Một số khác biệt giữa HTML và XHTML

  • Các phần tử phải được lồng nhau đúng cách: Trong HTML một số phần tử có thể được lồng vào nhau không đúng cách như thế này.

<b><i>This text is bold and italic</b></i>

  • Trong XHTML tất cả các phần tử phải được lồng vào nhau đúng cách như thế này:

<b><i>This text is bold and italic</i></b>

  • Chú ý: Một lỗi thường thấy ở các danh sách gạch đầu dòng lồng vào nhau mà quên mất rằng danh sách bên trong phải được đặt trong phần tử li. Ví dụ:

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  <li>Milk</li>

</ul>

  • Tài liệu đúng như sau:

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

  • Phải đặt ở dạng chuẩn (well-formed): Tất cả các phần tử XHTML phải được đặt lồng bên trong phần tử gốc <html>. Tất cả các phần tử khác có thể có các phần tử con. Các phần tử con phải đi theo cặp và phải được đặt lồng nhau đúng cách bên trong phần tử mẹ. Cấu trúc tài liệu cơ bản là:

<html>

  <head> ... </head>

  <body> ... </body>

</html>

  • Tên gọi của thẻ đều phải viết thường: Do XHTML kế thừa cú pháp của XML và mỗi trang XHTML đều là các ứng dụng XML cho nên XHTML có phân biệt chữ hoa chữ thường, điều không có ở HTML. Với HTML thì các thẻ như <br> và <BR> là hiểu là giống nhau nhưng một khi bạn đã xác định trang web của bạn là XHTML thì trình duyệt sẽ dịch hai thẻ này là khác nhau. HTML chấp nhận cách viết dưới:

<BODY>

  <P>This is a paragraph</P>

</BODY>

XHTML đòi hỏi phải viết lại phần trên thành:

<body>

  <p>This is a paragraph</p>

</body>

  • Tất cả các phần tử XHTML phải được đóng lại: Phần tử không rỗng phải có một thẻ đóng. HTML chấp nhận cách viết dưới:

  • Các phần tử rỗng cũng phải được đóng lại

<p>This is a paragraph

<p>This is another paragraph

  • XHTML đòi hỏi phải viết lại phần trên thành:

<p>This is a paragraph</p>

<p>This is another paragraph</p>

  • Các phần tử rỗng hoặc là phải có thể đóng hoặc là thẻ khởi đầu phải được kết thúc bằng />. HTML chấp nhận cách viết dưới:

This is a break<br>

Here comes a horizontal rule:<hr>

Here's an image <img src="happy.gif" alt="Happy face">

  • XHTML đòi hỏi phải viết lại phần trên thành:

This is a break<br />

Here comes a horizontal rule:<hr />

Here's an image <img src="happy.gif" alt="Happy face" />

  • Chú ý quan trọng: Để làm cho trang XHTML tương thích với các trình duyệt hiện nay thì nên đặt một khoảng trắng thêm vào trước kí tự / kiểu như <br />, và: <hr />

  • Các giá trị của thuộc tính phải được đặt trong dấu nháy kép: HTML chấp nhận cách viết dưới:

<table width=100%>

  • XHTML đòi hỏi phải viết lại phần trên thành:

<table width="100%">

  • Việc tối giản thuộc tính là bị nghiêm cấm: HTML chấp nhận cách viết dưới:

<dl compact>

<input checked>

<input readonly>

<input disabled>

<option selected>

<frame noresize>

  • XHTML đòi hỏi phải viết lại phần trên thành:

<dl compact="compact">

<input checked="checked" />

<input readonly="readonly" />

<input disabled="disabled" />

<option selected="selected" />

<frame noresize="noresize" />

4.  HTML5

A.  Định nghĩa

  • Về cơ bản, HTML 5 là một phiên bản mới của HTML / XHTML trong đó nó đặc biệt tập trung vào những mong muốn và nhu cầu của các nhà phát triển ứng dụng web. Nó cho phép các nhà phát triển thực hiện nhiều tính năng mới trong những điều mà họ tạo ra, ví dụ có rất nhiều chức năng kéo và thả mới, các yếu tố kết cấu mới cũng được cải thiện nhằm  hỗ trợ cho âm thanh và video.

B.  Sự ra đời của HTML5

  • Cho đến năm 2004, ngôn ngữ HTML được phát triển bởi World Wide Web Consortium. Rất nhiều nhà phát triển đã thất vọng với những cải tiến  trong ngôn ngữ HTML mà W3C đã đề xuất, nhiều ý kiến cho thấy họ đã mất liên kết với các nhu cầu của web hiện đại và phát triển ứng dụng. Một nhóm mới có tên WHATWG (Web Hypertext Application Technology Working Group) đã được thành lập để nghiên cứu một giải pháp mới. Giải pháp này đã được W3C chấp nhận. Sự hợp tác của W3C và WHATWG đã thai nghén ra HTML5 từ năm 2009.

C.  Các tính năng chính của HTML 5

  • The video element (Yếu tố video): HTML 5 cho phép bạn nhúng video với yêu cầu có plug-in hoặc codec, Điều này có nghĩa,  với HTML 5  tính năng video đã được xây dựng sẵn trong đó.

  • The canvas element (Yếu tố canvas): Về mặt kỹ thuật, yếu tố canvas cho phép vẽ đồ họa trên nền web. Trong điều khoản của người dùng cuối cùng , nó sẽ cho phép tạo ra những thứ như biểu đồ, hình ảnh động và biểu đồ / đồ thị. Bạn có thể thấy một ví dụ có thể được thực hiện với canvas, thậm chí ở giai đoạn này, trên Mozilla.

  • Local storage (Kho lưu trữ cục bộ): Giống như các tập tin cookie, HTML 5 gia tăng chức năng lưu trữ thông tin dựa vào web cục bộ trên máy tính của bạn. Sự khác biệt chính ở chức năng cookie là hầu hết các dữ liệu HTML 5 cho phép bạn lưu trữ, dữ liệu phụ thuộc vào các ứng dụng web.

  • Web workers: Theo phạm vi WHATWG, Web workers định nghĩa một API chạy dưới nền web, độc lập với các script khác và không làm ảnh hưởng đến hiệu suất của trang . Về cơ bản, điều này cho phép các trang web mã nặng chạy mượt hơn. Inimino cho rằng “ workers có thể được mở bởi các trang, chạy ở chế độ nền nên không ảnh hưởng đến giao diện tương tác của trang web người dùng , và thông báo cho trang khi công việc được thực hiện. Trong thời gian này, trang web có thể tương thích ngược với các công việc thông thường khác"

  • Như đã nói ở trên, HTML 5 không chỉ cải thiện quá trình tạo ra các ứng dụng mà nó còn cải thiện các chức năng cơ bản của trang web bằng cách làm cho các hoạt động mượt mà và trực quan hơn.

5.  AJAX

A.  Định nghĩa

  • AJAX (tiếng Anh: "Asynchronous JavaScript and XML" - nghĩa là "JavaScript và XML không đồng bộ") là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich Internet application). Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 năm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các trình duyệt từ 10 năm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

  • HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin

  • Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị

  • Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. (Mặc dù, việc trao đổi này có thể được thực hiện với nhiều định dạng như HTML, văn bản thường, JSON và thậm chí EBML, nhưng XML là ngôn ngữ thường được sử dụng).

  • XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.

  • Giống như DHTML, LAMP hay SPA, Ajax tự nó không phải là một công nghệ mà là một thuật ngữ mô tả việc sử dụng kết hợp một nhóm nhiều công nghệ với nhau. Trong thực tế, các công nghệ dẫn xuất hoặc kết hợp dựa trên Ajax như AFLAX cũng đã xuất hiện.

B.  So sánh với các ứng dụng web truyền thống

  • Điểm khác biệt cơ bản nhất của công nghệ này là việc xử lý thông tin được thực hiện trên máy yêu cầu dịch vụ thay vì trên máy xử lý yêu cầu dịch vụ như cách truyền thống. Máy xử lí yêu cầu dịch vụ chỉ làm một việc đơn giản là nhận thông tin từ máy khách và trả các dữ liệu về cho máy khách. Máy yêu cầu dịch vụ xử lý sơ bộ thông tin của người dùng nhập vào, sau đó chuyển về máy xử lí yêu cầu dịch vụ rồi nhận dữ liệu từ máy xử lí yêu cầu dịch vụ và xử lý để hiển thị cho người dùng.

  • Các ứng dụng Ajax phần lớn trông giống như thể chúng được đặt trên máy của người sử dụng hơn là được đặt trên một máy phục vụ thông qua Internet. Lý do: các trang được cập nhật nhưng không nạp lại (refresh) toàn bộ. "Mọi thao tác của người sử dụng sẽ gửi mẫu của một lời gọi JavaScript tới bộ xử lý (engine) Ajax thay vì tạo ra một yêu cầu HTTP (HTTP request)", Jesse James Garrett đã ghi như vậy trong bài luận đầu tiên định nghĩa về thuật ngữ này. "Mọi đáp ứng cho thao tác của người sử dụng sẽ không cần truy vấn tới máy phục vụ – ví dụ như việc kiểm tra một cách đơn giản sự hợp lệ của dữ liệu, sửa đổi dữ liệu trong bộ nhớ và thậm chí một vài thao tác duyệt trang – bộ xử lý Ajax tự nó đảm nhận trách nhiệm này. Nếu bộ xử lý cần gì từ máy phục vụ để đáp ứng – như khi nó gửi dữ liệu để xử lý, tải về bổ sung các mã giao diện hay nhận về dữ liệu mới – nó sẽ thực hiện các yêu cầu tới máy phục vụ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người sử dụng với ứng dụng web".

Description: http://upload.wikimedia.org/wikipedia/vi/thumb/6/62/So_s%C3%A1nh_web_truy%E1%BB%81n_th%E1%BB%91ng_v%C3%A0_AJAX.jpg/400px-So_s%C3%A1nh_web_truy%E1%BB%81n_th%E1%BB%91ng_v%C3%A0_AJAX.jpg

Hình 15: So sánh ứng dụng web truyền thống (trái) với AJAX

  • Các ứng dụng truyền thống về bản chất là gửi dữ liệu từ các form, được nhập bởi người sử dụng, tới một máy phục vụ web. Máy phục vụ web sẽ trả lời bằng việc gửi về một trang web mới. Do máy phục vụ phải tạo ra một trang web mới mỗi lần như vậy nên các ứng dụng chạy chậm hơn.

  • Mặt khác, các ứng dụng Ajax có thể gửi các yêu cầu tới máy phục vụ web để nhận về chỉ những dữ liệu cần thiết, thông qua việc dùng SOAP hoặc một vài dịch vụ web dựa trên nền tảng XML cục bộ khác. Trên máy thân chủ (client), JavaScript sẽ xử lý các đáp ứng của máy chủ. Kết quả là trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều. Thời gian xử lý của máy chủ web cũng vì thế mà được giảm theo vì phần lớn thời gian xử lý được thực hiện trên máy khách của người dùng.

C.  Ưu nhược điểm

  • Ưu điểm

  • Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang. Nếu sử dụng các phương pháp truyền thống, những nội dụng đó sẽ phải nạp lại toàn bộ với từng yêu cầu. Tuy nhiên, nếu sử dụng Ajax, một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải cập nhật, do đó giảm lượng lớn băng thông và thời gian nạp trang. 

  • Việc dùng các yêu cầu không đồng bộ (asynchronous request) cho phép giao diện người dùng của ứng dụng hiển thị trên trình duyệt giúp người dùng trải nghiệm sự tương tác cao, mượt mà. 

  • Việc sử dụng Ajax có thể làm giảm các kết nối đến server, do các mã kịch bản (script) và các style sheet chỉ phải yêu cầu một lần. 

  • Nhược điểm

  • Các trang web được tạo động không được ghi vào bộ lưu lịch sử lướt web của trình duyệt, do đó nút "back" (quay lui) của trình duyệt sẽ mất tác dụng quay lại trang thái trước đó của trang sử dụng Ajax, thay vào đó sẽ quay lại trang web trước đó mà người dùng ghé thăm. Để khắc phục có thể dùng các IFrame không hiển thị để gây ra sự thay đổi trong lịch sử trình duyệt và thay đổi phần neo của URL (bằng mã a #) khi chạy Ajax và theo dõi những sự thay đổi của nó. 

  • Việc cập nhật các trang web động cũng gây khó khăn cho người dùng trong việc bookmark (đánh dấu địa chỉ yêu thích) một trạng thái nào đó của ứng dụng. Cũng có những cách khắc phục cho vấn đề này, một số trong đó sử dụng mã xác định đoạn (fragment identifier) URL (phần URL ở sau dấu '#') để lưu vết, và cho phép người dùng đánh dấu và quay lại một trạng thái nào đó của ứng dụng. 

  • Do hầu hết các web crawler không thực thi mã JavaScript, các ứng dụng web sẽ cung cấp một phương thức thay thế để truy cập nội dung thông thường được truy cập bằng Ajax, để cho phép các máy tìm kiếm lập chỉ mục chúng. 

  • Bất kỳ người dùng nào có trình duyệt không hỗ trợ Ajax hay JavaScript, hoặc đơn giản là đã bị vô hiệu hóa JavaScript, sẽ đương nhiên không thể sử dụng Ajax. Tương tự, các thiết bị như điện thoại di động, PDA, và thiết bị đọc màn hình (screen reader) có thể không hỗ trợ JavaScript hay đối tượng XMLHttp được yêu cầu. Ngoài ra, các thiết bị đọc màn hình nếu có thể sử dụng Ajax đi nữa cũng vẫn có thể không đọc chính xác các nội dung động. 

  • Chính sách same origin policy có thể không cho phép sử dụng Ajax thông qua các tên miền khác nhau. 

  • Việc thiếu các chuẩn cơ bản của Ajax đồng nghĩa với việc không có nhiều sự chọn lựa thực tiễn tốt nhất để kiểm tra các ứng dụng Ajax. Các công cụ kiểm thử cho Ajax thường không hiểu các mô hình sự kiện, mô hình dữ liệu và giao thức của Ajax.

  • Mở ra một cách thức khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển web có thể không kiểm thử hết được. 

6.  Web 2.0

A.  Định nghĩa

  • Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của OReilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do OReilly Media và MediaLive International tổ chức vào tháng 10/2004. Dougherty không đưa ra định nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0: "DoubleClick là Web 1.0; Google AdSense là Web 2.0. Ofoto là Web 1.0; Flickr là Web 2.0. Britannica Online là Web 1.0; Wikipedia là Web 2.0. v.v...". Sau đó Tim OReilly, chủ tịch kiêm giám đốc điều hành OReilly Media, đã đúc kết lại 7 đặc tính của Web 2.0:

  • Web có vai trò nền tảng, có thể chạy mọi ứng dụng

  • Tập hợp trí tuệ cộng đồng

  • Dữ liệu có vai trò then chốt

  • Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng

  • Phát triển ứng dụng dễ dàng và nhanh chóng

  • Phần mềm có thể chạy trên nhiều thiết bị

  • Giao diện ứng dụng phong phú

  • Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò nền tảng ứng dụng. Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng 10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.

B.  Phân biệt web 1.0 và web 2.0:

Description: web 1.0 va web 2.0

Hình 16: So sánh web 1.0 và 2.0

  • Để phân biệt có những dấu hiệu sau:

Mức độ

Web 1.0

Web 2.0

Mức độ tập trung

Tập trung một nơi

Phân tán nhiều nơi

Mức độ tương tác

Dành cho cá nhân

Dành cho cá nhân , tập thể, xã hội

Mức độ nội dung

Cung cấp nội dung

Cung cấp các dịch vụ và hệ giao tiếp lập trình ứng dụng (APIs)

Mức độ sử dụng

Đọc được

Đọc được, viết được

Mức độ liên kết

Truyền phát giữa các hệ thống

Đồng bộ giữa các hệ thống

Mức độ hệ thống

Hệ thống bao gồm cấu trúc, nội dung tạo ra đã có tính toán trước

Tự sản sinh, tự đề xuất

Mức độ dữ liệu

Tĩnh

Động

Mức độ truy xuất

Cứng nhắc, không linh hoạt

Quan hệ mềm dẻo, lỏng

  • Web 1.0 là hình thức xuất bản nội dung lên Internet 1 chiều, thời kỳ cực thịnh của chúng là những năm 1995 - 2004.

C.  Công nghệ web 2.0

  • Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0. Hàng loạt công nghệ mới được phát triển nhằm làm cho ứng dụng trên web "mạnh" hơn, nhanh hơn và dễ sử dụng hơn, được xem là nền tảng của Web 2.0.

  • Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng.

  • Cung cấp nội dung

  • Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin). Có nhiều giao thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất cả đều dựa trên XML. Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính năng của website hay cho phép người dùng tương tác.

  • Dịch vụ web

  • Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0. Có hai loại giao thức chính là REST và SOAP. REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web đều được gọi qua API. Ngôn ngữ chung của dịch vụ web là XML, nhưng có thể có ngoại lệ.

  • Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties Broadcasting Protocol do Chris Dockree phát triển. Giao thức này cho phép các đối tượng ảo (tồn tại trên web) tự biết chúng "là gì và có thể làm gì”, nhờ vậy có thể tự liên lạc với nhau khi cần.

  • Phần mềm máy chủ

  • Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở "hậu trường". Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn.

  • Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm 2 loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng "gắn thêm" cho máy chủ web, có sử dụng giao tiếp API.

7.  Web services

A.  Tổng quan web services

  • Tổng quan về Service là một hệ thống có khả năng nhận một hay nhiều yêu cầu xử lý và sau đó đáp ứng lại bằng cách trả về một hay nhiều kết quả. Quá trình nhận yêu cầu và trả kết quả về được thực hiện thông qua các interface đã được định nghĩa trước đó. 

  • Vậy web service là gì: Web Service là một giao diện truy cập cung cấp các chức năng cho ứng dụng truy cập để gửi và nhận thông tin. Mô hình minh họa web services.

Description: F:\Users\toannd11\Desktop\TMP\WebServicesArchitecture.jpg

Hình 17: Mô hình minh họa web services

B.  Kiến trúc Web Service

  • Mô tả cơ chế hoạt động của Web Service









  • Cơ chế hoạt động của Web Service yêu cầu phải có 3 thao tác đó là : Find, Public, Bind. Trong kiến trúc Web Service, Service Provider công bố các mô tả về các service thông qua Service Registry. Service Consumer tìm kiếm trong các Service Registry để tìm ra các service mà họ cần sử dụng. Service Consumer có thể là một người hoặc cũng có thể là một chương trình. 

  • Kiến trúc phân tầng của Web Service









  • Các tầng truyền thống như Packaging, Description, và Discovery trong mô hình Web Service Stack là những tầng cung cấp khả năng tích hợp và cần thiết cho mô hình ngôn ngữ lập trình trung lập.

  • Tầng Discovery: Tầng Discovery cung cấp cơ chế cho người dùng khả năng lấy các thông tin mô tả về các Service Provider. Công nghệ được sử dụng tại tầng này đó chính là UDDI – Universal Description, Discovery and Integration.  

  • Tầng Desciption: Khi Web Service được  thực thi, nó cần phải đưa ra  các quyết định về các giao thức trên các tầng Network, Transport, Packaging mà nó sẽ hỗ trợ trong quá trình thực thi. Các mô tả về dịch vụ sẽ đưa ra phương pháp để làm thế  nào mà các Service Consumer có thể liên kết và sử dụng các service đó. Tại tầng Description, công nghệ được sử dụng ở đây chính là WSDL (Web Service Desciption Language) – Ngôn ngữ mô tả Web Service

  • Tầng Packaging: Việc thực hiện vận chuyển các dữ liệu Web Service được thực hiện bởi tầng Transport, tuy nhiên trước khi được vận chuyển, các dữ liệu cần phải được đóng gói lại theo các định dạng đã định trước để các thành phần tham gia vào mô hình Web Service có thể hiểu được, việc đóng gói dữ liệu được thi bởi tầng Packaging. Việc đóng gói dữ liệu bao gồm các công việc định dạng dữ liệu, mã hóa các giá trị đi kèm dữ liệu đó và các công việc khác. 

  • Tầng Transport: Tầng Transport có vai trò đảm nhiệm việc vận chuyển các Web Service Message, tại đây bao gồm một vài dạng công nghệ khác nhau cho phép các giao tiếp trực tiếp giữa các Application – to – Application dựa trên tầng Network. Mỗi công nghệ bao gồm các giao thức như tcp, http, smtp và jabber ..v.v.

  • Tầng Network: Tầng Network trong công nghệ Web Service chính xác giống tầng Network trong mô hình giao thức TCP/IP. Nó cung cấp khả năng giao tiếp cơ bản, định địa chỉ và định tuyến.

C.  Ngôn ngữ mô tả Web Service  - WSDL

  • Tổng quan về WSDL:

  • WSDL viết tắt của cụm từ Web Service Description Language – Ngôn ngữ mô tả Web Service. WSDL ra đời dưới sự phát triển của IBM và Microsoft. 

  • WSDL dựa trên giao thức XML để trao đổi thông tin trong môi trường tập trung hoặc phân tán.

  • WSDL mô tả cách thức truy cập tới Web Service và các hành động thực thi trên Web Service đó.

  • WSDL là ngôn ngữ cho việc mô tả các giao diện Web Service dựa trên nền tảng XML.

  • WSDL là ngôn ngữ mà UDDI Sử dụng.

  • Các thành phần của WSDL: Một tài liệu WSDL thường bao gồm các thành phần chính sau đây:

Thành phần

Mô tả

<type>

Định nghĩa kiểu dữ liệu được dùng trong Web Service

<message>

Các thông điệp được sử dụng trong Web Service

<port type>

Các thao tác được thực thi bởi Web Service

<binding>

Các giao thức giao tiếp dùng cho Web Service









8.  MVC

A.  Định nghĩa

  • Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nó giúp cho các developer tách ứng dụng của họ ra 3 thành phần khác nhau Model, View và Controller. Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác. Các thành phần trong mô hình MVC:

Description: http://lmt.com.vn/home/images/content_category/PHP/T9_2012/cac-thanh-phan-trong-mvc.png

Hình 18: Mô hình MVC

  • Model

  • Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý...

  • View

  • Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tượng GUI như textbox, images...Hiểu một cách đơn giản, nó là tập hợp các form hoặc các file HTML.

  • Controller

  • Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng... Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp với Model.

B.  Mô hình hoạt động của kiến trúc MVC:

  •  Hình sau mô tả lại luồng sự kiện được xử lý trong MVC:

  • - User tương tác với View, bằng cách click vào button, user gửi yêu cầu đi.

  • - Controller nhận và điều hướng chúng đến đúng phương thức xử lý ở Model.

  • - Model nhận thông tin và thực thi các yêu cầu.

  • - Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thị lại cho người dùng.

Description: http://lmt.com.vn/home/images/content_category/PHP/T9_2012/mvc-lam-viec-nhu-the-nao.jpg

C.  Ưu điểm và nhược điểm của MVC

  • Ưu điểm:

  • Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế. Do được chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì..

  • Nhược điểm:

  • Đối với dự án nhỏ việc áp dụng mô hình MC gây cồng kềnh, tốn thời gian trong quá trình phát triển. Tốn thời gian trung chuyển dữ liệu của các thành phần.

Comments

Popular posts from this blog

Python - Multithread to read one file

Install Xposed Inspector and Frida on Genymotion

OpenCA tutorial