Tải bản đầy đủ (.pdf) (135 trang)

phát triển phần mềm quản lý tour du lịch dùng html5css3

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.07 MB, 135 trang )

TRƯỜNG ĐẠI HỌC CẦN THƠ
KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC
Đề tài:

PHÁT TRIỂN PHẦN MỀM QUẢN LÝ
TOUR DU LỊCH DÙNG HTML5&CSS3
Cán bộ hướng dẫn:

Sinh viên thực hiện:

ThS. Võ Huỳnh Trâm

Đoàn Văn Quý

MSCB: 1069

MSSV:1091704

HK II, 2012 - 2013


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

TRƯỜNG ĐẠI HỌC CẦN THƠ
KHOA CÔNG NGHỆ THÔNG TIN

---o0o--LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC
Đề tài:


PHÁT TRIỂN PHẦN MỀM QUẢN LÝ
TOUR DU LỊCH DÙNG HTML5&CSS3
Cán bộ hướng dẫn:

Sinh viên thực hiện:

ThS. Võ Huỳnh Trâm

Đoàn Văn Quý

MSCB: 1069

MSSV:1091704

Cán bộ phản biện
Ks. Hồ Quang Thái
ThS. Nguyễn Công Danh
Luận văn được bảo vệ tại: Hội đồng bảo vệ luận văn tốt nghiệp Bộ Môn
Phần Mềm, Khoa Công nghệ thông tin và Truyền Thông, Trường Đại học
Cần Thơ vào ngày 10 tháng 05 năm 2013.
Có thể tìm hiểu luận văn tại:
 Thư viện Khoa Công nghệ thông tin và Truyền thông, Trường Đại học Cần Thơ.
 Trung tâm học liệu của trường Đại Học Cần Thơ.

 Website: .

GVHD: Th.S Võ Huỳnh Trâm

Trang 1



Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

LỜI CẢM ƠN
Đầu tiên, em xin chân thành cảm ơn và gửi lời cảm ơn đến Cô Võ Huỳnh
Trâm đã tạo điều kiện thuận lợi cho em thực hiện hiện đề tài luận văn này và
cô tận tình hướng dẫn trong suốt quá trình em thực hiện luận văn.
Em xin gửi lời cảm ơn sâu sắc tới quý Thầy Cô trong Khoa Công nghệ
thông tin và Truyền thông Trường ĐH Cần Thơ đã truyền đạt kiến thức quý
báu cho em trong những năm học vừa qua.
Xin gửi lời cảm ơn đến các bạn, đặc biệt là các thành viên trong lớp
DI0996A2 đã cùng đoàn kết, ủng hộ, giúp đỡ tôi trong suốt thời gian học tập
trên giảng đường đại học và thực hiện đề tài.
Dù đã rất cố gắng để hoàn thành một cách tốt nhất, nhưng sai sót là
điều không tránh khỏi. Em rất mong nhận được những ý kiến đóng góp của
thầy cô và các bạn.
Em xin chân thành cảm ơn!

Cần Thơ, ngày 10 tháng 4 năm 2013
Sinh viên thực hiện

Đoàn Văn Quý

GVHD: Th.S Võ Huỳnh Trâm

Trang 2


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3


NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................

Cần Thơ, ngày 10 tháng 05 năm 2013
Cán bộ hướng dẫn

ThS. Võ Huỳnh Trâm

GVHD: Th.S Võ Huỳnh Trâm

Trang 3


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

NHẬN XÉT CỦA CÁN BỘ PHẢN BIỆN

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

....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
....................................................................................................................
Cần Thơ, ngày 10 tháng 05 năm 2013
Cán bộ phản biện

Ks. Hồ Quang Thái

GVHD: Th.S Võ Huỳnh Trâm

Trang 4


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

NHẬN XÉT CỦA CÁN BỘ PHẢN BIỆN

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

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

Cần Thơ, ngày 10 tháng 05 năm 2013
Cán bộ phản biện

Ths. Nguyễn Công Danh

GVHD: Th.S Võ Huỳnh Trâm

Trang 5


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

MỤC LỤC
CÁC TỪ VIẾT TẮT
Danh mục hình ảnh
ABSTRACT
TÓM TẮT
CHƯƠNG I TỔNG QUAN

1.1.GIỚI THIỆU
1.2.MỤC TIÊU CẦN ĐẠT ĐƯỢC
1.3.KHÓ KHĂN
1.4. LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ
1.5.HƯỚNG GIẢI QUYẾT
1.6.PHẠM VI ĐỀ TÀI
1.7. PHƯƠNG PHÁP NGHIÊN CỨU
CHƯƠNG II CƠ SỞ LÝ THUYẾT
2.1.TỔNG QUAN VỀ HTML5&CSS3
2.1.1.Giới thiệu HTML5:
2.1.2.Giới thiệu CSS3
2.2.NGÔN NGỮ XỬ LÝ SERVER PHP
2.2.1.Giới thiệu PHP
2.2.2.Định nghĩa bộ thẻ PHP
2.2.3.Biến trong php
2.2.4. Kiểu dữ liệu trong PHP
2.2.5. Hàm trong PHP
2.3.NGÔN NGỮ XỬ LÝ CLIENT JAVASCRIPT
2.3.1. Giới thiệu
2.3.2. Biến trong javascript
2.3.3. Hàm trong javascript
2.4.HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MySQL
CHƯƠNG III ỨNG DỤNG VÀ XÂY DỰNG HỆ THỐNG
3.1.ĐẶC TẢ YÊU CẦU PHẦN MỀM(IEEE/IEA 12207.1-1997)
3.1.1. Giới thiệu
3.1.2. Mô tả tổng quan
3.1.3. Môi trường vận hành
3.1.4. Các ràng buộc về thực thi và thiết kế
3.1.5. Các yêu cầu giao tiếp bên ngoài
3.1.6. Các tính năng hệ thống

3.1.7. Các yêu cầu phi chức năng
3.2. THIẾT KẾ PHẦN MỀM(IEEE/IEA 12207.1-1997)
3.2.1. Phân rã hệ thống có chọn lọc
3.2.2. Môi trường vận hành
3.2.4. Thiết kế kiếm trúc

GVHD: Th.S Võ Huỳnh Trâm

8
9
10
11
12
12
13
13
14
14
15
15
18
18
18
23
32
32
33
34
35
36

38
37
37
38
39
40
40
39
41
48
50
51
52
68
69
69
72
74

Trang 6


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

3.2.5. Mô hình kiến trúc hệ thống
3.2.6. Kiến trúc phần mềm
3.2.7. Mô hình triển khai ứng dụng
3.2.8. Yêu cầu hệ thống
3.2.9. Thiết kế dữ liệu
3.2.10. Thiết kế giao diện(chọn lọc chức năng)

3.3.Kiểm thử phần mềm(IEEE 983-1986)
3.3.1. Mục tiêu
3.3.2. Phạm vi
3.3.3. Công cụ kiểm thử và môi trường kiểm thử
3.3.4. Kiểm thử chức năng có chọn lọc
CHƯƠNG IV KẾT LUẬN
4.1. Kết quả đạt được
4.2. Hạn chế
4.3. Hướng phát triển
TÀI LIỆU THAM KHẢO
PHỤ LỤC A

GVHD: Th.S Võ Huỳnh Trâm

75
76
79
81
83
94
116
115
115
116
117
124
123
123
123
125

126

Trang 7


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

CÁC TỪ VIẾT TẮT

HTML5

- Ngôn ngữ đánh dấu siêu văn bản thế hệ thứ 5

CSDL

- Cơ sở dữ liệu

CSS3

- Creative Style Sheets phiên bản thứ 3.

API

- Ứng dụng giao diện

GVHD: Th.S Võ Huỳnh Trâm

Trang 8



Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

Danh mục hình ảnh
Hình
II.1
II.2
II.3
II.4
II.5
II.6
II.7
II.8
II.9
II.10
II.11
II.12
II.13
II.14
III.1
III.2
III.3
III.4
III.5
III.6
III.7
III.8
III.9
III.10
III.11
III.12

III.13
III.14
III.15
III.16
III.17

Tên
Logo HTML5
Lịch sử phát triển của HTML
Logo CSS3
Mã thực thi bo tròn góc
Kết quả bo tròn tròn góc
Mã thực thi tạo bóng đỗ
Kết quả thực thi từ trình duyệt khi tạo bóng đỗ
Mã thực thi đối tượng chuyển động
Trình duyệt thực thi đối tượng di chuyển
Mà nền trong suốt cho đối tượng
Bộ chọn thẻ HTML
Bộ chọn ID cho thẻ
Bộ chọn class cho thẻ
Xác định class cho thẻ
Mô hình web
Mô hình 3 lớp
Mô hình 3 tier
Mô hình kiến trúc 1
Mô hình kiến trúc 2
Mô hình kiến trúc 3
Mô hình mạng
MCD
Đăng nhập 1

Đăng nhập 2
Form đăng ký
Đặt tour
Form đặt tour của khách
Thành viên dặt tour
Thành viên đặt tour thành công
Form khách thiết kế tour
Form thành viên thiết kế tour

GVHD: Th.S Võ Huỳnh Trâm

Trang
15
17
20
22
22
23
23
24
24
25
26
27
28
28
66
68
69
70

71
72
74
77
88
88
91
93
94
98
98
99
101

Trang 9


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

ABSTRACT

HTLM5 & CSS3 is a new development backgroup of W3C with the
strongly support for new products of apple & goole. One of the main
features of HLML5 that helping people to develop applications easily for
mobile divices, applications wed, along with the supporting user interface
of its most powerful.. This really stand out with the creation of intuitive
interface, more attractive to users. Beside the creation to the usual
wed,HTLM5 & CSS3 also strongly supports the development of smart
phone applications. Especially, the demading of game graphics 2D/3D.
The management software tour can be used by many of

technologies to develop, but mainly uses two new technologies are
developed HLM5 & CSS3 user interface and functionally of the system. In
this software mainly support three main user groups: customers, members
and system administrators. The main function of the support system for the
different user groups such as: tour booking, tour members, visitors tour
design, tour members design, visitors tour quotation system, more tuor new
tourism, added to the tour schedule, online support for customers...
The result of the thesis is approximately complete construction
management software tour runs well on multiple browers and operating
systems, applications HTML5 & CSS3 basic design and functionality of the
interface software.

GVHD: Th.S Võ Huỳnh Trâm

Trang 10


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

TÓM TẮT
HTML5 & CSS3 là nền tảng phát triển mới của W3C với nổ lực hỗ
trợ mạnh cho cho những sản phẩm mới của Apple và Google. Một trong
những tính năng chính của HTML5 là giúp cho người phát triển dễ dàng
phát triển các ứng dụng cho các thiết bị di động, ứng dụng web, cùng với
phần hỗ trợ giao diện người dùng mạnh nhất của nó. Điều này thực sự nổi
bật với việc tạo ra các giao diện trực quan, hấp dẫn hơn với người sử dụng.
Ngoài việc tạo ra những trang web thông thường, HTML5&CSS3 còn hỗ
trợ mạnh mẽ phát triển các ứng dụng di động thông minh. Đặc biệt là phát
triển các các trò chơi đòi hỏi cao về đồ họa 2D/3D.
Phần mềm quản lý tour du lịch có thể được sử dụng nhiều công

nghệ để phát triển, nhưng chủ yếu sử dụng hai công nghệ mới là HTML5
& CSS3 phát triển giao diện người dùng cũng như chức năng của hệ
thống. Phần mềm chủ yếu hỗ trợ cho ba nhóm người dùng chính: khách,
thành viên, quản trị hệ thống. Các chức năng chính của hệ thống cho phép
khách hàng xem thông tin chi tiết của các tour, đặt tour, thiết kế tour theo
nhu cầu riêng của khách, thương lượng giá tour vừa thiết kế, ... Người
quản trị hệ thống có thể: thêm tour du lịch mới, thêm lịch trình cho tour du
lịch, hỗ trợ trực tuyến cho khách, ...
Kết quả thực hiện đề tài là xây dựng tương đối hoàn chỉnh phần
mềm quản lý tour du lịch chạy tốt trên nhiều trình duyệt và hệ điều hành,
cơ bản ứng dụng được HTML5&CSS3 trong thiết kế giao diện và chức
năng của phần mềm.

GVHD: Th.S Võ Huỳnh Trâm

Trang 11


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

CHƯƠNG I TỔNG QUAN

1.1.

GIỚI THIỆU

Nói về ý nghĩa và tầm quan trọng của công nghệ website, chúng ta
có thể nói đây là phương tiện truyền thông tin, tin tức, cũng như nhiều dữ
liệu quan trọng khác trong cuộc sống hàng ngày. Ngày này, website không
còn xa lạ gì với người sử dụng, trong đó có người dùng dụng máy tính để

thực hiện duyệt web, ngoài ra cũng có người dùng dùng thực hiện duyệt
web bằng thiết bị di động thông minh. Web gắn bó với cuộc sống đến mức
ngoài chức năng của nó là truyền thông tin, web còn là phương tiện giúp
người dùng có thể giả trí, trao đổi thông tin.
Với sự phát triển không ngừng của công nghệ web, cũng như các
nhà phát triển website ngày càng nhiều, thì các trang web trở nên linh động
và có hiệu suất hoạt động cao nhất. Ngoài ra, các nhà phát triển còn sử
dụng các CMS để phát triển các website thông tin.
Website quản lý tour du lịch phát triển bằng HTML5 & CSS3, được
phát triển dựa trên hai công nghệ chính là HTML5 & CSS3, bên cạnh hai
công nghệ mới này, phần mềm còn sử dụng nhiều thư viện mã nguồn mở
như: jquery, php, sử dụng lưu trữ thông tin và dữ liệu với hệ quản trị cơ sở
dữ liệu MySQL. Với ba thành phần chính để xây dựng nên hệ thống này
HTML5&CSS3, PHP, MySQL.
HTML5 & CSS3 nổi bật với khả năng hoạt động ổn định và linh
hoạt, được hỗ trợ bởi nhiều trình duyệt, với sự hỗ trợ mạnh mẽ của
HTML5, người dùng không cần phải cài các plugin flash để chạy các
video hay audio, tính năng này được hỗ trợ mạnh trên thiết bị di động của
gã khổng lồ Apple.
Ngoài ra, các nhà phát triển ứng dụng trên Android còn cho phép
người dùng phản hồi các ý kiến đóng góp về các sản phẩm của mình, dựa
vào đó giúp các sản phẩm được trở nên hoàn thiện và phù hợp với yêu cầu
người sử dụng hơn.

GVHD: Th.S Võ Huỳnh Trâm

Trang 12


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3


Tính năng mới của HTML5&CSS3 được xem là điểm mạnh của
chúng trong phát triển phần mềm, cũng như trong phát triển ứng dụng di
động, giúp công nghệ web đang dần vượt qua flash, sliverlight nặng nề cho
trình duyệt.
HTML5&CSS3 là “mỏ vàng” cho người phát triển các ứng dụng
với số lượng các ứng dụng miễn phí lớn, cùng với số lượng người dùng
đong đảo sử dụng các ứng dụng thông qua các nền tảng về di động và
desktop. Các nhà phát triển ứng dụng web bằng công nghệ HTML5&CSS
còn được hưởng một khoản đầu tư lớn từ gã khổng lồ Apple.
Hiện nay, HTML5&CSS3 là sự lục chọn hàng đầu cho các nhà phát
triển web, với xu thế này thì trong thời gian không xa các trang web và
ứng dụng sử dụng hai công nghệ mới là HTML5&CSS3 sẽ tăng một lượng
đáng kể về số lượng và chất lượng. Bên cạnh đó hai công nghệ này còn
giúp các nhà phát triển phát triển các ứng dụng desktop, game 2D, 3D sinh
động, thu hút người sử dụng ngày càng đông. Trong tương lai, những sản
phẩm về hai công nghệ này sẽ được sử dụng một cách rộng rãi.
Với những ưu điểm trên thì HTML5&CSS3 hứa hẹn sẽ mang đến
cho người dùng những sản phẩm tốt nhất và hoàn hảo nhất. Trong đề tài
này, chúng tôi nói về ý nghĩa, tầm quan trọng, cũng như phương thức hoạt
động của các thành phần chính HTML5&CSS3. Bên cạnh đó, chúng tôi
xây dựng phần mềm quản lý tour du lịch bằng HTML5&CSS3 với ngôn
ngữ lập trình chủ yếu là Javascript và PHP.
1.2.

MỤC TIÊU CẦN ĐẠT ĐƯỢC
-

1.3.


Nắm được các kiến thức về HTML5&CSS3.
Các kỹ thuật định dạng với HTML5&CSS3.
Các kỹ thuật lập trình bằng ngôn ngữ Javascript và PHP
Xây dựng website quản lý tour du lịch.

KHÓ KHĂN

- Việc nghiên cứu công nghệ cũng như kỹ thuật còn hạn chế,
website đòi hỏi kinh nghiệm cao về thiết kế đồ họa giao diện người dùng.
-

Còn nhiều thiếu xót về lập trình.

-

CSDL lưu trữ còn nhiều thiếu xót, chưa tối ưu đến mức tốt nhất.

GVHD: Th.S Võ Huỳnh Trâm

Trang 13


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

1.4.

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

Các trang web quản lý về du lịch hiện nay có rất nhiều, được nhiều
lập trình viên phát triển, chạy tốt trên nhiều trình duyệt khác nhau.

 Cholontourist(nguồn : trang web này
được phát triển để quản lý các tour du lịch nhưng giao diện còn đơn
thuần. Còn nhiều thiếu soát và chưa quản lý được người dùng là
khách, chưa cho phép khách hàng thiết kế các tour trực tuyến, đặt
tour phải liên hệ trực tiếp với nhân viên của quản lý hệ thống.
Trong các phần phát triển thì giao diện của trang còn thô sơ).
 Du lịch Huế(nguồn: đây là trang quản lý
du lịch tương đối tốt, nhưng chưa giải quyết được cho khách hàng
đặt tour trực tuyến hay thiết kế các tour theo ý của khách hàng).
 Ngoài những website được viết bằng ngôn ngữ php, bên cạnh đó
còn có những website được viết bằng ngôn ngữ .NET sliverlight,
jsp, ...
Các website trên nhìn chung khá hoàn thiện, tuy nhiên với sự hỗ trợ
của công nghệ thiết kế web mới trên HTML5&CSS3 sẽ giúp cho website
trở nên thân thiện và hoàn hảo hơn với người sử dụng. Website quản lý
tour du lịch còn được giải quyết được công việc của nhiều trang web như:
đặt tour trực tuyến nhanh chóng, thiết kế tour du lịch theo ý của khách
hàng, giúp khách hàng có thể báo giá được với người quản trị hệ thống để
có được một tour ưng ý.
1.5.

HƯỚNG GIẢI QUYẾT

- Tìm hiểu về hai công nghệ HTML5&CSS3 thông qua trang web
, sách html5&css3 for the real world, ...
- Tìm hiểu về các trang web có liên quan để có được những thông
tin về website tốt nhất.
-

Tìm hiểu về jquery, ajax, php, javascript, ...


-

Tìm hiểu về MySQL.

-

Xây dựng đặc tả website.

GVHD: Th.S Võ Huỳnh Trâm

Trang 14


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

-

Nghiên cứu lập trình web.

-

Thiết kế dữ liệu, giao diện.

- Viết quyển báo cáo.
1.6.

PHẠM VI ĐỀ TÀI

Về lý thuyết: nội dụng quyển báo cáo sẽ tập trung vào hai thành

phần chính là HTML5&CSS3 như lịch sử phát triển, các thành phần của
HTML5&CSS3, các yêu tố tạo nên phần mềm, kiến trúc lập trình,... cũng
như sự khác biệt giữa HTML5&CSS3 với các phiên bản trước đó của
chúng. Bên cạnh đó còn sử dụng các thành phần chính của HTML5&CSS3
để thực hiện các yêu cầu của phần mềm.
Về ứng dụng: xây dụng một phần mềm quản lý tour du lịch trong
khuôn khổ sử dụng HTML5&CSS3 với các yêu cầu như sau: cho phép
người dùng đặt tour online, thiết kế tour mới theo tour đã có sẵn, cho phép
người dùng thực hiện báo giá với hệ thống giá tour mà mình muốn đi, ...

GVHD: Th.S Võ Huỳnh Trâm

Trang 15


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

PHƯƠNG PHÁP NGHIÊN CỨU

1.7.

Nghiên cứu đề tài, tìm hiểu HTML5&CSS3 và thường xuyên báo
cáo tiến độ với giáo viên hướng dẫn.
 Kế hoạch thực hiện

Tuần

Thời gian

1


31/12/2012-06/01/2013

2
3
4
5
6
7
8

07/01/2013-13/01/2013
14/01/2013-20/01/2013
21/01/2013-27/01/2013
28/01/2013-03/02/2013
04/02/2013-10/02/2013
11/02/2013-17/02/2013
18/02/2013-24/02/2013

9

25/02/2013-03/03/2013

10

04/03/2013-10/03/2013

11

11/03/2013-17/03/2013


12

18/03/2013-24/03/2013

13

25/03/2013-31/03/2013

14

01/04/2013-07/04/2013

15

08/04/2013-14/04/2013

16

15/04/2013-21/04/2013

GVHD: Th.S Võ Huỳnh Trâm

Nội dung thực hiện
• Liên hệ giáo viên hướng dẫn để triển
khai các bước thực hiện.
• Lập kế hoạch nghiên cứu và tìm hiểu về
HTML5&CSS3, cùng các công nghệ
khác.
• Tìm hiểu HTML5.

• Tìm hiểu CSS3
• Tìm hiểu các công nghệ khác: PHP,
Javascript, jquery, ajax, ...
• Phân tích đề tài, thiết kế dữ liệu cho hệ
thống.
• Thiết kế giao diện và chức năng của hệ
thống.
• Thiết kế giao diện và chức năng của hệ
thống.
• Viết tài liệu: Chương I Tổng quan.
• Lập trình chức năng cho phần mềm.
• Lập trình chức năng phần mềm.
• Viết tài liệu: Chương II Cơ sở lý thuyết.
• Viết tài liệu: Chương III Ứng dụng và
xây dựng hệ thống.
• Hoàn thành phần mềm và kiểm thử chức
năng.

Trang 16


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

17

22/04/2013-28/04/2013

18

29/04/2013-05/05/2013


19

06/05/2013-10/05/2013

GVHD: Th.S Võ Huỳnh Trâm

• Tổng hơp tài liệu.
• Chuẩn bị slide báo cáo thử.
• Hoàn chỉnh quyển báo cáo.
• Chuẩn bị slide báo cáo chính thức.
• Nộp quyển báo cáo cho hội đồng.
• Báo cáo chính thức trước hội đồng.

Trang 17


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

CHƯƠNG II CƠ SỞ LÝ THUYẾT
2.1.

TỔNG QUAN VỀ HTML5&CSS3

2.1.1.

Giới thiệu HTML5

a. Khái niệm
HTML5 là một ngôn ngữ đánh dấu siêu văn

bản với phiên bản thứ 5, được W3C đưa vào nghiên
cứu từ năm 2009, cho đến hiện HTML5 vẫn chưa
hoàn thiện về tính năng. Nhưng có một số thẻ của
HTML5 đã hoạt động ổn định.
Hình II.1: Logo HTML5

b. Giới thiệu
HTML5 chạy tốt trên mọi trình duyệt, nhưng bên cạnh đó cũng còn
một số trình duyệt còn bị hạn chế một số thẻ mới.
Bên cạnh việc HTML5 hỗ trợ cho các desktop thì nó còn hỗ trợ
chạy tốt trên các thiết bị di động và smartphone, ngoài ra còn hỗ trợ cho
các thiết bị smartphone chạy tốt các video và audio mà không cần dùng
đến các phần mềm hỗ trợ. HTML5 có một công đồng nhà phát triển rất lớn
viết các ứng dụng cho công nghệ mới này. Dù còn rất mới và chưa hoàn
thiện về tính năng, nhưng HTML5 có nhiều tổ chức dựa vào nó mà phát
triển các ứng dụng mạnh mẽ, các website trong tương lai cũng tiến dần đến
sử dụng HTML5 cho sản phẩm của mình. Các nhà phát triển HTML5 chủ
yếu dựa vào hai ngôn ngữ lập trình chính là javascript và PHP, ngoài ra họ
còn dùng các framework của hai ngôn ngữ chính này. Nhưng với một cải
tiến mới trong HTML5 là sự kết hợp của ba nền tảng là HTML + CSS +
Javascript. Các thẻ mới của HTML5 cho phép các nhà phát triển không
cần phải viết các đoạn script rườm rà để thực hiện bẫy lỗi người dùng phía
client, mà ngược lại với tính năng thông minh của HTML5, nó tự động
thực hiện việc bẫy lỗi này với các thông số trong thẻ đó.

GVHD: Th.S Võ Huỳnh Trâm

Trang 18



Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

Cho tới hiện tại, HTML5 vừa phát triển mới, vừa năng cấp thẻ định
dạng, tổng số thẻ của HTML5 tăng lên rất nhiều, với những tính năng và
hiệu suất thực hiện tốt hơn nhiều. Nhưng bên cạnh đó cũng còn một số hạn
chế về sự hỗ trợ của trình duyệt, cũng như nền tảng phần cứng chưa thực
sự hỗ trợ mạnh các tính năng này.
HTML5 được W3C và WHATWG chính thức đưa vào nghiên cứu
vào năm 2009, được phát triển theo mô hình cuốn chiếu nên HTML5 đang
hoàn thiện nốt các phần còn lại, nhưng những phần đã ra mất thì nhanh
chống được hỗ trợ. HTML5 đã sớm được hỗ trợ trong các trình duyệt trên
PC như Mozilla Firefox(v3.5+), Apple Safari(v4.0+), Opera(v10.0+),
Google Chrome(v3.0+), trong đó chậm nhất là Internet Explorer của
Microsoft cũng đã bắt đầu hỗ trợ HTML5 ở phiên bản thứ 9(v9.0+). Bên
cạnh hỗ trợ cho PC, HTML5 còn phát triển để hỗ trợ tốt trên smartphone
và máy tính bảng. Mặc dù mới được phát triển từ năm 2009, nhưng
HTML5 đã thể hiện dược thế mạnh của mình trong phát triển web, đặc biệt
nhất là việc hai hệ điều hành lớn là iOS đã nói không với adobe flash để
tận dụng hết tính năng của HTML5, từ phiên bản Android 4.1(v4.1) hệ
điều hành cũng đã từ chối hẳn Adobe flash để hỗ trợ HTML5.
c. Tính năng
HTML5 được xây dựng để cho phép các nhà phát triển tạo ra các
sản phẩm và các ứng dụng giành cho di động tận dụng tất cả những tính
năng mà trình duyệt hỗ trợ. HTML5 không phân biệt hệ điều hành, miễn
trình duyệt hỗ trợ thì HTML5 chạy tốt. Nhưng với những tính năng của
HTML5 trong đó có một thẻ đáng chú ý nhất là thẻ canvas, thẻ này cho
phép nhà phát triển tận dụng để phát triển các ứng dụng đồ họa 2D và 3D
sinh động, với các ứng dụng 3D cần tới đồ họa cao thì cần đến sự hỗ trợ
của phần cứng, quan trọng nhất là card đồ họa.
Ngoài ra, còn hai thẻ tương đối quan trọng là video, audio có thể

nói rằng hai thẻ này được phát triển giành riêng cho hai nền tảng hệ điều
hành lớn là iOS và Andoid(v4.1+).

GVHD: Th.S Võ Huỳnh Trâm

Trang 19


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

d. Lịch sử phát triển
Ban đầu HTML được phát triển dùng trong truyền và quảng bá
thông tin đơn thuần, nhưng dần về sau khi công nghệ phát triển cũng như
yêu cầu của người dùng ngày càng cao thì yêu cầu về tính năng cũng như
giao diện cũng được HTML phát triển theo yêu cầu của người dùng. Với
các phiên bản(version) phát triển khách nhau thì HTML cũng có những
tính năng và công dụng khác nhau trong giai đoạn phát triển.

Hình II.2: Lịch sử phát triển của HTML

GVHD: Th.S Võ Huỳnh Trâm

Trang 20


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

Giai đoạn phát triển của HTML theo từng năm:
Cuối năm 1990, ngôn ngữ đánh dấu siêu văn bản ra đời với vỏn vẹn
20 thẻ được định nghĩa.

Tháng 7/1994, HTML2 được ra đời, phiên bản này ra đời được là
nhờ sự nỗ lực rất lớn của một công động yêu thích HTML phát triển nên.
Cũng trong năm này tổ chức World Wide Web được thành lập, cũng chính
tổ chức này cũng là tổ chức đảm nhiệm sự phát triển của HTML cho đến
ngày nay.
Năm 1995, hai thẻ mới được ra đời, đó là bước ngoặc lớn cho cộng
đồng yêu thích HTML đó là thẻ bgcolor và thẻ font face.
Cuối năm 1995, cũng là thời gian giành cho sự ra đời của HTML3,
đó cũng chỉ là tên gọi hình thức vì trong thời gian này CSS và Javascript
cũng chính thức ra đời.
Năm 1997, HTML4 được ra đời, phiên bản này là phiên bản được
nhiều người mong đợi nhất, HTML4 kết hợp cùng với CSS và Javascript đã
mang lại sự thỏa sức thiết kế cho các nhà phát triển website, với phiên bản
này HTML đã có một tương lai tốt hơn khi HTML4 đã nhận được chứng
nhận bởi W3C.
Tháng 1 năm 2008, W3C tung ra phiên bản đầu tiên cho sự phát
triển của HTML5 tạm gọi là HTML5.1, phiên bản này mang lại nhiều cải
tiến cho một ngôn ngữ đánh dấu siêu văn bản. Cho đến thời điểm hiện tại
thì các nhà phát triền website có thể làm chủ được các tính năng mới này,
cải tiến quan trọng nhất trong HTML5 là ở thể Video, nó làm cho các nhà
phát triển trở nên thật nhẹ nhàng trong việc phát triển, thẻ video đã chạy tốt
nhờ sự hỗ trợ của trình duyệt mà không cần thông qua flash và các plugin
khác. Ngoài ra còn nhiều thẻ mới cho bạn thỏa sức trải nghiệm như: article,
aside, audio, camvas, heder, footer, ...
e. Cú pháp
Cú pháp của HTML thông thường
 Mở đầu trang <html>
 Tiêu đề trang <title>Tiêu đề trang</title>
 Đầu đề <head>Khai báo thông tin</head>
GVHD: Th.S Võ Huỳnh Trâm


Trang 21


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

 Khai báo <body>Nội dụng của trang</body>
 Kết thúc trang </html>
Mã mẫu
<html>
<head>
<title>Du lịch chợ lớn</title>
<!-- Thẻ Lệnh Miêu Tả HTML -->
<!-- Định hình trang mạng -->
<style>
Thẻ Lệnh css
</style>
<style scr=style.css></style>
<!--Mả Javascript-->
<script language=javascript>
Mả Lệnh Javascript
</script>
<script language=javascript scr=script.js></script>
</head>
<body>
Chào mừng bạn đến với du lịch chơ lớn
<div id=’footer’>địa chị cong ty</div>
</body>
</html>


Cú pháp HTML5
 Mở đầu trang bằng <html>
 Tiêu đề trang<title>Tiêu đề</ttile>
 Phần khai báo<head>chứa các thành phần khai bào</head>
 Phần trình duyệt hiển thị<body>nội dung trang
 Phần cuối trang <footer>thông tin cty</footer>
 Kết thúc phần thân trang</body>
 Kết thúc trang </html>

GVHD: Th.S Võ Huỳnh Trâm

Trang 22


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

Mã mẫu
<html>
<head>
<title>Du lịch chợ lớn</title>
<!-- Thẻ Lệnh Miêu Tả HTML -->
<!-- Định hình trang mạng -->
<style>
Thẻ Lệnh css
</style>
<style scr=style.css></style>
<!--Mả Javascript-->
<script language=javascript>
Mả Lệnh Javascript
</script>

<script language=javascript scr=script.js></script>
</head>
<body>
<article>Chào mừng bạn đến với du lịch chơ lớn </article>
<footer> Địa chỉ: 192 – 194 Sư Vạn Hạnh, Phường 9, Q5, Tp.
Hồ Chí Minh </footer>
</body>
</html>

2.1.2.

Giới thiệu CSS3

a. Khái niệm
CSS (Cascading Style Sheets) được hiểu một
cách đơn giản đó là cách mà chúng ta thêm các kiểu
hiển thị (font chữ, kích thước, màu sắc...) cho một tài
liệu Web. CSS3 là phiên bản thứ 3 trong quá trình phát
triển của CSS

Hình II.3: Logo CSS3

GVHD: Th.S Võ Huỳnh Trâm

Trang 23


Phát triển phần mềm quản lý tour du lịch dùng HTML5&CSS3

b. Giới thiệu

CSS quy định cách hiên thị của các thẻ HTML bằng cách qui định
các thuộc tính của các thẻ(font, color, ..), để cho thuận tiện bạn có thể đặt
toàn bộ các thẻ của css nằm trong một tập tin co phần mở rộng là *.css.
CSS phá vỡ giới hạn trong thiết kế web, bởi vì chỉ cần 1 tập tin
CSS là bạn có thể quản lý toàn bộ định dạng và bố trì bố cục trên nhiều
trang khác nhau. Các nhà phát triển web có thể định nghĩa sẵn thuột tính
của một thẻ HTML nào đó và sau đó nó có thể dùng lại ở nhiều nơi khác
nhau.
Có nhiều cách cho phép nhà phát triển khai báo các định dạng
CSS, chẳng hạn như: khai báo một thẻ <style></style> trong nội dung của
thẻ <head></head>, có thể tạo ra một tập có phần mở rộng là *.css rồi sau
đó cần dùng tại tập tin nào thì chỉ dường dẫn từ tập tin đó đến thư mục
chứa tập tin *.css hoặc định nghĩa những định dạng CSS trong chính mỗi
thẻ HTML được sử dụng.
Tuy có những cách đặt các định dạng CSS khác nhau, nhưng với
những cách đặt như vậy sẽ có một mức độ ưu tiên khác nhau cho từng
cách đặt, như: style đặt trong từng thẻ riêng biệt -> style đặt trong phần
head -> style đặt trong tập tin mở rộng *.css - > style mặc định của trình
duyệt, mức độ giảm dần từ trái sang phải.
Cùng với sự phát triển của công nghệ Web, thì CSS3 cũng phát
triển không ngừng, với hơn mười lăm năm phát triển, nhưng CSS có
những tiến bộ vượt bậc trong lĩnh vực Web, ngoài những tính năng cũ
được cải tiến, CSS3 còn cho ra đời những tính năng mới rất hấp dẫn và
mang tính cạnh tranh cao.

GVHD: Th.S Võ Huỳnh Trâm

Trang 24



×