Đồ án cơ sở 2 website bán nội thất

Website được xây dựng phải đáp ứng những nhu cầu cần thiết của khách hàng:  Yêu cầu chức năng:  Quản lí thông tin sản phẩm  Quản lí người dùng và quyền truy cập admin  Quản lí các da

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 2

WEBSITE BÁN NỘI THẤT

Sinh viên: TRƯƠNG THỊ HƯƠNG GIANG – 21IT016

PHẠM VĂN NAM – 21IT032

Giảng viên hướng dẫn: ThS Nguyễn Anh Tuấn

Đà Nẵng, 23 tháng 12 năm 2022

2

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Em xin trân trọng cảm ơn ThS Nguyễn Anh Tuấn – giảng viên Khoa Khoa HọcMáy Tính đã tận tâm và nhiệt tình giúp đỡ trong suốt thời gian thực hiện đồ án, thầy đãdành nhiều thời gian quý báu để tận tình chỉ bảo, hướng dẫn, định hướng cho chúng

em thực hiện đồ án, giúp chúng em hoàn thiện đồ án và học hỏi được những kiến thứcquý giá Chúng em cũng xin chân thành cảm ơn các thầy cô trong khoa Khoa Học MáyTính cũng như những giáo viên bộ môn đã nhiệt tình dạy bảo, tạo điều kiện và hỗ trợcho em trong suốt quá trình thực hiện đồ án cơ sở 2 tại trường Đại Học Công NghệThông Tin và Truyền Thông Việt-Hàn

Em xin cảm ơn các bạn bè đã tạo mọi điều kiện tốt nhất trong quá trình học tập

và nghiên cứu làm đồ án Do khả năng có hạn, kiến thức còn hạn chế, kinh nghiệmthực tế chưa nhiều nên không tránh khỏi những thiếu sót Rất mong được sự chỉ bảocủa các thầy cô Cuối cùng chúng em xin được gửi tới thầy cô, các trợ giảng đạt đượcnhiều thành công hơn trong công cuộc giảng dạy

Sinh viên,

Trương Thị Hương GiangPhạm Văn Nam

MỤC LỤC

MỞ ĐẦU 1

1 Giới thiệu 1 2 Mục tiêu của đề tài 1 3 Nội dung và kế hoạch thực hiện 2 4 Bố cục báo cáo 2 Chương 1: CƠ SỞ LÍ THUYẾT 3

1 Giới thiệu về HTML 3 1.1 HTML là gì? Lịch sử của HTML 3

1.2 Cấu trúc, cách hoạt động của HTML 3

2 Giới thiệu về CSS 4 2.1 CSS là gì? 4

2.2 CSS hoạt động như thế nào? 4

3 Giới thiệu về Javascript 4 3.1 Javascript là gì? 4

3.2 Lịch sử phát triển của Javascript 4

3.3 Một số khái niệm liên quan 4

4 Giới thiệu về PHP 5 4.1 PHP là gì? 5

4.2 Ưu nhược điểm của PHP 5

4.3 Laravel framework 6

4.4 Các thành phần cơ bản trong Laravel project 6

Chương 2: TỔNG QUAN VỀ DỰ ÁN 8

1 Đánh giá hiện trạng 8 1.1 Khảo sát trên thực tế 8

1.2 Mục tiêu đề tài 8

2 Các chức năng cơ bản 8 2.1 Đối với admin 8

2.2 Đối với người dùng 8

Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9

1 Use case diagram 9 1.1 Admin 9

1.2 Customer 12

Chương 4: XÂY DỰNG DỰ ÁN 16

1 Xây dựng database 16 1.1 Bảng admin 16

1.2 Bảng customer 16

1.3 Bảng product 16

1.4 Bảng categories 17

1.5 Bảng cart 17

1.6 Bảng menus 17

1.7 Bảng order 17

1.8 Bảng order detail 18

1.9 Bảng check out 18

1.10 Bảng payment 18

2 Xây dựng giao diện 19 2.1 Đăng nhập admin 19

2.2 Đăng kí khách hàng 20

2.3 Đăng nhập khách hàng 20

2.4 Trang chủ 21

2.5 Liên hệ 21

2.6 Phân loại 22

Chương 5: KẾT LUẬN 23

1 Kết quả đạt được 23 2 Hướng nghiên cứu 23 TÀI LIỆU THAM KHẢO i

2

DANH MỤC CÁC TỪ VIẾT TẮT

XAMPP Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) và Perl (P)

MENU HÌNH ẢNH

Figure 1: Use case diagram đăng nhập 9

Figure 2: Use case diagram quản lí tài khoản 10

Figure 3: Use case quản lí danh mục 10

Figure 4: Use case diagram quản lí sản phẩm 11

Figure 5: Use case diagram xem thông tin đơn hàng 12

Figure 6: Use case diagram đăng kí 12

Figure 7: Use case diagram đăng nhập 13

Figure 8: Use case diagram thêm sản phẩm vào giỏ hàng 14

Figure 9: Use case diagram tìm kiếm sản phẩm 14

Figure 10: Use case diagram báo cáo sự cố 15

Figure 11: Use case diagram thanh toán 15

Figure 12: Giao diện đăng nhập admin 19

Figure 13: Giao diện đăng kí khách hàng 20

Figure 14: Giao diện đăng nhập khách hàng 20

Figure 15: Giao diện trang chủ 21

Figure 16: Giao diện liên hệ 21

Figure 17: Giao diện phân loại 22

DANH MỤC BẢNG

3.1 Bảng đặc tả đăng nhập 9

3.2 Bảng đặc tả quản lí tài khoản 9

3 3 Bảng đặc tả quản lí danh mục 10

3.4 Bảng đặc tả quản lí sản phẩm 11

3.5 Bảng đặc tả xem thông tin đơn hàng 11

3.6 Bảng đặc tả đăng kí 12

3.7 Bảng đặc tả đăng nhập 13

3.8 Bảng đặc tả thêm sản phẩm vào giỏ hàng 13

3.9 Bảng đặc tả tìm kiếm sản phẩm 14

3.10 Bảng đặc tả báo cáo sự cố 14

3.11 Bảng đặc tả thanh toán 15

4.12 Bảng admin 16

4.13 Bảng customer 16

4.14 Bảng product 16

4.15 Bảng categories 17

4.16 Bảng cart 17

4.17 Bảng menus 17

4.18 Bảng order 17

4.19 Bảng order detail 18

4.20 Bảng check out 18

4.21 Bảng payment 18

2

MỞ ĐẦU

1 Giới thiệu

Với sự bùng nổ của dân số, tốc độ gia tăng dân số rẩt cao như hiện nay Kéotheo hàng loạt nhu cầu về tinh thần cũng như vật chất Một trong những nhu cầu tấtyếu nhất đó là chổ ở Công nghệ phát triển kéo theo ngành xây dựng cũng ngày pháttriển theo Nhận thấy với ngành xây dựng phát triển như thế nhu cầu về nội thất trangtrí cũng rất cao Nhằm tiết kiệm thời gian, chi phí cho cả người mua và bán Giúpngười mua có cái nhìn trực quan về sản phẩm Ứng dụng CNTT vào đời sống.Với suynghĩ đó, chúng em hi vọng đồ án có thể góp phần như một ứng dụng nhỏ cho vấn đềtrên

Dự án website bán nội thất được xây dựng dưới dạng website cung cấp chocác công ty, đại lí phân phối nội thất một nền tảng thương mại cũng như kênh bánhàng mới Dữ liệu về các sản phẩm sẽ được lưu trữ trong database và sẽ được hiển thịlên website để khách hàng có thể tham khảo Giúp các công ty, đại lí rút gọn được thờigian chi phí trong quá trình kinh doanh, cũng như những rủi ro khi lưu dữ thông tintheo cách truyền thống

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

Xây dựng được một website bán nội thất Website được xây dựng phải đáp ứng những nhu cầu cần thiết của khách hàng:

 Yêu cầu chức năng:

 Quản lí thông tin sản phẩm

 Quản lí người dùng và quyền truy cập admin

 Quản lí các danh mục

 Tìm kiếm thông tin sản phẩm

 Tạo, xóa dữ liệu trong hệ thống

 Thanh toán được trên website

 Thông báo khi đặt hàng thành công

 Yêu cầu phi chức năng:

 Thời gian phản hồi nhanh

 Giao diện đơn giản, dễ dàng sử dụng

 Bảo mật thông tin khách hàng

 Có khả năng mở rộng chức năng khi có yêu cầu

1

3 Nội dung và kế hoạch thực hiện

 Các bước thực hiện đồ án:

 Thực hiện nghiên cứu các thuộc tính, tính chất của đề tài

 Liệt kê các chức năng cần thiết để lên các ý tưởng đồ án

 Xây dựng giao diện website bằng HTML, Javascript, CSS, Bootstrap tối ưu giaodiện

 Sử dụng framework Laravel của PHP để xây dựng cơ sở dữ liệu cũng như adminpage để các thao tác với dữ liệu

 Xây dựng các chức năng cho website

 Thực hiện kết nối cơ sở dữ liệu để đưa dữ liệu lên website

 Chạy, kiểm thử kết quả và sửa chữa lần cuối

4 Bố cục báo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:

 Chương 1 Cơ sở lí thuyết

Chương 1: CƠ SỞ LÍ THUYẾT

có thể tự tìm trạng thái tìm kiếm mới nhất của HTML tại bất kỳ thời điểm nào trênTrang web của W3C

Phiên bản đầu tiên của HTML xuất hiện năm 1991, bao gồm 18 thẻ HTML.Phiên bản HTML 4.01 được xuất bản vào năm 1999 Sau đó, các nhà phát triển đãthay thế HTML bằng XHTML vào năm 2000

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều thẻ đượcthêm vào đánh dấu, mục đích là để xác định nội dung thuộc loại thuộc loại gì (ví dụnhư: <article>, <header>, <footer>,… )

Theo Mozilla Developer Network thì HTML Element Reference hiện cókhoảng hơn 140 thẻ Tuy nhiên, một vài thẻ trong số đó đã bị tạm dừng (do trình duyệthiện hành không hỗ trợ)

1.2 Cấu trúc, cách hoạt động của HTML

Một trang web thường chứa nhiều trang con và mỗi trang con này lại có mộttệp HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điều này có nghĩa

là nó không thể thực hiện chức năng “động” Hiểu một cách đơn giản hơn, cũng tương

tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trangweb HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắccho thế giới mạng

Tài liệu HTML có đuôi tệp dạng html hoặc htm Bạn có thể xem chúng bằngcác trình duyệt web hiện hành như Google Chrome, Firefox, Safari,… Nhiệm vụ củatrình duyệt là đọc các tệp HTML này và “biến đổi” chúng thành một dạng nội dungtrực quan trên Internet sao cho người dùng có thể xem và hiểu được chúng

Thông thường, một Trang web sẽ có nhiều tài liệu HTML (ví dụ: trang chủ,trang blog, trang liên hệ,…) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗitài liệu HTML bao gồm 1 thẻ bộ (hay còn gọi là phần tử) Nó tạo ra một cấu trúctương tự như cây thư mục với các tiêu đề, phần, đoạn,… và một số khối nội dungkhác Hầu hết tất cả các phần tử HTML đều có một thẻ mở và một thẻ đóng với cấutrúc <tag></tag>

3

2 Giới thiệu về CSS

2.1 CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sửdụng để tìm kiếm và định dạng lại các phần tử được tạo bởi các ngôn ngữ đánh dấu(HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thểhiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên trang web nhưviệc tạo ra các đoạn văn bản, tiêu đề, bảng,… thì CSS sẽ giúp chúng ta có thể thêmphong cách vào các phần tử HTML như đổi cục bộ, đổi màu sắc trang, đổi màu chữ,đổi chữ, đổi cấu trúc…

2.2 CSS hoạt động như thế nào?

Phương thức hoạt động của CSS là nó sẽ tìm kiếm dựa trên các vùng lựa chọn,vùng lựa chọn có thể là tên một thẻ HTML, tên một ID, lớp hoặc nhiều kiểu khác Sau

đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ đánh dấu(nền tảng của trang web) và CSS định hình phong cách (tất cả những gì tạo ra nên giaodiện trang web), chúng không thể tách rời

3 Giới thiệu về Javascript

3.1 Javascript là gì?

JavaScript là ngôn ngữ lập trình biến phổ biến được sử dụng để tạo ra các trangweb tương tác Được tích hợp và nhúng vào HTML giúp trang web trở nên sống độnghơn JavaScript đóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang webđộng

3.2 Lịch sử phát triển của Javascript

JavaScript được phát triển bởi Brendan Eich tại hãng truyền thông Netscapevới tên đầu tiên là Mocha Sau đó, đổi tên thành LiveScript và cuối cùng là JavaSriptđược sử dụng phổ biến cho đến thời điểm hiện tại

Phiên bản mới nhất của JavaScript là ECMAScript (là phiên bản chuẩn hóa củaJavaScript) Với ECMAScript 2 phát hành năm 1998 và ECMAScript 3 ra mắt năm

1999 và hoạt động mạnh mẽ trên mọi trình duyệt và các thiết bị khác nhau

Năm 2016, JavaScript đạt kỷ lục với 92% trang web sử dụng và được đánh giácao từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên các bộ công

cụ lập trình web của các thành viên Nếu bạn sử dụng internet khi truy cập vào cáctrang web, bạn có thể nhìn thấy các hiệu ứng trượt ảnh chuyển động, menu sổ xuống,

… đều được tạo nên từ JavaScript

3.3 Một số khái niệm liên quan

 Javascript framework là gì?

JavaScript Framework là thư viện được xây dựng dựa trên ngôn ngữ lập trìnhJavaScript Từ đó, mỗi framework được tạo ra để phục vụ cho từng lĩnh vực khác

4

nhau Bạn có thể tìm hiểu kỹ hơn về framework là gì, sẽ giúp bạn có thêm nhiều thôngtin rõ ràng hơn Hiện nay, có rất nhiều JavaScript Framework thông tin ứng dụng như:

 Reactjs: Thư viện dùng cho ứng dụng mobile

 Node.js: Sử dụng để xây dựng và phát triển ứng dụng thời gian thực từphía máy chủ

 Angular: Sử dụng để xây dựng ứng dụng Single Page…

4 Giới thiệu về PHP

4.1 PHP là gì?

Ngôn ngữ PHP là từ viết tắt của Personal Home Page (hiện nay là HypertextPreprocessor) Thuật ngữ này chỉ chuỗi ngôn ngữ kịch bản hay mã lệnh, phù hợp đểphát triển cho các ứng dụng nằm trên máy chủ

Khi viết phần mềm bằng ngôn ngữ PHP, chuỗi lệnh sẽ được xử lý trên server để

từ đó sinh ra mã HTML trên client Và dựa vào đó, các ứng dụng trên website của bạn

sẽ hoạt động một cách dễ dàng

Người ta thường sử dụng PHP trong quá trình xây dựng và phát triển các trangweb ứng dụng chạy trên máy chủ Mã lệnh PHP có thể nhúng vào trang HTML bằngcách sử dụng cặp thẻ PHP

4.2 Ưu nhược điểm của PHP

 Ưu điểm:

 Sử dụng mã nguồn mở: Việc cài đặt cũng như sử dụng ngôn ngữ lậptrình PHP rất dễ dàng và hoàn toàn miễn phí dành cho tất cả mọi người Vìvậy nên ngôn ngữ này luôn được cài đặt rất nhiều trên các Web Server như:IIS, Apache, Nginx

 Có tính cộng đồng cao: Do PHP là mã nguồn mở, lại dễ sử dụng nênngôn ngữ này được ưa chuộng từ cộng đồng các lập trình viên Cộng đồngngôn ngữ này rất rộng rãi và đảm bảo được tính chất lượng Đã có không ítdiễn đàn, Blog, website trong và ngoài nước giải thích về ngôn ngữ này nênkhả năng tiếp cận của mọi người sẽ dễ dàng và nhanh chóng hơn

 Hệ thống thư viện phong phú: Do lượng người dùng nhiều nên thư việncủa ngôn ngữ PHP ngày càng được phát triển và mở rộng Với thư viện Codehay hàm phong phú sẽ giúp cho việc học tập hoặc viết các ứng dụng PHP trởnên dễ dàng và nhanh chóng Do đó, đây chính là đặc điểm làm cho ngôn ngữnày trở nên nổi bật Ngôn ngữ PHP có thể kết hợp với những cơ sở dữ liệu lớnhơn như: Oracle, MySQL, Cassandra

 Hệ thống thư viện phong phú: Do lượng người dùng nhiều nên thư việncủa ngôn ngữ PHP ngày càng được phát triển và mở rộng Với thư viện Codehay hàm phong phú sẽ giúp cho việc học tập hoặc viết các ứng dụng PHP trởnên dễ dàng và nhanh chóng Do đó, đây chính là đặc điểm làm cho ngôn ngữnày trở nên nổi bật Ngôn ngữ PHP có thể kết hợp với những cơ sở dữ liệu lớnhơn như: Oracle, MySQL, Cassandra

 Nhược điểm: Cấu trúc ngữ pháp chính là vấn đề mà một người dùng tiếp xúc vớingôn ngữ này PHP không được đẹp mắt và gọn gàng như các loại ngôn ngữ lậptrình khác và chỉ hoạt động được trên các ứng dụng web

5

4.3 Laravel framework

Laravel là một PHP framework mã nguồn mở và miễn phí, được phát triển bởiTaylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếmtrúc model-view-controller (MVC) Framework là “bộ khung” cung cấp đa số các kiểumẫu thiết kế phù hợp với ứng dụng bạn sắp thực hiện, các thư viện, API, trình biêndịch Framework được cấu thành từ các đoạn code.MVC (Model-View-Controller) là

mô hình phân bố source code thành 3 phần Mỗi thành phần có một nhiệm vụ riêngbiệt và độc lập với các thành phần khác Cụ thể là:

 Model: Đây là nơi chứa những nghiệp vụ tương tác với dữ liệu hoặc hệ quản trị

cơ sở dữ liệu (mysql, mssql…) Thành phần Model bao gồm các class/function

xử lý nhiều nghiệp vụ như kết nối database, truy vấn dữ liệu, thêm – xóa – sửa

dữ liệu, …

 View: Đây là nơi chứa những giao diện như nút bấm, khung nhập, menu, hìnhảnh, … Thành phần View sẽ đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúpngười dùng tương tác với hệ thống

 Controller: Đây là nơi tiếp nhận những yêu cầu xử lý được gửi từ người dùng.Thành phần Controller sẽ gồm những class/ function xử lý nhiều nghiệp vụlogic giúp lấy đúng dữ liệu thông tin cần thiết và hiển thị dữ liệu đó ra chongười dùng qua lớp View…

Alison.com, Barchart.com, … và nhiều trang web lớn trên thế giới đã được phát triển trên nền tảng Laravel Tại Việt Nam, Laravel được sử dụng phổ biến với cộng đồng rộng lớn chiếm tỷ lệ hơn 70% người dùng

4.4 Các thành phần cơ bản trong Laravel project

4.4.1 Route

- Khái niệm: Route trong Larvel cũng như các framework khác đều có chức

năng là định ra các dạng request (hiểu nôm na là url) định sẵn và cũng có các action(hành động) do chúng ta định nghĩa cho nó

- Các loại route trong Laravel: Laravel là một framework hỗ trợ rất đa dạng vềroute, và cũng rất dễ sử dụng Nó gồm có các loại:

 Route::get nhận request với phương thức GET

 Route::post nhận request với phương thức POST

 Route::put nhận request với phương thức PUT.

 Route::delete nhận request với phương thức DELETE

 Route::match kết hợp nhiều phương phức POST, GET, PUT,

 Route::any nhận tất cả các phương thức

 Route::group tạo ra các nhóm route

 Route::controller gọi đến controller tương ứng mà ta tự định

 Route::resource sử dụng với resource controller.

4.4.2 View

- Khái niệm Các view trong Laravel được lưu trữ trong thư mục:

resources/views Có thể tạo thêm các thư mục trong thư mục resources/views để phâncấp quản lý Các view có thể chứa mã HTML, CSS, Javascript phục vụ cho hiển thịnội dung cho người dùng

6

- Tạo View trong Laravel View trong Laravel không tạo được bằng câu lệnh:

php artisan mà chỉ đơn giản là tạo một file mới trong các thư mục con của

resources/views với cấu trúc tên file như sau: tên-view.blade.php

4.4.3 Controller

 Thực hiện điều hướng giữa Model và View sau khi nhận request từ trình duyệtweb

 Để tạo mới một Controller ta sử dụng câu lệnh:

php artisan make:controller MyController

 Sau khi thực hiện, nó sẽ tạo ra một file MyController.php trong thư mụcapp/Http/Controllers Khi một yêu cầu gửi đến hệ thống Laravel sẽ tìm trongroute và route sẽ gọi đến một hàm trong một Controller theo cú pháp như sau:

Route::get('base URI','controller@method');

 Khi làm việc với Route::resource thì controller laravel hỗ trợ 8 action: index,create, store, show, edit, update, destroy nhưng trong controller không nhất thiếtphải tạo đủ 8 action này

7