Bài 2 cung cấp kiến thức về ứng dụng Web với PHP. Nội dung chính trong chương 2.1 trình bày về Client-side scripting Web pages. Trong chương này người học sẽ tìm hiểu về HTML, XHTML, CSS và Javascript. Mời tham khảo.
Bài 2: Ứng dụng Web với PHP (2.1 Client-side scripting Web pages) GV: ĐỒN THIỆN NGÂN dngan2003@gmail.com – ngan@ueh.edu.vn Đồn Thiện Ngân Bài 2.1 - 1/41 Nội dung 2.1 Client–side scripting webpages – Tổng quan HTML, XHTML – CSS, Javascript 2.2 Server–side scripting language PHP – Tổng quan PHP – Cơng cụ lập trình với PHP – Ngơn ngữ lập trình PHP 2.3 PHP – Lập trình hướng đối tượng Đoàn Thiện Ngân Bài 2.1 - 2/41 Phần 1: Client–side webpages HTML, XHTML, CSS, Javascript • • • • • • Tổng quan HTML CSS Javascript XHTML HTML Đoàn Thiện Ngân Bài 2.1 - 3/41 Tài liệu tham khảo Giáo trình Lập trình mạng 1, Đồn Thiện Ngân, Nguyễn Cơng Trí, Đồn Thị Thanh Diễm, UEH, 2008 www.w3.org www.w3schools.com HTML5 - WHATWQ www.whatwg.org JavaScript Web Applications, Alex MacCaw, O’Reilly, 2011 Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day, Laura Lemay, Rafe Colburn, Sams Publishing, 2011 Đoàn Thiện Ngân Bài 2.1 - 4/41 Tổng quan • Phân loại tài liệu – WYWIWYG: What You Want Is What You Get Groff, Troff, Tex, Latex, … – WYSIWYG: What You See Is What You Get Ms Word, … • HTTP ─ Hypertext Transfer Protocol – Web Server: IIS, Apache, Tomcat, Glassfish, Wamp Xamm, … – Web Browser: IE (Internet Explorer), Firefox, Safari, Chrome, Opera, … Đoàn Thiện Ngân Bài 2.1 - 5/41 HTML Editors • Dreamweaver (8, CS3, CS4, CS5, CS6) • Microsoft – Frontpage 2003, – SharePoint Designer 2007, 2010 – Expression Web (free) • Free softwares: Kompozer, Aptana, SeaMonkey, Netbeans, … • CoffeeCup HTML Editor • PSPAD Đoàn Thiện Ngân Bài 2.1 - 6/41 Tổng quan – Ứng dụng Web • Trang Web tĩnh: htm, html – Kết hợp client─side scripting (Javascript, Vbscript, …) – Không cần Web server lúc thử nghiệm – Hầu hết trình duyệt hỗ trợ • Trang Web động (server─side scripting): đa dạng cgi, asp, aspx, jsp, jsf, php, … – Thường với Cơ sở liệu – Bắt buộc phải có web server - httpd lúc chạy để sinh HTML code trả client Đoàn Thiện Ngân Bài 2.1 - 7/41 Static Web pages Một vài nhận xét trang web tĩnh: Tác giả viết trang Web dùng HTML lưu thành tập tin htm (.html) Web server Sau user nhập URL vào trình duyệt yêu cầu (request) gởi từ trình duyệt đến Web server Web server xác định trang htm (hay html) chuyển dạng HTML Web server gởi trang HTML qua mạng trình duyệt Trình duyệt xử lý trang HTML hiển thị lên trang web Đoàn Thiện Ngân Bài 2.1 - 8/41 Client─Side Scripting Web Pages Client-Side Scripting Web Pages Tác giả viết tập lệnh để tạo trang Web lưu thành tập tin htm Web server Tập lệnh dạng ngơn ngữ khác lưu riêng biệt hay chung tập tin HTML Sau user nhập URL vào trình duyệt yêu cầu (request) gởi từ trình duyệt đến Web server Web server xác định trang htm trang liên hệ chứa tập lệnh (nếu có) Web server gởi trang HTML tập lệnh tương ứng qua mạng trình duyệt Trình duyệt xử lý trang HTML tập lệnh hiển thị lên trang web Đoàn Thiện Ngân Bài 2.1 - 9/41 Đoàn Thiện Ngân Bài 2.1 - 10/41 Ký tự đặc biệt Escape character: \ (backslash) • \' nháy đơn • \" nháy kép • \& dấu & • \n xuống dịng • \t ab • \r đầu dịng Đồn Thiện Ngân Bài 2.1 - 27/41 Trị đặc biệt null & undefined • Trị null trị đặc biệt, khơng chứa giá trị • Trị null nhằm khởi tạo cho biến giá trị tạm thời, tránh trường hợp lỗi sử dụng biến chưa khởi tạo • Khi chuyển sang kiểu số: trị null tự động chuyển thành • Khi chuyển sang kiểu chuỗi: null chuyển thành chuỗi rỗng "" Chú ý: xuất trị null • Khi chuyển sang kiểu boolean: null trị false • Trị undefined trị mặc định gán cho biến chưa khởi tạo giá trị Đoàn Thiện Ngân Bài 2.1 - 28/41 Các toán tử Toán tử số học: +, ─ , *, /, %, ++, ─ ─ Toán tử gán: =, +=, ─=, *=, /=, %= Toán tử so sánh: ==, !=, , =, Toán tử logic: &&, ||, ! (not) Toán tử chuỗi: + (nối chuỗi: str1 = str2 + str3) • Tốn tử điều kiện (điều-kiện) ? giá-trị-1 : giá-trị-2 • • • • • Đoàn Thiện Ngân Bài 2.1 - 29/41 Hàm • Hàm định nghĩa thơng qua từ khóa function, với tên hàm xác định: function functionName([thamsố1] [,thamsố2] [,….]) { /* đoạn mã lệnh hàm */ [ return trịTrảVề; ] } • Đối với hàm có mang giá trị trả về, ta gán giá trị hàm cho biến Đoàn Thiện Ngân Bài 2.1 - 30/41 Hàm thơng dụng Javascript • • • • • • alert(), prompt(), confirm() eval(), Number() parseInt(), parseFloat() isNaN(string) setTimeout(), clearTimeout() setInterval(), clearInterval() Đoàn Thiện Ngân Bài 2.1 - 31/41 Cấu trúc điều khiển vòng lặp • • • • • • • Điều khiển if Cấu trúc switch … case Vòng lặp for Vòng lặp … while Vòng lặp while Vòng lặp for … in Lệnh break, continue Đoàn Thiện Ngân Bài 2.1 - 32/41 Đối tượng Javascript • Để tạo thực thể đối tượng, ta sử dụng từ khóa new • Các đối tượng thông dụng – String – Date – Math – Array Đoàn Thiện Ngân Bài 2.1 - 33/41 Biểu thức qui tắc • Đối tượng RegExp, viết tắt từ thuật ngữ Regular Expression, đại diện cho biểu thức qui tắc • Biểu thức qui tắc cho phép xây dựng mẫu so khớp (pattern) từ kí tự đặc biệt • Dùng mẫu so khớp để kiểm tra chuỗi liệu có thỏa mãn biểu thức qui tắc hay khơng • Có thể ứng dụng biểu thức qui tắc việc kiểm tra tính hợp lệ liệu form, ví dụ địa email, số điện thoại, … Đoàn Thiện Ngân Bài 2.1 - 34/41 Xây dựng đối tượng • Có thể tự tạo đối tượng riêng hai cách: Tạo trực tiếp thực thể đối tượng mới: sử dụng lệnh new Object() tạo thực thể đối tượng mới, sau gán giá trị cho thuộc tính khai báo phương thức đối tượng Một cách làm khác khai báo trực tiếp giá trị thuộc tính phương thức Xây dựng hàm khởi tạo đối tượng: sau xây dựng hàm khởi tạo, để tạo thực thể đối tượng, ta dùng lệnh new đối_tượng Đoàn Thiện Ngân Bài 2.1 - 35/41 HTML DOM • DOM (Document Object Model for HTML): mơ hình đối tượng tài liệu trình duyệt • Mơ hình DOM định nghĩa tập chuẩn cách truy xuất, thao tác đối tượng tài liệu HTML • Qua DOM, tất thành phần HTML, bao gồm văn thuộc tính truy xuất • Mơ hình DOM thể tài liệu HTML dạng cây, nút (node) phần tử HTML • Các nút nằm bên nút khác gọi nút • Các nút mức xem nút anh em Đoàn Thiện Ngân Bài 2.1 - 36/41 Tổ chức phân cấp DOM Đoàn Thiện Ngân Bài 2.1 - 37/41 DOM Objects • • • • • • • • Đối tượng window Đối tượng navigator Đối tượng location Đối tượng history Đối tượng document Đối tượng frame Đối tượng form Đối tượng Style Đoàn Thiện Ngân Bài 2.1 - 38/41 XHTML • Trình duyệt có cách xử lý khác • Cú pháp HTML lõng lẻo, trình duyệt chạy trình duyệt khác khơng chạy • XML (Extensible Markup Language) chặt chẻ xác • XML + HTML ≈ XHTML • XHTML đảm bảo chuẩn mực để trình duyệt chạy Đoàn Thiện Ngân Bài 2.1 - 39/41 HTML • Giới hạn HTML (1998) • W3C: XHTML 1.0 (1998), 1.1 (2000─2004) 2.0 (2006─2009) ? • HTML5 (2009): WHATWG (Web Hypertext Application Technology Working Group, www.whatwg.org) mở rộng HTML 4, đưa vào nhiều tag mới, nhiều khái niệm • Chú ý: Nhiều trình duyệt chưa hỗ trợ tất tính HTML5 • Book: Introducing HTML5, 2nd Edition, Bruce Lawson and Remy Sharp, New Riders, 2012 Đoàn Thiện Ngân Bài 2.1 - 40/41 ??? • Trang web (webpage) – Trang web tĩnh (client-side scripting) – Trang web động (server-side scripting) • Html, CSS, Javascript – Các thẻ lệnh html - tag – CSS gì? – Cách sử dụng CSS – Javascript gì? – Cách sử dụng Javascript – XHTML, HTML5 Đoàn Thiện Ngân Bài 2.1 - 41/41 ... lên trang web asp; aspx; jsp; jsf; php; cfm; … Đoàn Thiện Ngân Bài 2.1 - 11/41 Đoàn Thiện Ngân Bài 2.1 - 12/41 How PHP works Đoàn Thiện Ngân Bài 2.1 - 13/41 HTML • Trang web tĩnh *.htm, *.html •... dùng chung Đoàn Thiện Ngân Bài 2.1 - 21/41 Cú pháp Javascript • Tương tự ngơn ngữ lập trình học • Câu lệnh (Statement) câu-lệnh-thứ-nhất câu-lệnh-thứ-hai câu-lệnh-thứ-nhất; câu-lệnh-thứ-hai; Để... tương ứng qua mạng trình duyệt Trình duyệt xử lý trang HTML tập lệnh hiển thị lên trang web Đoàn Thiện Ngân Bài 2.1 - 9/41 Đoàn Thiện Ngân Bài 2.1 - 10/41 Server─Side Dynamic Web pages Server-Side