Xây Dựng Website Bán Quà Lưu Niệm Sử Dụng Công Nghệ VueJS và Laravel

Khám phá cách xây dựng website bán quà lưu niệm hiệu quả với Vue.js và Laravel, tối ưu hóa trải nghiệm người dùng và tăng doanh thu.

• Tác giả: Trương Cao Dương
• Người hướng dẫn: ThS. Ngô Thị Hoa
• Trường học: Trường Đại Học Công Nghệ Đông Á
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Website Bán Quà Lưu Niệm Sử Dụng VueJS và Laravel
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2023
• Địa điểm: Bắc Ninh

Mục lục chi tiết

• LỜI NÓI ĐẦU
• LỜI CẢM ƠN
• 1. CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI
• 1.1. Giới thiệu đề tài
• 1.2. Mục đích đề tài
• 1.3. Đối tượng phạm vi nghiên cứu
• 1.4. Ý nghĩa đề tài
• 1.5. Mô hình Client – Server
• 1.5.1. Khái niệm
• 1.5.2. Nguyên tắc hoạt động
• 1.5.3. Ưu điểm của mô hình
• 1.5.4. Nhược điểm
• 1.6. PHP và Framework Laravel
• 1.6.1. PHP
• 1.6.2. Framework Laravel
• 1.7. Framework VueJS
• 1.7.1. Ưu điểm của Vuejs
• 1.7.2. Nhược điểm của Vuejs
• 1.8. Cơ sở dữ liệu MySQL
• 1.8.1. Giới thiệu cơ sở dữ liệu
• 1.8.2. Mục đích sử dụng cơ sở dữ liệu
• 2. CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
• 2.1. Phân tích nghiệp vụ và hệ thống
• 2.2. Đặc tả Actor Khách hàng
• 2.3. Đặc tả Actor Quản trị viên
• 2.4. Biểu đồ luồng dữ liệu
• 2.4.1. Biểu đồ luồng dữ liệu mức khung cảnh
• 2.4.2. Biểu đồ luồng dữ liệu mức đỉnh
• 2.4.3. Biểu đồ luồng dữ liệu mức dưới đỉnh
• 2.5. Biểu đồ phân rã chức năng
• 2.6. Biểu đồ Use Case và mô tả kịch bản ca sử dụng
• 2.6.1. Biểu đồ Use Case
• 2.6.2. Mô tả kịch bản ca sử dụng
• 2.7. Biểu đồ tuần tự
• 2.7.1. Xem sản phẩm
• 2.7.2. Tìm kiếm sản phẩm
• 2.7.3. Thêm giỏ hàng
• 2.7.4. Đăng nhập admin
• 2.8. Phân tích cơ sở dữ liệu
• 2.8.1. Cấu trúc bảng cơ sở dữ liệu
• 2.8.2. Biểu ERD hệ thống
• 3. CHƯƠNG 3: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG KIỂM THỬ VÀ ĐÁNH GIÁ
• 3.1. Trang người dùng
• 3.2. Trang quản trị
• 4. CHƯƠNG 4: KẾT LUẬN
• 4.1. Hướng phát triển
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan về xây dựng website bán quà lưu niệm với VueJS và Laravel

Xây dựng website bán quà lưu niệm là một trong những xu hướng phát triển mạnh mẽ trong thương mại điện tử hiện nay. Sự kết hợp giữa VueJS và Laravel mang lại nhiều lợi ích cho việc phát triển ứng dụng web. VueJS giúp tạo ra giao diện người dùng linh hoạt, trong khi Laravel cung cấp nền tảng mạnh mẽ cho việc xử lý dữ liệu và bảo mật. Việc áp dụng công nghệ này không chỉ giúp tăng cường trải nghiệm người dùng mà còn tối ưu hóa quy trình quản lý sản phẩm.

1.1. Lợi ích của việc sử dụng VueJS cho website bán hàng

VueJS là một framework JavaScript nhẹ, giúp xây dựng giao diện người dùng một cách nhanh chóng và hiệu quả. Với khả năng tái sử dụng component, VueJS cho phép phát triển giao diện một cách linh hoạt và dễ dàng bảo trì. Điều này rất quan trọng trong việc tạo ra trải nghiệm người dùng tốt nhất cho website bán quà lưu niệm.

1.2. Tại sao chọn Laravel cho phát triển web

Laravel là một framework PHP mạnh mẽ, hỗ trợ phát triển ứng dụng web với tính bảo mật cao và khả năng mở rộng tốt. Nó cung cấp nhiều tính năng như quản lý phiên, xác thực người dùng và xử lý dữ liệu, giúp việc xây dựng website bán quà lưu niệm trở nên dễ dàng và hiệu quả hơn.

II. Những thách thức trong việc xây dựng website thương mại điện tử

Mặc dù việc xây dựng website bán quà lưu niệm với VueJS và Laravel mang lại nhiều lợi ích, nhưng cũng không thiếu những thách thức. Các vấn đề như bảo mật dữ liệu, tối ưu hóa SEO và quản lý kho hàng là những yếu tố cần được chú ý. Đặc biệt, việc tích hợp thanh toán trực tuyến cũng là một thách thức lớn mà các nhà phát triển cần giải quyết.

2.1. Vấn đề bảo mật trong website bán hàng

Bảo mật là một trong những yếu tố quan trọng nhất trong thương mại điện tử. Việc bảo vệ thông tin khách hàng và giao dịch là cần thiết để xây dựng lòng tin. Laravel cung cấp nhiều tính năng bảo mật như mã hóa và xác thực, giúp giảm thiểu rủi ro.

2.2. Tối ưu hóa SEO cho website bán quà lưu niệm

Tối ưu hóa SEO là yếu tố quyết định giúp website dễ dàng tiếp cận khách hàng. Việc sử dụng các từ khóa phù hợp và tối ưu hóa cấu trúc URL là rất quan trọng. Cần chú ý đến việc tạo nội dung chất lượng và liên kết nội bộ để cải thiện thứ hạng tìm kiếm.

III. Phương pháp xây dựng website bán quà lưu niệm hiệu quả

Để xây dựng một website bán quà lưu niệm hiệu quả, cần áp dụng các phương pháp phát triển hiện đại. Việc sử dụng VueJS cho giao diện người dùng và Laravel cho backend là một trong những phương pháp tối ưu. Ngoài ra, cần chú ý đến việc thiết kế giao diện thân thiện và dễ sử dụng.

3.1. Thiết kế giao diện người dùng với VueJS

Thiết kế giao diện người dùng là bước quan trọng trong việc phát triển website. VueJS cho phép tạo ra các component tái sử dụng, giúp tiết kiệm thời gian và công sức. Giao diện cần phải thân thiện và dễ dàng điều hướng để người dùng có thể tìm kiếm sản phẩm một cách nhanh chóng.

3.2. Quản lý dữ liệu với Laravel

Laravel cung cấp các công cụ mạnh mẽ để quản lý dữ liệu. Việc sử dụng Eloquent ORM giúp dễ dàng tương tác với cơ sở dữ liệu. Cần thiết lập các bảng dữ liệu cho sản phẩm, đơn hàng và người dùng để đảm bảo việc quản lý thông tin diễn ra suôn sẻ.

IV. Ứng dụng thực tiễn của website bán quà lưu niệm

Website bán quà lưu niệm không chỉ giúp tăng doanh thu mà còn tạo ra một kênh giao tiếp hiệu quả với khách hàng. Việc cung cấp thông tin sản phẩm chi tiết và dễ dàng đặt hàng trực tuyến sẽ thu hút nhiều khách hàng hơn. Ngoài ra, việc quản lý kho hàng cũng trở nên dễ dàng hơn với hệ thống tự động.

4.1. Tăng cường trải nghiệm khách hàng

Một website được thiết kế tốt sẽ giúp khách hàng dễ dàng tìm kiếm và đặt hàng. Cung cấp thông tin chi tiết về sản phẩm và hỗ trợ khách hàng trực tuyến sẽ tạo ra trải nghiệm tốt hơn cho người tiêu dùng.

4.2. Quản lý kho hàng hiệu quả

Việc quản lý kho hàng là rất quan trọng trong kinh doanh trực tuyến. Laravel cung cấp các công cụ để theo dõi tình trạng hàng hóa, giúp chủ cửa hàng dễ dàng cập nhật thông tin và quản lý đơn hàng.

V. Kết luận và tương lai của website bán quà lưu niệm

Xây dựng website bán quà lưu niệm sử dụng VueJS và Laravel không chỉ là một xu hướng mà còn là một nhu cầu thiết yếu trong thời đại số. Với sự phát triển không ngừng của công nghệ, việc áp dụng các công nghệ mới sẽ giúp cải thiện hiệu quả kinh doanh. Tương lai của thương mại điện tử sẽ ngày càng phát triển mạnh mẽ hơn.

5.1. Xu hướng phát triển công nghệ trong thương mại điện tử

Công nghệ sẽ tiếp tục phát triển và ảnh hưởng đến cách thức kinh doanh. Việc áp dụng trí tuệ nhân tạo và machine learning sẽ giúp cải thiện trải nghiệm người dùng và tối ưu hóa quy trình bán hàng.

5.2. Tương lai của website bán quà lưu niệm

Website bán quà lưu niệm sẽ ngày càng trở nên phổ biến. Việc cải thiện giao diện và tối ưu hóa quy trình mua sắm sẽ là những yếu tố quyết định giúp thu hút khách hàng và tăng doanh thu.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh công nghệ thông tin và chuyển đổi số phát triển liên tục, việc ứng dụng tin học hóa được xác định là thành phần tất yếu trong phương thức vận hành của các tổ chức, doanh nghiệp. Sở hữu một trang web độc lập đóng vai trò như một chiến lược tiếp thị, quảng bá và cạnh tranh thương mại, giúp mở rộng năng lực kinh doanh khi quy mô tăng trưởng. Các hệ thống bán lẻ trực tuyến kết hợp mạng xã hội (như Facebook, TikTok) đã mang lại hiệu quả rõ rệt cho nhiều chuỗi bán lẻ lớn (điển hình như Thế Giới Di Động, FPT Shop, Lazada). Tuy nhiên, các cơ sở kinh doanh vừa và nhỏ trong lĩnh vực bán lẻ quà tặng lưu niệm vẫn gặp khó khăn trong việc lựa chọn ngôn ngữ và framework phù hợp để đáp ứng đồng thời nhu cầu hiển thị thông tin trực quan cho khách hàng và tính tiện lợi trong công tác quản trị. Xuất phát từ thực tiễn đó, tác giả lựa chọn đề tài nghiên cứu nhằm xây dựng một hệ thống website thương mại điện tử chuyên biệt.

Mục tiêu nghiên cứu của đề tài được tác giả xác định cụ thể như sau:

1. Xây dựng hệ thống website có khả năng trình bày sản phẩm, tin tức, thông tin chi tiết từng mặt hàng; đồng thời quản lý hiệu quả các phân hệ sản phẩm, bài viết và các module chức năng một cách thuận tiện, thân thiện với người sử dụng.
2. Nghiên cứu và tích hợp các công nghệ phần mềm vào hệ thống nhằm cung cấp thông tin sản phẩm linh hoạt, hỗ trợ đẩy mạnh hoạt động kinh doanh, giải quyết các vấn đề về bảo mật dữ liệu và thiết lập giao diện người dùng trực quan.

Đối tượng và phạm vi nghiên cứu của khóa luận được phân định rõ ràng trong văn bản:

• Đối tượng nghiên cứu công nghệ: Hệ quản trị cơ sở dữ liệu MySQL, ngôn ngữ lập trình JavaScript, framework VueJS, nền tảng đám mây Firebase (Firebase Storage), ngôn ngữ lập trình PHP, framework Laravel và bộ công cụ môi trường cục bộ XAMPP.
• Phạm vi nghiên cứu nghiệp vụ: Toàn bộ quy trình và hoạt động liên quan đến bán hàng qua mạng, bao gồm hiển thị và quản lý thông tin sản phẩm, quản lý đơn đặt hàng, quản lý danh mục sản phẩm, quản lý danh mục bài viết, quản lý bài viết tin tức và quản lý tài khoản người dùng.
• Phạm vi ứng dụng thực tế: Phục vụ mô hình kinh doanh quà lưu niệm của cửa hàng Tiệm Cô Thỏ.
• Thời gian và địa điểm thực hiện: Đồ án tốt nghiệp đại học ngành Công nghệ Thông tin, Trường Đại học Công nghệ Đông Á, hoàn thành vào năm 2023 tại Bắc Ninh.

Cơ sở lý thuyết và phương pháp

Khóa luận thiết lập nền tảng lý thuyết dựa trên các mô hình kiến trúc mạng, công nghệ web mã nguồn mở và nền tảng lưu trữ đám mây:

• Mô hình mạng Client - Server: Mô hình phân tán trong đó máy khách (Client) gửi yêu cầu và máy chủ (Server) tiếp nhận, xử lý và phản hồi dữ liệu qua các giao thức truyền thông chuẩn hóa như HTTP, HTTPS, TCP/IP, FTP. Tác giả chỉ ra ưu điểm độc lập với phần cứng máy khách của mô hình, đồng thời lưu ý hạn chế về tính an toàn dữ liệu khi luân chuyển giữa các vị trí địa lý cách xa nhau.
• Ngôn ngữ PHP và Framework Laravel: PHP là ngôn ngữ kịch bản phía máy chủ (Server-Side), chạy độc lập với nền tảng hệ điều hành. Laravel (được tác giả tham chiếu đến phiên bản Laravel 8) là framework PHP mã nguồn mở xây dựng theo kiến trúc MVC (Model - View - Controller). Quy trình xử lý vận hành từ Route tiếp nhận yêu cầu, kích hoạt action trong Controller, tương tác cơ sở dữ liệu thông qua Model và kết xuất kết quả về View. Framework tích hợp công cụ dòng lệnh Artisan, thư viện gửi thư SwiftMailer và hệ thống bảo mật tích hợp.
• Framework VueJS: Framework JavaScript linh động (progressive) phục vụ xây dựng giao diện người dùng. VueJS hoạt động dựa trên cơ chế chỉ duy trì phần lõi gọn nhẹ, kết xuất (render) phía máy khách bằng JavaScript, cho phép biên dịch các thành phần máy chủ thành tệp JS tĩnh, từ đó tối ưu hóa tốc độ tải trang.
• Hệ quản trị cơ sở dữ liệu MySQL: Cơ sở dữ liệu quan hệ mã nguồn mở vận hành phối hợp với PHP, đáp ứng 4 nhóm chức năng kỹ thuật: lưu trữ (storage), truy cập (accessibility), tổ chức (organization) và xử lý (manipulation).
• Nền tảng Firebase và Firebase Storage: Dịch vụ lưu trữ tệp tin trên nền tảng Google Cloud Platform của Google. Firebase Storage cung cấp API tải lên và tải xuống các nội dung đa phương tiện (hình ảnh, video), tích hợp cơ chế xác thực Firebase Authentication và hỗ trợ duy trì tiến trình truyền dữ liệu khi mạng gặp sự cố ngắt quãng.
• Môi trường phát triển XAMPP: Bộ công cụ tích hợp máy chủ web Apache, PHP và hệ quản trị cơ sở dữ liệu cài đặt trên môi trường Windows.

Về phương pháp nghiên cứu và phát triển hệ thống, tác giả sử dụng phương pháp phân tích và thiết kế hệ thống thông tin kết hợp giữa tiếp cận hướng chức năng và tiếp cận hướng đối tượng:

• Phương pháp mô hình hóa luồng dữ liệu: Sử dụng Biểu đồ luồng dữ liệu (DFD) từ mức khung cảnh, mức đỉnh đến các mức dưới đỉnh nhằm xác định dòng dữ liệu luân chuyển giữa các tác nhân và kho lưu trữ.
• Phương pháp phân tích hành vi và cấu trúc đối tượng: Sử dụng Biểu đồ phân rã chức năng, Biểu đồ ca sử dụng (Use Case), Biểu đồ tuần tự (Sequence Diagram), Biểu đồ lớp (Class Diagram) và Sơ đồ quan hệ thực thể (ERD).
• Nguồn dữ liệu: Dữ liệu thực nghiệm thu thập từ danh mục sản phẩm lưu niệm, bảng giá, phân loại bán hàng và quy trình vận hành đơn hàng thực tế của cửa hàng quà lưu niệm Tiệm Cô Thỏ.

Thiết kế và triển khai hệ thống

Hệ thống được tổ chức theo cấu trúc phân tầng kết hợp giữa Backend Laravel và Frontend VueJS trên nền kiến trúc Client - Server. Toàn bộ logic nghiệp vụ, quản lý phiên làm việc, định tuyến và xử lý dữ liệu tập trung ở máy chủ web, trong khi giao diện người dùng phản hồi tương tác mượt mà tại trình duyệt.

Thành phần hệ thống	Công nghệ / Công cụ	Đặc tính kỹ thuật theo văn bản	Vai trò chức năng
Tầng giao diện (Frontend)	VueJS, JavaScript	Kiến trúc Component, render bằng JS, dung lượng tải thấp	Hiển thị giao diện người dùng, xử lý lọc sản phẩm không tải lại trang
Tầng nghiệp vụ (Backend)	PHP, Framework Laravel (v8)	Kiến trúc MVC, Artisan CLI, SwiftMailer API, cấu trúc app/Http	Tiếp nhận Route, xử lý Controller, điều phối dữ liệu qua Model
Cơ sở dữ liệu	MySQL	Hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở	Lưu trữ thông tin người dùng, sản phẩm, danh mục, đơn hàng
Lưu trữ đa phương tiện	Firebase Storage	Nền tảng Google Cloud Platform, API upload/download	Lưu trữ và phân phối tệp hình ảnh sản phẩm, ảnh tin tức
Môi trường thử nghiệm	XAMPP	Tích hợp máy chủ web Apache và PHP trên Windows	Môi trường cục bộ triển khai và kiểm thử hệ thống

Cơ sở dữ liệu của hệ thống được chuẩn hóa qua 7 thực thể chính trong sơ đồ ERD, trong đó cấu trúc dữ liệu vật lý thể hiện qua 5 bảng quan hệ cốt lõi:

• Bảng danh mục (categories): Chứa khóa chính id (Integer), tiêu đề name (String), created_at (Datetime), updated_at (Datetime) và trường ảnh image. Có quan hệ một - nhiều với bảng sản phẩm.
• Bảng sản phẩm (product): Chứa khóa chính id (Integer), name (String), description (Text), price (Integer), images (String), khóa ngoại category_id (Integer), slug, created_at, updated_at. Trường type (Enum) dùng để phân loại trạng thái hiển thị gồm: hot trend, nổi bật, bán chạy.
• Bảng đơn hàng (orders): Chứa khóa chính id (Integer), fullname (String), phone (String), email (String), address (Text), note (Text), total (Integer), status (Enum - trạng thái đơn hàng), paid_method (Enum - phương thức thanh toán), created_at, updated_at.
• Bảng chi tiết đơn hàng (order_detail): Chứa khóa chính id (Integer), khóa ngoại order_id (Integer), khóa ngoại product_id (Integer), số lượng sản phẩm cnt (Integer), created_at, updated_at. Bảng này giải quyết mối quan hệ nhiều - nhiều giữa thực thể sản phẩm và đơn hàng.
• Bảng người dùng (user): Chứa khóa chính id (Integer), username (String), password (String), fullname (String), token (Text), created_at, updated_at.
• Hai thực thể phụ trợ quản lý nội dung gồm danh mục bài viết (category_post) và bài viết tin tức (post), liên kết với nhau theo quan hệ một - nhiều để hiển thị các bài viết chia sẻ, tin tức liên quan.

Hệ thống thiết lập 8 kịch bản ca sử dụng chi tiết nhằm kiểm thử các luồng thao tác của người dùng và quản trị viên:

• Phân hệ khách hàng: Kịch bản xem chi tiết sản phẩm từ trang chủ/danh mục; kịch bản tìm kiếm sản phẩm theo từ khóa (kèm luồng phụ hiển thị thông báo không tìm thấy kết quả); kịch bản xem bài viết tin tức; kịch bản thêm sản phẩm vào giỏ hàng và điều chỉnh số lượng hoặc xóa sản phẩm trực tiếp trong giao diện giỏ hàng.
• Phân hệ quản trị viên: Kịch bản quản lý danh mục và sản phẩm (kiểm tra tính hợp lệ dữ liệu nhập vào form, thông báo lỗi nếu sai định dạng, xác nhận trước khi xóa); kịch bản quản lý người dùng; kịch bản duyệt đơn hàng với cơ chế ràng buộc trạng thái: đơn hàng ở trạng thái "đang xử lý" được phép chuyển sang "thành công" hoặc "hủy", nhưng đơn hàng đã chuyển sang trạng thái "thành công" sẽ bị khóa và không được phép cập nhật lại trạng thái.

Nội dung chính theo từng chương

Chương 1: Tổng quan đề tài

Chương 1 thiết lập bức tranh tổng thể về thương mại điện tử và lý do lựa chọn giải pháp phần mềm cho cửa hàng quà lưu niệm. Tác giả phân tích mô hình Client - Server về khái niệm, cơ chế hoạt động thông qua các giao thức mạng phổ biến (HTTP, HTTPS, TCP/IP, FTP) và đánh giá ưu nhược điểm kỹ thuật của mô hình. Tiếp đó, chương này đi sâu vào khảo sát các công nghệ nền tảng: ngôn ngữ PHP (lịch sử từ năm 1994, tính chất độc lập nền tảng và cơ chế thực thi phía máy chủ); framework Laravel (mô hình MVC, phiên bản Laravel 8, công cụ Artisan, cơ chế định tuyến routes); framework VueJS (tính chất linh động, cơ chế render bằng JavaScript giúp web nhẹ và tải nhanh, ưu thế dung lượng tải thấp cùng các nhược điểm về cộng đồng và tài liệu). Ngoài ra, chương khảo sát cơ sở dữ liệu MySQL theo 4 tiêu chí chức năng (lưu trữ, truy cập, tổ chức, xử lý), giới thiệu nền tảng Google Firebase (Firebase Storage, Firebase Authentication, Cloud Messaging), bộ phần mềm môi trường XAMPP và phân tích các lợi ích thiết thực của website thương mại điện tử đối với hoạt động kinh doanh của cửa hàng Tiệm Cô Thỏ.

Chương 2: Phân tích thiết kế hệ thống

Chương 2 trình bày toàn bộ quá trình phân tích nghiệp vụ và mô hình hóa hệ thống thông tin. Tác giả phân tích hai nhóm tác nhân chính: Khách hàng (xem tin tức, xem chi tiết sản phẩm, tìm kiếm, quản lý giỏ hàng, đặt hàng, chat online) và Quản trị viên (điều hành hệ thống, cấu hình, quản lý danh mục, sản phẩm, bài viết, đơn hàng và người dùng). Nghiệp vụ được mô hình hóa qua Biểu đồ luồng dữ liệu DFD ở các cấp độ: DFD mức khung cảnh, DFD mức đỉnh, và 3 DFD mức dưới đỉnh cho các phân hệ (quản lý bán hàng, quản lý user, quản lý sản phẩm). Tác giả xây dựng Biểu đồ phân rã chức năng và Biểu đồ Use Case tổng quát. Cụ thể hóa các chức năng qua 8 bảng mô tả kịch bản ca sử dụng chi tiết (từ Bảng 2 đến Bảng 9) và 6 biểu đồ tuần tự mô tả tương tác giữa tác nhân, giao diện, bộ điều khiển và cơ sở dữ liệu (xem sản phẩm, tìm kiếm sản phẩm, thêm giỏ hàng, xóa giỏ hàng, đăng nhập admin, duyệt đơn hàng). Cuối cùng, chương hoàn thiện thiết kế dữ liệu với cấu trúc 5 bảng dữ liệu quan hệ, Biểu đồ lớp và Sơ đồ thực thể liên kết ERD bao gồm 7 thực thể với các mối quan hệ sở hữu (has) và chứa đựng (contains).

Chương 3: Thiết kế giao diện người dùng kiểm thử và đánh giá

Chương 3 mô tả kết quả thiết kế giao diện thực tế của hệ thống website trên cả hai phân hệ tương tác:

• Phân hệ người dùng: Giao diện trang chủ tích hợp banner quảng cáo, thanh tìm kiếm, giỏ hàng, khu vực theo dõi đơn hàng; giao diện sản phẩm nổi bật (sắp xếp theo lượt xem nhiều nhất từ cao xuống thấp); giao diện sản phẩm bán chạy (sắp xếp theo số lượng tiêu thụ nhiều nhất); giao diện danh mục sản phẩm tích hợp bộ lọc đa tiêu chí (mới nhất, cũ nhất, giá tăng dần, giá giảm dần) với cơ chế bất đồng bộ không tải lại trang; giao diện giỏ hàng hiển thị chi tiết tên, hình ảnh, đơn giá, số lượng, thành tiền; giao diện tạo đơn hàng và lựa chọn phương thức thanh toán, địa chỉ nhận hàng, ghi chú kèm chuyển hướng theo dõi đơn hàng tại trang cá nhân; và giao diện liên hệ.
• Phân hệ quản trị: Giao diện đăng nhập quản trị viên; bảng điều khiển trung tâm (Dashboard); màn hình danh sách quản lý sản phẩm và form thêm mới sản phẩm; màn hình quản lý danh mục sản phẩm cùng các form thêm và sửa danh mục; màn hình danh sách quản lý đơn hàng và giao diện cập nhật trạng thái đơn hàng.

Chương 4: Kết luận

Chương 4 đúc kết các kết quả nghiên cứu và thực nghiệm đạt được sau quá trình phân tích, thiết kế và lập trình website bán quà lưu niệm bằng công nghệ VueJS và Laravel. Tác giả đánh giá mức độ hoàn thiện của hệ thống so với mục đích ban đầu đặt ra, đồng thời xác lập mục "Hướng phát triển" nhằm định hướng các cải tiến kỹ thuật và mở rộng chức năng hệ thống trong tương lai.

Kết quả và đóng góp

Khóa luận đạt được các kết quả cụ thể dựa trên số liệu và cấu trúc nghiệp vụ được ghi nhận trong văn bản:

• Hoàn thành thiết kế hệ thống phần mềm thương mại điện tử phân định rõ hai tác nhân Khách hàng và Quản trị viên, bao quát đầy đủ quy trình bán lẻ quà lưu niệm trực tuyến.
• Xây dựng mô hình cơ sở dữ liệu quan hệ hoàn chỉnh gồm 7 thực thể, chuẩn hóa chi tiết 5 bảng dữ liệu kỹ thuật (categories, product, orders, order_detail, user), giải quyết mối quan hệ nhiều - nhiều giữa sản phẩm và đơn hàng thông qua thực thể liên kết chi tiết đơn hàng.
• Hiện thực hóa giao diện người dùng tương tác linh hoạt nhờ VueJS: xây dựng các bộ lọc sản phẩm (mới nhất, cũ nhất, giá tăng dần, giá giảm dần) thực thi mượt mà mà không phải tải lại toàn bộ trang web.
• Thiết lập quy trình xử lý đơn hàng chặt chẽ: tích hợp ràng buộc logic nghiệp vụ trong quản lý trạng thái đơn hàng, cho phép hủy hoặc phê duyệt đơn hàng đang xử lý, đồng thời khóa cập nhật đối với các đơn hàng đã xử lý thành công nhằm bảo toàn tính toàn vẹn dữ liệu.

Về mặt giải pháp và đóng góp thực tế:

• Tác giả đề xuất giải pháp phối hợp kiến trúc đa nền tảng: sử dụng framework Laravel để xử lý backend an toàn theo mô hình MVC, kết hợp framework VueJS ở tầng frontend nhằm tối ưu tốc độ kết xuất trang và giảm tải cho máy chủ.
• Đưa ra giải pháp tách biệt lưu trữ tệp tin đa phương tiện sang nền tảng đám mây Firebase Storage của Google, giúp hệ thống không bị phụ thuộc vào dung lượng lưu trữ cục bộ của máy chủ web và tối ưu hóa băng thông truyền tải dữ liệu hình ảnh sản phẩm.
• Đóng góp giải pháp công nghệ cụ thể cho cửa hàng Tiệm Cô Thỏ trong việc số hóa hoạt động bán hàng, quản lý đơn hàng và quảng bá sản phẩm quà lưu niệm đến khách hàng trực tuyến.

Hạn chế và hướng nghiên cứu tiếp

Khóa luận ghi nhận một số hạn chế kỹ thuật liên quan đến đặc tính công nghệ và phạm vi triển khai:

• Hạn chế của công nghệ sử dụng: Framework Laravel có dung lượng tương đối nặng đối với các thiết bị di động, làm ảnh hưởng đến tốc độ tải trang trên môi trường này và framework không hỗ trợ sẵn các thuật toán tính toán chuyên sâu. Về phía VueJS, framework còn gặp rào cản về mặt ngôn ngữ và tài nguyên cộng đồng hạn chế hơn so với Angular hay React; cơ chế tích hợp lỏng lẻo có thể dẫn đến phát sinh lỗi nếu kiểm soát mã nguồn không chặt chẽ.
• Hạn chế về an toàn truyền thông: Mô hình Client - Server trong hệ thống tiềm ẩn nguy cơ về mặt bảo mật thông tin khi phải thực hiện trao đổi dữ liệu liên tục qua mạng Internet giữa máy khách và máy chủ ở khoảng cách địa lý xa.
• Hạn chế về tính năng thanh toán: Hệ thống mới dừng lại ở bước ghi nhận phương thức thanh toán và lưu thông tin đơn hàng, chưa tích hợp cổng thanh toán trực tuyến tự động qua thẻ ngân hàng hay ví điện tử.

Hướng nghiên cứu tiếp:

• Tác giả xác định tiếp tục hoàn thiện và phát triển các module chức năng còn lại theo định hướng được đề ra tại Chương 4 của đồ án, hướng tới tối ưu hóa hiệu năng trên thiết bị di động và nâng cao trải nghiệm mua sắm trực tuyến.

Giá trị tham khảo

Đồ án tốt nghiệp là tài liệu tham khảo có giá trị học thuật và ứng dụng thực tiễn cho các nhóm đối tượng:

• Sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm: Cung cấp tài liệu mẫu về quy trình phân tích và thiết kế hệ thống thông tin hoàn chỉnh, kết hợp cả hai mô hình phân tích chức năng (DFD) và hướng đối tượng (Use Case, Sequence, Class Diagram, ERD).
• Lập trình viên phát triển ứng dụng web: Tham khảo mô hình kiến trúc kết hợp giữa Backend PHP/Laravel (phiên bản Laravel 8) và Frontend VueJS, cũng như phương thức tích hợp dịch vụ lưu trữ đám mây Firebase Storage vào hệ thống web thương mại điện tử.
• Các đơn vị, chủ cơ sở kinh doanh quà lưu niệm vừa và nhỏ: Tham khảo mô hình tổ chức dữ liệu bán lẻ, cấu trúc danh mục và quy trình luân chuyển đơn hàng phục vụ cho việc số hóa hoạt động kinh doanh trực tuyến.

Nội dung đáng giá nhất để tham khảo trong tài liệu là hệ thống 8 bảng mô tả kịch bản ca sử dụng chi tiết (Bảng 2 đến Bảng 9) cùng sơ đồ thực thể liên kết ERD, thể hiện rõ ràng các luồng sự kiện chính, luồng sự kiện phụ và quy tắc ràng buộc nghiệp vụ bán lẻ.

Câu hỏi thường gặp

• Website trong đồ án được xây dựng nhằm ứng dụng thực tế cho đơn vị kinh doanh nào? Hệ thống được thiết kế nhằm phục vụ hoạt động bán hàng và quảng bá sản phẩm quà lưu niệm cho cửa hàng Tiệm Cô Thỏ, hỗ trợ đẩy mạnh doanh thu và tiếp cận khách hàng trực tuyến.

• Cơ sở dữ liệu của hệ thống bao gồm những bảng chính nào và sản phẩm được phân loại theo các trạng thái nào? Cơ sở dữ liệu gồm 5 bảng chính được mô tả chi tiết: categories (danh mục), product (sản phẩm), orders (đơn hàng), order_detail (chi tiết đơn hàng), user (người dùng), cùng 2 thực thể bài viết category_post và post. Trong bảng product, trường type có kiểu Enum lưu trữ 3 trạng thái phân loại sản phẩm: hot trend, nổi bật, và bán chạy.

• Quy tắc nghiệp vụ khi cập nhật trạng thái đơn hàng của quản trị viên được quy định như thế nào? Theo Bảng 8 (kịch bản quản lý đơn hàng), quản trị viên chỉ được phép cập nhật trạng thái lên "thành công" hoặc "hủy" đối với các đơn hàng đang ở trạng thái "đang xử lý". Những đơn hàng đã chuyển sang trạng thái "thành công" sẽ bị khóa và không được phép cập nhật lại trạng thái.

• Tác giả đã phân tích những nhược điểm kỹ thuật nào của framework Laravel và VueJS? Văn bản chỉ ra rằng Laravel làm chậm tốc độ tải trang trên thiết bị di động do dung lượng nặng và không hỗ trợ tính toán phức tạp. Trong khi đó, VueJS gặp hạn chế về rào cản ngôn ngữ, cộng đồng và tài nguyên hỗ trợ chưa lớn bằng Angular hay React, thiếu sự hỗ trợ tài chính cho các dự án quy mô lớn, và việc tích hợp lỏng lẻo dễ phát sinh lỗi.

• Vai trò của dịch vụ Firebase Storage trong đồ án là gì? Firebase Storage được sử dụng làm nền tảng lưu trữ đám mây chuyên biệt cho các tệp tin đa phương tiện (ảnh, video) do người dùng và hệ thống tạo ra, vận hành trên hạ tầng Google Cloud Platform, hỗ trợ API truyền tải an toàn và duy trì tiến trình upload/download khi đường truyền mạng bị gián đoạn.

Kết luận

Khóa luận tốt nghiệp của sinh viên Trương Cao Dương đã hoàn thành mục tiêu xây dựng website thương mại điện tử chuyên ngành quà lưu niệm thông qua việc kết hợp hai công nghệ phổ biến là Laravel và VueJS. Hệ thống được phân tích và thiết kế bài bản từ mô hình luồng dữ liệu, biểu đồ use case, biểu đồ tuần tự cho đến sơ đồ quan hệ thực thể ERD và cấu trúc cơ sở dữ liệu chi tiết trên MySQL. Dù còn một số hạn chế về mặt hỗ trợ thiết bị di động và tích hợp thanh toán trực tuyến tự động, đồ án đã giải quyết tốt bài toán hiển thị và quản lý sản phẩm, đơn hàng cho mô hình kinh doanh bán lẻ vừa và nhỏ. Đây là công trình thực hành kỹ thuật có giá trị tham khảo rõ ràng cho sinh viên công nghệ thông tin trong việc nghiên cứu và triển khai các ứng dụng web thương mại điện tử thực tế.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1. Giới thiệu đề tài Bán hàng trực tuyến hiện nay đang được coi là một trong những chiến lược kinh doanh cực kỳ hiệu quả đối với các cửa hàng doanh nghiệp kinh doanh và đặc biệt là xây dựng hệ thống Website kết hợp với các trang mạng xã hội đang phát triển hiện nay như Facebook,TikTok … Đã đem lại rất thành công cho nhiều doanh nghiệp và cửa hàng đặc biệt là trong thời đại công nghệ, cho nên nhu cầu mua sắm online càng nhiều. Đã có rất nhiều ngôn ngữ, Framework xây dựng hệ thống bán hàng trực tuyến rất thuận tiện và thành công và đã thu lại một nguồn lợi nhuận rất lớn ví dụ như các cửa hàng Thegioididong, FPTShop, Lazada… họ đã rất thành công với việc bán hàng từ hệ thống Website. Bên cạnh những lợi ích từ việc xây dựng hệ thống Website bán hàng thì cũng gặp không ít khó khăn trong việc chọn ngôn ngữ, Framework để xây dựng hệ thống để đáp ứng đầy đủ nhu cầu của người kinh doanh và khách hàng tìm kiếm thông tin.

Do đó em chọn đề tài “Xây dựng website bán quà lưu niệm sử dụng VueJS + Laravel” có thể phần nào giúp cửa hàng trình bày sản phẩm và thông tin, giúp cho khách hàng có thể có nhu cầu tìm kiếm thông tin sản phẩm và đặt hàng online một cách dễ dàng. Mục đích đề tài Xây dựng hệ thống Website trình bày sản phẩm, tin tức, giới thiệu, thông tin chi tiết cho từng sản phẩm, tin tức, và có thể quản lý sản phẩm, tin tức, các module, một cách thuận tiện và thân thiện với người dùng nhất. Nghiên cứu và đưa một số công nghệ vào hệ thống Website, cung cấp thông tin hữu ích về sản phẩm, hỗ trợ đẩy mạnh kinh doanh cũng như vấn đề về bảo mật, giúp khách hàng có thể dễ dàng tìm kiếm thông tin và một giao diện đẹp nhất. Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu: + MySQL + JavaScript 8 + VueJS + Firebase + PHP + Laravel + Xampp - Phạm vi nghiên cứu đối với các hoạt động liên quan đến bán hàng qua mạng + Hiển thị và quản lý thông tin sản phẩm + Quản lý đơn hàng + Quản lý sản phẩm + Quản lý danh mục sản phẩm + Quản lý danh mục bài viết + Quản lý bài viết + Quản lý người dùng 1.

Ý nghĩa đề tài Với việc xây dựng được một Website bán đồ quà lưu niệm trực tuyến sẽ giúp ích được nhiều cho chủ cửa hàng vừa và nhỏ có thể quản lý được các sản phẩm của mình khi thống kê và giao dịch, công việc sẽ được rút ngắn xuống. Có thể giúp người tiêu dùng có thể tiếp cận được những sản phẩm mà không cần phải đến trực tiếp, hỗ trợ thông tin sản phẩm. Người tiêu dùng cũng có thể gửi phản ánh những thắc mắc về sản phẩm về cho chủ cửa hàng biết. Mô hình Client – Server 1.

Khái niệm Mô hình Client - Server là mô hình mạng máy tính trong đó các máy tính con được đóng vai trò như một máy khách, chúng làm nhiệm vụ gửi yêu cầu đến các máy chủ. Để máy chủ xử lý yêu cầu và trả kết quả về cho máy khách đó. 9 Hình 1 Mô hình Client-Server 1. Nguyên tắc hoạt động Trong mô hình Client Server, server chấp nhận tất cả các yêu cầu hợp lệ từ mọi nơi khác nhau trên Internet, sau đó trả kết quả về máy tính đã gửi yêu cầu đó.

Máy tính được coi là máy khách khi chúng làm nhiệm vụ gửi yêu cầu đến các máy chủ và đợi câu trả lời được gửi về. Để máy khách và máy chủ có thể giao tiếp được với nhau thì giữa chúng phải có một chuẩn nhất định, và chuẩn đó được gọi là giao thức. Một số giao thức được sử dụng phổ biến hiện nay như: HTTPS, TCP/IP, FTP,. Nếu máy khách muốn lấy được thông tin từ máy chủ, chúng phải tuân theo một giao thức mà máy chủ đó đưa ra.

Nếu yêu cầu đó được chấp nhận thì máy chủ sẽ thu thập thông tin và trả về kết quả cho máy khách yêu cầu. Bởi vì Server - máy chủ luôn luôn trong trạng thái sẵn sàng để nhận request từ client nên chỉ cần client gửi yêu cầu tín hiệu và chấp nhận yêu cầu đó thì server sẽ trả kết quả về phía client trong thời gian ngắn nhất. • Ưu điểm của mô hình - Giúp chúng ta có thể làm việc trên bất kì một máy tính nào có hỗ trợ giao thức truyền thông. Giao thức chuẩn này cũng giúp các nhà sản xuất tích hợp lên nhiều sản phẩm khác nhau mà không gặp phải khó khăn gì.

10 - Có thể có nhiều server cùng làm một dịch vụ, chúng có thể nằm trên nhiều máy tính hoặc một máy tính. - Chỉ mang đặc điểm của phần mềm mà không hề liên quan đến phần cứng, ngoài yêu cầu duy nhất là server phải có cấu hình cao hơn các client. - Hỗ trợ người dùng nhiều dịch vụ đa dạng và sự tiện dụng bởi khả năng truy cập từ xa. - Cung cấp một nền tảng lý tưởng, cho phép cung cấp tích hợp các kỹ thuật hiện đại như mô hình thiết kế hướng đối tượng, hệ chuyên gia, hệ thông tin địa lý (GIS).

• Nhược điểm - Vấn đề bảo mật dữ liệu thông tin đôi khi còn chưa được an toàn do phải trao đổi dữ liệu giữa 2 máy tính khác nhau ở 2 khu vực địa lý cách xa nhau. Và đây cũng nhược điểm duy nhất của mô hình này. - Tuy nhiên vấn đề này thì có một số giao thức đã hỗ trợ bảo mật dữ liệu khi truyền tải. Giao thức được sử dụng phổ biến như HTTPS.

PHP và Framework Laravel 1. PHP PHP là chữ viết tắt của “Personal Home Page” do Rasmus Lerdorf tạo ra năm 1994. Vì tính hữu dụng của nó và khả năng phát triển, PHP bắt đầu được sử dụng trong môi trường chuyên nghiệp và nó trở thành “PHP: Hypertext Preprocessor” Thực chất PHP là ngôn ngữ kịch bản nhúng trong HTML, nói một cách đơn giản đó là một trang HTML có nhúng mã PHP, PHP có thể được đặt rải rác trong HTML. PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một công nghệ phía máy chủ (Server-Side) và không phụ thuộc vào môi trường (cross-platform).

Đây là hai yếu tố rất quan trọng, thứ nhất khi nói công nghệ phía máy chủ tức là nói đến mọi thứ trong PHP đều xảy ra trên máy chủ, thứ hai, chính vì tính chất không phụ thuộc môi trường cho phép PHP chạy trên hầu hết trên các hệ điều hành như Windows, Unix và nhiều biến thể của nó. Đặc biệt các mã kịch bản PHP viết trên máy chủ này sẽ làm việc bình thường trên máy chủ khác mà không cần phải chỉnh sửa hoặc chỉnh sửa rất ít. Framework Laravel 11 Laravel là một trong những PHP web framework phổ biến nhất theo mẫu MVC (Model-View- Controller). Được tạo bởi Taylor Otwell, Laravel framework là nguồn mở và miễn phí giúp đưa ra các sản phẩm chất lượng cao.

Các code sẽ được giảm thiểu đi, nhưng vẫn đạt tiêu chuẩn ngành, giúp tiết kiệm được hàng trăm giờ đồng hồ dành cho việc phát triển. Bản phát hành đầu tiên vào năm 2011, phiên bản hiện tại đã ra mắt là Laravel 8. Có thể kể đến các ưu điểm như: - Tiếp cận các tính năng mới nhất của PHP - Tích hợp dịch vụ mail dựa trên nền tảng đám mây hoặc local nhờ API sạch trên thư viện SwiftMailer - Dễ sử dụng nhờ tuân theo mẫu thiết kế mô hình 3 lớp MVC dễ hiểu - Tính bảo mật cao - Công cụ tích hợp cho dòng lệnh Artisan - Tạo liên kết đến các Route được đặt tên - Tốc độ xử lý nhanh, đáp ứng nhu cầu tạo lập Website hay các dự án lớn trong thời gian ngắn - Tuy nhiên Laravel cũng có một số nhược điểm nhất định: - Làm chậm tốc độ tải trang vì Laravel nặng cho thiết bị di động - Không hỗ trợ tính năng tính toán 12 Hình 2 Sơ đồ hoạt động của Laravel theo mô hình MVC Vì Laravel cũng sử dụng theo mô hình MVC nên luồng hoạt động cơ bản sẽ là khi người dùng gửi một yêu cầu lên hệ thống thông qua một route, route đó sẽ gọi đến một Controller và một action trong đó, Controller xử lý các yêu cầu của người dùng. Trong quá trình làm việc đó, Controller sẽ phải thông qua lớp Model nếu muốn làm việc với Cơ sở dữ liệu.

Sau khi xử lý xong, Model sẽ đưa dữ liệu về cho Controller, Controller tiếp tục đưa sang View và View hiển thị lại cho người dùng kết quả cuối cùng. 13 Hình 3 Cấu trúc thư mục của dự án Laravel 14 Bảng 1 Cấu trúc thư mục của Laravel Folder/File Mô tả app Thư mục app, chứa tất cả các project được tạo, hầu hết các class trong project được tạo đều ở trong đây. Không giống các framwork khác, các file model không được chứa trong một thư mục riêng biệt, mà được chứa ngay tại thư mục app này. app/Console Thư mục Console, chứa các tập tin định nghĩa các câu lệnh trên artisan.

app/Exceptions Thư mục Exceptions, chứa các tập tin quản lý, điều hướng lỗi. app/Http/Controllers Thư mục Controllers, chứa các controller của project. app/Http/Middleware Thư mục Middleware, chứa các tập tin lọc và ngăn chặn các requests. app/Providers Thư mục Providers, chứa các file thực hiện việc khai báo service và bind vào trong Service Container.

bootstrap Thư mục bootstrap, chứa những file khởi động của framework và những file cấu hình auto loading, route, và file cache. config Thư mục config, chứa tất cả những file cấu hình. database Thư mục database, chứa 2 thư mục migration (tạo và thao tác database) và seeds (tạo dữ liệu mẫu), tiện lợi để lưu trữ dữ liệu sau này. public Thư mục public, chứa file index.php giống như cổng cho tất cả các request vào project, bên trong thư mục còn chứa file JavaScript, và CSS.

resources Thư mục resources, chứa những file view và raw, các file biên soạn như LESS, SASS, hoặc JavaScript. Ngoài ra còn chứa tất cả các file lang trong project. resources/views Thư mục views, chứa các file view xuất giao diện người dùng. routes Thư mục routes, chứa tất cả các điều khiển route (đường dẫn) trong project.

Chứa các file route sẵn có: web.php, và console.php File web.php, điều khiển các route của view, như route của trang top, sản phẩm, .env, chứa các config chính của Laravel. artisan File thực hiện lệnh của Laravel.gitattributes File dành cho xử lý git.json File của Composer.lock composer-setup.js File package.js, chứa các package cần dùng cho projects.xml File phpunit.xml, xml của phpunit dùng để testing project.js File webpack.js, file dùng để build các webpack.