Thiết kế và xây dựng website bán điện thoại

Bước khảo sát yêu cầu sẽ làm rõ được một số vấn đề sau: • Mục đích xây dựng ứng dụng: Mục đích sử dụng của dự án này là trình bày thông tin sản phẩm trên website, cho phép người dùng tru

Sinh viên: Nguyễn Công Việt

Mã số sinh viên: 18010149 Khóa: K12

Ngành: Khoa Học Máy Tính Hệ: Chính Quy

Giảng viên hướng dẫn: ThS Nguyễn Thị Thùy Liên

ĐỒ ÁN TỐT NGHIỆP

TÊN ĐỀ TÀI THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI

Sinh viên: Nguyễn Công Việt

Mã số sinh viên: 18010149 Khóa: K12

Ngành: Khoa Học Máy Tính Hệ: Chính Quy

Giảng viên hướng dẫn: ThS Nguyễn Thị Thùy Liên

Hà Nội – Năm 2022

Copies for internal use only in Phenikaa University

Ngành: Khoa Học Máy Tính……… Tôi đã thực hiện đồ án/khóa luận tốt nghiệp với đề tài: Thiết Kế Và Xây Dựng Website Bán Điện Thoại………

Tôi xin cam đoan đây là đề tài nghiên cứu của riêng tôi và được sự hướng dẫn của: ThS Nguyễn Thị Thùy Liên

Các nội dung nghiên cứu, kết quả trong đề tài này là trung thực và chưa được các tác giả khác công bố dưới bất kỳ hình thức nào Nếu phát hiện có bất kỳ hình thức gian lận nào tôi xin hoàn toàn chịu trách nhiệm trước pháp luật

Hà Nội, ngày 24 tháng 7 năm 2022 GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN

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

Nguyễn Thị Thùy Liên Nguyễn Công Việt

tình chỉ bảo, hướng dẫn, định hướng cho em trong việc nghiên cứu thực hiện luận văn

Em xin cảm ơn thầy cô Trường Đại Học Phenikaa đã giảng dạy em trong quá trình học tập, thực hành, làm bài tập, đọc và nhận xét luận văn của em, giúp em hiểu thấu đáo lĩnh vực mà

em nghiên cứu, những hạn chế mà em cần khắc phục trong việc học tập nghiên cứu và thực hiện bản luận văn này

Em cũng xin chân thành cảm ơn Trường Đại Học Phenikaa nơi đã đào tạo em trong suốt 4 năm học qua

Xin cảm ơn các bạn bè và các thành viên trong gia đình đã tạo mọi điều kiện tốt nhất, động viên, cổ vũ tôi trong suốt quá trình học và làm đồ án tốt nghiệp

Hà Nội, ngày 24 tháng 7 năm 2022

SINH VIÊN THỰC HIỆN

Nguyễn Công Việt

Copies for internal use only in Phenikaa University

MỤC LỤC

CHƯƠNG I: GIỚI THIỆU……… 6

1.1 Giới thiệu qua về dề tài……… ……… 6

1.1.1 Lý do chọn đề tài……… ……… …6

1.1.2 Mục đích đề tài……… ……… 6

1.1.3 Đối tượng, phạm vi nghiên cứu và công cụ……… … 6

1.1.4 Phương pháp nghiên cứu……… …… 7

1.2 Khảo sát yêu cầu của một Website bán điện thoại……….7

CHƯƠNG II:PHÂN TÍCH THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI……… 9

2.1 Các đối tượng sử dụng Website………9

2.2 Phân tích các chức năng của hệ thống………9

2.2.1 Biểu đồ Use Case tổng quát……… 9

2.2.1.1 Mô tả chức năng của đối tượng Users……… …… 10

2.2.1.2 Mô tả chức năng của đối tượng Admin……… ….12

2.2.2 Biểu đồ Use Case của trường hợp sử dụng……… ……… 13

2.3 Biểu đồ phân tích thiết kế hệ thống………15

2.3.1 Biểu đồ hoạt động……… …… 15

2.3.2 Sơ đồ hoạt động……… ……… 24

2.4 Thiết kế cơ sở dữ liệu……… 29

2.4.1 Danh sách các bảng CSDL……… ………30

3.4.2 Laravel Model……… 38

3.4.3 Laravel Controller……… ……….39

3.4.4 Laravel View(Master Template)……… ……… 41

3.5 Sử dụng các thư viện dành cho thiết kế giao diện website với Laravel ……….43

3.5.1 Sử dụng Bootstrap CSS Framework……… 43

3.5.2 Sử dụng Jquery Javascript Framework……… ……… 44

3.5.3 Sử dụng kỹ thuật Jquery Ajax……… ……….44

CHƯƠNG IV: KẾT QUẢ ĐẠT ĐƯỢC………46

4.1 Giao diện dành cho Users……….……… 46

4.2 Giao diện dành cho Admin……… ……… … 54

4.3 Cơ Sở Dữ Liệu………….……… ……… … 61

CHƯƠNG V: KẾT LUẬN……… …… 67

TÀI LIỆU THAM KHẢO……… 68

Copies for internal use only in Phenikaa University

DANH MỤC ẢNH

Hình 1.1: Biểu đồ tổng quát Use Case

Hình 1.2 : Sơ Đồ Use Case của người dùng

Hình 1.3: Sơ Đồ Use Case của Admin

Hình 1.4: Biểu đồ đăng nhập

Hình 1.5: Biểu đồ đăng xuất

Hình 1.6: Biểu đồ xem thông tin sản phẩm

Hình 1.7: Biểu đồ thêm sản phẩm vào giỏ hàng

Hình 1.8: Biểu đồ đặt hàng

Hình 1.9: Biểu đồ thêm sản phẩm

Hình 1.10: biểu đồ sửa thông tin sản phẩm

Hình 1.11: Biểu đồ xóa sản phẩm

Hình 1.12: biểu đồ xóa Users

Hình 1.13: Biểu diễn chức năng đăng nhập

Hình 1.14: Biểu diễn chức năng tìm kiếm

Hình 1.15: Biểu diễn chức năng thêm mới sản phẩm

Hình 1.16: Biểu diễn chức năng sửa thông tin sản phẩm

Hình 3.2: Giao diện Shop

Hình 3.3: Giao diện tìm kiếm

Hình 3.4: Giao diện Show sản phẩm

Hình 3.5: Giao diện khi nhấn vào logo giỏ hàng bên cạnh sản phẩm

Hình 3.6: Giao diện giỏ hàng

Hình 3.7: Giao diện thanh toán

Hình 3.8: Email xác thực đơ

Hình 3.9: Giao diện bản đồ địa chỉ cửa hàng

Hình 3.10: Giao diện đăng nhập Admin

Hình 3.11: Giao diện đăng ký Admin

Hình 3.12: Giao diện quản trị Products

Hình 3.13: Giao diện quản trị Orders

Hình 3.14: Giao diện quản trị Order_details

Hình 3.15: Giao diện quản trị Comments

Hình 3.16: Giao diện quản trị Users

DANH MỤC BẢNG

Bảng 1: Biểu diễn bảng Users

Bảng 2: Biểu diễn bảng Orders

Bảng 3: Biểu diễn bảng Order_details

Bảng 4: Biểu diễn bảng Products

Bảng 5: Biểu diễn bảng Brands

Bảng 6: Biểu diễn bảng Product_category

Bảng 7: Biểu diễn bảng Product_comments

Bảng 8: Biểu diễn bảng Product_details

Bảng 9: Biểu diễn bảng Product_images

CHƯƠNG I: GiỚI THIỆU

1.1 Giới thiệu qua về đề tài

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

Chúng ta đang chứng kiến sự phát triển mạnh mẽ của ngành Công nghệ thông tin Công nghệ thông tin (CNTT) đã và đang thay đổi thế giới một cách nhanh chóng và từng bước kéo nền tri thức của nhân loại xích lại gần nhau hơn Đó là nhờ việc phát triển hệ thống website trên toàn thế giới Ngày nay, Website đã đóng một vai trò quan trọng đối với con người chúng ta từ giải trí cho đến quảng cáo, thương mại, quản lý…Website (thương mại điện tử) sẽ dần dần thay thế những phương thức kinh doanh cũ trong các doanh nghiệp bởi tính ưu việt mà Website mang lại như: nhanh hơn, rẻ hơn, tiện dụng hơn, hiệu quả hơn

và không bị giới hạn không gian và thời gian

Hiện nay có thể xem công nghệ xây dựng web bằng Laravel framework rất phổ biến Laravel framework dùng mã nguồn mở miễn phí, vì thế nên Laravel framework có thể được cài đặt trên hầu hết các Web Server thông dụng hiện nay như Apache, IIS… dễ học khi đã biết HTML, C, OOP (vì php được phát triển trên nền tảng C, OOP ), có nhiều websever cấu hình đơn giản như XAMPP, WAMPP,… thư viện phong phú (Joomla, wordpress…), có tính bảo mật, thích hợp cho làm việc nhóm Tuy nhiên ngoài những ưu điểm bên cách đó Laravel framework còn có nhược điểm là chỉ chạy trên ứng dụng web,

mã nguồn không đẹp và hiếm tool

1.1.2 Mục đích đề tài

• Xây dựng Website Bán Điện Thoại

o Giới thiệu và trưng bày được các mặt hàng

o Nhanh chóng hiệu quả

o Đảm bảo chính xác, bảo mật cao, tiện lợi và dễ dàng sử dụng

o Thuận tiện cho việc mua và bán các mặt hàng

o Phân tích thiết kế hệ thống để đưa cơ sơ dữ liệu và các chức năng cho website

1.1.3 Đối tượng, phạm vi nghiên cứu và công cụ

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

o Công nghệ Laravel Framework

o Tìm hiểu và khảo sát quy trình bán hàng qua mạng để có cơ sở xây dựng một trang web bán hàng

• Lấy ý kiến chuyên gia (giáo viên hướng dẫn và các thầy cô, bạn bè, chuyên gia)

• Khảo sát các website bán điện thoại khác

• Tìm hiểu và nghiên cứu nhu cầu của người dùng

1.2 Khảo sát yêu cầu của một Website bán điện thoại

Bước khảo sát yêu cầu sẽ làm rõ được một số vấn đề sau:

• Mục đích xây dựng ứng dụng: Mục đích sử dụng của dự án này là trình bày thông tin sản phẩm trên website, cho phép người dùng truy cập và tra cứu thông tin sản phẩm trên trình duyệt web

• Đối tượng sử dụng: Người dùng bình thường (khách hàng), quản trị viên website (gồm quản trị viên đăng bài và quản trị viên toàn bộ hệ thống)

• Yêu cầu về chức năng: Đối với một website bán điện thoại, yêu cầu tối thiểu sẽ phải đạt được là:

o Hiển thị nội dung theo từng sản phẩm

o Cho phép truy cập và xem sản phẩm

o Cho phép liệt kê danh sách sản phẩm theo từng chuyên mục

o Cho phép khách hàng đăng ký, đăng nhập thành viên

• Yêu cầu về thiết kế:

o Trình bày nội dung sản phẩm, có tiêu đề, giá sản phẩm

o Trang chủ liệt kê danh sách các sản phẩm nổi bật của cửa hàng

o Trang web có logo của trang web, phần cửa hàng hiển thị danh sách sản phẩm của cửa hàng

o Trang web có phần thêm sản phẩm vào giỏ hàng, xóa sản phẩm trong giỏ hàng

o Trang web có phần thanh toán sản phẩm điền thông tin địa chỉ người nhận

o Trang web có đăng ký, đăng nhập

o Trang web có thông tin chung về cửa hàng, địa chỉ về cửa hàng

Sau khi đã làm rõ được các yêu cầu đối với ứng dụng, bước tiếp theo sẽ là thiết kế hệ thống theo những yêu cầu đã nêu ở trên

Copies for internal use only in Phenikaa University

CHƯƠNG II PHÂN TÍCH THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI 2.1 Các đổi tượng sử dụng Website

Như đã khảo sát, các đối tượng sử dụng của website bao gồm người dùng (khách hàng) và quản trị viên website Hai đối tượng này, về mặt chung đều là người sử dụng website, nhưng mục đích sử dụng của mỗi đối tượng lại khác nhau Người dùng bình thường chỉ có quyền xem sản phẩm và mua sản phẩm, có thể bình luận về bài viết, quản trị viên sẽ có tất cả các quyền của người dùng bình thường, ngoài ra sẽ có quyền cao hơn

là quản lý thông tin sản phẩm (đăng sản phẩm, sửa sản phẩm, xoá sản phẩm, xem thông tin sản phẩm,…)

Vì vậy, việc xác định định danh của người dùng đối với người sử dụng bình thường

là không cần thiết, mặt khác, đối với quản trị viên là bắt buộc

2.2 Phân tích các chức năng của hệ thống

2.2.1 Biểu đồ Use Case tổng quát

• Biểu đồ tổng quát của Use Case:

Hình 1.1: Biểu đồ tổng quát Use Case

2.2.1.1 Mô tả chức năng của đối tượng Users

• Chức năng đăng ký thành viên

o Description: Dành cho khách vãng lai đăng ký làm thành viên để có thêm nhiều chức năng cho việc mua bán sản phẩm, cũng như tạo mối quan hệ lâu dài với cửa hàng

o Input: Khách vãng lai phải nhập đầy đủ các thông tin

o Process: Kiểm tra thông tin nhập Nếu thông tin chính xác sẽ lưu thông tin vào CSDL và thêm thông tin của thành viên đó vào CSDL

o Output: Đưa ra thông báo đăng ký thành công hoặc yêu cầu nhập lại nếu thông tin không hợp lệ

• Chức năng tìm kiếm sản phẩm

o Input: Nhập vào hoặc lựa chọn thông tin tìm kiếm theo danh mục, theo giá, theo tên sản phẩm, theo chủng loại…

o Process: Lấy thông tin sản phẩm từ CSDL theo các trường tìm kiếm

o Output: Hiện chi tiết thông tin sản phẩm thỏa mãn yêu cầu tìm kiếm

• Chức năng xem thông tin sản phẩm

o Description: Cho phép xem chi tiết thông tin của sản phẩm

o Input: Chọn sản phẩm cần xem

o Process: Lấy thông tin sản phẩm từ CSDL thông qua ID

o Output: Hiện chi tiết thông tin sản phẩm

• Chức năng giỏ hàng

o Description: Cho phép xem chi tiết giỏ hàng

o Input: Click chọn vào giỏ hàng

o Process: Lấy thông tin sản phẩm từ CSDL thông qua ID ID này được lấy

từ biến session lưu các thông tin về mã sản phẩm và số lượng của từng sản phẩm mà khách hàng chọn vào giỏ hàng

quản trị có thể xác nhận thông tin và giao hàng trực tiếp đến đúng địa chỉ một cách nhanh nhất có thể

o Process: Lưu thông tin về khách hàng và thông tin hóa đơn đặt hàng vào các bảng trong cơ sở dữ liệu

o Output: Đưa ra thông báo đơn đặt hàng đã được lập thành công hoặc không thành công

2.2.1.2 Mô tả chức năng của đối tượng Admin

• Các chức năng quản lý sản phẩm

o Chức năng chỉnh sửa thông tin sản phẩm

- Description: Giúp Admin thay đổi thông tin của sản phẩm đã có

trong CSDL

- Input: Admin nhập thông tin mới của sản phẩm

- Process: Cập nhật thông tin mới cho sản phẩm

- Output: Hiển thị thông báo đã cập nhật sản phẩm

o Chức năng xóa sản phẩm

- Description: Giúp Admin có thể xoá sản phẩm

- Input: Chọn sản phẩm cần xoá

- Process: Xoá trong CSDL

- Output: Load lại danh sách sản phẩm

o Chức năng thêm sản phẩm

- Description: Giúp Admin có thể thêm sản phẩm mới

- Input: Admin nhập vào những thông tin cần thiết của sản phẩm mới

- Process: Kiểm tra xem những trường nào không được để trống Nếu tất cả đều phù hợp thì thêm vào database Ngược lại thì không thêm

vào database

- Output: Load lại danh sách sản phẩm để xem sản phẩm mới đã được

thêm vào CSDL

• Các chức năng quản trị người dùng

Copies for internal use only in Phenikaa University

o Chức năng xóa người dung

- Description: Giúp Admin có thể xoá người dùng

- Input: Tìm Users cần xoá và chọn biểu tượng xoá

- Process: Xoá User ra khỏi CSDL

- Output: Load lại danh sách người dùng để xem thông tin vừa thay đổi

• Các chức năng đối với hóa đơn đặt hàng

o Chức năng xem thông tin chi tiết các đơn đặt hàng

- Description: Xem chi tiết đơn đặt hàng có trong CSDL

- Input: Chọn tên hoá đơn hoặc tên khách hàng của hoá đơn đó

- Process: Lấy toàn bộ thông tin chi tiết của đơn đặt hàng có trong CSDL

- Output: Hiển thị chi tiết thông tin trong đơn đặt hàng

2.2.2 Biểu đồ Use Case của trường hợp sử dụng

Các trường hợp sử dụng của người dùng sẽ được biểu thị thông qua các sơ đồ use case sau:

Hình 1.2 : Sơ Đồ Use Case của người dung

Hình biểu thị các trường hợp sử dụng của người dùng thông thường, bao gồm truy cập trang web, truy cập các danh mục sản phẩm, xem sản phẩm, tìm kiếm sản phẩm theo tiêu đề Khi người dùng truy cập trang web, hệ thống sẽ đưa người dùng tới trang chủ của website bán điện thoại Khi người dùng xem sản phẩm, người dùng sẽ có thể bình luận sản phẩm đó

Copies for internal use only in Phenikaa University

Hình 1.3: Sơ Đồ Use Case của Admin Hình mô tả các trường hợp sử dụng của quản trị viên hệ thống (Administrator) Cũng giống như quản trị viên đăng sản phẩm, quản trị viên hệ thống cũng có các quyền cơ bản của một người dùng bình thường, ngoài ra, quản trị viên hệ thống còn có các quyền cao hơn khi đăng nhập vào phần quản trị của hệ thống Sau khi đăng nhập thành công, quản trị viên hệ thống sẽ có đầy đủ các chức năng, thao tác toàn quyền với hệ thống của ứng dụng Bao gồm chỉnh sửa thông tin tài khoản, tất cả các chức năng của quản trị viên đăng sản phẩm sẽ nằm trong chức năng quản lý sản phẩm, quản lý tài khoản của các quản trị viên đăng sản phẩm, quản lý các nội dung dữ liệu mà quản trị viên đăng sản phẩm tải lên hệ thống, quản lý các danh mục sản phẩm, quản lý hình ảnh, xem thông tin hóa đơn, người mua và cuối cùng là đăng xuất khỏi hệ thống khi xong việc

2.3 Biểu đồ phân tích thiết kế hệ thống

• Đăng nhập

Hình 1.4: Biểu đồ đăng nhập

Copies for internal use only in Phenikaa University

• Đăng xuất

Hình 1.5: Biểu đồ đăng xuất

• Xem thông tin sản phẩm

Hình 1.6: Biểu đồ xem thông tin sản phẩm

Copies for internal use only in Phenikaa University

• Thêm sản phẩm vào giỏ hàng

Hình 1.7: Biểu đồ thêm sản phẩm vào giỏ hàng

• Đặt hàng

Hình 1.8: Biểu đồ đặt hàng

Copies for internal use only in Phenikaa University

• Thêm sản phẩm

Hình 1.9: Biểu đồ thêm sản phẩm

• Sửa thông tin sản phẩm

Hình 1.10: biểu đồ sửa thông tin sản phẩm

Copies for internal use only in Phenikaa University

• Xóa sản phẩm

Hình 1.11: Biểu đồ xóa sản phẩm

• Chức năng đăng nhập

Hình 1.13: Biểu diễn chức năng đăng nhập

• Chức năng tìm kiếm

Hình 1.14: Biểu diễn chức năng tìm kiếm

Copies for internal use only in Phenikaa University

• Chức năng thêm sản phẩm mới

Hình 1.15: Biểu diễn chức năng thêm mới sản phẩm

• Chức năng sửa thông tin sản phẩm

Hình 1.16: Biểu diễn chức năng sửa thông tin sản phẩm

Copies for internal use only in Phenikaa University

• Chức năng xóa sản phẩm

Hình 1.17: Biểu diễn chức năng sửa thông tin sản phẩm

2.4 Thiết kế cơ sở dữ liệu

Biểu đồ tổng quát về CSDL:

Hình 1.18 : Biểu đồ tổng quát về CSDL

Hình biểu diễn các mối quan hệ trong cơ sở dữ liệu Bảng User để lưu thông tin tài khoản Bảng Orders và Order_details để lưu thông tin đơn hàng và chi tiết từng sản phẩm trong hóa đơn đó, một Orders có thể có nhiều Order_details và mỗi Order_details là một sản phẩm được mua trong hóa đơn Bảng Brands và bảng Product_category lưu danh mục sản phẩm, từ bảng Brands sang bảng Products là quan hệ một nhiều Bảng Product_images để lưu danh sách hình ảnh sản phẩm Bảng Product_details để lưu danh sách màu sản phẩm và số gb của sản phẩm và mối quan hệ cũng là một nhiều Còn bảng Product_comments để lưu danh sách bình luận của người dùng về sản phẩm

2.4.1 Danh sách các bảng CSDL

Copies for internal use only in Phenikaa University

Bảng 6: Biểu diễn bảng Product_category

Copies for internal use only in Phenikaa University