Web1012 slide 7
0 likes373 views
Tài liệu trình bày về cách làm việc với thành phần form và Spry trong Adobe Dreamweaver CS4, bao gồm các loại form, phương pháp submit dữ liệu, và các thành phần giao diện trong form. Nó cũng giới thiệu khái niệm về web động và Spry như một framework hỗ trợ xây dựng ứng dụng web linh hoạt. Cuối cùng, tài liệu tóm tắt các khái niệm liên quan đến web và xác thực dữ liệu nhập vào trong form.
Web1012 slide 7
- 1. BÀI 7 LÀM VIỆC VỚI THÀNH PHẦN FORM, SPY TRONG ADOBE DREAMWEAVER CS4
- 2. NHẮC LẠI BÀI TRƯỚC Sử dụng thư viện và các mẫu có sẵn: Thiết kế dựa trên module Các thành phần module trong Dreamweaver: • Snippets • Thành phần thư viện • Mẫu (template) Soạn thảo HTML trong môi trường Code Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 2
- 3. MỤC TIÊU BÀI HỌC Làm việc với web form: Giao diện và chức năng của form Phương pháp submit thông tin của form lên server Xác nhận các thông tin đầu vào của form Khởi tạo và sửa đổi form trên Dreamweaver CS4 Lưu ý khi làm việc với form Hiểu về các khái niệm liên quan tới web: Web động phía client XML, AJAX, RIA Spry và cách làm việc với spry trong Dreamweaver CS4 Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 3
- 4. WEB FORM
- 5. WEB FORM Form (hay còn gọi là biểu mẫu, phiếu điền thông tin, …) là loại giấy tờ cho phép người dùng điền thông tin theo các yêu cầu có sẵn Form được dùng hàng ngày và ở mọi nơi trong các cơ quan hành chính, trong các cửa hàng, công ty, … Web form là các form được đưa lên trang web, có chức năng tương tự như form thông thường. Ví dụ: Form đăng nhập Form cài đặt Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 5
- 6. WEB FORM Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 6
- 7. WEB FORM Một số thành phần giao diện trên form: Textbox/Text field: ô cho phép nhập các ký tự • Các loại: 1 dòng, nhiều dòng, password • Ví dụ: ô nhập tên tuổi, nhập password, nhập ý kiến đánh giá Checkbox: các ô cho phép người dùng click để chọn một hoặc nhiều lựa chọn từ một danh sách cho trước Textbox Checkbox Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 7
- 8. WEB FORM Radio button: giống checkbox nhưng người dùng chỉ được chọn một List: một danh sách (có hoặc không có thanh kéo) các đối tượng cho phép người dùng lựa chọn để thực hiện công việc gì đó Button: khi người cùng click, sẽ thực hiện một hành động gì đó Ngoài ra còn nhiều thành phần khác … Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 8
- 9. WEB FORM 3 loại nút chuẩn trên form tương ứng với các giá trị của thuộc tính type của thẻ Submit: khi người dùng nhất nút thuộc loại này, thông tin sẽ được gửi lên server button Reset: khi người dùng nhấn nút thuộc loại reset, tất cả các thông tin trên form sẽ được đưa về chế độ mặc định ban đầu êể người dùng nhập lại Push: đây là loại nút dùng để xử lý các hành động thông thường phía client như : thêm/xóa các mục vào/khỏi danh sách, … Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 9
- 10. WEB FORM Cơ chế xử lý của web form mrbean9x Username + Pass Server ********* Đăng nhập thành công, chuyển sang trang hộp thư Thông tin được nhập ở form sẽ được bắt đầu xử lý khi người dùng nhất nút submit nào đó để yêu cầu trình duyệt xử lý Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 10
- 11. WEB FORM Phương pháp submit thông tin của web form: submit GET: thông tin được gửi đi sẽ được ghép sẵn vào URL Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 POST: thông tin được gửi đi sẽ nằm ẩn trong phần header của yêu cầu gửi đến server 11
- 12. WEB FORM Form Validator: Là hành động xác nhận/kiểm tra tính hợp lệ của dữ liệu nhập vào Khi dữ liệu không hợp lệ, phải có thông báo lỗi Có thể thực hiện được ở: • Client • Server Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 12
- 13. WEB FORM Dreamweaver hỗ trợ việc thêm các xử lý này thông qua Behavior panel ( Window > Behaviors): • Người dùng không cần phải biết code javascript • Chỉ cần lựa chọn các behavior tương ứng khi có thay đổi từ phía người dùng • Có thể thay đổi thứ tự ưu tiên của các behavior Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 13
- 14. WEB FORM Lưu ý khi làm việc với web form: Bố trí form phải mang lại tính tiện lợi cho người dùng: • Ví dụ: Cho phép sử dụng phím tab để chuyển đổi giữa các thành phần trong form, … Form không nên quá dài Thông báo lỗi phải rõ ràng Không bắt người dùng nhập lại một nội dung nhiều lần Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 14
- 15. CÁC KHÁI NIỆM LIÊN QUAN TỚI WEB
- 16. CÁC KHÁI NIỆM LIÊN QUAN TỚI WEB Web tĩnh: Trong các trang web cổ điển, tất cả những thay đổi trên trang web đều được thực hiện dưới sự điều hành của server -> Chậm -> Khả năng tương tác với người dùng kém Web động phía client: Khái niệm web động ra đời nhằm khắc phục những nhược điểm của web tĩnh, làm cho trang web linh động hơn Các công nghệ hỗ trợ web động: Java script, DHTML, AJAX, Flash, … Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 16
- 17. CÁC KHÁI NIỆM LIÊN QUAN TỚI WEB AJAX (Asynchronous JavaScript and XML): là một thuật ngữ mô tả sự kết hợp của các công nghệ Javascript, XML, DHTML RIA (Rich Internet Application): là khái niệm dùng để chỉ các ứng dụng web hoạt động như các ứng dụng chạy trên máy AJAX là một trong những công cụ chính để xây dựng RIA Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 17
- 18. SPRY
- 19. SPRY Spry là Ajax framework được phát triển bởi Adobe, cho phép người phát triển thêm vào các ứng dụng của mình những thành phần giao diện, thành phần dữ liệu của web động một cách đơn giản, linh hoạt Spry được tạo ra như một thư viện Javascript Spry chạy độc lập, không phụ thuộc vào một plugin nào hoặc module nào phía server Spry được tích hợp trong Dreamweaver từ bản CS3 Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 19
- 20. SPRY Thanh menu Spry: Giúp tạo menu đa cấp theo cả chiều ngang và chiều dọc. Dễ dàng thêm vào trang web để trở thành bộ điều hướng chính Menu Spry này được thiết kế từ cấu trúc HTML cổ điển và đơn giản Thanh menu Spry có thể được chèn vào trang web từ bảng Insert. Tùy biến bằng bảng Properties và bảng CSS Styles Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 20
- 21. SPRY Khởi tạo và tùy biến spry menu: Tùy chỉnh nội dung của spry menu Khởi tạo spry menu thông qua bảng INSERT Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 21
- 22. SPRY Tùy biến Spry bằng CSS File .css của spry sẽ hiển thị trên bảng CSS STYLES. Tại đây có thể lựa chọn từng thuộc tính để thay đổi giá trị Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 22
- 23. SPRY Widgets SPRY Data Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 Effects 23
- 24. SPRY Spry widgets: Là tập hợp các thành phần giao diện có tính tương tác cao, dễ dàng kéo thả vào các ứng dụng và dễ dàng thay đổi Trên Dreamweaver, người dùng dễ dàng có thể tùy chỉnh các widges với CSS Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 24
- 25. SPRY Spry Effects: Là tập hợp các hiệu hứng hình ảnh cho các thành phần trên trang web Spry Data: Spry cung cấp các widget để hiển thị dữ liệu như: • Spry XML data sets • HTML data set • JSON data sets Các dữ liệu được sử dụng ở đây phải được lưu dưới dạng xml, html list hoặc json Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 25
- 26. TỔNG KẾT Web form là các form trên web cho phép người dùng điền thông tin theo các mẫu có sẵn Thông tin nhập ở form sẽ được bắt đầu xử lý khi người dùng nhất nút submit 2 phương pháp submit form là GET và POST Form validation là hành động xác nhận/kiểm tra tính hợp lệ của dữ liệu nhập vào form Web động phía client là khái niệm dùng để chỉ thế hệ web sử dụng các công nghệ hỗ trợ như DHML, Javascript, Ajax, … để đem lại tính linh động, tính tương tác cao hơn Spry là framework hỗ trợ web động phía client Slide 7 - Làm việc với thành phần Form, Spry trong Dreamweaver CS4 26