Đồ án môn học lập trình web tên Đề tài xây dựng website kinh doanh thời trang

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

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 thực hiện : Nguyễn Thị Thư Tín [2200004835]

Chúng ta không thể phủ nhận những lợi ích mà nó đã đem lại cho chúng ta trong cuộc sống, từ việc bạn tốn tiền bỏ 10.000vnd ra để mua một tờ báo, thì bây giờ, chỉ cú click tìm kiếm, đã có hàng ngàn bài báo mới nhất và hot nhất về mọi quốc gia cho bạn tha hồ đọc Rồi dần, Internet trở thành công cụ tìm kiếm hầu như mọi thông tin của mọi nhà Cái gì bạn không biết, hãy tìm trên Google; bạn không biết đường đi, hãy tìm trên Google Map; bạn không biết nấu món cơm cà ri kiểu Nhật, hãy tìm ở Kitchennart.vn,… Mọi thứ đều có ở đó Và mọi thứ đều được đăng trên Internet, chúng ta truy cập vào và đọc, đó chính gọi là Website.

Hình thức kinh doanh trực tiếp đã không còn xa lạ với chúng ta, chẳng hạn, bạn muốn mua một cuốn sách, bạn sẽ đến nhà sách gần nhất và tìm để mua; bạn muốn đôi giày mới cho trận đấu cầu lông, bạn đến Shop thể thao để mua,… Nhưng vấn

đề bất di bất dịch, đó là không phải khi nào những cửa hàng đó cũng có loại hàng bạn mong muốn Thế nên các nhà kinh doanh đã tinh ý phát hiện ra điều này, cộng với sự hữu ích của website và đã sinh ra hình thức, đó là kinh doanh online hay gọi thân thuộc hơn là kinh doanh qua mạng Internet.

Với sự dẫn dắt của thầy Bùi Duy Tân, em đã tiếp cận và tìm hiểu, cũng như xây dựng được website bán hàng online cơ bản Nhờ có cô mà em đã làm xong cuốn báo cáo này cũng như website này Tuy nhiên, trong quá trình tìm hiểu và cài đặt website này, không thể tránh khỏi những lỗi kỹ thuật, em mong quý thầy cô thông cảm và góp ý để em được cải thiện thêm về kỹ năng cũng như tư duy về Lập trình web!

LỜI CẢM ƠN

Chúng em xin gửi lời cảm ơn và tri ân chân thành đến tất cả giảng viên của trường Đại học Nguyễn Tất Thành, đặc biệt là thầy Bùi Duy Tân đã tận tình hướng dẫn

và giảng dạy cho tụi em để có thể làm được báo cáo như trên.

Trong quá trình thực hiện lập trình, lỗi kỹ thuật là vấn đề không tránh khỏi đối với sinh viên mới lập trình như em, thật kính mong quý cô và quý thầy thông cảm cũng như bỏ qua những sai sót của chúng em Chúng em rất mong được nghe góp

ý từ các quý thầy cô để cải thiện thêm về kỹ năng cá nhân.

Đồng thời, trong một đồ án lớn như thế này, lớn ở đây là lớn theo nghĩa là bài báo cáo lớn nhất mà em đã từng làm, thì câu từ cũng như kỹ năng lý luận của em còn nhiều thiếu sót, chưa chặt chẽ, em mong quý thầy cô bỏ qua và thông cảm Em cũng xin ý kiến góp ý của quý thầy cô để em có cơ hội học thêm nhiều kinh nghiệm và hoàn thành những bài báo cáo sau này tốt hơn ạ!

Sau cùng em xin chúc quý thầy cô dồi dào sức khỏe, và thành công trong sự nghiệp giảng đường của mình và tiếp tục sứ mệnh cao cả là truyền đạt kiến thức đển cho thế hệ sau.

Sinh viên thực hiện

MỤ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 4

2.1 Các module chức năng: Trình bày sơ đồ chức năng 4

2.2 Site map: Trình bày sơ đồ liên kết 4

2.3 Database diagram: Mô tả lược đồ quan hệ 5

2.4 GUI: Mô tả giao diện các các nhóm trang web của website 6

Chương 3 Triển khai ứng dụng web 8

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ả 8

3.2 Thiết kế dữ liệu: Trình bày sơ đồ dữ liệu và chi tiết các bảng 11

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 13

3.4 Bảo mật website 24

3.5 Kiểm tra và xuất bản website 24

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

DANH MỤC HÌNH ẢNH

Hình 1.1: Trang chủ ………6

Hình 1.2: Sản phẩm ………6

Hình 1.3: Giao diện đăng nhập ………7

Hình 1.4:Giao diện đăng kí ………7

Hình 2: Trang Public ………8

Hình 3: Trang Shopping Cart ………9

Hình 4: Cài đặt Layout cho Websit ………10

Hình 5: Cài đặt đăng nhập ………10

Hình 6: Cài đặt đăng kí ………11

Hình 7: Sơ đồ quan hệ dữ liệu ………12

Hình 8: Màn hình Db Context Class ………14

Hình 9: Category Class ………15

Hình 10: Product Class ………16

Hình 11: User Class ………17

Hình 12: Order Class ………18

ĐỒ Á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: Webstie bán hàng online đơn giản

Nhóm: 07

- Sinh viên : Nguyễn Thị Thư Tín MSSV: 2200004835

ĐỒ Á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

- Xác định yêu cầu, thu thập thông tin và các dữ liệu liên quan

 Yêu cầu chức năng:

- 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

- Chi tiết sản phẩm: Người dùng ó thể click vào hình ảnh sản phẩm để xem chi tiết sản

phẩm Trang chi tiết sẽ hiển thị hình ảnh lớn hơn của sản phẩm và có thể chứa giao diện đánh giá, chia sẻ dành cho khách hàng

- Quản lí giỏ hàng: Người dùng có thể thêm sản phẩm vào giỏ hàng, có chức năng thêm

sửa và xóa sản phẩm trong giỏ hàng Bao gồm cả chức năng thanh toán cho người dùng

- 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

- Dữ liệu đơn hàng: Bao gồm sản phẩm đã đặt, thông tin giao hàng 1.2 Cơ sở lý thuyết

A HTML

- 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

D JavaScript

- Là ngôn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác Được tích hợp

và tích vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như mộtphần của trang web

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

Chương 2 Phân tích và hoạch định

2.1 Các module chức năng: Trình bày sơ đồ chức năng

- Trang chủ: Đây là trang mặc định khi người dùng truy cập vào website Trang hiển thị

tổng quan về 2 loại mặt hàng: sản phẩm mới và sản phẩm hot, và cung cấp liên kết đến các trang khác

- 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: Người dùng thêm sản phẩm vào giỏ hàng, ở trang này người dùng có thể sửa

số lượng sản phẩm hoặc xóa sản phẩm, và thanh toán sản phẩm

- 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ó

2.2 Site map: Trình bày sơ đồ liên kết

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

2.3 Database diagram: Mô tả lược đồ quan hệ

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

2.4 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

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

Chương 3 Triển khai ứng dụng web

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ả

Sử dụng template Eshopper free ecommerce được thiết kế trên nền tảng Bootstrap Framework, tích hợp vào website dùng để thể hiện giao diện cho các nhóm trang web.Giao diện thể hiện các nhóm trang web gồm:

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

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

ĐỒ Á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

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

3.2 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

3.2.2 Các bảng dữ liệu

 Bảng Product

 Bảng Category

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

 Bảng User

 Bảng Order

 Bảng OrderDetails

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

 OrderDetail Class

Hình 13: OrderDetail Class

 RoleMaster

 Index Action : Tiếp nhận request từ client với tham số là categoryId,

thực hiện truy vấn dữ liệu từ model và trả kết quả ra View là danh sách các sản phẩm

 Detail Action : Hiển thị chi tiết sản phẩm theo id và trả ra product

View

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

- Accounts Controller

 Login : Phương thức Login đầu tiên để hiển thị trang đăng nhập.

Phương thức Login thứ hai gồm: GetMD5(model.UserPassword) để mã hóa mật khẩu người dùng bằng MD5; context.Users.Any( ) để Kiểm tra xem người dùng có tồn tại và mật khẩu có đúng không;

FormsAuthentication.SetAuthCookie( ) để đặt cookie xác thực cho người dùng

Nếu người dùng có RoleID, chuyển hướng đến trang “Product”.Ngược lại, chuyển hướng đến trang “Products” trong khu vực “Admin”.ModelState.AddModelError( ): Thêm thông báo lỗi nếu đăng nhập không thành công

 Signup : Thêm người dùng mới vào cơ sở dữ liệu Chuyển hướng

người dùng đến trang đăng nhập sau khi đăng ký thành công

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

 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

- ShoppingCart Controller

 OrderNow Action : Kiểm tra Id có null không, nếu có 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 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

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

 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

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

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

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

3.4 Bảo mật website

3.5 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

Chương 4 Kết luận

4.1 Kết quả đạt được

- Xây dựng được Website bán hàng đơn giản nhờ ứng dụng Visual Studio 2022

- Thiết kế được chức năng đăng nhập, đăng kí và thanh toán cho khách hàng

- Thiết kế Layout cho Website từ Template có sẵn và truy xuất cơ sở dữ liệu từ SQL qua MVC

4.2 Những hạn chế và hướng mở rộng



 Hạn chế

- Chưa phân quyền cho User và Admin rõ ràng

- Bootstrap còn nhiều lỗi như lỗi định dạng vị trí, format form,…

- Code dài dòng, không clear



 Mở rộng

- Cần phân quyền rõ ràng cho Admin có những chức năng như thêm sản phẩm vào trang Web, xem những tài khoản đã đăng kí của khách hàng,…

- Cần chỉnh lại Code cho ngắn gọn, clear và clean hơn

TÀI LIỆU THAM KHẢO

 Template tham khảo: https://startbootstrap.com/theme/sb-admin-2.

 Video hướng dẫn:

- Login: https://youtu.be/JLyeOZ-A8-U?si=BPkAHl7KPGtdxWHA.

- Tạo bảng dữ liệu: https://youtu.be/hUhIuktJYPc?si=eSxgrSFGCyJ4jjho.

- Giỏ hàng: https://youtu.be/aChvTKrU4_c?si=bUxwBODtbdaTBJZu.