Thiết kế web và các công cụ đồ họa (tinv205dv02) - Chương 5: Làm việc với form

TRƯỜNG ĐẠI HỌC HOA SEN KHOA KHOA HỌC & CÔNG NGHỆ BỘ MÔN HỆ THỐNG THÔNG TIN LÀM VIỆC VỚI FORM Giảng viên điều phối: PHẠM THỊ THANH TÂM Email: [email protected] Chương 5: THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỒ HỌA (TINV205DV02) NỘI DUNG I. GIỚI THIỆU II. CÁC THAO TÁC TRÊN FORM III.LƯU LẠI DỮ LIỆU TRÊN FORM 2 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU  Form (Biểu mẫu): thường được dùng như là công cụ hỗ trợ nhập liệu trên các ứng dụng Web (tượng tự như các hộp thoại (dialog) trong các ứng dụng trên Windows)  Ví dụ: 3 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt)  Hoạt động của Form thông thường là: – Ứng dụng hiển thị Form để yêu cầu nhận thông tin từ người dùng – Người dùng điền các thông tin và kết thúc việc nhập liệu bằng cách submit form – Sau đó dữ liệu sẽ được chuyển đến chương trình xử lý tương ứng  Người dùng nhập dữ liệu cho form thông qua các ô nhập liệu được gọi là các control 4 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt)  Một số loại control thông dụng – Text box (Hộp văn bản): dùng để nhập dữ liệu trên một dòng – Text Area (Vùng văn bản): dùng để nhập dữ liệu trên nhiều dòng – Radio button: hiển thị danh sách các mục được nhóm theo tên và chỉ chọn được một mục – Checkbox: dùng để chọn một hoặc nhiều trong tập các lựa chọn được liệt kê – Group Box: dùng để nhóm các đối tượng vào trong một nhóm 5 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt) – Drop-Down Box: danh sách cuộn hiển thị một danh sách các mục, có thể chọn một hay nhiều mục – Button: nút nhấn  Normal button: nút nhấn bình thường  Submit button: kết thúc việc nhập dữ liệu trên form  Reset button: xóa các giá trị hiện tại đang hiển thị trên form – File Upload/Image Upload: dùng để chọn đường dẫn và upload file dữ liệu/hình ảnh lên server 6 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt)  Lưu ý: để làm việc với Form, vào menu Task Panes > Toolbox, sau đó mở rộng phần Form Controls 7 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM 1. Chèn Form vào trang web – Trong chế độ Design View, đặt con trỏ tại vị trí muốn chèn Form – Double-click vào nút Form trong phần Form Controls Thay đổi kích thước của Form 8 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 2. Thêm một control vào Form – Đặt con trỏ trong form tại vị trí muốn thêm control. – Trong phần Form Controls, double-click vào các loại control có sẵn trong danh sách. 9 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) Textbox Text Area Checkbox Radio button Submit button Reset button Normal button Drop-Down Box File Upload Textbox (Password) Group Box Image Upload Advanced button 10 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 3. Thiết lập các thuộc tính (Properties) cho các control – Double-click lên control muốn thiết lập các thuộc tính – Hoặc: click phải > chọn Form Field Properties 11 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  Text/Password  Name: tên control  Initial Value: giá trị ban đầu  Width in characters: số ký tự tối đa  Password field: dữ liệu trên control là đoạn văn bản bình thường hay là password?  Tab order: thứ tự di chuyển 12 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 13 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) Text Area – Name: tên control – Initial Value: giá trị ban đầu – Width in charaters: số ký tự tối đa – Number of lines: số dòng tối đa – Tab order: thứ tự di chuyển 14 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 15 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  Radio Button – Group name: tên của nhóm danh sách (mỗi mục trong danh sách phải có Group name trùng nhau) – Value: giá trị đại diện cho mỗi mục trong danh sách – Initial State: trạng thái ban đầu, được chọn (Selected) hay không được chọn (Not selected) – Tab order: thứ tự di chuyển 16 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 17 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  Checkbox – Name: tên của Checkbox (mỗi mục trong danh sách phải có Name trùng nhau) – Value: giá trị đại diện cho mỗi mục trong danh sách – Initial Sate: trạng thái ban đầu, được đánh dấu (Checked) hay không được đánh dấu (Not checked) – Tab order: thứ tự di chuyển 18 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 19 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  Drop-Down Box – Name: tên control – Height: chiều cao của control (số mục hiển thị) – Allow multiples selections: cho phép chọn một hay nhiều mục trong danh sách – Tab order: thứ tự di chuyển 20 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 21 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) – Add : lần lượt thêm các mục vào trong danh sách – Modify: chỉnh sửa các mục trong danh sách – Remove: xóa một mục ra khỏi danh sách – Move Up/Move Down: thay đổi thứ tự các mục trong danh sách 22 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  Button – Name: tên control – Value/Label: nhãn của control – Tab order: thứ tự di chuyển – Button type: loại nút nhấn  Normal: nút nhấn bình thường  Submit: nút nhấn loại submit  Reset: nút nhấn loại reset 23 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  File Upload – Name: tên control – Width in characters: số ký tự tối đa của đường dẫn – Tab order: thứ tự di chuyển 24 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt)  Image Upload Chọn đường dẫn của hình ảnh Chú thích cho ảnh Chỉnh sửa hình ảnh (Chương 2) 25 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 26 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM  Để lưu lại dữ liệu trên Form, trong chế độ Design: – Double-click vào Form muốn lưu lại dữ liệu – Hoặc: click phải > chọn Form Properties 27 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt)  Lưu lại dữ liệu trên Form (không sử dụng FrontPage extension) Nhập vào URL (nơi lưu trữ các script) 28 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt)  Lưu lại dữ liệu trên Form (sử dụng FrontPage extension) Lưu lại dữ liệu vào một file trên server (Slide 30) Lưu lại dữ liệu vào trong database (Slide 32) Gửi dữ liệu đến địa chỉ e-mail (Slide 31) Lưu lại dữ liệu đến nơi khác (Slide 33, 34) 29 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) Chọn đường dẫn chứa file Chọn định dạng file Chọn lựa cho file thứ 2 (nếu cần) 30 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) 31 Nhập vào địa chỉ e-mail Định dạng email (dạng text) Tiêu đề của mail Địa chỉ e-mail phản hồi Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) 32 Tạo kết nối đến database Tạo một database mới Bảng lưu dữ liệu trong database Địa chỉ của trang báo lỗi (nếu lưu dữ liệu không thành công) Địa chỉ của trang xác nhận (nếu lưu dữ liệu thành công) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) 33 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form III. LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) 34 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form KẾT THÚC HỎI – ĐÁP 35 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form