- Bảng app_ general_category: Lưu danh mục sản phẩm ở mức cao nhất vd: Áo, Quần,..- Bảng app_category : Lưu các phân loại của general_categories vd : Áo phông, Áo dài,… - Bảng app_produc
Giới thiệu chung
Đề tài - Web bán hàng trực tuyến
- Web bán hàng trực tuyến
Yêu cầu đặt ra
- Thiết lập 1 wb bán hàng có đủ các chức năng cần thiết
Chức năng
a Người dùng Đăng nhập, Đăng kí, Tài khoản, Quên tài khoản hoặc mật khẩu, Đổi mật khẩu, Trang chủ, Chi tiết sản phẩm, Giỏ hàng, Địa chỉ, Đơn hàng, Thanh toán ,Tìm kiếm sản phẩm, Tra cứu đơn hàng b Quản trị viên Đăng nhập, Trang chủ, Người dùng, Sản phẩm, Đơn hàng, Mã giảm giá
Chương trình
Các công nghệ được sử dụng
- Cấu trúc monolithic, mô hình mvc, cơ chế server-side rendering
Cơ sở dữ liệu
- Bảng app_ general_category: Lưu danh mục sản phẩm ở mức cao nhất vd: Áo, Quần,
- Bảng app_category : Lưu các phân loại của general_categories vd : Áo phông, Áo dài,…
- Bảng app_product : Lưu các sản phẩm với các loại tương ứng với categories gồm tên, giá, lượt bán,…
- Bảng app_color : Lưu trữ các hình ảnh, màu sắc tương ứng với các products
- Bảng app_size : Lưu trữ các kích cỡ của từng products
- Bảng app_color_size : Thực hiện quan hệ many to many giữa hai bảng size và color vd: một màu có nhiều size và ngược lại
- Bảng auth_user: Lưu trữ thông tin đăng nhập của khách hàng
- Bảng app_customer : Lưu trữ các thông tin cá nhân của khách hàng
- Bảng app_shipping_address : Lưu trữ các địa chỉ của từng khách hàng
- Bảng app_order : Lưu trữ các đơn hàng lớn (nhiều sản phẩm được đặt cùng 1 lượt) của từng khách hàng , bao gồm các đơn hàng con (orderitems)
- Bảng app_orderitem : Lưu trữ các đơn hàng con của từng khách hàng trạng thái đơn hàng sẽ được lưu trữ tại đây
- Bảng app_cartitem : Lưu trữ các sản phẩm trong giỏ hàng của từng khách hàng
- Bảng app_slider : Lưu trữ các hình ảnh để làm slide cho trang home
- Bảng app_discount : Lưu trữ các mã giảm giá
Cấu trúc chương trình
- sopi/app : thư mục chương trình chính chứa các đoạn mã xử lý logic nghiệp vụ giữa backend và frontend
+ sopi/app/migrations: lưu trữ các thay đổi của database mỗi lần makemigrations
+ sopi/app/service : thư mục lưu trữ các *service.py, xử lý các logic nghiệp vụ nhận request từ views.py
+ sopi/app/static : lưu trữ các file tĩnh như *.css, *.js, các file ảnh
+ sopi/app/templates: lưu trữ các file *.html được xử lí dữ liệu với DTL
+ sopi/app/templatestags : có file custom_filters xử lí các xâu ở mức frontend
+ sopi/app/admin.py : cấu hình cho trang admin
+ sopi/app/apps.py : dịnh nghĩa cấu hình cho ứng dụng
+ sopi/app/context_proccesors.py : lưu trữ các hàm trả ra dữ liệu có thể render ra html ở mức global vd: tên người dùng, ảnh người dùng, số lượng sản phẩm trong giỏ hàng, … trên thanh header
+ sopi/app/handlefunc.py : lưu trữ các hàm xử lý thường xuyên được dùng lại, xử lý ở mức backend
+ sopi/app/models.py : định nghĩa các model hay còn gọi là các entity tương ứng với các bảng của csdl
+ sopi/app/tests.py : lưu trữ các unit test (không bao gồm)
+ sopi/app/urls.py : định nghĩa các đường dẫn của chương trình
+ sopi/app/views.py : định nghĩa hàm xử lý tương ứng với các đường dẫn của chương trình
- sopi/media : lưu trữ các ảnh được tải lên
- sopi/sopi: lưu trữ các cấu hình của dự án
+ sopi/sopi/asgi.py, wsgi.py : các file với cài đặt mặc định
+ sopi/sopi/settings.py : gồm các cài đặt quan trọng cho ứng dụng vd: kết nối database, đăng nhập bên thứ 3, …
+ sopi/sopi/urls.py : cài đặt các đường dẫn cho dự án
+ sopi/staticfiles: lưu trữ các file frontend tĩnh của ứng dụng gồm cả các file liên quan đến trang admin và người dùng
+ sopi/manage.py : quản lý và điều khiển dự án bằng công cụ dòng lệnh vd: python manage.py runserver
Luồng chạy chương trình
Client: Gửi yêu cầu đến server urls.py: Xử lý yêu cầu, quản lý luồng nghiệp vụ, định nghĩa các route views.py: Gọi đến các hàm xử lý trong service hoặc trực tiếp tực hiện các logic nghiệp vụ xử lý các dữ liệu
*Service.py : Xử lý các logic nghiệp vụ, nhận yêu cầu từ views.py. models.py: Tương tác với cơ sở dữ liệu để lấy hoặc lưu trữ dữ liệu
Database: Lưu trữ và cung cấp dữ liệu cho ứng dụng
Các thư viện và Framework được sử dụng
Django là một Framework lập trình Web bậc cao, mã nguồn mở được viết bằng ngôn ngữ lập trình Python Django là một Framework giúp lập trình web nhanh b Thư viện Pillow
-hỗ trợ việc tải lên, lưu trữ và xử lý hình ảnh c Thư viện Django Allauth quản lý xác thực người dùng, đăng ký tài khoản và tích hợp với các dịch vụ xác thực bên thứ ba d Thư viện PyJWT
(JSON Web Tokens) là một chuẩn mở định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạng đối tượng JSON dùng để xác thực người dùng, đi kèm khi cài đặt django-allauth e Thư viện Crytopgraphy
Có các chức năng liên quan đến mã hóa, đi kèm khi cài đặt django-allauth
Giao diện
Khách hàng
Khách hàng nhập vào tài khoản và mật khẩu, tiến hành đăng nhập , nếu thành công thì sẽ chuyển đến trang chủ, còn không thì sẽ nhận được thông báo lỗi “tài khoản hoặc mật khẩu sai”
Mở rộng thêm với chức năng đăng nhập bên thứ 3 với facebook và google
Khách hàng đăng kí với các thông tin: Tên đăng nhập, Mật khẩu, Email, Số điện thoại
Nếu thành công sẽ chuyển đến trang đăng nhập còn thất bại thì nhận được các thông báo lỗi như “Tên tài khoản đã tồn tại”, “Tên email đã tồn tại”, “Số điện thoại đã tồn tại”.
Khách hàng nhập tên đăng nhập và tiến hành xác nhận, nếu thành công sẽ nhận được một email chứa OTP và đường dẫn tới trang đổi mật khẩu, thất bại sẽ nhận được thông báo “Tên tài khoản không tồn tại.”
Khách hàng nhập tên email đã đăng kí, tiến hành xác nhận, nếu thành công sẽ nhận được một email gồm Tên đăng nhập, OTP, đường dẫn đến trang đổi mật khẩu, còn thất bại thì nhận được thông báo “Có vẻ như Email này chưa
Khách hàng nhập OTP nhận được trong email vào đây, tiến hành xác nhận, nếu thành công sẽ chuyển hướng sang các trang thực hiện như “Đổi mật khẩu”, “Đổi Email” ,”Đổi số điện thoại”, còn thất bại thì nhận thông báo “Mã xác minh không đúng, vui lòng thử lại”.
Khách hàng có thể nhận email khác sau 60 giây chờ đợi bằng cách nhấn nút gửi lại
Khách hàng nhập: Mật khẩu mới và Xác nhận mật khẩu mới sau đó được chuyển hướng sang trang đăng nhập, hoặc thông tin tài khoản
Khi khách hàng đăng nhập thành công sẽ chuyển tới trang này
Trang chủ hiển thị các sản phẩm theo từng phân loại
Hiện thị các thông tin về khách hàng : Tên đăng nhập, Tên, Email, Số điện thoại, Giới tính, Ngày sinh, Ảnh đại diện
Khách hàng có thể cập nhật Tên, Email, Số điện thoại, Giới tính, Ngày sinh và Ảnh đại diện
Do vấn đề bảo mật nên hai trường Email và Số điện thoại bị ẩn một phần và chỉ có thể thay đổi khi được xác thực
Khách hàng sẽ nhận được một Email như phần quên mật khẩu, sau đó tiền hành xác thực OTP và Token, cuối cùng đến trang đổi email
Nếu Email mới đã tồn tại ,khách hàng sẽ nhận được thông báo “Tài khoản Email đã tồn tại.”, còn thành công thì chuyển đến trang thông tin tài khoản
Khách hàng sẽ nhận được một Email như phần Quên mật khẩu, sau đó tiền hành xác thực OTP và Token, cuối cùng đến trang đổi số điện thoại
Nếu số điện thoại mới đã tồn tại, khách hàng sẽ nhận được thông báo “Số điện thoại đã tồn tại.”, còn thành công thì chuyển đến trang thông tin tài khoản
1.11 Yêu cầu đổi mật khẩu
Khách hàng sẽ nhận được một Email như phần Quên mật khẩu, sau đó tiền hành xác thực OTP và Token, cuối cùng đến trang đổi mật khẩu
Hiển thị các địa chỉ của khách hàng, địa chỉ mặc định luôn có thứ tự cao nhất
+ Thêm mới địa chỉ + Xóa địa chỉ bằng id + Cập nhật địa chỉ + Thiết lập mặc định
Hiển thị kết quả tìm kiếm theo tên sản phẩm theo kiểu phân trang, mỗi trang gồm 8 sản phẩm
+ Sắp xếp sản phẩm theo giá, thời gian, tên+ Chuyển sang trang mới theo mũi tên hoặc chỉ số
Hiển thị thông tin chi tiết về sản phẩm như giá, màu sắc, kích cỡ, số lượng Gồm các chức năng
Hiển thị các sản phẩm trong giỏ hàng của một khách hàng xác định
+ Xóa nhiều sản phẩm đã chọn bởi checkbox
+ Mua hàng : có thể mua nhiều sản phẩm cùng 1 lúc
Hiển thị các thông tin gồm địa chỉ nhận hàng, các sản phẩm, mã giảm giá (nếu có), phí vận chuyển, tạm tính, thành tiền, phương thức thanh toán
+ Áp dụng mã giảm giá + Thay đổi địa chỉ + Đặt hàng
Hiển thị các đơn hàng theo trạng thái Chờ xác nhận, Đang xử lí, Đang giao, Đã giao, Đã hủy
Với mỗi trạng thái lại có các chức năng khác nhau:
+ Chờ xác nhận: có chức năng hủy đơn hàng và thay đổi địa chỉ + Đang xử lý: có chức năng hủy đơn hàng
+ Đang giao: có chức năng đã nhận được hàng+ Đã nhận được hàng: có chức năng mua lại và trả hàng/hoàn tiền+ Đã hủy: có chức năng mua lại
Khách hàng có thể tra cứu đơn hàng của mình mà không cần đăng nhập với mã đơn hàng, nếu đúng sẽ hiển thị các đơn hàng có mà giống mã được nhập, còn sai sẽ nhận được thông báo “Mã đơn hàng không tồn tại.”
Hiển thị tổng quát các thông tin về bài tập lớn và về nhóm
Khi người dùng gặp bất cứ lỗi gì như không tìm thấy đường dẫn, … sẽ được chuyển đến đây
Quản trị viên
Đây là trang quản trị mặc định của Django, quản trị viên có thể thực hiện các
Hệ thống thông báo
Tổng kết
Kết quả đạt được
- Thiết kế thành công website bán hàng, đáp ứng được yêu cầu của người sử dụng.
- Giao diện website được thiết kế đơn giản, thân thiện và dễ sử dụng
- Tìm hiểu và nắm bắt cơ bản được những công cụ để thiết kế website như: Figma, các ngôn ngữ lập trình Website như: HTML, Javascript, CSS và Django Framework của Python
- Có hiểu biết cơ bản về thiết kế cơ sở dữ liệu
- Kỹ năng làm việc nhóm được cải thiện
Hạn chế
- Việc biểu diễn các thông tin trên website chưa được linh hoạt.
- Phân tích thiết kế chưa được hoàn chỉnh.
- Nhiều chức năng còn thiếu và chưa sử dụng được.
- Trang quản trị còn dang dở.
- Thời gian tải trang còn lâu.
- Khả năng bảo mật thấp.
- Khả năng tái sử dụng code chưa được tối ưu.
- Chưa sử dụng được trên môi trường Internet.
- Chưa xử lí triệt để các ngoại lệ có thể xảy ra.
Hướng phát triển của đề tài
- Hoàn thành và cải thiện những chức năng còn dang dở
- Mở rộng, sử dụng các công nghệ mới để tối ưu hóa trải nghiệm người dùng