2. Web App Development
Tổng Quan WWW
Các khái niệm cơ bản
1
Domain name
1.1
Website, webpage, homepage
1.2
Web server, web browser
1.3
Quy trình xây dựng website
2
Hyperlink, hypertext
1.4
3. Web App Development
Tổng Quan WWW
vCác thuật ngữ
§ Internet : là một hệ thống thông tin toàn cầu có thể được
truy nhập công cộng gồm các mạng máy tính được liên kết
với nhau. Hệ thống này truyền thông tin theo kiểu nối
chuyển gói dữ liệu (packet switching) dựa trên một giao
thức liên mạng đã được chuẩn hóa (Wikipedia).
4. Web App Development
Tổng Quan WWW
vCác thuật ngữ
§ Mô hình Client-Server: là mô hình khách-chủ. Server chứa tài
nguyên dùng chung cho nhiều máy khách (Client) như các
tập tin, tài liêu, máy in…Máy Server luôn ở trang thái họat
động(24/24) và chờ và đáp ứng yêu cầu từ phía Client
§ Internet Server: là các Server cung cấp các dịch vụ Internet
(Web Server, Mail Server, FTP Server…)
§ Internet Service Provider (ISP): Là nơi cung cấp các dịch vụ
Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có
thể có nhiều loại dịch vụ Internet khác nhau. Ở VN có các
ISP: FPT, Viettel, VDC, SPT…
5. Web App Development
Tổng Quan WWW
vCác thuật ngữ
§ World Wide Web(WWW): là hệ thống các
website toàn cầu. Các website liên kết với nhau
thông qua các siêu liên kết
§ Là một dịch vụ của internet.
§ Là dịch vụ thông tin đa phương tiện, phân tán dựa
trên nền tảng siêu liên kết
§ Giúp truy cập đến các tài nguyên mạng
6. Web App Development
Tổng Quan WWW
vLịch sử hình thành WWW
§ World Wide Web được bắt đầu từ một dự án tại
CERN mang tên ENQUIRE, được điều hành
bởi Tim Berners-Lee năm 1989 và Robert
Cailliau năm 1990.
§ Được xây dựng trên cơ sở siêu văn bản, dự án
nhằm mục đích tạo ra thiết bị chia sẻ thông tin
giữa các nhà nghiên cứu.
§ Trang web đầu tiên đi vào hoạt động năm 1991.
7. Web App Development
Tổng Quan WWW
vLịch sử hình thành WWW
§ Ngày 30 tháng 4 năm 1993, World Wide Web
được sử dụng miễn phí
§ Bản sao của trang web đầu tiên đặt ở địa chỉ:
http://info.cern.ch/hypertext/WWW/TheProject.
html
10. Web App Development
Tổng Quan WWW
v Domain name(tên miền)
§ Tên miền là một địa chỉ Website trên Internet
giúp mọi người tìm kiếm và ghi nhớ một cách dễ
dàng
§ Tên miền thường gắn kèm với tên công ty và
thương hiệu của doanh nghiệp. Tên miền là duy
nhất và được cấp phát cho chủ thể nào đăng ký
trước
11. Web App Development
Tổng Quan WWW
vDomain name(tên miền) - 2 dạng tên miền
§ Tên miền quốc tế: www.domain-name.com (.net, .biz
.org, .info...)
§ Tên miền quốc gia: www.domain-
name.com.vn (hoặc .net.vn, .biz.vn .org.vn, .gov.vn...)
12. Web App Development
Tổng Quan WWW
vDomain name(tên miền)
§ .COM.VN/ BIZ.VN: Dành cho tổ chức,doanh
nghiệp, cá nhân họat động thương mại
§ .EDU.VN: cơ quan, tổ chức, doanh nghiệp có
hoạt động liên quan tới giáo dục, đào tạo
§ .GOV.VN: các cơ quan, tổ chức thuộc bộ máy
nhà nước ở trung ương và địa phương
13. Web App Development
Tổng Quan WWW
vDomain name(tên miền)
§ .NET.VN: các cơ quan, tổ chức, doanh nghiệp
thực hiện chức năng về mạng nói chung
(giaoduc.net.vn)
§ .ORG.VN: các tổ chức chính trị, xã hội và các
cơ quan, tổ chức, doanh nghiệp có hoạt động
liên quan đến lĩnh vực chính trị, xã hội
(www.vr.org.vn/, www.sggp.org.vn)
14. Web App Development
Tổng Quan WWW
vDomain name(tên miền)
§ .INT.VN: các tổ chức quốc tế tại Việt Nam
(http://www.iom.int.vn/)
§ .AC.VN: các tổ chức nghiên cứu
(www.vast.ac.vn/)
§ .PRO.VN: các tổ chức, cá nhân hoạt động trong
những lĩnh vực có tính chuyên ngành cao
(vietart.pro.vn)
15. Web App Development
Tổng Quan WWW
vDomain name(tên miền)
§ .INFO.VN : các tổ chức cung cấp các nguồn dữ
liệu thông tin về các lĩnh vực kinh tế, chính trị,
văn hóa, xã hội (thongke.info.vn)
§ .NAME.VN:tên riêng của cá nhân tham gia hoạt
động Internet
§ . HEALTH.VN:các tổ chức y tế, dược phẩm
17. Web App Development
Tổng Quan WWW
vURL (Uniform Resource Locator)
§ URL được dùng để tham chiếu đến những tài
nguyên trên mạng Internet.
§ Khả năng siêu liên kết của các website có được là
nhờ URL.
18. Web App Development
Tổng Quan WWW
v Các thành phần của URL:
§ Tên giao thức. Các giao thức hiện nay thường gặp là http hoặc
https, ngoài ra thì còn có ftp,mailto...
§ Tên miền.
§ Cổng chỉ định (Có thể có hoặc không)
§ Đường dẫn trên máy chủ chứa tài nguyên.
§ Các truy vấn, các mục con. (Có thể có hoặc không)
19. Web App Development
Tổng Quan WWW
vWebsite
§ Là tập hợp các tài liệu hay trang web, liên kết với
nhau thông qua các siêu liên kết
§ Website chỉ nằm trong một tên miền ( domain name)
hoặc tên miền phụ (subdomain)
§ Trang web được lưu trữ ( web hosting ) trên máy chủ
web ( server web ) và được truy cập thông qua
Internet
20. Web App Development
Trang web cá
nhân
Phân loại
Trang web
thương mại
Tổng Quan WWW
Trang web
chính phủ
Trang web tổ
chức phi chính
phủ
22. Web App Development
Tổng Quan WWW
vWeb tĩnh
§ Nội dung trang web cố định, không thay đổi theo
ngữ cảnh
§ Được thiết kế trực tiếp bằng ngôn ngữ HTML
§ Không có tương tác với người dùng
§ 1 trang web có phần mở rộng là .html/.htm
§ Khi cập nhật thường phải thiết kế lại
23. Web App Development
Tổng Quan WWW
vWeb động
§ Nội dung trang web thay đổi theo ngữ cảnh, được
thực hiện bằng một ngôn ngữ lập trình động: php,
asp.net, ….
§ Phần trình bày và phần nội dung website là tách biệt
nhau.
§ Có tương tác với người dùng
§ Khi cập nhật không phải thiết kế lại
24. Web App Development
Tổng Quan WWW
vWebpage
§ Một website có rất nhiều trang web, mỗi
trang web đó gọi là webpage
§ Một webpage có thể là 1 page, 1 bài viết
25. Web App Development
Tổng Quan WWW
vTổ chức website
§ Liên kết các webpage lại thành chủ đề
§ Được tổ chức thông qua các thư mục con/ các liên
kết để kết nối các webpage lại với nhau
§ Nhìn thấy được tổng thể website
28. Web App Development
Tổng Quan WWW
vHomepage
§ Là trang mặc định của một website khi người
dùng truy cập vào
§ Được người dùng thiết lập
§ Chứa liên kết đến những trang khác của website
30. Web App Development
Tổng Quan WWW
vwebserver
§ Máy tính mà trên đó cài đặt phần mềm phục vụ Web
(đôi lúc phần mềm này cũng được gọi là webserver)
§ Webserver = host + webserver + tài liệu
§ Các webserver:WAMP, LAMP, XAMPP, MAMP,
WIMP
31. Web App Development
Tổng Quan WWW
vwebserver
§ WAMP: Windows, Apache, Mysql, PHP
§ LAMP : Linux, Apache, Mysql, PHP
§ XAMPP : X, Apache, Mysql, PHP/Perl
§ MAMP: Macintosh, Apache, Mysql, PHP
§ WIMP : Windows, IIS, Mysql, PHP
vMỗi webserver tương ứng với hệ điều hành
§ Macintosh : XAMPP, MAMP
§ Linux : XAMPP, LAMP
§ Windows : XAMPP, WAMP, WIMP
32. Web App Development
Tổng Quan WWW
vwebserver
§ Windows NT Server 4.0 : IIS4
§ Windows 2000 : IIS5
§ Windows XP Pro : IIS5.1
§ Windows XP Pro x64 : IIS6
§ Windows Server 2003 : IIS6
§ Windows Vista : IIS7
§ Windows Server 2008 : IIS7
§ Windows Server 2008 R2 : IIS7.5
§ Windows 7 : IIS7.5
33. Web App Development
Tổng Quan WWW
vwebserver
Hỗ trợ giao diện phpMyAdmin
§ WAMP
§ XAMPP
§ MAMP
§ LAM
34. Web App Development
Tổng Quan WWW
vWeb Browser - Trình duyệt web
§ Là một phần mềm ứng dụng cho phép người
sử dụng xem và tương tác với các văn bản,
hình ảnh, đoạn phim, nhạc, trò chơi và
các thông tin khác ở trên một trang web
của một địa chỉ web www hoặc mạng nội
bộ
§ Văn bản và hình ảnh trên một trang web
có thể chứa siêu liên kết tới các trang web
khác của cùng một địa chỉ web hoặc địa
chỉ web khác.
35. Web App Development
Tổng Quan WWW
vWeb Browser - Trình duyệt web
§ Trình duyệt web đọc định dạng HTML để
hiển thị, do vậy một trang web có thể hiển
thị khác nhau trên các trình duyệt khác
nhau
§ Một số trình duyệt: Internet Explorer, Mozilla
Firefox,Safari, Google Chrome,Opera.
§ Một số trình duyệt web cho Điện thoại di động
:Mozilla Firefox, Safari, Google
Chrome,Opera, UCWeb
36. Web App Development
Tổng Quan WWW
vWeb Browser - Trình duyệt web
§ Hỗ trợ đa giao thức: LDAP, NNTP,
SMTP, POP, HTTP, FTP…
§ Có thể sử dụng các plugins để xử lý định
dạng âm thanh, video…
§ Có cache để lưu trữ các file tạm thời,
history, bookmark….
37. Web App Development
Tổng Quan WWW
v Hyperlink
§ Là một siêu liên kết, là nguồn dẫn tài liệu để
khi người dùng click vào nó sẽ được dẫn đến
một trang khác hoặc một vị trí nào đó trên trang
web.
§ Hypertext là văn bản với các siêu liên kết.
Văn bản, nội dung bao gồm có siêu liên kết
“Hyperlink” được gọi với tên làAnchor text.
38. Web App Development
Tổng Quan WWW
vHyperText (siêu văn bản)
§ Siêu văn bản là một loại văn bản thông thường
nhưng lại chứa một hay nhiều tham chiếu
tới các văn bản khác.
§ Các ngôn ngữ siêu văn bản:
• HTML
• XML
40. Web App Development
Quy Trình Xây Dựng Website
v1. Đặc tả
§ Xác định mục đích và đối tượng truy cập vào
website:
• Mục tiêu của website là gì
• Đối tượng sử dụng website là ai
§ Xác định nội dung, cách trình bày, công nghệ sử dụng
§ Xác định sitemap
41. Web App Development
Quy Trình Xây Dựng Website
v2. Phân tích
§ Xác định chức năng của website và các liên kết có
trong website, nội dung website, công nghệ sử dụng (
chỉ phân tích chi tiết, chưa cần xác định màu sắc ở
giai đoạn này)
v3. Thiết kế
§ Thiết kế giao diện: font, cỡ chữ, hình ảnh, màu sắc
§ Xây dựng css
42. Web App Development
Quy Trình Xây Dựng Website
v3. Thiết kế
§ Xây dựng các quy tắc: đặt tên trang, đường dẫn….
§ Xây dựng kịch bản truy cập website
v4. Lập trình
§ Phát triển ứng dụng web
§ Có thể thực hiện song song với mục thiết kế
43. Web App Development
Quy Trình Xây Dựng Website
v5. Kiểm thử
§ Kiểm tra trên nhiều trình duyệt, nhiều thiết bị
§ Kiểm tra tốc độ truy cập
§ Kiểm tra các lỗi do lập trình
§ Kiểm tra các liên kết
v6. Triển khai website
§ Tên miền: đăng ký tên miền
§ Hosting: sử dụng host miễn phí hoặc thuê dịch vụ
web hosting
44. Web App Development
Quy Trình Xây Dựng Website
v7. Duy trì website
§ Cập nhật nội dung website thường xuyên
§ Cập nhập trình trạng an ninh ….
45. Web App Development HIU
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Nội dung website phù hợp với mục đích trang web,
được tổ chức chặt chẽ, rõ rang.
§ Quan tâm tới chính tả, ngữ pháp
§ Nội dung phù hợp với đối tượng mà website hướng
tới
46. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Website đơn giản: chỉ gồm text, ít hình ảnh, video (
google.com, bing.com )
§ Website trung bình: chứa một số hình ảnh, dễ tải,
không quá đơn giản ( các trang tin tức thông
thường)
§ Website phức tạp: có nhiều hình ảnh, script, video …
chiếm nhiều tài nguyên, thời gian tải chậm
47. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Có nhiều phong cách thiết kế:
• Chuyên nghiệp: Microsoft
• Hàn lâm
• Teen
• Nghệ thuật …
48. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Lưu ý tới đặc điểm người dùng:
• Người dùng thường lướt qua trang web trước. Trang web
đẹp mắt sẽ thu hút được người dùng
• Bố cục trang web phải đồng nhất, rõ ràng, thân thiện,
những phần quan trọng nên đặt ở vừa tầm mắt. Đồng nhất
trên các trình duyệt, đơn giản hóa
• Lưu ý độ tương phản giữa màu nền, màu chữ, độ lớn của
font, tông màu đồng bộ
• Các liên kết chặt chẽ, hợp lý
• Sử dụng thanh cuộn nếu như webpage có kích thước lớn
hơn kích thước màn hình
49. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Nội dung website:
• Tránh phóng đại thông tin
• Chỉ rõ nguồn trích
• Bảo vệ sự riêng tư, thông tin cá nhân
§ Dung lượng trang web vừa phải nhằm đảm bảo tốc
độ nhanh
50. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Khi kiểm thử:
• Người kiểm thử không nên là người phát triển website
• Kiểm thử là quá trình lặp đi lặp lại
§ Khi triển khai
• Chọn nơi đăng ký tên miền có uy tín, bảo mật và chế độ
chăm sóc khách hàng tốt có chính sách đi kèm
• Hosting: là máy chủ để đặt toàn bộ website
51. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Khi triển khai
• Hosting: là máy chủ để đặt toàn bộ website
• Chọn nơi hosting tùy thuộc vào
– Hệ điều hành: window, Linux
– CSDL: mysql, sql server
– Công nghệ sử dujngL asp.net, php, ….
– Dung lượng website
– Băng thông
– Chính sách an ninh
52. Web App Development
Quy Trình Xây Dựng Website
v Lưu ý khi xây dựng website
§ Lập trình:
• Kiểm tra dữ liệu người dùng nhập vào
• Không dùng dữ liệu người dùng nhập vào làm 1 phần
câu lệnh sql mà chưa kiểm tra nhằm tránh lỗi SQL
Injection
• Các hình ảnh trong website nên được sử dụng lại
• Rewrite url
• Đặt tên thống nhất trên cả site, có ý nghĩa, tránh dùng
khoảng trắng hoặc tiếng việt có dấu
53. Web App Development
Quy Trình Xây Dựng Website
v 3 layers
Web
development
Structure
Behaviors
Style
54. Web App Development
Quy Trình Xây Dựng Website
v Structure (content layer)
§ The underlying HTML code of that page
§ Consist of text or images
§ Includes the hyperlinks that visitors will use to navigate
around web site
63. Web App Development
Quy Trình Xây Dựng Website
v Style (presentation) layer
§ The style or presentation layer dictates how a structured
HTML document will look to a site's visitors
§ Defined by CSS (Cascading Style Sheets)
64. Web App Development
Quy Trình Xây Dựng Website
v Behavior layer
§ Web page that can respond to different user actions or make
changes to a page based on a set of conditions
§ The behavior level would be the JavaScript interactions on
the page
