Ionic framwork, xây dựng website bán hàng nội thất

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

ĐẠ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ý

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
Đà Nẵng, tháng 6/2019

MỤC LỤC

DANH MỤC HÌNH ẢNH

DANH MỤC BẢNG
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

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

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

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

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

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

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

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

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

7


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

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
+ Dễ dàng thiết kế giao diện cho các thiết bị có kích cỡ khác nhau
+ 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-to-Refresh,

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

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

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
•

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

11


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

12

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

13


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
+ Số lượng sản phẩm tồn
1. Sơ đồ Usecase
+
+
+

+
+

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

14


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

Hình 3. 1 Sơ đồ ERD
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:
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

15


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

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

16


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

CHƯƠNG III
THIẾT KẾ HỆ THỐNG
1. Thiết kế cơ sở dữ liệu
1.1

Bảng Users (tài khoản)
STT
1
2

Thuộc tính
id
username

3
4
5

password

role
person_id

Giải thích
Mã
Tên tài
khoản
Mật khẩu
Vai trò
Mã người
dùng

Kiểu dữ liệu
int(10)
varchar(50)
text
int(10)
int(7)

Ghi chú
Khóa chính

Khóa ngoại

Bảng 4. 1 Bảng User(tài khoản)

1.2 Bảng Employees(Nhân viên)
STT
1
2

3
4
5
6
7

Thuộc tính
Id
Name
Birthday
Sex
Address
phonenumber
Email

Giải thích
Mã
Họ và tên
Ngày sinh
Giới tính
Địa chỉ
Số điện
thoại
Email

Kiểu dữ liệu
int(5)
varchar(50)
date
varchar(5)

varchar(50)
varchar(20)

Ghi chú
Khóa chính

varchar(30)

Bảng 4. 2 Bảng Employees ( nhân viên )

1.3 Bảng Customers(Bảng khách hàng)
STT
1
2

Thuộc tính
Id
Name

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

17

Giải thích
Mã
Họ và tên

Kiểu dữ liệu
int(5)

varchar(50)

Ghi chú
Khóa chính


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

Birthday
Sex
Address
phonenumber

7

Email

Ngày sinh
Giới tính
Địa chỉ
Số điện
thoại
Email

date

varchar(5)
varchar(50)
varchar(20)
varchar(30)

Bảng 4. 3 Bảng Customers (khách hàng)

1.4 Bảng administrators (Admin)
STT
1
2
3
4

Thuộc tính
Id
Name
Phonenumber
email

Giải thích
Mã
Họ và tên
Số điện
thoại
Email

Kiểu dữ liệu
int(5)
varchar(50)

varchar(20)

Ghi chú
Khóa chính

varchar(50)

Bảng 4. 4 Bảng Administrator

1.5 Bảng suppliers (Nhà cung cấp)
STT
1
2
3
4
5

Thuộc tính
Id
Name
Phonenumber
email
address

Giải thích
Mã
Họ và tên
Số điện
thoại
Email

Địa chỉ

Kiểu dữ liệu
int(5)
varchar(50)
varchar(20)

Ghi chú
Khóa chính

varchar(50)
varchar(100)

Bảng 4. 5 Bảng Suppliers (nhà cung cấp)

1.6 Bảng Categories(Loại sản phảm)
STT
1
2

Thuộc tính
ID
name

Giải thích
Mã
Tên Loại

Kiểu dữ liệu
Int(5)

Varchar(20)

Ghi chú
Khóa chính

Bảng 4. 6 Bảng Categories ( Loại sản phẩm)

1.7 Bảng products(Sản Phẩm)
STT
1
2
3

Thuộc tính
ID
Name
Cate_id

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

18

Giải thích
Mã
Tên SP
Mã loại

Kiểu dữ liệu
int(7)

varchar(100)
int(5)

Ghi chú
Khóa chính
Khóa ngoại


BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH
GVHD: Th.S Trần Bửu Dung
4
5
6
7
8
9
10

Price
Color
Image
Size
Amount
Supp_id
Content

Giá
Màu sắc
Hình ảnh
Kích thước

Số lượng
Mã NCC
Chú thích

double
varchar(30)
varchar(200)
varchar(50)
int(5)
int(5)
text

Khóa ngoại

Bảng 4. 7 Bảng Products (sản phẩm)

1.8 Bảng orders (Đơn hàng)
STT
1
2

Thuộc tính
ID
Cus_id

3

Emp_id

4

5
6
7
8
9

Date_set
Date_founded
Dalivery_date
address
Total_money
status

Giải thích
Mã
Mã Khách
hàng
Mã Nhân
viên
Ngày đặt
Ngày lập
Ngày giao
Địa chỉ giao
Thành tiền
Trạng thái

Kiểu dữ liệu
Int(5)
Int(5)

Ghi chú
Khóa chính
Khóa ngoại

Int(5)

Khóa ngoại

date
date
date
Varchar(100)
double
Varchar(50)

Bảng 4. 8 Bảng Order ( đơn hàng)

1.9 Bảng orders_detail (chi tiết đơn hàng)
STT
1
2
3

Thuộc tính
id
Order_id
Prod_id

4
5

6

amount
price
Into_money

Giải thích
Mã
Mã đơn hàng
Mã sản
phẩm
Số lượng
Giá
Thành tiền

Kiểu dữ liệu
Int(7)
Int(5)
Int(5)

Ghi chú
Khóa chính
Khóa ngoại
Khóa ngoại

Int(11)
double
double

Bảng 4. 9 Bảng Order_detail ( chi tiết đơn hàng)

1.10 Bảng Bill (phiếu nhập)
STT
1

Thuộc tính

Giải thích

ID

Mã

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

19

Kiểu dữ
liệu
Int(5)

Ghi chú
Khóa chính


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

Supp_id
Emp_id

4
5

Date_added
Total_money

Mã NCC
Mã Nhân
viên
Ngày đặt
Ngày lập

Int(5)
Int(5)

Khóa ngoại
Khóa ngoại

date
date

Bảng 4. 10 Bảng Bills ( Phiếu nhập)

1.11 Bảng bill_detail(chi tiết phiếu nhập)
STT
1

2
3

Thuộc tính
id
Bill_id
Prod_id

4
5
6

price
amount
Into_money

Giải thích
Mã
Mã đơn hàng
Mã sản
phẩm
Giá
Số lượng
Thành tiền

Kiểu dữ liệu
Int(7)
Int(5)
Int(5)
double

Int(11)
double

Bảng 4. 11 Bảng Bill_detail( chi tiết phiếu nhập)

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

20

Ghi chú
Khóa chính
Khóa ngoại
Khóa ngoại


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

2. Sơ đồ ERD

Hình 4. 1 Sơ đồ ERD

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

21


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

22


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

3. Sơ đồ Relationship

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

23


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

Hình 4. 2 Sơ đồ relationship

CHƯƠNG IV
TRIỂN KHAI HỆ THỐNG
1. Giao diện trang admin
1.1 Trang chủ

Hình 5.

1.2

Hình 5.
Sinh viên thực hiện: Lê Quyết Toàn
MSV: 161250543133

24

1 Trang chủ

Đăng nhập

2 Đăng nhập


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

1.3 Quản lý các bảng
a.
Tài khoản

Hình 5. 3 Users (tài khoản)
b. Khách hàng

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

25