Thiết kế website trưng bày xe hơi ứng dụng webgl hiển thị mô hình 3D

I.6 BỐ CỤC QUYỄN LUẬN VĂN Nội dung của luận văn được trình bày theo bố cục như sau: CHƯƠNG I: TỔNG QUAN Chương này trình bày sơ lược về lý do chọn đề tài, phạm vi của đề tài, cách thức

KHOA CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện:

Nguyễn Quốc Dũng

MSSV: 1091653

Cán bộ hướng dẫn ThS Võ Huỳnh Trâm MSCB: 1069

Cần Thơ, 2013

KHOA CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện

Nguyễn Quốc Dũng

MSSV: 1091653

Cán bộ hướng dẫn Ths Võ Huỳnh Trâm MSCB: 1069

Cán bộ phản biện Ths Nguyễn Công Danh

LỜI CẢM ƠN

Em xin chân thành cảm ơn Quý thầy cô trong Khoa Công Nghệ Thông Tin Trường Đại học Cần Thơ đã tận tình truyền đạt nhiều kiến thức bổ ích trong suốt thời gian học tại trường cũng như là tạo điều kiện cho em được thực hiện đề tài này Kính chúc quý Thầy

cô luôn dồi dào sức khỏe và thành công trong cuộc sống

Đặt biệt, em xin chân thành bày tỏ lòng biết ơn sâu sắc đến cô Võ Huỳnh Trâm, người đã tận tình hướng dẫn em trong suốt thời gian thực hiện đề tài, cô đã giúp em rút ra nhiều bài học kinh nghiệm quý báu mỗi khi em vấp phải những khó khăn

Cảm ơn cha mẹ đã sinh và nuôi dạy con khôn lớn, luôn bên cạnh động viên và ủng

hộ con trên con đường mà con đã yêu thích và lựa chọn

Cảm ơn các bạn sinh viên khoa công nghệ thông tin khóa 35 Các bạn đã giúp đỡ, động viên và hỗ trợ tôi rất nhiều cũng như là đóng góp nhiều ý kiến quý báu, qua đó giúp tôi hoàn thiện hơn cho đề tài

Mặc dùng đã rất nổ lực, cố gắng thực hiện đề tài nhưng chắc chắn đề tài vẫn còn nhiều thiếu sót Em rất mong nhận được nhiều góp ý phê bình của Quý thầy cô, của các anh chị và các bạn

Một lần nữa, em xin chân thành cảm ơn!

TP Cần Thơ, tháng 5 năm 2013

Nguyễn Quốc Dũng

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

MỤC LỤC

CHƯƠNG I: TỔNG QUAN 1

I.1 ĐẶT VẤN ĐỀ 1

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

I.3 MỤC TIÊU CẦN ĐẠT 1

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

I.4.1 Về khách hàng 2

I.4.2 Nhân viên 2

I.4.3 Quản trị viên 3

I.5 HƯỚNG GIẢI QUYẾT 3

I.5.1 Về lý thuyết 3

I.5.2 Về kỹ thuật 3

I.5.3 Phương pháp thu thập thông tin 4

I.6 BỐ CỤC QUYỄN LUẬN VĂN 4

CHƯƠNG II: CƠ SỞ LÝ THUYẾT 5

II.1 KHÁI NIỆM CƠ BẢN 5

II.1.1 Internet 6

II.1.2 World wide web 6

II.1.3 Trình duyệt web 6

II.1.4 Trình chủ web (web server) 7

II.1.5 Giao thức HTTP 7

II.2 NGÔN NGỮ PHP 7

II.2.1 Định nghĩa php 7

II.2.2 Biến trong PHP 8

II.2.3 Kiểu dữ liệu trong PHP 9

II.2.4 Hàm trong PHP 9

II.2.5 PHP truy xuất cơ sở dữ liệu MySQL 10

II.2.6 Lập trình hướng đối tượng với PHP 11

II.3 THƯ VIỆN JQUERY 13

II.3.1 Khái quát 13

II.3.2 Sử dụng ajax trong jQuery 13

II.4 THƯ VIỆN VIDEO.JS 15

II.5 THƯ VIỆN WEBGL 15

II.5.1 Giới thiệu 15

II.5.2 Yêu cầu hệ thống 16

II.5.3 Cấu trúc của một ứng dụng web 17

II.6 NGÔN NGỮ TRUY VẤN DỮ LIỆU SQL 17

II.7 NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML 18

II.7.1 Tổng quan 18

II.7.2 Ứng dụng HTML5 19

II.8 NGÔN NGỮ ĐỊNH DẠNG VĂN BẢN CSS 24

II.9 MÔ HÌNH MVC 25

II.10 SMARTY 26

CHƯƠNG III: ỨNG DỤNG XÂY DỰNG HỆ THỐNG 28

III.1 TÀI LIỆU ĐẶC TẢ 28

III.1.1 Giới thiệu 28

III.1.2 Mô tả tổng quan 29

III.1.3 Các yêu cầu giao tiếp bên ngoài 33

III.1.4 Các tính năng của hệ thống 34

III.1.5 Các yêu cầu phi chức năng 51

III.1.6 Các yêu cầu khác 51

III.2 TÀI LIỆU THIẾT KẾ 52

III.2.1 Giớ thiệu 52

III.2.2 Tổng quan hệ thống 53

III.2.3 Kiến trúc hệ thống 53

III.2.4 Thiết kế dữ liệu 54

III.2.5 Thiết kế chức năng 62

III.3 KIỂM THỬ 91

III.3.1 Giới thiệu 91

III.3.2 Phạm vi 91

III.3.3 Chi tiết kế hoạch kiểm thử 91

III.3.4 Quản lý kiểm thử 94

III.3.5 Các trường hợp kiểm thử 97

CHƯƠNG IV: KẾT LUẬN VÀ KIẾN NGHỊ 108

IV.1 NHẬN XÉT VÀ KẾT QUẢ ĐẠT ĐƯỢC 108

IV.1.1 Về mặt lý thuyết 108

IV.1.2 Về chương trình 108

IV.1.3 Khả năng ứng dụng 108

IV.2 HẠN CHẾ VÀ KHÓ KHĂN 108

IV.3 HƯỚNG PHÁT TRIỂN 108

PHỤ LỤC 1: MÔ TẢ NỘI DUNG CD LUẬN VĂN 110

PHỤ LỤC 2: HƯỚNG DẪN CÀI ĐẶT 111

PHỤ LỤC 3: GIỚI THIỆU CHƯƠNG TRÌNH 112

TÀI LIỆU THAM KHẢO 115

MỤC LỤC HÌNH

Hình 1: Mô hình ứng dụng web sử dụng PHP và MySQL 5

Hình 2: Cấu trúc trang web với HTML5 21

Hình 3: Mô hình MVC 25

Hình 4: Mô hình kiến trúc hệ thống 53

Hình 5: Sơ đồ phân rã module 54

Hình 6: Xem danh sách tất cả các mẫu xe 62

Hình 7: Xem danh sách xe theo nhà cung cấp 64

Hình 8: Xem ngoại thất xe 66

Hình 9: Xem nội thất xe 67

Hình 10: Xem màu của mẫu xe 68

Hình 11: Xem video về mẫu xe 69

Hình 12: Xem mô hình 3D 70

Hình 13: Xem tin tức công ty 72

Hình 14: Xem tin tức theo thể loại 73

Hình 15: Xem chi tiết tin tức 74

Hình 16: Giỏ hàng 75

Hình 17: Phiếu đặt hàng 76

Hình 18: Quản lý đơn đặt hàng 77

Hình 19: Xem đơn đặt hàng 78

Hình 20: Hóa đơn 80

Hình 21: Xem danh sách khách hàng 81

Hình 22: Xem chi tiết khách hàng 82

Hình 23: Xem danh sách phiếu nhập hàng 83

Hình 24: Danh sách nhân viên 84

Hình 25: Thêm tài khoản nhân viên 85

Hình 26: Thêm tin mới 86

Hình 27: Cập nhật tin tức 88

Hình 28: Quản lý tin tức 89

Hình 29: Trang chủ 112

Hình 30: Trang chi tiết mẫu xe 113

Hình 31: Trang mô hình 3D 113

Hình 32: Trang quản lý giỏ hàng 114

Hình 33: Trang nhân viên 114

Hình 34: Trang quản trị viên 114

TÓM TẮT

Ngày nay, công nghệ thông tin đã và đang phát triển không ngừng, nó thúc đẩy tất

cả các lĩnh vực và ngành nghề cùng phát triển Website là một công cụ giúp tiếp cận khách hàng và trưng bày sản phẩm hiệu quả

Đề tài "Thiết kế website trưng bày xe hơi ứng dụng WebGL hiển thị mô hình

3D" mong muốn thiết kế web trưng bày các mẫu xe hơi và hiển thị mô hình xe 3D của

mẫu xe, đặt xe, xem tin tức công ty, quản lý mẫu xe của công ty, quản lý nhập xe giúp công ty dễ dàng hoạt động và giúp người dùng dễ dàng tiếp cận với thông tin của công ty

Ứng dụng có 3 nhóm người dùng Nhóm khách hàng sử dụng trang web xem sản phẩm, xem tin tức, đặt mua xe, đăng ký tài khoản Nhóm nhân viên duyệt đơn đặt hàng, nhập hàng, thống kê doanh thu, quản lý tài khoản khách hàng và quản lý tin tức Nhóm quản

trị viên có thể quản lý tài khoản nhân viên, cập nhật thông tin xe

Website được xây dựng dựa trên hệ quản trị cơ sở dữ liệu MySQL, ngôn ngữ kịch bản cho máy chủ PHP, thư viện jQuery để xử lý phía máy khách, hiển thị mô hình 3D dùng WebGL, trình bày trang web bằng HTML, định dạng trang web dùng CSS Công cụ Adobe Dreamweaver CS6 để viết mã nguồn và một số công cụ khác

Kết quả hoàn thành phần phân tích và thiết kế các chức năng cho ba nhóm người dùng Đề tài xây dựng tương đối hoàn chỉ việc trưng bày mẫu xe, hiển thị tin tức, đặt hàng , duyệt đơn đặt hàng giúp việc trưng bày mẫu xe và quản lý của công ty được thuận tiện

Today, information technology has been evolving, it promotes all sectors development Website is a tool to reach customers and showcase products effectively

Thread "Designing website showcase cars and use WebGL to display 3D model"

desired designing web showcase cars and displaying 3D models of the cars, order the car, read company news, management of company cars, importing cars to help easy operation and easy user access to corporate information Website is divided into 3 user

groups Group customers use website to review products, view news, car purchase, register for an account Group employees approved orders, import cars, sales statistics, account management and customer information management Group administrators can

manage employee accounts, update vehicle information

Website built based Database Management System MySQL, scripting language for server is PHP, jQuery library for client-side processing, display 3D models using WebGL, presented in HTML web pages, the using CSS web page layout Adobe Dreamweaver CS6 write code and some other stuff

The results complete the analysis and design functions for three groups of users Thread relatively complete some functions as the cars showcase, reading news, creating orders, checking orders help to show the car models and manage company

Composed by Nguyen Quoc Dung

KEY WORD

1 WebGL

2 3D model

3 Web cars

CHƯƠNG I: TỔNG QUAN

I.1 ĐẶT VẤN ĐỀ

Ngày nay, công nghệ thông tin đã và đang phát triển không ngừng, nó thúc đẩy tất

cả các lĩnh vực và ngành nghề khác cùng phát triển Vì vậy việc ứng dụng công nghệ thông tin và các lĩnh vực đời sống, xã hội ngày càng phổ biến Tin học hóa giúp cho công việc được giải quyết tốt hơn, nhanh hơn và chính xác hơn giúp tăng hiệu xuất công việc

Sử dụng web để giới thiệu các sản phẩm là việc cần thiết với một hãng xe Giới thiệu sản phẩm sử dụng web giúp các công ty tiết kiệm chi phí Thí dụ, chúng ta sẽ không phải tốn chi phí để thuê mặt bằng khi sử dụng web để giới thiệu sản phẩm Chi phí để thuê nhân viên tiếp thị sẽ giảm đi rất nhiều Thông tin sản phẩm mới nhanh hơn khi chúng ta sử dụng web Chúng ta chỉ mất vài ngày để giới thiệu sản phẩm đến khách hàng, khi có một sản phẩm mới ra đời Khách hàng có thể truy cập thông tin bất cứ nơi nào Chỉ cần một chiếc điện thoại thông minh hoặc một máy tính có nối mạng internet, khách hàng

có thể dễ dàng truy cập thông tin mình cần Qua những lý do trên, sử dụng web để giới thiệu sản phẩm là việc cần thiết với bất cứ hãng xe

Việc sử dụng web để giới thiệu sản phẩm xe rất cần thiết, nhưng web vẫn chưa thay thế được trong hoạt động tiếp thị của hãng xe Lý do là nhu cầu muốn cảm nhận hình ảnh sống động của một chiếc xe thật (điều không thể làm được với những hình ảnh đơn thuần) WebGL sẽ là một lựa chọn tốt để giúp việc tiếp thị web có một bước tiến mới Đứng trước yêu cầu thực tế đó, đề tài "Thiết kế website trưng bày xe hơi ứng dụng WebGL hiển thị mô hình 3D" đã được hình thành

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

Việc sử dụng website để trưng bày sản phẩm không phải là một đề tài mới Việc

này đã được các hãng xe danh tiếng (như Ford Việt Nam, Toyota Việt Nam, Audi, The

Land Rover ) sử dụng từ rất lâu Nhưng website của những hãng nói trên điều chỉ thực

hiện được việc hiển thị hình ảnh và thông tin đơn thuần

Trong đề tài này không chỉ cung cấp cái nhìn về sản phẩm cho người dùng thông qua các bức ảnh Hệ thống còn giúp người dùng có cái nhìn trực quan hơn thông qua mô hình xe 3D Hệ thống cũng thực hiện chức năng đặt mua xe, khi người dùng có nhu cầu mua xe

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

Thiết kế website trưng bày xe hơi với các yêu cầu cơ bản

Ứng dụng WebGL để hiển thị mô hình xe 3D

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

Xây dựng website trưng bày xe hơi theo mô hình MVC trên nền Smarty giúp tăng tính sử dụng lại và tăng tốc độ phát triển phần mềm

Nghiên cứu và ứng dụng công nghệ WebGL để hiển thị mô hình xe 3D

Các đối tượng sử dụng hệ thống gồm: khách hàng, nhân viên và quản trị viên

I.4.1 Về khách hàng

Xem mẫu xe

Khách hàng có thể xem tất cả các mẫu xe mà công ty có hoặc xem mẫu xe theo từng hãng Khách hàng có thể chọn một mẫu xe để xem chi tiết về các thông tin của xe như ngoại thất, nội thất, màu sắc, mô hình 3D, video giới thiệu về mẫu xe

Xem tin tức của công ty

Háng hàng có thể xem tin tức về các hoạt động của công ty Các tin tức đươc phân thành tin tức sản phẩm, tin tức tuyển dụng, tin tức khuyến mãi Khách hàng có thể sử dụng chức năng xem tin tức trong khoản thời gian để lọc các tin tức mình muốn xe

Quản lý giỏ hàng và đặt hàng

Khách hàng trong quá trình xem các sản phẩm có thể chọn sản phẩm vào giỏ hàng Khách hàng có thể chọn tính năng xem giỏ hàng để xem các mẫu xe mình định mua, số lượng và tổng tiền phải trả

Khách hàng có thể cập nhật lại giỏ hàng như thay đổi số lượng, bỏ những mẫu xe không phù hợp

Khách hàng có thể đặt mua xe

In phiếu đặt hàng

Khi khách hàng đặt hàng, hệ thống sẽ xuất phiếu đặt hàng cho khách hàng

Đăng ký thông tin

Khách hàng mới sẽ phải đăng ký thông tin gồm thông tin đăng nhập để đăng nhập

hệ thống và thông tin cá nhân

I.4.2 Nhân viên

Nhân viên sử dụng chức năng này để xem danh sách khách hàng của hệ thống, khóa các tài khoản sai quy định hoặc lâu không sử dụng hệ thống

I.4.3 Quản trị viên

Quản lý tài khoản nhân viên

Nhà quản trị sử dụng chức năng này để thêm nhân viên mới, xem danh sách nhân viên của hệ thống, khóa các tài khoản sai quy định hoặc lâu không sử dụng hệ thống

Quản lý danh mục xe

Nhà quản trị sử dụng chức năng này để thêm hoặc cập nhật các thông tin liên quan đến mẫu xe (thí dụ: mô hình 3D, hình ảnh, màu sắc, nhà cung cấp, giá bán, số lượng), ẩn mẫu xe

I.5 HƯỚNG GIẢI QUYẾT

Dùng công cụ Power Designer 15.1 để phân tích và thiết kế các mô hình

Dùng công cụ thiết kế web chuyên nghiệp Adobe Dreamweaver CS6

Nodepad++ để kiểm tra mã nguồn

Gói phân mềm XAMPP 1.8.1 gồm có: Apache 2.4.3, MySQL 5.5.27, PHP 5.4.7, phpMyAdmin 3.5.2.2

Các trình duyệt web thông dụng: Google Chrome, Opera, Firefox

I.5.3 Phương pháp thu thập thông tin

Tìm kiếm các thông tin trên mạng, tham khảo một số website về trưng bày xe như: Audi Vietnam, Ford Vietnam, Toyota Motor Vietnam, Land Rover Vietnam

Tham khảo ý kiến của cán bộ hướng dẫn

I.6 BỐ CỤC QUYỄN LUẬN VĂN

Nội dung của luận văn được trình bày theo bố cục như sau:

CHƯƠNG I: TỔNG QUAN

Chương này trình bày sơ lược về lý do chọn đề tài, phạm vi của đề tài, cách thức để thực hiện các yêu cầu của đề tài và phần giới thiệu nội dung được trình bày trong đề tài

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

Chương này trình bày tổng quan về mô hình ứng dụng web, các khái niệm cơ bản, các ngôn ngữ và kỹ thuật được sử dụng để xây dựng ứng dụng web như HTML, CSS , PHP, SQL, jQuery, WebGL, MVC, Smarty

CHƯƠNG III: NỘI DUNG VÀ KẾT QUẢ ĐẠT ĐƯỢC

Chương này trình bày việc ứng dụng cơ sở lý thuyết vào phát triển một ứng dụng cụ thể Phần ứng dụng được chia thành 3 phần lớn: đặt tả, thiết kế, kiểm thử

CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Chương này trình bày nhận xét của bản thân sau khi thực hiện đề tài và hướng phát triển của đề tài

PHỤ LỤC 1: MÔ TẢ NỘI DUNG CD-ROM LUẬN VĂN

PHỤ LỤC 2: HƯỚNG DẪN CÀI ĐẶT

PHỤ LỤC 3: GIỚI THIỆU CHƯƠNG TRÌNH

TÀI LIỆU THAM KHẢO

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

II.1 KHÁI NIỆM CƠ BẢN

Hình 1: Mô hình ứng dụng web sử dụng PHP và MySQL

Ứng dụng web là loại ứng dụng Internet cho phép khách (Client) sử dụng trình duyệt Web (Internet Explorer, Nescape Navigator, Mozilla Firefox, Opera, ) để truy cập

và xem thông tin được cung cấp bởi trình chủ Web (Web Server)

Một điểm cần lưu ý là tại một thời điểm nào đó có thể có nhiều người sử dụng đồng thời truy cập một Website, có nghĩa là mọi ứng dụng Web đều có khả năng quản lý và phục vụ đa phiên

Sơ lược về vai trò và ý nghĩa của các thành phần:

Client: người dùng (user) sử dụng trình duyệt Web để gửi yêu cầu (HTTP Request) đến Server Web browser cũng có trách nhiệm tiếp nhận các phản hồi (HTTP Response)

từ phía Web Server và hiển thị nội dung phản hồi trên cửa sổ trình duyệt

Web Server: là một trình chủ web (Apache) khởi chạy các ứng dụng web tương ứng

để xử lý yêu cầu của người sử dụng, kết quả là ứng dụng Web sinh ra một trang HTML trả lại cho trình duyệt, sau đó trình duyệt sẽ hiển thị kết quả cho người dùng

Database Server: là một trình chủ cơ sở dữ liệu chạy hệ quản trị cơ sở dữ liệu MySQL, làm nhiệm vụ lưu trữ dữ liệu và phục vụ các yêu cầu truy vấn dữ liệu từ Web Server

Trên đây là phần mô tả tóm tắt về vai trò và ý nghĩa của các thành phần đã được sử dụng Phần tiếp theo sẽ trình bày về một số khái niệm cơ bản

II.1.1 Internet

Internet (thường được đọc theo khẩu âm tiếng Việt là "in-tơ-nét") là một hệ thống thông tin toàn cầu có thể được truy cập công cộng gồm các mạng máy tính được liên kết

với nhau Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữ liệu (packet

switching) dựa trên một giao thức liên mạng đã được chuẩn hóa (giao thức IP) Hệ thống

này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người dùng cá nhân, và các chính phủ trên toàn cầu

Mạng Internet mang lại rất nhiều tiện ích hữu dụng cho người sử dụng, một trong

các tiện ích phổ thông của Internet là hệ thống thư điện tử (email), trò chuyện trực tuyến (chat), máy truy tìm dữ liệu (search engine), các dịch vụ thương mại và chuyển ngân, và

các dịch vụ về y tế giáo dục như là chữa bệnh từ xa hoặc tổ chức các lớp học ảo Chúng cung cấp một khối lượng thông tin và dịch vụ khổng lồ trên Internet

II.1.2 World wide web

WWW (gọi tắt là Web) là một tập hợp các tài liệu liên kết với nhau bằng các siêu

liên kết (hyperlink) và các địa chỉ URL, và nó có thể được truy nhập bằng cách sử dụng

Internet Web là môi trường giao tiếp chính của người sử dụng trên Internet Đặc biệt trong thập kỷ đầu của thế kỷ 21 nhờ sự phát triển của các trình duyệt web và hệ quản trị nội dung nguồn mở đã khiến cho website trở nên phổ biến hơn, thế hệ web 2.0 cũng góp

phần đẩy cuộc cách mạng web lên cao trào, biến web trở thành một dạng phần mềm trực

tuyến hay phần mềm như một dịch vụ

II.1.3 Trình duyệt web

Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và tương tác với các văn bản, hình ảnh, đoạn phim, nhạc, trò chơi và các thông tin khác ở trên một trang web của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ Văn bản và hình ảnh trên một trang web có thể chứa siêu liên kết tới các trang web khác của cùng một địa chỉ web hoặc địa chỉ web khác Trình duyệt web cho phép người sử dụng truy cập các thông tin trên các trang web một cách nhanh chóng và dễ dàng thông qua các liên kết đó Trình duyệt web đọc định dạng HTML để hiển thị, do vậy một trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau

Trình duyệt web thực hiện 2 nhiệm vụ cơ bản:

- Gửi các yêu cầu phía client đến trình chủ web

- Nhận và hiển thị kết quả trả về từ trình chủ web

Các trình duyệt web phổ biến: Internet Explorer, Nescape Navigator, Mozilla Firefox, Opera, Google Chrome, Safari

II.1.4 Trình chủ web (web server)

Web Server (máy phục vụ Web): máy tính mà trên đó cài đặt phần mềm phục vụ Web, đôi khi người ta cũng gọi chính phần mềm đó là Web Server.Tất cả các Web Server đều hiểu và chạy được các file htm và html, tuy nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như IIS của Microsoft dành cho asp; Apache dành cho php; Sun Java System Web Server của SUN dành cho jsp

Trình chủ web thực hiện những nhiệm vụ sau:

- Lắng nghe các yêu cầu từ phía client

- Xử lý và trả về các thông tin kết quả cho client

II.1.5 Giao thức HTTP

HTTP ( HyperText Transfer Protocol - Giao thức truyền tải siêu văn bản) là một

trong năm giao thức chuẩn về mạng Internet, được dùng để liên hệ thông tin giữa trình

chủ web (Web server) và khách (Web client) là giao thức Client/Server dùng cho World

Wide Web - WWW, HTTP là một giao thức ứng dụng của bộ giao thức TCP/IP (các giao

thức nền tảng cho Internet)

II.2 NGÔN NGỮ PHP

II.2.1 Định nghĩa php

PHP (viết tắt của PHP: Hypertext Preprocessor) là một 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

PHP có một thư viện phong phú cho phép chúng ta xây dụng các ứng dụng web tương tác tốt với nhiều hệ quản trị cơ sở dữ liệu như MySQL, PostgreSQL, Oracle, SQL Server, Access,

PHP cũng được sử dụng để phát triển các hệ quản trị nội dung như Drupal, Joomla, Magento, Mambo, NukeViet, PHP-Nuke, Workpress, Xoops

Các thẻ của PHP

Có 4 loại thẻ PHP khác nhau khi xây dựng trang PHP

Kiểu short:

<?

echo "Hello world!";

?>

Để thực thi cặp thẻ này, phải cấu hình tập tin php.ini

Kiểu định dạng XML: nếu lập trình PHP có ý định sử dụng văn bản định dạng

XML thì phải khai báo thẻ PHP như sau:

Kiểu ASP: Trong trường hợp khai báo PHP như một phần trong trang ASP, phải

cấu hình asp_tags trong tập tin php.ini

<%

echo "Hello world";

%>

II.2.2 Biến trong PHP

II.2.2.1 Các đặc điểm của biến trong PHP

Biến trong PHP được bắt đầu bằng ký tự "$" theo sau là các tên biến Quy tắt đặt tên biến trong PHP tương tự như trong C Tên biến phân biệt chữ hoa, chữ thường, biến hợp lệ phải bắt đầu bằng ký tự hoặc bắt đầu là một dấu gạch dưới "_" theo sao là số, ký

tự Không có khoản trắng trong tên biến

II.2.2.2 Các biến định nghĩa sẵn trong PHP

PHP cung cấp số lượng lớn các biến đã được định nghĩa trước cho bất kỳ kịch bản nào chạy nó Ví dụ: $_SERVER, $_REQUEST, $_GET, $_POST, $_FILE, $_SESION

 Biến $_GET: là mảng chứa những biến được gửi từ client theo phương thức GET

 Biến $_POST: là mảng chứa những biến được gửi từ client theo phương thức POST

 Biến $_FILE: là mảng chứa những thư mục được tải lên server theo phương thức POST

 Biến REQUEST: biến này có thể dùng thay thế $_POST và $_GET để nhận dữ liệu theo cả 2 phương thức POST và GET

 Biến SESSION: biến chứa những phần tử mang tính toàn cục được sử dụng cho nhiều trang, thường gọi là biến session

II.2.3 Kiểu dữ liệu trong PHP

PHP có các kiểu dữ liệu:

Boolean: TRUE hoặc FALSE

Interger: kiểu số nguyên

$bool_o = TRUE; //bool_o kiểu boolean

$int_a = 28; //Biến a kiểu số nguyên

$float_b = 19.91; //biến float_b kiểu số thực

$str_c = "Nguyễn Quốc Dũng"; //Biến str_c chuỗi ký tự

$arr_d[0] = "Chào ngày mới"; // Biến arr_d kiểu mảng

$ob_e = new Clss(); // Biến ob_e kiểu đối tượng

II.2.4 Hàm trong PHP

Cũng giống như các ngôn ngữ khác C, C++ Ngoài ra các hàm được định nghĩa sẵn, PHP cho phép người dùng tự định nghĩa hàm Cú pháp định nghĩa hàm như sau:

Cú pháp:

Function <tên hàm> ($arg_1, $arg_2, , $arg_n){

Truyền theo giá trị: không làm thay đổi giá trị của biến truyền vào

Truyền theo tham chiếu: Sẽ làm thay đổi giá trị của biến truyền vào, muốn truyền theo tham chiếu ta phải thêm ký hiệu "&" vào trước đối số của hàm

Truyền theo giá trị mặc định: giá trị mặc định phải là một biểu thức hằng, không phải là biến hoặc lớp Khi sử dụng theo cách truyền này thì đối số mặc định phải ở bên phải nhất của các đối số khác

Giá trị trả về: được thực hiện bởi câu lệnh return

II.2.5 PHP truy xuất cơ sở dữ liệu MySQL

PHP là server script, nó có thể chạy trên môi trường Windows và môi trường Linux

Vì vậy mà PHP có thể kết nối với nhiều hệ quản trị cơ sở dữ liệu trên cả hai môi trường này

Một ứng dụng web được viết bằng ngôn ngữ PHP có thể truy xuất nhiều hệ quản trị

cơ sở dữ liệu khác nhau như: Ms Access, MySQL, SQL Server, Oracle Để làm được điều này PHP đã tạo cho mình một tập hợp lớn các hàm sẵn có thể truy xuất cơ sở dữ liệu

từ hệ quản trị cơ sở dữ liệu đó

Một số hàm PHP tương tác với MySQL

Kết nối cơ sở dữ liệu

Cú pháp: int mysql_connect(string[hostname[:post][:/path_to_socket]],

string[usename], string[password]);

Truy vấn dữ liệu

mysql_query(): hàm gửi câu lệnh SQL tới máy chủ MySQL

mysql_num_rows(): hàm trả về số dòng nói chứa kết quả của câu lệnh SQL đã

được thực hiện

mysql_fetch_array(): hàm trả về một mảng là giá trị của một bản ghi hiện tại, sau

đó hàm sẽ trỏ tới bảng tiếp theo cho tới khi bảng ghi cuối cùng hàm trả về giá trị là false

Đóng kết nối

Cú pháp: int mysql_close(int[link_identifer])

Tham số link_identifer là mã số nhận dạng tạo ra bởi hàm mysql_connect() Hàm trả về true nếu thành công, ngược lại trả về false

II.2.6 Lập trình hướng đối tượng với PHP

Lập trình hướng đối tượng là 1 phương pháp viết mã cho phép các lập trình viên

nhóm các action tượng tự nhau vào các class” Điều này giúp mã lệnh giữ vững được nguyên lý DRY “don’t repeat yourself” (không lặp lại chính nó) và dễ dàng để bảo trì Giống như những ngôn ngữ hiện đại khác, PHP cũng hỗ trợ lập trình hướng đối tượng Các cú pháp cơ bản để lập trình hướng đối tượng trong PHP như sau:

//Khi khai báo thuộc tính ta phải khai báo tầm vực của nó

public $thuoctinh_a; //Sử dụng ở bất kỳ đâu protected $thuoctinh_b; //Sử dụng trong lớp và ở lớp dẫn xuất từ nó

private $thuoctinh_c; //Chỉ sử dụng trong phạm vi lớp khai báo

Private $giatrimacdinh = 1; //Giá trị mặc định khi khai báo thuộc tính

private $thuoctinh;

//Tương tự như khai báo thuộc tính

//Khi khai báo phương thức ta phải khai báo tầm vực của nó

//Hàm xây dựng public function MyClass(){

//Mã nguồn của phương thức }

//seter public function setThuocTinh($bien){

$this->thuoctinh = $bien;

} //geter public function getThuocTinh(){

return $this->thuoctinh;

}

//Hàm khởi tạo public function init($bien){

//Mã nguồn của phương thức }

}

?>

Sử dụng lớp:

<?php

$object = new MyClass(); //Khởi tạo một đối tượng từ lớp đã xây dựng

$object->setThuocTinh("Hello word!"); //Gán giá trị cho thuộc tính

echo $object->getThuocTinh(); //Lấy giá trị của thuộc tính

?>

II.3 THƯ VIỆN JQUERY

II.3.1 Khái quát

jQuery là một thư viên JavaScript nhanh, nhỏ gọn và có nhiều tính năng Nó làm cho các tài liệu HTML dễ thao tác hơn (vd: tương tác động, xử lý sự kiện, hiệu ứng hoạt hình) jQuery cũng giúp cho việc sử dụng ajax trở nên đơn giản hơn Với sự kết hợp của tính linh hoạt và khả năng mở rộng, jQuery đã thay đổi cách mà hàng triệu người viết JavaScript

Thông qua thư viện jQuery, rất nhiều Plugin hữu ích đã ra đời như: ColorPicker, DataPicker và Text Editer

II.3.2 Sử dụng ajax trong jQuery

II.3.2.1 Phương thức load()

Phương thức load() của jQuery giúp lấy dữ liệu từ trình chủ web và đặt dữ liệu trả

Callback là một tùy chọn Callback lưu tên chức năng sẽ được thực hiện sau khi phương thức load() hoàn thành

II.3.2.2 Phương thức GET/POST

Phương thức GET/POST được sử dụng để chuyển yêu cầu từ Client về trình chủ web

Với jQuery chúng ta không cần phải tải lại trang để chuyền yêu cầu về phía trình chủ web

Cú pháp của phương thức get:

$.get(URL, callback);

Trong đó:

URL là yêu cầu bắt buộc URL là đường dẫn đến tập tin được chỉ định

Callback là một tùy chọn Callback lưu tên chức năng sẽ được thực hiện nếu việc gửi yêu cầu thành công

Cú pháp của phương thức post:

$.post(URL, data, callback);

Trong đó:

URL là yêu cầu bắt buộc URL là đường dẫn đến tập tin được chỉ định

Data là một tùy chọn Data xác định một chuỗi truy vấn từ khóa/biến được gửi cùng với yêu cầu

Callback là một tùy chọn Callback lưu tên chức năng sẽ được thực hiện nếu việc gửi yêu cầu thành công

});

II.4 THƯ VIỆN VIDEO.JS

Video.js là một thư viện javascript Video.js (còn gọi là HTML5 Video Player) giúp làm việc và thao tác trên HTML5 video dễ hơn Video.js cung cấp một số giao diện điều khiển được xây dựng với HTML/CSS, khắc phục sự thiếu nhất quán giữa các trình duyệt, thêm các tính năng như fullscreen và phụ đề, có thể phát được file flash hoặc các kỹ thuật khác khi HTML5 không được hỗ trợ và cung cấp một số Javascript API tương tác với the video

<source src="video/camry2012_VbSQOwjg.mp4" type='video/mp4' />

<source src="video/camry2012_VbSQOwjg.webm" type='video/webm' />

<track kind="captions" src="captions.vtt" srclang="en" label="English" />

</video>

</div>

II.5 THƯ VIỆN WEBGL

II.5.1 Giới thiệu

Năm 2007, Vladimir Vukicevic, một kỹ sư phần mềm người Mỹ, ông đã bắt đầu thử nghiệm ý tưởng sử dụng công nghệ OpenGL cho thẻ Canvas của THML5 (có thể gọi là

Canvas 3D) Tháng 3 năm 2011, ông là người hướng dẫn nhóm Kronos Group, tổ chức phi lợi nhuận đằng sau OpenGL, để tạo ra WebGL: một kỹ thuật giúp trình duyệt Internet truy cập các đơn vị xử lý đồ họa (GPU) trên máy tính

WebGL đã được phát triển dựa trên OpenGL ES 2.0 (ES dùng cho hệ thống nhúng), OpenGL ES 2.0 là phiên bản dành cho các thiết bị như iPhone và iPad của Apple Nhưng khi đặc tả kỹ thuật được phát triển, WebGL được phát triển với mục đích sử dụng trên nhiều môi trường phần cứng và hệ điều hành khác nhau WebGL với ý tưởng vẽ dựa trên web thời gian thực, công nghệ này đã mở một cánh cửa mới về khả năng tạo môi trường 3D (như trò chơi video) dựa trên web, khoa học trực quan và hình ảnh y tế Với sự phát triển ngày càng mạnh của các điện thoại thông minh và máy tính bảng (có trình duyệt web), các ứng dụng 3D được viết bằng WebGL có thể hoạt động tốt trên cả thiết bị di động

II.5.2 Yêu cầu hệ thống

WebGL là một giao diện lập trình đồ họa 3D cho web Do đó, WebGL không cần cài đặt Chúng ta có thể tự động truy cập đến ứng dụng WebGL trên các trình duyệt sau:

- Firefox 4.0 hoặc cao hơn

- Google Chrome 11 or cao hơn

- Safari (OSX 10.6 or cao hơn)

- Opera 12 hoặc cao hơn

Yêu cần máy tính có card đồ họa

Thuận lợi của WebGL

WebGL thực hiện mọi việc trên trình duyệt web Trình duyệt web sẽ yêu cầu dữ liệu mà mình cần từ trình chủ web Trình duyệt web sử dụng dữ liệu tải về để xử lý đồ họa và hiển thị trên màn hình trình duyệt

Thuật lợi của WebGL so với các công nghệ khác (Java 3D, Flash, and The Unity Web Player Plugin):

- Được phát triển bằng JavaScript: JavaScript là một ngôn ngữ tự nhiên cho cả nhà phát triển web và các trình duyệt web Làm việc với JavaScript cho phép bạn truy cập vào tất cả các phần của DOM và cũng cho phép bạn giao tiếp dễ dàng giữa các yếu tố Vì WebGL được phát triển bằng JavaScript, điều này làm cho nó dễ dàng để tích hợp các ứng dụng WebGL với các thư viện JavaScript khác như jQuery và với các công nghệ HTML5 khác

- Quản lý vùng nhớ tự động: không giống như OpenGL, có các hoạt động cụ thể để phân bổ và giải phóng bộ nhớ bằng tay, WebGL không có điều kiện tiên quyết này Nó

có các quy tắc để xác định phạm vi biến trong JavaScript và bộ nhớ được tự động giải phóng khi nó không còn cần thiết Điều này giúp đơn giản hoá lập trình, mã chương trình được viết ít hơn

- Phổ biến rông rãi: nhờ những tiến bộ trong công nghệ hiện tại, các trình duyệt web với JavaScript được cài đặt trong điện thoại thông minh và các thiết bị máy tính bảng Do

đó, WebGL có thể được sử dụng được trên rất nhiều nền tảng

- Hiệu xuất: hiệu suất của các ứng dụng WebGL được so sánh tương đương với các ứng dụng độc lập (với một số trường hợp ngoại lệ) Điều này nhờ vào khả năng WebGL

có thể truy cập vào các phần cứng đồ họa tại máy Client

- Không biên dịch: vì WebGL được viết bằng JavaScript, nên không cần biên dịch

mã nguồn trước khi thực hiện nó trên trình duyệt web

II.5.3 Cấu trúc của một ứng dụng web

Như trong bất kỳ thư viện đồ họa 3D, trong WebGL, bạn cần những thành phần nhất định phải có để tạo ra một cảnh 3D Những thành phần này bao gồm:

 Canvas: là nơi mô hình 3D sẽ được hiển thị Canvas là một thẻ HTML5 chuẩn, Canvas có thể được truy cập bằng cách sử dụng Document Object Model (DOM) thông qua JavaScript

 Đối tượng (Objects): là đối tượng 3D tạo nên một phần của khung nhìn

 Nguồn sáng (Light): không có gì trong một thế giới 3D có thể được nhìn thấy nếu không có nguồn sáng Thành phần này có trong bất kỳ ứng dụng WebGL nào

 Khung nhìn (Camera): là khung nhìn với thế giới 3D Chúng ta xem và khám phá một cảnh 3D thông qua nó

Ngoài ra, WebGL còn hỗ trợ các thành phần 3D khác như:

 Hành động (action): hỗ trợ thao tác của các đối tượng

 Màu sắc (colors): tô màu cho đối tượng và khung nhìn

 Texture mapping: giúp việc xử lý các hiện ứng phức tạp trên một đối tượng cụ thể

 Picking: chọn một đối tượng trên khung nhìn

II.6 NGÔN NGỮ TRUY VẤN DỮ LIỆU SQL

SQL là ngôn ngữ của cơ sở dữ liệu quan hệ SQL là từ viết tắt của Structured Query Language (ngôn ngữ hỏi có cấu trúc), là công cụ sử dụng để tổ chức, quản lý và truy xuất

dữ liệu được lưu trữ trong các cơ sở dữ liệu SQL là một hệ thống ngôn ngữ bao gồm tập các câu lệnh sử dụng để tương tác với cơ sở dữ liệu quan hệ

Khả năng của SQL vượt xa so với một công cụ truy xuất dữ liệu, mặc dù đây là mục đích ban đầu khi SQL được xây dựng nên và truy xuất dữ liệu vẫn còn là một trong những chức năng quan trọng của nó SQL được sử dụng để điều khiển tất cả các chức năng mà một hệ quản trị cơ sở dữ liệu cung cấp cho người dùng bao gồm:

Đinh nghĩa dữ liệu: SQL cung cấp khả năng định nghĩa các cơ sở dữ liệu, các cấu trúc lưu trữ và tổ chức dữ liệu cũng như mối quan hệ giữa các thành phần dữ liệu

Truy xuất và thao tác với dữ liệu: Với SQL, người dùng có thể dễ dàng thực hiện các thao tác truy xuất, bổ sung, cập nhật và loại bỏ dữ liệu trong các cơ sở dữ liệu

Điều khiển truy cập: SQL có thể được sử dụng để cấp phát và kiểm soát các thao tác của người sử dụng trên dữ liệu, đảm bảo sự an toàn cho cơ sở dữ liệu

Đảm bảo toàn vẹn dữ liệu: SQL định nghĩa các ràng buộc toàn vẹn trong cơ sở dữ liệu nhờ đó đảm bảo tính hợp lệ và chính xác của dữ liệu trước các thao tác cập nhật cũng như các lỗi của hệ thống

Khác với các ngôn ngữ lập trình quen thuộc như C, C++, Java là ngôn ngữ có tính khai báo Với SQL, người dùng chỉ cần mô tả các yêu cầu cần phải thực hiện trên cơ

sở dữ liệu mà không cần phải chỉ ra cách thức thực hiện các yêu cầu như thế nào Chính

vì vậy, SQL là ngôn ngữ dễ tiếp cận và dễ sử dụng

II.7 NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML

II.7.1 Tổng quan

HTML (viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu

văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet được tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web

Có bốn loại phần tử đánh dấu trong HTML:

- Đánh dấu có cấu trúc miêu tả mục đích của phần văn bản (ví dụ: <h1>Golf</h1>

sẽ điều khiển phần mềm đọc hiển thị "Golf" là đề mục cấp một)

- Đánh dấu trình bày miêu tả phần hiện hình trực quan của phần văn bản bất kể chức năng của nó là gì (ví dụ: <b>boldface</b>)

- Đánh dấu liên kết ngoài chứa phần liên kết từ trang này đến trang kia

- Các phần tử thành phần điều khiển giúp tạo ra các đối tượng (ví dụ, các nút và các danh sách)

Tách phần trình bày và nội dung

Nỗ lực tách phần nội dung ra khỏi phần hình thức trình bày của trang HTML đã đưa đến sự xuất hiện của các chuẩn mới như XHTML Các chuẩn này nhấn mạnh vào việc sử dụng thẻ đánh dấu vào việc xác định cấu trúc tài liệu như phần đề mục, đoạn văn, khối văn bản trích dẫn và các bảng, chứ không khuyên dùng các thẻ đánh dấu mang tính chất trình bày trực quan, như <font>, <b> (in đậm), và <i> (in nghiêng) Những mã mang tính chất trình bày đó đã được loại bỏ khỏi HTML 4.01 Strict và các đặc tả XHTML nhằm tạo điều kiện cho CSS CSS cung cấp một giải pháp giúp tách cấu trúc HTML ra khỏi phần trình bày của nội dung của nó

Định nghĩa kiểu tài liệu (DTD)

Tất cả các trang HTML nên bắt đầu với một khai báo Định nghĩa kiểu tài liệu (hay DTD)

II.7.2.1 Sơ lược về 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 và hiện tại vẫn đang được phát triển bởi World Wide Web Consortium và WHATWG 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ữ được việc con người và các thiết bị, các chương trình máy tính như trình duyệt web, trình đọc màn hình, v.v có thể đọc, hiểu, hay xử lý một cách dễ dàng HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội của XHTML, DOM, đặc biệt là JavaScript

Là phiên bản tiếp sau của HTML 4.01 và XHTML 1.1, HTML5 là một phản ứng để đáp lại lời phê bình rằng HTML và XHTML được sử dụng phổ biến trên World Wide Web là một hỗn hợp các tính năng với các thông số kỹ thuật khác nhau, được giới thiệu bởi nhiều nhà sản xuất phần mềm ví dụ Adobe, Sun Microsystems, Mozilla, Apple, Google, và có nhiều lỗi cú pháp trong các văn bản web Đây là một nỗ lực để tạo nên một ngôn ngữ đánh dấu có thể được viết bằng cú pháp HTML hoặc XHTML Nó bao gồm các mô hình xử lý chi tiết để tăng tính tương thích, mở rộng, cải thiện và hợp lý hóa các đánh dấu có sẵn cho tài liệu, đưa ra các đánh đấu mới và giới thiệu giao diện lập trình ứng dụng (application programming interfaces API) để tạo ra các ứng dụng Web phức tạp Cùng một lý do như vậy, HTML5 là một ứng cử viên tiềm năng cho nền tảng ứng dụng di động Nhiều tính năng của HTML5 được xây dựng với việc xem xét chúng có thể

sử dụng được trên các thiết bị di động như điện thoại thông minh và máy tính bảng hay không

II.7.2.2 Cấu trúc trang web với HTML5

HTML5 cung cấp nhiều thẻ có tính năng giúp việc cấu trúc trang web Cấu trúc cơ bản của thẻ HTML5 được tổ chức như sau:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Cấu trúc cơ bản của một trang HTML5</title>

<link rel="stylesheet" type="text/css" href="html5.css">

Hình 2: Cấu trúc trang web với HTML5

Các khai báo của HTML5 đơn giản hơn các phiên bản trước rất nhiều, phần Doctype đã được rút ngắn hơn so với phiên bản HTML4, tạo cho code của trang web dễ nhìn hơn Phần Head định nghĩa mã hóa ký tự đã gọn hơn cấu trúc chỉ đơn giản là <meta charset="utf-8"> Hình sau thể hiện rõ hơn về cấu trúc mới của HTML5:

<HEADER>: chứa thông tin giới thiệu một phần hay một trang hoặc bất cứ thông tin gì của tiêu đề tài liệu hay tiêu đề nội dung của một bảng

<NAV>: chứa liên kết đến trang khác hoặc phần khác trên cùng trang, không nhất thiết chứa tất cả liên kết chỉ cần đường chuyển hướng chính

<SECTION>: đại diện cho một phần tài liệu hay ứng dụng

<ARTICLE>: đại diện một phần của trang, có thể đứng độc lập

<ASIDE>: đại diện cho nội dung có liên quan đến phần tài liệu chính hay các đoạn trích dẫn

<FOOTER>: đánh dấu không chỉ cuối trang hiện hành mà còn mỗi phần có trong trang

II.7.2.3 Đa phương tiện Video – Audio

Người sử dụng không phải tải về các trình cắm thêm hoặc cập nhận lên phiên bản chính xác mà họ đã cài đặt để xem Video Họ sẽ không trải qua tình trạng bị treo do sự bất ổn định của một số trình cắm của bên thứ ba Mọi thứ sẽ thay đổi với HTML5

Với HTML5 việc trình chiếu các Video và Audio thật đơn giản và phù hợp trên nhiều nền tảng Các nhà phát triển web chỉ cần lập trình một lần là có có thể dùng trên nhiều hệ thống, không như Flash hay các plugin khác luôn cần có nhiều phiên bản khác nhau dành cho mỗi nền tảng Khả năng hỗ trợ API và DOM sẽ giúp các nhà phát triển tự

do hơn trong việc sáng tạo các ứng dụng thân thiện với người dùng khi mà không còn lệ thuộc vào phần mềm của bên thứ 3, vì việc nhúng video, âm thanh, biểu đồ và hình ảnh động và các loại khác nhiều nội dung phong phú mà không cài đặt thêm Plugin nào khác như Flash player, Windows Media Player

Hiện nay, HTML5 hỗ trợ 3 định dạng Video MP4, WebM, Ogg Tùy vào trình duyệt mà có sự thích ứng khác nhau Về định dạng âm thanh, HTML5 cũng hỗ trợ 3 định dạng cơ bản là MP3, Wav, Ogg Tùy vào trình duyệt mà có sự hỗ trợ về định dạng khác nhau Định dạng Wav được đa số các trình duyệt hỗ trợ ngoại trừ IE

<video src="movie.mp4">Trình duyệt không hỗ trợ</video>

Nếu trình duyệt không hỗ trợ thì nội dung trong thẻ <video> sẽ hiển thị cho người dùng

Hỗ trợ nhiều định dạng

Việc hỗ trợ nhiều định dạng cho một Video là rất hữu ích khi các trình duyệt cho hỗ trợ tất cả các định dạng Với 3 đoạn video có 3 định đạng khác nhau nhưng cùng hiển thị nội dung để đảm bảo rằng tất cả các trình duyệt đều xem được Thẻ <source> đặt trong thẻ <video> giúp sử dụng được nhiều nguồn tài nguyên

Sau đây là ví dụ cho video thể hiện:

<video width="320" height="240" controls="trontrols">

<source src="move.mp4" type="video/mp4"/>

<source src="move.ogg" type="video/ogg"/>

<source src="move.webm" type="video/webm"/>

</video>

Thuộc tính width, height (không áp dụng <audio>)

Hai thuộc tính width, height tương ứng xác định chiều rộng và chiều cao của Video được tính bằng pixel, nếu hai giá trị này không được thiết lập thì trình duyệt sẽ lấy chiều rộng mặc định của video

Thuộc tính autoplay

Thuộc tính tự động phát (autoplay) này sẽ tự động chạy video sau khi trang được tải lên Thuộc tính autoplay là thuộc tính luận lý Người dùng có thể xem được video nhanh nhất có thể

<video src="movie.mp4" controls="controls" autoplay></video>

Thanh điều khiển (controls)

Thanh điều khiển giúp người dùng có thể linh hoạt hơn trong việc sử dụng xem video của mình Thuộc tính controls là thuộc tính luận lý Với mỗi trình duyệt sẽ định dạng thanh điều khiển khác nhau

<video src="movie.mp4" controls="controls"></video>

Metadata: giống với none nhưng metadate sẽ tải về các thông tin của video đó như thời gian, kích thước

<video src="movie.mp4" controls="controls" preload="auto"></video>

Thuộc tính poster (không áp dụng <audio>)

Khi chúng ta vào một website với nhiều video khác nhau thuộc tính poster sẽ rất hữu ích Mỗi Video sẽ hiển thị một ảnh đại diện thể hiện nội dung cho video đó, giúp người dùng có thể dễ dàng tìm đúng các video mong muốn một cách nhanh nhất

<video src="movie.mp4" poster="teaser.jpg"></video>

Thuộc tính audio

Thuộc tính audio là âm thanh của đoạn video Mặc định âm thanh sẽ phát cùng với video nhưng đôi khi người dùng lại không thích nghe âm thanh của các đoạn video tư động chạy trên web Thuộc tính audio sẽ cho phép tắt âm thanh của video

II.8 NGÔN NGỮ ĐỊNH DẠNG VĂN BẢN CSS

CSS (Cascading Style Sheets) là ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, SVG, hay UML,

Tác dụng của CSS

Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung

Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau

Có ba cách để nhúng CSS vào trong một tài liệu HTML:

Cách 1: Nội tuyến (kiểu thuộc tính) đây là phương pháp nguyên thủy nhất bằng cách nhúng các thuộc tính của CSS vào từng thẻ HTML muốn áp dụng

Cách 2: Bên trong (thẻ Style) đây chỉ là một phương pháp thay thế cách 1 bằng các rút tất cả các thuộc tính của CSS vào trong thẻ style (để tiện cho công tác bảo trì và sửa chữa), lưu ý là thẻ style phải đặt trong thẻ head

Cách 3: Bến ngoài (liên kết tới một file CSS ngoài) tương tự như cách 2 nhưng thay

vì đặt tất cả các mã CSS trong thẻ style chúng ta đưa chúng vào một file CSS (có phần

mở rộng css) bên ngoài và liên kết nó vào trong trang web bằng thuộc tính href trong thẻ link

II.9 MÔ HÌNH MVC

Hình 3: Mô hình MVC

MVC hay Model-View-Controller là một mẫu kiến trúc được sử dụng để phát triển phần mềm Khi sử dụng đúng cách, mẫu MVC giúp cho người phát triển phần mềm cô lập các nguyên tắc nghiệp vụ và giao diện người dùng một cách rõ ràng hơn Phần mềm phát triển theo mẫu MVC tạo nhiều thuận lợi cho việc bảo trì vì nó tách rời mã nguồn và giao diện

Chức năng của từng phần được phân chia như sau:

Model (Tầng dữ liệu): là một đối tượng hoặc một tập hợp các đối tượng biểu diễn cho phần dữ liệu của chương trình Nó được giao nhiệm vụ cung cấp dữ liệu cho cơ sở dữ liệu và lưu dữ liệu vào các kho chứa dữ liệu Tất cả các nghiệp vụ logic được thực thi ở Model Tất cả các nghiệp vụ logic được thực thi ở ở Model Dữ liệu vào từ người dùng sẽ được xử lý ở Controller và được chuyển đến Model để lưu vào cơ sở dữ liệu Việc truy xuất, cập nhật và lưu trữ dữ liệu được thực hiện ở Model

View (Tầng giao diện): là phần giao diện với người dùng, bao gồm việc hiện dữ liệu

ra màn hình, cung cấp các menu, nút bấm, hộp đối thoại, chọn lựa, , để người dùng có thể thêm, xóa, sửa, tìm kiếm và các thao tác khác với dữ liệu trong hệ thống Thông thường, các thông tin cần hiển thị được lấy từ thành phần Models

Controller (Tầng điều khiển): là phần điều khiển của ứng dụng, điều hướng các nhiệm vụ (task) đến đúng phương thức (method) có chức năng xử lý nhiệm vụ đó Nó

chịu trách nhiệm xử lý các tác động về mặt giao diện, các thao tác đối với models, và cuối cùng là chọn một view thích hợp để hiển thị ra màn hình

II.10 SMARTY

Smarty là một hệ thống tạo mẫu web (web template system) được viết trên nền PHP Smarty được giới thiệu như là một công cụ cho việc chia nhỏ các quá trình thiết kế trang web Đây là một chiến lược thiết kế cho các ứng dụng web hiện đại Smarty tạo ra các nội dung web từ các vị trí đặc biệt được gọi là Smarty tag Các tag này được nằm trong các mẫu (template) Các tag này sẽ được xử lý và chèn vào với các code khác nhau Các tag này là chỉ thị cho Smarty mà có thể được bao đóng bởi tag mở và tag khóa Những hướng dẫn này có thể là biến, và được định nghĩa bởi dấu dollar ($), các chức năng, hàm logic hoặc các luồng điều khiển Smarty cho phép các lập trình viên có thể tự định nghĩa các chứng năng và truy cập sử dụng các Smarty tags Smarty là kết quả của việc tối ưu hóa và phân luồng công việc, cho phép trình diễn các trang web bằng cách chia nhỏ chúng ở đầu cuối (back-end) Ý tưởng đó đã giúp giảm thiểu rất nhiều giá thành

và sự đồ sộ của các phần mềm Dưới mỗi một ứng dụng thành công thì luôn phân chia thành 2 mảng là người thiết kế chính là lá chắn bảo về mã nguồn sau (back-end coding)

và người lập trình PHP được bảo vệ bởi mã trình diễn Smarty hỗ trợ một vài ngôn ngữ lập trình bậc cao, bao gồm:

- Điều khiển luồng dữ liệu, foreach

- if, elseif, else

- Biến thay đổi

- Người dùng tạo chức năng

Bên cạnh đó, thì một trong những chức năng nổi bật của các Template Engine là hệ thống tạo mẫu cho phép thay đổi từ mẫu tới mẫu Thông thường khi lập trình PHP bạn hay viết lẫn cả phần HTML với mã lệnh PHP trên một trang Điều này sẽ dẫn đến rắc rối khi bảo trì Bạn là người viết ra và cũng là người bảo trì thì không sao nhưng nếu bạn viết

ra sau đó người khác bảo trì Chắc họ nhìn vào code của bạn họ sẽ ngất mất vì quá rối Mặt khác khi làm nhiều trang web có chức năng như nhau Chỉ khác giao diện nên nếu lập trình theo kiểu như vậy bạn phải viết lại hoàn toàn Ngoài ra muốn code được bạn phải chờ người thiết kế giao diện cho bạn sau đó cắt ra file HTML rồi mới code Tất

cả những điều này sẽ làm giảm năng xuất công việc của bạn đi rất nhiều Smarty ra đời

đã giải quyết được các vấn đề nêu trên Dưới đây là một số ưu điểm của Smarty:

1 Tốc độ load trang rất nhanh (do tạo được cache)

2 Code ứng dụng của bạn trở lên trong sáng, mạch lạc và dễ bảo trì hơn rất nhiều (do tách biệt phần code và templates)

3 Hiệu quả công việc đạt tối đa (Người thiết kế và người lập trình làm việc hoàn toàn độc lập Thay đổi giao diện website nhanh chóng )

4 Được sử dụng phổ biến (bên Nhật rất ưa chuộng Smarty)

Sử dụng Smarty

Nạp thư viện Smarty:

require_once("smarty/Smarty.class.php");

Khởi tạo đối tượng Smarty:

$smarty = new Smarty();

Khai báo các đường dẫn yêu cầu:

$smarty->setCacheDir($setDirCache); //cho các templates Cache

$smarty->setCompileDir($setDirCompile);//Templates được Smarty biên dịch

$smarty->setConfigDir($setDirConfig); //Cho các tệp tin configs

$smarty->setTemplateDir($setDirTemplate); //Chứa đựng các Templates

Đưa một giá trị (value) đến Smarty:

CHƯƠNG III: ỨNG DỤNG XÂY DỰNG HỆ THỐNG

III.1 TÀI LIỆU ĐẶC TẢ

III.1.1 Giới thiệu

Các yều cầu giao diện hệ thống cần phải đáp ứng

Nhóm người đọc tài liệu:

Phần mềm là một ứng dụng web giới thiệu và bán xe sử dụng WebGL để hiển thị

mô hình xe 3D Với những hình ảnh trực quan về các mẫu xe sẽ giúp khách hàng dễ dàng hơn trong việc lựa chọn và đặt hàng Việc bán hàng qua web sẽ giúp giảm thiểu chi phí thuê nhân viên, thuê mặt bằng và chi phí cho hàng mẫu

III.1.1.3 Bố cụ tài liệu

Nội dung của phần tài liệu được trình bài trong 5 phần, bao gồm:

Phần mô tả tổng quan, phần này là cái nhìn tổng quan về hệ thống Mô tả tổng quan giúp người đọc biết được bối cảnh của sản phẩm, các chức năng của sản phẩm, đặc điểm người sử dụng, mô hình vận hành, các ràng buộc về thực thi và thiết kế, các giả định và phụ thuộc

Tiếp theo, chúng ta sẽ được biết về các yêu cầu giao tiếp bên ngoài của hệ thống Ở phần này, chúng ta sẽ hiểu cách hệ thống giao tiếp với người dùng, phân cứng, phần mềm bên ngoài và cách hệ thống truyền dữ liệu

Sau đó, chúng ta sẽ tìm hiểu về các tính năng của hệ thống trong phần các tính năng của hệ thống

Kế tiếp, chúng ta được biết về các yêu cầu phi chức năng mà hệ thống phải tuân theo Các yêu cầu này được phân loại theo 4 phần: yêu cầu thực thi, yêu cầu bảo mật, các đặc điểm chất lượng phần mềm, các quy tắc nghiệp vụ

Cuối cùng, những nội dụng vẫn chưa được trình bày ở trên nhưng có vai trò quan trọng với hệ thống sẽ được trình bày trong phần các yêu cầu khác

III.1.2 Mô tả tổng quan

III.1.2.1 Mô tả hệ thống

Công ty bán xe Mekong Cars xây dựng website trưng bày xe hơi, nhằm tạo thuận lợi cho khách hàng, qua đó có thể thu hút thêm khách hàng Công ty mong muốn xây dựng một hệ thống trưng bày mẫu xe, quản lý nhập hàng, cập nhật tin tức và đặt hàng trực tuyến

Quản lý trưng bày mẫu xe:

Hiện tại, công ty kinh doanh các mẫu xe của hãng Audi, Ford, Toyota và The Land Rover sản xuất Các công ty đó được lưu trong thực thể nhà cung cấp Người hợp tác với công ty và đã ký hợp đồng cung cấp sản phẩm cho công ty Mỗi nhà cung cấp có một mã phân biệt, tên, địa chỉ, email, số điện thoại và mô tả về nhà cung cấp

Mỗi mẫu xe thuộc một nhà cung cấp duy nhất Mỗi mẫu xe cần có một mã phân biệt Ngoài ra, hệ thống cần biết các thông tin như: tên xe thông tin kỹ thuật, hiện, ngày

ra mắt, số lượng, đơn giá

 Tên xe: là tên gắn liền với mẫu xe

 Thông tin kỹ thuật: lưu trữ các thông số kỹ thuật về mẫu xe

 Hiện: trạng thái của xe Giúp hệ thống biết có nên hiển thị mẫu xe hay không

 Ngày ra mắt: là ngày mà mẫu xe này được công bố Ngày mà mẫu xe chính thức được bán

 Đơn giá: là giá bán hiện tại được áp dụng Giá bán của mẫu xe được tính trên

cơ sở thông tin của đơn nhập hàng

 Số lượng: số lượng xe còn trong kho Số lượng được cập nhật mỗi khi có một đơn nhập hàng mới hoặc khi một đơn đặt hàng được duyệt

Hình ảnh về mẫu xe là một yêu cầu cần thiết đối với website trưng bày xe Do đó, thông tin về hình ảnh được quản lý riêng biệt Mỗi hình ảnh sẽ được xác định với một mã

phân biệt Hình ảnh phải thuộc một mẫu xe duy nhất và ở một vị trí duy nhất (vd: index, ngoại thất, nội thất, ) Ngoài ra mỗi hình ảnh còn lưu thông tin về liên kết và ngày đăng

 Liên kết: chứa thông tin về nơi lưu trữ luận lý của bức ảnh

 Ngày đăng: là ngày đăng tải bức ảnh Việc lưu trữ ngày đăng giúp cho việc xếp thứ tự hiển thị được dễ dàng

Để tránh lãng phí dữ liệu và sai sót nên vị trí được đặt ở một thực thể riêng Mỗi vị trí có một mã phân biệt và tên của vị trí mà hình ảnh được sử dụng

Mỗi mẫu xe khi được ra mắt đều có những video minh họa cho mẫu xe đó Hệ thống lưu trữ những thông tin được minh họa đó trong thực thể video Mỗi video có một

mã phân biệt và thuộc một mẫu xe duy nhất Ngoài ra, mỗi video còn lưu trữ thông tin về tiêu đề video và ngày đăng tải video

 Tiêu đề video: đây là thông tin giới thiệu về video tượng ứng Tiêu đề này giúp người dùng duyệt các video nhanh hơn

 Ngày đăng tải video: ngày đăng tải giúp hệ thống xếp vị trí ưu tiên lúc hiển thị thông tin trên website

Mỗi mẫu xe khi sản xuất sẽ được thiết kế nhiều màu để khách hàng lựa chọn Do

đó, hệ thống cần lưu màu của mẫu xe Thực thể màu cần một mã duy nhất cho mỗi thể hiện Ngoài ra, thực thể cần lưu trữ các thông tin như: tên màu, mã màu theo hệ màu RGB (đỏ, xanh lá, xanh dương)

 Tên màu: là tên của màu sắc được thể thiện

 Hệ số đỏ: là hệ số màu đỏ trong hệ màu RGB Hệ số này giao động từ 0 đến

 Tên bộ phận: là tên của bộ phận được quy định