BỘ 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 website kinh doanh thời trang Giảng viên : Bùi Duy Tân SV
Tổng quan
Mô tả tóm tắt về website
- Xác định yêu cầu, thu thập thông tin và các dữ liệu liên quan
- Hiển thị danh sách sản phẩm: Hiển thị các thông tin sản phẩm về tên sản phẩm, giá, hình ảnh sản phẩm.
Người dùng có thể nhấp vào hình ảnh sản phẩm để xem thông tin chi tiết, bao gồm hình ảnh lớn hơn và giao diện đánh giá, chia sẻ dành cho khách hàng.
Quản lý giỏ hàng cho phép người dùng dễ dàng thêm, sửa và xóa sản phẩm trong giỏ hàng của mình Tính năng này cũng bao gồm khả năng thanh toán, giúp người dùng hoàn tất giao dịch một cách thuận tiện.
- Quản lí tài khoản người dùng: Người dùng có thể đăng kí hoặc đăng nhập tài khoản.
Yêu cầu phi chức năng:
- Bảo mật: Đảm bảo tính bảo mật và an toàn thông tin cho người dùng.
- Tương thích với thiết bị di động.
Nguồn thông tin và dữ liệu:
- Dữ liệu sản phẩm: Cần thu thập thông tin của sản phẩm bao gồm tên, giá cả, xuất xứ, hình ảnh, mô tả, số lương.
- Dữ liệu người dùng: Thu thập thông tin về người dùng như tên, địa chỉ, số điện thoại, địa chỉ giao và nhận hàng, đơn thanh toán.
Cơ sở lý thuyết
- HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản Người dùng sử dụng trong việc phân chia các đoạn văn, heading, links,…
- HTML thường được dùng để: ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
- Bootstrap cũng cung cấp cho bạn khả năng dễ dànng tạo các thiết kế đáp ứng
JavaScript là một ngôn ngữ lập trình phổ biến, được sử dụng để tạo ra các trang web tương tác Khi được tích hợp vào HTML, JavaScript giúp website trở nên sống động và hấp dẫn hơn, đóng vai trò quan trọng trong việc nâng cao trải nghiệm người dùng trên trang web.
Phân tích và hoạch định
Các module chức năng: Trình bày sơ đồ chức năng
Trang chủ là điểm khởi đầu khi người dùng truy cập website, cung cấp cái nhìn tổng quan về hai loại sản phẩm: sản phẩm mới và sản phẩm hot, đồng thời cung cấp liên kết đến các trang khác để người dùng dễ dàng khám phá thêm.
- Chi tiết sản phẩm: Cho phép người dùng xem chi tiết sản phẩm như xuất sứ, giá cả, tình trạng hàng tồn,…
Giỏ hàng là nơi người dùng có thể thêm sản phẩm, điều chỉnh số lượng hoặc xóa sản phẩm không cần thiết, và thực hiện thanh toán cho các sản phẩm đã chọn.
- Thanh toán: Cho phép người dùng thanh toán sản phẩm trong giỏ hàng.
- Đăng nhập và đăng kí khách hàng: Quản lí tài khoản người dùng Khách hàng có thể đăng kí mới hoặc đăng nhập vào tài khoản đã có.
Site map: Trình bày sơ đồ liên kết
ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
GUI: Mô tả giao diện các các nhóm trang web của website
Hình 1.1: Trang chủ ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB Hình 1.2: Sản phẩm
Hình 1.4: Trang đăng kí ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Triển khai ứng dụng web
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ả
Utilize the free Eshopper template designed on the Bootstrap Framework to enhance your website's interface for various web page categories, including projects related to web programming courses.
Hình 2: Giao diện trang chi tiết sản phẩm ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Hình 5: Giao diện đăng nhập người dùng ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Thiết kế dữ liệu: Trình bày sơ đồ dữ liệu và chi tiết các bảng
3.2.1 Lược đồ dữ liệu quan hệ
Hình 7: Sơ đồ lược đồ quan hệ dữ liệu
Bảng OrderDetails ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
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
Product Class: ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB Hình 10: Product Class
RoleMaster ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB Hình 14: RoleMaster Class
Chức năng thể hiện thông tin
The Index Action processes requests from clients using the categoryId parameter, retrieves data from the model, and returns a view displaying a list of products.
Detail Action : Hiển thị chi tiết sản phẩm theo id và trả ra product
Login : Phương thức Login đầu tiên để hiển thị trang đăng nhập.
Phương thức đăng nhập thứ hai sử dụng GetMD5(model.UserPassword) để mã hóa mật khẩu người dùng bằng thuật toán MD5 Sau đó, nó áp dụng context.Users.Any( ) để xác minh xem người dùng có tồn tại và mật khẩu có chính xác hay không.
FormsAuthentication.SetAuthCookie( ) để đặt cookie xác thực cho người dùng.
Nếu người dùng có RoleID, họ sẽ được chuyển hướng đến trang "Product" Nếu không, hệ thống sẽ chuyển hướng họ đến trang "Products" trong khu vực "Admin" Trong trường hợp đăng nhập không thành công, ModelState.AddModelError( ) sẽ được sử dụng để thêm thông báo lỗi.
Đăng ký người dùng mới vào cơ sở dữ liệu và chuyển hướng họ đến trang đăng nhập sau khi hoàn tất quá trình đăng ký thành công.
Logout: Đăng xuất người dùng hiện tại bằng cách xóa cookie xác thực Sau khi đăng xuất, người dùng sẽ được chuyển hướng đến trang đăng nhập.
Kiểm tra Id có null không, nếu có thì trả về lỗi BadRequest Nếu session giỏ hàng chưa tồn tại, tạo mới và thêm sản phẩm vào giỏ Nếu session giỏ hàng đã tồn tại, kiểm tra xem sản phẩm đã có trong giỏ chưa: nếu chưa, thêm sản phẩm mới vào giỏ; nếu có, tăng số lượng sản phẩm Cập nhật session giỏ hàng và chuyển hướng đến trang giỏ hàng.
IsExistingCheck : ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB
Hình 13: Màn hình cài đặt Detail View
Hình 14: Kết quả thực hiện Detail Page
Hình 15: Màn hình cài đặt Index của Cart Class ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB Hình 16: Kết quả khi thực hiện Index Cart
Hình 17: Màn hình cài đặt Payment cho trang Cart
Hình 18: Kết quả thực hiện Payment
Kiểm tra và xuất bản website
Kiểm tra giao diện các trang khi thể hiện trên các trình duyệt web thông dụng
Kiểm tra các chức năng của website (thể hiện thông tin, quản trị, …)
Hosting website lên internet (yêu cầu mở rộng) ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB