Lập trình web Lập trình WordPress

Sử dụng WordPress Setting API toàn tập – P2

Như vậy sau khi kết thúc bài Sử dụng WordPress Settings API toàn tập – P1 thì trong bài hôm nay chúng ta sẽ tiếp tục tìm hiểu các phương thức còn lại của Setting API, nội dung trong bài sẽ hướng dẫn bạn tạo ra các phần tử form để nhập liệu, sau khi nhập liệu sẽ xử lý và đưa dữ liệu vào database. Ở bài Sử dụng WordPress Setting API toàn tập – P2 thì bạn sẽ hiểu thêm một số phương thức cũng như cách xử lý dữ liệu từ form và lưu vào database.

Kết thúc bài trước thì bạn đã biết cách tạo ra một phân đoạn nằm trong vùng nhập liệu của form, kế tiếp tôi & bạn sẽ tìm hiểu cách tạo ra các phần tử bẻn trong form, nếu đây đơn thuần là html thông thường thì nó đơn giản, nhưng tôi muốn nhấn mạnh với bạn rằng, chúng ta đang làm việc trên hệ thống của WordPress, mà muốn nhập liệu vào form rồi gửi dữ liệu sang page options.php xử lý để lưu vào database thì bạn cần phải tuân thủ một số quy tắc mà WordPress đặt ra. Do đó bạn cần phải sử dụng thêm các phương thức khác thuộc nhóm Setting API để đạt đúng chuẩn quy tắc nhập liệu của WordPress.

1/ Phương thức add_settings_field()

Phương thức này giúp bạn tạo ra các phần tử của form,  nó bao gồm tất cả là 6 tham số , nhưng bạn chỉ cần quan tâm tới 5 tham số sau là đủ rồi.

Cú pháp:

 Tham số: 

  • $id: Giá trị của thuộc tính id trong phần tử HTML.
  • $title: Tiêu đề của phần tử.
  • $callback: Hàm callback sử dụng tạo ra phần tử HTML
  • $section : ID của section mà để gán phần tử form vào
  • $page : Tên page hoặc menu slug của trang

Tôi sẽ tạo ra một phần tử texbox trong form dùng để nhập tiêu đề website.

Ở tham số đầu tiên là ID của phần tử form tôi truyền vào giá trị là kenshin_new_title, ở tham số thứ hai là tên label hiển thị trong form, tham số thứ ba là phương thức dùng để xử lý khởi tạo textbox, tham số thứ tư là nơi hiển thị phần tử của form trên page nào.

Nội dung file backend.php:

Tội tạo mới phương thức new_title_input()  để thể hiện đoạn code hiển thị textbox, vậy ở đây bạn chỉ cần chú ý phần khai báo name=”kenshin_option[kenshin_new_title], bạn cần phải kết hợp với tham số thứ hai ở phương thức register_setting(), và tham số đầu tiên của phương thức add_settings_field().

Do bạn cần phải xác định vị trí textbox hiển thị ở phân đoạn section nào , để tiện khai báo và tái sử dụng thì bạn tạo biến $mainSection = ‘kenshin_main_section’ , biến này sẽ  là tham số thứ năm được truyền vào trong phương thức đang làm việc.

Sau khi đã tạo xong một texbox và hiển thị nó ở khu vực section được chỉ định, thì lúc này tôi sẽ tạo thêm một texbox nửa, và tôi có đoạn code xử lý như sau.

Textbox mà tôi vừa tạo thêm có hiển thị là Slogan, nó nằm trong khu vực section mới có tên là Slogan. Bạn quay lại trình duyệt truy cập vào link http://localhost/wordpress/wp-admin/admin.php?page=kenshin-my-setting để xem kết quả.

Sử dụng WordPress Setting API toàn tập   P2

kenshin-add-setting-field

Page Kenshin Setting đã hiển thị ra 2 ô textbox và hiển thị ở hai vị trí phân đoạn section khác nhau. Khi bạn dùng phương thức add_settings_field() để khởi tạo ra các phần tử form thì hệ thống WordPress sẽ tự động bao bọc các phần tử đó trong cặp thẻ table.

Vấn đề lúc này, để lưu dữ liệu vào database thì bạn cần có một nút nhấn submit giống như ở các page khác, vậy thì tạo ra nó có khó không ? câu trả lời là khai báo phần hiển thị nút nhấn html ở file setting-page.php.

Để tạo ra các nút nhấn có phần hiển thị giống với các page khác thì cách nhanh nhất là bạn F12 view đến nút nhấn đó rồi copy code html rồi paste vào sử dụng là được, do phần này khá đơn giản nên tôi sẽ không giải thích.

# Phương thức validate_setting():

Kế tiếp là phần xử lý dữ liệu để lưu vào database, lúc này bạn sẽ bắt đầu làm việc với phương thức validate_setting(), nó sẽ giúp bạn kiểm soát dữ liệu truyền vào trước khi bạn tiến hành lưu nó vào database.

Nếu bạn muốn lấy được dữ liệu thì cần có một tham số được truyền vào, tham số này chính là tham số chứa dữ liệu của [kenshin_new_title], [kenshin_new_slogan] ở textbox, bạn có thể truyền tham số vào phương thức với tên biến bất kì mà bạn muốn, tôi sẽ đặt là $data_input.

Để kiểm tra thì bạn cần in cái biến $data_input xem bạn nhận được dữ liệu gì sau khi nhập liệu trong form và nhấn nút Save changes.

Tôi F5 trình duyệt và tiến hành nhập liệu bất cứ giá trị nào vào 2 ô texbox, sau đó nhấn nút để quá trình xử lý dữ liệu được khởi tạo và trình duyệt sẽ tự động F5 lại page cho bạn.

http://localhost/wordpress/wp-admin/admin.php?page=kenshin-my-setting&settings-updated=true

Lúc này bạn sẽ thấy đường dẫn của bạn đã được nối thêm một giá trị là settings-updated=true, có nghĩa là đã cập nhật rồi, nhưng với cách này thì làm sao bạn thấy được dữ liệu gửi qua như thế nào. Do đó ngay phía dưới chỗ bạn in $data_input bạn sử dụng phương thức die() dừng xử lý code sau khi in dữ liệu ra và không lưu dữ liệu vào database.

Sử dụng WordPress Setting API toàn tập   P2

kenshin-validate_setting_api

Sau khi tôi nhập liệu xong và bấm nút lưu lại thì do tác dụng của phương thức die() nên bạn có thể thấy rằng nó gửi dữ liệu sang page options.php, dữ liệu hiện tại thuộc dạng array(mảng), phần tử đầu tiên chứa giá trị mà tôi nhập vào textbox thứ nhất, phần tử thứ hai chứa giá trị mà tôi nhập vào textbox thứ hai.

Vấn đề bây giờ bạn cần giải quyết là làm thế nào để lưu 2 giá trị này vào field kenshin_option trong table wp_options ? Vì lúc nãy bạn đã nhấn nút để lưu dữ liệu nên nó đã tạo ra field kenshin_option rồi, nhưng giá trị ở cột option_name là rỗng, vì dữ liệu bạn thêm vào vẫn chưa được xử lý để lưu vào.

Để lưu được dữ liệu thì khá là đơn giản, bạn chỉ cần return $data_input để nó nhận các kết quả trả về.

Tôi quay lại trang lúc nãy bấm F5 và nhập liệu các giá trị vào, bấm nút save changes để kết thúc quá trình lưu dữ liệu vào database. Bạn kiểm tra bằng cách truy cập vào phpmyadmin tìm đến table wp_options xem kết quả có giống hình không nhen.

Sử dụng WordPress Setting API toàn tập   P2

kenshin-validate-setting-run

Tên của 2 field mà bạn khai báo ở trên đã được thêm vào database và nó ứng với giá trị mà bạn đã khai báo ở textbox. Vậy là bạn đã lưu được dữ liệu vào trong table wp_options, vậy giờ lấy giá trị của nó ra và hiển thị giá trị vào các ô textbox?  Chắc hẳn bạn còn nhớ một phương thức thuộc nhóm Options API mà tôi đã trình bày ở các bài trước, nó cung cấp cho bạn một phương thức get_option(), giúp bạn lấy ra bất cứ giá trị của filed nào mà bạn đã chỉ định.

Bạn cần khởi tạo một biến toàn cục mới có tên là $_setting_option , biến toàn cục này sẽ hứng giá trị mà phương thức get_option() mang lại. Do bạn cần lấy ra các giá trị bên trong field kenshin_option thì ở tham số đầu tiên bạn điền vào là kenshin_option, tham số thứ hai có giá trị là mảng nên bạn cần khai báo cho nó sẵn một array rỗng.

Để lấy ra được giá trị thì ở hai phương thức new_title_input(), new_slogan_input(), phần value bạn sẽ bắt đầu sử dụng tới nó, ngay tại đó bạn khai báo như sau.

Thuộc tính $this->_setting_option[”] sẽ có một array chính là tham số đầu tiên của phương thức  add_settings_field() , là tên id mà bạn đã khai báo.

Để kiểm tra , thì bạn cần phải F5 trình duyệt xem kết quả là 2 ô textbox có chứa giá trị mà bạn vừa nhập liệu vào database, có giữ lại giá trị mà bạn vừa truyền vào không.

Sử dụng WordPress Setting API toàn tập   P2

kenshin-get-option-api-field-kenshin-option

Bạn có thể kiểm tra thêm bằng cách nhập giá trị mới xem textbox có giữ lại giá mới hay không. nếu textbox hiển thị dữ liệu mới thì bạn đã lưu dữ liệu vào database thành công rồi đấy.

4/ Phương thức add_settings_error()

Phương thức giúp bạn hiển thị các thông báo lỗi nhập liệu và khi cập nhật dữ liệu thành công, nó bao gồm 4 tham số.

Cú pháp:

Tham số:

  • $setting: menu slug của trang.
  • $code: Giá trị này sẽ kết hợp với chuỗi ‘setting-error-‘ để tạo ra thuộc tính id trong mã HTML.
  • $message: Chuỗi thông báo lỗi
  • $type: Kiểu thông báo, có 2 giá trị error và updated

Lúc này tôi sẽ kiểm tra hai textbox với điều kiện chỉ cho phép nhập liệu với giá trị tối đa là 20 ký tự, nếu vượt quá số ký tự thì sẽ hiển thị thông báo lỗi.

Để kiểm tra độ dài của ký tự thì bạn cần phải tạo ra một phương thức xử lý vấn đề này như sau.

Kế tiếp do giá trị thông báo lỗi trong WordPress có kiểu dữ liệu là array nên tôi sẽ khởi tạo biến $errors = array(), tức là mặc định giá trị sẽ là môt array rỗng.

Để tối ưu code hơn, tôi sẽ gộp 2 textbox kia thành 1 phương thức duy nhất và xác định chúng bằng tham số thứ 6 trong phương thức add_settings_field().

Để hiển thị thông báo lỗi thì trong file setting-page.php bạn sẽ phải gọi thêm phương thức settings_errors( $this->_menuSlug, false, false ), false để hiển thị cả phần error lẫn phần update.

Bây giờ nếu cập nhật thành công sẽ có thông báo trả về, và dữ liệu không được lưu vào database. Còn lại nếu dữ liệu nhập vào hợp lệ thì trình duyêt sẽ thông báo “Cap nhat du lieu thanh cong”.

5/ Kết bài

Hy vọng thông qua bài  Sử dụng WordPress Setting API toàn tập – P2 thì bạn đã hiểu rõ quy tắc nhập liệu từ form để lưu dữ liệu vào database do WordPress đề ra nó phức tạp như thế nào. Tuy nhiên đây vẫn chưa được gọi là vấn đề khó nhất, con đường  chinh phục WordPress còn rất dài, bạn nên chuẩn bị sẵn tâm lý mà đón nhận những vấn đề khó hơn ở căc bài kế tiếp.

Series Navigation<< Sử dụng WordPress Setting API toàn tập – P1Khái niệm về WordPress Widget API >>
Nguồn: laptrinhweb.org