xây dựng website bán thực phẩm chức năng sử dụng nuxtjs laravel

Có các chứa năng sau: - Cho phép quản lý đơn hàng - Cho phép quản lý danh mục sản phẩm - Cho phép quản lý bài viết - Cho phép quản lý sản phẩm - Cho phép quản lý khách hàng... Người này

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

ĐỒ ÁN TỐT NGHIỆP

TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN THỰC PHẨM CHỨC NĂNG SỬ DỤNG NUXTJS + LARAVEL

Sinh viên thực hiên : Tạ Mạnh Quân

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

TẠ MẠNH QUÂN

TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN THỰC PHẨM CHỨC NĂNG SỬ DỤNG NUXTJS + LARAVEL

Giáo viên hướng dẫn: ThS Ngô Thị Hoa

LỜI CẢM ƠN

Trong suốt quá trình học tập ở trường Đại học công nghệ Đông Á, em đã nhận được rất nhiều sự quan tâm và giúp đỡ từ các thầy cô giáo trong trường Em xin cám ơn tất cả thầy cô trong trường đã tận tình giúp đỡ em trong lúc học tập Em xin cám ơn ban lãnh đạo trường Đại học Công nghệ Đông Á đã giúp đỡ chúng em trong suốt 4 năm học qua

Em xin gửi lời cám ơn đặc biệt đến các thầy cô thuộc khoa Công nghệ thông tin Các thầy cô đã trực tiếp giúp đỡ chúng em tiếp thu được rất nhiều kiến thức bổ ích trong quá trình học tập tại trường Các thầy cô trong khoa chính là những người đã đặt nền móng cho những kiến thức hiện giờ của chúng em, giúp chúng em có thể đem những kiến thức này áp dụng ra ngoài cuộc sống Đặc biệt, em xin bày tỏ lòng biết ơn sâu sắc đến cô Ngô Thị Hoa, cô đã giúp em rất nhiều trong học tập Cô đã giúp em học được nhiều kiến thức mới, giúp em tìm được một hướng đi đúng đắn cho tương lai Đối với đồ án tốt nghiệp, cô đã tận tình hướng dẫn, giúp đỡ em rất nhiều để có thể hoàn thiện được đề tài “Xây dựng website bán thực phẩm chức năng sử dụng NuxtJS + Laravel” Do điều kiện thời gian có hạn và kinh nghiệm làm báo cáo chưa có nhiều nên em không thể tránh khỏi những thiếu sót trong lúc trình bày cũng như làm báo cáo, kính mong nhận được những ý kiến đóng góp từ quý thầy cô

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

Bắc Ninh, ngày tháng năm 2023

SINH VIÊN

(Ký và ghi rõ họ tên)

LỜI CAM ĐOAN

Em xin cam đoan đề tài: “Xây dựng website bán thực phẩm chức năng sử dụng NuxtJS + Laravel” là kết quả nghiên cứu độc lập dưới sự hướng dẫn của giáo viên hướng dẫn ThS.Ngô Thị Hoa Ngoài ra không có bất cứ sự sao chép của người khác Đề tài, nội dung báo cáo là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình học tập tại trường Các số liệu, kết quả trình bày trong báo cáo là hoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm, kỷ luật của bộ môn và nhà trường đề ra nếu như có vấn đề xảy ra

Bắc Ninh, ngày tháng năm 2023

SINH VIÊN

(Ký và ghi rõ họ tên)

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 13

1.1 Tổng quan về thương mại điện tử 13

1.1.1 Khái niệm về thương mại điện tử 13

1.1.2 Lợi ích của thương mại điện tử 13

1.1.3 Yêu cầu trong thương mại điện tử 14

1.2 Phân tích yêu cầu đề tài 14

1.2.1 Lý do chọn đề tài 14

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

1.2.3 Giới hạn và phạm vi của đề tài 15

1.2.4 Chức năng 15

1.2.5 Yêu cầu đặt ra 16

1.3 Khảo sát hiện trạng và xây dựng hệ thống 16

1.4 Công nghệ sử dụng 17

1.4.1 Giới thiệu về ngôn ngữ lập trình PHP 17

1.4.2 Giới thiệu về Laravel 17

1.4.3 Giới thiệu về MySQL 18

1.4.4 Giới thiệu về VueJS 19

1.4.5 Giới thiệu về NuxtJS 19

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 21

2.1 Các Actor sử dụng phần mềm 21

2.2 Các chức năng của hệ thống 21

2.2.1 Các chức năng trên website 21

2.2.2 Các chức năng trong quản trị 22

2.3 Biểu đồ Usecase 23

2.3.1 Biểu đồ Usecase tổng quát 23

2.3.2 Usecase đăng nhập 23

2.3.3 Usecase đăng ký 24

2.3.4 Usecase quản lý danh mục 25

2.3.5 Usecase quản lý bài viết 28

2.3.6 Usecase quản lý sản phẩm 30

2.3.7 Usecase quản lý đơn hàng 32

2.3.8 Usecase quản lý khách hàng 34

2.4 Biểu đồ tuần tự 35

2.4.1 Biểu đồ tuần tự chức năng đăng nhập 35

2.4.2 Biểu đồ tuần tự chức năng đăng ký 36

2.4.3 Biểu đồ tuần tự chức năng quản lý danh mục 37

2.4.4 Biểu đồ tuần tự chức năng quản lý bài viết 40

2.4.5 Biểu đồ tuần tự chức năng quản lý sản phẩm 43

2.4.6 Biểu đồ tuần tự chức năng quản lý khách hàng 46

2.5 Biểu đồ hoạt động 48

2.5.1 Biểu đồ hoạt động chức năng đăng nhập 48

2.5.2 Biểu đồ hoạt động chức năng đăng ký 48

2.5.3 Biểu đồ hoạt động chức năng quản lý danh mục 49

2.5.3 Biểu đồ hoạt động chức năng quản lý bài viết 51

2.5.3 Biểu đồ hoạt động chức năng quản lý sản phẩm 53

2.5.3 Biểu đồ hoạt động chức năng quản lý khách hàng 55

3.1 Một số giao diện người dùng 65

DANH MỤC CÁC BẢNG

Bảng 2 1 Các Actor sử dụng phần mềm 21

Bảng 2 2 Các chức năng trên Website 21

Bảng 2 3 Các chức năng trong quản trị 22

Bảng 2 4 Mô tả Usecase đăng nhập 23

Bảng 2 5 Mô tả Usecase đăng ký 24

Bảng 2 6 Mô tả Usecase quản lý danh mục 25

Bảng 2 7 Mô tả Usecase quản lý danh mục 26

Bảng 2 8 Mô tả Usecase quản lý danh mục 27

Bảng 2 9 Mô tả Usecase quản lý bài viết 28

Bảng 2 10 Mô tả Usecase quản lý bài viết 29

Bảng 2 11 Mô tả Usecase quản lý bài viết 29

Bảng 2 12 Mô tả usecase quản lý sản phẩm 30

Bảng 2 13 Mô tả usecase quản lý sản phẩm 31

Bảng 2 14 Mô tả usecase quản lý sản phẩm 31

Bảng 2 15 Mô tả Usecase quản lý đơn hàng 32

Bảng 2 16 Mô tả Usecase quản lý đơn hàng 33

Bảng 2 17 Mô tả Usecase quản lý khách hàng 34

Bảng 2 18 Danh sách các bảng trong cơ sở dữ liệu 58

Bảng 2 19 Cơ sở dữ liệu bảng products 59

Bảng 2 20 Cơ sở dữ liệu bảng order 59

Bảng 2 21 Cơ sở dữ liệu bảng migrations 60

Bảng 2 22 Cơ sở dữ liệu bảng personal_access_tokens 60

Bảng 2 23 Cơ sở dữ liệu bảng users 61

Bảng 2 24 Cơ sở dữ liệu bảng customer 61

Bảng 2 25 Cơ sở dữ liệu bảng password_resets 62

Bảng 2 26 Cơ sở dữ liệu bảng collections 62

Bảng 2 27 Cơ sở dữ liệu bảng posts 62

Bảng 2 28 Cơ sở dữ liệu bảng customers 63

DANH MỤC HÌNH ẢNH

Hình 2 1 Biểu đồ Usecase tổng quát 23

Hình 2 2 Biểu đồ Usecase đăng nhập 23

Hình 2 3 Usecase đăng ký 24

Hình 2 4 Usecase quản lý danh mục 25

Hình 2 5 Usecase quản lý bài viết 28

Hình 2 6 Usecase quản lý sản phẩm 30

Hình 2 7 Usecase quản lý đơn hàng 32

Hình 2 8 Usecase quản lý khách hàng 34

Hình 2 9 Biểu đồ tuần tự chức năng đăng nhập 35

Hình 2 10 Biểu đồ tuần tự chức năng đăng ký 36

Hình 2 11 Biểu đồ tuần tự thêm danh mục 37

Hình 2 12 Biểu đồ tuần tự sửa danh mục 38

Hình 2 13 Biểu đồ tuần tự xóa danh mục 39

Hình 2 14 Biểu đồ tuần tự thêm bài viết 40

Hình 2 15 Biểu đồ tuần tự sửa bài viết 41

Hình 2 16 Biểu đồ tuần tự xóa bài viết 42

Hình 2 17 Biểu đồ tuần tự thêm sản phẩm 43

Hình 2 18 Biểu đồ tuần tự sửa sản phẩm 44

Hình 2 19 Biểu đồ tuần tự xóa sản phẩm 45

Hình 2 20 Biểu đồ tuần tự sửa khách hàng 46

Hình 2 21 Biểu đồ tuần tự xóa khách hàng 47

Hình 2 22 Biểu đồ hoạt động chức năng đăng nhập 48

Hình 2 23 Biểu đồ hoạt động chức năng đăng ký 48

Hình 2 24 Biểu đồ hoạt động chức năng thêm danh mục 49

Hình 2 25 Biểu đồ hoạt động chức năng sửa danh mục 50

Hình 2 26 Biểu đồ hoạt động chức năng xóa danh mục 50

Hình 2 27 Biểu đồ hoạt động chức năng thêm bài viết 51

Hình 2 28 Biểu đồ hoạt động chức năng sửa bài viết 52

Hình 2 29 Biểu đồ hoạt động chức năng xóa bài viết 52

Hình 2 30 Biểu đồ hoạt động chức năng thêm sản phẩm 53

Hình 2 31 Biểu đồ hoạt động chức năng sửa sản phẩm 54

Hình 2 32 Biểu đồ hoạt động chức năng xóa sản phẩm 54

Hình 2 33 Biểu đồ hoạt động chức năng thêm khách hàng 55

Hình 2 34 Biểu đồ hoạt động chức năng sửa thành viên 56

Hình 2 35 Danh sách các đối tượng trong biểu đồ lớp 57

Hình 2 36 Sơ đồ quan hệ thực thể ERD 64

Hình 3 1 Giao diện trang chủ 65

Hình 3 2 Giao diện đặt hàng 66

Hình 3 3 Giao diện thanh toán 66

Hình 3 4 Gmail khách hàng nhật được sau khi đặt hàng thành công 67

Hình 3 5 Giao diện xem thông tin sản phẩm 67

Hình 3 6 Giao diện tìm kiếm sản phẩm 68

Hình 3 7 Giao diện quản lý giỏ hàng 69

Hình 3 8 Giao diện đăng nhập 70

Hình 3 9 Giao diện đăng ký 70

Hình 3 10 Giao diện quản lý khách hàng 71

Hình 3 11 Giao diện quản lý danh mục 71

Hình 3 12 Giao diện quản lý bài viết 72

Hình 3 13 Giao diện quản lý sản phẩm 72

Hình 3 14 Giao diện quản lý đơn hàng 73

Hình 3 15 Giao diện quản lý chung 73

4 GUI Graphical User Interface

5 MySQL/ RDBMS Relational Database Management System

6 SQL Structured Query Language

7 UML Unified Modeling Language

8 SPA Single Page Application

9 SSR Server Side Rendering

10 API Application Programming Interface

MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, thì mạng Internet cũng là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn cầu Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức… cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh và thậm chí đôi lúc có cả những âm thanh nếu bạn cần… Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người

Trong hoạt động sản xuất kinh doanh, giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một cửa hàng hay doanh nghiệp, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ là cần thiết Vậy phải quảng bá thế nào đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cả các sản phẩm của mình bán Vì vậy, em đã thực hiện đồ án “Xây dựng website bán thực phẩm chức năng sử dụng NuxtJS + Laravel” Người chủ cửa hàng đưa các sản phẩm đó lên website của mình và quản lý bằng website đó Khách hàng có thể đặt mua hàng trên website mà không cần đến cửa hàng Chủ cửa hàng sẽ gửi sản phẩm cho khách hàng khi nhận được tiền

Với sự hướng dẫn tận tình của thầy cô, em đã hoàn thành bài báo cáo đồ án này

Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm và góp ý của quý Thầy cô

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

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI

1.1 Tổng quan về thương mại điện tử 1.1.1 Khái niệm về thương mại điện tử

Thương mại điện tử hay E-Commerce là quá trình tiến hành một phần hay tất cả các hoạt động kinh doanh thông qua các phương tiện điện tử Nói một cách đơn giản, thương mại điện tử chính là hoạt động mua bán sản phẩm hoặc dịch vụ thông qua Internet và các phương tiện điện tử khác Các giao dịch này bao gồm tất cả các hoạt động như: giao dịch, mua bán, thanh toán, đặt hàng, quảng cáo và giao hàng, …

Thương mại điện tử ngày nay càng được biết tới như một phương thức kinh doanh hiệu quả từ khi Internet hình thành và phát triển Chính vì vậy, nhiều người hiểu thương mại điện tử theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua Internet và mạng xã hội

1.1.2 Lợi ích của thương mại điện tử

- Lợi ích của thương mại điện tử với các doanh nghiệp

Đối với các doanh nghiệp, thương mại điện tử tạo điều kiện thuận lợi để doanh nghiệp có thể quảng bá hình ảnh về thương hiệu, sản phẩm, dịch vụ của mình tới khách hàng, đối tác

Lợi ích tiếp theo của thương mại điện tử dành cho doanh nghiệp chính là tiết kiệm chi phí, tạo thuận lợi cho việc giao dịch giữa các bên Các doanh nghiệp sẽ chẳng cần phải tốn kém chi phí để thuê 1 cửa hàng hay chi phí để thuê nhân viên phục vụ hay phải thuê kho bãi Chỉ cần đầu chi phí cho website và bán hàng qua mạng, bạn sẽ chỉ cần khoảng 10% số vốn so với việc thuê cửa hàng, nhân công, kho bãi để vận hành website mỗi tháng

Có website thương mại điện tử, bạn sẽ mở rộng được phạm vi kinh doanh của mình đơn giản hơn rất nhiều Không phải là ở tỉnh thành, quốc gia mà thậm chí có thể ra toàn cầu nếu bạn làm tốt công tác marketing Với việc kinh doanh truyền thống mở cửa hàng thì đó là điều cực khó, chỉ có thương mại điện tử mới làm được Chi phí cũng không quá cao để có thể giới thiệu doanh nghiệp của bạn đến thị trường khác

- Lợi ích của thương mại điện tử với người tiêu dùng:

Tiết kiệm thời gian để đi mua sắm, chỉ cần ngồi nhà, lướt web với điện thoại hay máy tính là có thể giúp bạn chọn được món đồ ưng ý

Có thể thoải mái check sản phẩm, lựa chọn các mặt hàng, so sánh giá, chất lượng giữa các nơi

Có người vận chuyển hàng hóa tới tận nhà mà không mất sức để khuân vác từ cửa hàng về tới nhà

- Lợi ích đối với xã hội của thương mại điện tử:

Đối với xã hội thì thương mại điện tử sẽ tạo ra được một phương thức kinh doanh và làm việc mới hiện đại, phù hợp hơn với xu thế thị trường đang phát triển mạnh trong thời đại công nghệ 4.0

Thương mại điện tử cũng sẽ tạo ra được 1 sân chơi mới cho các doanh nghiệp và yêu cầu họ phải nắm bắt, đổi mới phương thức kinh doanh, tạo cơ hội để cạnh tranh cao hơn Từ đó thúc đẩy sự phát triển của doanh nghiệp nói riêng và của nền kinh tế nói chung

1.1.3 Yêu cầu trong thương mại điện tử

- Cơ sở hạ tầng bảo mật thông tin - Nhân lực chất lượng cao

- Tạo mối quan hệ bằng sự tin cậy - Bảo mật và an toàn

- Bảo vệ quyền lợi khách hàng và bản quyền kinh doanh

1.2 Phân tích yêu cầu đề tài

1.2.1 Lý do chọn đề tài

Trong thực tế ngày nay, công việc quản lý ở các cửa hàng nói chung và việc quản lý các cửa hàng thời trang nói riêng đã và đang được áp dụng trên máy vi tính vì số lượng rất lớn Nếu chúng ta sử dụng biện pháp lưu trữ trên giấy tờ, văn bản thì sẽ rất khó khăn trong việc quản lý như khi muốn tìm kiếm thông tin về một mặt hàng hay muốn thay đổi thông tin của một mặt hàng thì sẽ cực kỳ khó khăn với lượng mặt hàng cực lớn của các cửa hàng Từ những khó khăn đó mà các phần mềm quản lý đã và đang được nghiên cứu và phát triển để hỗ trợ cho công tác quản lý Việc áp dụng công nghệ thông tin vào công tác quản lý không chỉ làm giảm các bất cập trong công tác quản lý mà còn giúp cho người quản lý cảm thấy thoải mái trong công tác, năng suất làm việc

Xuất phát từ những lý do đó em đã quyết định chọn đề tài: “Xây dựng website bán thực phẩm chức năng sử dụng NuxtJS + Laravel” nhằm góp phần giải quyết cho người quản lý cập nhật thông tin nhanh chóng, tra cứu những dữ liệu được xử lý chính xác về các mặt hàng, giá cả, doanh thu nhằm phục vụ cho các thao tác hoặc chức năng sau đó, dễ sử dụng cho những giao diện đồ họa thân thiện đối với người dùng

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

1.2.2.1 Mục tiêu tổng quát

- Giúp cá nhân, tổ chức, doanh nghiệp phát triển nhiều mô hình trên sàn thương mại điện tử, tăng doanh thu và dễ dàng quản lí hàng hóa

1.2.2.2 Mục tiêu cụ thể

- Người bán thì dễ dàng kiểm tra hàng và giới thiệu tới nhiều người hơn

- Người mua thì dễ dàng tìm kiếm, đặt mua trên mạng mà không cần tới tận nơi - Giúp hàng hóa lưu thông dễ dàng

1.2.3 Giới hạn và phạm vi của đề tài

1.2.3.1 Đối tượng nghiên cứu

- Đối tượng nghiên cứu: thực phẩm chức năng

1.2.3.2 Phạm vi nghiên cứu

- Phạm vi không gian: trên không gian mạng

- Ý nghĩa khoa học và thực tiễn của đề tài: giúp cho cá nhân, tổ chức, doanh nghiệp phát triển kinh doanh các loại thực phẩm chức năng trên sàn điện tử

1.2.4 Chức năng

Đây là một website bán hàng, giới thiệu và quản lý sản phẩm của cửa hàng đến người tiêu dùng với các chi tiết mặt hàng với giá cả chính xác Có các chứa năng sau:

- Cho phép quản lý đơn hàng

- Cho phép quản lý danh mục sản phẩm - Cho phép quản lý bài viết

- Cho phép quản lý sản phẩm - Cho phép quản lý khách hàng

1.2.5 Yêu cầu đặt ra

Xây dựng hệ thống gồm 2 phần:

Thứ nhất - Phần người dùng: Người dùng là những người có nhu cầu mua sắm

hàng hóa, họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng

này Vì thế phần mềm đòi hỏi phải có các chức năng sau:

- Hiển thị danh sách các sản phẩm của cửa hàng để khách hàng xem, lựa chọn và mua

- Người dùng xem các bài viết của cửa hàng

Thứ hai: Phần quản trị viên: Quản trị viên là người có quyền kiểm soát mọi hoạt

động của hệ thống Người này được cấp username và password để đăng nhập hệ thống thực hiện chức năng của mình:

- Chức năng cập nhật, sửa, xóa các danh mục, bài viết, sản phẩm, đơn hàng, khách hàng

- Tiếp nhận kiểm tra đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng

Ngoài các chức năng trên thì trang website phải được thiết kế sao cho dễ hiểu, giao diện mang tính dễ dùng đẹp mắt và làm sao cho khách hàng thấy được thông tin cần tìm, cung cấp các thông tin quảng cáo hấp dẫn Điều quan trọng là phải đảm bảo an toàn tuyệt đối thông tin khách hàng trong quá trình đặt mua qua mạng Đồng thời trang

web phải luôn đổi mới, hấp dẫn

1.3 Khảo sát hiện trạng và xây dựng hệ thống

Sau khi khảo sát em đã nắm bắt được các thông tin :

- Quản lý tài khoản: Mỗi khách hàng được quản lý các thông tin sau: họ tên, email,

- Quản lý đơn hàng: mã hóa đơn, khách hàng, sản phẩm, số lượng, giá trị, trạng thái, thanh toán

- Quản lý khách hàng: mã khách hàng, họ tên, số điện thoại, email, thành phố

1.4 Công nghệ sử dụng

1.4.1 Giới thiệu về ngôn ngữ lập trình PHP

PHP là ngôn ngữ lập trình đa mục đích, cụ thể hơn PHP là ngôn ngữ kịch bản mã nguồn mở, chạy ở phía server và được dùng để tạo ra các ứng dụng web PHP là ngôn ngữ lập trình phổ biến được rất nhiều Developer theo đuổi Cơ hội việc làm dành cho những ai biết ngôn ngữ PHP vô cùng rộng mở Bạn có thể trở thành một Web Developer hoặc Full-Stack Developer nếu làm chủ ngôn ngữ này

1.4.2 Giới thiệu về Laravel

Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC

PHP framework là thư viện làm cho sự phát triển của những ứng dụng web viết bằng ngôn ngữ PHP trở nên trôi chảy hơn bằng cách cung cấp một cấu trúc cơ bản để xây dựng những ứng dụng đó Hay nói cách khác, PHP framework giúp thúc đẩy nhanh chóng quá trình phát triển ứng dụng, tiết kiệm thời gian, tăng sự ổn định cho ứng dụng, giảm thiểu số lần phải viết lại code cho lập trình viên

MVC là mẫu kiến trúc phần mềm trên máy tính nhằm mục đích tạo lập giao diện cho người dùng Theo đó, hệ thống MVC được chia thành ba phần có khả năng tương tác với nhau và tách biệt các nguyên tắc nghiệp vụ với giao diện người dùng

Ba thành phần ấy bao gồm:

- Controller: Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng

- Model: Là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý…

- View: Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tượng GUI như textbox, images…

Bằng cách này, thông tin nội hàm được xử lý tách biệt với phần thông tin xuất hiện trong giao diện người dùng, bảo đảm các nguyên tắc nghề nghiệp của lập trình viên

Hiện nay, Laravel đang là PHP framework phổ biến nhất và tốt nhất Những lý do khiến Laravel trở nên rộng rãi:

- Cú pháp dễ hiểu – rõ ràng

- Hệ thống đóng gói modular và quản lý gói phụ thuộc

- Nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ - Nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

Một số ưu điểm và nhược điểm của framework Laravel:

+ Thường không cung cấp sự phong phú cho ứng dụng di động

1.4.3 Giới thiệu về MySQL

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server Với RDBMS là viết tắt của Relational Database Management System MySQL được tích hợp apache, PHP MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu Mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu MySQL cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL MySQL được phát hành từ thập niên 90s

 Ưu điểm của MySQL

- Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh

- Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp

- Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn thế nữa nó có thể được mở rộng nếu cần thiết

- Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi

 Nhược điểm của MySQL:

- Giới hạn: Theo thiết kế, MySQL không có ý định làm tất cả và nó đi kèm với các hạn chế về chức năng mà một vào ứng dụng có thể cần

- Độ tin cậy: Cách các chức năng cụ thể được xử lý với MySQL (ví dụ tài liệu tham khảo, các giao dịch, kiểm toán…) làm cho nó kém tin cậy hơn so với một số hệ quản trị cơ sở dữ liệu quan hệ khác

- Dung lượng hạn chế: Nếu số bản ghi của bạn lớn dần lên thì việc truy xuất dữ liệu của bạn là khá khó khăn, khi đó chúng ta sẽ phải áp dụng nhiều biện pháp để tăng tốc độ truy xuất dữ liệu như là chia tải database này ra nhiều server, hoặc tạo cache MySQL

1.4.4 Giới thiệu về VueJS

VueJS là một framework mã nguồn mở của JavaScript được sử dụng để phát triển các giao diện web tương tác, là một trong những framework nổi tiếng được sử dụng để đơn giản hóa việc phát triển web VueJS tập trung vào view layer Nó có thể dễ dàng tích hợp vào các dự án lớn để phát triển front-end mà không gặp bất kỳ sự cố nào Việc cài đặt VueJS rất dễ dàng Bất kỳ nhà phát triển nào cũng có thể hiểu và xây dựng giao diện web tương tác trong thời gian ngắn VueJS được tạo ra bởi Evan You, một cựu nhân viên và lập trình viên của Google Phiên bản đầu tiên của VueJS được phát hành vào tháng 2 năm 2014 Gần đây, nó đã đạt 64.828 sao trên GitHub, khiến nó trở nên rất phổ biến

1.4.5 Giới thiệu về NuxtJS

Nuxt.JS là một Javascript framework để tạo các ứng dụng VueJS Mục tiêu là để chúng ta có thể tạo một ứng dụng linh hoạt nhưng được render phía máy chủ, tương tự một trang web tĩnh giống như các website thông thường (điều mà có lợi cho SEO)

NuxtJS tập trung vào khía cạnh render giao diện người dùng Ngoài ra, Nuxt.js có rất nhiều tính năng giúp bạn phát triển giữa phía client và server như Dữ liệu bất đồng bộ (Asynchronous Data), Middleware, Layouts, v.v

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Các Actor sử dụng phần mềm

Bảng 2 1 Các Actor sử dụng phần mềm

STT Tên Actor Ý nghĩa

1 Admin

Người quản lý là người có toàn quyền tương tác với hệ thống, quyền sử dụng tất cả các chức năng mà website xây dựng, điều khiển và kiểm soát mọi hoạt động của website

2 Người dùng

Người dùng ở đây là những người truy cập vào website Người dùng chỉ có một số quyền nhất định đối với website

2.2 Các chức năng của hệ thống 2.2.1 Các chức năng trên website

Bảng 2 2 Các chức năng trên Website

1 Đặt hàng Người dùng có thể đặt mua sản phẩm sau khi trên website

Người dùng nhập đầy đủ thông tin Hệ thống đưa ra thông báo

5 Quản lý Giỏ hàng Cho phép người dùng có thể: xóa sản phẩm Người dùng

2.2.2 Các chức năng trong quản trị

Bảng 2 3 Các chức năng trong quản trị

1 Đăng nhập Người quản trị sau khi đăng ký trở thành thành viên đăng nhập tiếp tục sử dụng các chức năng trong phần quản trị website

Admin

2 Đăng ký Người quản trị tạo tài khoản để sử dụng các chức năng trong phần quản trị Admin 3 Đăng xuất Người quản trị có thể đăng xuất khi không sử dụng các chức năng trong phần quản trị nữa Admin

10 Quản lý khách hàng Cho phép admin có thể:

2.3 Biểu đồ Usecase

2.3.1 Biểu đồ Usecase tổng quát

Hình 2 1 Biểu đồ Usecase tổng quát

2.3.2 Usecase đăng nhập

Hình 2 2 Biểu đồ Usecase đăng nhập

Bảng 2 4 Mô tả Usecase đăng nhập

Use Case – Đăng nhập

Định nghĩa Người quản trị muốn vào hệ thống

Điều kiện tiên quyết Không

Dòng sự kiện

Dòng sự kiện chính 1 Hệ thống hiển thị giao diện đăng nhập, yêu cầu người quản trị nhập tên tài khoản và mật khẩu

3 Người quản trị nhập tên tài khoản và mật khẩu, chọn đăng nhập

4 Hệ thống kiểm tra thông tin tài khoản và mật khẩu, nếu nhập sai tên tài khoản và mật khẩu thì hiện thông báo lỗi và quay lại màn hình đăng nhập

Điều kiện sau Người quản trị đăng nhập thành công và có thể sử dụng các chức năng mà hệ thống cung cấp

2.3.3 Usecase đăng ký

Hình 2 3 Usecase đăng ký Bảng 2 5 Mô tả Usecase đăng ký

Use Case – Đăng ký

Định nghĩa Người quản trị muốn đăng ký làm quản trị của hệ thống

Điều kiện tiên quyết Không

Dòng sự kiện

Dòng sự kiện chính 1 Từ giao diện chính khách hàng chọn đăng ký

2 Hệ thống hiển thị giao diện đăng ký, yêu cầu khách hàng nhập thông tin cá nhân vào form đăng ký

3 Khách hàng nhập thông tin cá nhân sau đó nhấn nút đăng ký

4 Hệ thống kiểm tra thông tin đăng ký đã hợp lệ chưa, nếu chưa A1

5 Hệ thống cập nhật thông tin của người quản trị vào danh sách tài khoản nếu sai thì hiển thị thông báo thông tin không hợp lệ

Điều kiện sau Người quản trị đăng nhập thành công và có thể sử dụng các chức năng mà hệ thống cung cấp

2.3.4 Usecase quản lý danh mục

Hình 2 4 Usecase quản lý danh mục

 Use Case quản lý danh mục sản phẩm sản phẩm

+ Use case thêm danh mục sản phẩm

Bảng 2 6 Mô tả Usecase quản lý danh mục sản phẩm

Use Case – Thêm danh mục sản phẩm

Định nghĩa Khi người quản trị hệ thống muốn thêm danh mục sản phẩm mới vào website

Actors Quản trị

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh mục sản phẩm 2 Người quản trị chọn một nút thêm danh mục sản phẩm 3 Hiển thị Form nhập thông tin danh mục sản phẩm

4 Nhập thông tin sản phẩm chọn nút Thêm danh mục sản phẩm

5 Nếu thêm danh mục sản phẩm không thành công thì hiển thị thông báo thêm thông tin danh mục sản phẩm không thành công

6 Hệ thống sẽ thêm danh mục sản phẩm vào cơ sở dữ liệu

Điều kiện sau Hệ thống hiển thị giao diện danh sách danh mục sản phẩm

+ Use case sửa danh mục sản phẩm

Bảng 2 7 Mô tả Usecase quản lý danh mục sản phẩm

Use Case – Sửa danh mục sản phẩm

Định nghĩa Khi người quản trị hệ thống muốn sửa lại thông tin danh mục sản phẩm

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh mục sản phẩm và nhấn vào liệt kê sản phẩm

2 Người quản trị chọn một nút sửa danh mục sản phẩm 3 Form hiển thị thông tin danh mục sản phẩm cần sửa 4 Nhập thông tin danh mục sản phẩm muốn sửa chọn nút cập nhật danh mục sản phẩm

6 Hệ thống sẽ cập nhật danh mục sản phẩm và trả về giao diện liệt kê danh mục sản phẩm nếu không hiển thị thông báo sửa danh mục sản phẩm không thành công

Điều kiện sau Hệ thống hiển thị thông tin danh mục sản phẩm đã được sửa

+ Use case xóa danh mục sản phẩm

Bảng 2 8 Mô tả Usecase quản lý danh mục sản phẩm

Use Case – Xóa danh mục sản phẩm

Định nghĩa Khi người quản trị muốn xóa danh mục sản phẩm

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh mục sản phẩm và nhấn vào liệt kê danh mục sản phẩm

2 Người quản trị chọn một nút xóa tương ứng với mỗi danh mục sản phẩm

3 Hệ thống sẽ hiển thị thông báo bạn có thật sự muốn xóa 4 Nhấn ok để xóa Nếu lỗi hiển thị thông báo trả về màn hình danh sách danh mục sản phẩm và danh mục sản phẩm không

2.3.5 Usecase quản lý bài viết

Hình 2 5 Usecase quản lý bài viết

 Use Case quản lý bài viết

+ Use case thêm bài viết

Bảng 2 9 Mô tả Usecase quản lý bài viết

Use Case – Thêm bài viết

Định nghĩa Khi người quản trị hệ thống muốn thêm bài viết mới vào website

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh sách bài viết 2 Người quản trị chọn một nút thêm bài viết

3 Hiển thị Form nhập thông tin bài viết

4 Nhập thông tin bài viết chọn nút Thêm bài viết

5 Nếu thêm bài viết không thành công hiển thị thông báo lỗi thêm thông tin bài viết không thành công

6 Hệ thống sẽ thêm bài viết vào cơ sở dữ liệu

Bảng 2 10 Mô tả Usecase quản lý bài viết

Use Case – Sửa bài viết

Định nghĩa Khi người quản trị hệ thống muốn sửa lại thông tin bài viết

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh sách bài viết 2 Người quản trị chọn một nút sửa bài viết

3 Form hiển thị thông tin bài viết cần sửa

4 Nhập thông tin bài viết muốn sửa chọn nút cập nhật bài viết

5 Nếu sửa bài viết không thành công hiện thị thông báo sửa bài viết không thành công

6 Hệ thống sẽ cập nhật bài viết và trả về giao diện danh sách bài viết

Điều kiện sau Hệ thống hiển thị thông tin bài viết đã được sửa

Bảng 2 11 Mô tả Usecase quản lý bài viết

Use Case – Xóa bài viết

Định nghĩa Khi người quản trị muốn xóa bài viết

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh sách bài viết 2 Người quản trị chọn một nút xóa tương ứng với mỗi bài viết

3 Hệ thống sẽ hiển thị thông báo bạn có thật sự muốn xóa

4 Nhấn ok để xóa Nhấn cancel và trả về màn hình danh sách bài viết và danh sách bài viết không thay đổi

5 Xóa bài viết thành công và trả về giao diện danh sách bài viết

Điều kiện sau Thông tin sẽ được thay đổi

2.3.6 Usecase quản lý sản phẩm

Hình 2 6 Usecase quản lý sản phẩm

 Use Case quản lý sản phẩm

Bảng 2 12 Mô tả usecase quản lý sản phẩm

Use Case – Thêm sản phẩm

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh sách sản phẩm 2 Người quản trị chọn một nút thêm sản phẩm

5 Nếu thêm sản phẩm không thành công thông báo thêm thông tin sản phẩm không thành công

6 Hệ thống sẽ thêm sản phẩm vào cơ sở dữ liệu

Điều kiện sau Hệ thống hiển thị giao diện danh sách sản phẩm

Bảng 2 13 Mô tả usecase quản lý sản phẩm

Use Case – Sửa sản phẩm

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý sản phẩm và nhấn vào liệt kê sản phẩm

2 Người quản trị chọn một nút sửa sản phẩm 3 Form hiển thị thông tin sản phẩm cần sửa

4 Nhập thông tin sản phẩm muốn sửa chọn nút cập nhật sản

Điều kiện sau Hệ thống hiển thị thông tin sản phẩm đã được sửa

Bảng 2 14 Mô tả usecase quản lý sản phẩm

Use Case – Xóa sản phẩm

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý sản phẩm và nhấn vào liệt kê sản phẩm

2 Người quản trị chọn một nút xóa tương ứng với mỗi sản phẩm

3 Hệ thống sẽ hiển thị thông báo bạn có thật sự muốn xóa 4 Nhấn ok để xóa Nhấn cancel và trả về màn hình danh sách sản phẩm và sản phẩm vẫn bình thường

5 Xóa danh mục sản phẩm thành công và trả về giao diện liệt kê danh mục sản phẩm

Điều kiện sau Thông tin sẽ được thay đổi

2.3.7 Usecase quản lý đơn hàng

Hình 2 7 Usecase quản lý đơn hàng Bảng 2 15 Mô tả Usecase quản lý đơn hàng

Use Case – Chuyển trạng thái đơn hàng

2 Người quản trị chọn một loại trạng thái 3 Chọn nút cập nhật đơn hàng

4 Nếu thêm thành viên không thành công thông báo cập nhật đơn hàng không thành công

5 Hệ thống sẽ thêm thành viên vào cơ sở dữ liệu

Điều kiện sau Hệ thống hiển thị giao diện danh sách đơn hàng và thông báo trạng thái cập nhật

Bảng 2 16 Mô tả Usecase quản lý đơn hàng

Use Case – Xóa đơn hàng

Định nghĩa Khi người quản trị muốn xóa đơn hàng

Điều kiện tiên quyết Người quản trị cần phải đăng nhập vào hệ thống

Dòng sự kiện

Dòng sự kiện chính 1 Người quản trị chọn giao diện quản lý danh sách đơn hàng 2 Người quản trị chọn một nút xóa tương ứng với đơn hàng 3 Hệ thống sẽ hiển thị thông báo bạn có thật sự muốn xóa 4 Nhấn ok để xóa Nhấn cancel và trả về màn hình danh sách đơn hàng và đơn hàng vẫn bình thường

5 Xóa danh mục thành viên thành công và trả về giao diện danh sách đơn hàng

Điều kiện sau Đơn hàng biến mất

2.3.8 Usecase quản lý khách hàng

Hình 2 8 Usecase quản lý khách hàng Bảng 2 17 Mô tả Usecase quản lý khách hàng

Use Case – Cập nhật thông tin khách hàng

Định nghĩa Khi người quản trị muốn cập nhật thông tin khách hàng

5 Cập nhật thành công trả về màn hình khách hàng với dữ liệu mới

Điều kiện sau Khách hàng cập nhật thông tin thành công

2.4 Biểu đồ tuần tự

2.4.1 Biểu đồ tuần tự chức năng đăng nhập

Hình 2 9 Biểu đồ tuần tự chức năng đăng nhập

 Mô tả biểu đồ:

 Admin chọn chức năng đăng nhập

 Giao diện đăng nhập yêu cầu nhập email và password  Admin nhập email và password

 Hệ thống kiểm tra tính hợp lệ của thông tin  Nếu đúng thì đăng nhập thành công

 Nếu sai thì báo lỗi

2.4.2 Biểu đồ tuần tự chức năng đăng ký

Hình 2 10 Biểu đồ tuần tự chức năng đăng ký

 Mô tả biểu đồ:

 Admin chọn chức năng đăng ký

 Giao diện hiển thị form đăng ký và yêu cầu nhập đầy đủ thông tin  Admin nhập thông tin và ấn nút đăng ký

 Hệ thống kiểm tra tính hợp lệ của thông tin

 Nếu đúng thì tài khoản được tạo và thêm vào cơ sở dữ liệu và thông báo thành công

 Nếu sai thì báo lỗi

2.4.3 Biểu đồ tuần tự chức năng quản lý danh mục

2.4.3.1 Biểu đồ tuần tự Thêm danh mục

Hình 2 11 Biểu đồ tuần tự thêm danh mục

 Mô tả biểu đồ

 Admin yêu cầu thêm danh mục

 Hệ thống hiển thị form thêm danh mục

 Admin nhập đầy đủ thông tin của danh mục và ấn nút thêm mới  Sản phẩm trước khi thêm vào cơ sở dữ liệu sẽ được kiểm tra

 Nếu hợp lệ sẽ được thêm vào cơ sở dữ liệu và thông báo thêm thành  công

2.4.3.2 Biểu đồ tuần tự Sửa danh mục

Hình 2 12 Biểu đồ tuần tự sửa danh mục

 Mô tả biểu đồ

 Admin yêu cầu sửa danh mục

 Hệ thống hiển thị form sửa danh mục

 Admin nhập thông tin cần sửa và ấn nút chỉnh sửa  Hệ thống kiểm tra thông tin

 Nếu hợp lệ thông tin sẽ được cập nhật vào cơ sở dữ liệu và thông báo thành công

2.4.3.3 Biểu đồ tuần tự Xóa danh mục

Hình 2 13 Biểu đồ tuần tự xóa danh mục

 Mô tả biểu đồ:

 Admin ấn xóa danh mục

 Danh mục được xóa trong cơ sở dữ liệu  Danh mục được xóa thành công