Tìm hiểu công nghệ web đa phương tiện và ứng dụng

Để hoàn thành luận văn này tôi chỉ áp dụng trên những tài liệu tham khảo không sao chép toàn bộ luận văn nào, những mô phỏng giải thích cũng như phần xây dựng giải pháp ứng dụng trong lu

LỜI CAM ĐOAN

Tôi xin cam đoan nội dung luận văn này do tôi thực hiện dưới sự hướng dẫn của PGS.TS Nguyễn Thị Hoàng Lan Để hoàn thành luận văn này tôi chỉ áp dụng trên những tài liệu tham khảo không sao chép toàn bộ luận văn nào, những mô phỏng giải thích cũng như phần xây dựng giải pháp ứng dụng trong luận văn hoàn toàn trung thực và là công trình nghiên cứu của riêng tôi

LỜI CẢM ƠN

Trước hết, em xin được chân thành gửi lời cảm ơn tới các thầy cô giáo trong trường Đại học Bách khoa Hà Nội nói chung và các thầy cô giáo trong Viện Công nghệ thông tin và Truyền thông nói riêng đã tận tình giảng dạy, truyền đạt cho

em những kiến thức và kinh nghiệm quý báu trong suốt quá trình học tập

Em cũng xin được gửi lời cảm ơn sâu sắc đến cô giáo PGS.TS Nguyễn Thị Hoàng Lan đã hết lòng giúp đỡ, hướng dẫn và chỉ bảo tận tình trong quá trình em

thực hiện luận văn tốt nghiệp

Xin được gửi lời cảm ơn chân thành tới Ban Giám hiệu, Ban thư viện và các thầy cô trong khoa Công nghệ thông tin trường ĐHSPKT Hưng yên đã tạo điều kiện thuận lợi giúp đỡ cho tôi trong quá trình triển khai thử nghiệm hệ thống Cuối cùng tôi xin cảm ơn gia đình, bạn bè đã quan tâm, động viên, đóng góp ý kiến và giúp đỡ em trong suốt quá trình học tập, nghiên cứu để hoàn thành luận văn tốt nghiệp này

MỤC LỤC

MỤC LỤC 3

DANH MỤC TỪ VIẾT TẮT 6

DANH MỤC BẢNG 7

DANH MỤC HÌNH 8

PHẦN MỞ ĐẦU 1

CHƯƠNG 1: TÌM HIỂU VỀ CÔNG NGHỆ WEB ĐA PHƯƠNG TIỆN 3

1.1 Tổng quan về công nghệ web đa phương tiện 3

1.1.1 khái niệm cơ bản web đa phương tiện 3

1.1.2 Đặc điểm của công nghệ web đa phương tiện 4

1.2 Tìm hiểu HTML5 4

1.2.1 Giới thiệu công nghệ HTML5 4

1.2.2 Các tính năng HTML5: 6

1.2.3 Tìm hiểu về một số thẻ mới của HTML5 8

1.2.3.1 Tính năng của các thẻ 8

1.2.3.2 Các vùng Article và Section 9

1.2.3.3 Các phần tử hình ảnh 11

1.2.3.4 Các phần tử đa phương tiện 11

1.2.3.5 Các phần tử video 28

1.3 Tìm hiểu về MySQL 30

1.3.1 Giới thiệu về MySQL 30

1.3.2 Quản trị cơ sở dữ liệu trong MySQL 30

1.4 Tìm hiểu về PHP 35

1.4.1 Giới thiệu về PHP 35

1.4.2 Ứng dụng PHP 36

CHƯƠNG 2: KHẢO SÁT YÊU CẦU WEBSITE TRƯỜNG ĐHSPKT HƯNG YÊN43 2.1 Khảo sát hệ thống 43

2.2 Đối tượng khảo sát 43

2.3 Thông tin khảo sát được 44

2.4 Hiện trang website của trường 46

2.5 Định hướng và phát triển quản trị CSDL tài liệu đa phương tiện cho website của trường ĐHSPKT Hưng yên 46

2.5.1 Sự cần thiết đối với cơ sở dữ liệu tài liệu đa phương tiện: 46

2.5.2 Xác định yêu cầu và nhiệm vụ chính của bài luận văn này là: 47

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG CSDL TÀI LIỆU ĐA PHƯƠNG TIỆN CHO WEBSITE TRƯỜNG ĐHSPKT HƯNG YÊN 48

3.1 Phân tích thiết kế hệ thống 48

3.1.1 Kiến trúc hệ quản trị cơ sở dữ liệu tài liệu đa phương tiện 48

3.1.2 Biểu đồ phân cấp chức năng của hệ quản trị CSDL 50

3.2 Xây dựng CSDL tài liệu đa phương tiện 51

3.2.1 Yêu cầu của hệ quản trị cơ sở dữ liệu tài liệu đa phương tiện 51

3.2.2 Mô hình hóa dữ liệu tài liệu đa phương tiện 51

3.2.3 Lưu trữ đối tượng đa phương tiện 52

3.3 Sơ đồ Uses cases các chức năng 53

3.3.1 Xây dựng các sơ đồ Uses cases 53

3.3.2 Chức năng người dùng 54

3.3.3 Chức năng đăng ký thành viên 55

3.3.4 Đăng nhập vào hệ thống 55

3.3.5 Các chức năng của người quản trị 56

3.3.6 Chức năng quản lý thành viên 57

3.3.7 Chức năng quản lý CSDL multimedia 58

3.3.8 Chức năng cập nhật video 59

3.3.9 Chức năng cập nhật âm thanh 59

3.3.10 Chức năng cập nhật văn bản , hình ảnh 60

3.4 Thiết kế xây dựng các bảng dữ liệu 60

3.5 Xây dựng mô hình dữ liệu quan hệ của CSDL tài liệu đa phương tiện 64

3.6 Cài đặt thực nghiệm 65

3.6.1 Cài đặt CSDL 65

3.6.2 Cài đặt các chức năng 67

3.6.3 Một số giao diện 68

KẾT LUẬN 79

TÀI LIỆU THAM KHẢO 81

DANH MỤC TỪ VIẾT TẮT

DANH MỤC BẢNG

Bảng 1-1: Bảng định danh 31

Bảng 1-2: Bảng phân quyền nhóm người dùng 32

Bảng 1-3: Bảng phân quyền móm quản trị hệ thống 32

Bảng 1-4: Bảng cấp quyền cho thành viên 33

Bảng 1-5: Bảng tham số 37

Bảng 3-1: Bảng quản lý thành viên quản trị 61

Bảng 3-2: Quản lý các file tài liệu download 61

Bảng 3-3: Bảng quản lý các thành viên người dùng 62

Bảng 3-4: Bảng quản lý nhóm multimedia 62

Bảng 3-5: Bảng quản lý video 63

Bảng 3-6: Bảng quản lý Audio 63

Bảng 3-7: Bảng quản lý ảnh 64

DANH MỤC HÌNH

Hình 2-1: Giao diện tìm kiếm tài liệu multimedia 44

Hình 3-1: Kiến trúc của hệ quản trị cơ sở dư liệu tài liệu đa pương tiện 48

Hình 3-2: Biểu đồ phân cấp chức năng 50

Hình 3-3 Sơ đồ hệ thống lưu trữ các file vật lý dữ liệu đa phương tiện 52

Hình 3-4: Sơ đồ Uses cases quản lý CSDL tài liệu 53

Hình 3-5: Sơ đồ use case người dùng 54

Hình 3-6 sơ đồ use case đăng ký thành viên 55

Hình 3-7: Sơ đồ đăng nhập 55

Hình 3-8: Sơ đồ use case Admin 56

Hình 3-9: Sơ đồ use case quản lý thành viên 57

Hình 3-10 Sơ đồ use case quản lý CSDL multimedia 58

Hình 3-11: Sơ đồ use case cập nhật video 59

Hình 3-12: Sơ đồ use case cập nhật âm thanh 60

Hình 3-13: Sơ đồ use case cập nhật văn bản , hình ảnh 60

Hình 3-14: Mô hình quan hệ CSDL 64

Hình 3-15 giao diện tạo CSDL database 65

Hình 3-16: Cập nhật CSDL database vào hệ thống 66

Hình 3-17: giao diện quản trị Multimedia 67

Hình 3-18: Giao diện đăng ký thành viên 68

Hình 3-19: Giao diện người dùng xem clip và download file 68

Hình 3-20: Giao diện xem tài liệu văn bản 69

Hình 3-21 Giao diện xem ảnh 70

CNTT đã được ứng dụng rất rộng rãi trong nhiều lĩnh vực khác nhau như kinh doanh, giáo dục, nông nghiệp, y học Trong lĩnh vực giáo dục bên cạnh đó là nhu cầu tìm kiếm thông tin phục vụ cho công việc học tập của sinh viên ngày một nhiều, phần lớn các trường đã số hóa tài liệu và xây dựng hệ thống website quản lý CSDL tài liệu, qua khảo sát nhu cầu tìm kiếm tài liệu học tập và nghiên cứu thực tế trong sinh viên cũng như cán bộ giảng viên của trường cùng với sự phát triển của Nhà Trường, được sự ủng hộ của ban lãnh đạo cùng toàn thể cán bộ, giảng viên và sinh viên của trường và nhà trường đã đầu tư trang thiết bị hệ thống máy chủ(sever) phục vụ cho lưu trữ cơ sở dữ liệu tài liệu đa phương tiện trên cơ sở sử dụng hệ thống website quản lý và cập nhật CSDL tài liệu đa phương tiện ( văn bản, sách điện tử, video, âm thanh, hình ảnh ),

Xuất phát từ nhu cầu tìm kiếm thông tin tài liệu để phục vụ nghiên cứu và

học tập tôi thực hiện đề tài luận văn “Tìm hiểu về công nghệ web đa phương tiên

và ứng dụng” Với mục đích xây dựng hệ thống CSDL tài liệu đa phương tiện cho

website trường Đại học SPKT Hưng Yên

Luận văn nhằm tìm hiểu về công nghệ web đa phương tiện và nghiên cứu xây dựng ứng dụng quản trị CSDL tài liệu đa phương tiện cho cho phép tìm kiếm, download và upload CSDL tài liệu đa phương tiện cho website của trường ĐHSPKT Hưng yên

o Mục tiêu nghiên cứu

- Tìm hiểu về công nghệ web đa phương tiện

- Tìm hiểu các công nghệ phát triển web đa phương tiện như HTML5, PHP

- Khảo sát yêu cầu của hệ thống website của trường ĐHSPKT Hưng yên

2

- Nghiên cứu giải pháp xây dựng hệ thống CSDL tài liệu đa phương tiện cho website Trường ĐHSPKT Hưng yên

- Thực nghiệm ứng dụng và đánh giá kết quả hệ thống CSDL tài liệu đa phương tiện

o Nhiệm vụ luận văn

- Tìm hiểu công nghệ và phát triển xây dựng hệ quản trị CSDL tài liệu đa phương tiện trên website hiện nay của trường ĐHSPKT Hưng yên

- Trình bày giải pháp xây dựng hệ thống CSDL tài liệu đa phương tiện cho website Trường ĐHSPKT Hưng yên

o Cấu trúc luận văn

Luận văn được chia thành những nội dung sau:

Chương 1: Tìm hiểu về công nghệ web đa phương tiện

Chương 2: Khảo sát yêu cầu website trường ĐHSPKT Hưng yên

Chương 3: Xây dựng hệ thông CSDL tài liệu đa phương tiện cho website trường ĐHSPKT Hưng yên

3

CHƯƠNG 1 TÌM HIỂU VỀ CÔNG NGHỆ WEB ĐA PHƯƠNG TIỆN

1.1 Tổng quan về công nghệ web đa phương tiện

1.1.1 Khái niệm cơ bản web đa phương tiện

Web đa phương tiện là web cho phép truyền tải nội dung bao gồm toàn bộ thông tin, dữ liệu, hình ảnh về các sản phẩm, dịch vụ và hoạt động muốn truyền đạt tới người truy cập Internet

Ban đầu, các trang Web là tĩnh người dùng gửi yêu cầu một tài nguyên nào

đó, và server sẽ trả về tài nguyên đó Các trang Web không có gì hơn là một văn bản được định dạng và phân tán Đối với các trình duyệt, thì các trang Web tĩnh không phải là các vấn đề khó khăn, và trang Web lúc đầu chỉ để thông tin về các sự kiện, địa chỉ, hay lịch làm việc qua Internet mà thôi, chưa có sự tương tác qua các trang Web Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML (Hyper Text Markup Language), ngôn ngữ đánh dấu siêu văn bản HTML rất đơn giản và

dễ dùng, và nó trở thành một ngôn ngữ rất phổ biến và cơ bản.[6]

Tuy nhiên không lâu sau đó nhu cầu về các trang Web động có sự tương tác ngày một tăng chính vì thế sự ra đời các công nghệ Web động là một điều tất yếu Web động là thuật ngữ được dùng để chỉ những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triển web

Với web động thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng truy vấn tới một trang web Trang web được gửi tới trình duyệt gồm những câu chữ, hình ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc ở nhiều hình thức khác nữa Những web cơ sở dữ liệu còn có thể thực hiện những chức năng truyền và xử lý thông tin CSDL tài liệu

Công nghệ web động được phát triển bằng các ngôn ngữ lập trình tiên tiến như PHP, ASP, ASP.NET, Java, CGI, Perl, và sử dụng các cơ sở dữ liệu quan hệ mạnh như Access, My SQL, MS SQL, Oracle, DB2

Web động có tính tương tác với người dùng cao, với web động hoàn toàn có thể dễ dàng quản trị nội dung.[7]

4

1.1.2 Đặc điểm của công nghệ web đa phương tiện

Công nghệ web đa phương tiện là web cho phép người dùng web tương tác với các thành phần đa phương tiện như (video, âm thanh, hình ảnh, văn bản), Trong phần dưới đây giới thiệu một số công nghệ thường dùng trong web đa phương tiện

Công nghệ MySQL và PHP đây cũng chính là sự kết hợp tuyệt vời giữa hai công nghệ đang được ưa chuộng nhất hiện nay trên thế giới là cho phép xây dựng web động đa phương tiện Một bộ đôi có nhiều điểm chung giống nhau như độc lập với hệ điều hành, mã nguồn mở, tiết kiệm chi phí, hỗ trợ tối đa các loại hàm trong PHP đôi với MySQL làm cho mọi thao tác trên dữ liệu trở nên nhanh chóng, phù hợp với xu thế thiết kế Web hiện nay là ưu tiên cho tốc độ lấy dữ liệu Hiện nay ngôn ngữ HTML5 có thêm nhiều tính năng cú pháp mới Bao gồm các thẻ mới như

<video>, <audio> và các thành phần <canvas>, cũng như sự tích hợp của đồ họa vector có khả năng mở rộng (Scalable Vector Graphics) nội dung (thay thế việc sử dụng thẻ chung <object>) và MathML cho các công thức toán học Những tính năng này được thiết kế để làm cho nó dễ dàng bao quát, xử lý đa phương tiện và nội dung

đồ họa trên web mà không cần phải dùng đến quyền sở hữu bổ sung

1.2 Tìm hiểu HTML5

HTML5 là ngôn ngữ cần thiết để xây dựng web đa phương tiện

1.2.1 Giới thiệu công nghệ HTML5

HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software Đây là phiên bản thứ 5 của ngôn ngữ HTML - được tạo ra năm 1990 và chuẩn hóa như HTML4 năm 1997 – HTML5 xuất hiện vào tháng 12 năm 2012, là 1 ứng viên được giới thiệu bởi World Wide Web Consortium (W3C) Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ nó dễ dàng đọc được bởi con người và luôn hiểu được bởi các thiết bị và các chương trình máy tính như trình duyệt web, phân tích cú pháp, v.v HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản

kế và các nhà phát triển ở mọi trình độ

Trong quá trình tạo trang này, tôi đụng phải CSS3, cần thiết để biểu thị đúng các trang HTML5 CSS3 là cần thiết cho định kiểu, chuyển hướng, và cảm nhận chung về trang HTML5 Các nhóm đặc tính của nó, mà bạn có thể tìm thấy tại trang web tham khảo CSS3 W3Schools, bao gồm một số phần tử có ích như nền, phông chữ, phông màn, và hình ảnh động

Đặc biệt, HTML5 có thêm nhiều tính năng cú pháp mới Chúng bao gồm các thẻ mới như <video>, <audio> và các thành phần <canvas>, cũng như sự tích hợp của đồ họa vector có khả năng mở rộng (Scalable Vector Graphics) nội dung (thay thế việc sử dụng thẻ chung <object>) và MathML cho các công thức toán học Những tính năng này được thiết kế để làm cho nó dễ dàng bao quát, xử lý đa phương tiện và nội dung đồ họa trên web mà không cần phải dùng đến quyền sở hữu bổ sung Các yếu tố mới khác, chẳng hạn như <section>, <article>, <header>

và <nav>, được thiết kế để làm phong phú thêm nội dung ngữ nghĩa của tài liệu Thuộc tính mới đã được giới thiệu với mục đích tương tự, trong khi một số yếu tố

và các thuộc tính đã được loại bỏ Một số yếu tố, chẳng hạn như <a>, <cite> và

<menu> đã được thay đổi, xác định lại hoặc chuẩn hóa APIs và Document Object

6

Model (DOM) không phải suy nghĩ muộn hơn quá nhiều, nhưng là bộ phận cơ bản của đặc điểm kỹ thuật HTML5 HTML5 cũng xác định cụ thể một số các xử lý cần thiết cho các tài liệu không hợp lệ để các lỗi cú pháp sẽ được xử lý thống nhất của tất cả các trình duyệt phù hợp và các tác nhân người dùng khác.[1]

Các ưu điểm của HTML5

1 Hoàn toàn miễn phí : HTML5 được cung cấp miến phí cho cả developers lẫn

người dùng, không như Flash, flash palyer thì miễn phí nhưng bộ phát triển lại có giá ở trên trời

2 HTML5 sẽ có lợi thế hơn về tính phổ biến khi bước vào môi trường di động Ví

dụ: Flash là plug-in còn HTML5 thì được trực tiếp render từ browser nên chắc chắn tính phổ biến sẽ cao hơn rất nhiều

3 HTML 5 đơn giản hơn Ví dụ : nếu bạn vẫn bực mình về DOCTYPE thì nay

 Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng

 Tăng cường khả năng truyền thông trên mạng

 Cải thiện khả năng lưu trữ chung

 Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền

 Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú và máy chủ

 Truy vấn dữ liệu đã được lưu trữ tốt hơn

 Cải thiện tốc độ nạp và lưu trang

7

 Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa là HTML5 có thể được định hướng nội dung

 Cải thiện xử lý biểu mẫu trình duyệt

 Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách

 Canvas và video, để thêm đồ họa và video mà không cần cài đặt các plug-in của bên thứ ba

 Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây

di động

 Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây

Các tính năng nổi bật của HTML5

1 Offline Storage : Giống như Cookie nhưng có khả năng lưu trữ lớn hơn rất

nhiều Với Offline Storage thì bạn có thể lưu các dữ liệu như ngày tháng, database của các ứng dụng, như email

2 Canvas drawing: Các trang web sử dụng HTML5 có thể sử dụng chức năng này

để dành sử dụng interactive pictures, charts and graphs, hay game components mà

ko cần phải cài thêm plug-in j cả How cool is that

3 Native video and audio streaming support: Tuy vẫn còn mới nhưng đầy hứa hẹn, hãy cùng hi vọng một ngày không xa, các trang như Youtube sẽ bỏ hẳn Flash

mà switch sang dùng HTML5

4 Geolocation: Khả năng định vị mở ra hàng loạt các ứng dụng khác như lọc kết

quả tìm kiếm, tag uploaded photo theo location Đây là một tính năng được cho là rất đáng giá

5 Smarter forms: các forrms bây giờ được kiểm soát tốt hơn về tính tập trung, xác

nhận dữ liệu, tương tác với các yếu tố khác cũng như gửi email, và nhiều hơn nữa HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn: Các trang được thiết kế bằng HTML5 có thể cung cấp một trải nghiệm giống như với các ứng dụng của máy

8

tính để bàn HTML5 cũng cung cấp phát triển nhiều nền tảng nâng cao bằng cách kết hợp khả năng của các API với sự có mặt ở khắp mọi nơi của trình duyệt Khi sử dụng HTML5, các nhà phát triển có thể cung cấp một trải nghiệm ứng dụng hiện đại.[1]

1.2.3 Tìm hiểu về một số thẻ mới của HTML5

Thẻ <div> đã đƣợc bổ sung bằng các thẻ <section> và <article> Ngoài ra các thẻ <video>, <audio>, <canvas>, và<figure> cũng đƣa ra sự mô tả chính xác hơn về các kiểu nội dung cụ thể

1.2.3.1 Tính năng của các thẻ

Vùng Header

Vùng Header ví dụ chứa tiêu đề và phụ đề trang Bạn sử dụng thẻ <header> để tạo ra nội dung cho vùng Header của trang Thẻ <header>có thể chứa thông tin mở về một <section> và <article> ngoài chính trang web đó Trang web đƣợc tạo ra ở đây có một vùng Headercho trang này, đƣợc hiển thị trong thiết

kế cao cấp, cũng nhƣ vùng Header ở bên trong vùng Article và Section Ví dụ 1 đƣa

ra một ví dụ đánh dấu thẻ <header>

Ví dụ 1 thẻ <header>

<header>

<h1>Heading Text</h1>

<p> Text or images can be included here</p>

<p> Logos are frequently placed here too</p>

Ví dụ3 thẻ <nav>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Our Products</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

1.2.3.2 Các vùng Article và Section

Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực

sự của trang Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung có thể đƣợc sử dụng độc lập với các nội dung khác đƣợc tìm thấy trên trang này Ví dụ, nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xác định nội dung duy nhất Thẻ <article> xác định nội dung có thể đƣợc gỡ bỏ và đƣợc đặt trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu

10

Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section Bạn tạo ra các vùng này bằng cách sử dụng thẻ <section> Một<section> chứa các vùng thành phần của nội dung trang web có liên quan Thẻ <section>— và thẻ <article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần này Thẻ <section> dùng cho nội dung tạo nhóm Nội dung cho cả hai thẻ <section> và thẻ <article> thường bắt đầu bằng một <header> và kết thúc bằng một<footer>, với nội dung cho thẻ này ở giữa

Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống như thẻ <article> có thể chứa các thẻ <section> Thẻ <section>nên được dùng để tạo nhóm các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới mà không ảnh hưởng đến ý nghĩa của nội dung Thẻ <article> như tên gọi của nó, cung cấp một gói thông tin đầy đủ Ngược lại, thẻ <section> chứa thông tin liên quan, trừ thông tin không thể được đặt trong một ngữ cảnh khác với chính

Ví dụ5 thẻ <figure> và thẻ <figcaption>

<figure>

<img src="/figure.jpg" width="304" height="228" alt="Picture">

<figcaption>Caption for the figure</figcaption>

</figure>

1.2.3.4 Các phần tử đa phương tiện

Các thẻ <section> và <article> cũng có thể chứa các phần tử phương tiện khác nhau HTML5 cung cấp các thẻ để truyền đạt nhanh nội dung của chúng Các phần tử đa phương tiện, chẳng hạn như âm thanh và video trước đây thường chỉ được nhúng vào, bây giờ có thể được sử dụng chính thống hơn

Thẻ <audio> xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ Thẻ <audio> có các thuộc tính để kiểm soát những gì, khi nào,

và làm thế nào để phát âm thanh Các thuộc tính là src, preload (nạp trước), control (điều khiển), loop(vòng lặp), và autoplay (phát tự động) Trong ví dụ

ở Ví dụ 6, âm thanh bắt đầu phát ngay sau khi tải trang này và sẽ phát liên tục, đồng thời hiển thị các nút điều khiển để người dùng có thể dừng lại hoặc phát lại âm thanh

12

Ví dụ 6 thẻ <audio>

<audio src=" audio-file.mp3" controls autoplay loop>

Your browser does not support the audio tag

</audio>

Dựa vào tên thẻ mà chúng ta biết được công dụng của thẻ này Với thẻ <audio> bạn có thể nhanh chóng chèn những bản nhạc yêu thích vào trang web của bạn Thẻ này được sử dụng rất đơn giản , rất giống với cách dùng thẻ <img>, chúng ta chỉ việc chèn thuộc tính src là đường dẫn đến file audio mà bạn muốn chia

sẻ là được

<audio width="300" height="32" src="audio-file.mp3"> </audio>

Ngoài ra bạn còn có thể chèn những dòng tin nhắn dự phòng cho trường hợp những trình duyệt nào không hỗ trợ thẻ này

<audio width="300" height="32" src="audio-file.mp3"> Xin lỗi, trình duyệt của bạn không hỗ trợ </audio>

13

Thẻ audio cũng hỗ trợ rất nhiều lựa chọn cho bạn Sau đây là một vài lựa chọn cho thẻ này :autoplayVới lựa chọn này trang web của bạn sẽ tự động chạy các file audio Đây là lựa chọn mà theo mình bạn nên cẩn trọng khi sử dụng,vì nó có thể gây phiên hà cho người dùng

<audio width="300" height="32" src="audio-file.mp3" autoplay="autoplay"> </audio>

Bạn có thể ngăn ngừa việc phát audio tự động bằng cách chèn autoplay=‖false‖ vào là được

loop

Khi bạn thêm thuộc tính này thì file audio sẽ tự động phát lại khi kết thúc

<audio width="300" height="32" src="audio-file.mp3" loop="loop">

Thuộc tính này có 3 giá trị : ―auto―, ―none―, ―metadata―

<audio width="300" height="32" src="audio-file.mp3" preload="auto"> </audio>

Các bạn nên nhớ điều này, đó là trình duyệt Safari mặc định sẽ ấn định thuộc tính preload là auto, vì thế nếu bạn không muốn dùng thuộc tính này có thể dùng preload=‖none‖

controls

Thẻ <video> cho phép bạn phát các đoạn video hoặc tạo luồng phương tiện trực quan Nó có tất cả các thuộc tính của thẻ <audio> cộng thêm ba thuộc tính nữa là: poster (quảng cáo), width (chiều rộng), và height (chiều cao) Thuộc

<video src="MyFirstMovie.ogg" controls="controls">

Your browser does not support the video tag

</video>

Giải thích code:

- Để nhúng video chúng ta bắt đầu bằng thẻ mở <video> và kết thúc bằng thẻ đóng </video>

- width và height quy định chiều rộng và chiều cao của video

- controls làm xuất hiện nút Play (bật video), Pause (tạm dừng), tùy chọn toàn

màn hình và nút điều khiển âm thanh

- Nguồn video đặt trong thẻ source, với đường dẫn cụ thể được quy định trong

thuộc tính src, trình duyệt dựa vào thuộc tính type để biết định dạng của

video

- Có 3 định dạng video được các trình duyệt hỗ trợ là: mp4, ogg và webm

Tuy nhiên không phải trình duyệt nào cũng hỗ trợ cả 3, có trình duyệt chỉ hỗ trợ 1 định dạng duy nhất

- Dòng cuối cùng sẽ xuất hiện trong trường hợp trình duyệt không hỗ trợ thẻ

video, thí dụ IE8 Hầu hết các trình duyệt phổ biến gồm: Google Chrome, FireFox, Opera, Safarivà IE9+ đều có hỗ trợ thẻ video

- Thuộc tính poster dùng để làm ảnh nền cho video, thí dụ video ở đầu bài sử

dụng poster là bức ảnh dưới đây:

16

Các định dạng video được hỗ trợ trên trình duyệt:

Trước tiên video được gán một id cụ thể, trong ví dụ này là myvideo

Video sẽ được lấy bằng lệnh document.getElemnetById("myvideo")

Sau đó video này sẽ được điều khiển thông qua các lệnh video.pause(), video.play(), video.width="xyz" , với xyz là giá trị cụ thể nào đó Các lệnh này

được lồng trong các hàm

Các button tương ứng khi được nhấn sẽ gọi các hàm này lên bằng lệnh onclick, ví

dụ: <button onclick="play();">Chạy</button> sẽ gọi hàm play() và chạy video

này

<video id="myvideo" width="250">

<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></source>

<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"></source>

<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"></source>

Ví dụ 8 thẻ <source>

<audio>

<source src="/music/good_enough.wma" type="audio/x-ms-wma">

<source src="/music/good_enough.mp3" type="audio/mpeg">

<p>Your browser does not support the HTML 'audio' element.</p>

</audio>

Thẻ <embed> định nghĩa nội dung nhúng có thể được đưa vào một trang —

ví dụ, một plug-in cho các tệp SWF của Adobe Flash Ví dụ 9 có chứa thuộc tính type (kiểu), xác định nguồn nhúng là một tệp Flash

Ví dụ 9 thẻ <embed>

<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

Ngoài các thuộc tính src và type, thẻ <embed> còn có thuộc tính height (chiều cao) và width (chiều rộng)

Vùng Aside

Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ <aside> Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để thêm vào bài viết Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó

để sử dụng

Hình * Trang web Acme United

20

Nào, chúng ta hãy xây dựng một trang web Trước tiên, có <!doctype> Trong HTML5, <!doctype> đã được đơn giản hóa: Tất cả mọi thứ bạn cần nhớ là html Việc này không chỉ làm đơn giản hoá mục nhập cho thẻ này, mà cũng làm cho nó

có thể nâng cấp dễ dàng hơn Lưu ý rằng nó không được gọi là html5, mà chỉ

là html Bất kể có bao nhiêu phiên bản HTML đi nữa, thì <!doctype> luôn luôn có thể chỉ làhtml

Thẻ <html> chứa tất cả các phần tử HTML khác, trừ thẻ <!doctype> Tất cả các phần tử khác phải được lồng vào giữa thẻ <html> và</html> Xem Ví dụ 12

Ví dụ 12 thẻ <!doctype>

<!doctype html>

<html lang="en">

Sau khi chỉ ra nội dung là html và ngôn ngữ tiếng Anh, bạn có phần

tử <head>, có thể chứa các đoạn script (kịch bản lệnh), thông tin hỗ trợ trình duyệt, các liên kết bảng định kiểu, siêu thông tin, và các hàm khởi tạo khác Bạn có thể sử dụng các thẻ sau trong phần head:

<base>

<link>

sẽ được sử dụng để biểu thị trang HTML5 Bảng định kiểu được gọi là stylesheet.css

main-Ví dụ 13 thẻ <head>

<head>

<title>HTML5 Fundamentals Example</title>

<link rel="stylesheet" href="main-stylesheet.css" />

</head>

Tiếp theo, bạn sử dụng thẻ <body>, ngay sau các thẻ <header> và <hgroup>, được mô tả ở trên Vùng <h1> trong ví dụ này chứa tên của công ty của bạn, giả sử

là Acme United, và vùng <h2> chứa các thông tin thông báo cho bạn rằng đó là phụ

đề "A Simple HTML5 Example" Ví dụ 14 mô tả điều này

Cho đến nay CSS3 thường dùng để thiết lập trang được hiển thị trong Ví dụ

15 Trước tiên, bạn thiết lập phông chữ cho trang, sau đó đến các chi tiết cho phần thân Bạn định nghĩa các kích thước của phần thân, rồi thiết kế cấu trúc đoạn tiêu đề

23

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

HTML5 cũng có một thẻ <menu>— một thẻ đã gây ra sự nhầm lẫn đối với một số nhà thiết kế và phát triển Sự nhầm lẫn bắt nguồn từ thực tế hiểu lầm rằng việc chuyển hướng này là "navigation menu" Thẻ <menu>, đã bị phản đối trong HTML kể từ phiên bản 4.01 và giờ đây được tái sinh trong HTML5, được thiết kế

để tăng cường tính tương tác Không nên sử dụng nó cho việc chuyển hướng chính Thẻ duy nhất nên được sử dụng cho việc chuyển hướng chính là thẻ <nav> Bạn sẽ

sử dụng thẻ <menu> sau trong ví dụ này

Định dạng của chuyển hướng được CSS3 xử lý Mỗi định nghĩa thẻ <nav> được hiển thị trong Ví dụ 17 đại diện cho một trạng thái cụ thể của các phần tử <ul> và <li> bên trong thẻ <nav>

26

Thẻ <section> thứ hai trong <article> chứa cùng thông tin cơ bản nhƣ <section> đầu tiên, nhƣng lần này bạn sẽ sử dụng một thẻ<aside>, một thẻ <figure>, một thẻ <menu> >, và một thẻ <mark> Xem Ví dụ 20

Thẻ <aside> đƣợc sử dụng ở đây để trình bày thông tin không phải là một phần của luồng quanh nó Thẻ <figure> chứa một ảnh đồ họa của Stonehenge Thẻ <section> này cũng chứa thẻ <menu>, mà bạn sử dụng để tạo các button có các tên là 4 Muse Khi một trong các nút này đƣợc nhấn, nó cung cấp thông tin về Muse

cụ thể Thẻ <mark> đƣợc sử dụng bên trong thẻ <p> để làm nổi bật các từ veni, vidi,

28

color: #99f;

}

1.2.3.5 Các phần tử video

Đây là thành phần cuối cùng của phần tử <article>: phần video Video ví dụ

là một định dạng ogg tự động phát khi trang được tải, phát liên tục, và cung cấp các

nút điều khiển để tạm dừng và phát Ngày nay, có nhiều trường hợp các video định

dạng ogg sử dụng phần mở rộng ogv (v cho video), như trong Ví dụ 22

Thẻ <audio> làm việc theo cùng cách này

controls autoplay loop>

<div class="no-html5-video"><p>This video will work in

Mozilla Firefox or Google Chrome only </p>

30

1.3 Tìm hiểu về MySQL

1.3.1 Giới thiệu về MySQL

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ mạnh mẽ và tốc độ MySQL cho phép bạn lưu trữ, tìm kiếm, sắp xếp và lấy dữ liệu rất hiệu quả và nhanh chóng

Cơ sở dữ liệu chủ MySQL điều khiển việc truy cập dữ liệu, cho phép nhiều người dùng cùng truy cập đồng thời mà an toàn và nhanh chóng Do đó MySQL trở thành một hệ quản trị cơ sở dữ liệu chủ đa người dùng và đa luồng Nó sử dụng ngôn ngữ truy vấn có cấu trúc SQL, là ngôn ngữ truy vấn cơ sở dữ liệu chuẩn trên thế giới hiện nay

1.3.2 Quản trị cơ sở dữ liệu trong MySQL

Định danh trong MySQL

Qui tắc định danh rất đơn giản, gồm một số qui tắc như sau:

• Không dùng ký tự có mã ASCII(O) và mã ASCII(255) để định danh cho các loại đôi tượng(như tên bảng, tên cột, tên database, tên alias, )

• Nếu trong định danh có khoảng trắng thì định danh phải được đặt trong cặp dấu nháy đơn ( ‗ trường hợp này chỉ dùng cho các phiên bản MySQL 3.23.6 trở lên

• Các phiên bản MySQL 3.23.6 trở xuông không được dùng khoảng trắng khi định danh các đôi tượng kể cả khi định danh được đặt trong cặp dấu nháy đơn (

Cách định danh cho một thư mục trong hệ điều hành

Mọi ký tự cho phép ngoại trừ ký tự ― / ‖

tập tin trong hệ điều hành

Mọi ký tự cho phép ngoại trừ ký tự ― / ‖ và dấu ― ‖

31

Bảng 1-1: Bảng định danh

a Vấn đề phân quyền và người dùng

Mỗi hệ thống MySQL có thể có nhiều người sử dụng đồng thời Vì lý do bảo mật nên người quản trị hệ thông cần phải bảo vệ tài khoản và mật khẩu truy cập vào root Khi có một người dùng khác cần sử dụng hệ thông, người quản trị cần cấp cho người dùng này một tài khoản và mật khẩu riêng để log vào hệ thống Ngoài ra cần phải cấp cho người này một số quyền tối thiểu để thực hiện một vài thao tác Các quyền này dùng để xác định những điều gì người dùng này có thể làm được và những gì không thể làm được

Hệ thống phân quyền của MySQL gồm các cấp độ như sau:

- Toàn quyền sử dụng

- Các quyền trên cơ sở dữ liệu

- Quyền trên các bảng (table)

- Quyền trên các cột (column)

Các cấp độ phân quyền được chia thành hai nhóm quyền như : nhóm các quyền cho người dùng và nhóm các quyền dùng để quản trị

Phân quvển nhóm người dùng: Bạn chỉ nên cấp cho người dùng các quyền trên cơ

sở dữ liệu, trên các bảng (table) hoặc trên các cột (column) như sau:

Bảng (table)

Bảng 1-2: Bảng phân quyền nhóm người dùng

Phân quyển nhóm quản trị hệ thống : Bạn có thể cấp các quyền này cho một người dùng đặc biệt nào đó để người này có thể quản lý hệ thống

SHUTDOWN Cho phép một nhà quản trị có thể tắt hệ thông MySQL server

PROCESS Cho phép một nhà quản trị có thể xem các tiến trình xử lý trên

server và ngăn chặn chúng

FILE Cho phép lấy dữ liệu từ các tập tin và đọc vào các bảng

Bảng 1-3: Bảng phân quyền móm quản trị hệ thống

Các quvển đăc biêt khác: người quản trị hệ thống có thể cấp các quyền tổng

quát này cho một người dùng mới để tiết kiệm thời gian phân quyển chi tiết:

USAGE

Khi một người dùng được cấp quyền này, người đó chỉ có thể đăng nhập (log) vào hệ thống mà không thể làm bất cứ điều gì khác, các quyền khác có thể được cấp sau (nếu có thể)