Tiểu luận này tập trung vào việc mô tả quy trình thiết kế website bán nước hoa mang tên Shinnoshop. Với sự phát triển nhanh chóng của thương mại điện tử, việc có một trang web hiệu quả là không thể phủ nhận trong kinh doanh nước hoa. Shinnoshop không chỉ là nơi để mua sắm mà còn là không gian trải nghiệm độc đáo, thú vị cho người tiêu dùng yêu thích nước hoa. Quá trình thiết kế bao gồm việc tạo ra giao diện người dùng thân thiện, trực quan và dễ sử dụng, giúp khách hàng dễ dàng tìm kiếm và mua sắm. Hệ thống phân loại sản phẩm theo loại nước hoa, thương hiệu và giới tính sẽ giúp tối ưu hóa trải nghiệm người dùng. Đồng thời, tích hợp chức năng đánh giá và đánh giá từ người dùng giúp xây dựng uy tín cho sản phẩm. Shinnoshop cũng chú trọng vào việc tối ưu hóa trang web cho thiết bị di động, đảm bảo rằng khách hàng có thể mua sắm mọi nơi và mọi lúc. Bằng cách này, tiểu luận này sẽ phân tích chi tiết cách Shinnoshop tận dụng các yếu tố thiết kế để tạo ra một trải nghiệm mua sắm trực tuyến đẳng cấp cho người hâm mộ nước hoa.
GIỚI THIỆU
Đặt vấn đề
Trong bối cảnh toàn cầu hóa và sự phát triển mạnh mẽ của công nghệ, thương mại điện tử đã trở thành một hình thức kinh doanh nổi bật, giúp các doanh nghiệp truyền thống tiếp cận nhiều khách hàng hơn Việc xây dựng hệ thống website thương mại điện tử không chỉ giảm thiểu chi phí duy trì mà còn nâng cao hiệu quả kinh tế Sự phát triển của Internet cho phép thông tin sản phẩm được truyền tải nhanh chóng và thuận tiện, kết hợp với dịch vụ giao hàng và thanh toán tận nơi qua bưu điện và ngân hàng, tạo điều kiện thuận lợi cho mô hình kinh doanh này phát triển.
Trong bối cảnh hiện nay, việc “xây dựng website thương mại điện tử bán nước hoa” trở thành một đề tài nghiên cứu quan trọng, nhằm phát triển một nền t
Những nghiên cứu liên quan
2.1 Phân tích xu hướng thương mại điện tử
Nghiên cứu những xu hướng và thay đổi trong hành vi mua sắm trực tuyến, đặc biệt là trong ngành công nghiệp nước hoa
2.2 Phát triễn nền tảng tích hợp
Xây dựng một website thương mại điện tử chuyên nghiệp với khả năng tích hợp các tính năng quan trọng như thanh toán an toàn, đánh giá sản phẩm và tùy chọn tìm kiếm thông minh là điều cần thiết để thu hút và giữ chân khách hàng.
2.3 Chiến lược tiếp thị, quảng bá
Nghiên cứu cận cảnh các đối thủ cạnh tranh và xác định những đặc điểm nôi rbaatj để tạo ra lợi thế cạnh tranh.
Mục tiêu đề tài
Ngày nay, ngành công nghiệp mỹ phẩm phát triển mạnh mẽ, dẫn đến nhu cầu làm đẹp ngày càng tăng, trong đó nước hoa trở thành sản phẩm phổ biến hơn bao giờ hết Tuy nhiên, việc khan hiếm cửa hàng nước hoa chính hãng và sự tràn lan của sản phẩm giả khiến người tiêu dùng lo lắng về việc tìm kiếm nước hoa an toàn và chất lượng Để giải quyết vấn đề này, tôi đã thực hiện đề tài “Xây dựng website bán nước hoa trực tuyến”, nhằm giúp khách hàng dễ dàng tiếp cận các sản phẩm chính hãng, an toàn và đa dạng, đồng thời cung cấp cái nhìn tổng quan về sản phẩm mọi lúc, mọi nơi.
6 mà không cần phhari di chyển tới cửa hàng mà sản phẩm được gửi về tận tay khách hàng chỉ với vài cú click chuột.
Đối tượng và phạm vi nghiên cứu
3.1 Đối tượng nghiên cứu Đề tài tập trung nghiên cứu các vấn đề chính:
- Thiết kế và xây dựng các chức năng cơ bản của cửa hàng trực tuyến
- Thiết kế cơ sở dữ liệu của website bán hàng
- Nghiên cứu về hành vi mua sắm và tối ưu trãi nghiệm người dùng
3.2 Giới hạn phạm vi nghiên cứu đề tài
Tập trung nghiên cứu tối ưu quy trình giúp người bán và người mua tiếp cận dễ dàng với nhau
Người bán dễ dàng đăng tải bài viết, thông tin sản phẩm mình muốn bán
Nguời mua có thể dễ dàng tìm kiếm và mua sản phẩm mình cần.
Phương pháp nghiên cứu
- Nghiên cứu cách hoạt động của mô hình Client – Server
- Nghiên cứu luồng dữ liệu và cách hoạt động của mô hình MVC (Models – Controller
- View) trong ngôn ngữ lập trình PHP
- Nghiên cứu cách lưu và truy vấn dữ liệu của hệ quản trị cơ sở dữ liệu MySQL
- Sử dụng ngôn ngữ lập trình PHP và hệ quản cơ sở dữ liệu MySQL để xây dựng web động
- Áp dụng mô hình MVC trong lập trình giúp dễ dàng chỉnh sửa và mở rộng website
- Sử dụng framework Boostrap để thiết kế giao diện thuận lợi và có tính thẩm mĩ.
Kết quả đạt được
Chủ cửa hàng có thể dễ dàng đăng tải sản phẩm và dịch vụ, đồng thời quản lý hiệu quả doanh thu của cửa hàng Việc đưa website lên Internet giúp tiếp cận lượng khách hàng lớn, góp phần quảng bá thương hiệu và giảm chi phí duy trì kinh doanh.
Khách hàng có thể dễ dàng tiếp cận một nguồn sản phẩm phong phú với nhiều mức giá khác nhau, giúp họ thuận tiện trong việc tìm kiếm và mua sắm sản phẩm phù hợp với nhu cầu của mình.
Đối với sinh viên thực hiện đề tài "Nâng cao trình độ thiết kế và phân tích website", việc áp dụng kiến thức đã học vào thực tế không chỉ giúp tăng cường kinh nghiệm mà còn phát triển khả năng tư duy giải quyết vấn đề.
Bố cục
Bố cục của báo cáo bao gồm các nội dung sau:
Chương 1: Giới thiệu đề tài
Chương 2: Giới thiệu các công nghệ sử dụng trong đề tài
Chương 3: Đặc tả yêu cầu
Chương 4: Thiết kế, cài đặt giải thuật, biểu diễn cơ sở dữ liệu, trình bày các bước xây dựng hệ thống
Trình bày kết quả đạt được và hướng phát triển của hệ thống
CÁC CÔNG NGHỆ ĐƯỢC SỬ DỤNG TRONG ĐỀ TÀI
1 Giới thiệu về các ngôn ngữ lập trình được sử dụng
HTML là ngôn ngữ đánh dấu siêu văn bản, đóng vai trò quan trọng trong việc xây dựng và cấu trúc nội dung trên trang web Nó sử dụng các thẻ và thuộc tính để mô tả cấu trúc của trang, bao gồm tiêu đề, đoạn văn, hình ảnh và liên kết Với HTML, trình duyệt có thể hiểu và hiển thị thông tin một cách chính xác, tạo nền tảng cho trải nghiệm người dùng trên web.
CSS là ngôn ngữ dùng để tìm kiếm và định dạng các phần tử được tạo ra bởi HTML, giúp kiểm soát giao diện và bố cục của trang web Ngôn ngữ này cho phép xác định các quy tắc về màu sắc, font chữ, khoảng cách và các thuộc tính thiết kế khác.
JavaScript là ngôn ngữ lập trình chủ yếu trên trình duyệt, cho phép tạo hiệu ứng động và thao tác với DOM Nó nâng cao trải nghiệm người dùng thông qua các chức năng kiểm tra biểu mẫu, kiểm soát sự kiện và tương tác AJAX, giúp tải dữ liệu mà không cần làm mới trang.
PHP là ngôn ngữ lập trình phía máy chủ chủ yếu dùng để xử lý logic và tạo nội dung động trên web Nó thường được tích hợp với HTML để xây dựng các trang web tương tác, có khả năng kết nối với cơ sở dữ liệu, xử lý biểu mẫu và tạo nội dung đa dạng dựa trên dữ liệu đầu vào PHP đóng vai trò quan trọng trong nhiều hệ thống quản lý nội dung và ứng dụng web động.
Hình 1: Mô tả PHP hoạt động
2.1 Hệ quản trị cơ sở dữ liệu MySQL
MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở, nổi bật với hiệu suất cao và tính bảo mật Hệ thống này hỗ trợ cơ sở dữ liệu quan hệ, giúp lưu trữ và quản lý dữ liệu hiệu quả trong các ứng dụng web và hệ thống thông tin Với sự phổ biến và tính mạnh mẽ của mình, MySQL trở thành lựa chọn hàng đầu cho nhiều nhà phát triển.
Boostrap là một framework bao gồm các thành phần HTML, CSS, JS template dùng để phát triển webside chuẩn responsive
Bootstrap giúp tăng tốc quá trình thiết kế website bằng cách cung cấp các thành phần cơ bản như form, button, bảng và điều hướng, làm cho việc phát triển trở nên nhanh chóng và dễ dàng hơn.
Bootstrap là bộ công cụ miễn phí và mã nguồn mở, giúp tạo ra mẫu website hoàn chỉnh Với các thuộc tính giao diện được định sẵn như kích thước, màu sắc, độ cao và chiều rộng, Bootstrap cho phép các designer sáng tạo ra nhiều sản phẩm mới mẻ một cách hiệu quả và tiết kiệm thời gian.
MVC, viết tắt của Model – View - Controller, là một mô hình thiết kế trong kỹ thuật phần mềm, được sử dụng để phát triển giao diện người dùng trên máy tính Mô hình này bao gồm ba thành phần chính: Model, View và Controller, mỗi thành phần đảm nhận một nhiệm vụ riêng biệt và hoạt động độc lập với nhau.
- Model (dữ liệu): Quản lí xữ lí dữ liệu (thực hiện các truy vấn tương tác với cơ sở dữ liệu)
- View (giao diện): Nơi hiển thị dữ liệu ra màn hình cho người dùng
- Controller (bộ điều khiển): Điềi khiển sự tương tác của hai thành phần Model và View
XAMPP là bộ công cụ phần mềm mã nguồn mở, giúp đơn giản hóa việc triển khai ứng dụng web trên máy tính cá nhân Tên gọi XAMPP là viết tắt của các thành phần chính trong bộ công cụ này.
- X: Dành cho cả 3 hệ điều hành: Window, Linux và macOS
- A: Apache – một máy chhur web
- M: MySQL – hệ quản trị cơ sở dữ liệu
- P: PHP – Ngôn ngữ lập trình phía máy chủ
XAMPP là một giải pháp lý tưởng cho việc phát triển ứng dụng web, cung cấp môi trường đơn giản để thử nghiệm và phát triển trước khi triển khai lên môi trường thực tế.
ĐẶT TẢ YÊU CẦU
1 Các chức năng của hệ thống
Website bán hàng trực tuyến chủ yếu phục vụ 3 nhóm đối tượng chính: Khách hàng vãng lai, khách hàng đã đăng ký tài khoản, quản trị viên
1.1 Các bảng chức năng Đối tượng Chức năng Mô tả Đăng ký tài khoản Đăng ký 1 tài khoản trên website để người bán có thể dễ dàng nhận diện được khách hàng cũng như dễ dàng thanh toán sau khi mua sản phẩm
Khách vãng lai Xem sản phẩm Khách hàng có thể xem sản phẩm được đăng tải trên website (hình ảnh, giá, mô tả,…)
Tìm kiếm Xem sản phẩm theo danh mục sản phẩm, tìm kiếm thông qua từ khóa,…
Giỏ hàng Có thể thêm, xóa sản phẩm trong giỏ hàng,…
Xem bình luận Xem các bình luận và đánh giá sản phẩm
Bảng 1: Bảng chức năng khách vãng lai
Khách vãng lai có thể tham khảo thông tin mô tả sản phẩm và thực hiện mua hàng mà không cần đăng ký tài khoản Khi đặt hàng, khách chỉ cần nhập lại thông tin cần thiết.
Khách hàng cần đăng ký tài khoản để dễ dàng đăng nhập và quản lý thông tin cá nhân Việc đăng nhập không chỉ giúp website ghi nhớ thông tin của khách hàng mà còn giúp quản trị viên nhận diện thành viên nhanh chóng, từ đó hỗ trợ quá trình thanh toán hiệu quả hơn Sau khi mua sắm, khách hàng nên đăng xuất để bảo vệ thông tin cá nhân an toàn hơn.
Xem sản phẩm Khách hàng có thể xem sản phẩm được đăng tải trên website (hình ảnh, giá, mô tả,…)
Tìm kiếm Xem sản phẩm theo danh mục sản phẩm, tìm kiếm thông qua từ khóa,…
Giỏ hàng Có thể thêm, xóa sản phẩm trong giỏ hàng,…
Bảng 2: Bảng chức năng khách hàng đã đăng ký tài khoản
Khi khách hàng đăng ký tài khoản, họ sẽ được hưởng đầy đủ các chức năng như khách vãng lai, bao gồm khả năng mua hàng mà không cần nhập lại thông tin giao hàng nhiều lần.
11 Đối tượng Chức năng Mô tả
Thay đổi mật khẩu cho phép người dùng cập nhật bảo mật cho tất cả tài khoản Quản lý người dùng giúp thêm, sửa, xóa tài khoản và phân quyền cho từng tài khoản Quản lý sản phẩm cho phép thêm, sửa, xóa và cập nhật thông tin sản phẩm, đồng thời quản lý danh mục sản phẩm hiệu quả.
Thêm, sửa, xóa và cập nhật thông tin danh mục sản phẩm
Quản lý nhà cung cấp sản phẩm
Thêm, sửa, xóa và cập nhật thông tin nhà cung cấp
Bảng 3: Bảng chức năng quản trị viên
Quản trị viên có đầy đủ các chức năng để có thể quản lí duy trì website hoạt động tốt
Hình 2: Sơ đồ uscase mô tả các đối tượng
Người dùng hệ thống là những cá nhân tương tác trực tiếp với hệ thống, đóng vai trò quan trọng trong việc sử dụng và điều khiển nó Mỗi đối tượng người dùng đều kế thừa các chức năng từ người dùng hệ thống, đồng thời sở hữu những chức năng riêng biệt, phù hợp với nhu cầu và mục đích sử dụng của họ.
1.3 Một số chức năng hệ thống
Hình 3: Sơ đô usecase mô tả chức năng đang nhập của tác nhân
Tác nhân: thành viên, admin
Mô tả: Sơ đồ này mô tả quá trình mà các tác nhân đang nhập và đăng xuất khỏi trang web
1.3.2 Xem thông tin sản phẩm
Hình 4: Sơ đô usecase mô tả các chức năng tổng quát của khách hàng
Tác nhân: Khách hàng bao gồm cả khách vãng lai và thành viên
Mô tả: sơ đô mô tả các chức năng mà một khách hàng có
1.3.3 Sơ đồ tổng quát các chức năng của quản trị viên
Hình 5: Sơ đô usecase mô tả các chức năng của quản trị viên
Tác nhân: Quản trị viên
Mô tả: Quản trị viên là người trực tiếp điều hành hệ thống website
- Quản lý sản phẩm (thêm, sửa, xóa)
- Quản lý tài khoản người dùng (thêm, sửa, xóa)
- Quản lý danh mục sản phẩm (thêm, sửa, xóa)
- Quản lí nhà cung cấp (thêm, sửa, xóa)
Hình 6: Sơ đô usecase mô tả chức năng giỏ hàng
Tác nhân: Khách vãng lai, thành viên
Mô tả: Sơ đồ mô tả quá trình khách hàng thêm sản phẩm vào giỏ hàng.
THIẾT KẾ VÀ CÀI ĐẶT
1 Thiết kế cơ sở dữ liệu
Hình 7: Sơ đồ cơ sở dữ liệu quan hệ
*Bảng tbl_user name Type Length Decimals Not null virtual key userID int 11 x Khóa chính userName varchar 255 x userEmail varchar 255 x
*Bảng tbl_category name Type Length Decimals Not null virtual key
Category_id int 11 x Khóa chính
*Bảng tbl_brand name Type Length Decimals Not null virtual key brand_id int 11 x Khóa chính brand_name varchar 255 x
Category_id int 11 x Khóa ngoại
*Bảng tbl_product name Type Length Decimals Not null virtual key product_id int 11 x Khóa chính product_name varchar 255 x
Category_id int 11 x Khóa ngoại
Brand_id Int 11 x Khóa ngoại
*Bảng tbl_cart name Type Length Decimals Not null virtual key
Cart_id int 11 x Khóa chính
Cart_name varchar 255 x product_id vachar 255 x Khóa ngoại product_name vachar 255 x
Product_price int 255 quantity int 255
*Bảng tbl_product_img_desc name Type Length Decimals Not null virtual key product_id int 11 x Khóa ngoại
Bảng 9: Bảng tbl_product_img_desc
*Bảng tbl_cuspayment name Type Length Decimals Not null virtual key id int 11 x Khóa chính cusName varchar 255 cusPhone varchar 255 province varchar 255 town varchar 255 adress varchar 255 email varchar 255
2 Mô tả luồng dữ liệu một số chức năng
Hình 8: Sơ đồ mô tả quá trình đăng nhập của quản trị viên
Tác nhân: Quản trị viên
- Quản trị viên nhập username và password của tài khoản
- Hệ thống sẽ gọi controller tương ứng ở đây (userContrller)
- Hàm login-admin() sẽ gửi yêu cầu đên lớp model (userModel)
User Model sẽ thực hiện việc kiểm tra dữ liệu từ cơ sở dữ liệu, so sánh với thông tin mà quản trị viên cung cấp và trả về một mảng kết quả chứa các người dùng có thông tin trùng khớp.
Controller nhận dữ liệu từ model và quyết định giao diện hiển thị cho người dùng Nếu đăng nhập thành công, người dùng sẽ được chuyển hướng đến trang chủ của hệ thống quản trị Ngược lại, nếu đăng nhập thất bại, hệ thống sẽ tiếp tục chuyển hướng về trang đăng nhập.
2.2 Thêm danh mục sản phẩm
Hình 9: Sơ đồ mô tả quá trình thêm danh mục sản phẩm của quản trị viên
Tác nhân: Quản trị viên
- Quản trị viên thực hiên nhập thông tin bao gồm category_id và category_name
- Hệ thống gọi controller (categoryAddController)
- categoryModel móc dữ liệu từ database và thực hiện thêm dữ liệu và database thông qua hàm insert_category()
- Category trả về kết quả cho categoryAddController
- Controller dựa trên dữ liệu vừa thêm gọi view để hiển thị giao diện
Khi người dùng thêm một danh mục sản phẩm, nếu thành công, hệ thống sẽ tự động điều hướng trở lại giao diện danh sách các danh mục sản phẩm (categoryView => categoryViewList) Ngược lại, nếu việc thêm danh mục thất bại, danh mục đó sẽ không xuất hiện trong danh sách các danh mục sản phẩm.
2.3 Chỉnh sửa danh mục sản phẩm
Hình 10: Sơ đò mô tả quá trình cập nhật danh mục sản phẩm của quản trị viên
Tác nhân: Quản trị viên
- Quản trị viên yêu cầu chỉnh sửa
- Hệ thống gọi controller (categoryUpdateController)
- categoryModel móc dữ liệu từ database và thực hiện update dữ liệu vào database
- Category trả về kết quả cho categoryUpdateController
- Controller dựa trên dữ liệu vừa thêm gọi view để hiển thị giao diện
Khi người dùng thêm danh mục sản phẩm, nếu thành công, hệ thống sẽ điều hướng trở lại giao diện danh sách các danh mục sản phẩm Ngược lại, nếu việc thêm danh mục thất bại, danh mục đó sẽ không được hiển thị trên trang danh sách.
2.4 Xóa danh mục sản phẩm
Hình 11:Sơ đò mô tả quá trình xóa danh mục sản phẩm của quản trị viên
Tác nhân: Quản trị viên
- Quản trị viên yêu cầu xóa
- Hệ thống gọi controller (categoryController)
- categoryModel móc dữ liệu từ database và thực hiện xóa dữ liệu khỏi database thông qua hàm delete_category()
- Category trả về kết quả cho categoryController
- Controller dựa trên dữ liệu vừa thêm gọi view để hiển thị giao diện
Khi người dùng thêm một danh mục sản phẩm, nếu thành công, hệ thống sẽ tự động điều hướng trở lại giao diện danh sách các danh mục sản phẩm Ngược lại, nếu việc thêm danh mục thất bại, danh mục đó sẽ không xuất hiện trên trang danh sách sản phẩm.
3.1 Giao diện phía quản trị
Hình 12: Giao diện trang chủ Admin
3.1.2 Giao diện danh sách danh mục sản phẩm
Hình 13;Giao diện trang danh sách danh mục
3.1.3 Giao diện thêm danh mục sản phẩm
Hình 14: Giao diện trang thêm danh mục
3.1.4 Giao diện cập nhật danh mục sản phẩm
Hình 15: Giao diện trang chỉnh sửa danh mục
3.1.5 Giao diện danh sách nhà cung cấp
Hình 16: Giao diện trang danh sách nhà cung cấp
3.1.6 Giao diện thêm nhà cung cấp
Hình 17: Giao diện trang thêm nhà cung cấp
3.1.7 Giao diện cập nhật thông tin nhà cung cấp
Hình 18: Giao diện trang cập nhật thông tin nhà cung cấp
4.1.8 Giao diện danh sách sản phẩm
Hình 19: Giao diện trang sản phẩm
4.1.9 Giao diện thêm sản phẩm
Hình 20: Giao diện trang thêm sản phẩm
3.1.10 Giao diện cập nhật thông tin sản phẩm
Hình 21: Giao diện trang cập nhật sản phẩm
4.1.11 Giao diện danh sách tài khoản người dùng
Hình 22: Giao diện trang danh sách tài khoản người dùng
4.1.12 Giao diện thêm tài khoản người dùng
Hình 23: Giao diện trang thêm tài khoản
4.1.13 Giao diện cập nhật thông tin người dùng
Hình 24: Giao diện trang cập nhật thông tin tài khoản
4.1.14 Giao diện biểu mẫu đang nhập người dùng
Hình 25: Giao diện trang trang đang nhập/đăng ksy người dùng
3.1.15 Giao diện biểu mẫu đăng nhập quản trị hệ thống
Hình 26: Giao diện trang đăng nhập hệ thống quản trị
4.2 Giao diện phía người dùng
Hình 27: Giao diện trang chủ
4.2.2 Giao diện trang sản phẩm
Hình 28: Giao diện trang sản phẩm
4.2.3 Giao diện trang chi tiết sản phẩm
Hình 29: Giao diện trang chi tiết sản phẩm
4.2.4 Giao diện trang giỏ hàng
Hình 30: Giao diện trang giỏi hàng
4.2.5 Giao diện trang đơn hàng
Hình 31: Giao diện trang đơn hàng
4.2.6 Giao diện trang thanh toán
Hình 32: Giao diện trang thanh toán
- Website thể hiện được thông tin về sản phẩm và chức năng giỏ hàng
- Xây dựng được các chức năng cơ bản của quản trị: Quản lí sản phẩm, danh mục, nhà cung cấp, tài khoản người dùng
- Hệ thống hỗ trợ quản trị viên chỉnh sửa thông tin, đăng thêm và cập nhật sản phẩm,…
Trong tương lai, nếu có nhiều thời gian hơn sẽ hoàn thiện đầy đủ hơn các chức năng của website
- Bổ sung thêm giao diện và tối ưu thiết kế hơn để website thêm sinh động
- Xây dựng thêm các chức năng dung tích nước hoa, thêm các chức năng quản lí đơn hàng,…
- Xây dựng thêm chức năng thanh toán trực tuyến
- Xây dựng thêm chatbot trả lời tin nhắn tự động…
- Tăng cường bảo mật cho websize
Để bảo mật source code cho website, bạn có thể áp dụng các kỹ thuật mã hóa toàn bộ source code nhằm ngăn chặn việc đánh cắp và bảo vệ thông tin hiệu quả.