Từ việc truy cập thông tin, giao tiếp, giáo dục, giải trí đến việc quản lý công việc và kinh doanh, ứng dụng web đang dần trở thành một phần không thể thiếu của chúng ta.. Trong báo cáo
Trang 1
TRƯỜNG ĐẠI HỌC YERSIN ĐÀ LẠT
KHOA CÔNG NGHẸ THÔNG TIN
Trang 2
PHẦN NHẠN XÉT CỦA GIẢNG VIÊN
Ngày tháng năm
Ký và ghỉ rõ họ tên
MỤC LỤC
Trang 3Chương 1: Tìm Hiểu về Lập Trình Web (Cơ Sở Lý Thuyết)
1.1 Khái Niệm .22++ 22112 1211111111211211111117210111110210011 1121111110011 10011
A.Chức Năng cơ bản
B.Các Mô hình phát triển web Ă.- - 11
Mô hình IMVC e.eee 44
Chương 2: Xây Dựng Ứng Dụng Web (Triển Khai Thực Tế)
2.1 Bài Toán Ứng Dụng . -: c2 2 21 2n He 18
2.2 Xây Dựng Chương Trình ch H ng giết 19
Chương 3: Kết Quả Chương Trình: - ác c ccksssseiersrrsrsves 20
Tài Liệu Tham Khảo .-c LH SH ng ng kg kế 23
Trang 4
DANH MUC HINH
STT Tên viết tất Tên đầy đủ AT CAN cà „ N
(Nếu là tiếng nước ngoài)
1 CMF Concurrent Max Flow
Trang 5
BÁO CÁO TIẾN ĐỌ
Nội dung công |Phân [74/7 |rạ|T [rz T17|I |re|lf |T4il l1 |T4a [T44 | |146 | r4z | Hoàn
việc công 2 4 8 0 2 5 thành Phân công công | Cả x |x |X |X |X x |x |x |x X X X X X X X ee việc nhóm
Tim hiểu lý| Nguyễn |x |x |x |x |x x |x |x |x X X X X X X X
thuyết và viết | Văn Phú
1.1
Tìm hiểu lý | Kim Văn|x |x |x |x |x x |x |x [x x x x x x x x
thuyết và viết | Hoan
1.2
Tìm hiểu lý | Đoàn x |x |x |x |x x |x |x |X x x x x x x X thuyết và viết | Ngọc
Tổng hop va| Kim Van|x |x |x |x |x x |x |x |x X X X X X X X
cao
Thiét kế | Khánh x |x |x |x |X x |x |x |x x x x x x x x x template Ly
Xây dung code | Kim Van|x |X |x |X |X x |x |x |x X X X X X X X
dung Web
Thu thập hình | Nguyén |x |x |x |x |x x |x |x |x X X X X X X X
ảnh và kết quả | Văn Phú X ứng dụng Web
Demo lab Nguyén |x |x |x |x |x x |x |X |x X X x x x x x x
Van Phu
Trang 6LỜI NÓI ĐẦU
Xin chào thầy và các bạn,
Trong thời đại công nghệ ngày nay, ứng dụng web không chỉ là một phần không thể thiếu
trong cuộc sống hàng ngày, mà còn là cầu nối quan trọng, kết nối hàng tỷ người trên khắp thế giới Điều đó chứng mỉnh sức mạnh và ảnh hưởng lớn của lập trình web đối với cuộc
sống con người Ứng dụng web không chỉ là những trang web đơn thuần, mà chúng đã trở thành những công cụ mạnh mẽ hỗ trợ mọi khía cạnh trong đời sống Từ việc truy cập thông tin, giao tiếp, giáo dục, giải trí đến việc quản lý công việc và kinh doanh, ứng dụng
web đang dần trở thành một phần không thể thiếu của chúng ta Trong báo cáo này,
chúng tôi sẽ không chỉ giới thiệu về quá trình học và áp dụng kiến thức môn "Lập Trình Web ", mà còn nhìn nhận về vai trò quan trọng của lập trình web trong việc xây dựng những ứng dụng web có ảnh hưởng tích cực đến cuộc sống hàng ngày của chúng ta.Trén thực tế không có sự thành công nào mà không gắn liền với những sự hỗ trợ, giúp đỡ dù ít
hay nhiều, dù trực tiếp hay gián tiếp của người khác Trong suốt thời gian đã và đang học tập tại trường đến nay, em đã nhận được rất nhïềusự quan tâm giúp đỡ của quý Thầy Cô,
gia đình và bạn bè.Và đặc biệt, trong học kỳ này Em xin cảm ơn thầy Nguyễn Đức tấn đã hướng dẫn,góp ý, thảo luận để bài báo cáo này của em được hoàn thiện Trong thời gian được học tập và thực hành dưới sự hướng dẫn của cô, chúng em không những thu được
rất nhiều kiến thức bổ ích, mà còn được truyền sự say mê và thích thđối với bộ môn Đồ án lập trình web nâng cao.Mặc dù đã rất cố gắng hoàn thiện báo cáo với tất cả sự nỗ lực, tuy
nhiên, dbước đầu đi vào thực tế, tìm hiểu và xây dựng báo báo trong thời gian có hạn, với
lượng kiến thức còn hạn chế, nhiều bỡ ngỡ, nên báo cáo chắc chắn sẽ không thể tránh
khỏi những thiếu sót Chúng em rất mong nhận được sự quan tâm, thông cảm và những đóng góp quý báu của thầy cô và các bạn để đồ án này ngày càng hoàn thiện hơn
Trang 7Phần 1: Tìm Hiểu về Lập Trình Web (Cơ Sở Lý Thuyết)
Lập trình web bao gồm nhiều khía cạnh và chức năng cơ bản, trong đó:
A.1 Mã Ngôn Ngữ Web
cách thông tin được hiển thị và tương tác trên trình duyệt
¢ HTML (Hypertext Markup Language):
¢ Mã ngôn ngữ chính để tạo cấu trúc và định dạng nội dung trên trang web
Trang 8
¢ Str dung thé dé đánh dấu và tổ chức các phần khác nhau của trang
¢ CSS (Cascading Style Sheets):
* Mangén nei’ dung dé dinh dang va trang tri giao dién cua trang web
* ac dinh kiéu font, mau sac, knoang cach, va cdc thudéc tinh thiét ké khac
® - Thường được tích hợp vào mã HTML
¢ Python (Dtiango, Flask):
¢ Python cé cac framework nhu Dtiango va Flask dé phat trién ứng dụng web
¢ Cung cấp cú pháp sáng tạo và hiệu quả cho việc xây dựng các ứng dụng phức tạp
® - Ruby (Ruby on Rails):
e© - Ruby được sử dụng trong kết hợp với framework Ruby on Rails để phát triển ứng dụng web nhanh chóng và hiệu quả
Trang 9A.2 Framework và Thư Viện
+ React Qncuraris
®
v ý jQuery 3 `
phát triển và triển khai ứng dụng web hiệu quả và đa nền tảng
Dưới đây là một số điểm chính về ASP.NET Core:
1 Mã Nguồn Mở và Đa Nền Tảng:
* ASP.NET Core là mã nguồn mở, điều này có nghĩa là mã nguồn của nó có sẵn
để mọi người xem xét, cải thiện và sử dụng một cách tự do Nó cũng hỗ trợ đa nền tảng, nghĩa là có thể chạy trên Windows, Linux và macOS
2 Hiệu Năng Cao và Tối Ưu Hóa:
¢ ASP.NET Core duoc tdi uu hóa để cung cấp hiệu suất tốt, đặc biệt là trong việc
xử lý các yêu cầu HTTP và chịu tải cao
3 Cau Trúc Mô-đun và Middleware:
Trang 10
e© - Sử dụng cấu trúc mô-đun để linh hoạt kết hợp các thành phần của ứng dụng
và sử dụng middleware để xử lý yêu cầu HTTP và HTTP responses
ó Đa Ngôn Ngữ và Đa Framework:
e Hỗ trợ nhiều ngôn ngữ lập trình như C#, F#, và VB.NET Nó cũng có thể tích hợp với các framework phổ biến như Entity Framework để làm việc với cơ
sở dữ liệu
7 Tương Thích Cloud và Docker:
e_ Dễ dàng triển khai trên các dịch vụ đám mây như Azure, AWS, và Google Cloud Platform Hỗ trợ Docker giúp đóng gói ứng dụng và triển khai chúng
dễ dàng trên các môi trường khác nhau
e ASP.NET Core duoc thiét ké dé cung cấp sự linh hoạt và hiệu suất cao cho
phát triển ứng dụng web, đặc biệt là trong môi trường đa nền tảng và đám mây
e Bootstrap: lA một framework (khuôn khổ) phổ biến được sử dụng để phát
triển trang web và ứng dụng di động Nó được tạo ra bởi Twitter và đã trở thành một dự án mã nguồn mở, giúp người phát triển xây dựng trang web linh hoạt, đáp ứng và có giao diện người dùng đẹp mắt một cách nhanh chóng
Dưới đây là một số đặc điểm chính của Bootstrap:
1 CSS va JavaScript:
e Bootstrap cung cap một bộ CSS và JavaScript sẵn có, giúp tạo ra giao diện
thân thiện và tương thích trên nhiều loại thiết bị
2 Responsive Design:
Trang 11e Bootstrap hé trợ thiết kế đáp ứng, tức là trang web có thể thích ứng với
kích thước màn hình của người dùng, từ máy tính đến điện thoại di động
3 Grid System:
e©_ Sử dụng hệ thống lưới (grid system) linh hoạt giúp dễ dàng cấu trúc và tổ
chức các thành phần trên trang web
4 Components va Styles:
e Bootstrap cung cap mét loat cac thành phần giao diện người dùng như buttons, forms, navigation bars, modals, va nhiéu styles dé gitip tao ra giao dién thd vi va chuyén nghiép
e Ruby on Rails (Ruby):
e Framework nay tập trung vào sự đơn giản va tăng cường hiệu suất Nó tự động ánh xạ các thư mục và file theo quy ước để giảm đau đầu cho lập trình viên
A.2.2 Thư Viện
Trang 12Thư viện là một bộ sưu tập các hàm, module, và class được viết sẵn để hỗ trợ lập
trình viên trong việc thực hiện các nhiệm vụ cụ thể
e© - Thư Viện: Cung cấp các công cụ và chức năng cụ thể để bạn sử dụng trong
ứng dụng của mình mà không yêu cầu một cấu trúc tổ chức cụ thể A.3 Giao Thức HTTP và API
A.3.1 Giao Thức HTTP (Hypertext Transfer Protocol)
Trang 13o_ Định nghĩa: HTTP là một giao thức truyền tải dữ liệu giữa máy khách và máy chủ trên World Wide Web Nó định rõ cách dữ liệu được truyền tải và định dạng của nó, làm cho việc giao tiếp giữa các thành phần của một ứng dụng web trở nên hiệu quả
o Phuong thức:
e_ GET: Yêu cầu dữ liệu từ một nguồn cụ thể
e_ POST: Gửi dữ liệu đến một nguồn để xử lý, thường được sử dụng trong việc đăng ký và tải lên dữ liệu
e PUT: Cập nhật dữ liệu tại một nguồn cụ thể hoặc tạo nguồn mới nếu nó không tồn tại
e _ DELETE: Xóa dữ liệu tại một nguồn cụ thể
A.3.2 API (Application Programming Interface)
e Dinh nghĩa: API là một bộ các quy tắc và công cụ cho phép các phần mềm khác tương tác với nhau Trong lập trình web, API thường được sử dụng để kết
nối và truyền thông giữa các ứng dụng và dịch vụ khác nhau
Cac Loai API:
e API Web: Str dung giao thức HTTP dé truyền tải dữ liệu qua mạng Có thể trả về
dữ liệu dưới dạng XML hoặc JSON
e API RESTful: Áp dụng các nguyên tắc của REST (Representational State Transfer) để tạo ra các dịch vụ web mạnh mẽ, dễ bảo trì, và có thể mở rộng
® A.3.3 Sự Tương Tác giữa HTTP và API
e_ Quy Trình Tương Tác:
e Yéu Cau (Request): May khách gửi yêu cầu HTTP đến một địa chỉ cụ thể
e© - Xử Lý: Máy chủ xử lý yêu cầu và trả về một HTTP response
¢ Phan Héi (Response): May chủ gửi lại phản hồi với dữ liệu được yêu cầu hoặc thông báo lỗi
e Ưu Điểm của Giao Thức HTTP và API:
Trang 14e _ Tính Linh Hoat: HTTP va API cho phép tương tác giữa các ứng dụng và dịch vụ khác nhau, tạo ra sự lĩnh hoạt trong phát triển và tích hợp
e Tính Mở Rộng: Khả năng mở rộng dự án thông qua việc kết nối với các API công
cộng hoặc tư nhân
e Tính Tích Hợp: Đơn giản hóa quá trình tích hợp các dịch vụ và chỉa sẻ dữ liệu giữa các ứng dụng
B Các Mô Hình Phát Triển Web
1 Mô Hình Client-Server:
e Đặc Điểm:
e Chia thanh hai thành phần chính: máy chủ (server) và máy khách (client)
e Máy chủ xử lý yêu cầu và cung cấp dữ liệu
e _ Máy khách hiển thị dữ liệu và tương tác với người dùng
Trang 15Chia ứng dụng thành ba thành phần: Model, View và Controller
Model: Chứa dữ liệu và logic xử lý
View: Hiển thị dữ liệu và tương tác với người dùng
Controller: Xử lý yêu cầu và điều hướng luồng điều khiển
Ưu Điểm:
Tách biệt logic giúp dễ bảo trì và mở rộng ứng dụng
Cung cấp sự linh hoạt trong việc thay đổi giao diện người dùng mà không ảnh
ViewModel: Giữ liên kết giữa Model và View
Dữ liệu được hiển thị trực tiếp trên View thông qua ViewModel
Trang 16Mô hình MVC (Model-View-Controller) là một kiến trúc thiết kế phổ biến trong
phát triển phần mềm, đặc biệt là trong lập trình web Nó giúp tách biệt các thành phần
khác nhau của ứng dụng để dễ bảo trì, mở rộng và tái sử dụng mã nguồn Mô hình này được chỉa thành ba thành phần chính: Model, View, và Controller
1 Model:
1.4 Đặc Điểm Chính của Model:
e_ Model là một phần của mô hình MVC, chịu trách nhiệm quản lý dữ liệu và logic xử lý trong ứng dụng
1.2 Chức Năng Cơ Bản:
e_ Quản Lý Dữ Liệu:
e Model giữ và duy trì thông tin liên quan đến ứng dụng, bao gồm cả dữ liệu
như thông tin người dùng, cài đặt, và bất kỳ thông tin nào khác cần thiết
Logic Xử Lý:
e Bên cạnh việc lưu trữ dữ liệu, Model cũng chứa các hàm và phương thức
để thực hiện các thao tác xử lý logic trên dữ liệu Điều này bao gồm các
Trang 17phép toán, kiểm tra điều kiện, và mọi hoạt động cần thiết để duy trì tính nhất quán của dữ liệu
e _ Không Liên Quan Đến Giao Diện:
e Model không chứa bất kỳ logic liên quan đến giao diện người dùng nào Nó
tập trung hoàn toàn vào việc quản lý dữ liệu và logic kinh doanh 1.3 Quy Trình Hoạt Động Cơ Bản:
a Nhan Yêu Cầu từ Controller:
e Model nhan yêu cầu từ Controller, thường là thông qua các phương thức
và hàm được xác định trong Model
e _ Xử Lý và Cập Nhật Dữ Liệu:
e_ Model thực hiện các thao tác cần thiết để xử lý yêu cầu, bao gồm việc cập nhật dữ liệu nếu cần thiết
b Thông Báo Kết Quả cho Controller:
e©_ Sau khi xử lý yêu cầu, Model thông báo cho Controller về kết quả, chẳng hạn như thông tin cập nhật, thông báo lỗi, hoặc bất kỳ sự kiện nào khác mà
Controller cần biết để cập nhật giao diện người dùng
c _ Không Liên Quan Đến Giao Diện:
e _ Model không có trách nhiệm hiển thị thông tin cho người dùng Nó chỉ chịu trách nhiệm về dữ liệu và logic, giữ cho nó độc lập với giao diện người dùng
1.4 _ Ưu Điểm của Model trong Mô Hình MVC:
e Tach Biét Dữ Liệu và Logic:
e Model gitip tach biệt hoàn toàn dữ liệu và logic từ các thành phần khác của
ứng dụng Điều này giúp giữ cho mã nguồn dễ bảo trì và tái sử dụng
e Tinh Nhat Quan:
© Model git’ cho dé liu lu6én 6n dinh và nhất quán, đảm bảo rằng mọi thay
đổi được xử lý một cách đúng đắn
Tính Tái Sử Dụng:
Trang 18e Dữ liệu và logic xử lý trong Model có thể được tái sử dụng cho nhiều giao
diện người dùng khác nhau hoặc trong các phần mềm khác nhau 1.5 Nhược Điểm của Model trong Mô Hình MVC:
e Tang Phtrc Tap:
e_ Trong một số trường hợp, Model có thể trở nên phức tạp nếu ứng dụng phát triển lớn và có nhiều logic xử lý phức tạp
e Yéu Cau Kiến Thức Sâu Rộng:
e _ Việc hiểu rõ cách thiết kế và triển khai Model đòi hỏi kiến thức sâu rộng về
quản lý dữ liệu và logic kinh doanh
2 View:
2.1 Đặc Điểm Chính của View:
e_ View là thành phần của mô hình MVC chịu trách nhiệm hiển thị thông tin cho người dùng và tương tác với họ
2.2 Chức Năng Cơ Bản:
e _ Hiển Thị Thông Tin:
e_ View chịu trách nhiệm hiển thị dữ liệu từ Model cho người dùng Nó đảm
bảo rằng thông tỉn được hiển thị theo cách mà người dùng có thể hiểu
e_ Tương Tác với Người Dùng:
e _ View cũng là nơi người dùng tương tác với ứng dụng Nó có thể nhận thông tin từ người dùng, chẳng hạn như sự kiện nhấn nút hay nhập liệu
e Không Chứa Logic Kinh Doanh:
e _ View không chứa logic xử lý kinh doanh hoặc dữ liệu Nó chỉ biết cách hiển thị thông tin và gửi các sự kiện tương tác đến Controller
2.3 Quy Trình Hoạt Động Cơ Bản: