ĐẶC TẢ LUẬN VĂN CNTT WEB ECOMMERCE

Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

NHẬN XÉT
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

Bộ môn CNTT, Khoa CNTT & TT

Trang 1


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

Bộ môn CNTT, Khoa CNTT & TT

Trang 2


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

MỤC LỤC
NHẬN XÉT ................................................................................................................1
MỤC LỤC ...................................................................................................................3
BẢNG CHÚ THÍCH ...................................................................................................9
TĨM TẮT .................................................................................................................10
ABSTRACT ..............................................................................................................11
LỜI CẢM ƠN ...........................................................................................................12
CHƯƠNG I: TỔNG QUAN .....................................................................................13
I.1.

ĐẶT VẤN ĐỀ .............................................................................................13

I.2.

LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ .............................................................13

I.3.

MỤC TIÊU CẦN ĐẠT ...............................................................................13

I.4.

PHẠM VI VÀ YÊU CẦU CỦA ĐỀ TÀI ...................................................13

I.5.

HƯỚNG GIẢI QUYẾT VẤN ĐỀ ĐẶT RA ...............................................14

I.6.

BỐ CỤC LUẬN VĂN .................................................................................15

CHƯƠNG II: CƠ SỞ LÝ THUYẾT.........................................................................16
II.1. MƠ HÌNH ỨNG DỤNG WEB ...................................................................16
II.2. NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN(HTML5) ............................17
II.2.1. Cấu trúc HTML5 ..................................................................................17
II.2.2. Định dạng trang (page structure) ..........................................................18
II.2.3. Form ......................................................................................................19
II.2.4. Input ......................................................................................................21
II.2.5.

Âm thanh(audio) và video ...................................................................22

II.3. KỸ THUẬT ĐỊNH DẠNG HIỂN THỊ TRANG WEB ..............................24
II.3.1. CSS3 Color ...........................................................................................24
II.3.2. Góc bo trịn ...........................................................................................24
II.3.3. Đổ bóng.................................................................................................24
II.3.4. Transform..............................................................................................25
II.3.5. Transition ..............................................................................................26
II.3.6. Embedded fonts ....................................................................................28

II.4. MDL ............................................................................................................28
II.4.1. Grids......................................................................................................28

Bộ môn CNTT, Khoa CNTT & TT

Trang 3


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

II.4.2. Header Navigation ................................................................................29
II.4.3. Footer ....................................................................................................29
II.4.4. Buttons ..................................................................................................30
II.4.5. Tables ....................................................................................................31
II.4.6. Form ......................................................................................................31
II.4.7. Dropdown Menu ...................................................................................32
II.4.8. Tooltips .................................................................................................32
II.4.9. Icons ......................................................................................................33
II.4.10.

Cards ..................................................................................................33

II.4.11.

MENUS .............................................................................................34

II.5. PHP ..............................................................................................................34

II.4.1. Cú pháp cơ bản PHP .............................................................................35
II.4.2. Biến trong PHP .....................................................................................36
II.4.3. Hàm trong PHP ............................................................................................36
II.4.4. Phương thức POST và GET ........................................................................36
II.4.5. PHP session .................................................................................................36
II.4.6. Lập trình hướng đối tượng PHP ...........................................................37
CHƯƠNG III: NỘI DUNG VÀ KẾT QUẢ NGHIÊN CỨU ...................................38
PHẦN A:

ĐẶC TẢ YÊU CẦU PHẦN MỀM ...................................................38

IIIA.1. GIỚI THIỆU .........................................................................................38
IIIA.1.1. Mục tiêu .........................................................................................38
IIIA.1.2. Nhóm người đọc ............................................................................38
IIIA.1.3. Phạm vi sản phẩm ..........................................................................38
IIIA.2. MÔ TẢ TỔNG QUAN .........................................................................38
IIIA.2.1. Bối cảnh sản phẩm .........................................................................38
IIIA.2.2. Đặc điểm của người sử dụng .........................................................39
IIIA.2.3. Các ràng buộc về thực thi và thiết kế .............................................39
IIIA.2.4. Các giả định và phụ thuộc ..............................................................39
IIIA.3. CÁC YÊU CẦU GIAO TIẾP BÊN NGOÀI ........................................39
IIIA.3.1. Giao tiếp người sử dụng .................................................................39
IIIA.3.2. Giao tiếp phần cứng .......................................................................39

Bộ môn CNTT, Khoa CNTT & TT

Trang 4


Luận văn tốt nghiệp

GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

IIIA.3.3. Giao tiếp phần mềm .......................................................................39
IIIA.3.4. Giao tiếp truyền thông tin ..............................................................40
IIIA.4. CÁC CHỨC NĂNG CỦA HỆ THỐNG ..............................................40
IIIA.4.1. Đăng ký tài khoản ..........................................................................40
IIIA.4.2. Đăng nhập ......................................................................................41
IIIA.4.3. Tìm kiếm ........................................................................................41
IIIA.4.4. Sửa thơng tin tài khoản ..................................................................42
IIIA.4.5. Đặt hàng .........................................................................................42
IIIA.4.6. Bình luận ........................................................................................43
IIIA.4.7. Thêm hàng hóa ...............................................................................44
IIIA.4.8. Sửa thơng tin hàng hóa...................................................................45
IIIA.4.9. Xóa hàng hóa .................................................................................45
IIIA.4.10. Thêm nhân viên ..............................................................................46
IIIA.4.11. Sửa thơng tin nhân viên .................................................................47
IIIA.4.13. Thêm loại hàng...............................................................................48
IIIA.4.14. Sửa thông tin loại hàng ..................................................................49
IIIA.4.15. Xóa loại hàng .................................................................................50
IIIA.4.16. Thêm nhà cung cấp ........................................................................50
IIIA.4.17. Sửa thơng tin nhà cung cấp ............................................................51
IIIA.4.18. Xóa nhà cung cấp ...........................................................................52
IIIA.4.19. Lập hóa đơn....................................................................................52
IIIA.4.20. Lập phiếu nhập kho ........................................................................53
IIIA.4.21. Lập phiếu xuất kho .........................................................................54
IIIA.4.22. Thêm nhà khuyến mãi ....................................................................54
IIIA.4.23. Thống kê doanh thu........................................................................55
IIIA.4.24. Thống kê hàng tồn trong kho .........................................................55

IIIA.5. CÁC YÊU CẦU PHI CHỨC NĂNG ...................................................56
IIIA.5.1. Yêu cầu thực thi .............................................................................56
IIIA.5.2. Yêu cầu an toàn ..............................................................................56
IIIA.5.3. Yêu cầu bảo mật .............................................................................56
IIIA.5.4. Các đặc điểm chất lượng phần mềm ..............................................56

Bộ môn CNTT, Khoa CNTT & TT

Trang 5


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

IIIA.6. CÁC YÊU CẦU KHÁC .......................................................................57
PHẦN B:

THIẾT KẾ PHẦN MỀM ...................................................................57

IIIB.1. GIỚI THIỆU .........................................................................................57
IIIB.1.1. Mục đích ........................................................................................57
IIIB.1.2. Phạm vi ..........................................................................................57
IIIB.1.3. Tổng quan về tài liệu......................................................................58
IIIB.2. TỔNG QUAN HỆ THỐNG .................................................................58
IIIB.3. KIẾN TRÚC HỆ THỐNG ....................................................................58
IIIB.3.1. Mơ hình phân rã .............................................................................58
IIIB.3.2. Cơ sở thiết kế .................................................................................60
IIIB.4. THIẾT KẾ DỮ LIỆU ...........................................................................60

IIIB.4.1. Mô tả dữ liệu ..................................................................................61
IIIB.4.2. Từ điển dữ liệu và các bảng CSDL ................................................62
IIIB.5. THIẾT KẾ CHỨC NĂNG ....................................................................70
IIIB.5.1. Đăng ký tài khoản ..........................................................................70
IIIB.5.2. Đăng nhập ......................................................................................72
IIIB.5.3. Sửa thông tin tài khoản ..................................................................73
IIIB.5.4. Tìm kiếm ........................................................................................74
IIIB.5.5. Đặt hàng .........................................................................................76
IIIB.5.6. Bình luận ........................................................................................77
IIIB.5.7. Thêm hàng hóa ...............................................................................77
IIIB.5.8. Sửa thơng tin hàng hóa...................................................................79
IIIB.5.9. Xóa hàng hóa .................................................................................81
IIIB.5.10. Thêm nhân viên ..............................................................................82
IIIB.5.11. Sửa thơng tin nhân viên .................................................................84
IIIB.5.12. Xóa nhân viên ................................................................................86
IIIB.5.13. Thêm loại hàng...............................................................................86
IIIB.5.14. Sửa thơng tin loại hàng ..................................................................87
IIIB.5.15. Xóa loại hàng .................................................................................88
IIIB.5.16. Thêm nhà cung cấp ........................................................................89
IIIB.5.17. Sửa thông tin nhà cung cấp ............................................................90

Bộ môn CNTT, Khoa CNTT & TT

Trang 6


Luận văn tốt nghiệp
GVHD:
Chun ngành Cơng Nghệ Thơng Tin
_______________________________________________________________________________

IIIB.5.18. Xóa nhà cung cấp ...........................................................................91
IIIB.5.19. Lập hóa đơn....................................................................................92
IIIB.5.20. Lập phiếu nhập kho ........................................................................94
IIIB.5.21. Lập phiếu xuất kho .........................................................................95
IIIB.5.22. Thêm khuyến mãi...........................................................................96
IIIB.5.23. Thống kê doanh thu........................................................................97
PHẦN C:

CÁC TRƯỜNG HỢP KIỂM THỬ ...................................................97

IIIC.1. GIỚI THIỆU .........................................................................................97
IIIC.1.1. Mục tiêu .........................................................................................97
IIIC.1.2. Phạm vi ..........................................................................................97
IIIC.2. MÔI TRƯỜNG KIỂM THỬ ................................................................98
IIIC.3. CÁC TIỀN ĐIỀU KIỆN .......................................................................98
IIIC.4. CÁC TRƯỜNG HỢP KIỂM THỬ.......................................................98
IIIC.4.1. Đăng ký tài khoản ..........................................................................98
IIIC.4.2. Đăng nhập ......................................................................................99
IIIC.4.3. Sửa thơng tin tài khoản ................................................................100
IIIC.4.4. Tìm kiếm ......................................................................................101
IIIC.4.5. Đặt hàng .......................................................................................101
IIIC.4.6. Bình luận ......................................................................................103
IIIC.4.7. Thêm hàng hóa .............................................................................103
IIIC.4.8. Sửa thơng tin hàng hóa.................................................................104
IIIC.4.9. Xóa thơng tin hàng hóa ................................................................105
IIIC.4.10. Thêm nhân viên ............................................................................105
IIIC.4.11. Sửa thơng tin nhân viên ...............................................................106
IIIC.4.12. Xóa nhân viên ..............................................................................107
IIIC.4.13. Thêm loại hàng.............................................................................108

IIIC.4.14. Sửa thơng tin loại hàng ................................................................108
IIIC.4.15. Xóa loại hàng ...............................................................................109
IIIC.4.16. Thêm nhà cung cấp ......................................................................110
IIIC.4.17. Sửa thông tin nhà cung cấp ..........................................................111
IIIC.4.18. Xáo nhà cung cấp .........................................................................111

Bộ môn CNTT, Khoa CNTT & TT

Trang 7


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

IIIC.4.19. Lập hóa đơn..................................................................................112
IIIC.4.20. Lập phiếu nhập kho ......................................................................112
IIIC.4.21. Lập phiếu xuất kho .......................................................................113
IIIC.4.22. Thêm khuyến mãi.........................................................................113
IIIC.4.23. Cập nhật khuyến mãi....................................................................114
IIIC.4.24. Thống kê doanh thu......................................................................114
CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .....................................115
IV.1. KẾT QUẢ ĐẠT ĐƯỢC ............................................................................115
IV.1.1. Lý thuyết .............................................................................................115
IV.1.2. Chương trình .......................................................................................115
IV.2. HƯỚNG PHÁT TRIỂN ............................................................................115
HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG CHƯƠNG TRÌNH ..............................116
TÀI LIỆU THAM KHẢO .......................................................................................118

Bộ mơn CNTT, Khoa CNTT & TT

Trang 8


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

Commented [t1]:

BẢNG CHÚ THÍCH
STT
1
2
3
4
5

Thuật ngữ
CSDL
HTML
CSS
PHP
MDL

Bộ mơn CNTT, Khoa CNTT & TT

Định nghĩa/mơ tả

Cơ sở dữ liệu
HyperText Markup Language
Cascading Style Sheets
Hypertext Preprocessor
Material Design Lite

Trang 9


Luận văn tốt nghiệp
GVHD:
Chun ngành Cơng Nghệ Thơng Tin
_______________________________________________________________________________

TĨM TẮT
--Thương mại điện tử là một phần trong xu thế ạiCùng với sự phát triển chung
của công nghệ ngày nay. Bên cạnh đó, thương mại điện tử cũng phát triển theo,
đâyĐây là loại hình kinh doanh tiện lợi, mang lại hiệu quả kinh tế cao. Vì vậy, nó
đang được các doanh nghiệp, công ty hay các cá nhân kinh doanh áp dụng phổ biến.
--“Website quản lý mua bán gas” là một hệ thống quản lý quy trình mua bán
sản phẩm giữa khách hàng và doanh nghiệp. “Website quản lý mua bán gas” được
phát triển hướng tới hai nhóm người dùng: Đầu tiên là khách hàng, khách hàng có thể
xem, tìm kiếm, bình luận về sản phẩm, đặt hàng trực tuyến,…Nhóm người dùng thứ
hai là chủ cửa hàng có thể xem, thêm, cập nhật sản phẩm, xác nhận đơn hàng, lập hóa
đơn bán hàng, quản lý nhóm người dùng khách hàng, quản lý nhà cung cấp, nhân
viên, lập thống kê, sao lưu dữ liệu hệ thống,… Hệ thống xây dựng trên hệ quản trị cơ
sở dữ liệu MySQL, ngôn ngữ kịch bản cho máy chủ PHP và áp dụng công nghệ Ajax,
Javascript. Đặc biệt hệ thống phát triển trên nền ngôn ngữ siêu văn bản HTML5 và
định dạng hiển thị trang web với MDL, CSS3., HTML5 có rất nhiều tính năng mới
như nó giúp thêm một video và tạo các hiệu ứng dễ dàng mà không cần sử dụng Flash.

CSS3 giúp định dạng một trang web dễ dàng, tiết kiệm thời gian, giao diện đẹp và
thân thiện với người dùng. Material Design Lite (MDL) giúp định dạng một trang
web đẹp, tuỳ biến theo độ phân giải màn hình, trực quan, giúp người dùng dễ tương
tác.
--Kết quả đề tài đã cơ bản hoàn thành q trình phân tích, thiết kế các chức
năng và cài đặt chương trình demo tương đối hồn chỉnh cho các nhóm người dùng.
Sinh viên thực hiện

Đinh Tấn Thơng

Bộ mơn CNTT, Khoa CNTT & TT

Trang 10


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

ABSTRACT
Nowadays, electronic commerce is part of the general trend of technological
development. This is one of convenient businesses has high economic efficiency.
Therefore, it is widely used by enterprises, companies or individuals.
“The Website of selling gas management” are system which manage the chain
of selling vary products between customers and businesses. It is developed towards
to two groups, customers and shop owners. First, customers can view, search,
comment on products, orders online via internet. Second, shop owners can view,
update products, confirm the order selling form, invoice. Moreover, they can manage
customers, suppliers, employes information and backup system data. The system is

built based on MySQL database management system, script for PHP server and apply
Ajax as well as use Javascript technology. Specially, the system is developed on the
HTML5 (hypertext markup language) flatform. Besides that, web page displays data
MDL, CSS3 and HTML5 format which have a lot of new features and creates an
additional video, effects easily without using Flash. CSS3 helps format a web page
structure efficiently. It is so optimal about time, decorate friendly user interface.
Material Design Lite (MDL) helps to format a beautiful and customizable web page
according to screen resolution.
The result of this research has basically completed the process of analysis,
design functions and demo for groups of users.
Performer

Dinh Tan Thong

Bộ môn CNTT, Khoa CNTT & TT

Trang 11


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

LỜI CẢM ƠN

Trong suốt quáa trình học tập tại trường Đại Học Cần Thơ
cho đến thời điểm hiện tại và hoàn thành luận văn, em đã nhận
được sự hướng dẫn, giúp đỡ của q Thầy, Cơ và bạn bè. Với
lịng kính trọng và biết ơn sâu sắc,t em xin gửi lời biết ơn chân

thành đến:
TS. Phạm Thế Phi - Người thầy nhiệt tình giúp đỡ em
trong những tình huống khó khăn và tạo điều kiện tối đa cho em
hoàn thành tốt luận văn.
Em cũng gửi lời cảm ơn đến Ba Mẹ và những người bạn
đã luôn ở bên cạnh động viên và giúp đỡ chúng em trong suốt
quá trình học tập, cũng như luận văn này.
Xin chân thành cảm ơn đến quý Thầy, Cô Khoa Công
Nghệ Thông Tin và Truyền Thông, Trường Đại Học Cần Thơ đã
truyền đạt những kiến thức bổ ích trong thời gian học tập vừa qua
tại trường.

Trong quá trình thực hiện đề tài luận văn, khó tránh khỏi
những sai sót, rất mong q Thầy, Cơ bỏ qua. Đồng thời do trình
độ lý luận cũng như kinh nghiệm thực tiễn cịn hạn chế nên bài
báo cáo cịn có nhiều thiếu sót, em rất mong nhận được sự góp ý
của q Thầy, Cơ và các bạn để em có nhiều kinh nghiệm để
hoàn thành đề tài được tốt hơn.
Xin chân thành cảm ơn!
Đinh Tấn Thông

Bộ môn CNTT, Khoa CNTT & TT

Trang 12


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

CHƯƠNG I: TỔNG QUAN
Chương tổng quan sẽ trình bày sơ lược về các lý do, yêu cầu của đề tài cùng biện
pháp, lịch sử nghiên cứu, phương hướng giải quyết các yêu cầu đã đặt ra. Và cuối
cùng là phần giới thiệu tổng quan nội dung các chương trong quyển luận văn này.
I.1. ĐẶT VẤN ĐỀ
Một cửa hàng gas cần phát triển “Website quản lý mua bán gas” để phục vụ cho
công tác quản lý sản phẩm gas cũng như để kinh doanh các sản phẩm gas. Ngồi ra,
website cịn quảng bá sản phẩm và tính cạnh tranh cho cửa hàng.
Về phía khách hàng: tạo điều kiện thuận lợi cho khách hàng có thể đặt hàng trực
tuyến và biết thêm thơng tin chi tiết sản phẩm liên quan đến gas.
Về phía chủ cửa hàng: thuận lợi hơn trong quá trình quản lý cửa hàng mình đặc
biệt trong quá trình kết xuất thống kê.
Với các vấn đề trên việc phát triển “Website quản lý mua bán gas” là thật sự cần
thiết với cửa hàng trong xu thế kinh doanh hiện nay.
I.2. LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ
Các website thương mại điện tử lần đầu tiên trên thế giới vào những năm đầu tiên
vào thế kỷ thứ XXI. Riêng ở nước ta, các website thương mại điện tử phát triển mạnh
trong những năm gần đây. Để bắt kịp thời đại, các cửa hàng đã đầu tư xây dựng các
website nhằm giới thiệu sản phẩm của công ty và thực hiện các giao dịch trực tuyến.
“Website quản lý mua bán gas” không phải là đề tài mới, đề tài này được nhiều
người nghiên cứu và phát cũng như các mặt hàng kinh doanh khác. Các chức năng
trên website cũng tương đối là giống nhau, nhưng hầu hết điều sử dụng ngôn ngữ
đánh dấu siêu văn bản HTML được phát triển vào năm 1999. Nó khơng còn phù hợp
với sự phát triển của Internet và nhu cầu sử dụng hiện nay. Việc nhúng Flash vào
website để tạo hiệu ứng đơn giản hay chỉ là phát một đoạn video cũng có thể làm
người dùng cảm thấy khó chịu. Hơn nữa, Flash có thể làm chậm máy tính người dùng
và mang nhiều nguy cơ đối với an toàn của hệ thống. Chính vì thế cần có một cơng
nghệ mới để giải quyết vấn đề này.
I.3. MỤC TIÊU CẦN ĐẠT

− Xây dựng một website tương đối đầy đủ tính năng, đáp nhu cầu cần thiết của
người sử dụng.
− Giao diện thân thiện, dễ sử dụng.
− Tăng khả năng xử lý và cải thiện tốc độ website.
− Website có thể chạy trên nhiều trình duyệt và thiết bị khác nhau (máy tính,
điện thoại di động, máy tính bảng, …)
I.4. PHẠM VI VÀ YÊU CẦU CỦA ĐỀ TÀI
Phạm vi ứng dụng của website là một cửa hàng bán lẻ gas hay nhà phân phối gas.

Bộ môn CNTT, Khoa CNTT & TT

Trang 13


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

Mục tiêu chung:
− Phục vụ khách hàng nhanh chóng, chuyên nghiệp.
− Quản lý chặt chẽ doanh thu bán hàng, tránh thất thoát.
− Quản lý chặt chẽ việc cho mượn, thu hồi vỏ bình gas.
− Giúp tiết kiệm thời gian, cơng sức làm việc.
− Quản lý số liệu chính xác, cung cấp báo cáo nhanh chống, kịp thời.
Mục tiêu của từng nhóm người dùng (Khách hàng, chủ cửa hàng):. Sau đây là mục
tiêu chi tiết đối với từng nhóm người dùng:
 Khách hàng:
− Xem sản phẩm: Khách hàng có thể xem sản phẩm theo loại sản phẩm. Với mỗi
sản có thể xem mơ tả sản phẩm, hình ảnh, bình luận, về sản phẩm đó.

− Tìm kiếm sản phẩm: Khách hàng có thể tìm kiếm theo tên sản phẩm, giá sản
phẩm.
− Đăng ký thành viên: Khách hàng phải đăng ký thành viên mới thực hiện được
chức năng đặt mua online hoặc bình luậân về sản phẩm.
− Đặt mua hàng: Khách có tài khoản có thể đặt mua sản phẩm online.
 Chủ cửa hàng:
− Quản lý sản phẩm:
➢ Chủ của hàng có thể thêm, sửa, xóa bất kỳ sản phẩm nào. Xem các
thơng tin sản phẩm như số lượng, giá, …
− Lập hóa đơn bán hàng:
➢ Khi có đơn đặt hàng mới thì chủ cửa hàng cần lập hóa đơn bán hàng
để thanh tốn với khách hàng.
− Quản lý khách hàng, nhân viên, nhà cung cấp:
➢ Chủ cửa hàng thêm sửa xóa nhân viên, nhà cung cấp, khách hàng.
− Thống kê:
➢ Thống kê các số liệu của website thông qua các danh sách và biểu đồ
cột.
− Sao lưu dữ liệu:
➢ Công tác sao lưu dữu liệu rất cần thiết với website thương mại điện tử.
Vì thế chủ cửa hàng cần thường xuyên sao lưu dữ liệu để có thể phục
hồi dữ liệu nếu cần.
I.5. HƯỚNG GIẢI QUYẾT VẤN ĐỀ ĐẶT RA
 Lý thuyết:
− Cơ sở lý thuyết cần nghiên cứu để thực hiện đề tài.
➢ Các kỹ thuật phát triển ứng dụng web: HTML5, MDL, CSS3, …

Bộ môn CNTT, Khoa CNTT & TT

Trang 14

Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

➢ Lý thuyết về xây dựng và thiết kế hệ thống thông tin.
➢ Ngôn ngữ truy vấn CSDL SQL.
➢ Ngôn ngữ lập trình PHP.
 Chương trình:
− Phần mềm chuyên dùng để hỗ trợ phát triển hệ thống:.
➢ Công cụ thiết kế hệ thống PowerDesigner 16.1 dùng để tạo ra các mơ
hình CDM và sinh CSDL từ mơ hình CDM.
➢ Phần mềm phát triển ứng dụng web: Photoshop CS6, Sublime Text3.
➢ Gói phần mềm Xampp 5.6.24
➢ Các trình duyệt: Coccoc, Firefox, Chrome, Opera.
➢ Hệ điều hành Windown 8 Profesional 32bit.
➢ Bộ công cụ Microsoft Ofice 2016.
I.6. BỐ CỤC LUẬN VĂN
Nội dung quyển luận văn bao gồm các chương trình và các phần sau:
CHƯƠNG I: TỔNG QUAN
Chương này trình bày sơ lược về các lý do, yêu cầu của đề tài và các biện pháp,
phương hướng giải quyết các yêu cầu đã đặt ra. Và cuối cùng là phần giới thiệu nội
dung từng chương trong quyển luận văn này.
CHƯƠNG II: CƠ SỞ LÝ THUYẾT
Chương này trình bày về các mơ hình ứng dụng web, các kỹ thuật xây dựng web:
HTML5, CSS3, MDL, PHP.
CHƯƠNG III: NỘI DUNG VÀ KẾT QUẢ ĐẠT ĐƯỢC
Chương này đi vào phần phát triển ứng dụng: đặc tả yêu cầu, thiết kế, kiểm thử, kế
hoạch phát triển, kế hoạch đảm bảo chất lượng.

CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Nhận xét và kết quả đạt được hướng phát triển của đề tài.

Bộ môn CNTT, Khoa CNTT & TT

Trang 15


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________
Formatted: Centered, Space After: 0 pt, Line spacing:
Multiple 1.2 li

CHƯƠNG II: CƠ SỞ LÝ THUYẾT
Chương này sẽ trình bày sơ lược về mơ hình ứng dụng web, ngơn ngữ đánh dấu
siêu văn bản, kỹ thuật định dạng hiển thị trang web, tiếp theo là giới thiệu công nghệ
Material Design Lite (MDL). Và cuối cùng là phần giới thiệu ngơn ngữ PHP.
II.1. MƠ HÌNH ỨNG DỤNG WEB

Hình II.1: Mơ hình ứng dụng web
➢ Mơ hình ứng dụng web là mơ hình ứng dụng xây dựng dưới dạng
Client/Server.
➢ Sơ lượct về vai trò và ý nghĩa các thành phần trên:
➢ Database: là một database server với hệ quản trị cơ sở dữ liệu (CSDL) MySQL
làm nhiệm vụ lưu trữ thông tin và phục vụ các yêu cầu truy vấn cơ sở dữ liệu
từ các thành phần khác nhau.

Bộ môn CNTT, Khoa CNTT & TT

Trang 16


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

➢ Server: là web server có nhiệm vụ lắng nghe các yêu cầu từ trình duyệt
(Cclient) và trả về số trang web tương ứng được yêu cầu.
➢ Client là một máy khách chạy một trình duyệt web (BBrowser) làm nhiệm vụ
mang trung gian gửi các yêu cầu của người dùng đến web server sau đó nhận
kết quả về và hiển thị kết quả cho người dùng.
➢ Internet là đường truyền thông tin giữa Client và Server, nếu đường truyền bị
ngắt thì web khơng hoạt động.
Quy trình hoạt động của mơ hình trên có thể tóm tắt như sau:
➢ Client thơng qua web browser thực hiện yêu cầu nội dung của trang web gửi
đến web server thông qua đường truyền Internet. Web server lắng nghe các
u cầu từ phía Client, tìm kiếm trang web được yêu cầu, thực hiện các server
script (PHP) truy vấn dữ liệu từ CSDL (database server) và trả về kết quả cho
trình duyệt web dưới dạng các trang siêu văn bản (HTML) hay các dữ liệu với
định dạng XML.
II.2. NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN(HTML5)
HTML - Hyper Text Markup Language: Ngơn ngữ đánh dấu siêu văn. Nó dùng
để định dạng bố cục của trang web. Là ngôn ngữ cơ sở để các trình duyệt phân tích,
hiển thị nội dung của website. HTML dùng để viết các website tĩnh đưa lên mạng
World Wide Web (WWW).
HTML (HyperText Markup Language) là ngơn ngữ đánh dấu siêu văn bản.
Nóđược dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của

đoạn text và được hiển thị một chương trình đặc biệt làcác thành phần của một trang
web trên một trình Browser duyệt nào đó (Firefox, Chrome, Opera, …).
HTML5 là khởi đầu của kỷ nguyên mới. Mmang lại nhiều tiện ích thực sự và làm
các nhà phát triển webpage thấy hứng thú với HTML5cho việc thiết kế và hiển thị
các trang web. HTML5 với phiên bản đầu tiên được được W3C công bố vào năm
2008 nhưng mãi tới năm 2011 mới chính thức được ra mắt với một ánh hào nhống
của cơng nghệ hiện đại. Tuy nhiên, trong thời điểm đó có rất nhiều trình duyệt chưa
kịp thay đổi để hỗ trợ nó. Đến ngày nay, hầu hết các trình duyệt phổ biến như Chrome,
Firefox, Opera, …đều hỗ trợ HTML5. Điều đó đã tạo ra một cuộc cách mạng lớn cho
cơng nghệ web.
II.2.1. Cấu trúc HTML5
HTML5 có nhiều sự thay đổi lớn nhưng về mặt cấu trúc file HTML5 vẫn giữ
nguyên cấu trúc cơ bản của HTML mà nó đã có trước. Dưới đây là cấu trúc của
HTML5:

Bộ mơn CNTT, Khoa CNTT & TT

Trang 17


Luận văn tốt nghiệp
GVHD:
Chun ngành Cơng Nghệ Thơng Tin
_______________________________________________________________________________

Hình II.2: Mẫu cấu trúc HTML5
II.2.2. Định dạng trang (page structure)
Các phần tử cấu trúc mới trong HTML5:
➢ <acticle>: thẻ này định nghĩa một bài viết (tin tức, nội dung quảng cáo)
hoặc bình luận của người dùng. Nó độc lập với content của website.

➢ <aside>: thẻ này đánh dấu nội dung bên cạnh của trang hiện tại. Ví dụ như
một sidebar.
➢ <header> và <footer>: hai thẻ này giúp bạn người dùng không cần định
nghĩa id cho tiêu đề và cuối trang.
➢ <nav>: thẻ này định nghĩa phần menu điều hướng cho website.
➢ <section>: thẻ này quan trọng, nó giúp người dùng xác định các thành
phần khác nhau trong trang web.website. Bạn Lập trình viên có thể gộp
chung các div cùng nội dung vào trong thẻ này để dễ dàng quản lý.

Bộ môn CNTT, Khoa CNTT & TT

Trang 18


Luận văn tốt nghiệp
GVHD:
Chun ngành Cơng Nghệ Thơng Tin
_______________________________________________________________________________

Hình II.3: Định dạng trang trong HTML5



Chú ý: Một điều quan trọng người dùng cần lưu ý là các thẻ mới của
HTML5 không chỉ được sử dụng 1 lần, header và footer sẽ không chỉ đánh
dấu sự bắt đầu và kết thúc của một trang mà có thể là một phần nội dung
nào đó. Điều này có ý nghĩa, hai thẻ này có khả năng được sử dụng nhiều
lần trong tồn bộ trang.

II.2.3. Form

Form có các thuộc tính được trình bày như sau:
 Thuộc tính required:
Thuộc tính required là thuộc tính kiểu logic, nó hoạt động khi form được
submit. Nếu phần tử trong trang web có sử dụng thuộc tính required mà
để rỗng, sau khi submit thì trình duyệt sẽ báo một lỗi tổng quát hoặc các
lỗi tương ứng do người dùng đặt ra. Tùy vào mỗi trình duyệt mà sẽ có
thơng báo khác nhau. Cú pháp:

Bộ môn CNTT, Khoa CNTT & TT

Trang 19


Luận văn tốt nghiệp
GVHD:
Chun ngành Cơng Nghệ Thơng Tin
_______________________________________________________________________________

Hình II.4: Lỗi nhập dữ liệu
 Thuộc tính placehoder

Thuộc tính placehoder là thuộc tính cho phép hướng dẫn nhập dữ liệu trong
khung nhập liệu. Nội dung sẽ ẩn đi nếu có sự kiện onfocus vào khung nhập
liệu. Nếu sự kiện onBlur xảy ra mà nội dung trong khung bị rỗng thì hướng
dẫn sẽ hiện trở lại. Cú pháp:

Hình II.5: Hiển thị hướng dẫn nhập
 Thuộc tính pattern
Thuộc tính paratten là thuộc tính cung cấp một biểu thức chính quy và bắt
buộc người dùng tn theo quy tắc đó. Cú pháp:

Hình II.6: Kiểm tra chuỗi nhập vào
 Thuộc tính multiple

Bộ mơn CNTT, Khoa CNTT & TT

Trang 20


Luận văn tốt nghiệp
GVHD:
Chun ngành Cơng Nghệ Thơng Tin
_______________________________________________________________________________

Thuộc tính mutiple cho phép nhập nhiều thuộc tính trên form. Cú pháp:

Hình II.7: Chức năng chọn tệp
 Thuộc tính autocomplete

Thuộc tính autocomplete cho phép lưu lại các giá trị đã nhập vào khung
nhập liệu. Mỗi lần nhập giá trị vào khung, textbox sẽ hiện ra gợi ý các lần
nhập trước đó. Cú pháp:

 Thuộc tính autofocus

Thuộc tính autofocus là thuộc tính luận lý với hai giá trị “true” hoặc “false”.
Với giá trị “true” phần tử được gán thuộc tính này sẽ được tập trung vào
nó. Với mỗi form chỉ có một phần tử được sử dụng thuộc tính autofocus.
Cú pháp:

II.2.4. Input
Các kiểu input được HTML5 hỗ trợ.
 Kiểu Search
Kiểu dữ liệu search (type=“search”) cung cấp một trường nhập liệu trên
một dòng. Cú pháp:
 Kiểu email

Kiểu dữ liệu email (type=“email”) chỉ chấp nhận khi đúng định dạng của

một địa chỉ email. Cú pháp:
 Kiểu url

Kiểu dữ liệu url (type=“url”) chỉ chấp nhận khi đúng định dạng của một
địa chỉ một trang web. Cú pháp:

Bộ môn CNTT, Khoa CNTT & TT

Trang 21


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

 Kiểu tel

Kiểu dữ liệu tel (type=“tel”) với định dạng kiểu số điện thoại nhưng khơng
giống như email va url. Vì mỗi quốc gia có mỗi kiểu định dạng khác nhau.
Cú pháp:

 Kiểu number

Kiểu dữ liệu number (type=“number”) chỉ chấp nhận khi đúng định dạng
nhập vào số. Có thể kết hợp thêm thuộc tính min, max, step. Cú pháp:

 Kiểu range

Kiểu dữ liệu range (type=“range”) chỉ hiển thị nội dung thanh trượt và có
các thuộc tính min, max, step. Cú pháp:

 Kiểu color

Kiểu dữ liệu color (type=“color”) cung cấp cho người dùng một bảng màu
RGB và các giá trị thập lục phân của nó. Cú pháp:

 Kiểu date

Có nhiều kiểu ngày giờ được HTML5 hỗ trợ: date, datetime, datetimelocal, week, month. Tất cả kiểu ngày giờ này điều định dạng đúng chuẩn
ISO 8601 standard. Cú pháp:

II.2.5.

Âm thanh(audio) và video

Bộ môn CNTT, Khoa CNTT & TT

Trang 22

Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

Khi HTML5 ra đời, kèm theo đó là sự xuất hiện của media element gồm 2 thẻ
chính là <video> và <audio> đã đem lại sự trải nghiệm hồn tồn mới cho lập
trình viên và ứng người sử dụng web.
➢ Thẻ <video> để đánh dấu những nội dung video. Dùng để trình chiếu các file
video với các định dạng được hỗ trợ: Mp4, Ogg, WebM, …
➢ Thẻ <audio> để đánh dấu những nội dung âm thanh. Dùng để chạy các định
dạng âm thanh đượcnhư HTML5 hỗ trợ như mp3, ogg, wmw, …
➢ Thẻ <source>: để xác định tập tin đa phương tiện cùng với kiểu đa phương
tiện và nhiều thuộc tính khác. Một phần tử video cho phép nhiều phần tử
source và trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên. Đường dẫn
file video, audio cho thẻ <audio> và thẻ <video>

Hình II.8: Hình ví dụ video



Xem video trên bạn sẽ thấy, chúng ta chỉ xem video hoặc âm thanh,
chứ không thể kiểm soát được như stop, pause, play, volume, … Chính vì
thế, W3C đã phát triển một nhóm các thuộc tính mới dành riêng cho nhóm
thẻ đa phương tiện này, giúp bạn có thể kiểm sốt mọi thứ.
➢ Controls: Hiển thị bộ button điều khiển như play, pause, time bar,
volume, fullscreen.
➢ Autoplay: Đặt chế độ tự động bắt đầu tải và phát video/audio.
➢ Muted: Tắt âm thanh khi phát video/audio.
➢ Poster: thiết lập hình ảnh xem trước cho video. Hình ảnh này sẽ xuất

hiện khi video vừa được tải xong. vVà sẽ mất khi Click play để xem

Bộ môn CNTT, Khoa CNTT & TT

Trang 23


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

video. Thuộc tính này nhận giá trị là đường dẫn đến hình ảnh. Nếu
đường dẫn khơng chính xác hoặc khơng có thuộc tính này thì nó sẽ lấy
hình ảnh frame (28) đầu tiên của video làm hình ảnh xem trước.
II.3. KỸ THUẬT ĐỊNH DẠNG HIỂN THỊ TRANG WEB
CSS3 là kỹ thuật định dạng trang web mới, nhưng vẫn đang trong giai đoạn phát
triển và hồn thiện. CSS3 cung cấp những tính năng mới vượt trội. Những tính năng
mạnh mẽ của nó sẽ giúp chúng ta thêm nhiều công cụ nữa để chuyển ý tưởng của
mình thành hiện thực và mở ra thêm những ứng dụng đưa vào thực tiễn.
Google cChrhorme và Safari là hai trình duyệt hỗ trợ tốt nhất cho CSS3 ở thời
điểm hiện tại.
II.3.1. CSS3 Color
a. RGBA
Hệ màu RGBA hoạt động gần giống như RGB nhưng có thêm độ mờ
(opacity). Ba giá trị đầu tiên thể hiện màu đỏ (R), xanh lá (G), xanh dương
(B) và giá trị cuối cùng là giá trị mờ (alpha). Ví dụ rgba(255,0,0,0.4).
b. HSL và HSLA
HLS dùng để điều chỉnh màu sắc nhanh chóống hơn, gồm 3 thành
phần màu sắc (H), độ bão hòa (S), độ sáng (L). H có giá trị từ 0 đến 359,

S có giá trị từ 0% đến 100%, L có giá trị từ 0% đến 100%. Hệ màu HSLA
cũng giống như HLS và có thêm độ mờ có giá trị từ 0 đến 1. Ví dụ hsla
(120,100%,50%,0.3).
c. Opacity
Thuộc tính độ mờ không chỉ được hỗ trợ trong RGBA, HSLA mà còn
được CSS3 hỗ trợ trong các thành phần của HTML. Mọi thành phần trong
HTML để có thể làm mờ được. Giá trị của thuộc tính mờ cũng được xác
định trong khoảng từ 0 tới 1.
II.3.2. Góc bo trịn
Khi chưa có CSS3, người lập trình muốn bo trịn góc của một đối tượng thì
phải sử dụng hình ảnh có sẵn để thực hiện, có thể làm chậm tốc độ tải rất nhiều.
Nhưng nay CSS3 đã ra đời và giải quyết được khó khăn này.
CSS3 cung cấp cho chúng ta bo trịn góc của một ơ bằng bằng thuộc tính
border-radius và giá trị bo góc được tính bằng pixel. Muốn bo một góc ta cần
thêm thêm giá trị bo. Ví dụ: muốn bo góc với giá trị 10px: border-radius: 10px.
II.3.3. Đổ bóng
CSS3 cung cấp hiệu ứng bóng đổ cho cả chữ và hình hộp. Cách sử dụng hầu
như tương tự nhau, luận văn chỉ đề cập đến hiệu ứng đổ bóng cho hình hộp.

Bộ mơn CNTT, Khoa CNTT & TT

Trang 24


Luận văn tốt nghiệp
GVHD:
Chuyên ngành Công Nghệ Thông Tin
_______________________________________________________________________________

Với thuộc tính đổ bóng, có 5 giá trị trị cung cấp để thể hiện bóống đổ cho hình

hộp:. Có các giá trị sau:
➢ Insert: để thể hiện đổ bóng bên trong hình., nếu Nếu khơng có giá trị
này, mặc định là đổ bóng bên ngồi.
➢ Giá trị đầu tiên: giá trị lệch theo phương ngang, nếu là số dương thì lệch
về phía bên phải và ngược lại, số âm lệch về phía bên trái.
➢ Giá trị thứ hai: giá trị theo phương thẳng đứng, nếu là số dương thì bóng
đổ xuống phía dưới và ngược lại, số âm thì hướng lên trên.
➢ Giá trị thứ ba: khoảng cách mờ của bóng, nếu bằng khơng thì khơng có
khoảng cách làm mờ.
➢ Giá trị thứ tư: để đổ rộng bóng mờ.
➢ Màu sắc: Giá trị màu sắc được cung cấp từ bảng màu.
Ví dụ:

II.3.4. Transform
a. Translation
Translation cho phép di chuyển lên, xuống, trái, phải. Thuộc tính cũng
tương tự với position: relative khi khai báo top và left. Hàm translate(x,y)
gồm có hai đối số: x dùng để chỉ khoảng cách so với bên trái, y là khoảng
cách so với đỉnh.
Ví dụ:

b. Rotation
Hàm rotate() để xoay các phần tử với tham số truyền vào là số đo của
một góc có đơn vị là deg.

Bộ mơn CNTT, Khoa CNTT & TT

Trang 25