Nghiên cứu và xây dựng web mobile nghe nhạc bằng jquery mobile

Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Mục Lục
Mục Lục

1

Chương I: Cơ sở lý thuyết............................................................................5
I.Ngôn ngữ HTML và CSS:........................................................................................................................5
II.Ngôn ngữ PHP&MySQL:.......................................................................................................................5
III.Tổng quan về javascript:......................................................................................................................6

Chương II: Tổng quan về JQuery................................................................8
I.Giới thiệu về JQuery..............................................................................................................................8
I.1. Khái niệm về JQuery:.....................................................................................................................8
I.3. Tại sao phải dùng JQuery...............................................................................................................9
I.4. JQuery làm được những gì.............................................................................................................9
II. Nguyên lý hoạt động của JQuery.......................................................................................................10
II.1. Cú pháp và đối tượng..................................................................................................................10
II.2. Điều khiển CSS của đối tượng.....................................................................................................10
II.3. Gắn sự kiện và xử lý sự kiện........................................................................................................11
II.4. Một vài hàm API phổ biến thường dùng.....................................................................................11

Chương III: Tổng quan về Jquery Mobile................................................12
I.Đặc trưng của Web Mobile hiện nay:..................................................................................................12
II. Giới thiệu về Jquery Mobile :.............................................................................................................13
III.Khái niệm về Jquery Mobile:..............................................................................................................14
IV.Các tính năng cơ bản của Jquery Mobile:..........................................................................................14
V.Hỗ trợ trình duyệt Jquery Mobile:......................................................................................................15
VI.Tìm hiểu về Jquery Mobile................................................................................................................15
VI.1. Jquery làm được những gì:........................................................................................................15

VI.2. Các thành phần trong Jquery Mobile:........................................................................................16

Chương IV: Phân tích yêu cầu và triển khai hệ thống xây dựng Demo..18
Page 1


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile
I.Phân tích yêu cầu hệ thống:................................................................................................................18
II.Triển khai hệ thống:............................................................................................................................19
III.Chương trình Demo...........................................................................................................................19

Chương V : Tổng kết 21
I.Ưu nhược điểm:..................................................................................................................................21
II. Hướng phát triển:..............................................................................................................................21
III. Bảng phân công công việc.................................................................................................................22

Danh mục Bảng - Hình

Mục Lục

1
Page 2


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Chương I: Cơ sở lý thuyết............................................................................5
I.Ngôn ngữ HTML và CSS:........................................................................................................................5
II.Ngôn ngữ PHP&MySQL:.......................................................................................................................5
III.Tổng quan về javascript:......................................................................................................................6

Chương II: Tổng quan về JQuery................................................................8
I.Giới thiệu về JQuery..............................................................................................................................8
I.1. Khái niệm về JQuery:.....................................................................................................................8
Hình 1: Các địa chỉ có thể sử dụng trực tiếp JQuery...............................................................................8
I.3. Tại sao phải dùng JQuery...............................................................................................................9
I.4. JQuery làm được những gì.............................................................................................................9
II. Nguyên lý hoạt động của JQuery.......................................................................................................10
II.1. Cú pháp và đối tượng..................................................................................................................10
Hình 2: Bảng liệt kê các tiêu chí chọn đối tượng..................................................................................10
II.2. Điều khiển CSS của đối tượng.....................................................................................................10
II.3. Gắn sự kiện và xử lý sự kiện........................................................................................................11
II.4. Một vài hàm API phổ biến thường dùng.....................................................................................11

Chương III: Tổng quan về Jquery Mobile................................................12
I.Đặc trưng của Web Mobile hiện nay:..................................................................................................12
II. Giới thiệu về Jquery Mobile :.............................................................................................................13
III.Khái niệm về Jquery Mobile:..............................................................................................................14
IV.Các tính năng cơ bản của Jquery Mobile:..........................................................................................14
V.Hỗ trợ trình duyệt Jquery Mobile:......................................................................................................15
VI.Tìm hiểu về Jquery Mobile................................................................................................................15
VI.1. Jquery làm được những gì:........................................................................................................15
Hình 3: Bảng tóm tắt các thành phần giao diện.....................................................................................16
VI.2. Các thành phần trong Jquery Mobile:........................................................................................16

Page 3


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile
Hình 4: Cách sử dụng các thuộc tính data-*.........................................................................................17

Hình 5 : Một số phương thức đặc trưng của $.mobile...........................................................................18

Chương IV: Phân tích yêu cầu và triển khai hệ thống xây dựng Demo..18
I.Phân tích yêu cầu hệ thống:................................................................................................................18
II.Triển khai hệ thống:............................................................................................................................19
III.Chương trình Demo...........................................................................................................................19
Hình 6 : Demo trên localhost................................................................................................................20
Hình 7 : Demo trên phần mềm giả lập mobile sau khi up lên host........................................................21

Chương V : Tổng kết 21
I.Ưu nhược điểm:..................................................................................................................................21
II. Hướng phát triển:..............................................................................................................................21
III. Bảng phân công công việc.................................................................................................................22

Page 4


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Chương I: Cơ sở lý thuyết
I. Ngôn ngữ HTML và CSS:
HTML là viết tắt của Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu
văn bản). Một tài liệu HTML thường có đuôi mở rộng là .html hoặc .htm và tất nhiên
đó là 1 trang web. Các trang HTML nói riêng và các trang web nói chung (.php,
.asp, ...) có tình chất của một văn bản như các file txt hay .doc chỉ có điều nó phức tạp
và đa dạng hơn. Các trang web HTML có thể đọc được bằng các trình duyệt web
(Web Browse) khác nhau và phổ biến nhất là Internet Explorer (IE). Ngôn ngữ
HTML có ưu điểm là rất đơn giản và có thể chạy tốt với nhiều hệ điều hành và nhiều
trình duyệt web khác nhau. Tuy mỗi trình duyệt do 1 hãng khác nhau sản xuất và có 1
cách biên dịch trang web khác nhau nhưng nói chung đều cho 1 kết quả tương tự

nhau. Ngòai ra HTML được sọan thảo rất đơn giản, không cần chương trình chuyên
dụng, chỉ cần notepad hoặc bất kỳ chương trình soạn thảo văn bản nào.
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file
text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS.
Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font
của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v.. Trước đây khi chưa có CSS,
những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với
nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình
bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn
cả là dễ chỉnh sửa hơn. Có 3 cách để định dạng trang web :
-

Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTM
Nhúng vào trang web
Liên kết đến một file biệt lập

II. Ngôn ngữ PHP&MySQL:
PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập trình
kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho
máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất thích hợp với web và có
thể dễ dàng nhúng vào trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc
độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm
tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một
ngôn ngữ lập trình web phổ biến nhất thế giới.
Hiện nay phiên bản tiếp theo của PHP đang được phát triển, PHP 6 bản sử dụng
thử đã có thể được download tại địa chỉ . Phiên bản PHP 6 được
kỳ vọng sẽ lấp đầy những khiếm khuyết của PHP ở phiên bản hiện tại, ví dụ: hỗ trợ
namespace (hiện tại các nhà phát triển vẫn chưa công bố rõ ràng về vấn đề này); hỗ

Page 5

Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

trợ Unicode; sử dụng PDO làm API chuẩn cho việc truy cập cơ sở dữ liệu, các API cũ
sẽ bị đưa ra thành thư viện PECL...
Rất nhiều nhà phát triển ứng dụng và quản lý dự án có quan điểm rằng PHP vẫn
chưa sẵn sàng cho cấp doanh nghiệp (enterprise) và trên thực tế, PHP vẫn chưa xâm
nhập sâu được vào thị trường này. Chính vì thế, Zend đã tiến hành nhiều biện pháp
nhằm chuẩn hóa PHP, tạo được sự tin cậy hơn cho giới người dùng cao cấp.
Zend Platform là một bộ sản phẩm giúp quản lý hệ thống ứng dụng PHP,
nâng cao hiệu suất, tăng tốc độ của ứng dụng PHP.
•

Zend Framework là một tập hợp các lớp, các thư viện lập trình viết bằng
PHP (PHP 5) nhằm cung cấp một giao diện lập trình chuẩn cho các nhà phát
triển ứng dụng.
•

Ngoài ra, một số framework khác cũng đã được phát triển nhằm hỗ trợ lập trình
PHP ở cấp doanh nghiệp, trong đó đáng chú ý có thể kể đến là CodeIgniter, CakePHP,
Symfony, Seagull...
MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và
được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL
là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên
nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh.Với tốc độ
và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên
internet. MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ.
Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ
điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell

NetWare, SGI Irix, Solaris, SunOS, ...
Do PHP kết hợp với MySQL là nền tảng chéo. Bạn có thể phát triển trong
Windows và phục vụ trên nền tảng Unix. PHP chạy trên nhiều nền tảng khác nhau:
windows, Linux, Unix,… PHP tương thích với hầu hết các máy chủ được sử dụng
ngày nay.Miễn phí tải về từ các nguồn tài nguyên chính của PHP. Dễ dàng tìm hiểu
và chạy ở phía máy chủ.
III. Tổng quan về javascript:
- JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối
tượng, ví dụ đối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript
không là ngôn ngữ hướng đối tượng như C++ hay Java do không hỗ trợ các lớp hay tính
thừa kế.
- JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng
này cho phép JavaScript trở thành một ngôn ngữ script động.
- Giống với HTML và Java, JavaScript được thiết kế độc lập với hệ điều hành. Nó
có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài ra
JavaScript giống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của
người dùng.

Page 6


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

- Các trình duyệt web như Nescape Navigator 2.0 trở đi có thể hiển thị những câu
lệnh JavaScript được nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server
sẽ gửi đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua
mạng tới client. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML
và xử lý các câu lệnh JavaScript khi nào chúng xuất hiện.
- Các câu lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho
các sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang.

Ví dụ bạn có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà không cần
đến bất cứ một quá trình truyền trên mạng nào. Trang HTML với JavaScript được nhúng
sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa
vào là không hợp lệ.

Page 7


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Chương II: Tổng quan về JQuery
I. Giới thiệu về JQuery
I.1. Khái niệm về JQuery:
Với sự phát triển rất mau lẹ của Internet, người dùng ngày càng quan tâm hơn đến
hình thức của một trang web. Trước đây một trang web chỉ cần có banner, nội dung và ít
footer hời hợt là đã được cho là một trang web hoàn chỉnh. Nhưng bây giờ trang web
đó phải có banner bắt mắt, nội dung hay và còn nhiều hiệu ứng lạ mắt khác nữa thì mới
có thể thu hút được người đọc.
Chính vì thế những web designer bắt đầu chú ý đến các thư viện JavaScript mở như
jQuery để tạo ra các hiệu ứng có thể tương tác trực tiếp với người đọc một cáchnhanh
chóng và dễ dàng hơn rất nhiều là sử dụng thuần JavaScrip
JQuery là một Javascript Framework. Nó là một bộ thư viện được xây dựng để hỗ trợ
các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. JQuery thêm
tương tác Ajax vào trong trang web của bạn, đơn giản hóa cách viết Javascript và tăng tốc
độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức so với cách viết
javascript thông thường.
JQuery được phát triển bởi John Resigvào năm 2006 và sau 6 năm giờ nó đã
trở thành một bộ thư viện nổi tiếng với hàng chục nghìn plugin hay, hàng triệu người
sửdụng, và hầu hết các website hiện nay đều ứng dụng nó.
JQuery có mã nguồn mở và hoàn toàn miễn phí, bạn có thể download nó tại

.
Hoặc có thể sử dụng trực tiếp JQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau

Hình 1: Các địa chỉ có thể sử dụng trực tiếp JQuery
I.2. Sử dụng JQuery cần biết những gì:
JQuery không phải là một ngôn ngữ mới mà chỉ là thư viện hàm javascript. jQuery
hướng tới mục đích làm đơn giản hóa những công việc phức tạp trước đây khi
dùng javascript để điều khiển DOM, CSS,… Do vậy, để học jQuery bạn cần tối thiểu
nắm bắt được những kiến thức sau:
- HTML
- JAVASCRIPT
- CSS

Page 8


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

I.3. Tại sao phải dùng JQuery
jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang
web, giúp tiết kiệm thời gian và công sức so với cách viết javascript thông thường. Bên
cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt
web.
Học jQuery rất đơn giản, nếu như bạn nắm vững CSS, bạn có thể tiếp cận và sử dụng
jQuery nhanh chóng.
Ngoài jQuery còn có các thư viện javascript nổi tiếng khác như mooTools, Prototype,
Dojo... thế nhưng jQuery có vẻ thu hút các web designer hơn là vì nó có các ưu điểm.
Ưu điểm của jQuery:
- Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX…)
-

Tương thích nhiều trình duyệt web phổ biến.

-

Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.

-

Ít xung khắc với các thư viện Javascript khác.

-

Plugin phong phú.

I.4. JQuery làm được những gì
- Hướng tới các thành phần trong tài liệu HTML: Nếu không sử dụng thư viện
JavaScript này, bạn phải viết rất nhiều dòng code mới có thể đạt được mục tiêu là di
chuyển trong cấu trúc cây (hay còn gọi là DOM = Document Object Model) của một tài
liệu HTML và chọn ra các thành phần liên quan. Jquery cho phép bạn chọn bất cứ
thành phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS.
- Thay đổi giao diện của một trang web: CSS là công cụ rất mạnh để định dạng một
trang web nhưng nó có một nhược điểm là không phải tất cả các trình duyệt đều hiển thị
giống nhau. Cho nên jQuery ra đời để lấp chỗ trống này, vì vậy các bạn có thể sử dụng nó
để giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jQuery cũng
có thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần
nào của tài liệu HTML ngay cả khi trang web đó đã được trình duyệt load thành công.
- Thay đổi nội dung của tài liệu: Jquery không phải chỉ có thể thay đổi bề ngoài của
trangweb, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code.
Nó có thể thêm hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi

sang hình khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của
một trang web cũng có thể được viết lại và mở rộng. Tất cả những điều này bạn hoàn
toàn có thể làm được nhờ sự giúp đỡ của API (Application Programming Interface =
Giao diện lập trình ứng dụng).
- Tương tác với người dùng: Cho dù công cụ bạn dùng có mạnh mẽ đến mấy, nhưng
nếu bạn không có quyền quyết định khi nào nó được sử dụng thì công cụ đó cũng coi như
bỏ. Với thư viện javaScript như jQuery, nó cho bạn nhiều cách để tương tác với người
dùng ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra. Nhưng cái
hay của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event

Page 9


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Handlers. Hơn nữa Event Handler API sẽ bảo đảm rằng trang web của bạn tương thích
hầu hết với các trình duyệt, điều này đã và đang làm đau đầu rất nhiều các web designer.
- Tạo hiệu ứng động cho những thay đổi của tài liệu: Để tương tác tốt với người
dùng, các web designer phải cho người dùng thấy được hiệu ứng gì sẽ xảy ra khi họ làm
một tác vụ nào đó. Jquery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần,
chạy dọc chạy ngang v.v.. và nếu vẫn chưa đủ, nó còn cho phép bạn tự tạo ra các hiệu
ứng của riêng mình.
- Lấy thông tin từ server mà không cần tải lại trang web: Đây chính là công nghệ
ngày càng trở nên phổ biến Asynchronous JavaScript And XML (AJAX), nó giúp người
thiết kế web tạo ra những trang web tương tác cực tốt và nhiều tính năng. Thư
viện jQuery loại bỏ sự phức tạp của trình duyệt trong quá trình này và cho phép người
phát triển web có thể tập trung vào các tính năng đầu cuối. Đơn giản hoá các tác vụ
javaScript. Ngoài những tính năng như đã nêu ở trên, jQuery còn cho phép bạn viết code
javaScript đơn giản hơn nhiều so với cách truyền thống như là các vòng lặp và điều khiển
mảng.

II. Nguyên lý hoạt động của JQuery
II.1. Cú pháp và đối tượng
JQuery sử dụng cùng một cách như CSS để lựa chọn những phần tử HTML ( thẻ
HTML) và thực hiện vài việc gì đó lên những đối tượng được chọn. Việc chọn đối tượng
có cùng đặc điểm(nhiều thành phần). Nguyên tắc để chọn cụ thể như sau:
Cú pháp: $ (doi_tuong)
$

: Ký tự bắt đầu của JQuery trong việc xác định đối tượng.

(doi_tuong): Tiêu chí để xác định đối tượng.
Sau đây là bảng liệt kê các tiêu chí chuẩn mẫu để chọn đối tượng :
$ (this)

Chọn đối tượng hiện tại ( đối tượng đặc biệt) | đơn lẻ

$ (document)

Chọn đối tượng toàn bộ tài liệu ( đối tượng đặc biệt) |
đơn lẻ

$ (window)

Chọn đối tượng về cửa sổ hiện hành (đối tượng đặc biệt) |
đơn lẻ

$ (‘p’)

Chọn tất cả thẻ

| nhiều thành phần

$ (‘.ClassName)

Chọn tất cả thẻ HTML có class=”ClassName’ | nhiều
thành phần

$ (‘#IdValue’)

Chọn thẻ HTML có id=’IdValue’ | đơn lẻ
Hình 2: Bảng liệt kê các tiêu chí chọn đối tượng

II.2. Điều khiển CSS của đối tượng
II.2.1. Lấy giá trị của một thuộc tính CSS
Page 10


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Khi dùng JQuery, việc tác động trực tiếp và lấy giá trị một thuộc tính CSS của đối
tượng được chọn vô cùng đơn giản vì bạn sẽ sử dụng tên thuộc tính và giá trị lấy được sẽ
có định dạng y như định nghĩa CSS thuần.
Cú pháp:

$ (doi_tuong).css(‘ten_css’)

doi_tuong : là tiêu chí xác định đối tượng
ten_css

: là tên thuộc tính css như font-size, color, …

II2.2. Đặt giá trị mới cho CSS
Tương tự như lấy giá trị của thuộc tính CSS, việc gán giá trị cho nó cũng khá là đơn
giản.
Cú pháp:

$ (doi_tuong). css(‘ten_css’,’gia_tri’)

doi_tuong : là tiêu chuẩn xác định đối tượng.
ten_css

: là tên của thuộc tính css như font-size, color,…

gia_tri

: là giá trị mà bạn muốn gán cho CSS

II.3. Gắn sự kiện và xử lý sự kiện
II.3.1. Gán sự kiện vào đối tượng:
Phần này sẽ trình bày việc dùng jQuery để gán sự kiện lên đối tượng và điều khiển
xử lý sự kiện đó khi nó xảy ra. Nội dung ở đây đề cập đến chỉ bao gồm những cách dùng
phổ thông nhất để giúp bạn nắm bắt và làm quen. Những nội dung chi tiết hơn về các sự
kiện sẽ được đề cập đầy đủ trong những phần tiếp theo trong tài liệu này.
Cú pháp : $ (doi_tuong).ten_su_kien(‘ham_dieu_khien’);
doi_tuong

: tiêu chí xác định đối tượng như đã nói ở trên.

ten_su_kien

: tên của sự kiện.

ham_dieu_khien : hàm điều khiển của sự kiện khi sự kiện phát sinh
II.3.2. Hủy sự kiện vào đối tượng :
Khi đã gán sự kiện cho một đối tượng rồi, nhưng trong một số trường hợp hoặc vì
vài lý do nào đó mà bạn muốn hủy sự kiện đó thì jQuery giúp bạn làm việc này khá đơn
giản
Cú pháp : $ (doi_tuong).unbind(ten_su_kien) ;
doi_tuong

: tiêu chí xác định đối tượng.

ten_su_kien : tên sự kiện theo chuẩn javascript như click, focus, load,….
Nếu muốn hủy toàn bộ sự kiện của một đối tương, ta dùng cú pháp sau:
$ (doi_tuong).unbind();
II.4. Một vài hàm API phổ biến thường dùng
Đây là danh sách những hàm API jQuery hay dùng nhất để bạn có thể tham khảo
nhanh và phục vụ vài mục đích đơn giản trong quá trình làm quen với jQuery cũng như
Page 11


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

làm cái bài tập. Cũng như những nội dung bên trên, những cách dùng liệt kê trong phần
này cũng chỉ là những trường hợp phổ thông nhất.
II.4.1 Hàm .fadeIn()
Hiệu ứng hiên thị dần dần một đối tượng từ trạng thái trong suốt. Nghĩa là trạng thái
ban đầu của đối tượng phải là trong suốt (opacity=0).
Cú pháp: $ (doi_tuong).fadeIn(thoi_gian, dieu_khien);
thoi_gian
: thời gian chuyển, có thể dùng sso(1/1000 giây) hoặc chuỗi ‘slow’ và

‘fast’.
dieu_khien : làm hàm được thực thi sau khi quá trình đổi kết thúc. Hàm này có

thể bỏ trống.
II.4.2. Hàm .fadeOut()
Hàm này có tác dụng gây hiệu ứng ngược lại với hàm .fadeIn(), nghĩa là nósẽ làm
cho một đối tượng trở nên trong suốt từ từ. Các tham số và cách sử dụng ý như .fadeIn().
II.4.3 Hàm .fadeTo()
Hàm này có thể sử dụng cho cả hai trường hợp .fadeIn() và .fadeOut()khi nó hướng
tới mục đích chuyển đổi tự trạng thái hiện tại đến một trạng thái được chỉđịnh. Tùy vào
giá trị hiện tại và giá trị đến mà sẽ có hiệu ứng fadeIn() hay .fadeOut()
Cú pháp : $ (doi_tuong).fadeTo(thoi_gian, dich_den, dieu_khien);
thoi_gian
: thời gian chuyển, có thể sử dụng số (1/1000 giây) hoặc chuỗi ‘slow’
và ‘fast’.
dieu_khien : là hàm được thự thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ
trống.
dich_den : có giá trị từ 0-1( tương ứng 0% -> 100%) là độ fade muốn chuyển đến.
II.4.4. Hàm .show()
Về bản chất nếu không có tham số thì hàm này sẽ gọi .css('display','block'). Còn nếu
có tham số như cú pháp dưới đây thì nó hoạt động tương tự như .fadeIn().
Cú pháp : $ (doi_tuong).show(thoi_gian, dieu_khien);
thoi_gian
: thời gian chuyển, có thể sử dụng số (1/1000 giây) hoặc chuỗi ‘slow’
và ‘fast’.
dieu_khien : là hàm được thự thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ
trống.
II.4.5 Hàm .hide()
Trái ngược với .show(), nếu không có tham sốthì hàm này sẽ gọi.css('display',
'none'). Còn nếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự như

.fadeOut().

Chương III: Tổng quan về Jquery Mobile
I. Đặc trưng của Web Mobile hiện nay:
I.1. Tối ưu chạm màn hình – Fingertip Optimization

Page 12


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Khi thực hiện một cuộc khảo sát cho các web sử dụng cho điện thoại (mobile
website), hiển nhiên tất cả đều được xây dựng để điều hướng với chạm tay. Một số yếu
tố gồm, ô tìm kiếm và các hình ảnh được làm đủ lớn để ngón tay có thể chạm vào.
Một phản ứng khi chạm vào màn hình trên thiết bị di động rõ ràng là thói quen của
người dùng ngày nay, vì thế luôn chú ý tới điều này khi thiết kế cho mobile website.
I.2. Tối giản
Tìm cách thu hút sự tập trung của người sử dụng mobile trên một màn hình nhỏ là
một thách thức lớn. Sự phức tạp khi sử dụng chỉ làm khó người dùng khi họ sử dụng.
Vì lý do này, hầu hết các mobile website đều có những thiết kế layout đơn giản. Một
bản rút gọn ở thanh điều hướng (so với web trên pc) được sử dụng, nó giống như một
phiên bản thu nhỏ, giúp người dùng tiếp cận với những thông tin cần thiết nhất, phù hợp
với thời điểm người dùng sử dụng mobile (nhanh gọn, tức thì).
I.3. Không gian trống – White Space
Không gian trống là điều PHẢI có cho một thiết kế web tốt, và nó có ý nghĩa đặc biệt
quan trọng trong lĩnh vực di động. Bất cứ trang web nào thiết kế cho mobile mà sử dụng
quá nhiều hình ảnh, sắp xếp lộn xộn, chật chội đều bị người dùng bỏ qua ngay lập tức.
I.4. Tăng cường video và hình ảnh
Với sự phát triển của công nghệ không dây, dung lượng dần dần sẽ không phải là
một rào cản lớn. Chúng ta có thể thoải mái với những sáng tạo thị giác. Chúng ta không

ngần ngại phát triển các dịch vụ trên mobile dành cho thư viện video, hình ảnh và các
hình thức khác.
I.5. Tương tác với mạng xã hội
Bản chất của việc dùng điện thoại là để kết nối, vì thế các trang web sử dụng trên
mobile đều tìm cách liên kết các mạng xã hội, kết nối Facebook, Linking, Following trên
Twitter. Các chủ doanh nghiệp không muốn bỏ lỡ cơ hội kết nối với khách hàng của họ
hàng ngày, hàng giờ.
II. Giới thiệu về Jquery Mobile :
Ngày nay, với sự phát triển vượt bậc của các smartphone và tablet, chúng ta có thể
truy cập website ở bất cứ lúc nào. Tuy nhiên, một nhược điểm rất lớn của các website
(đặc biệt là website Việt Nam) sử dụng Flash quá nhiều. Điều này đã làm cho các thiết bị
di động gặp khó khăn trong quá trình truy cập (IOS không hỗ trợ chạy Flash khi lướt
web, nếu muốn các bạn phải cài đặt thêm plugin. Điều này sẽ rất khó khăn đối với một số
người không chuyên về tin học và sẽ làm giảm thời lượng Pin sử dụng). Chính vì vậy
Jquery Mobile đã ra đời.
Bên cạnh Sencha Touch, Jquery Mobile cũng được ủng hộ mạnh mẽ và phát triển
trên nền tảng Jquery. Tuy nhiên nó dễ chịu hơn so với Sencha Touch vì nó không ảnh
hưởng đến việc code chức năng web (PHP, ASP...). Cách sử dụng như chúng ta dùng
Jquery thông thường.

Page 13


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Jquery Mobile ra đời khoảng tháng 8/2010 nhưng đã phát triển rất nhanh do
tính phổ biến, mã nguồn mở và cú pháp tương tự Jquery, nhiều plugin miễn phí, hiệu ứng
chuyển động tốt. Và quan trọng hơn hết là tương thích với tất cả các thiết bị di động
smartphone trên nền IOS, Android, Blackberry...
Hiện tại Jquery Mobile vẫn đang được tiếp tục phát triển và hoàn thiện. Tuy

nhiên.trong tương lai không xa đây sẽ là một thư viện hỗ trợ mạnh mẽ công nghệ
HTML5 vàCSS3 cho các thiết bị cảm ứng.
jQuery Mobile, một khung công tác giao diện người dùng (UI), cho phép bạn viết
một ứng dụng web di động chức năng mà không cần viết một dòng mã JavaScript.
Trong bài này, hãy tìm hiểu về các tính năng của khung công tác này, gồm các trang cơ
bản, các thanh công cụ điều hướng, các nút điều khiển biểu mẫu và các hiệu ứng chuyển
tiếp. Để tìm hiểu jQuery Mobile, bạn sẽ cần:
- Tìm hiểu về HTML
- Hiểu các điều cơ bản về JavaScript
- Kiến thức cơ bản về Jquery
III.

Khái niệm về Jquery Mobile:

jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân
thiện với cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên các
máy điện thoại thông minh và các máy tính bảng. Khung công tác jQuery Mobile được
xây dựng trên đỉnh lõi jQuery và cung cấp một số phương tiện, gồm thao tác và chuyển
dịch DOM (Mô hình đối tượng tài liệu), HTML và XML, xử lý các sự kiện, thực hiện
truyền thông máy chủ bằng cách sử dụng Ajax, cũng như các hiệu ứng hình ảnh và hình
ảnh động cho các trang web. Bản thân khung công tác di động là một bản tải bổ sung,
riêng biệt có kích cỡ khoảng 12KB (đã rút gọn và nén) từ lõi jQuery có kích cỡ khoảng
25KB khi đã rút gọn/nén. Cũng như với phần còn lại của khung công tác jQuery,
jQueryMobile là thư viện được cấp phép kép (MIT và GPL), miễn phí.
IV. Các tính năng cơ bản của Jquery Mobile:
- Khá đơn giản: Khung công tác dễ sử dụng. Bạn có thể phát triển các trang chủ
yếu bằng cách sử dụng đánh dấu dựa vào mã JavaScript tối thiểu hoặc không dùng mã
này.
- Nâng cấp tăng dần và khả năng chịu lỗi: Trong khi jQuery Mobile sử dụng mã
HTML5, CSS3 và JavaScript mới nhất, không phải tất cả các thiết bị di động đều

cung cấp sự hỗ trợ như vậy. Triết lý của JQuery Mobile là hỗ trợ cả hai thiết bị có khả
năng cấp cao và khả năng cấp thấp hơn, chẳng hạn như những thiết bị không hỗ trợ
JavaScript và vẫn cung cấp các trải nghiệm tốt nhất có thể.
- Tính dễ dùng: jQuery Mobile được thiết kế với chủ ý dễ dùng. Nó có sự hỗ trợ
cho Các ứng dụng Internet phong phú có thể dễ dùng (WAI-ARIA - Accessible Rich
Internet Applications) để giúp làm cho các trang web có thể dễ dùng với khách truy
cập bị tàn tật nhờ sử dụng các công nghệ trợ giúp.

Page 14


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

- Kích cỡ nhỏ: Kích cỡ tổng thể của khung công tác di động jQuery là tương đối
nhỏ khoảng 12KB với thư viện JavaScript, 6KB với CSS, cộng với một số biểu tượng.
- Tạo chủ đề: Khung công tác này cũng cung cấp một hệ thống chủ đề, cho phép
bạn đưa ra kiểu dáng ứng dụng riêng của mình. Khi được dùng với các bộ công cụ
như là PhoneGap, có sử dụng các công nghệ web để xây dựng các ứng dụng độc lập,
khung công tác jQuery Mobile có thể giúp đơn giản hóa việc phát triển ứng dụng của
bạn.
V. Hỗ trợ trình duyệt Jquery Mobile:
Chúng tôi đã đi một chặng đường dài với sự hỗ trợ trình duyệt của thiết bị di động,
nhưng không phải tất cả các thiết bị di động đều cung cấp sự hỗ trợ cho HTML5, CSS 3
và JavaScript. Lĩnh vực này là nơi sự hỗ trợ nâng cấp tăng dần và khả năng chịu lỗi
của jQuery Mobile đi vào. Như đã nêu, jQuery Mobile hỗ trợ cả hai thiết bị có khả năng
cấp cao và cấp thấp, chẳng hạn như những thiết bị không hỗ trợ JavaScript. Nâng cấp
tăng dần có các nguyên tắc cốt lõi sau:
-

Tất cả các nội dung cơ bản nên có thể dễ dùng với tất cả các trình duyệt.

-

Tất cả các chức năng cơ bản nên có thể dễ dùng với tất cả các trình duyệt.

-

Bố trí nâng cao được cung cấp bởi CSS liên kết ngoài.

-

Hành vi nâng cao được cung cấp bởi JavaScript liên kết ngoài.

-

Các sở thích trình duyệt của người dùng cuối được tôn trọng.

-

Tất cả các nội dung cơ bản nên trình diễn (như đã thiết kế) trên các thiết bị cơ bản,
trong khi nhiều nền tảng và các trình duyệt nâng cao hơn sẽ dần dần được nâng
cấp bằng CSS và JavaScript liên kết ngoài, bổ sung.
JQuery Mobile hiện đang cung cấp sự hỗ trợ cho các nền tảng di động sau đây:
• Apple® iOS: iPhone, iPod Touch, iPad (tất cả các phiên bản).
• Android™: tất cả các thiết bị (tất cả các phiên bản).
• Blackberry®: Torch (phiên bản 6).
• Palm™: WebOS Pre, Pixi.
• Nokia®: N900 (đang xây dựng).

VI. Tìm hiểu về Jquery Mobile

VI.1. Jquery làm được những gì:
Query Mobile cung cấp sự hỗ trợ mạnh mẽ cho các loại phần tử giao diện người
dùng khác nhau. Hình dưới đây cho thấy một bản tóm tắt về các thành phần giao diện
người dùng đang được hỗ trợ hiện nay.

Page 15


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Hình 3: Bảng tóm tắt các thành phần giao diện
Các thanh công cụ, các nút ấn, các khung nhìn danh sách, các thẻ, các trình đơn bật
lên, các hộp thoại, các hiệu ứng chuyển tiếp, các ô cửa sổ chỉnh sửa và các phần tử biểu
mẫu đều được hỗ trợ. Hầu hết, nếu không phải tất cả, các phần tử giao diện người dùng
mà bạn cần cho các ứng dụng web di động của mình đều được cung cấp.
VI.2. Các thành phần trong Jquery Mobile:
VI.2.1. Các thuộc tính data - * của HTML5
jQuery Mobile dựa vào các thuộc tính data-*của HTML5 để hỗ trợ các phần tử
giao diện người dùng, các hiệu ứng chuyển tiếp và cấu trúc trang khác nhau. Các thuộc
tính này đang bị các trình duyệt không hỗ trợ chúng lặng lẽ loại bỏ. Bảng sau cho thấy
cách sử dụng các thuộc tính data-* để tạo ra các thành phần giao diện người dùng.
Thành phần

Thuộc tính data-* của HTML5
Page 16


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Các thanh công cụ đầu trang(Header)

và Chân trang(Footer)
Phần thân nội dung (content)
Các nút ấn (button)
Các nút ấn được nhóm lại

Các nút nhấn trực tiếp (inline button)

Phần tử biểu mẫu (trình đơn select)

Các khung nhìn danh sách cơ bản

Các hộp thoại

Các hiệu ứng chuyển tiếp (transition)

<div data-role=”header”>
<div data-role=”footer”>
<div data-role=”content”>
<a href=”index.html” data-role=”button” dataicon=”info”>Button</a>
<div data-role=”controlgroup”>
<a href=”index.html” data-role=”button”>Yes</a>
<a href=”index.html” data-role=”button”>No</a>
</div>
<div data-inline=”true”>
<a href=”index.html” data-role=”button”>Apple</a>
<a href=”index.html” data-role=”button” datatheme=”b”>Lemon</a>
</div>
<div data-role=”fieldcontain”>
<label for=”select-options” class=”select”>Choose a
option</label>

<select name=”select-option” id=”select-options”>
<option value=”option1”>Option 1</option>
<option value=”option1”>Option 2</option>
<option value=”option1”>Option 3</option>
</select>
</div>
<ul data-role=”listview”>
<li><a href=”index.html”>One</a></li>
<li><a href=”index.html”>Two</a></li>
<li><a href=”index.html”>Three</a></li>
</ul>
<a href=”foo.html” data-ref=”dialog”>Open dialog</a>
<a href=”dialog.html” data-role=”button” datainline=”true” data-ref=”dialog” dâttransition=”pop”>Open dialog</a>
<a href=”index.html” data-transition=”pop” dâtback=”true”>Open dialog</a>

Hình 4: Cách sử dụng các thuộc tính data-*
VI.2.2. $.mobile và sự kiện phương thức hỗ trợ
Đối tượng jQuery của JavaScript cũng liên quan đến ký hiệu $. Khung công tác
jQuery Mobile mở rộng lõi jQuery bằng các trình cắm thêm di động, gồm mobile hoặc
$.mobile có định nghĩa một số sự kiện và phương thức. Một số phương thức đặc trưng
của $.mobile được mô tả dưới đây.
Phương thức
$.mobile.changePage

Cách sử dụng
Để thay đổi lập trình từ trang này sang trang
khác

Page 17

Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Ví dụ: Để chuyển đến trang weblog.php khi sử
dụng hiệu ứng slide, sử dụng
$.mobile.changePage(“weblog.php”,”slice”)
$.mobile.pageLoading

Để hiển thị hoặc ẩn thông báo nạp trang
Ví dụ: Để ẩn thông báo sử dụng
$.mobile.pageLoading(true)

$.mobile.silentScroll

Để cuộn một vị trí Y cụ thể mà không tạo ra
các sự kiện cuộn
Ví dụ: Để cuộn đến vị trí Y 50, sử dụng
$.mobile.silentScroll(100)

$.mobile.addResolutionBreakpoints

Jquery Mobile đã định nghĩa một số điểm ngắt
cho các lớp min/max. Gọi phương thức này để
bổ sung các điểm ngắt
Ví dụ : Để bổ sung lớp min/max cho các chiều
rộng điểm ảnh 800, sử dụng
$.mobile.addResolutionBreakpoints(800)

$.mobile.activePage

Đề cập đến các trang đang hoạt động hiện nay

Hình 5 : Một số phương thức đặc trưng của $.mobile
Có một số sự kiện mà bạn có thể kết buộc chúng khi sử dụng phương thức bind()
hoặc live(), chẳng hạn như khởi tạo JQuery Mobile, sự kiện cảm ứng, thay đổi định
hướng,các sự kiện cuộn, các sự kiện hiện/ ẩn trang, các sự kiện khởi tạo trang và các sự
kiện hình ảnh động.

Chương IV: Phân tích yêu cầu và triển khai hệ thống xây dựng Demo
I.

Phân tích yêu cầu hệ thống:
- Yêu cầu đề tài : Xây dựng web mobile nghe nhạc cho thiết bị cầm tay sử dụng
thư viện JQuery Mobile.
-

Phương pháp nghiên cứu:
• Xác định vấn đề
• Thu thập thông tin
• Phân tích đánh giá
Page 18


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

• Xây dựng chương trình
II. Triển khai hệ thống:
Thông qua yêu cầu của đề tài, chúng em sử dụng ngôn ngữ PHP, XML, HTML,
javascript, CSS và thư viện JQuery Mobile để xây dựng chương trình Demo.
Các bước xây dựng chương trình :

-

Xây dựng giao diện các trang index, playlist bằng ứng dụng Codiqa có sắn
trên trang web jquerymobile.com.

-

Tải các thư viện của JQuery Mobile.

-

Tạo file XML để xây dựng danh sách.

-

Sử dụng javascript để hoàn thiện website.

-

Chạy Demo trên localhost với phần mềm Vertrigo.

-

Upload website lên host để test trực tiếp trên thiết bị cầm tay.

III. Chương trình Demo
III.1. Demo trên localhost với Vertrigo

Page 19

Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Hình 6 : Demo trên localhost

III.2. Demo trên phần mềm giả lập sau khi up lên host

Page 20


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

Hình 7 : Demo trên phần mềm giả lập mobile sau khi up lên host

Chương V : Tổng kết
I. Ưu nhược điểm:
Xây dựng website nghe nhạc bằng jquery về cơ bản đã thỏa mãn các yêu cầu của
một website nghe nhạc trên thiết bị cầm tay bình thường, bao gồm các chức năng như: có
các thể loại để lựa chọn, nghe nhạc, dừng nhạc, dễ sử dụng.
Tuy nhiên bên cạnh đó website cũng vẫn đang bộc lộ một số thiếu sót như mới
chỉ cung ứng các chức năng cơ bản, chưa có nhiều lựa chọn cho người nghe, khi cho
chạy bài hát thì vẫn chưa có giao diện nghe nhạc, giao diện vẫn còn chưa tốt, chưa có kết
nối CSDL để quản lý, các chức năng vẫn còn chưa ổn định.
Trong suốt quá trình làm việc, chúng em đã đạt một số thành quả như: hiểu rõ
những điều cơ bản về PHP, javascript , CSS, HTML .. bổ sung kiến thức cho chúng em
về thiết kế web.
Tuy mức độ của báo cáo còn khá nhiều hạn chế, do chúng em ít được tiếp xúc với
lập trình thiết kế Website. Nhưng chúng em hy vọng thông qua báo cáo này thì chúng em
có thể mang lại cho mọi người một cái nhìn khái quát, rõ ràng hơn về việc xây dựng các
trang web mobile bằng việc sử dụng thư viện JQuery Mobile

II. Hướng phát triển:
- Xây dựng được giao diện chuyên nghiệp, thân thiện với người dùng
- Có các chức năng upload, download, search,…
- Tạo tài khoản cho người sử dụng.
Page 21


Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile

III. Bảng phân công công việc
Thời gian

Nội dung công việc

Từ 19/12 đến 23/12

Tìm hiểu ngôn ngữ PHP,XML, CSS, HTML, javascript

Từ 24/12 đến 30/12

Tìm hiểu hệ thống, dịch tài liệu Jquery Mobile

Từ 31/12 đến 6/1

Phân tích và thiết kế giao diện website nghe nhạc theo yêu
cầu

Từ 7/1 đến hết

Xây dưng và demo chương trình

Thiết kế giao diện : Đỗ Văn Thanh Nho – Ngô Văn Việt
Xây dựng website : Nguyễn Hoàng An – Đặng Ngọc Trung
Trong suốt quá trình làm việc cả nhóm đều tham khảo đóng góp ý kiến giúp đỡ lẫn nhau,
cùng nhau hoàn thành các phần, bảng phân công chỉ mang tính chất đảm nhiệm trong
khâu trình bày.

Page 22