Bài giảng Phát triển ứng dụng nguồn mở: Bài 2.1 - Đoàn Thiện Ngân

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.
Nội dung trích xuất từ tài liệu:
Bài giảng Phát triển ứng dụng nguồn mở: Bài 2.1 - Đoàn Thiện Ngân 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 - 1/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 - 2/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 - 3/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 - 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 4 (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 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 - 7/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 - 8/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 - 9/41 Đoàn Thiện Ngân Bài 2.1 - 10/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 - 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 • 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 - 14/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 - 15/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 - 16/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ư ...