Thiết kế và xây dựng website bán đồ chơi

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

TRƯỜNG ĐẠI HỌC PHENIKAA

GIÀNG VĂN LỢI

ĐỒ ÁN TỐT NGHIỆP

THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN ĐỒ CHƠI

KHOA HỌC MÁY TÍNH Sinh viên: Giàng Văn Lợi

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

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

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

Hà Nội – Năm 2022

ii

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

ĐỒ ÁN TỐT NGHIỆP

THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN ĐỒ CHƠI

Sinh viên: Giàng Văn Lợi

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

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

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

Hà Nội – Năm 2022

iii

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT
NAM
TRƯỜNG ĐẠI HỌC
PHENIKAA Độc lập - Tự Do - Hạnh Phúc

NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP CỦA GIẢNG VIÊN HƯỚNG DẪN

Giảng viên hướng dẫn: Thạc sĩ Nguyễn Thị Thùy Liên Bộ môn: ………………

Tên đề tài:Thiết kế và xây dựng website bán đồ chơi

Sinh viên thực hiện: Giàng Văn Lợi Lớp: K12-KHMT

NỘI DUNG NHẬN XÉT
I. Nhận xét ĐAKLTN:
- Nhận xét về hình thức: ………………………………………………………………..
…………………………………………………………………………………………..
- Tính cấp thiết của đề tài: ……………………………………………………………...
…………………………………………………………………………………………..

- Mục tiêu của đề tài: …………………………………………………………………...
…………………………………………………………………………………………..
- Nội dung của đề tài: …………………………………………………………………...
…………………………………………………………………………………………..
- Tài liệu tham khảo: ……………………………………………………………………
…………………………………………………………………………………………..
- Phương pháp nghiên cứu: ……………………………………………………………..
…………………………………………………………………………………………..
- Tính sáng tạo và ứng dụng: …………………………………………………………...
…………………………………………………………………………………………..

iv

II. Nhận xét tinh thần và thái độ làm việc của sinh viên:

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

III. Kết quả đạt được:

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

IV. Kết luận: Đồng ý cho bảo vệ: Không đồng ý cho bảo vệ:
Hà Nội, ngày … tháng … năm 2022
GIẢNG VIÊN HƯỚNG DẪN

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

v

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT
NAM
TRƯỜNG ĐẠI HỌC
PHENIKA Độc lập - Tự Do - Hạnh Phúc

NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP CỦA GIẢNG VIÊN PHẢN BIỆN

Giảng viên phản biện: ………………………………………..Bộ môn: ………………

Tên đề tài: Thiết kế và xây dựng website bán đồ chơi

Sinh viên thực hiện: Giàng Văn Lợi Lớp: K12-KHMT

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

NỘI DUNG NHẬN XÉT
I. Nhận xét ĐAKLTN:
- Bố cục, hình thức trình bày: …………………………………………………………..
…………………………………………………………………………………………..
- Đảm bảo tính cấp thiết, không trùng lặp: ……………………………………………
…………………………………………………………………………………………..
- Nội dung: ……………………………………………………………………………..
…………………………………………………………………………………………..
- Mức độ thực hiện: ……………………………………………………………………
…………………………………………………………………………………………..
II. Kết quả đạt được:

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
III. Ưu nhược điểm:

vi

…………………………………………………………………………………………
…………………………………………………………………………………………

IV. Kết luận: Đồng ý cho bảo vệ: Không đồng ý cho bảo vệ:
Hà Nội, ngày … tháng … năm 2022
GIẢNG VIÊN PHẢN BIỆN
(Ký, ghi rõ họ tên)

vii

LỜI CAM ĐOAN

Tên tôi là: Giàng Văn Lợi

Mã sinh viên: 18010143 Lớp: K12-KHMT

Ngành: Khoa học máy tính

Tơi đã thực hiện đồ án tốt nghiệp với đề tài “Thiết kế và xây dựng website bán đồ
chơ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
giảng viên hướng dẫn Th.S 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.

GIẢNG VIÊN HƯỚNG DẪN Hà Nội, ngày 24 tháng 7 năm 2022
(Ký, ghi rõ họ tên)
SINH VIÊN
(Ký, ghi rõ họ tên)

viii

LỜI CẢM ƠN

Để hoàn thành đồ án tốt nghiệp này, em xin gửi lời cảm ơn đến các Quý Thầy cô Khoa
Công nghệ thông tin, Trường đại học Phenikaa đã tạo cơ hội cho được học tập, rèn luyện
và tích lũy kiến thức, kỹ năng để thực hiện đồ án này.
Đặc biệt, em xin gửi lời cảm ơn đến Giảng viên hướng dẫn cô : Nguyễn Thị Thùy Liên
đã tận tình chỉ dẫn, theo dõi và đưa ra những lời khuyên bổ ích giúp em giải quyết được
các vấn đề gặp phải trong q trình nghiên cứu và hồn thành đề tài một cách tốt nhất.
Do kiến thức của bản thân còn hạn chế và thiếu kinh nghiệm thực tiễn nên nội dung
khóa luận khó tránh những thiếu sót. Em rất mong nhận sự góp ý, chỉ dạy thêm từ Quý
Thầy cô.
Cuối cùng, em xin chúc Quý Thầy Cô luôn thật nhiều sức khỏe và đạt được nhiều thành
công trong công việc.
Trân trọng.

ix

MỤC LỤC

Contents

MỞ ĐẦU 13

CHƯƠNG I. TỔNG QUAN 14

1.Giới thiệu 14

1.1. Đối tượng sử dụng: 14

2. Các công nghệ sử dụng để xây dựng website: 14

CHƯƠNG II. GIỚI THIỆU VỀ CODEIGNITER. 15

1.Giới thiệu. 15

2. Hướng dẫn cài đặt CodeIgniter. 15

3. Kiến trúc framework CodeIgniter. 16

CHƯƠNG III.KHẢO SÁT, PHÂN TÍCH VÀ THIẾT KẾ. 18

1. Khảo sát chức năng. 18

1.1. Thông tin cá nhân: 18

1.2 . Chức năng của quản lý (Admin): 18

1.3. Chức năng của user. 18

1.4. Chức năng của cộng tác viên. 19

2. Phân tích thiết kế hệ thống. 19

2.1 Sơ đồ chức năng 19

2.2. Các loại biểu đồ 20

2.2.1. Đăng nhập 20

2.2.2. Tạo tài khoản 22

2.2.3. Thay đổi hồ sơ. 23

x

2.2.4. Quản lý danh mục 25

2.2.5. Quản lý khách hàng 27

2.2.6. Quản lý sản phẩm 29

2.2.7. Giỏ hàng 30

3. Thiết kế cơ sở dữ liệu 31

4. Các chức năng chi tiết. 38

4.1. Trang chủ. 38

4.2. Các trang danh mục đồ chơi 38

4.3. Trang thông tin sản phẩm 39

4.4. Trang đăng nhập 40

4.5. Trang thông tin cá nhân 42

4.6. Giỏ hàng (User). 43

4.7. Quản lý khách hàng (Admin) 44

4.8. Quản lý danh mục (Admin) 46

4.9. Quản lý sản phẩm (Cộng tác viên) 47

CHƯƠNG IV. KẾT QUẢ DỰ KIẾN. 48

1. Những phần đã làm được 48

2. Hướng phát triển của đề tài 48

3. Tài liệu tham khảo. 48

xi
Danh mục hình ảnh

Hình 2.1: File cài Codeigniter
Hình 2.2: Cấu trúc thư mục CodeIgniter

Hình 2.3:Cấu trúc CodeIgniter trong foo và bar
Hình 3.1:Sơ đồ thiết kế cơ sở dũ liệu
Hình 3.2: Giao diên trang chủ
Hình 3.3: Chi tiết danh mục đồ chơi
Hình 3.4: Thơng tin sản phẩm
Hình 3.5:Màn hình đăng nhập
Hình 3.6:Menu điều hướng sau đăng nhập
Hình 3.7:Menu quản lý của admin
Hình 3.8: Menu quản lý của cộng tác viên
Hình 3.9: Menu quản lý của khách hàng
Hình 3.10: Thơng tin cá nhân
Hình 3.11: Thơng tin cá nhân
Hình 3.12: Giỏ hàng
Hình 3.13: Lịch sử mua hàng
Hình 3.14:Quản lí thơng tin khách hàng
Hình 3.15:Quản lí danh mục admin
Hình 3.16:Quản lí sản phẩm (cộng tác viên)

xii

Danh mục các bảng
Bảng 3.1:Sơ đồ chức năng
Bảng 3.2:Chi tiết đăng nhập
Bảng 3.3: Sơ đồ Diagram( Sequence flow)
Bảng 3.4: Chi tiết tạo tài khoản
Bảng 3.5: Sơ đồ Diagram( Sequence flow)
Bảng 3.6: Thay đổi hồ sơ
Bảng 3.7:Sơ đồ Diagram (sequence flow)
Bảng 3.8: Quản lí danh mục
Bảng 3.9:Sơ đồ Diagram ( sequence flow)

Bảng 3.10:Quản lí sản phẩm
Bảng 3.11:Sơ đồ Diagram( sequence flow)
Bảng 3.12:Giỏ hàng
Bảng 3.13: Sơ đồ Diagram ( sequence flow)

13

MỞ ĐẦU

Ngày nay Internet đã trở thành dịch vụ phổ biến và thiết yếu và có ảnh hưởng sâu rộng
tới thói quen, sinh hoạt, mua bán của nhiều người. Cùng với sự phát triển nhanh chóng
của Internet thì các hình thức mua và bán hàng hóa cho mọi người ngày càng đa dạng
và phát triển hơn. Các ứng dụng Web ngày càng trở nên phổ biến. Trước nhu cầu đó,
cùng với u cầu mơn học, em quyết định chọn đề tài : Thiết kế và xây dựng website
bán đồ chơi.

Với đề tài và môn học này, em xin chân thành cảm ơn sự giúp đỡ tận tình của cơ: Th.s
Nguyễn Thị Thùy Liên.Do còn nhiều hạn chế đề tài em xây dựng khơng tránh khỏi
những thiếu sót. Rất mong được thầy cơ và các bạn đóng góp ý kiến để chương trình
ngày càng hồn thiện và được đưa vào sử dụng.

Trân trọng cảm ơn!

14

CHƯƠNG I. TỔNG QUAN
1.Giới thiệu

Bên cạnh việc chăm nom dinh dưỡng cho con, những ông bố bà mẹ cũng rất
chăm sóc đến việc tăng trưởng niềm tin cho bé bằng cách mua những món đồ chơi để

bé thỏa sức nơ đùa, tăng trí tưởng tượng.

Hiện nay thị trường đồ chơi trẻ em cũng rất sôi động, theo thống kê thì Nước Ta đang
có hơn 100 cơ sở sản xuất chuyên nghiệp, mẫu sản phẩm phong phú về vật liệu cũng
như mẫu mã. Ngoài ra đồ chơi nhập ngoại đang được ưu thích bởi chất lượng cao lại
vừa mang tính giáo dục .

Vì vậy, việc website bán đồ chơi trẻ em là một sáng tạo độc đáo không tồi chút nào.
Website đồ chơi trẻ em chắc như đinh sẽ mang lại được nhiều doanh thu nếu bạn quảng
cáo tốt, bảo vệ nguồn hàng chất lượng, loại sản phẩm đồ chơi độc lạ, có nét riêng so với
những đối thủ cạnh tranh.

Website bán đồ chơi trẻ em ra đời với mục đích cải tiến những điểm yếu của
cách thức bán hàng truyền thống, vì vậy, nó có những đặc điểm cơ bản như: đồng bộ,
tức thời, dễ quản lý, tiếp cận trực tiếp:

✓ Đồng bộ và tức thời : dữ liệu được quản lý và cập nhật trực tiếp lên hệ thống
database.

✓ Dễ quản lý: người quản lý truy cập và quản lý thông tin từ hệ thống database
đã được cập nhật tức thời mà không thông qua bên thứ ba

✓ Tiếp cận trực tiếp: Khách hàng tiếp cận với các thông tin và giá cả của các
loại đồ chơi một cách có hệ thống và trực tiếp , có thể kiểm sốt dễ dàng.

1.1. Đối tượng sử dụng:

Người quản lý ( admin – Chủ shop đồ chơi ): Quản lý đăng , cập nhật hay xóa
các thơng tin về các loại đồ chơi mà shop đang bày bán.

Khách hàng (user): tiếp cận trực tiếp thông tin về các mặt hàng đồ chơi , đặt mua
dễ dàng.

2. Các công nghệ sử dụng để xây dựng website:

Các cơng nghệ được sử dụng chính bao gồm:

● HTML , CSS và SCSS, Javascript .
● PHP , Framework CodeIgniter
● MySQL
● RunCode : *XAMPP

15

CHƯƠNG II. GIỚI THIỆU VỀ CODEIGNITER.
1.Giới thiệu.
• Codeigniter viết tắt CI là Framework được xây dựng theo mơ hình MVC
(Model-View-Controller) gồm các thư viện sẵn có viết bằng ngôn ngữ PHP
bởi Ellislab với phiên bản đầu tiên phát hành vào 28/02/2006.
• Đây là nền tảng ứng dụng web (web application framework) mã nguồn mở
(Theo Wikipedia) được dùng để xây dựng các ứng dụng web động tương tác
với PHP.
• Với Codeigniter các Web developer hồn tồn có thể xây dựng trang web
nhanh chóng dễ dàng mà không phải viết những đoạn code PHP hỗn tạp gây
khó khăn khi sử dụng.
• Bên cạnh đó chúng ta có thể thực hiện các cơng việc liên quan đến cơ sở dữ
liệu (Database), upload file, xử lý ảnh, tạo session và cookies tiết kiệm thời
gian.

2. Hướng dẫn cài đặt CodeIgniter.

• Truy cập vào trang web để tải phiên bản mới nhất

của CI. Sau khi tải về bạn copy và giải nén vào thư mục htdocs (Đọc thêm
bài viết: Hướng dẫn cài đặt XAMPP để tạo localhost).
• Tiếp theo bạn đổi tên CodeIgniter-3.1.11 thành thư mục theo ý của bạn cho
dễ nhớ là được. Mình sẽ đặt là home đi chẳng hạn.
• Bước tiếp theo bạn sẽ copy toàn bộ file trong CodeIgniter-3.1.11 cho vào thư
mục home

16
Hình 2.1: File cài Codeigniter
Tiếp đó bạn sẽ dán link localhost/home lên trình duyệt để chạy xem kết quả.
Như vậy là hoàn thành. Để thay đổi hiển thị bạn vào thư mục application/views/
mở file welcome_message.php bạn sẽ thay đổi ở file này.
3. Kiến trúc framework CodeIgniter.

Hình 2.2: Cấu trúc thư mục CodeIgniter
Cấu trúc thư mục trong CodeIgniter:
Tập tin index.php được xem như controller đầu vào, tiếp nhận các yêu cầu từ phía client
và chuyển các yêu cầu này cho hệ thống xử lý.

17

Thư mục system chứa phần lõi của CodeIgniter, bao gồm các thư viện xây dựng sẵn,
các tập tin ngôn ngữ, ghi chú hệ thống,... Trong đó các thư mục sau khá quan trọng :
Thư mục application : dành cho lập trình viên, các tập tin được lập trình cho ứng dụng
sẽ được lưu trong thư mục này.
Thư mục cache : bộ đệm của hệ thống, chứa các trang đã xử lý trước đó.
Thư mục helpers : chứa các hàm hỗ trợ cho lập trình viên khi viết ứng dụng.
Thư mục libraries : chứa thư viện dựng sẵn của CodeIgniter.

Đối với lập trình viên, các tập tin lập trình sẽ được lưu vào thư mục system/application.
Trong đó :

- Thư mục config : chứa các tập tin cấu hình hệ thống.
- Thư mục controllers : chứa các lớp controllers.
- Thư mục errors : chứa các tập tin lỗi.
- Thư mục helpers : chứa các hàm tiện ích do người dùng định nghĩa.
- Thư mục hooks : chứa các tập tin để mở rộng mã nguồn CodeIgniter.
- Thư mục language : chứa các tập tin ngôn ngữ.
- Thư mục libraries : chứa các thư viện cho người dùng định nghĩa.
- Thư mục models : chứa các lớp model.
- Thư mục views : chứa các lớp view.
Ta cũng có thể đổi tên thư mục application thành tên tuỳ ý. Sau khi đổi tên, cần thiết
lập tên mới cho biến$application_folder trong tập tin index.php. Ngoài ra ta cũng có
thể tạo nhiều ứng dụng trong cùng một bộ cài đặt CodeIgniter bằng cách tạo ra các thư
mục con bên trong system/application. Các thư mục này có cùng cấu trúc giống như
thư mục gốc application.
Chẳng hạn ta có 2 ứng dụng foo và bar. Khi đó cấu trúc thư mục sẽ như sau :

18

Hình 2.3:Cấu trúc CodeIgniter trong foo và bar

Để biết tập tin index.php sẽ chạy ứng dụng nào, ta khai báo lại giá trị của biến
$application_folder.

$application_folder=”application/foo”;
CHƯƠNG III.KHẢO SÁT, PHÂN TÍCH VÀ THIẾT KẾ.

1. Khảo sát chức năng.

1.1. Thông tin cá nhân:

Admin và user sẽ có quyền cập nhật thơng tin cá nhân của bản thân
1.2 . Chức năng của quản lý (Admin):

● Quản lý khách hàng
- Admin sẽ có quyền truy cập thơng tin những khách hàng đã đăng ký trên
website
- Đồng thời Admin cũng có quyền khóa hoặc kích hoạt những tài khoản khách
hàng đã đăng ký trên website

● Quản lý danh mục
- Admin có quyền thêm, sửa, xóa các danh mục về các loại đồ chơi mà website
đang bày bán
1.3. Chức năng của user.

● Xem các loại đồ chơi được bày bán
● Xem các loại đồ chơi đã thêm vào giỏ hàng và lịch sử mua hàng
● Đặt mua món đồ chơi mà mình thích

19
1.4. Chức năng của cộng tác viên.
Cộng tác viên có quyền thêm sản phẩm đồ chơi mới , sửa , xóa các sản phẩm đồ chơi
đã có sẵn.
2. Phân tích thiết kế hệ thống.
2.1 Sơ đồ chức năng

Bảng 3.1:Sơ đồ chức năng

20

2.2. Các loại biểu đồ
2.2.1. Đăng nhập

Tên Use Case Đăng nhập

Mô tả Cho phép người dùng đăng nhập để sử dụng các chức năng của hệ
thống

Actor User,Admin, Cộng tác viên

Sự kiện kích Người dùng muốn đăng nhập vào trong hệ thống
hoạt

Mức độ ưu Must have
tiên

Tiền điều kiện Người dùng đã có tài khoản từ trước

Hậu điều kiện Người dùng đăng nhập thành công

Luồng sự kiện 1. Hệ thống hiển thị giao diện form đăng nhập
chính 2. Người dùng nhập tên tài khoản, mật khẩu và chọn lệnh Hoàn
tất
3. Hệ thống kiểm tra thông tin nếu hợp lệ cho phép đăng nhập và
hiển thị màn hình trang chủ
4. Use Case kết thúc.