Bài giảng Lập trình web - Chương 3: Form và các đối tượng thể hiện - Lê Nhựt Trường

Nội dung text: Bài giảng Lập trình web - Chương 3: Form và các đối tượng thể hiện - Lê Nhựt Trường

1. BỘ GIÁO DỤC & ĐÀO TẠO TRƯỜNG ĐẠI HỌC CỬU LONG KHOA CÔNG NGHỆ THÔNG TIN Chương 3: Form Và Các Đối Tượng Thể Hiện Lê Nhựt Trường Email: lntruongcntt@gmail.com
2. Nội dung: ◼ Form ◼ Các đối tượng thể hiện của Form ◼ Cách đọc giá trị từ Form trong PHP ◼ Bài tập Lê Nhựt Trường Bài Giảng Lập Trình Web 2
3. Form – Đặc điểm của form Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể là ô văn bản, ô danh sách, nút bấm, hay các ô check Lê Nhựt Trường Bài Giảng Lập Trình Web 3
4. Ví dụ: Text Radio Form SelectCheckbox Textarea Button Lê Nhựt Trường Bài Giảng Lập Trình Web 4
5. Form - thuộc tính cơ bản của Form ◼ Phương thức Method Là 1 thuộc tính của Form, có hai giá trị Get và Post để xác định kiểu dữ liệu gửi lên. ▪ Kiểu GET chính là kiểu mà khi nhập dữ liệu lên máy chủ, các dữ liệu này sẽ được hiển thị trên ô Address dưới dạng các căp tên=giá_tri. ▪ Kiểu POST chính là kiểu thường dùng để truyền các dữ liệu nhạy cảm mà người sử dụng không muốn hiển thị trên ô Address (password chẳng hạn). Lê Nhựt Trường Bài Giảng Lập Trình Web 5
6. Form - thuộc tính cơ bản của Form ◼ Hành động (Action) Sẽ chỉ định form gửi dữ liệu đến trang nào. Trong trường hợp thuộc tính này không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành (sau đó trình duyệt sẽ tải lại nội dung). Lê Nhựt Trường Bài Giảng Lập Trình Web 6
7. Ví dụ: GET “Info.php” : Thanh Address của trang “Xuly.php” : Lê Nhựt Trường Bài Giảng Lập Trình Web 7
8. Ví dụ: POST “Info.php” : Thanh Address của trang “Xuly.php” : Lê Nhựt Trường Bài Giảng Lập Trình Web 8
9. Ví dụ: Action “Info.php” : Thanh Address của trang “Xuly.php” : Lê Nhựt Trường Bài Giảng Lập Trình Web 9
10. Các đối tượng trong Form ◼ Các thẻ dùng để nhập liệu. ◼ Thẻ tạo hộp chọn đối tượng dạng danh sách. ◼ Các thẻ lựa chọn, chọn đối tượng. ◼ Các nút bấm Lê Nhựt Trường Bài Giảng Lập Trình Web 10
11. Các thẻ dùng để nhập liệu - Text: Text Tên bạn : Địa chỉ E-Mail : Lê Nhựt Trường Bài Giảng Lập Trình Web 11
12. Các thẻ dùng để nhập liệu - TextArea: TextArea Lời nhắn nhủ : Lê Nhựt Trường Bài Giảng Lập Trình Web 12
13. Thẻ tạo hộp chọn đối tượng dạng danh sách - Select: Select Bạn đến từ : Vietnam Laos Lê Nhựt Trường Bài Giảng Lập Trình Web 13
14. Các thẻ lựa chọn, chọn đối tượng - Radio, Checkbox: Radio Checkbox Giới tính : nữ nam Bạn thích : xem TV đọc sách Lê Nhựt Trường Bài Giảng Lập Trình Web 14
15. Các nút bấm - Submit, Reset: Submit Reset Lê Nhựt Trường Bài Giảng Lập Trình Web 15
16. Cách đọc giá trị từ Form ◼ Dữ liệu của người dùng từ trình duyệt sẽ được gửi lên máy chủ dưới dạng từng cặp biến=giá_trị và có thể đi theo các con đường khác nhau. ◼ Tuỳ theo từng con đường cụ thể, trên máy chủ ta cũng có các cách khác nhau để lấy dữ liệu được gửi lên Các con đường đó là: GET, POST Lê Nhựt Trường Bài Giảng Lập Trình Web 16
17. Đọc kiểu $Get : Dữ liệu gửi từ trình duyệt lên qua phương thức GET là phần dữ liệu được nhập trực tiếp theo sau địa chỉ URL do trình duyệt gửi lên, được phân biệt với tên file script bằng dấu hỏi chấm (?). Ví dụ, khi ta gõ vào trình duyệt địa chỉ sau: Khi đó, trình duyệt sẽ gửi theo địa chỉ trên một cặp biến = giá trị, trong đó biến có tên là TOPIC_ID và giá trị là 161 (TOPIC_ID=161). Lê Nhựt Trường Bài Giảng Lập Trình Web 17
18. Đọc kiểu $Get : Ta cũng có thể đưa lên nhiều cặp biến=giá_trị bằng cách phân cách chúng bởi dấu &. Ví dụ, khi ta gõ vào trình duyệt địa chỉ sau: ORUM_ID=20 Lúc này, ta đã gửi lên 3 cặp biến=giá_trị theo phương thức GET, đó là: method=Reply, TOPIC_ID=161 và FORUM_ID=20. Lê Nhựt Trường Bài Giảng Lập Trình Web 18
19. Đọc kiểu $Get : Khi trình duyệt gửi các thông tin này lên máy chủ, PHP sẽ tự động sinh ra một mảng có tên là $_GET[] để nắm giữ tất cả các cặp biến và giá trị đó. Ví dụ, với URL sau: _ID=161&FORUM_ID=20 Thì PHP sẽ tự động sinh ra một mảng $_GET có nội dung sau: $_GET["method"] = "Reply" // tương ứng với cặp method=Reply $_GET["TOPIC_ID"] = 161 // tương ứng với cặp TOPIC_ID=161 $_GET["FORUM_ID"] = 20 // tương ứng với cặp FORUM_ID=20 Lê Nhựt Trường Bài Giảng Lập Trình Web 19
20. Ví dụ tại trang xử lý: Lê Nhựt Trường Bài Giảng Lập Trình Web 20
21. Đọc kiểu $Post : Để lấy các biến theo kiểu POST, PHP sẽ tự động sinh ra mảng có tên là $_POST[]. Mảng này có chỉ số chính là tên của các phần tử trong form (các thẻ input, select có thuộc tính name) và giá trị là nội dung giá trị do người sử dụng nhập vào các phần tử có tên tương ứng. Lê Nhựt Trường Bài Giảng Lập Trình Web 21
22. Ví dụ: Lê Nhựt Trường Bài Giảng Lập Trình Web 22
23. Bài tập: ◼ Tạo 1 trang web với hộp thoại nhập liệu username và password. ◼ Nếu người sử dụng nhập thông tin username/password là admin/12345 thì xuất ra thông báo "welcome, admin" với kiểu chữ Tahoma, màu đỏ. ◼ Nếu nhập sai thì xuất thông báo "Username hoặc password sai. Vui lòng nhập lại". Lê Nhựt Trường Bài Giảng Lập Trình Web 23
24. Giải: Tạo trang login.html với nội dung sau: Lê Nhựt Trường Bài Giảng Lập Trình Web 24
25. Giải: Tiếp tục tạo trang checklogin.php với nội dung sau: Lê Nhựt Trường Bài Giảng Lập Trình Web 25