Bài giảng Phát triển ứng dụng web

PHÁT TRIỂN ỨNG DỤNG WEB ThS. Nguyễn Hồ Minh Đức Giới thiệu môn học  Mục tiêu:  Nắm vững các khái niệm căn bản của quá trình thiết kế, cài đặt và triển khai 1 ứng dụng web  Thiết kế và cài đặt 1 ứng dụng web hoàn chỉnh bằng PHP  Triển khai ứng dựng web trên intranet, internet  Một số kỹ thuật an toàn và bảo mật cho website 2Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Giới thiệu môn học  Nội dung môn học:  Giới thiệu về internet và những nguyên lý cơ bản trong thiết kế web  HTML, DHTML  Javascript  Lập trình web với PHP  Triển khai ứng dụng web Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 3 Giới thiệu môn học  Tài liệu tham khảo:  Bài giảng, bài tập:  www.w3schools.com  www.php.net  Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 4 Giới thiệu môn học  Đánh giá kết quả  10%: điểm danh, bài tập kiểm tra trên lớp  20%: thi thực hành giữa kỳ  70%: thi thực hành cuối kỳ  Điểm khuyến khích:  SV đăng ký nhóm (2-4 người) báo cáo các chuyên đề nhỏ liên quan đến nội dung môn học Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 5 Giới thiệu môn học  Liên hệ:  Nguyễn Hồ Minh Đức: duc.tdt@gmail.com, P209, khoa CNTT&TUD, ĐH Tôn Đức Thắng Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 6 CHƯƠNG I GIỚI THIỆU VỀ WEB CÁC KHÁI NIỆM CƠ BẢN  Internet :  một hệ thống thông tin toàn cầu có thể được truy nhậ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)  Intranet : là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức TCP/IP.  Mô hình Client-Server: mô hình khách-chủ. Server chứa tài nguyên dùng chung cho nhiều máy Client 8Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức CÁC KHÁI NIỆM CƠ BẢN  Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.  Internet Protocol: tiêu chuẩn chi phối việc chuyển tải thông tin giữa các máy tính trong mạng 9Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 10Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức CÁC KHÁI NIỆM CƠ BẢN  Web Browser: trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server. – Internet Explorer, FireFox, Opera, Safari, Chrome,  Home page: là trang web đầu tiên trong web site  Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên mạng  Publish: Xuất bản trang web 11Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức CÁC KHÁI NIỆM CƠ BẢN  Web server là một chương trình đáp ứng yêu cầu truy xuất tài nguyên  Webserver là dạng phần mềm cài trên máy server để phục vụ quản lý các website .  Ví dụ : apache, iis,  World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet (wikipedia) 12Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức CÁC KHÁI NIỆM CƠ BẢN  URL, viết tắt của Uniform Resource Locator, được dùng để tham chiếu tới tài nguyên trên Internet  URL mang lại khả năng siêu liên kết cho các trang mạng  Một URL gồm có nhiều phần được liệt kê dưới đây:  URL scheme thường là Tên giao thức (ví dụ: http, ftp) nhưng cũng có thể là một cái tên khác (ví du: news, mailto)  Tên miền (ví dụ:  Chỉ định thêm cổng (có thể không cần)  Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (ví dụ: thumuc/trang)  Các truy vấn (có thể không cần)  Chỉ định mục con (có thể không cần) 13Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức GIỚI THIỆU KHÁI QUÁT VỀ WEB  Web Page: là một file văn bản chứa những tag HTML hoặc những đọan mã đặc biệt mà trình duyệt web có thể hiểu và thông dịch được, file được lưu với phần mở rộng là .html hoặc htm.  Website: Một tập hợp nhiều web page, thể hiện thông tin của một tổ chức hoặc một chủ đề nào đó 14Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức GIỚI THIỆU KHÁI QUÁT VỀ WEB  HTML (HyperText markup Language) gồm các đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình duyệt Web  Hypertext (Hypertext link) là một từ hay một cụm từ đặc biệt dùng để tạo liên kết giữa các trang web  Markup: là cách định dạng văn bản để trình duyệt hiểu và thông dịch được.  Language: tập những quy luật để định dạng văn bản trên trang web.  Trình soạn thảo trang web:Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage hoặc Dreamweaver, 15Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức TAG HTML  Cú pháp: Object  TagName : tên tag HTML, liền với dấu “< “, không có khoảng trắng  Object :đối tượng hiển thị trên trang Web  ListPropeties: danh sách thuộc tính của Tag 16Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức TAG HTML Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 17 TAG HTML  Nếu có nhiều thuộc tính thì các thuộc tính cách nhau khoảng trắng <TagName property1=’value1’property2=’value2’ > Object Ví dụ: nội dung 18Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức CẤU TRÚC CƠ BẢN CỦA TRANG WEB Nội dung thông tin của trang web Nội dung hiển thị trên trình duyệt 19Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức CÁC TAG HTML CƠ BẢN 1. : Hiển thị nội dung tiêu đề của trang web trên thanh tiêu đề của trình duyệt Cú pháp: Nội dung tiêu đề 2. : Tạo header, gồm 6 cấp header, được đặt trong phần BODY Cú pháp Nội dung của Header 20Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 3. : Dùng để ngắt đoạn và bắt đầu đoạn mới Cú pháp: Nội dung của đoạn 4. : Ngắt dòng tại vị trí của tag. 5. : Kẻ đường ngang trang Cú pháp: <HR Align=”directtion” Width= “Value” Size=value color=#rrggbb> 21Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 6. : định dạng font chữ – Định dạng Font chữ cho cả tài liệu thì đặt tag trong phần – Định dạng từng phần hoặc từng từ thì đặt tại vị trí muốn định dạng Cú pháp: <FONT Face=“fontName1, fontName2, fontName3” size=“value” Color=”rrggbb”> Nội dung hiển thị 22Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 7. : Chứa nội dung của trang web  Cú pháp: Nội dung chính của trang web  Các thuộc tính của – BgColor: thiết lập màu nền của trang – Text: thiết lập màu chữ – Link: màu của siêu liên kết – Vlink: màu của siêu liên kết đã xem qua – Background: load một hình làm nền cho trang – LeftMargin: Canh lề trái – TopMargin: Canh lề trên của trang 23Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Ví dụ: LearningHTML Welcome to HTML 24Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 8. : Chèn một hình ảnh vào trang Web Cú pháp: <Img src=”URL of Image” alt=”Text” width=value height=value border=value> 9. : Chèn một âm thanh vào trangWeb. Âm thanh này sẽ được phát mỗi khi người sử dụng mở trang Web. Cú pháp: 10. : Cho phép đưa âm thanh trực tiếp vào trang WEB. 25Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Cú pháp: <EMBED SRC="URL" width=value height=value > Ví dụ: <embed src=“nhac.wmv" width="80%" height="50%" autostart="true" loop="true" hidden="false"> 26Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 10. : Điều khiển đối tượng chạy một cách tự động trên trang Web Cú pháp: Object 11. : không hiển thị trong trang Cú pháp: 12. : định dạng chữ đậm Cú pháp Nội dung chữ đậm 27Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 13. Tag : Định dạng chữ nghiêng Cú pháp: Nội dung chữ nghiêng 14. Tag : Gạch chân văn bản Cú pháp: Nội dung chữ gạch chân 15. Tag và : Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanh Cú pháp Nội dung chữ to Nội dung chữ nhỏ 28Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 16. Tag và :Đưa chữ lên cao hoặc xuống thấp so với văn bản bình thường Cú pháp: Nội dung chữ dưa lên cao Nội dung chữ đưa xuống thấp 17. : Gạch ngang văn bản Cú pháp: Nội dung văn bản bị gạch ngang 29Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 18. : Dùng để nhập một dòng mã có định dạng ký tự riêng. Dòng mã này không được thực hiện mà được hiển thị dưới dạng văn bản bình thường  Cú pháp: Nội dung văn bản muốn định dạng  Ví dụ: If A < B Then A = A + 1 30Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 19. : Văn bản được nhấn mạnh (giống tag ) Cú pháp: Văn bản được nhấn mạnh 20. : Định dạng chữ đậm (giống ) Cú pháp: Văn bản được nhấn mạnh 21. : Dùng phân cách một khối văn bản để nhấn mạnh, đoạn văn bản này được tách thành một paragraph riêng, thêm khoảng trắng trên và dưới đoạn đồng thời thụt vào so với lề trái (tương đương chức năng của phím tab) 31Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Cú pháp: Nội dung khối văn bản nhấn mạnh 22. : Giữ nguyên các định dạng như: ngắt dòng, khoảng cách, thích hợp với việc tạo bảng Cú pháp: Nội dung văn bản cần định dạng trứơc với tất cả định dạng khoảng cách, xuống dòng và ngắt hàng 32Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Ví dụ: Learning HTML Trường Đại Học Tôn Đức Thắng TP.HCM Khoa Công Nghệ Thông Tin – Toán ứng dụng 33Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 23. : Chia văn bản thành các khối, có chung một định dạng – chia văn bản thành một khối bắt đầu từ một dòng mới. – tách khối nhưng không bắt đầu từ một dòng mới Cú pháp: Nội dung của khối bắt đầu từ một dòng mới 34Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Ví dụ: Learning HTML Trường Đại Học Tôn Đức Thắng Khoa Công Nghệ Thông Tin – Toán ứng dụng 35Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức Nội dung của khối trong 1 dòng Ví dụ: Learning HTML Creating Web Pages With HTML 36Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức 24. Các ký tự đặc biệt: a) Lớn hơn (>): > Ví dụ: If A > B Then A = A + 1 b) Nhỏ hơn (<): < Ví dụ: If A < B Then A = A + 1 37Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức c) Cặp nháy””: " Ví dụ: " To be or not to be? " That is the question d) Ký tự và &: & Ví dụ: William & Graham went to the fair e) Ký tự khoảng trắng:   38Phát triển Ứng dụng Web - Nguyễn Hồ Minh Đức