Phát triển ứng dụng mã nguồn mở - Bài 2: Ứng dụng Web với PHP (Client - Side scripting Web pages)

Đoàn Thiện Ngân Bài 2.1 - 1/41 Bài 2: Ứng dụng Web với PHP (2.1 Client-side scripting Web pages) GV: ĐOÀN THIỆN NGÂN dngan2003@gmail.com – ngan@ueh.edu.vn Đoàn Thiện Ngân Bài 2.1 - 2/41 Nội dung 2.1 Client–side scripting webpages –Tổng quan về HTML, XHTML –CSS, Javascript 2.2 Server–side scripting language PHP. –Tổng quan về 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 - 3/41 Phần 1: Client–side webpages HTML, XHTML, CSS, Javascript • Tổng quan • HTML • CSS • Javascript • XHTML • HTML 5 Đoàn Thiện Ngân Bài 2.1 - 4/41 Tài liệu tham khảo 1. Giáo trình Lập trình mạng 1, Đoàn Thiện Ngân, Nguyễn Công Trí, Đoàn Thị Thanh Diễm, UEH, 2008 2. www.w3.org www.w3schools.com 3. HTML5 - WHATWQ www.whatwg.org JavaScript Web Applications, Alex MacCaw, O’Reilly, 2011 4. 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 - 5/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 - 6/41 HTML Editors • Dreamweaver (8, CS3, CS4, CS5, CS6) • Microsoft – Frontpage 2003, – SharePoint Designer 2007, 2010 – Expression Web 4 (free) • Free softwares: Kompozer, Aptana, SeaMonkey, Netbeans, • CoffeeCup HTML Editor • PSPAD Đoàn Thiện Ngân Bài 2.1 - 7/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 các trình duyệt hỗ trợ • Trang Web động (server─side scripting): rất đa dạng như cgi, asp, aspx, jsp, jsf, php, – Thường đi với Cơ sở dữ liệu – Bắt buộc phải có web server - httpd lúc chạy để sinh HTML code trả về client Đoàn Thiện Ngân Bài 2.1 - 8/41 Static Web pages Một vài nhận xét về trang web tĩnh: 1. Tác giả viết trang Web dùng HTML và lưu thành tập tin .htm (.html) trên Web server. 2. Sau đó một user nhập URL vào trình duyệt và một yêu cầu (request) được gởi từ trình duyệt đến Web server 3. Web server xác định trang .htm (hay .html) và chuyển nó về dạng HTML. 4. Web server gởi trang HTML qua mạng về trình duyệt. 5. Trình duyệt xử lý trang HTML và hiển thị lên trang web. Đoàn Thiện Ngân Bài 2.1 - 9/41 Client─Side Scripting Web Pages Client-Side Scripting Web Pages 1. Tác giả viết một tập lệnh để tạo trang Web và lưu thành tập tin .htm trên Web server. Tập lệnh này có thể trong những dạng ngôn ngữ khác nhau và lưu riêng biệt hay chung trong tập tin HTML. 2. Sau đó một user nhập URL vào trình duyệt và một yêu cầu (request) được gởi từ trình duyệt đến Web server 3. Web server xác định trang .htm và những trang liên hệ chứa tập lệnh (nếu có) 4. Web server gởi trang HTML và tập lệnh tương ứng qua mạng về trình duyệt. 5. Trình duyệt xử lý trang HTML và tập lệnh hiển thị lên trang web. Đoàn Thiện Ngân Bài 2.1 - 10/41 Đoàn Thiện Ngân Bài 2.1 - 11/41 Server─Side Dynamic Web pages Server-Side Dynamic Web Pages 1. Tác giả viết một tập lệnh để tạo trang Web và lưu thành tập tin trên Web server. 2. Sau đó một user nhập URL vào trình duyệt và một yêu cầu (request) được gởi từ trình duyệt đến Web server 3. Web server xác định trang chứa tập lệnh 4. Web server xử lý tập lệnh tạo ra trang HTML 5. Web server gởi trang HTML qua mạng về trình duyệt. 6. Trình duyệt xử lý trang HTML và hiển thị lên trang web. asp; aspx; jsp; jsf; php; cfm; Đoàn Thiện Ngân Bài 2.1 - 12/41 Đoàn Thiện Ngân Bài 2.1 - 13/41 How PHP works Đoàn Thiện Ngân Bài 2.1 - 14/41 HTML • Trang web tĩnh *.htm, *.html • Chạy thử trực tiếp trong trình duyệt, không cần web server • Tập tin văn bản với các thẻ lệnh quy chuẩn ─ WYWIWYG (Tools cho thấy định dạng WYSIWYG) • Cấu trúc, thẻ lệnh căn bản, định dạng, liên kết, bảng dữ liệu, frame, (Chương 1, 2 và 3 giáo trình Lập trình mạng 1) Đoàn Thiện Ngân Bài 2.1 - 15/41 CSS • Cascading Style Sheets ─ CSS • CSS định nghĩa cách hiển thị của các tài liệu viết bằng ngôn ngữ đánh dấu như HTML • CSS được thiết kế với mục đích tách biệt phần nội dung (viết bằng ngôn ngữ HTML) với phần trình bày (viết bằng ngôn ngữ CSS) của tài liệu • Sự tách biệt làm: – tăng khả năng truy xuất nội dung tài liệu, – tăng tính uyển chuyển và đơn giản cấu trúc – giảm bớt sự lặp lại các thẻ định dạng Đoàn Thiện Ngân Bài 2.1 - 16/41 Sử dụng CSS trong HTML Ba cách sử dụng CSS • Inline CSS: – Bên trong một thẻ HTML • Internal CSS: – Trong phần đầu tài liệu HTML (head), nằm trong khối . • External CSS: – Trong tập tin riêng, có thể dùng chung cho nhiều trang HTML ─ tập tin *.css (Chương 4, 5 giáo trình Lập tình mạng 1) Đoàn Thiện Ngân Bài 2.1 - 17/41 JavaScript • Ngôn ngữ kịch bản (Scripting language) • Không phải là ngôn ngữ Java • Tạo nội dung động (có thể thay đổi) cho trang web tĩnh (DHTML ─ Dynamic HTML) • Javascript là ngôn ngữ kịch bản ở phía client, chủ yếu được dùng để bổ sung tính tương tác cho Website: – kiểm tra dữ liệu nhập, – xử lý các biến cố xảy ra trên trang, (chương 6, 7, 8 giáo trình Lập trình mạng 1) Đoàn Thiện Ngân Bài 2.1 - 18/41 Sử dụng code Javascript • Trong trang web, đoạn mã HTML sử dụng được khai báo thông qua thẻ . 1. Chèn trực tiếp đoạn code Javascript vào giữa cặp thẻ trong tập tin HTML. 2. Sử dụng tập tin Javascript riêng (*.js), và dùng thẻ để kết nối với trang HTML. Đoàn Thiện Ngân Bài 2.1 - 19/41 Chèn trực tiếp code Javascript vào tập tin HTML <script type="text/javascript" language="JavaScript"> <!—- // Code JavaScript --> • Có thể bỏ bớt language="JavaScript" hay type="text/javascript" tùy trình duyệt. Đoàn Thiện Ngân Bài 2.1 - 20/41 Chèn trực tiếp code Javascript • Script trong phần thường là những đoạn khai báo hàm (function). • Đoạn script trong phần body chủ yếu dùng để tạo nội dung của trang và được thực thi khi quá trình nạp trang xảy ra ở phần body. • Một tập tin HTML có thể chứa nhiều đoạn mã lệnh Javascript và không giới hạn về số lượng. Đoàn Thiện Ngân Bài 2.1 - 21/41 Sử dụng tập tin Javascript riêng • Tập tin *.js, chứa các đoạn mã Javascript, trong tập tin này chỉ chứa các mã lệnh Javascript, không chứa thẻ HTML nào cả. • Với trang Web cần dùng mã Javascript trong *.js, khai báo liên kết đến tập tin này bằng thẻ <script type="text/javascript" src="filename.js" language="JavaScript"> • Thuộc tính src thể hiện địa chỉ URL của tập tin JavaScript (*.js). • Ưu điểm: chia sẻ các hàm dùng chung cho nhiều trang html, đồng thời không mất nhiều thời gian để chỉnh sửa và đảm bảo thống nhất các đoạn mã dùng chung Đoàn Thiện Ngân Bài 2.1 - 22/41 Cú pháp cơ bản 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; Để rõ ràng và dễ đọc hơn, nên có dấu chấm phẩy cuối mỗi lệnh: câu-lệnh-thứ-nhất; câu-lệnh-thứ-hai; • Khối lệnh – Một nhóm lệnh thực hiện một công việc nào đó, được gọi là khối lệnh. – Khối lệnh được bao bọc bởi cặp móc {}. Đoàn Thiện Ngân Bài 2.1 - 23/41 Cú pháp cơ bản Javascript • Comment ─ Chú thích – trên một dòng thì sử dụng kí hiệu // – một khối, gồm nhiều dòng, dùng kí hiệu /* */ • Biến – Khai báo: var variable_name1, v_name2, ; – Một biến sẽ được tự động khai báo khi ta gán trị cho nó. – Không cần xác định kiểu dữ liệu cho biến – Nên khai báo biến trước dù không bắt buộc Đoàn Thiện Ngân Bài 2.1 - 24/41 Qui ước tên biến trong Javascript • Tên biến phải bắt đầu bằng ký tự alphabet, hoặc bằng ký tự gạch dưới _ (underscore). • Tên biến có thể chứa ký tự anphabet, số, biểu tượng $ và gạch dưới _. • Trong tên biến không có khoảng trống (spacebar character). • Tên biến không được trùng với từ được ấn định trong bộ từ khóa. • Javascript phân biệt dạng chữ hoa - thường (case─sensitive) • Tên biến nên là những từ có ý nghĩa, mô tả nội dung của giá trị chứa trong biến. Đoàn Thiện Ngân Bài 2.1 - 25/41 Biến ─ Hằng • Tầm vực của biến – Biến toàn cục – Biến cục bộ • Hằng – Giống như biến, hằng cũng là vùng nhớ lưu trữ giá trị và được truy xuất thông qua tên. – Chương trình có thể thay đổi giá trị của biến tại bất kì thời điểm nào. – Khi hằng đã được gán giá trị, trị của hằng là cố định, không thể thay đổi. – hằng được khai báo thông qua từ khóa const: const TÊN_HẰNG; Đoàn Thiện Ngân Bài 2.1 - 26/41 Kiểu dữ liệu trong JavaScript • Kiểu số – Kiểu số là các trị số nguyên hay số thập phân dấu chấm động. • Kiểu luận lý Boolean – Kiểu luận lý thể hiện sự đúng – sai, chỉ có hai giá trị là true và false • Kiểu chuỗi – Kiểu chuỗi biểu diễn một chuỗi kí tự gồm chữ cái, số, dấu chấm câu và khoảng trống. – Giá trị kiểu chuỗi phải được đặt giữa cặp dấu nháy kép ("") hay cặp dấu nháy đơn (''). • Ngoài ra ba kiểu dữ liệu trên, Javascript còn hỗ trợ thêm hai giá trị đặc biệt là null và undefined. Đoàn Thiện Ngân Bài 2.1 - 27/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 về đầu dòng Đoàn Thiện Ngân Bài 2.1 - 28/41 Trị đặc biệt null & undefined • Trị null là trị đặc biệt, không chứa giá trị nào. • Trị null là nhằm khởi tạo cho biến một giá trị tạm thời, tránh trường hợp lỗi khi sử dụng biến chưa khởi tạo. • Khi chuyển sang kiểu số: trị null được tự động chuyển thành 0. • Khi chuyển sang kiểu chuỗi: null được chuyển thành chuỗi rỗng "". Chú ý: khi xuất trị null. • Khi chuyển sang kiểu boolean: null chính là trị false. • Trị undefined là trị mặc định được gán cho các biến chưa khởi tạo giá trị Đoàn Thiện Ngân Bài 2.1 - 29/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) • Toá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 - 30/41 Hàm • Hàm được định nghĩa thông qua từ khóa function, với một tên hàm xác định: function functionName([thamsố1] [,thamsố2] [,.]) { /* đoạn mã lệnh trong hàm */ [ return trịTrảVề; ] } • Đối với hàm có mang giá trị trả về, ta có thể gán giá trị của hàm cho một biến. Đoàn Thiện Ngân Bài 2.1 - 31/41 Hàm thông dụng trong Javascript • alert(), prompt(), confirm() • eval(), Number() • parseInt(), parseFloat() • isNaN(string) • setTimeout(), clearTimeout() • setInterval(), clearInterval() Đoàn Thiện Ngân Bài 2.1 - 32/41 Cấu trúc điều khiển và vòng lặp • Điều khiển if • Cấu trúc switch case • Vòng lặp for • Vòng lặp do 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 - 33/41 Đối tượng trong 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 - 34/41 Biểu thức qui tắc • Đối tượng RegExp, được viết tắt từ thuật ngữ Regular Expression, đại diện cho một biểu thức qui tắc. • Biểu thức qui tắc cho phép xây dựng các mẫu so khớp (pattern) từ các kí tự đặc biệt. • Dùng các mẫu so khớp để kiểm tra một chuỗi dữ liệu nào đó có thỏa mãn biểu thức qui tắc này hay không. • Có thể ứng dụng biểu thức qui tắc trong việc kiểm tra tính hợp lệ của dữ liệu trong form, ví dụ như địa chỉ email, số điện thoại, . Đoàn Thiện Ngân Bài 2.1 - 35/41 Xây dựng đối tượng mới • Có thể tự tạo một đối tượng riêng bằng một trong hai cách: 1. Tạo trực tiếp một thực thể đối tượng mới: sử dụng lệnh new Object() tạo một thực thể đối tượng mới, sau đó gán giá trị cho các thuộc tính và khai báo các phương thức của đối tượng này. Một cách làm khác là khai báo trực tiếp giá trị của thuộc tính và phương thức 2. Xây dựng hàm khởi tạo của đối tượng: sau khi xây dựng hàm khởi tạo, để tạo một thực thể của đối tượng, ta dùng lệnh new đối_tượng. Đoàn Thiện Ngân Bài 2.1 - 36/41 HTML DOM • DOM (Document Object Model for HTML): mô hình đối tượng tài liệu trong trình duyệt. • Mô hình DOM định nghĩa tập chuẩn về cách truy xuất, thao tác các đối tượng trong tài liệu HTML. • Qua DOM, tất cả các thành phần HTML, bao gồm cả văn bản và thuộc tính đều truy xuất được. • Mô hình DOM thể hiện tài liệu HTML dạng cây, mỗi nút (node) trên cây là một phần tử HTML. • Các nút nằm bên trong một nút khác được gọi là nút con. • Các nút cùng mức được xem là nút anh em. Đoàn Thiện Ngân Bài 2.1 - 37/41 Tổ chức phân cấp của DOM Đoàn Thiện Ngân Bài 2.1 - 38/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 - 39/41 XHTML • Trình duyệt có cách xử lý khác nhau • Cú pháp HTML lõng lẻo, trình duyệt này chạy nhưng trình duyệt khác không chạy. • XML (Extensible Markup Language) chặt chẻ và chính xác. • XML + HTML ≈ XHTML • XHTML đảm bảo chuẩn mực để các trình duyệt đều có thể chạy được. Đoàn Thiện Ngân Bài 2.1 - 40/41 HTML 5 • Giới hạn của HTML 4 (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 mới. • Chú ý: Nhiều trình duyệt chưa hỗ trợ tất cả các tính năng mới của HTML5. • Book: Introducing HTML5, 2nd Edition, Bruce Lawson and Remy Sharp, New Riders, 2012 Đoàn Thiện Ngân Bài 2.1 - 41/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 là gì? – Cách sử dụng CSS – Javascript là gì? – Cách sử dụng Javascript – XHTML, HTML5