đồ án 1 xây dựng website bán trang sức

Trong bài báo cáo này, em đã nghiên cứu xây dựng website bán hàng trangsức, để mang đến các sản phẩm phù hợp với người dùng, giúp cho khách hàngkhông phải đi trực tiếp đến cửa hàng mà có

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN TRANG SỨC

GIẢNG VIÊN HƯỚNG DẪN:

ThS TRẦN THỊ HỒNG YẾN

SINH VIÊN THỰC HIỆN NGUYỄN TIẾN LỘC MSSV: 20521549

Một lần nữa em xin gửi lời cảm ơn đến tất cả các thầy cô Kính chúc quýthầy cô thật nhiều sức khỏe!

Em xin chân thành cảm ơn!

TP.HCM, ngày 30 tháng 12 năm 2023

Sinh viên thực hiện

Nguyễn Tiến Lộc

4.2.7 Trang thông báo 37

Hình 4.23: Màn hình xem danh sách mã giảm giá 48

Hình 4.25: Màn hình xem danh sách tài khoản admin 50DANH MỤC BẢNG

TÓM TẮT ĐỀ TÀI

Dự án cá nhân này bắt đầu như một ý tưởng cho một cửa hàng bán trangsức trực tuyến kinh doanh nhỏ có tên là Destiny Thiết kế nhận diện thương hiệuđầu tiên được tạo ra và sau đó trang web được thiết kế trực tiếp bằng mã Nó cóthiết kế đơn giản và gọn gàng nhưng với một vài hình ảnh động và tương tác giúpngười dùng có trải nghiệm tốt hơn và thú vị hơn

“Website bán hàng trang sức” hệ thống chọn ra những sản phẩm trang sứccao cấp độc quyền từ các thương hiệu để mang đến cho người tiêu dùng, giúp chongười tiêu dùng tiếp cận dễ dàng và nhanh chóng những trang sức mới nhất củacửa hàng

Trong bài báo cáo này, em đã nghiên cứu xây dựng website bán hàng trangsức, để mang đến các sản phẩm phù hợp với người dùng, giúp cho khách hàngkhông phải đi trực tiếp đến cửa hàng mà có thể mua mọi lúc mọi nơi ngay trênwebsite

Từ khóa: e-commerce, website bán hàng trang sức, mua hàng trực tuyến.

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN

1.1 Đặt vấn đề

Hiện nay thương mại điện tử Việt Nam đang phát triển rất nhanh Nhu cầumua sắm trực tuyến của người dùng ngày càng tăng cao Việc xây dựng trang webbán hàng trang sức trực tuyến là điều tất yếu cho những công ty, các tổ chức kinhdoanh muốn hình thành thương hiệu Thương mại điện tử thực sự là một cuộccách mạng trong phương thức bán hàng mà nếu biết cách áp dụng thì doanhnghiệp sẽ đạt được thành công ngoài mong đợi trong việc đưa sản phẩm đến tayngười tiêu dùng

Ngày nay số lượng lớn người dùng có thói quen lướt web bằng các thiết bị

di động việc thiết kế các trang web có giao diện thân thiện với màn hình điện thoạithông minh, máy tính bảng sẽ thu hút được số đông người dùng Không nhữngthế, các trang web muốn mang lại doanh thu cao và đáp ứng nhu cầu khách hàng

về việc lựa chọn những sản phẩm chất lượng mà không tốn nhiều thời gian

Xuất phát từ những thực tế đó, tôi quyết định chọn đề tài “Website bánhàng trang sức” với mục đích xây dựng một trang web với những sản phẩm chấtlượng, tiện lợi cho việc mua hàng và thanh toán trực tuyến

Dự án cá nhân này bắt đầu như một ý tưởng cho một cửa hàng trang sứctrực tuyến kinh doanh với tên Destiny

1.2 Mục tiêu của đề tài

● Cung cấp cho khách hàng một nền tảng để đặt hàng và truy cập thông tin vềsản phẩm và dịch vụ của tiệm trang sức

● Giúp doanh nghiệp quản lý tốt hơn về kho hàng, theo dõi dữ liệu bán hàng

và khách hàng, và thực hiện quyết định thông minh về chiến lược sản xuất

và marketing

● Tăng hiệu suất và giảm thời gian chờ cho khách hàng khi đặt hàng

● Cung cấp dữ liệu quan trọng về sở thích và xu hướng của khách hàng chodoanh nghiệp.

● Cung cấp một trải nghiệm trực tuyến tốt hơn cho khách hàng

1.3 Đối tượng và phạm vi nghiên cứu

1.4 Công cụ sử dụng

Trong quá trình thực hiện đề tài, đã sử dụng một số công cụ để phục vụ choviệc triển khai đề tài, bao gồm:

- Hệ điều hành: Windows 11

- Công cụ quản lý CSDL: MySQL, Xampp

- Công cụ xây dựng ứng dụng: Visual Studio Code

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

2.1 Các khái niệm cơ bản về HTML5

● HTML là bộ xương của website HTML5 là bản nâng cấp thứ 5 từ HTML.HTML5 giúp cho việc hiển thị nội dung hiệu quả hơn và cải thiện hiệu suất,các trang web sẽ có tốc độ tải nhanh hơn, băng thông sử dụng ít hơn và tuổithọ pin của các thiết bị di động sẽ được kéo dài hơn

● Các ưu điểm của HTML5 như:

o HTML5 giúp tương tác tốt hơn: Hỗ trợ các hiệu ứng động, có thêmcác thẻ mới giúp website năng động, đáp ứng được nhiều nhu cầucủa người dùng hơn Xác định vị trí địa lý: cho phép định vị trí địa lýcủa người dùng

o Phát triển ứng dụng game dễ dàng: với sự hỗ trợ của thẻ <canvas>,chúng ta có thể phát triển một số trò chơi trong HTML5 Bạn sẽ thấythích thú hơn rất nhiều khi xây dựng các ứng dụng game trên nềnHTML5 so với việc xây dựng các ứng dụng và trò chơi dạng Flashtrước đó

o Lưu trữ Web: lưu trữ dữ liệu của ứng dụng Web trên máy ngườidùng nhanh hơn và an toàn hơn hình thức lưu trữ bằng cookie Tíchhợp tính năng video/audio: tích hợp sẵn các thư viện hỗ trợ choaudio và video, không phải sử dụng chương trình từ bên thứ 3 Phùhợp thiết kế web trên các thiết bị và mọi màn hình khác nhau có thể

co giãn mà không bị xáo trộn bố cục hay hình ảnh

2.2 Các khái niệm cơ bản về CSS3

CSS3 là một chuẩn mới nhất của CSS, các ưu điểm của CSS3 như:

● Thêm các hiệu ứng transform 2D và 3D

● Bổ sung khả năng điều chỉnh cho nền (background) và đường bao (border)

● Bổ sung các bộ chọn

● Tạo hiệu ứng cho văn bản.

● Thêm các ảnh động, cấu trúc đa cột

● Thêm mới hiệu ứng box

2.3 Các khái niệm về Password hashing

● Khái niệm: Hashing (người ta hay dịch là băm) là quá trình tạo ra một chuỗi(được băm) từ một thông điệp (chuỗi) được truyền vào sử dụng một hàmtoán học nào đó (hàm băm mật mã).[6]

● Khái niệm: SQL Server là viết tắt của Structured Query Language, nó là mộtcông cụ quản lý dữ liệu được sử dụng phổ biến ở nhiều lĩnh vực Hầu hếtcác ngôn ngữ bậc cao đều có trình hỗ trợ SQL như Visual Basic, Oracle,Visual C#…Các chương trình ứng dụng và các công cụ quản trị CSDL chophép người sử dụng truy nhập tới CSDL mà không cần sử dụng trực tiếpSQL Nhưng những ứng dụng đó khi chạy phải sử dụng SQL

● Ưu điểm:

o SQL là ngôn ngữ tựa tiếng anh

o SQL là ngôn ngữ phi thủ tục, nó không yêu cầu ta cách thức truy nhậpCSDL như thế nào Tất cả các thông báo của SQL đều rất dễ sử dụng

và ít khả năng mắc lỗi

o SQL cung cấp tập lệnh phong phú cho các công việc hỏi đáp dữ liệu

o Chèn, cập nhật, xóa các hàng trong một quan hệ

o Tạo, sửa, xóa và thêm các đối tượng trong CSDL

o Điều khiển việc truy nhập tới cơ sở dữ liệu và các đối tượng của CSDL

để đảm bảo tính bảo mật của CSDL

o Đảm bảo tính nhất quán và sự ràng buộc của CSDL

o Yêu cầu duy nhất để sử dụng cho các hỏi đáp là phải nắm vững đượccác cấu trúc CSDL của mình

2.4 Ngôn Ngữ PHP

PHP (viết tắt của Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản(scripting language), một loại mã lệnh chủ yếu được dùng để phát triển các trangweb động Khác với các ngôn ngữ client-side, như Javascript, mã lệnh PHP đượcthực thi ở phía server sau đó mã HTML, được trả về cho trình duyệt (client) Cúpháp PHP được vay mượn nhiều từ C và Java, nên bạn sẽ nhanh chóng tiếp cận với

nó nếu đã học qua các ngôn ngữ kia Tuy nhiên, nếu chưa học cũng không sao, bởiPHP không quá khó đối với tất cả mọi người, ngay cả đối với những người khôngphải là lập trình viên chuyên nghiệp

CHƯƠNG 3: XÁC ĐỊNH, PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

o Cập nhật thông tin sau khi đăng ký thành viên

o Tìm kiếm sản phẩm theo tên, danh mục, thể loại, từ khoá, giá của sảnphẩm

o Tìm kiếm sản phẩm theo bộ lọc danh mục, thể loại sản phẩm

o Xem chi tiết sản phẩm

● Đối tượng admin:

Đối tượng admin có những chức năng chính sau:

o Quản lý khách hàng: quản lý khách hàng của toàn hệ thống (thêm,sửa, xóa, cập nhật)

o Quản lý giao diện trang web: cập nhật slide cho giao diện trang chủ,thêm, sửa, xóa, cập nhật sản phẩm, danh mục, thể loại sản phẩm(thêm, sửa, xóa, cập nhật)

o Quản lý sản phẩm: quản lý tất cả các sản phẩm (thêm, sửa, xóa, cậpnhật các sản phẩm hết hàng)

o Quản trị danh mục bán hàng: bao gồm quản lý các thông tin về danhmục sản phẩm, loại sản phẩm (thêm, sửa, xóa, cập nhật).

o Quản lý đơn hàng: xem đơn đặt hàng, xác nhận đơn hàng, các trạngthái đơn hàng (thêm, sửa, xóa, cập nhật)

o Xem thống kê doanh thu của hệ thống

3.2 Yêu cầu phần mềm

2.2.1 Yêu cầu chức năng.

● Hệ thống đặt hàng của khách hàng: khách hàng có thể đặt hàng trực tuyến vàxem thông tin về các sản phẩm và dịch vụ của tiệm trang sức

● Quản lý hàng tồn kho: khả năng quản lý hàng tồn kho, theo dõi dữ liệu bánhàng và khách hàng, đồng thời đưa ra quyết định sáng suốt về sản xuất

● Quản lý dữ liệu khách hàng: khách hàng có thể tạo tài khoản để lưu thông tin

cá nhân và lịch sử đặt hàng

● Theo dõi đơn hàng: khách hàng có thể theo dõi trạng thái đơn hàng của mình

● Tích hợp hệ thống thanh toán: tích hợp với các cổng thanh toán phổ biến đểthực hiện các giao dịch trực tuyến an toàn

● Quản lý thông tin sản phẩm: khả năng quản lý và hiển thị thông tin về cácsản phẩm và dịch vụ của tiệm trang sức

● Quản lý Tiếp thị và Bán hàng: các công cụ để quản lý các chiến dịch tiếp thị

và theo dõi hiệu suất bán hàng

● Báo cáo và Phân tích: khả năng tạo báo cáo và phân tích dữ liệu để cung cấpthông tin cho các quyết định kinh doanh

2.2.2 Yêu cầu phi chức năng.

● Yêu cầu về giao diện (GUI): giao diện thân thiện với người dùng, đơn giản,

sử dụng dễ dàng, các thao tác nhanh gọn, dễ hiểu, thuận tiện và có tính tươngtác cao

● Yêu cầu về chất lượng:

o Tính tiến hoá: dễ dàng nâng cấp và sử dụng các chức năng

o Tính tiện dụng: giao diện hệ thống trực quan, dễ sử dụng, tính tươngtác cao.

o Tính hiệu quả: hệ thống thể hiện đầy đủ thông tin, thời gian phản hồi,thông lượng nhanh chóng

o Tính tương thích: hệ thống hoạt động tốt trên các nền tảng Tươngthích với các loại điều hành

o Tính an toàn, bảo mật: hệ thống đảm bảo tính bảo mật với các thôngtin, chú trọng chức năng đăng nhập, mật khẩu để đảm bảo an toàn dữliệu

3.3 Sơ đồ Use-case

3.3.1 Use-case khách hàng vãng lai

Hình 3.1: Use-case khách hàng vãng lai

3.3.2 Use-case khách hàng thành viên

Hình 3.2: Use-case khách hàng thành viên

3.3.3 Use-case Admin

Hình 3.3: Use-case admin

3.4 Phân tích hệ thống

2.4.1 Mô hình CDM

Hình 3.4: Mô hình CDM

3.3.3.2 Products

Hình 3.7: Class products

Diễn giải: Thực thể products chứa thông tin sản phẩm, mỗi sản phẩm sẽ có một mã(product_id) tự tăng, ngày thêm, tên, giá tiền, hình ảnh, mô tả sản phẩm, nhãn sảnphẩm, giá giảm, từ khóa gợi ý tìm kiếm, tổng sản phẩm

3.3.3.3 Product_categories

Hình 3.8: Class product_categories

Diễn giải: Thực thể product_categories chứa thông tin danh mục sản phẩm, mỗidanh mục sản phẩm sẽ có một mã (product_category_id) tự tăng, tên danh mụcsản phẩm, mô tả danh mục sản phẩm

3.3.3.4 Categories

Hình 3.9: Class categories

Diễn giải: Thực thể categories chứa thông tin thể loại sản phẩm, mỗi thể loại sảnphẩm sẽ có một mã (category_id) tự tăng, tên thể loại sản phẩm, mô tả danh mụcsản phẩm

3.3.3.5 Coupons

Hình 3.10: Class coupons

Diễn giải: Thực thể coupons chứa thông tin mã giảm giá, mỗi mã giảm giá đều cómột mã (coupon_id) tự tăng, tên sản phẩm mã giảm giá, giá giảm, mã giảm giá, giớihạn số lượng mã sử dụng, số lượng mã đã dùng

3.3.3.6 Cart

Hình 3.11: Class cart

Diễn giải: Thực thể cart chứa thông tin mã giỏ hàng, mỗi giỏ đều có một mã(cart_id) tự tăng, địa chỉ ip thiết bị, kích thước sản phẩm, giá sản phẩm, số lượngsản phẩm

3.3.3.7 Customer_orders

Hình 3.12: Class customer_orders

Diễn giải: Thực thể customer_orders chứa thông tin sản phẩm đã được đặt hàng,mỗi đơn hàng có một mã (order_id) tự tăng, số tiền phải thanh toán, số hoá đơn,

3.5 Phân tích và thiết kế Cơ sở dữ liệu

Dựa trên việc xác định yêu cầu và phân tích yêu cầu, ứng dụng web bao gồmcác bảng sau đây:

product_label Text Nhãn sản phẩm

3.5.3 Bảng Product_categories

Bảng 3.3: Bảng mô tả Product_categories

Product_categories

3.5.5 Bảng Coupons

Bảng 3.5: Bảng mô tả Coupons

Coupons

3.5.7 Bảng Customer_orders

Bảng 3.7: Bảng mô tả Customer_orders

Customer_orders

customer_id Int Mã khách hàng

CHƯƠNG 4: CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG

4.1 Môi trường cài đặt

4.1.1 Cấu hình cài đặt

Phía Server:

- MySQL: Cơ sở dữ liệu quan hệ để lưu thông tin

Phía Client:

- Bootstrap 4: framework HTML, CSS hỗ trợ xây dựng giao diện web

4.1.2 Môi trường phát triển và triển khai hệ thống

4.1.2.1 Môi trường phát triển

- Hệ điều hành: Windows 11

- Công cụ quản lý CSDL: DataGrip, XAMPP

- Công cụ vẽ sơ đồ phân tích thiết kế: Draw.io

- Công cụ xây dựng ứng dụng: Visual Studio Code

4.1.2.2 Môi trường triển khai

- Hệ điều hành: Windows 11.

- Cài đặt: MySQL.

4.2 Màn hình giao diện

4.2.1 Trang chủ

Hình 4.1: Màn hình trang chủ

4.2.3 Trang tài khoản

Hình 4.4: Màn hình trang tài khoản

4.2.5 Trang chi tiết sản phẩm

Hình 4.6: Màn hình trang chi tiết sản phẩm

● Ở màn hình này, người dùng có thể xem danh sách các món hàng đã thêm,

số tiền tính tổng và nhấn chọn thanh toán

● Người dùng có thể xoá sản phẩm bằng cách chọn checkbox xóa và nhấn

“cập nhật lại giỏ hàng”

● Để tiến hành thanh toán, người dùng click nút “Tiến hành đặt hàng” đểthanh toán trực tiếp hoặc click nút “Thanh toán qua Vnpay” để thanh toántrực tuyến

4.2.7 Trang thông báo

Hình 4.8: Màn hình trang thông báo

Mô tả:

● Sau khi đặt hàng thành công, người dùng sẽ nhận được thông báo

● Người dùng có thể click “Xem đơn hàng” để có thể theo dõi đơn hàng đãđược đặt

4.2.8 Trang tin tức

Hình 4.9: Màn hình trang tin tức

Mô tả:

● Tại màn hình trang tin tức, người dùng có thể xem các tin tức mới liên quantới những sản phẩm nổi bật trên thị trường, những dịch vụ mới mẻ về trangsức.

● Khi người dùng chọn tin tức muốn xem, trang chi tiết tin tức sẽ hiển thị

4.2.9 Trang chi tiết tin tức

Hình 4.10: Màn hình trang chi tiết tin tức

Mô tả:

● Tại trang chi tiết tin tức, người dùng có thể theo dõi nội dung chi tiết của tintức và có thể để lại bình luận sau khi đọc tin tức

Hình 4.14: Màn hình xem danh sách sản phẩm

Mô tả:

● Tại màn hình xem danh sách sản phẩm; người dùng có thể xem, sửa và xóacác sản phẩm có trong danh sách sản phẩm bằng cách click vào các biểutượng tương ứng

4.2.13 Trang quản lý danh mục sản phẩm

Thêm danh mục sản phẩm

Hình 4.15: Màn hình thêm danh mục sản phẩm

4.2.14 Trang quản lý slide

Thêm slide banner

Hình 4.17: Màn hình thêm slide banner

Mô tả:

● Tại màn hình thêm slide banner, người dùng có thể thêm slide mới bằngcách nhập các thông tin liên quan, chọn file hình ảnh muốn tải lên và nhấnnút “Thêm” để xác nhận

Xem danh sách slide banner

Hình 4.18: Màn hình xem danh sách slide banner

Mô tả:

● Tại màn hình xem danh sách slide banner; người dùng có thể xem, sửa vàxóa các slide có trong danh sách slide banner bằng cách click vào các biểutượng tương ứng.

4.2.15 Trang quản lý đơn hàng

Xem danh sách đơn hàng

Hình 4.19: Màn hình xem danh sách đơn hàng

Hình 4.20: Màn hình xem chi tiết đơn hàng

Mô tả:

● Tại màn hình xem chi tiết đơn hàng, người dùng có thể xem được sản phẩm,

số tiền, số lượng, thời gian và trạng thái đơn hàng

● Trạng thái đơn hàng sẽ được hiển thị theo 4 trạng thái: “Đã xác nhận thanhtoán”, “Chờ xử lý”, “Đang giao”, “Đã giao”

● Người dùng có thể click vào 1 trong 4 nút có trong mục “Xác nhận trạng tháiđơn” để thay đổi trạng thái đơn hàng

4.2.16 Trang quản lý khách hàng

Hình 4.21: Màn hình xem danh sách khách hàng

Mô tả:

● Tại màn hình xem danh sách khách hàng; người dùng có thể xem và xóakhách hàng có trong danh sách bằng cách click vào biểu tượng tương ứng

4.2.17 Trang quản lý mã giảm giá

Thêm mã giảm giá

Hình 4.22: Màn hình thêm mã giảm giá

Mô tả:

● Tại màn hình thêm mã giảm giá, người dùng có thể thêm mã giảm giá mớibằng cách nhập các thông tin liên quan và nhấn nút “Thêm Mã giảm giá” đểxác nhận

Xem danh sách mã giảm giá