›
›

Giáo trình Lập trình Web - Chương 5: PHP và MySQL - Trần Công Án

pdf 39 trang huongle 1680
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Lập trình Web - Chương 5: PHP và MySQL - Trần Công Án", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_lap_trinh_web_chuong_5_php_va_mysql_tran_cong_an.pdf

Nội dung text: Giáo trình Lập trình Web - Chương 5: PHP và MySQL - Trần Công Án

  1. CT428. Lập Trình Web Chương 5. PHP & MySQL (PHP Adv.) Giảng viên: Trần Công Án (tcan@cit.ctu.edu.vn) Bộ môn Mạng máy tính & Truyền thông Khoa Công Nghệ Thông Tin & Truyền Thông Đại học Cần Thơ 2013 – 2014
  2. PHP – Một Số Kỹ Thuật
  3. [CT428] Chương 5.2 – PHP Adv Nội Dung Upload tập tin Lưu hình ảnh vào CSDL Kỹ thuật phân trang AJAX – Asynchronous JavaScript and XML TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 3
  4. [CT428] Chương 5.2 – PHP Adv Upload tập tin Upload Tập Tin I Các bước để thực hiện upload tập tin: 1. Tạo form với điều khiển file upload và thiết đặt mã hóa thích hợp (browser). 2. Kiểm tra sự hợp lệ của tập tin – lỗi, định dạng, kích thước, . . . (server) 3. Xử lý lưu file upload lên server (server). TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 4
  5. [CT428] Chương 5.2 – PHP Adv Upload tập tin Thiết kế form Upload file Thiết Kế Form Upload File (Browser) I Thiết lập thuộc tính form: I Method: POST /Applications/XAMPP/xamppfiles/hI Enctype: multipart/form-data /LTW428/php-adv/upload-form.html Page 1 of 1 Saved: 3/22/14, 1:22:15 Printed For: Tran Cong An 1 2 3 4 5 6 7 8 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 5
  6. [CT428] Chương 5.2 – PHP Adv Upload tập tin Kiểm tra lỗi, định dạng, . . . Kiểm Tra Lỗi, Định Dạng, . . . (Server) I Một số thuộc tính liên quan đến tập tin được upload có thể truy cập từ PHP: I $_FILES["filename "]["name"]: tên của tập tin được upload. I $_FILES["filename "]["type"]: loại của tập tin. I $_FILES["filename "]["size"]: kích thước. I $_FILES["filename "]["tmp_name"]: tên tập tin được upload được lưu tạm trên server. I $_FILES["filename "]["error"]: mã trạng thái (lỗi) của tác vụ upload(0: không lỗi). TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 6
  7. [CT428] Chương 5.2 – PHP Adv Upload tập tin Kiểm tra lỗi, định dạng, . . . Kiểm Tra Lỗi, Định Dạng, . . . (Server) /Users/tcan/Dropbox/Bo mon/Lap t v/figures/upload-check-error.php Page 1 of 1 Saved: 3/20/14, 20:44:23 Printed For: Tran Cong An 1 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 7
  8. [CT428] Chương 5.2 – PHP Adv Upload tập tin Lưu file lên server Lưu File Lên Server (Server) I Khi upload form được submit, tập tin sẽ được lưu trong một thư mục tạm ($_FILES["filename"]["tmp_name"]). I Một số hàm liên quan đến việc lưu file: I move_uploaded_file(temp_file, persistent_file): di chuyển file từ vị trí tạm thời sang một vị trí cố định trên server. I file_exists(filename): kiểm tra sự tồn tại của file. I Chú ý: phải gán quyền ghi cho người dùng đối với thư mục lưu tập tin trên server. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 8
  9. [CT428] Chương 5.2 – PHP Adv Upload tập tin Lưu file lên server Lưu File Lên Server – Ví Dụ /Applications/XAMPP/xamppfiles/htdocs/LTW428/php-adv/upload.php Page 1 of 1 Saved: 3/20/14, 21:28:35 Printed For: Tran Cong An 1 "; 10 echo "Type: " . $_FILES['up-file']['type'] . " "; 11 echo "Size: " . $_FILES['up-file']['size'] . "b "; 12 echo ' '; 13 } 14 else 15 echo "Upload error: " . $_FILES['up-file']['error']; 16 ?> TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 9
  10. [CT428] Chương 5.2 – PHP Adv Upload tập tin Lưu file lên server Lưu File Lên Server – Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 10
  11. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Các bước để lưu ảnh vào CSDL Lưu Hình Ảnh Vào CSDL I Trường chứa hình ảnh trong table phải có kiểu blob. I Các bước để lưu vào CSDL: I Kiểm tra sự hợp lệ của tập tin được upload: type (dùng biến $_FILES), size (dùng hàm getimagesize()), . . . I Đọc nội dung của tập tin vào 1 biến (dùng hàm file_get_contents() và thêm ký tự ‘\’ vào trước các ký tự đặc biệt bằng hàm addslashes(). I Chèn mẩu tin mới vào table, có sử dụng biến chứa nội dung h/ảnh. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 11
  12. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Cấu trúc bảng và form Lưu Hình Ảnh Vào CSDL – Table & Form I Giả sử ta có cấu trúc của table dùng để lưu hình ảnh như sau: mysql> describe images; + + + + + + + | Field | Type | Null | Key | Default | Extra | + + + + + + + | iname | char(100) | NO | PRI | NULL | | /Applications/XAMPP/xamppfiles/h| image | longblob | NO hp-adv/upload-image-db-form.html | | NULL | | Page 1 of 1 Saved:+ + + + + + + 3/21/14, 11:27:32 Printed For: Tran Cong An 2 rows in set (0.48 sec) I1 Upload form: 2 mysql> 3 5 6 7 8 9 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 12
  13. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Nối kết đến hệ quản trị CSDL Lưu Hình Ảnh Vào CSDL –/Applications/XAMPP/xamppfiles/htdocs/LTW428/connection.inc Nối Kết Page 1 of 1 Saved: 3/18/14, 0:46:55 Printed For: Tran Cong An 1 2 require_once 'connection.inc'; 3 4 $conn = @mysql_connect($hostname, $username, $password) 5 or die("Unable connect to MySQL: " . mysql_error() ." "); 6 7 mysql_select_db($database, $conn) or 8 die("Unable to select DB: " . mysql_error() . " "); 9 ?> TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 13
  14. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Mã PHP để chèn hình ảnh vào CSDL /Applications/XAMPP/xamppfiles/h LTW428/php-adv/upload-img-db.php Page 1 of 1 Saved:Lưu 3/21/14, Hình 11:26:44 Ảnh Vào CSDL – PHPPrinted For: Tran Cong An 1 "; 15 } 16 else 17 echo "No image has been uploaded"; 18 ?> TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 14
  15. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Hiển thị hình ảnh được lưu trong CSDL Hiển Thị Hình Ảnh Được Lưu Trong CSDL I Đọc và hiển thị hình ảnh từ CSDL: I Gán giá trị cho thuộc tính src của thẻ là nội dung của ảnh. ⇒ Cần phải có 1 PHP script thực hiện việc đọc và trả về nội dung hình ảnh từ CSDL. Script này sẽ được chèn vào chỗ giá trị của thuộc tính src. (get_img.php là PHP script, id là khóa hay tên của hình ảnh, dùng để truy vấn hình ảnh từ CSDL) TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 15
  16. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Hiển thị hình ảnh được lưu trong CSDL /Applications/XAMPP/xamppfiles/htdocs/LTW428/php-adv/get_img.php Page 1 of 1 ĐọcSaved: 3/21/14, Và Trả 11:34:31 Về Dữ Liệu Hình ẢnhPrinted Từ For:CSDL Tran Cong An 1 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 16
  17. [CT428] Chương 5.2 – PHP Adv Lưu hình ảnh vào CSDL Hiển thị hình ảnh được lưu trong CSDL Đọc Và Trả Về Dữ Liệu Hình Ảnh Từ CSDL TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 17
  18. [CT428] Chương 5.2 – PHP Adv Kỹ thuật phân trang Các bước trong kỹ thuật phân trang Kỹ Thuật Phân Trang I Tổ chức phân trang hiển thị kết quả thường gồm các bước: 1. Tính tổng số mẩu tin cần hiển thị: $total_record. 2. Xác định số lượng mẫu tin tối đa được hiển thị trên trang: $reccord_per_page. 3. Lưu giữ trang hiện hành (dùng biến ẩn – hidden, hoặc truyền trực tiếp qua phương thức GET): $page 4. Truy vấn CSDL: dùng mệnh đề LIMIT start number_of_record để chỉ định số mẫu tin cần truy vấn. 5. Xác định liên kết đến Trang kế tiếp hoặc Trang trước đó. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 18
  19. [CT428] Chương 5.2 – PHP Adv Kỹ thuật phân trang Ví dụ – Tìm kiếm sách với phân trang Ví Dụ – Tìm Kiếm Sách Với Phân Trang TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 19
  20. [CT428] Chương 5.2 – PHP Adv Kỹ thuật phân trang Ví dụ – Tìm kiếm sách với phân trang Tổ chức I Trang chính: I Hiển thị form để nhập từ khóa + Nút tìm kiếm I Gọi hàm search() để tìm sách, hiển thị kết quả tìm kiếm, và lấy thông tin phân trang. I Gọi hàm page_nav_links() để tạo l/kết đến Trang trước, Trang kế. I Các hàm PHP phụ trợ: I compute_paging(search_cond ): tính các thông số phân trang. I search(search_kw ): tìm kiếm, hiển thị kết quả, và trả về các thông số phân trang (có sử dụng hàm compute_paging()). I page_nav_links(paging_info, search_kw ): tạo các liên kết đến Trang trước, Trang kế. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 20
  21. [CT428] Chương 5.2 – PHP Adv Kỹ thuật phân trang Ví dụ – Trang chính /Applications/XAMPP/xamppfiles/h /php-adv/title-search-paging.php Page 1 of 1 TìmSaved: Kiếm 3/21/14, Sách 22:23:18 – Trang Chính Printed For: Tran Cong An 1 2 3 "/> 6 7 8 Search result 9 "; //links to next/prior page 15 page_nav_links($paging, $_REQUEST['search_kw']); 16 } 17 ?> 18 19 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 21
  22. [CT428] Chương 5.2 – PHP Adv Kỹ thuật phân trang Ví dụ – Hàm compute_paging() /Applications/XAMPP/xamppfiles/h adv/title-search-paging-func.php Page 1 of 1 Saved:Tìm 3/21/14, Kiếm 23:32:29 Sách – Hàm compute_paging()Printed For: Tran Cong An 1 1)? $page - 1 : 0; 15 $p_pre = ($page $p_total, "p_no"=>$page, "p_start"=>$start, 18 "p_prev"=>$p_next, "p_next"=>$p_pre, "total"=>$row[0]); 19 } //compute_paging() 20 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 22 21 22 function search($keyword) { 23 global $record_ppage; 24 require "connect-select-db.php"; 25 $s_cond = str_replace(" ", "%' OR title LIKE '%", trim($keyword)); 26 27 $paging = compute_paging($s_cond); 28 $query = "SELECT * FROM classics WHERE title LIKE '%$s_cond%'" . 29 " LIMIT $paging[p_start], $record_ppage"; 30 $result = mysql_query($query, $conn) 31 or die ("DB accessed failed: " . mysql_error()); 32 33 while ($row = mysql_fetch_array($result)) 34 echo " $row[title] . $row[author] ($row[year])."; 35 36 if (mysql_num_rows($result) == 0) echo "No title found"; 37 return $paging; 38 } //search() 39 40 ?>
  23. /Applications/XAMPP/xamppfiles/h adv/title-search-paging-func.php Page 1 of 1 Saved: 3/21/14, 23:32:29 Printed For: Tran Cong An 1 1)? $page - 1 : 0; 15 $p_pre = ($page $p_total, "p_no"=>$page, "p_start"=>$start, Ví dụ – Hàm search() 18 "p_prev"=>$p_next, "p_next"=>$p_pre, "total"=>$row[0]); 19 } //compute_paging() search() Tìm20 Kiếm Sách – Hàm 21 22 function search($keyword) { 23 global $record_ppage; 24 25 require "connect-select-db.php"; 26 $s_cond = str_replace(" ", "%' OR title LIKE '%", trim($keyword)); 27 28 $paging = compute_paging($s_cond); 29 $query = "SELECT * FROM classics WHERE title LIKE '%$s_cond%'" . 30 " LIMIT $paging[p_start], $record_ppage"; 31 $result = mysql_query($query, $conn) 32 or die ("DB accessed failed: " . mysql_error()); 33 34 while ($row = mysql_fetch_array($result)) 35 echo " $row[title] . $row[author] ($row[year])."; 36 37 if (mysql_num_rows($result) == 0) echo "No title found"; 38 return $paging; 39 } //search() 40 TS. Trần41 ?> Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 23
  24. /Applications/XAMPP/xamppfiles/h adv/title-search-paging-func.php Page 1 of 1 Saved: 3/21/14, 22:23:12 Printed For: Tran Cong An 1 1)? $page - 1 : 0; [CT428] Chương 5.2 – PHP Adv 16Kỹ thuật $p_pre phân trang = ($page $p_total, "p_no"=>$page, "p_start"=>$start, Tìm19 Kiếm"p_prev" Sách=>$p_next – Hàm, "p_next"page_nav_links()=>$p_pre, "total"=>$row[0]); 20 } //compute_paging() 21 22 //generate page-navigation links 23 function page_nav_links($paging, $search_kw) { 24 echo "Page $paging[p_no]/$paging[p_total]:   "; 25 26 if ($paging['p_prev'] > 0) { //previous 27 echo "    "; 30 } 31 32 if ($paging['p_next'] > 0) { //next 33 echo " "; 36 } 37 } //page_nav_generation() 38 ?> TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 24
  25. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML AJAX – Asynchronous JavaScript And XML I Là một kỹ thuật giao tiếp bất đồng bộ giữa web client và web browser dựa trên JavaScript. I Đặc điểm: I Giao tiếp với web server ở chế độ background. I Cho phép cập nhật một phần trang web. I Người dùng không phải chờ đợi khi web browser và web server thực hiện giao tiếp. I Tránh được cách tiếp cận "click-wait-refresh" thông thường. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 25
  26. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Giao tiếp web đồng bộ – Synchronous web communication Giao tiếp web đồng bộ I Người sử dụng phải chờ khi trang web đang load. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 26
  27. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Giao tiếp web bất đồng bộ – Asynchronous web communication Giao tiếp web bất đồng bộ I Người sử dụng có thể tiếp tục tương tác với trang web khi trang web đang load dữ liệu, hỗ trợ bởi AJAX. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 27
  28. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Mô hình giao tiếp bất đồng bộ với AJAX Mô Hình Giao Tiếp Bất Đồng Bộ Vói AJAX TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 28
  29. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Mô hình giao tiếp bất đồng bộ với AJAX Mô Hình Giao Tiếp Bất Đồng Bộ Với AJAX 1. Một sự kiện phát sinh nhu cầu cập nhật dữ liệu (hoặc giao diện), nhu cầu này sẽ được xử lý bởi một đoạn mã xử lý sự kiện. 2. Đoạn mã xử lý sự kiện sẽ tạo 1 đối tượng XMLHttpRequest. 3. XMLHttpRequest yêu cầu 1 trang web (PHP) từ server; đồng thời chỉ định 1 hàm callback để xử lý kết quả trả về sau này. 4. Trang web đáp ứng yêu cầu sử dụng dữ liệu nhận được từ client (thông qua đối tượng XMLHttpRequest) và trả về kết quả. 5. Đối tượng XMLHttpRequest phát sinh một sự kiện để kích hoạt hàm callback. 6. Hàm callback nhận kết quả trả về và thực hiện thay đổi trang web nếu có (thường sử dụng mô hình DOM). TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 29
  30. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Đối tượng XMLHttpRequest Đối Tượng XMLHttpRequest I Dùng để gửi yêu cầu cho server, chỉ định hàm callback và nhận kết quả trả về. Hầu hết các trình duyệt đề hỗ trợ đối tượng XMLHttpRequest, I /Applications/XAMPP/xamppfiles/h cs/LTW428/php-adv/code-print.php Page 1 of 1 riêngSaved: IE54/2/14, và IE6 0:52:40 dùng ActiveXObject. Printed For: Tran Cong An 2 3 function createXHR() { 4 if (window.XMLHttpRequest) { 5 //AJAX for IE7+, FF, Chrome, Opera, Safari 6 return new XMLHttpRequest(); 7 } 8 else { //AJAX for IE6, IE5 9 return new ActiveXObject("Microsoft.XMLHTTP"); 10 } 11 } 12 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 30
  31. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ Đơn Giản Ví Dụ Đơn Giản /Applications/XAMPP/xamppfiles/h s/LTW428/php-adv/simple-ajax.php Page 1 of 1 Saved: 4/2/14, 1:19:36 Printed For: Tran Cong An 1 2 3 4 5 6 7 8 9 11 12 13 14 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 31
  32. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ Đơn Giản /Applications/XAMPP/xamppfiles/h cs/LTW428/php-adv/simple-ajax.js Page 1 of 1 Saved:Ví Dụ4/2/14, Đơn 1:23:26 Giản Printed For: Tran Cong An 1 /* simple-ajax.js */ 2 function fireAJAX(name) { 3 var xmlhttp = createXHR(); 4 xmlhttp.onreadystatechange = function() { 5 if (xmlhttp.readyState==4 && xmlhttp.status==200) { 6 document.getElementById("msg").innerHTML = xmlhttp.responseText; 7 } 8 } /Applications/XAMPP/xamppfiles/h cs/LTW428/php-adv/hello-name.php Page 1 of 1 Saved: 4/2/14, 1:20:46 Printed For: Tran Cong An 9 xmlhttp.open("GET", "hello-name.php?name=" + name, true); 10 xmlhttp.send(); 1 ", $_GET['name'], " "; 13 function createXHR() { 4 } 14 if (window.XMLHttpRequest) 5 ?> 15 return new XMLHttpRequest(); 16 else 17 return new ActiveXObject("Microsoft.XMLHTTP"); 18 } TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 32
  33. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ 2 – Tạo Dropdown List phụ thuộc nhau Dropdown List Phụ Thuộc Nhau – Mô Tả + + + | matinh | tentinh | + + + | 1 | Cần Thơ | | 2 | Sóc Trăng | | 3 | Bạc Liêu | + + + + + + +3 rows in set (0.05 sec) | mahuyen | tenhuyen | matinh | + + + +mysql> select * from huyen; | + + + + 1 | Cờ Đỏ | 1 | | | mahuyen2 | Ô Môn | tenhuyen | | 1matinh | | | + + + + 3 | Châu Thành | 1 | | | 4 | Long 1 | PhúCờ Đ ỏ | | 2 | 1 | | | 5 | Th 2ạ nh| ÔTr Mônị | | 2 | 1 | | | 6 | Ngã 3 |N ăChâum Thành | | 2 | 1 | | | 7 | Tr 4ầ n| ĐLongề Phú | | 2 | 2 | | | 8 | V ĩ5nh | ChâuThạnh Tr ị| | 3 | 2 | | | 9 | Giá 6 |Rai Ngã N ă m | | 3 | 2 | + + + +| 7 | Trần Đề | 2 | 9 rows| in set 8(0.00 | Vĩ nhsec) Châu | 3 | | 9 | Giá Rai | 3 | mysql>+ + + + 9 rows in set (0.00 sec) TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 33 mysql>
  34. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ 2 – Tạo Dropdown List phụ thuộc nhau /Applications/XAMPP/xamppfiles/h LTW428/php-adv/dropdown-ajax.php Page 1 of 1 Saved:Dropdown 4/2/14, 3:22:57 List Phụ Thuộc NhauPrinted For: Tran Cong An 1 2 3 4 5 6 7 8 9 10 11 12 Chọn tỉnh 13 14 Chọn huyện 15 16 17 18 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 34
  35. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ 2 – Tạo Dropdown List phụ thuộc nhau Dropdown List Phụ Thuộc Nhau /Applications/XAMPP/xamppfiles/h p-adv/dropdown-php-functions.php Page 1 of 1 Saved: 4/2/14, 3:35:40 Printed For: Tran Cong An 1 "; 11 while ($row = mysql_fetch_array($result)) { 12 echo " ", $row['tentinh'], " "; 13 } 14 } 15 ?> TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 35
  36. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ 2 – Tạo Dropdown List phụ thuộc nhau Dropdown List Phụ Thuộc Nhau /Applications/XAMPP/xamppfiles/h p-adv/dropdown-ajax-functions.js Page 1 of 1 Saved: 4/2/14, 3:49:19 Printed For: Tran Cong An 29 /* dropdown-ajax-function.js */ 30 function chonTinh(matinh) { 31 if (window.XMLHttpRequest) 32 xmlhttp = new XMLHttpRequest(); 33 else 34 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 35 36 xmlhttp.onreadystatechange = function() { 37 if (xmlhttp.readyState==4 && xmlhttp.status==200) { 38 refreshHuyen(f_profile.s_huyen, xmlhttp.responseText); 39 } 40 } 41 xmlhttp.open("GET", "get-huyen.php?matinh=" + matinh, true); 42 xmlhttp.send(); 43 } TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 36
  37. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ 2 – Tạo Dropdown List phụ thuộc nhau Dropdown List Phụ Thuộc Nhau /Applications/XAMPP/xamppfiles/h ocs/LTW428/php-adv/get-huyen.php Page 1 of 1 Saved: 4/2/14, 3:35:13 Printed For: Tran Cong An 1 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 37
  38. [CT428] Chương 5.2 – PHP Adv AJAX – Asynchronous JavaScript and XML Ví Dụ 2 – Tạo Dropdown List phụ thuộc nhau /Applications/XAMPP/xamppfiles/h p-adv/dropdown-ajax-functions.js Page 1 of 1 DropdownSaved: 4/2/14, List 3:49:19 Phụ Thuộc Nhau Printed For: Tran Cong An 9 /* dropdown-ajax-function.js */ 10 function refreshHuyen(selectHuyen, data) { 11 //data: maHuyen&&tenHuyen;;maHuyen&&tenHuyen;; 12 //remove all items 13 var length = selectHuyen.options.length; 14 for (i=0; i<length; i++) 15 selectHuyen.remove(0); 16 17 //add new data 18 data = data.split(";;"); 19 for (i=0; i<data.length-1; i++) { 20 var huyen = document.createElement("option"); 21 var itemData = data[i].split("&&"); 22 huyen.value = itemData[0]; 23 huyen.text = itemData[1]; 24 selectHuyen.add(huyen); 25 } 26 } TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 5.2 – PHP Adv 38