Dịch vụ này cho phép người dùng tìm kiếm chọn lựa sản phẩm để mua, thực hiện giao dịch mà không cần phải trực tiếp đến cửa hàng, chỉ cần sử dụng một thiết bị có kết nối Internet.. Hiểu đ
Trang 1BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH
KHOA CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN MÔN HỌC
Lập trình web
Tên đề tài: XÂY DỰNG ỨNG DỤNG WEB
BÁN ĐỒ ĂN
Môn học : Lập trình web
Giảng viên : BÙI DUY TÂN
SV thực hiện 1 : Huỳnh Quốc Hoài [2200004143]
SV thực hiện 2 : Nguyễn Đăng Hiếu [2200004089]
Học kỳ 1 Năm 2023 - 2024
Trang 2LỜI MỞ ĐẦU
Trong thời buổi hiện nay, khi mà công nghệ phát triển, thương mại điện tử ngày càng phát triển trên thế giới cũng như Việt Nam và dần khẳng định được vị thế của mình trong nền kinh tế thị trường Cùng với đó là sự ra đời của các ngôn ngữ lập trình cho phép thiết kế và xây dựng các ứng dụng thương mại điện tử phổ biến ở nước ta là dịch vụ bán hàng qua mạng Internet Dịch vụ này cho phép người dùng tìm kiếm chọn lựa sản phẩm để mua, thực hiện giao dịch mà không cần phải trực tiếp đến cửa hàng, chỉ cần sử dụng một thiết bị có kết nối Internet
Hiểu được các vấn đề đó cũng như mong muốn thương mại điện tử đến với nhiều người hơn, từ vốn kiến thức có được trong quá trình học tập, thông qua tham khảo một số trang Web và sự hướng dẫn tận tình của thầy Bùi Duy Tân, cùng với yêu cầu môn học, nhóm chúng em quyết định chọn đề tài Xây dựng trang Web ứng dụng bán đồ ăn.Với mục đính xây dựng một hệ thống bán hàng qua mạng uy tín, đơn giản, thân thiện, cũng như đem lại cho khách hàng những lựa chọn tối ưu, tham gia mua hàng trên mạng chỉ với một số thao tác đơn giản Sản phẩm mà em hướng tới ở đây là các loại đồ ăn đa dạng, đem lại cho người dùng một sản phẩm có thể đeo đi khắp mọi nơi, phù hợp với nhu cầu của tất cả mọi người
Trang 3LỜI CẢM ƠN
Để hoàn thành đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Giảng viên hướng dẫn - thầy Bùi Duy Tân, chính thầy là người đã tận tình dạy
dỗ và truyền đạt những kiến thức quý báu cho chúng em trong suốt học kỳ vừa qua
Trong thời gian tham dự lớp học của thầy, chúng em đã được tiếp cận với nhiều kiến thức bổ ích và rất cần thiết cho quá trình học tập, làm việc sau này của chúng em
Chúng em xin cảm ơn đến các quý thầy/cô Khoa Công nghệ thông tin, Trường Đại học Nguyễn Tất Thành vì đã tạo điều kiện thuận lợi cho chúng em học tập và hoàn thành đề tài này
Do chưa có nhiều kinh nghiệm làm đề tài cũng như những hạn chế về kiến thức, trong bài đồ án của chúng em chắc chắn sẽ không tránh khỏi những thiếu sót Chúng em rất mong nhận được sự nhận xét, ý kiến đóng góp, phê bình từ phía thầy/cô để bài đồ án của chúng em được hoàn thiện hơn
Lời cuối cùng, chúng em xin kính chúc thầy/cô thật nhiều sức khỏe, thành công và hạnh phúc
Chúng em xin chân thành cảm ơn!
Sinh viên thực hiện
Huỳnh Quốc Hoài
Nguyễn Đăng Hiếu
Trang 4MỤC LỤC
Thông tin chung 1
Chương 1 Tổng quan 2
1.1 Mô tả tóm tắt về website 2
1.2 Cơ sở lý thuyết 2
Chương 2 Phân tích và hoạch định 3
2.1 Các module chức năng: Trình bày sơ đồ chức năng 3
2.2 Site map: Trình bày sơ đồ liên kết 3
2.3 Database diagram: Mô tả lược đồ quan hệ 3
2.4 GUI: Mô tả giao diện các các nhóm trang web của website 3
Chương 3 Triển khai ứng dụng web 4
3.1 Thiết kế giao diện: Trình bày các bước thiết kế, công cụ sử dụng và kết quả 4
3.2 Thiết kế dữ liệu: Trình bày sơ đồ dữ liệu và chi tiết các bảng 4
3.3 Thiết kế xử lý: Trình bày chi tiết các bước cài đặt các module chức năng 4
3.4 Bảo mật website 4
3.5 Kiểm tra và xuất bản website 4
Chương 4 Kết luận 5
4.1 Kết quả đạt được 5
4.2 Những hạn chế và hướng mở rộng 5
TÀI LIỆU THAM KHẢO 5
Trang 5DANH MỤC HÌNH ẢNH
Trang 6ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Nội dung báo cáo Đồ án môn học Lập trình Web
Thông tin chung
Tên đồ án: Xây dựng ứng dụng web bán đồ ăn
Nhóm: 23
- Sinh viên 1:Huỳnh Quốc Hoài MSSV: 2200004143
Phân công thực hiện (Mô tả cụ thể công việc của từng thành viên)
- Sinh viên 1:
- Sinh viên 2:
Trang 7ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Chương 1 Tổng quan
1.1.Mô tả tóm tắt về website
-Website được xây dựng phục vụ hai đối tượng là Admin (nhà quản trị) và
Khách hàng
- Xác định yêu cầu, thu thập thông tin và các dữ liệu liên quan
a.Yêu cầu chức năng:
* Admin
- Đăng nhập Website
- Xem, cập nhật, xóa thông tin sản phẩm
- Quản lý đơn hàng
- Cập nhật tin tức
* Khách hàng
- Xem thông tin sản phẩm cũng như các tin tức khác
-Có quyền đăng nhập, đăng xuất, đổi mật khẩu
- Đặt mua sản phẩm
b.Yêu cầu phi chức năng:
-Giao diện: Giao diện phải tuỳ chỉnh dễ dàng về màu sắc, thay đổi banner dễ
dàng, và banner phải hỗ trợ được nhiều định dạng
- Hệ thống menu: Menu sản phẩm/ dịch vụ được tuỳ biến đa cấp,, dễ dàng phát triển thêm sản phẩm cho sau này, menu được thể hiện ngang hay đứng tuỳ vào khách hàng
- Thể hiện hàng hoá: Những thuộc tính cơ bản của hàng hoá phải được thể hiện: tên, giá, chất lượng, sản xuất,… thể hiện được giá khuyến mãi và chèn được
nhiều ảnh cho một sản phẩm
- Quản trị nội dung: Tuỳ chọn hiển thị bài viết dễ dàng, thêm ảnh và Video dễ dàng, tạo danh mục bài viết, cấp bài viết dễ dàng
- Đặt hàng & Xem nhanh: Sản phẩm có chức năng xem nhanh: xem nhanh tại trang mà không chuyển trang, tối thiếu hoá thao tác mua hàng: trang web của
bạn phải mua hàng đơn giản, chỉ cần từ 2-3 clicks chuột là có thể hoàn tất giao dịch, chức năng: đặt hàng, thay đổi thông tin giao nhận/ thanh toán, huỷ đơn,
lưu ý về đơn hàng thể hiện rõ ràng, dễ nhìn, thao tác thực hiện đơn giản
- Tích hợp với các trang lớn: Đăng nhập bằng Facebook, Gmail,… Tích hợp
thanh toán trực tuyến
Trang 8ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
- Tối ưu hoá tìm kiếm: Tối ưu hoá hệ thống tìm kiếm, làm cho trang web thân thiện với người dùng
c.Nguồn thông tin và dữ liệu:
Ngày nay, khi tiến hành chốt đơn giao dịch, hầu như tất cả các khách hàng đều có nhu cầu nghiên cứu, tham khảo trước những thông tin có liên quan đến sản phẩm – dịch vụ, chẳng hạn như: nguồn gốc, xuất xứ, mẫu mã, giá bán,chính sách giao hàng, thông tin địa chỉ và số điện thoại của nhà sản xuất hoặc nhà
cung cấp,… Sau đó, khách hàng mới an tâm ra quyết định liên hệ đặt hàng
Chính vì vậy, doanh nghiệp muốn xây dựng nên một Website bán hàng chuyên nghiệp thì không thể thiếu chức năng đăng tải, cung cấp một cách chi tiết, đầy
đủ, rõ ràng mọi thông tin về sản phẩm – dịch vụ mà chúng ta bán ra
1.2.Cơ sở lý thuyết
a Giới thiệu ASP.NET.MVC 5
Hình 1.1: ASP.Net MVC5 Đây là một nền tảng ứng dụng web do Microsoft phát triển và cung cấp, cho phép những người lập trình tạo ra những trang web động những ứng dụng web và những dịch vụ web, là một công nghệ có tính cách mạng dùng để phát triển các ứng dụng về mạng hiện nay cũng như trong tương lai
* Ưu điểm của ASP.NET.MVC 5
-Lập trình đơn giản với C#, VB.NET
-Ứng dụng tạo ra chạy ổn định trên windown
-Dễ quản lý nâng cấp
-Đáp ứng nhiều loại thiết bị truy cập
- An toàn
Trang 9ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
- Dễ tích hợp
* Đặc điểm của MVC 5
- MVC: Tách bạch các phần việc trong xử lý yêu cầu
- Sát với giao thức web: Không hướng sự kiện như ASP.NET
- Không duy trì thông tin trạng thái như ASP.NET
- Tự động nhận diện thiết bị: Tự lựa chọn view phù hợp
- Razor: sinh giao diện.- Kiểu dữ liệu động: ViewBag/ViewData
- Cải thiện Ajax: JQuery + Helper Ajax
- Kiểm lỗi: lập trình 1 lần áp dụng cho cả 2 client và server
- Web API: thư viện web dùng cho nhiều loại thiết bị
- Action Filter: kiểm soát các Action
- Dễ test: dễ dàng test các Action của các Controller
- NuGet: quản lý các gói mở rộng
b Công cụ hỗ trợ và môi trường phát triển
Hình 1.2: Công cụ hỗ trợ và môi trường phát triển
c Thư mục chức năng:
- Controllers: Thư mục này chứa tất cả các Controller trong ứng dụng Các
Controller đáp ứng yêu cầu đến từ trình duyệt, quyết định phải làm gì và phản hồi kết quả
- Models: Các lớp mô hình dữ liệu được tổ chức để nắm giữ và thao tác dữ liệu
- Views: View chứa các mẫu giao diện người dùng của ứng dụng
- App_Data: Chứa các file dữ cơ sở liệu (nếu có)
Trang 10ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
- App_Start: Chứa lớp được chạy một lần khi ứng dụng bắt đầu
- Content: Chứa tài nguyên tĩnh như hình ảnh, CSS
- Scripts: Chứa JavaScript cần thiết của ứng dụng
- Global.asax: Tập tin sự kiện chứa các điều khiển sự kiện nhằm kiểm soát vòng đời của Request, Session, Application
- Web.config: Tập tin xml chứa thông tin cấu hình của ứng dụng web
Chương 2: Phân tích và hoạch định
2.1Các module chức năng: Trình bày sơ đồ chức năng
Hình 2.1: Sơ đồ chức năng
* Tìm kiếm sản phẩm
- Thu hẹp kết quả tìm kiếm: Cho Khách hàng đưa đến sản phẩm mà khách hàng đang quan tâm nhất
- Đưa ra những gợi ý tìm kiếm: khi khách hàng không biết tên đầy đủ của sản phẩm, chức năng gợi ý sẽ hiển thị cho Khách hàng tìm kiếm dễ dàng hơn.-
-Từ khóa thay thế sẽ thay từ bị sai: nếu khách hàng tìm và gõ sai tên sản phẩm thì sẽ tự động điều chỉnh từ đó cho đúng
* Danh mục sản phẩm
- Dùng để quản lý các tất cả các sản phẩm - hàng hóa mà bạn có Nó bao gồm :tên sản phẩm, nhóm sản phẩm, đơn vị tính, giá nhập, giá xuất, và số tồn định mức của từng sản phẩm
Trang 11ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
- Danh mục sản phẩm - hàng hóa này sẽ giúp người quản lý nắm bắt được các thông tin của sản phẩm một cách hệ thống và chi tiết Tên các sản phẩm
hàng hóa sẽ được nhập vào trong danh mục hành hóa và sẽ được sắp xếp vào từng nhóm ngành hàng tùy theo từng loại sản phẩm
* Đặt
hàng Cho phép khách hàng khởi đầu quá trình giao kết hợp đồng theo những điều khoản được công bố trên website đó, bao gồm cả việc giao kết hợp đồng với hệ thống thông tin tự động
* Giỏ hàng
- Là cầu nối trung gian giữa trang sản phẩm và quy trình thanh toán Do đó,khách hàng có đi đến quyết định thanh toán và hoàn thành đơn hàng hay
không phụ thuộc vào sự tối ưu của tính năng giỏ hàng
* Đơn đặt hàng
- Là giấy tờ dùng để xác minh các vấn đề đặt hàng số lượng lớn đúng thời gian và chất lượng dịch vụ trong trao đổi giao dịch
* Thanh toán
- Là sự chuyển giao tài sản của một bên (cá nhân hoặc công ty, tổ chức) cho bên kia, thường được sử dụng khi trao đổi sản phẩm hoặc dịch vụ trong một giao dịch córàng buộc pháp lý.- Tiền là phương tiện thực hiện trao đổi hàng hóa, đồng thời là việc kết thúc quátrình trao đổi
* Cập nhật đơn hàng
- Lưu thông tin liên quan đến khách hàng, thông tin sản phẩm khách hàng cần mua
* Hóa đơn
- Thể hiện thông tin khách hàng, số tiền mà khách hàng cần phải thanh toán và còn nêu rõ các thông tin khách như tên hàng, số lượng hàng, phương
thức thanh toán, phương thức chuyên chở, điều kiện giao hàng
Trang 12ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
2.2Site map: Trình bày sơ đồ liên kết
Hình 2.2: Sơ đồ liên kết
- Home: Là trang chủ được liên kết với Static, Slider, About, Pages,
News,Contact, Shop
- Stact Home: là trang tĩnh hiển thị sản phẩm- Slider Home: là trang trình chiếu, thanh trượt có thể là một băng chuyền quayvòng hiển thị các sản phẩm hoặc ảnh
- About: Gồm có About Us thể hiện nội dung quyền lợi cho người dùng
- Pages: liên kết với Page, Cart, Check out thể hiện trang thông tin sản
phẩm,giỏ hàng và thanh toán
- News: được liên kết với New Article, Single Article thể hiện thông tin nguồn gốc sản phẩm, đánh giá và nhận xét của khách hàng
- Contact: Gồm Contact Us là nơi mọi người có thể liện hệ với quản trị khi gặp phải vấn đề khi mua hàng
- Shop: Gồm Single product hiển thị sản phẩm, số lượng mà khách hàng muốnthêm vào giỏ hàng
2.3Database diagram: Mô tả lược đồ quan hệ
- tb_SystemSeting (Settingkey, SettingValue, SettingDescription)
- tb_Contact (Id, Name, Email, Website, Message, IsRead, CreatedBy,
CreatedBate, ModifiledData, ModifilrdBy)
- tb_Adv (Id, Title, Description, Image, Link, Type, CreatedBy, CreatedBate,
ModifiledData, ModifiledBy)
Trang 13ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
- Subscribe (Id, Email, CreatedDate)
-tb_Category (Id, Title, Description, SeoTitle, SeoKeywords, Position,
CreatedBy, CreatedBate, ModifiledData, ModifiledBy, Alias, IsActive)
- tb_Posts (Id, Title, Description, Detail, CategoryId, SeoTitle, SeoKeywords, CreatedBy, CreatedBate, ModifiledData, ModifiledBy, Alias, IsActive)
- tb_Order (Id, Code, CustomerName, Phone, Address, TotalAmount, Quantity, CreatedBy, CreatedBate, ModifiledData, ModifiledBy)
- tb_OrderDetail (Id, productId, Price, Quantity, CreatedBy, CreatedBate,
ModifiledData, ModifiledBy)
- ib_News (Id, Title, Description, Detail, Image, Categoryld, SeoTitle,
SeoDescription, SeoKeywords, CreatedBy, CreatedBate, ModifiledData,
ModifiledBy, Alias, IsActive)
- tb_OrderDetail (Id, Orderld, Productld, Price, Quantity, CreatedBy,
CreatedBate, ModifiledData, ModifiledBy)
- tb_Product (Id, Title, ProductCode, Description, Detail, Image, Price,
PriceSale, Quantity, IsHome, IsSale, IsFeature, IsHot, ProductCategoryId,
SeoTitle, SeoDescription, SeoKeywords, CreatedBy, CreatedBate,
ModifiledData, ModifiledBy, Alias, IsActive)
-tb_ProductImage (Id, productId, Image, IsDefault)
2.4GUI: Mô tả giao diện các các nhóm trang web của website
* Header - Phần tiêu đề
Đây là thành phần nằm ở vị trí đầu tiên của trang web Nó có thể cố định hiển thị trong tất cả các trang thuộc cùng 1 website giúp điều hướng người dùng
dễ dàngtruy cập tới toàn bộ nội dung của trang web Phần này thường được thiết
kế nói lên tênwebsite, nội dung hướng tới và các mục con mà website hướng tới
Về cơ bản nó baogồm các thành phần như sau:
* Logo
Logo là một thứ rất quan trọng trong 1 trang web Người dùng sẽ không thểnhận ra được thương hiệu nếu thiếu nó Nó giống như dấu hiệu nhận biết
riêng biệtgiúp thu hút khách hàng Chính vì thế, logo là điều không thể thiếu
trong giao diệnwebsite và chúng được ưu tiên ngay tại góc trên cùng Header với
vị trí thu hút nhất
* Menu điều hướng
Trang 14ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Tất nhiên 1 website không chỉ có trang chủ mà còn hàng loạt các trang con khácnhau Vậy làm thế nào để giúp người dùng tìm đến được những trang
đó Đó là nhờthanh menu điều hướng Thông thường phần này sẽ được thiết kế dựa trên các mụcchính trong website Ví dụ như giới thiệu, sản phẩm, dịch vụ, đối tác - khách hàng, tintức, liên hệ,…
* Slider hay banner quảng cáo
Slider hay banner quảng cáo thường được đặt ngay bên dưới header Nếu như vào một website chỉ toàn chữ là chữ chắc hẳn bạn sẽ cảm thấy nó chán ngắt
Vì vậy,chúng em đã sáng tạo ra mục này vừa là để giúp quảng cáo sản phẩm của mình trêntrang web và cũng là để giao diện trở nên hấp dẫn, bắt mắt hơn Phần này được thiết kếđẹp mắt, vì nó sẽ là hình ảnh đầu tiên khi người dùng truy cập vào website, slider cóthể là các hình ảnh, video sản phẩm yêu thích, các ưu đãi hoặc có thể là ảnh banner cốđịnh có các nút điều hướng link tới các nội dung quảng cáo sản phẩm, dịch vụ
b Phần content chính (đoạn nội dung giữa trang) của trang web
Để website hoạt động tốt thì ta không chỉ cần header mà còn cần phần
contentchính - nội dung nằm ở giữa của trang Trong phần này hầu hết là nêu ra những nội dung chính trong từng trang của website Ví dụ như các hình ảnh,
video, các sản phẩm,tin tức,…
.* Tiêu đề nhỏ của trang
Để phân biệt nội dung của các trang thì chúng ta cần có thêm 1 tiêu đề
nhỏ Nóthường được đặt trong các thẻ như thẻ H và được bôi đậm hơn để làm nổi bật
* Breadcrumb navigation (Breadcrumb trails)
Đây là thanh điều hướng phân cấp, nó giúp người dùng nhận biết rằng
mìnhđang ở nội dung nào của trang web Đồng thời nó cũng giúp họ nhanh
chóng tìm đượccác trang khác trong website
* Phần content chính
Đây là phần quan trọng nhất trong content Web bán hàng sẽ hiển thị các sảnphẩm Tùy vào thiết kế thì nó sẽ được làm nổi bật tiêu đề và có thêm ảnh
trong mỗimục
* Phân trang
Mỗi một website đâu chỉ có 1 - 2 sản phẩm mà nó có đến hàng nghìn sản phẩm.Trong khi đó nếu ta không sử dụng phân trang mà để các mục tràn lan
nhau sẽ làm mất đi tính thẩm mỹ Vì thế phân trang được sinh ra, mỗi một trang
sẽ có chỉ số khác nhauvà điều hướng đến các sản phẩm khác nhau
Phần Footer (chân trang) của trang web