Thiết kế website tư vấn dinh dưỡng cho phụ nữ có thai

DANH MỤC TỪ VIẾT TẮT HTML HyperText Markup Language Ngôn ngữ Đánh dấu Siêu văn bản CSS Cascading Style Sheet Là ngôn ngữ đƣợc dùng để mô tả cách trình bày tài liệu viết bằng ngôn ngữ HTM

Ngành : Cử nhân CNTT

Đà Nẵng, tháng 5/2015

LỜI CẢM ƠN

Đầu tiên em xin bày tỏ lòng biết ơn sâu sắc đến tất cả quý thầy cô khoa tin học trường đại học Sư phạm - ĐH Đà Nẵng, đã truyền đạt những kinh nghiệm quý báu cho chúng em trong những năm học vừa qua

Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Thanh Tuấn đã nhiệt tình hướng dẫn em hoàn thành đề tài khóa luận tốt nghiệp này

Đồng thời cũng gửi lời cảm ơn đến tất cả các bạn sinh viên cùng khóa đã ủng

hộ, giúp đỡ, chia sẻ kiến thức và kinh nghiệm trong thời gian làm khóa luận

Tuy nhiên, trong quá trình hoàn thành đề tài do kinh nghiệm và vốn kiến thức còn hạn chế nên không tránh khỏi những thiếu sót Em rất mong nhận được sự góp ý, nhận xét của các anh chị, quý thầy cô và các bạn để đề tài được hoàn thiện hơn

Em xin chân thành cảm ơn !

Sinh viên

Huỳnh Thị Thu Hiền

LỜI CAM ĐOAN

Tôi xin cam đoan:

1 Những nội dung trong báo cáo này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của thầy Nguyễn Thanh Tuấn

2 Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tôi xin chịu hoàn toàn trách nhiệm

Sinh viên

Huỳnh Thị Thu Hiền

MỤC LỤC

LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

DANH MỤC HÌNH 6

DANH MỤC BẢNG 7

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

MỞ ĐẦU 9

1 Bối cảnh của đề tài 9

2 Mục đích nghiên cứu 9

3 Đối tượng và phạm vi nghiên cứu 10

4 Phương pháp nghiên cứu 10

5 Ý nghĩa của đề tài 10

6 Cấu trúc của báo cáo khóa luận 11

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

1.1 Nghiên cứu HTML 12

1.1.1 HTML 12

1.1.1.1 Khái niệm 12

1.1.1.2 Cấu trúc của 1 tài liệu HTML 12

1.1.1.3 Cấu thành phần của HTML 12

1.1.1.4 Những nguyên tắc cơ bản 13

1.1.1.5 Các thẻ cơ bản 13

1.1.2 HTML5 16

1.1.2.1 Sự ra đời và phát triển 16

1.1.2.2 Các lý do để lựa chọn HTML5 16

1.1.2.3 Ưu điểm của HTML5 17

1.1.2.4 Cú pháp của trang HTML5 18

1.1.2.5 Các thẻ mới trong HTML5 18

1.1.2.6 Các tính năng mới trong HTML5 20

1.1.2.7 Các trình duyệt hỗ trợ HTML5 20

1.2 Giới thiệu về ngôn ngữ lập trình PHP 21

1.2.2 Đặc điểm của ngôn ngữ PHP 24

1.2.2.1 Ưu điểm 24

1.2.2.2 Nhược điểm 25

1.3 JavaScript 26

1.3.1 Khái niệm 26

1.3.2 Cú pháp 26

1.3.2.1 Khoảng trắng 26

1.3.2.2 Chú thích 26

1.3.2.3 Biến 27

1.3.2.4 Đối tượng 27

1.3.2.5 Cấu trúc dữ liệu 27

1.3.3 Cách nhúng javaScript vào HTML 28

1.4 CSS 28

1.4.1 Khái niệm CSS 28

1.4.2 Cú pháp CSS 28

1.4.3 Cách khai báo 29

1.4.4 CSS Selector 30

1.4.5 CSS3 32

1.4.6 Hướng đối tượng trong CSS (OOCSS) 32

1.5 Tìm hiểu về jQuery 33

1.5.1 Sơ lược về jQuery 33

1.5.2 Những gì jQuery có thể làm 33

1.6 Tìm hiểu về Twitter Bootstrap 34

1.6.1 Sơ lược về Twitter Bootstrap 34

1.6.2 Cách sử dụng 34

1.6.3 Bộ công cụ của Twitter Bootstrap 34

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 36

2.1 Phân tích bài toán 36

2.2 Phân tích và thiết kế hệ thống 36

2.2.1 Sơ đồ Use Case 36

2.2.2 Mô hình chức năng 38

2.2.3 Sơ đồ phân rã các chức năng 38

2.2.4 Sơ đồ ngữ cảnh 39

2.3 Thiết kế cơ sở dữ liệu 40

2.3.1 Mô tả lược đồ 40

2.3.2 Mô tả dữ liệu 40

CHƯƠNG 3: XÂY DỰNG WEBSITE VÀ CÁC KẾT QUẢ CỤ THỂ 42

3.1 Giao diện và các chức năng của người dùng 42

3.1.1 Giao diện chính của website 42

3.1.2 Giao diện trang giới thiệu 43

3.1.3 Giao diện trang liên hệ 43

3.1.4 Giao diện trang đăng kí 44

3.1.5 Giao diện trang lấy lại mật khẩu 45

3.1.6 Giao diện trang tư vấn 46

3.2 Giao diện và các chức năng của Admin 47

3.2.1 Giao diện chính của trang admin 47

3.2.2 Giao diện trang quản lí thành viên 48

3.2.3 Giao diện trang quản lí liên hệ 49

KẾT LUẬN 50

1 Kết quả đạt được 50

2 Hướng phát triển 50

TÀI LIỆU THAM KHẢO 51

DANH MỤC HÌNH

Hình 1 Cách thức hoạt động của ngôn ngữ PHP 24

Hình 2 PHP hỗ trợ nhiều Database khác nhau giúp việc phát triển Web tiện lợi hơn 25 Hình 4: Mô hình Use Case 37

Hình 5: Mô hình chức năng của hệ thống 38

Hình 6: Sơ đồ phân rã chức năng 39

Hình 7: Sơ đồ ngữ cảnh 40

Hình 8: Giao diện trang chủ 42

Hình 9: Giao diện trang giới thiệu 43

Hình 10: Giao diện trang liên hệ 44

Hình 11: Giao diện trang Đăng kí 45

Hình 12: Giao diện trang lấy lại mật khẩu 45

Hình 13: Giao diện trang tƣ vấn khi bạn chua đăng nhập 46

Hình 14: Giao diện trang tƣ vấn đã đăng nhập 47

Hình 15: Giao diện trang admin 48

Hình 16: Giao diện trang quản lí thành viên 48

Hình 17: Giao diện trang chỉnh sữa quyên cho thành viên 48

Hình 18: Giao diện trang quản lí liên hệ 49

Hình 19: Giao diện trang xem chi tiết nội dung liên hệ 49

DANH MỤC BẢNG

Bảng 1: Mô tả cả thẻ mới trong HTML5 18

Bảng 2 Mô tả Actor 37

Bảng 3: Mô tả lƣợc đồ 40

Bảng 4: bảng tbl_gd 40

Bảng 5: bảng tbl_lienhe 41

Bảng 6: bảng tbl_user 41

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

HTML HyperText Markup Language Ngôn ngữ Đánh dấu Siêu văn bản CSS Cascading Style Sheet Là ngôn ngữ đƣợc dùng để mô tả

cách trình bày tài liệu viết bằng ngôn ngữ HTML và XHTML,…

và một số ngôn ngữ khác PHP Hypertext Preprocesso 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á

kỳ Để có sức khỏe an toàn và một chế độ dinh dưỡng tốt cho người phụ nữ có thai đòi hỏi người phụ nữ phải có kiến thức về dinh dưỡng Tuy nhiên không phải ai cũng có một kiến thức chu đáo và vững vàng để chuẩn bị cho mình một hành trang sức khỏe trong quá trình có thai Xuất phát từ những suy nghĩ đó, em đã chọn đề tài “xây dựng website tư vấn dinh dưỡng phụ nữ có thai” để nghiên cứu, nhằm cung cấp những thông tin cần thiết về dinh dưỡng cho người phụ nữ mang thai

2 Mục đích nghiên cứu

Có 4 mục đích chính khi em quyết định chọn đề tài này đó là:

● Nghiên cứu và tìm hiểu các công nghệ:

● Tìm hiểu các thông tin về dinh dưỡng

○ Thông tin tổng quan về dinh dưỡng

○ Thông tin về chỉ số BMI, chỉ số hình thể

○ Thông tin về dinh dưỡng qua các giai đoạn thai kì

● Phương pháp xây dựng website tư vấn dinh dưỡng đáp ứng được nhiều thiết bị smartphone, tablet, desktop

● Áp dụng các kiến thức đã học để xây dựng một website cụ thể, từ đó rút ra cho bản thân những cách thức xây dựng website

3 Đối tượng và phạm vi nghiên cứu

 Đối tượng nghiên cứu:

- Xây dựng website chạy trên desktop với nhiều độ phân giải màn hình khác nhau

- Thông tin về dinh dưỡng, sức khỏe liên quan tới dinh dưỡng thai nhi để lấy dữ liệu chính để xây dựng website

 Phạm vi nghiên cứu:

- Phạm vi: Nghiên cứu các vấn đề xoay quanh dinh dưỡng cho phụ nữ mang thai

4 Phương pháp nghiên cứu

Đọc các tài liệu trên các Ebook và website để biết về các công nghệ sử dụng để xây dựng một trang web

Lên ý tưởng cho đề tài, sử dụng phần mềm Xmind để phân tích, triển khai ý tưởng Thông qua internet và đi khảo sát thực tế để tìm hiểu một số kiến thức nghiệp vụ

về dinh dưỡng có sử dụng trong đề tài

Thực hành thiết kế, xây dựng trang web dưới sự hướng dẫn của giáo viên hướng

dẫn

5 Ý nghĩa của đề tài

Về mặt ý nghĩa thực tiễn, đề tài xây dựng website tư vấn dinh dưỡng cho phụ nữ

có thai đáp ứng được nhu cầu tư vấn dinh dưỡng, đưa ra những thông tin bổ ích cho phụ nữ có thai Nhằm tiết kiệm thời gian tìm kiếm thông tin cho người sử dụng website

Về mặt ý nghĩa lí luận, đề tài này có ý nghĩa rất lớn trong việc thể hiện được những kiến thức quý báu đã học được từ các quý thầy cô của trường Đại học Sư phạm

- Đại học Đà Nẵng Và đặc biệt là có sự giúp đỡ, quan tâm trực tiếp, sự chỉ dạy tận tình của thầy Nguyễn Thanh Tuấn trong suốt quá trình học tập Việc nghiên cứu đề tài giúp cho bản thân em có thể nắm vững hơn về ngôn ngữ PHP, cách lập trình một trang web

Vì vậy em hy vọng đề tài của mình sẽ trở thành một sản phẩm hoàn chỉnh, được đưa vào sử dụng rộng rãi để có thể đáp lại sự dạy dỗ tận tình của tất cả các thầy cô và

cả tâm huyết của bản thân khi thực hiện đề tài này

6 Cấu trúc của báo cáo khóa luận

Mở đầu: Giới thiệu sơ lược về đề tài

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

Một số khái niệm và lý thuyết học được trong quá trình thực hiện đề tài

Chương 2: Phân tích và thiết kế hệ thống

Phân tích bài toán, phân tích các thành phần ứng dụng, các kĩ thuật sử dụng trong ứng dụng, thiết kế mã nguồn

Chương 3: Xây dựng website và kết quả đạt được

Giới thiệu về chức năng và giao diện của chương trình

Kết luận và tài liệu tham khảo

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

1.1 Nghiên cứu HTML

1.1.1 HTML

1.1.1.1 Khái niệm

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 do tổ chức World Wide Web Consortium (W3C) duy trì

1.1.1.2 Cấu trúc của 1 tài liệu HTML

Cấu trúc của tài liệu HTML gồm có 3 phần cơ bản:

 Phần <HTML> </HTML> chứa code của HTML

 Phần <head> </head> phần này nằm trong thẻ <HTML></HTML> chứa các thông tin hiển thị ở thanh điều hướng của trình duyệt web, chứa các thông tin về trang web

 Phần <body> </body> phần này nằm trong thẻ <HTML> </HTML>

và nằm sau thẻ <head> </head> chứa nội dung của trang web

Cấu trúc được thể hiện như sau:

Các thành phần của HTML đều có thẻ bắt đầu và thẻ kết thúc

Dưới đây là cấu trúc chung của một thành phần HTML:

<tag_name attributes> nội dung </tag_name>

Dưới đây là một số nguyên tắc trong tài liệu HTML:

o Tên thẻ không phân biệt chữ hoa và chữ thường

o Giá trị của thuộc tính nên được đặt trong dấu nháy đơn hoặc dấu nháy kép

Thẻ <span> </span>: Được sử dụng để nhóm các thành phần trên một dòng trong tài liệu HTML Ta có thể dùng span kèm với CSS để định dạng một phần nội dung trong văn bản HTML

o name là tên của thẻ meta

o content là giá trị tương ứng với name đó, nội dung trong content chỉ có thể là text chứ ko thể có các thẻ HTML trong đó

o scheme là định dạng của giá trị, ví dụ scheme=”day-month-year” là định dạng ngày tháng năm

o Không có chuẩn cho những thuộc tính trong thẻ meta vì vậy ta có thể tự định nghĩa thoải mái những metadata Ví dụ có thể định nghĩa thông tin tác giả:

<meta name=author content="Tac gia">

Thẻ <meta />: Xác định thông tin dữ liệu về văn bản HTML, thông tin dữ liệu sẽ

không được hiển thị trên trình duyệt Thường được sử dụng để xác định mô tả trang (description), từ khóa (keywords), tác giả của văn bản (author), sửa đổi lần cuối (last modified) và thông tin dữ liệu khác Thẻ <meta /> có thể được sử dụng bởi các trình duyệt (hiển thị nội dung hoặc tải lại trang), công cụ tìm kiếm (từ khoá), hoặc các dịch

vụ web khác Nó luôn truyền dưới dạng các cặp tên và giá trị

Thẻ <title>: Định nghĩa một tiêu đề cho tài liệu HTML Thẻ này không có thuộc tính Nó là yêu cầu trong tất cả các tài liệu HTML

Thẻ <link />: Xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài Được dùng phổ biến nhất là link tới tài liệu CSS Thẻ <link /> được viết bên trong thẻ <head>

Thẻ <style >: Định nghĩa thông tin về kiểu định dạng cho tài liệu HTML Một tài

liệu HTML có thể chứa nhiều thẻ <style>

Các thẻ văn bản

Thẻ h1- h6: Thẻ <hx>: Sử dụng để định nghĩa tiêu đề cho HTML Với <hx> có giá trị từ <h1> tới <h6> Trong đó thành phần quan trọng cũng giảm từ <h1> tới <h6> (hay từ tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>) Thẻ <h1> là thành phần

quan trọng nhất trong trang HTML, thường người ta sử dụng <h1> cho logo, hoặc dòng mô tả trang web (mục đích SEO)

Thẻ <strong>, <em>: Định nghĩa văn bản đậm mang ý nghĩa quan trọng hoặc in nghiêng mang ý nghĩa nhấn mạnh với cấu trúc dòng

Thẻ <blockquote>, <cite>: Định nghĩa khối trích dẫn lớn có cấu trúc khối hoặc các trích dẫn nhỏ có cấu trúc dòng

Thẻ <pre>, <code>: Định nghĩa một khối code không được dịch bởi trình duyệt Thẻ <br />: Dùng để xuống hàng, giống phím “Enter”

Thẻ <p>: Định nghĩa một đoạn văn bản

Các thẻ ảnh và đối tượng

Thẻ <img />: Dùng để nhúng một image vào tài liệu HTML Thẻ <img /> có 2 thuộc tính cần thiết là src và alt

Trong đó:

src: đường dẫn tham chiếu tới image

alt: được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn có thể do lỗi không hiển thi alt sẽ hiển thị thay)

Thẻ <object>, <param>: Dùng để thêm nhiều đối tượng như ảnh, audio, video,… vào tài liệu HTML

Thẻ <map>, <area />: Xác định một vùng bên trong image-map Image-map là hình trong đó có những khu vực có thể click được Các <area /> luôn được lồng bên

trong tag <map>

Thẻ liên kết

Thẻ <a>: Xác định một siêu liên kết (hyperlink) Được dùng để:

o Link từ trang này tới trang khác

o Link anchor (link neo) từ vị trí này tới vị trí khác

o Link để mở (hay download) một file nào đó (file word, excel, pdf,

image,…),mở một cửa sổ hay một object nào đó,…

Chú thích

Chúng ta dùng thẻ chú thích để thêm các đoạn chú thích vào tài liệu HTML Trình duyệt web sẽ bỏ qua dòng chú thích này

Cú pháp: <! chú thích vào đây >

1.1.2 HTML5

1.1.2.1 Sự ra đời và phát triển

Năm 1991 HTML ra đời bởi W3C, cho đến HTML 4 ra mắt năm 1997 và ngay sau

đó nó đã dừng phát triển từ năm 1998, người ta đã sớm nhận ra sự dễ dãi đến tùy tiện của nó là một nguy cơ do đó đã nghiên cứu ra XHTML 1.0 (ra đời năm 2000), chuẩn XHTML2 sau 5 năm nghiên cứu đã không thể ra đời Trong khi đó, nhu cầu bức thiết

mà Opera, Mozilla, và Apple đã thành lập WHATWG (Web Hypertext Application Technology Working Group) để nghiên cứu một giải pháp mới Giải pháp này đã được W3C chấp nhận Sự hợp tác của W3C và WHATWG đã tạo ra HTML5 từ năm 2009 Được phát triển theo mô hình cuốn chiếu nên HTML5 vẫn đang hoàn thiện nốt các phần còn lại, nhưng những phần đã ra mắt thì nhanh chóng được hỗ trợ

HTML5 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

1.1.2.2 Các lý do để lựa chọn HTML5

HTML5 được nhiều nhà thiết chọn dùng cũng bởi các ưu điểm:

 Hoàn toàn miễn phí: HTML5 được cung cấp miến phí cho cả nhà phát triển 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

 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 làm từ trình duyệt nên chắc chắn tính phổ biến sẽ cao hơn rất nhiều

 HTML 5 đơn giản hơn Ví dụ: ta có thể so sánh DOCTYPE của XHTML Strict 1.0 là:

○ <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xHTML1/DTD/xHTML1-strict.dtd">

○ Trong khi DOCTYPE của HTML5 chỉ đơn giản là <!DOCTYPE HTML>

1.1.2.3 Ưu điểm của HTML5

HTML5 thiết kế lại web và cho phép các website cơ bản có nhiều tiện ích hơn Các thẻ HTML5 sẽ thay thế plug-in trong những việc đơn giản cũng như làm cho web bảo mật hơn và hiệu quả hơn Dưới đây là những tiện ích khi HTML5 được ứng dụng

và được chuẩn hóa trên web:

 HTML5 làm giảm tầm quan trọng của các plug-ins

Trước đây, web thường gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnh động hay những thủ thuật khác xuất hiện trên web thông qua plug-ins

Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rất tốt Ai cần

hệ thống thực khi các video sẽ được chuyển thành audio và video? Plug-in dường như

sẽ bị lãng quên

 HTML5 hỗ trợ đồ họa tương tác

Web cũ tải hình ảnh bằng cách tải file GIF hay JPG Web mới có thể xây dựng hình ảnh trên Canvas Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ họa của website trở nên tương tác hơn.Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa

sẽ được tinh xảo hơn hiện nay

 HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file

Những người lập trình web thường lưu trữ một lượng lớn thông tin trong các cookies (300 cookies tương đương với 4096 byte) Bộ công cụ dùng plug-in Flash để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo Tuy nhiên, giờ đây chỉ cần sử dụng HTML5 là được

Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn Điều này giúp việc cài đặt các ứng dụng dễ dàng hơn giống như các ứng dụng cũ Các ứng dụng chạy mã JavaScript

từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối web đang hoạt động

 HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data

Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúp được nhiều ngoại trừ việc giúp trình duyệt nơi đặt dữ liệu Microformats trong HTML5 cung cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn

Các thẻ mới trong HTML5 được mô tả cụ thể trong bảng sau:

Bảng 1: Mô tả cả thẻ mới trong HTML5

<article> Định nghĩa một bài viết, một nội dung riêng biệt

<aside> Định nghĩa một nội dung bên ngoài nội dung chính

(thường là phần sidebar)

<audio> Định nghĩa âm thanh, như nhạc hay trường audio khác…

<canvas> Được dùng để hiển thị đồ họa

<command> Định nghĩa một nút lệnh, giống như Radiobutton, hộp

kiểm, hoặc một button

<datalist> Định nghĩa một danh sách tùy chọn, sử dụng thành phần

này cùng với các thành phần input

<details> Xác định thêm chi tiết hoặc điều khiển có thể được ẩn

hoặc hiện thị theo yêu cầu

<embed> Xác định nội dung nhúng như 1 plugin

<figcaptio> Xác định một chú thích cho tag figure

<figure> Xác định nội dung liên quan mạch lạc với nhau, như hình

ảnh, sơ đồ, code,…

<footer> Định nghĩa khu vực footer (phần cuối) của trang

<header> Định nghĩa khu vực header (phần đầu) của trang

<hgroup> Định nghĩa một nhóm các tiêu đề

<keygen> Xác định một cặp trường khóa chính sử dụng cho form

<mark> Xác định văn bản được đánh dấu, sử dụng khi muốn làm

nổi bật văn bản của mình

<meter> Định nghĩa một phép đo Sử dụng chỉ cho phép đo với giá

trị tối thiểu và tối đa

<nav> Định nghĩa link danh mục (navigation)

<output> Địa diện cho kết quả của phép tính (giống như được thực

hiện bởi script)

<progress> Mô tả tiến trình làm việc

<rp> Hiển thị những nội dung bên trong khi trình duyệt không

hỗ trợ thẻ <ruby>

<rt> Định nghĩa một lời giải thích hoặc cách phát âm của các

ký tự (đối với kiểu chữ Đông Á)

<ruby> Định nghĩa một chú thích (đối với kiểu chữ Đông Á)

<section> Định nghĩa một khu vực (vùng bao)

<source> Xác định nguồn cho một media

<summary> Xác định một tiêu đề cho các thành phần details, được sử

dụng để mô tả chi tiết về tài liệu, hoặc các bộ phận của tài liệu

<time> Xác định thời gian, ngày tháng hoặc năm sinh

<video> Xác định một video, chẳng hạn như một đoạn phim hoặc

một trường video

<wbr> Xác định văn bản quá dài sẽ tự động xuống hàng (không

bị tràn ra ngoài)

1.1.2.6 Các tính năng mới trong HTML5

HTML5 bao gồm rất nhiều tính năng mới Phần này đưa ra một cái nhìn tổng quan ngắn gọn về một số các cải tiến

o Web worker (Các trình làm việc trên nền web) tính năng này cho phép mã JavaScript được thiết lập để chạy trong một quá trình nền đang tạo điều kiện thuận lợi cho sự phát triển của các ứng dụng đa luồng Lợi ích chủ yếu mà các trình làm việc trên nền web (Web workers) cung cấp cho các nhà phát triển là có thể xử lý tính toán tập trung trong nền mà không ảnh hưởng đến tốc độ của giao diện người dùng

o Geolocation (Định vị địa lý) HTML5 có một API định vị địa lý cho phép một ứng dụng web xác định vị trí địa lý hiện tại của bạn, giả sử thiết bị mà bạn đang nhắm tới cung cấp các tính năng để tìm kiếm các thông tin như vậy (ví dụ, GPS trên điện thoại di động)

o Kéo và thả: Một tính năng thú vị khác chứa trong một API kéo và thả Cho đến nay, việc thực hiện kéo và thả không có các trình cắm thêm đã lệ thuộc vào một số mã JavaScript rất phức tạp

o Tạo tin nhắn giữa các tài liệu: Tính năng này cho phép các tài liệu trong các cửa

sổ khác nhau gửi và nhận tin nhắn với nhau Tính năng này đã chứng tỏ rất có ích cho

sự phát triển của các widget và các ứng dụng được lưu trữ trên các máy chủ khác với máy chủ của trang web ban đầu (tương tự như các ứng dụng Facebook)

o Và nhiều tính năng khác: Các tính năng khác mới được HTML5 giới thiệu bao gồm các kiểu MIME và đăng ký trình xử lý giao thức, vì vậy các ứng dụng web có thể được đăng ký như các ứng dụng mặc định với một kiểu tệp hoặc giao thức cụ thể; quản

lý lịch sử trình duyệt, mà cho đến bây giờ vẫn cần phải được thực hiện thủ công hoặc bằng cách sử dụng một khung công tác JavaScript bên ngoài

1.1.2.7 Các trình duyệt hỗ trợ HTML5

HTML5 đã sớm được hỗ trợ trong các trình duyệt trên PC như:

o Mozilla Firefox (phiên bản 3.5+)

o Apple Safari (phiên bản 4.0+)

o Opera (phiên bản 10.0+)

o Google Chrome (phiên bản 3.0+)

o internet Explorer của Microsoft cũng đã bắt đầu hỗ trợ HTML5 từ phiên bản 9 Các trình duyệt sử dụng trên mobile và máy tính bảng cũng hỗ trợ HTML5 tương đương PC

1.2 Giới thiệu về ngôn ngữ lập trình PHP

1.2.1 Các phiên bản PHP

PHP/FI

PHP được phát triển từ một sản phẩm có tên là PHP/FI PHP/FI do Rasmus Lerdorf tạo ra năm 1994, ban đầu được xem như là một tập con đơn giản của các mã kịch bản Perl để theo dõi tình hình truy cập đến bản sơ yếu lý lịch của ông trên mạng Ông đã đặt tên cho bộ mã kịch bản này là 'Personal Home Page Tools' Khi cần đến các chức năng rộng hơn, Rasmus đã viết ra một bộ thực thi bằng C lớn hơn để có thể truy vấn tới các cơ sở dữ liệu và giúp cho người sử dụng phát triển các ứng dụng web đơn giản Rasmus đã quyết định công bố mã nguồn của PHP/FI cho mọi người xem,

sử dụng cũng như sửa các lỗi có trong nó đồng thời cải tiến mã nguồn

PHP/FI, viết tắt từ "Personal Home Page/Forms Interpreter", bao gồm một số các chức năng cơ bản cho PHP như ta đã biết đến chúng ngày nay Nó có các biến kiểu như Perl, thông dịch tự động các biến của form và cú pháp HTML nhúng Cú pháp này giống như của Perl, mặc dù hạn chế hơn nhiều, đơn giản và có phần thiếu nhất quán Vào năm 1997, PHP/FI 2.0, lần viết lại thứ hai của phiên bản C, đã thu hút được hàng ngàn người sử dụng trên toàn thế giới với xấp xỉ 50.000 tên miền đã được ghi nhận là có cài đặt nó, chiếm khoảng 1% số tên miền có trên mạng internet Tuy đã có tới hàng nghìn người tham gia đóng góp vào việc tu chỉnh mã nguồn của dự án này thì vào thời đó nó vẫn chủ yếu chỉ là dự án của một người

PHP/FI 2.0

PHP/FI 2.0 được chính thức công bố vào tháng 11 năm 1997, sau một thời gian khá dài chỉ được công bố dưới dạng các bản beta Nhưng không lâu sau đó, nó đã được thay thế bởi các bản alpha đầu tiên của PHP 3.0

PHP 3

PHP 3.0 là phiên bản đầu tiên cho chúng ta thấy một hình ảnh gần gũi với các phiên bản PHP mà chúng ta được biết ngày nay Nó đã được Andi Gutmans và Zeev Suraski tạo ra năm 1997 sau khi viết lại hoàn toàn bộ mã nguồn trước đó Lý do chính

mà họ đã tạo ra phiên bản này là do họ nhận thấy PHP/FI 2.0 hết sức yếu kém trong việc phát triển các ứng dụng thương mại điện tử mà họ đang xúc tiến trong một dự án của trường đại học Trong một nỗ lực hợp tác và bắt đầu xây dựng dựa trên cơ sở người dùng đã có của PHP/FI, Andi, Rasmus và Zeev đã quyết định hợp tác và công

bố PHP 3.0 như là phiên bản thế hệ kế tiếp của PHP/FI 2.0, và chấm dứt phát triển

Một trong những sức mạnh lớn nhất của PHP 3.0 là các tính năng mở rộng mạnh

mẽ của nó Ngoài khả năng cung cấp cho người dùng cuối một cơ sở hạ tầng chặt chẽ dùng cho nhiều cơ sở dữ liệu, giao thức và API khác nhau, các tính năng mở rộng của PHP 3.0 đã thu hút rất nhiều nhà phát triển tham gia và đề xuất các mô đun mở rộng mới Hoàn toàn có thể kết luận được rằng đây chính là điểm mấu chốt dẫn đến thành công vang dội của PHP 3.0 Các tính năng khác được giới thiệu trong PHP 3.0 gồm có

hỗ trợ cú pháp hướng đối tượng và nhiều cú pháp ngôn ngữ nhất quán khác

Ngôn ngữ hoàn toàn mới đã được công bố dưới một cái tên mới, xóa bỏ mối liên

hệ với việc sử dụng vào mục đích cá nhân hạn hẹp mà cái tên PHP/FI 2.0 gợi nhắc Nó

đã được đặt tên ngắn gọn là 'PHP', một kiểu viết tắt hồi quy của "PHP: Hypertext Preprocessor"

Vào cuối năm 1998, PHP đã phát triển được con số cài đặt lên tới hàng chục ngàn người sử dụng và hàng chục ngàn Web site báo cáo là đã cài nó Vào thời kì đỉnh cao, PHP 3.0 đã được cài đặt cho xấp xỉ 10% số máy chủ Web có trên mạng internet

PHP 3.0 đã chính thức được công bố vào tháng 6 năm 1998, sau thời gian 9 tháng được cộng đồng kiểm nghiệm

PHP 4

Vào mùa đông năm 1998, ngay sau khi PHP 3.0 chính thức được công bố, Andi Gutmans và Zeev Suraski đã bắt đầu bắt tay vào việc viết lại phần lõi của PHP Mục đích thiết kế là nhằm cải tiến tốc độ xử lý các ứng dụng phức tạp, và cải tiến tính mô đun của cơ sở mã PHP Những ứng dụng như vậy đã chạy được trên PHP 3.0 dựa trên các tính năng mới và sự hỗ trợ khá nhiều các cơ sở dữ liệu và API của bên thứ ba, nhưng PHP 3.0 đã không được thiết kế để xử lý các ứng dụng phức tạp như thế này một cách có hiệu quả

Một động cơ mới, có tên 'Zend Engine' (ghép từ các chữ đầu trong tên của Zeev và Andi), đã đáp ứng được các nhu cầu thiết kế này một cách thành công, và lần đầu tiên được giới thiệu vào giữa năm 1999 PHP 4.0, dựa trên động cơ này, và đi kèm với hàng loạt các tính năng mới bổ sung, đã chính thức được công bố vào tháng 5 năm

2000, gần 2 năm sau khi bản PHP 3.0 ra đời Ngoài tốc độ xử lý được cải thiện rất nhiều, PHP 4.0 đem đến các tính năng chủ yếu khác gồm có sự hỗ trợ nhiều máy chủ Web hơn, hỗ trợ phiên làm việc HTTP, tạo bộ đệm thông tin đầu ra, nhiều cách xử lý thông tin người sử dụng nhập vào bảo mật hơn và cung cấp một vài các cấu trúc ngôn ngữ mới

Với PHP 4, số nhà phát triển dùng PHP đã lên đến hàng trăm nghìn và hàng triệu site đã công bố cài đặt PHP, chiếm khoảng 20% số tên miền trên mạng internet

Nhóm phát triển PHP cũng đã lên tới con số hàng nghìn người và nhiều nghìn người khác tham gia vào các dự án có liên quan đến PHP như PEAR, PECL và tài liệu

kĩ thuật cho PHP

PHP 5

Sự thành công hết sức to lớn của PHP 4.0 đã không làm cho nhóm phát triển PHP

tự mãn Cộng đồng PHP đã nhanh chóng giúp họ nhận ra những yếu kém của PHP 4 đặc biệt với khả năng hỗ trợ lập trình hướng đối tượng (OOP), xử lý XML, không hỗ trợ giao thức máy khách mới của MySQL 4.1 và 5.0, hỗ trợ dịch vụ web yếu Những điểm này chính là mục đích để Zeev và Andi viết Zend Engine 2.0, lõi của PHP 5.0 Một thảo luận trên Slashdot đã cho thấy việc phát triển PHP 5.0 có thể đã bắt đầu vào thời điểm tháng 12 năm 2002 nhưng những bài phỏng vấn Zeev liên quan đến phiên bản này thì đã có mặt trên mạng internet vào khoảng tháng 7 năm 2002 Ngày 29 tháng

6 năm 2003, PHP 5 Beta 1 đã chính thức được công bố để cộng đồng kiểm nghiệm Đó cũng là phiên bản đầu tiên của Zend Engine 2.0 Phiên bản Beta 2 sau đó đã ra mắt vào tháng 10 năm 2003 với sự xuất hiện của hai tính năng rất được chờ đợi: Iterators, Reflection nhưng namespaces một tính năng gây tranh cãi khác đã bị loại khỏi mã nguồn Ngày 21 tháng 12 năm 2003: PHP 5 Beta 3 đã được công bố để kiểm tra với việc phân phối kèm với Tidy, bỏ hỗ trợ Windows 95, khả năng gọi các hàm PHP bên trong XSLT, sửa chữa nhiều lỗi và thêm khá nhiều hàm mới PHP 5 bản chính thức đã

ra mắt ngày 13 tháng 7 năm 2004 sau một chuỗi khá dài các bản kiểm tra thử bao gồm Beta 4, RC 1, RC2, RC3 Mặc dù coi đây là phiên bản sản xuất đầu tiên nhưng PHP 5.0 vẫn còn một số lỗi trong đó đáng kể là lỗi xác thực HTTP

Ngày 14 tháng 7 năm 2005, PHP 5.1 Beta 3 được PHP Team công bố đánh dấu sự chín muồi mới của PHP với sự có mặt của PDO, một nỗ lực trong việc tạo ra một hệ thống API nhất quán trong việc truy cập cơ sở dữ liệu và thực hiện các câu truy vấn Ngoài ra, trong PHP 5.1, các nhà phát triển PHP tiếp tục có những cải tiến trong nhân Zend Engine 2, nâng cấp mô đun PCRE lên bản PCRE 5.0 cùng những tính năng và cải tiến mới trong SOAP, streams và SPL

PHP 6

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ỳ

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 [1]

1.2.2 Đặc điểm của ngôn ngữ PHP

1.2.2.1 Ưu điểm

a) Giá thành rẻ

PHP là mã nguồn mở nên tất nhiên là chúng ta sẽ chẳng mất gì khi sử dụng nó Có rất nhiều các sản phẩm nổi tiếng được xây dựng trên nền tảng PHP mà chắc chắn bạn đã từng nghe nói đến như WordPress, Joomla, Drupal….Và tất nhiên là chúng đều FREE Thật tuyệt vời phải không nào

b) Hỗ trợ tối đa phần mềm

Trước khi bắt đầu với công việc Web Developer (Người phát triển các ứng dụng Web) thì chúng ta có 2 điều cần chú ý sau:

 Thứ nhất là hệ điều hành (Operating System)

 Thứ hai là máy chủ Web (Web Server)

Người dùng có quyền lựa chọn “thoải mái” thứ mà họ đã quen dùng

Hình 1 Cách thức hoạt động của ngôn ngữ PHP

PHP không “kén” hệ thống

Cụ thể là: Ngôn ngữ PHP hỗ trợ trên hầu hết các hệ điều hành như Windows, RISC

OS, Mac OS X, Linux và nhiều loại biến thể khác của Unix Tương tự như thế với Web Server thì PHP cũng chạy tốt trên hầu hết các Web Server bao gồm Apache và IIS

c) Hỗ trợ tối đa cho Database

Đây là một trong những ưu điểm mạnh mẽ nhất làm nên sự vượt trội của PHP so với các ngôn ngữ khác PHP hỗ trợ rất nhiều kiểu cơ sở dữ liệu (Database) khác nhau

Kết quả là việc các lập trình viên code lên các Website có sử dụng Database sẽ trở lên

dễ dàng hơn bao giờ hết

Dưới đây là các Database được PHP hỗ trợ

Hình 2 PHP hỗ trợ nhiều Database khác nhau giúp việc phát triển Web tiện lợi hơn Thêm vào đó, PHP có một extension mở rộng Database với tên gọi DBX Nó cho phép chúng ta sử dụng một cách công khai các loại cơ sở dữ liệu khác cùng được hỗ trợ bởi extension này

Chưa hết, PHP hỗ trợ ODBC – chuẩn kết nối cơ sở dữ liệu mở Kết quả là các Coder có thể sử dụng đồng thời các Database khác mà cũng hỗ trợ chuẩn ODBC d) Dễ dàng huy động được nguồn nhân lực

Khó khăn lớn nhất khi thiết kế và phát triển Website là việc huy động được nguồn tài nguyên cho dự án Do PHP là một trong những ngôn ngữ lập trình tốt nhất và có số lượng người dùng đông đảo nên bạn sẽ không gặp nhiều khó khăn trong việc tìm người trợ giúp Tại Việt nam có rất nhiều lập trình viên PHP giỏi để bạn “chọn mặt gửi vàng”

1.2.2.2 Nhược điểm

Vì tính dễ phát triển của nó mà có nhiều các ứng dụng PHP rất không bảo mật trên mạng Có rất nhiều code PHP kém trên mạng Rất nhiều người không chuyên lập trình chọn và không biết xem xét bảo mật Cho nên tạo ra sự nhận thức rằng PHP chính nó

PHP giao tiếp với ít ngôn ngữ hơn, không giống như ASP.net được thiết kế để làm việc tốt hơn với C#, J#, C++ và VB.net

Người lập trình PHP không có nhưng công cụ phát triển Visual như Visual Studio của ASP.Net Làm cho nó rất khó khăn để những người khác tiếp tục việc của bạn, debug và refactor, xử lý lỗi là những hạn chế so với ASP.net

Một hạn chế khác của PHP là sự chọn lựa namespace separator, và thứ tự không phù hợp của các tham số trong các hàm được xây dựng sẵn (built-in functions)

1.3 JavaScript

1.3.1 Khái niệm

JavaScript là 1 ngôn ngữ dạng script thường được sử dụng cho việc lập trình web

ở phía client Nó tuân theo chuẩn ECMAScript Nó là 1 ngôn ngữ linh động, cú pháp

dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình JavaScript không hề liên quan tới ngôn ngữ lập trình Java, được hầu hết các trình duyệt ngày nay hỗ trợ Với JavaScript, ứng dụng web của bạn sẽ trở nên vô cùng sinh động, mang tính trực quan

Tuy trong phần lớn trường hợp, dấu chấm phẩy trước khi kết thúc một dòng JavaScript là không cần thiết để đoạn mã nguồn hoạt động chính Ngoài ra, do đặc thù của JavaScript - chuyên dùng trên trang web, kích cỡ của đoạn mã nguồn là quan trọng, có một số phần mềm có thể làm giảm kích cỡ của đoạn mã nguồn JavaScript bằng cách bỏ đi những khoảng trắng không cần thiết, để những phần mềm này hoạt

động chính xác, chúng ta cần thêm dấu chấm phẩy vào cuối mỗi câu lệnh

1.3.2.2 Chú thích

Cú pháp chú thích của JavaScript giống với C++ Chúng ta có thể chú giải trên nhiều dòng bằng cách bao bọc chú thích với /* và */ hoặc sử dụng // để chú thích từ vị trí // đến hết dòng