ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

TỔNG QUAN
LẬP TRÌNH ỨNG DỤNG WEB

ThS. ĐỖ THỊ HƯƠNG LAN

 Nội dung

1. Nội dung 1: Giới thiệu và tổng quan

2. Nội dung 2: Phạm vi
3. Nội dung 3: Mô hình/Kiến trúc ứng dụng
4. Nội dung 4: Khái niệm cơ bản
5. Nội dung 5: Các bước/quy trình xây dựng ứng dụng

2
Web application là gì?
o Web Application (Web App)
▪ Ứng dụng web là một chương trình máy tính sử dụng trình duyệt web và công nghệ
web để thực hiện các tác vụ qua Internet
▪ Sử dụng kiến trúc Client – Server
▪ Tính tương tác cao

3
Ví dụ về Web application
o Facebook App, Twitter App …
o Google App: Gmail, Drive, Youtube, Calendar …
o Microsoft Office 365: Outlook, OneDrive, Word, Excel …
o Online Banking
o Online Shopping: Shopee, Lazada, Tiki …
o Asana, Trello ..
o Quản lý bán hàng, Quản lý nhân sự, Quản lý sinh viên …

4
Ví dụ về Web application

5
Ví dụ về Web application

6
Ví dụ về Web application

7
Desktop App, Web App & Mobile App
o Desktop, Web, Mobile App: phân biệt sự khác nhau về đặc tính kỹ thuật, chức
năng ..

8
Native App, Web App, Hybrid App
o Phân biệt Native App, Web App, Hybrid App

9
Mô hình/kiến trúc Ứng dụng

10
Mô hình client-server
o Mô hình Client-Server là kiến trúc mà trong đó có 1 bên đóng vai trò là máy
chủ, 1 bên là máy khách
o Client (máy hoặc chương trình): tạo yêu cầu
o Server đáp ứng yêu cầu của các client

11
Kiến trúc Web application

12
Kiến trúc Web application
o https://chungminhtu.github.io/WebSiteHoatDongNTN/#1

13
Ví dụ

14
Các khái niệm cơ bản
o URL & Hyperlink là gì?
o World Wide Web (WWW) là gì?
o Sự khác biệt giữa Internet và WorldWideWeb
o Web page và HTML
o Web Browser là gì?
o Web Server là gì?
o Website là gì?

15
URL & Hyperlink là gì?
o URL (Uniform Resource Locator): Địa chỉ của một tài nguyên trên Website. Mỗi
URL trên Web là duy nhất.
▪ Ví dụ: http://www.uit.edu.vn/

o Hyperlink (Link): dùng để liên kết đến tài nguyên khác khác.

16
World Wide Web (WWW) là gì ?
o World Wide Web là dịch vụ thông dụng ra đời vào năm 1990.
o Dịch vụ World Wide Web sử dụng giao thức HTTP(HyperText Transfer
Protocol).
o Để sử dụng dịch vụ này chúng ta cần một trình duyệt Web (gọi là Web
Browser).

17
Sự khác biệt giữa Internet và World Wide Web?
o Trên Internet chúng ta có thể gởi và nhận nhiều loại thông tin khác nhau như
thư điện tử (e-mail), các bài báo, tán ngẫu và các trang Web.

o Như vậy Web chỉ là một trong những dịch vụ của Internet.

18
Web page (trang Web) là gì?
o Là một loại tập tin đặc biệt được viết bằng ngôn ngữ siêu văn bản HTML.

o Web page có thể hiển thị các thông tin văn bản, âm thanh, hình ảnh...vv

o Trang Web này được đặt trên máy server sao cho máy client có thể truy cập
được nó

19
Web Browser (trình duyệt Web) là gì?
o Web Browser là một công cụ hay chương trình cho phép bạn truy xuất và xem
thông tin trên Web
o Web Browser là Web client trong mô hình Client – Server
▪ Ví dụ:
• IE (Internet Explorer)
• Nescape
• Mozilla Firefox
• Chrome

20
Web Server là gì?
o Web server: Máy phục vụ web
▪ Một số phần mềm web server chuyên dụng:
• Apache: mã nguồn mở
• Internet Information Services (IIS): Sản phẩm của Microsoft
▪ Thông thường Web server chạy trên các hệ điều hành khá mạnh như Unix, Linux,
Micrsoft Windows NT Server, Windows 2003 server.

21
Website là gì?
o Website: một tập hợp trang web bao gồm văn bản, hình ảnh, video, flash v.v..
o Website bao gồm
- Tên miền (là tên riêng và duy nhất của website).
- Hosting (là các máy chủ chứa các tệp tin nguồn).
- Source code (là các tệp tin html, xhtml,.. hoặc một bộ code/cms)
o Ví dụ:
• www.uit.edu.vn
• www.dantri.com.vn
• www.tuoitre.com.vn
• www.vnexpress.net

22
Phân loại Web
o Web tĩnh:
• Dễ phát triển
• Tương tác yếu
• Chỉ sử dụng HTML
• Người làm web tĩnh thường dùng các công cụ trực quan để tạo ra trang web

o Web động:
• Khó phát triển hơn
• Tương tác mạnh
• Sử dụng nhiều ngôn ngữ khác nhau, có ngôn ngữ backend
• Thường phải viết nhiều mã lệnh

23
Quy trình phát triển phần mềm - SDLC
o Quy trình phát triển phần mềm (Software Development Life Cycle) tập hợp
các hoạt động của tổ chức mà mục đích nhằm tạo ra một sản phẩm chất
lượng cao, đáp ứng sự mong đợi của khách hàng và hoạt động có hiệu quả …

24
Quy trình phát triển phần mềm

Giai đoạn Đầu ra Chịu trách nhiệm

REQUIREMENT/PLANNING Tài liệu Yêu cầu KH Sales, BA, PM, Customer

Tài liệu đề xuất giải pháp (Proposal)
Lấy yêu cầu/Lên kế hoạch
Tài liệu Quản lý dự án (Project Plan)
ANALYSIS Tài liệu Đặc tả yêu cầu phần mềm PM, BA, Senior
Phân tích
DESIGN Hồ sơ thiết kế, Flowchart, Diagram … Designer, BA
Thiết kế
CODING Sản phẩm (Source Code) Developers
Lập trình
TESTING Test case, Test plan, Bug Report … QA, Tester
Kiểm thử
DEPLOYMENT & MAINTENANCE Tài liệu Hướng dẫn sử dụng DevOps
Cài đặt và bảo trì

25
Các bước xây dựng 1 ứng dụng
o Khảo sát hiện trạng
o Phân tích
o Thiết kế
o Lập trình
o Kiểm thử
o Cập nhật và bảo trì

26
Khảo sát hiện trạng

27
Phân tích

o Xác định các đối tượng trong ứng dụng?

o Sự tương tác giữa các đối tượng (nội dung)?
o Thứ tự các đối tượng (nội dung)?
o Luồng hoạt động của ứng dụng?

28
Thiết kế

Kiến trúc ứng dụng

Giao diện

Thiết kế CSDL

Nội dung từng thành phần

Lưu đồ hoạt động

Mô hình phân rã chức năng

….

29
Thiết kế giao diện

30
Thiết kế User case

31
Flow chart

32
Lập trình
o Tiến hành triển khai các module trong ứng dụng bằng ngôn ngữ lập trình thích
hợp
o Frontend & Backend

33
Kiểm thử
o Kiểm tra tính đúng của các chức năng
o Kiểm tra trên nhiều trình duyệt
o Kiểm tra trên nhiều loại mạng
o Kiểm tra tốc độ
o Kiểm tra các liên kết
o Thử các lỗi bảo mật
o …

34
Công bố trên Internet
o Đăng ký Domain
o Thuê Hosting
o Đăng tải lên các Cửa hàng Ứng dụng
o Duy trì và phát triển và quảng bá

35
Đăng ký Domain
o Domain là tên miền cho Website: dễ nhận biết, gợi nhắc, dễ sử dụng
hơn so với địa chỉ IP

o Đăng ký tên miền (domain) cho địa chỉ Web site:

▪ Quốc tế: .com, .net, .org
▪ Quốc gia: .vn, sg

36
Hosting
o Xác định môi trường vận hành
▪ Máy chủ Windows
• Support ASP, PHP…, SQL Server, MySQL…
• Đắt hơn máy chủ Linux
▪ Máy chủ Linux
• Support PHP, JSP…, MySQL…
• Rẻ hơn máy chủ Windows
o Xác định dung lượng thực tế, khả năng sẽ mở rộng
o Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup
dữ liệu…

37
Các chủ đề chính
 Các kiến trúc, mẫu thiết kế ứng dụng
 HTML & CSS
 Javascript & Jquery
□ Thiết kế đáp ứng (RWD) & Responsive
□ Cải thiện giao diện mobile và AMP
□ Progressive Web App (PWA)
□ Tiện ích mở rộng (Browser Extension)
 Thao tác CSDL và CRUD
□ JSON, XML và AJAX
□ Web Services, API
 Cookies, Session, Token và Lưu trữ trạng thái
□ Viết lại và định tuyến URL