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

NGUYỄN CÔNG VIỆT BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC PHENIKAA

ĐỒ ÁN TỐT NGHIỆP

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

KHOA HỌC MÁY TÍNH 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

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC PHENIKAA

ĐỒ Á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

LỜI CAM ĐOAN

Tôi tên là: Nguyễn Công Việt…………………………………………………………………...

Mã sinh viên: 18010149………………………… Lớp: K12-KHMT…………………………..

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 hồn tồ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

LỜI CẢM ƠN
Trước tiên em xin được bày tỏ sự trân trọn và long biết ơn với cô ThS. Nguyễn Thị Thùy
Liên. Trong suốt thời gian học và làm đồ án tốt nghiệp, Cơ đã dành thời gian q báu để tận
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

1

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
CHƯƠNG III: PHÁT TRIỂN WEBSITE DỰA TRÊN LARAVEL PHP
FRAMEWORK……………………………………………………………………………..34
3.1. Giới thiệu về Laravel PHP Framework……………………………………………….34
3.2. Ưu điểm của Laravel PHP Framework đối với phát triển websit…………………..34
3.3. Cấu trúc thư mục và luồng xử lý Laravel…………………………….………………35
3.4. Thành phần cơ bản trong Laravel…………………………………………………….35
3.4.1. Route trong Laravel….…………………………………………………………...….35

2

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

3

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 1.17: Biểu diễn chức năng sửa thơng tin sản phẩm.
Hình 1.18 : Biểu đồ tổng quát về CSDL.
Hình 2.1: Liên kết Route, Controller và View trong Laravel.
Hình 2.2: Hoạt động của Master Template trong Laravel.
Hình 3.1 : Giao diện trang chủ.

4

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 tố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.
Hình 4.1 : Bảng CSDL Users.
Hình 4.2 : Bảng CSDL Orders.
Hình 4.3: Bảng CSDL Order_details.
Hình 4.4: Bảng CSDL Products.
Hình 4.5: Bảng CSDL Brands và Product_category.
Hình 4.6: Bảng CSDL Product_images, Product_comments và Product_details.

5

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.

6

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 ngồ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
• Phạm vi nghiên cứu.
o Xây dựng một trang web bán lẻ, chuyên bán sản phẩm điện thoại trong lãnh
thổ việt nam.
• Công cụ sử dụng.

7

o Sublime Text 3.
o StarUML.
o Xampp.
o Draw.io
o Laravel Framework.
o PhpMyAdmin.

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

• Tìm hiểu lý thuyết
• Lấy ý kiến chuyên gia (giáo viên hướng dẫn và các thầy cơ, bạn bè, chun 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.
o Cho phép khách hàng thanh tốn sản phẩm, điền địa chỉ, thơng tin người nhận

hàng.

o Cho phép khách hàng thêm sản phẩm vào giỏ hàng, xóa sản phẩm trong giỏ

hàng.

o Cho phép tìm kiếm sản phẩm.
o Cho phép bình luận ở cuối sản phẩm.
o Các chức năng cho quản trị viên hệ thống như thêm, sửa, xoá tài khoản, thêm

chuyên mục, thêm sản phẩm, xem thông tin đơn hang.

8

• 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 tố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.

9

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, ngồ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, xố 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.

10

• 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.

- Username.
- Email Address.
- Password.

- Confirm Password.

11

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 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.

o Output: Hiển thị thông tin về tên sản phẩm, ảnh, đơn giá, số lượng, thành
tiền, tổng tiền của sản phẩm.

• Chức năng đặt hàng.
o Description: Cho phép tất cả các khách hàng có thể đặt hàng mà khơng cần
phải là thành viên của hệ thống.
o Input: Sau khi xem giỏ hàng, khách hàng có nhu cầu đặt hàng qua mạng thì
có thể click vào nút đặt hàng và điền một số thông tin cần thiết để người

12

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ể xố 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.

13

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

- Description: Giúp Admin có thể xố người dùng.
- Input: Tìm Users cần xố 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 hố đơn hoặc tên khách hàng của hố đơn đó.
- Process: Lấy tồ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:

14

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 đó.

15

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, ngồ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.
2.3.1. Biểu đồ hoạt động.

16

• Đăng nhập.

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