Danh sách thả xuống động Hướng dẫn PHP MySQLi

Trong nhiều trường hợp, có thể mã hóa cứng một tập hợp các tùy chọn danh sách thả xuống ngay trong phần HTML của trang như đã thực hiện trong ví dụ trước. Tuy nhiên, khi nội dung của một danh sách thường xuyên thay đổi, cách tiếp cận như vậy sẽ yêu cầu rất nhiều lần cập nhật trang không cần thiết. Giống như bạn có thể sử dụng PHP để truy xuất dữ liệu được phủ trên bản đồ, bạn cũng có thể sử dụng nó để tự động điền vào danh sách thả xuống

Để minh họa một cách tiếp cận vấn đề này, chúng ta hãy xem một phiên bản sửa đổi đôi chút của trang Jen và Barry ở phần trước của bài học

Nó trông và hoạt động giống nhau đối với người dùng cuối. Tuy nhiên, phiên bản này lấy tên của các thành phố từ MySQL. Lưu ý rằng thay cho phần tử select đã được mã hóa cứng trước đây, giờ đây chỉ có một div trống [với id được gán]. Sự khác biệt khác trong phiên bản này có thể được tìm thấy ở phần đầu của hàm initMap[]. Ở đó trước khi khởi tạo bản đồ là một lệnh gọi jQuery ajax[]. Mã này đọc đầu ra của tập lệnh có tên get_city_list. php và chèn văn bản đó vào div giữ chỗ trống. Đây là mã nguồn của get_city_list. php

https. //phpdb. một bộ. psu. edu/phpjed124/get_city_list. php

Logic đằng sau tập lệnh này khá đơn giản. Đầu tiên, nó xuất các thẻ bắt đầu cho nhãn của danh sách và chọn các thành phần, theo sau là tùy chọn "tất cả" [để hiển thị tất cả các thành phố]. Sau đó, nó lặp qua các bản ghi được trả về bởi một truy vấn chọn một danh sách các thành phố duy nhất. Mệnh đề GROUP BY của truy vấn không thực sự cần thiết đối với bảng này, nhưng tôi đã đưa nó vào vì mệnh đề như vậy thường hữu ích để loại bỏ trùng lặp. Ví dụ: hãy tưởng tượng bạn đang phát triển một ứng dụng bất động sản cho phép người dùng chọn một khu học chánh từ danh sách và xem tất cả các bất động sản có sẵn trong khu học chánh đó. Bạn muốn mỗi học khu chỉ xuất hiện trong danh sách thả xuống một lần, nhưng bảng chứa danh sách tài sản có thể chứa nhiều lần xuất hiện của mỗi học khu. NHÓM THEO trên trường khu học chánh sẽ tạo ra một danh sách không trùng lặp [và được sắp xếp theo thứ tự bảng chữ cái]

Điều này kết thúc nội dung trên cơ sở dữ liệu quan hệ và việc sử dụng chúng trong ngữ cảnh lập bản đồ web. Trên trang tiếp theo, bạn sẽ tìm thấy một kịch bản dự án mà bạn có thể hoàn thành như một cách áp dụng những gì bạn đã học ở đây vào thực tế và/hoặc để kiếm thêm tín chỉ

Hướng dẫn này trình bày cách sử dụng Data Bridge 2. 0 để triển khai trình đơn thả xuống động, trong đó một lựa chọn trong một danh sách chọn sẽ điền vào một danh sách chọn khác

Cầu dữ liệu 2. 0 sử dụng Ajax [JavaScript và XML không đồng bộ] để tự động sửa đổi các phần của trang web mà không cần làm mới. Điều này cho phép lựa chọn một mục trong một danh sách để cập nhật hoàn toàn danh sách thứ hai. Cầu dữ liệu này 2. 0 cực kỳ mạnh mẽ và có thể được sử dụng theo nhiều cách, bao gồm cả việc thay thế chức năng của tiện ích mở rộng Dynamic Dropdowns, như được hiển thị trong hướng dẫn này

1. Dreamweaver CS3 hoặc mới hơn
   
2. Cầu dữ liệu 2. 0 trở lên, được cài đặt và kích hoạt trong Dreamweaver
   
3. Trang web PHP được xác định trong Dreamweaver
   
4. Các tệp mẫu SQL để sử dụng với hướng dẫn này. nwbsa. sql
   
5. Các tệp mẫu PHP để sử dụng với hướng dẫn này. Hướng dẫn thả xuống động. khóa kéo

Sử dụng tiện ích mở rộng Cầu dữ liệu, bạn sẽ tìm hiểu cách sử dụng một danh sách được chọn để tự động điền danh sách được chọn thứ hai

Bước 1. Tạo một trang web Dreamweaver PHP

Trang web Dreamweaver của bạn phải bao gồm một máy chủ thử nghiệm cục bộ được thiết lập để sử dụng PHP làm mô hình máy chủ. Sau khi trang web được tạo, hãy làm theo các bước sau

1. Mở các tệp hướng dẫn, Dynamic Drop-downs Tutorial. khóa kéo
   
2. Thêm tất cả các tệp và thư mục có trong kho lưu trữ zip mở rộng vào thư mục gốc của trang

Bước 2. Thiết lập cơ sở dữ liệu MySQL

Sử dụng phpMyAdmin hoặc một công cụ quản lý MySQL tương tự, hãy làm theo các bước sau

1. Tạo cơ sở dữ liệu mới có tên là nwbsa.
   Cơ sở dữ liệu này có hai bảng, thị trấn và đội mà bạn sẽ sử dụng trong hướng dẫn.
   
2. Nhập tệp nwbsa. sql, được tìm thấy trong các tệp được thêm vào trang Dreamweaver trong thư mục nguồn

Thiết lập sơ bộ của bạn hiện đã hoàn tất

Trong phần này, bạn sẽ chèn HTML cần thiết cho trang chính

Bước 1. Thêm biểu mẫu và các phần tử biểu mẫu

Chúng ta sẽ bắt đầu bằng cách thêm một biểu mẫu cơ bản vào trang và sau đó chèn một biểu mẫu có các thuộc tính bắt buộc

1. Mở tệp, chính. php
   
2. Đặt con trỏ của bạn vào

   nhãn
   

3. Từ menu Chèn, danh mục Biểu mẫu, chọn Biểu mẫu
   
4. Trong Trình kiểm tra thuộc tính, đặt thuộc tính Phương thức thành POST
   
5. Từ menu Chèn, chọn Nhãn
   
6. Trong thẻ, nhập Thị trấn. theo sau là một khoảng trắng
   
7. Đặt con trỏ sau thẻ đóng, chọn Select từ menu Insert, mục Form
   
8. Với thẻ được tô sáng, trong trường Tên người kiểm tra thuộc tính, hãy nhập thị trấn. Bước 2. Thêm thẻ div cho danh sách lựa chọn thứ hai Bạn sẽ cần cung cấp một khoảng trống để giữ danh sách lựa chọn thứ hai được chèn động [và điền]. Đảm bảo cung cấp cho div này một ID. Đặt con trỏ của bạn sau thẻ đóng. Trong chế độ xem Mã, hãy nhập mã sau. Lưu trang của bạn. Bây giờ là lúc tích hợp dữ liệu động từ cơ sở dữ liệu của bạn. Để làm điều này, trước tiên bạn cần thêm một tập bản ghi và sau đó tự động điền vào danh sách đã chọn của bạn. Bước 1. Thêm kết nối cơ sở dữ liệu Trước khi có thể thêm tập bản ghi vào trang, chúng ta cần thiết lập kết nối với cơ sở dữ liệu. Chọn Windows > Cơ sở dữ liệu. Nhấp vào Thêm [+] và chọn Kết nối MySQLi động. Trong hộp thoại Kết nối MySQLi động, hãy chèn các giá trị sau. Tên kết nối. connNWBSACharset. máy chủ MySQL mặc định. localhostTên người dùng. [YOUR_DATABASE_USER_NAME]Mật khẩu. [YOUR_DATABASE_PASSWORD]Nhấp vào Chọn bên cạnh trường Cơ sở dữ liệu và từ danh sách hộp thoại, hãy chọn nwbsa. Nhấp vào OK. Bước 2. Tạo tập bản ghi rsTowns Bây giờ tập bản ghi có sẵn cho chúng tôi, chúng tôi sẽ sử dụng nó để tự động điền vào danh sách chọn. Từ bảng Hành vi máy chủ, nhấp vào Thêm [+]. Chọn Recordset. Trong hộp thoại Recordset, đảm bảo rằng giao diện Đơn giản được hiển thị [bấm vào Đơn giản nếu Giao diện Người dùng Nâng cao được hiển thị] và đặt các giá trị sau. Tên. rsThị trấnKết nối. connNWBSATable. thị trấnCột. tất cả bộ lọc. KhôngSắp xếp. thị trấnTên tăng dầnNhấp vào OK. Bước 3. Liên kết dữ liệu động với danh sách Với tập bản ghi rsTowns của chúng tôi được xác định, giờ đây chúng tôi có thể liên kết dữ liệu động với danh sách đã chọn. Chọn danh sách
   
9. Trong Trình kiểm tra thuộc tính, nhấp vào nút Động
   
10. Khi hộp thoại Danh sách động/Menu WebAssist MySQLi mở ra, trước tiên hãy đảm bảo rằng Menu được đặt thành "thị trấn" ở dạng 0.
    Chúng tôi sẽ thêm tùy chọn tĩnh xuất hiện trước dữ liệu động để giúp hướng dẫn người dùng.
    
11. Đối với Tùy chọn tĩnh, nhấp vào Thêm [+]
    
12. Đặt giá trị thành Không
    
13. Đặt Nhãn thành Đầu tiên chọn một thị trấn và nhấn Tab
    
14. Từ danh sách Tùy chọn từ tập bản ghi, chọn rsTowns.
    Chúng tôi sẽ khớp tên thị trấn trong dữ liệu nhóm với tên thị trấn được chọn trong danh sách này.
    
15. Đặt cả Giá trị và Nhãn thành townName
    
16. Nhấp vào OK
    
17. Lưu trang của bạn

Trong phần này, chúng ta sẽ làm việc với các thành phần HTML tĩnh của trang con. Trang con sẽ chứa danh sách lựa chọn thứ hai và cuối cùng được tích hợp vào trang chính

Bước 1. Thêm phần tử biểu mẫu

Trang phụ này cuối cùng sẽ được tích hợp vào trang chính, vì vậy ở đây chúng tôi sẽ thêm HTML cho danh sách lựa chọn thứ hai. Bạn sẽ nhận thấy rằng chúng tôi không cần thêm thẻ biểu mẫu mới, vì trang con không độc lập và các phần tử nội dung sẽ được chèn vào biểu mẫu trong trang chính.
Vì WebAssist đề cập đến các trang con được Framework Builder sử dụng làm phần bổ trợ, nên tôi muốn lưu trữ các trang đó trong một thư mục có tên đó.

1. Mở tệp, plugins/childSelect. php
   
2. Đặt con trỏ của bạn vào thẻ
   
3. Từ menu Chèn, loại Biểu mẫu, chọn Nhãn
   
4. Trong thẻ, hãy nhập Nhóm. theo sau là một khoảng trắng
   
5. Đặt con trỏ sau thẻ đóng và chọn Chọn từ menu Chèn, danh mục Biểu mẫu
   
6. Trong trường Tên người kiểm tra thuộc tính, hãy nhập các nhóm
   
7. Lưu trang của bạn

Thời gian để có được năng động trên trang con. Ở đây, như với trang chính, chúng ta sẽ thiết lập kết nối cơ sở dữ liệu, tạo tập bản ghi và sau đó liên kết nó với danh sách chọn

Bước 1. Thêm kết nối cơ sở dữ liệu

Cũng như trang chính, chúng ta sẽ cần thiết lập kết nối với cơ sở dữ liệu. Vì nó đã được tạo nên tất cả những gì chúng ta cần làm là thêm nó vào trang

1. Đặt con trỏ của bạn ở đầu trang trong chế độ xem Mã
   
2. Từ bảng Cơ sở dữ liệu, chọn connNWBSA
   
3. Nhấp chuột phải và chọn Chèn mã
   
4. Lưu trang của bạn

Bước 2. Xác định tập bản ghi trang con

Một lần nữa, chúng tôi sẽ tự động điền vào danh sách lựa chọn - nhưng đối với trang con, chúng tôi sẽ cần lọc dữ liệu của mình theo một biến cụ thể, giá trị của danh sách lựa chọn của thị trấn được đăng lên trang

1. Từ bảng Hành vi máy chủ, nhấp vào Thêm [+]
   
2. Chọn Recordset
   
3. Trong hộp thoại Recordset, đảm bảo giao diện Simple được hiển thị và đặt các giá trị sau
   1. Tên. rsTeams
      
   2. Sự liên quan. connNWBSA
      
   3. Bàn. đội
      
   4. Cột. Tất cả các
      
   5. Lọc. teamTown = Biểu mẫu Thị trấn biến
      
   6. Loại. tên nhóm tăng dần
4. Nhấp vào OK

Bước 3. Liên kết dữ liệu động với danh sách chọn trang con

Với tập bản ghi rsTeams của chúng tôi được xác định, giờ đây chúng tôi có thể liên kết dữ liệu động với danh sách chọn trên trang con

1. Chọn danh sách. Trong Trình kiểm tra thuộc tính, nhấp vào nút Động. Khi hộp thoại Danh sách động/Menu WebAssist MySQLi mở ra, trước tiên hãy đảm bảo rằng Menu được đặt để chọn "nhóm". Một lần nữa, chúng tôi sẽ thêm một tùy chọn tĩnh sẽ xuất hiện trước dữ liệu động để giúp người dùng. Đối với Tùy chọn tĩnh, nhấp vào Thêm [+]. Đặt giá trị thành 0. Đặt Nhãn thành Sau đó chọn một nhóm và nhấn Tab. Từ danh sách Options from recordset, chọn rsTeams. Đặt cả Giá trị và Nhãn thành teamName. Nhấp vào OK. Lưu trang của bạn. Bước 4. Hiển thị tùy chọn tĩnh có điều kiện. Để giữ cho trải nghiệm người dùng của chúng tôi sạch sẽ, chúng tôi sẽ sử dụng hành vi của máy chủ WebAssist để chỉ hiển thị tùy chọn tĩnh nếu bộ bản ghi rsTeams trống -- điều này sẽ chỉ xảy ra nếu một thị trấn chưa được chọn. Chọn thẻ tĩnh. Trong hai bước cuối cùng, chúng ta sẽ sử dụng một tính năng của tiện ích mở rộng WebAssist Framework Builder để tự động chèn nội dung của trang con vào trang chính. Sau đó, chúng tôi sẽ thêm mã liên quan đến Ajax cần thiết thông qua một tính năng khác của tiện ích mở rộng đó. Bước 1. Kết nối trang chính với trang con Trong bước này, chúng ta sẽ sử dụng một tính năng của Framework Builder để chèn trang con vào trang chính. Lưu ý rằng bước này sẽ không chèn mã Ajax cần thiết—chúng ta sẽ thực hiện điều đó trong bước tiếp theo. Đặt con trỏ vào thẻ. Chọn WebAssist > Framework Builder > Plug-in > Chèn Plug-in vào Framework. Hộp thoại Chèn phần bổ trợ, đặt Trình kích hoạt thành trước khi tải trang và đối với Nguồn phần bổ trợ, hãy nhấp vào biểu tượng thư mục và điều hướng đến thư mục phần bổ trợ và chọn chọn con. php. Nhấp vào OK. Tiện ích mở rộng sẽ chèn mã vào hai vị trí trong HTML của bạn, cũng như phía trên thẻ. Ngoài việc thêm mã trong thẻ, nó còn thêm một dòng mã ngay trước thẻ đóng. Mã này sẽ đưa vào bất kỳ mã nào trong phần của trang plugin. Trong trường hợp này, làm như vậy sẽ lặp lại thẻ, vì vậy tốt nhất bạn nên xóa mã PHP đã chèn. Đánh dấu dòng mã PHP ngay phía trên thẻ đóng bắt đầu " Lưu trang của bạn. Bước 2. Thêm chức năng Ajax Bây giờ là lúc đưa Ajax vào hoạt động. Chúng tôi sẽ sử dụng tính năng Framework Builder có trong bảng Hành vi của Dreamweaver, được sử dụng để chèn các hành vi phía máy khách vào trang. Chọn thẻ
   
2. Chọn Windows > Hành vi để mở bảng Hành vi
   
3. Từ bảng Hành vi, chọn WebAssist > Framework Builder > Load Plugin to Div
   
4. Trong hộp thoại Load Plugin to Div, đặt các giá trị sau
   1. Gửi biểu mẫu. biểu mẫu[0]
      
   2. Cắm vào. plugins/conSelect. php
      
   3. tải vào. div. conChọn
5. Nhấp vào OK
   
6. Lưu trang

Dreamweaver sẽ chèn thẻ script để tải Ajax. js trong phần của trang cũng như thêm thuộc tính onChange vào thẻ đã chọn. Khi được thực thi, mã này sẽ không đồng bộ—không làm mới trang—tải danh sách lựa chọn con vào trang chính, dựa trên tùy chọn được chọn từ danh sách lựa chọn chính. Mã hóa hiện đã hoàn tất và chúng tôi đã sẵn sàng để kiểm tra trang. Bước 3. Kiểm tra công việc của bạn Được rồi, bạn đã làm được. Bây giờ, hãy kiểm tra công việc của bạn. từ chính. php, nhấp vào biểu tượng Xem trước thời gian thực ở phía dưới bên phải của cửa sổ tài liệu và chọn trình duyệt ưa thích của bạn. Khi trang hiển thị, chọn một thị trấn từ danh sách lựa chọn đầu tiên. Sau khi danh sách lựa chọn thứ hai xuất hiện, hãy chọn một nhóm. Lưu ý rằng tùy chọn tĩnh "Sau đó chọn một nhóm" không còn hiển thị sau khi một thị trấn đã được chọn và tập bản ghi rsTeam không trống. Xin chúc mừng. Bạn đã sử dụng thành công Data Bridge 2. 0 để tạo danh sách thả xuống động. Phương pháp chúng tôi đã sử dụng để thực hiện điều này cực kỳ hiệu quả và có thể được sử dụng để cung cấp năng lượng cho tất cả các loại chức năng của Ajax