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

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

Mục Lục

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

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

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

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

Chương I: Cơ sở lý thuyết

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ỉ http://snaps.php.net 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ỗ

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

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

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 https://jQuery.com

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

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

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

$ (‘#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

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ư