ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

ĐỒ ÁN CHUYÊN NGHÀNH
NGHIÊN CỨU IONIC FRAMEWORK
XÂY DỰNG WEBSITE BÁN HÀNG NỘI THẤT

Giảng viên hướng dẫn :

Th.S Trần Bửu Dung

Sinh viên thực hiện

:

Lê Quyết Toàn

Mã sinh viên

:

161250543133

Khoa

:

Điện – Điện tử

Ngành

:

Hệ Thống Thông Tin Quản Lý

Đà Nẵng, tháng 6/2019

MỤC LỤC
DANH MỤC HÌNH ẢNH
DANH MỤC BẢNG
LỜI CẢM ƠN
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
LỜI CAM ĐOAN
TỔNG QUAN ĐỀ TÀI.................................................................................................1
1.

Lý do chọn đề tài................................................................................................1

2.

Công nghệ sử dụng.............................................................................................1

CHƯƠNG I................................................................................................................... 2
CƠ SỞ LÝ THUYẾT....................................................................................................2
1.

2.

Giới thiệu về Ionic framwork.............................................................................2
1.1.

Giới thiệu......................................................................................................2

1.2.

Ưu điểm và nhược điểm...............................................................................2

1.3.

Thành phần trong Ionic framwork:...............................................................3

Giới thiệu về Angular.........................................................................................4
2.1.

Giới thiệu......................................................................................................4

2.2.

Ưu điểm và nhược điểm...............................................................................4

2.3.

Thành phần trong Angular............................................................................4

CHƯƠNG II.................................................................................................................7
ĐẶC TẢ CHỨC NĂNG HỆ THỐNG..........................................................................7
1.

Các tác nhân hệ thống........................................................................................7

2.

Sơ đồ Usecase....................................................................................................7

3.

Đặc tả usecase....................................................................................................8

CHƯƠNG III..............................................................................................................10
THIẾT KẾ HỆ THỐNG..............................................................................................10
1.

Thiết kế cơ sở dữ liệu.......................................................................................10
2. Sơ đồ ERD.....................................................................................................14
3. Sơ đồ Relationship...........................................................................................15

CHƯƠNG IV..............................................................................................................16
TRIỂN KHAI HỆ THỐNG.........................................................................................16

1.

Giao diện trang admin......................................................................................16
1.1

Trang chủ...................................................................................................16

1.2

Đăng nhập..................................................................................................16

1.3

Quản lý các bảng........................................................................................17

a.

Tài khoản.......................................................................................................17

b. Khách hàng....................................................................................................17
c.

Nhân viên.......................................................................................................18

d. Sản phẩm.......................................................................................................18
e.

Loại sản phẩm................................................................................................19

f.

Đơn hàng.......................................................................................................19

g. Phiếu nhập.....................................................................................................20
h. Nhà cung cấp.................................................................................................20
2.

Giao diện ứng dụng..........................................................................................21
2.1

Màn hình giới thiệu (splash screen)............................................................21

2.2

Trang chủ...................................................................................................21

2.3

Đăng ký......................................................................................................22

2.4

Đăng nhập..................................................................................................22

2.5

Sản phẩm....................................................................................................23

2.6

Giỏ hàng.....................................................................................................23

DANH MỤC HÌNH
Hình 2. 1 Mô Hình MVC................................................................................................................................. 6
YHình 3. 1 Sơ đồ ERD.........................................................................................................................................7Y
Hình 4. 1 Sơ đồ ERD............................................................................................................................................14

Hình 4. 2 Sơ đồ relationship

1

Hình 5. 1 Trang chủ.............................................................................................................................................16
Hình 5. 2 Đăng nhập............................................................................................................................................16
Hình 5. 3 Users (tài khoản)..................................................................................................................................17
Hình 5. 4 Customer (Khách hàng)......................................................................................................................17
Hình 5. 5 Employees (nhân viên)........................................................................................................................18
Hình 5. 6 Products (sản phẩm)............................................................................................................................18
Hình 5. 7 Categories ( Loại sản phẩm)...............................................................................................................19
Hình 5. 8 Order ( đơn hàng)................................................................................................................................19
Hình 5. 9 Bills (phiếu nhập).................................................................................................................................20
Hình 5. 10 Suppliers (nhà cung cấp)...................................................................................................................20
Hình 5. 11 Màn hình giới thiệu...........................................................................................................................21
Hình 5. 12 trang chủ.............................................................................................................................................21
Hình 5. 13 Đăng ký...............................................................................................................................................22
Hình 5. 14 Đăng nhập..........................................................................................................................................22
Hình 5. 15 Trang sản phẩm.................................................................................................................................23
Hình 5. 16 Giỏ hàng.............................................................................................................................................23

DANH MỤC BẢNG
Bảng 4. 1 Bảng User(tài khoản)..........................................................................................................................10
Bảng 4. 2 Bảng Employees ( nhân viên )............................................................................................................10
Bảng 4. 3 Bảng Customers (khách hàng)...........................................................................................................11
Bảng 4. 4 Bảng Administrator............................................................................................................................11
Bảng 4. 5 Bảng Suppliers (nhà cung cấp)..........................................................................................................11
Bảng 4. 6 Bảng Categories ( Loại sản phẩm).....................................................................................................12
Bảng 4. 7 Bảng Products (sản phẩm).................................................................................................................12
Bảng 4. 8 Bảng Order ( đơn hàng)......................................................................................................................12
Bảng 4. 9 Bảng Order_detail ( chi tiết đơn hàng).............................................................................................13
Bảng 4. 10 Bảng Bills ( Phiếu nhập)...................................................................................................................13
Bảng 4. 11 Bảng Bill_detail( chi tiết phiếu nhập)..............................................................................................13

LỜI CẢM ƠN
Em xin gửi lời cám ơn chân thành và sâu sắc tới cô Trần Bửu Dung đã hướng
dẫn, giúp đỡ em trong suốt thời gian thực hiện đề tài.
Em xin chân thành cám ơn thầy cô bộ môn đã tận tình giảng dạy, truyền đạt kiến
thức cho em trong các kỳ học vừa qua.
Xin chân thành cám ơn tất cả bạn bè đã động viên, giúp đỡ em trong thời gian
học tập và hoàn thành đồ án.
Mặc dù đã cố gắng nhiều nhưng sẽ không thể tránh khỏi những thiếu sót. Em
kính mong nhận được sự góp ý của quý Thầy Cô và các bạn để hoàn thnah tốt hơn.

Đà nẵng, tháng 6 năm 2019
Sinh viên thực hiện

Lê Quyết Toàn

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

Đà Nẵng, tháng 6 ngày 2019
Giáo viên hướng dẫn

LỜI CAM ĐOAN
Tôi xin cam đoan
1. Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn của cô
Trần Bửu Dung.
2. Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên công
trình, thời gian, địa điểm công bố.
3. Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin chịu
hoàn toàn trách nhiệm.

Sinh viên
Lê Quyết Toàn

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

TỔNG QUAN ĐỀ TÀI
1. Lý do chọn đề tài
Với sự phát triển của điện thoại và nhu cầu sử dụng ngày càng tăng, để thuận
tiện cho việc quảng bá thương hiệu sản phẩm cũng như tiếp cận khách hàng rộng
rãi hơn thì cửa hàng cần có app chạy trên nhiều nền tảng như iOS, Android, máy
tính…mà Ionic framwork có thể đáp ứng được những yêu cầu đó, chính vì vậy,
em đã chọn đề tài “NGHIÊN CỨU IONIC FRAMWORK XÂY DỰNG ỨNG
DỤNG BÁN HÀNG NỘI THẤT TRÊN ĐIỆN THOẠI DI ĐỘNG”
2. Công nghệ sử dụng
- Xây dựng web service bằng PHP, JavaScript, CSS, HTML
- Công nghệ :
+ Ionic framwork có tích hợp Angular
+ CSS
+ HTML
+ JavaScript
+ Hệ quản trị sơ sở dữ liệu: MySQL

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

1

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

CHƯƠNG I
CƠ SỞ LÝ THUYẾT
1. Giới thiệu về Ionic framwork
1.1.Giới thiệu
Ionic là một framework dùng để phát triển một ứng dụng Hybrid cho mobile.
Hybrid có thể được hiểu là con lai giữa ứng dụng native và web mobile. Bản chất của
hybrid là một giao diện được viết bởi html, css, javascript nhưng nó cho phép gọi các
api native của hệ thống nên có thể thao tác với hệ điều hành của mobile như các ứng
dụng native khác. Ionic được phát triển dựa trên nền của Apache Cordova(trước kia
còn gọi là phonegap) và dùng angular1, angular2 để làm core của hệ thống. Các tính
năng của Cordova
Command Line Interface (Cordova CLI): đây là một tool dùng để khởi tạo một
project , xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiều
plugin có ích để giúp việc phát triển dễ dàng hơn.
Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứng
dụng di động cần đến.
Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị
di động như cảm biến, camera, GPS…
1.2. Ưu điểm và nhược điểm
- Ưu điểm:
+Dễ học, thời gian phát triển nhanh, có thể sử dụng các kỹ năng từ lập trình web
+Đa nền tảng
+Khả năng truy cập đến các tính năng của thiết bị và hệ điều hành như bluetooth,
camera,..
+Dễ dàng thiết kế giao diện cho các thiết bị có kích cỡ khác nhau

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

2

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

+Việc sử dụng AngularJS làm core giúp phần xử lý UI linh động hơn so với
javasript hay thư viện Jquery.
+Việc sử dụng AngularJS làm core cũng mang lại lợi thế lớn so với các
framework cho ứng dụng hybrid khác.
+Ionic cung cấp đầy đủ các thành phần trong giao diện người dùng như Pull-toRefresh, Infinite-loader, tabs, …
- Nhược điểm:
+Vẫn còn trong giai đoạn phát triển
+Một số API cũng chưa được hỗ trợ để giao tiếp với các thiết bị
+Hiệu năng vẫn chưa cao và ổn định
+Cộng đồng phát triển ứng dụng vẫn còn chưa đông
1.3. Thành phần trong Ionic framwork:
- Slides
Nếu bạn muốn ứng dụng của bạn có một hướng dẫn cho người dùng lần đầu,
thì thành phần Slides giúp dễ dàng tạo ra một hướng dẫn như vậy. Thành phần này cho
phép bạn tạo ra các layout dựa trên trang mà người dùng có thể vuốt qua để đọc tất cả
về ứng dụng của bạn.
- Action Sheet
Các Action Sheet là các menu trượt lên từ phía dưới màn hình. Một Action
Sheet được thể hiện trên lớp trên cùng của màn hình, do đó bạn hoặc là phải bỏ qua nó
bằng cách bấm vào khoảng trống hoặc chọn một tùy chọn từ menu. Điều này thường
được sử dụng cho các xác nhận chẳng hạn như khi bạn xoá bỏ một tập tin trên thiết bị
iOS của bạn.
- Segments
Segments giống như các tab. Chúng được sử dụng để nhóm các nội dung liên
quan lại với nhau theo một cách mà người dùng chỉ có thể nhìn thấy các nội dung của
segment (phân đoạn) hiện đang được chọn. Segments thường được sử dụng với danh
sách để lọc các phần tử liên quan.
- Toast
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

3

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

Toast là biến thể nhẹ của cảnh báo. Chúng thường được sử dụng để thông báo
cho người dùng một cái gì đó đã xảy ra mà không yêu cầu bất kỳ hành động nào từ
người dùng. Chúng thường được hiển thị ở đầu hoặc cuối trang để không làm ảnh
hưởng đến nội dung đang được hiển thị. Chúng cũng biến mất sau một số giây cụ thể.
2. Giới thiệu về Angular
2.1.Giới thiệu
- Angular là một nền tảng và khung để xây dựng các ứng dụng khách trong
HTML và TypeScript. Angular được viết bằng TypeScript. Nó thực hiện chức năng
cốt lõi và tùy chọn như một tập hợp các thư viện TypeScript mà bạn nhập vào ứng
dụng của mình.
- Các khối xây dựng cơ bản của ứng dụng Angular là NgModules , cung cấp bối
cảnh biên dịch cho các thành phần . NgModules thu thập mã liên quan vào các bộ chức
năng; một ứng dụng Angular được xác định bởi một bộ NgModules. Một ứng dụng
luôn có ít nhất một mô-đun gốc cho phép bootstrapping và thường có nhiều mô-đun
tính năng hơn
2.2. Ưu điểm và nhược điểm
- Ưu điểm:
 Cung cấp khả năng tạo ra các Single Page Aplication dễ dàng.
 Cung cấp khả năng kiên kết dữ liệu tới HTML, khiến cho người dùng cảm giác
linh hoạt, thân thiện.
 Dễ dàng viết Unit test.
 Dễ dàng tái sử dụng component.
 Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.
 Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile.
- Nhược điểm:
 Không an toàn : được phát triển từ javascript cho nên ứng dụng được viết bởi
AngularJS không an toàn. Nên có sự bảo mật và xác thực phía server sẽ giúp ứng dụng
trở nên an toàn hơn.
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

4

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

 Phu thuộc : Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ
nhìn thấy trang cơ bản.
2.3. Thành phần trong Angular
- Ng-app: Các ng-app chỉ thị AngularJS rằng đây là phần tử gốc của ứng dụng
AngularJS. Tất cả các ứng dụng AngularJS phải có phần tử gốc. Bạn chỉ có thể có một
ng-app chỉ thị trong tài liệu HTML của mình. Nếu có nhiều hơn một ng-app chỉ thị
xuất hiện, liên kết đầu tiên sẽ được sử dụng.
- Ng-model: Chỉ thị ng-model liên kết giá trị của các điều khiển HTML (đầu
vào, chọn, văn bản) với dữ liệu ứng dụng. Với ng-model, bạn có thể liên kết giá trị của
trường đầu vào với biến được tạo trong AngularJS.
- Ng-bind: Các ng-bind AngularJS để thay thế nội dung của một phần tử HTML
với giá trị của một biến, hoặc biểu hiện nhất định. Nếu giá trị của biến hoặc biểu thức
thay đổi thì nội dung của phần tử HTML được chỉ định cũng sẽ được thay đổi.
3. Giới thiệu mô hình MVC
3.1. MVC là gì?
MVC là viết tắt của Model – View – Controller. Là một kiến trúc phần mềm hay
mô hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nói cho dễ hiểu, nó 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êng biệt và
độc lập với các thành phần khác.
3.2. Các thành phần trong mô hình MVC
- 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… Chẳng hạn thành phần này sẽ nhận request từ url và form
để thao tác trực tiếp với Model.
- Model
Đây 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
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

5

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

đối tượng GUI như textbox, images… Hiểu một cách đơn giản, nó là tập hợp các form
hoặc các file HTML.

3.3. Luồng đi trong MVC

Hình 2. 1 Mô Hình MVC
Khi có một yêu cầu từ phía client gửi đến server, Bộ phận controller có nhiệm vụ
nhận yêu cầu, xử lý yêu cầu đó. Và nếu cần, nó sẽ gọi đến phần model, vốn là bộ phần
làm việc với Database..
Sau khi xử lý xong, toàn bộ kết quả được đẩy về phần View. Tại View, sẽ gen ra
mã Html tạo nên giao diện, và trả toàn bộ html về trình duyệt để hiển thị.
3.4. Ưu điểm và nhược điểm

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

6

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

- Ưu điểm: Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế. Do
được chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản,
dễ nâng cấp, bảo trì..
- Nhược điểm: Đối với dự án nhỏ việc áp dụng mô hình MC gây cồng kềnh, tốn
thời gian trong quá trình phát triển. Tốn thời gian trung chuyển dữ liệu của các thành
phần.
3.5.

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

7

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

CHƯƠNG II
ĐẶC TẢ CHỨC NĂNG HỆ THỐNG
1. Các tác nhân hệ thống
-

Người dùng chung
+ Đăng ký
+ Tìm kiếm sản phẩm
+ Xem sản phẩm
+ Đặt hàng
+ Hủy đơn hàng

- Người dùng thành viên
+ Đăng nhập
+ Cập nhật thông tin cá nhân
+ Xem tình trạng đơn hàng
- Quản trị viên
+ Đăng nhập
+ Cập nhật sản phẩm
+ Cập nhật danh mục sản phẩm
+ Xử lý đơn hàng
+ Phân quyền
- Nhân viên bán hàng
+ Đăng nhập
+ Xem thông tin đơn hàng
+ Tìm kiếm
+ Xử lý đơn hàng
- Nhân viên kho
+ Cập nhật phiếu nhập
+ Tìm kiếm đơn hàng
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

8

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

+ Số lượng sản phẩm tồn

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

9

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

10

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

1. Sơ đồ Usecase

Hình 3. 1 Sơ đồ ERD
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

7

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

2. Đặc tả usecase
- Usecase đăng ký thành viên
- Tóm tắt: Khách hàng viếng thăm sử dụng usecase “Đăng ký” để tạo tài khoản
cho mình trên website.
- Actor: Khách hàng viếng thăm
- Các bước thực hiện:
 B1. Trên giao diện đăng nhập, hhách hàng viếng thăm chọn Đăng ký.
 B2. Hệ thống sẽ hiển thị giao diện đăng ký và khách hàng viếng thăm nhập
thông tin vào giao diện rồi bấm đăng ký để lưu vào cơ sở dữ liệu.
 B3. Kết thúc Usecase .
- Usecase quản lý đăng nhập
- Đối tượng sử dụng (actor) bao gồm: khách hàng thành viên, nhân viên, admin
- Use case này mô tả các bước đăng nhập của các actor vào hệ thống.
- Các bước thực hiện:
 B1. Hệ thống yêu cầu actor cung cấp thông tin đăng nhập gồm tên đăng nhập và
mật khẩu.
 B2. Actor nhập xong thông tin đăng nhập và click nút đăng nhập.
 B3. Hệ thống check lại thông tin đăng nhập và thông báo thành công/thất bại
cho actor. Nếu đăng nhập thành công hệ thống dựa trên thông tin đăng nhập sẽ đồng
thời phân quyền tùy theo loại vai trò. Nếu đăng nhập thất bại, hệ thống sẽ hiện thông
báo cho người dùng và yêu cầu đăng nhập lại.
- Đặt hàng
- Tóm tắt: Khách hàng thành viên sử dụng usecase “Đặt mua” để tham gia mua
hàng trực tuyến.
- Actor: Khách hàng thành viên
- Các dòng sự kiện chính
 B1. Trên giao diện sản phẩm , Khách hàng thành viên chọn Đặt mua .

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

8

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung

 B2. Hệ thống sẽ hiển thị giao diện chứa thông tin khách hàng và danh sách các
sản phẩm khách hàng đặt mua. Sau khi nhập đầy đủ thông tin thì khách hàng xác nhận
đặt mua.
 B3. Kết thúc Usecase .
 Các dòng sự kiện khác: Nếu Khách hàng thành viên không muốn đặt mua thì
chọn thoát
- Các yêu cầu đặc biệt: Để thực hiện được usecase này yêu cầu khách hàng thành
viên phải thực hiện đăng nhập vào hệ thống
- Trạng thái hệ thống khi bắt đầu thực hiện Usecase: Trong giỏ hàng của khách
hàng phải có tối thiểu 1 sản phẩm
- Usecase Tìm kiếm sản phẩm
- Actor: Khách hàng, nhân viên, admin
 Tại trang sản phẩm, nhập từ khóa cần tìm tại seach, hệ thống sẽ hiển thị tất cả
sản phẩm trùng với từ khóa cần tìm.
- Usecase Xem đơn hàng
- Actor: nhân viên
 Tại trang quản lý đơn hàng, bấm chọn đơn hàng cần xem hoặc nhập từ khóa cần
tìm của đơn hàng, rồi chọn đơn hàng cần xem

Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

9


Xemtailieu.com không chịu trách nhiệm liên quan đến các vấn đề bản quyền tài liệu được thành viên tự nguyện đăng tải lên.