• Beranda
  • Artikel
  • SEO
  • Revitalisasi Formulir Anda: Meningkatkan Pengalaman Pengguna dengan API Formulir Drupal

Revitalisasi Formulir Anda: Meningkatkan Pengalaman Pengguna dengan API Formulir Drupal

Diterbitkan: 2023-04-11

Tahukah Anda "kelelahan bentuk" adalah suatu hal ?! Rasanya lelah ketika harus mengisi terlalu banyak formulir. Tetapi formulir adalah bagian integral dari situs web dan tidak ada pemilik situs yang dapat (atau harus) melakukannya tanpa formulir. Jadi bagaimana Anda bisa memastikan situs web Anda membantu mengurangi kelelahan formulir? Mudah! Pertahankan agar tetap sederhana dan singkat, tawarkan instruksi yang jelas dan ringkas, pisahkan formulir yang panjang, dan gunakan isi otomatis. Yang terpenting dari semuanya, pastikan Anda menawarkan pengalaman pengguna yang menyenangkan untuk mengisinya.

Form API Drupal menawarkan cara untuk membuat formulir yang mudah disesuaikan dan bertema agar menyatu dengan baik dengan situs web apa pun. Ini memberi pengembang seperangkat fungsi dan API untuk membuat, memvalidasi, dan memproses formulir di Drupal. Pelajari lebih dalam Drupal Form API yang luar biasa dan cari tahu bagaimana Anda dapat menerapkannya di proyek berikutnya.

Bentuk Drupal Api

Mengapa Membentuk API

Seperti yang Anda ketahui, formulir adalah bagian penting dari setiap situs web karena memungkinkan pengguna untuk berinteraksi dengan mereka dengan mengirimkan data. Menggunakan API Formulir Drupal, pengembang dapat membuat formulir unik untuk berbagai keperluan, termasuk kontak, login, dan pendaftaran. Beberapa alasan mengapa Anda harus mempertimbangkan Form API:

  1. Mudah digunakan dan tidak memerlukan banyak pengalaman pengkodean. Anda dapat membuat formulir menggunakan serangkaian fungsi sederhana dan intuitif.
  2. Ini menyediakan fungsi validasi bawaan yang memungkinkan Anda memvalidasi data formulir dengan mudah.
  3. Dilengkapi dengan fitur keamanan bawaan yang membantu mencegah serangan seperti cross-site scripting (XSS) dan cross-site request forgery (CSRF).
  4. Ini sangat dapat disesuaikan dan dapat digunakan untuk membuat formulir kompleks dengan banyak bidang, tombol, dan tindakan.
  5. Form API dapat disesuaikan dengan tema, sehingga pengembang dapat mengubah CSS dan HTML untuk membuat formulir mereka terlihat seperti yang mereka inginkan.
  6. Itu dapat dengan mudah diintegrasikan dengan API Drupal lainnya.

Hal-hal yang perlu Anda ketahui sebelum membangun formulir

Ada berbagai macam form yang sering digunakan di Drupal. Masing-masing berisi kelas dasar yang dapat Anda kembangkan dalam modul unik desain Anda sendiri.

Pertama, identifikasi jenis formulir yang perlu Anda buat:

  • Bentuk generik. Perpanjang FormBase.
  • Formulir konfigurasi yang memungkinkan administrator memperbarui pengaturan modul. Perluas ConfigFormBase.

Formulir apa pun yang memiliki FormBase dalam hierarkinya harus mengimplementasikan metode berikut karena FormBase mengimplementasikan FormInterface.

  • getFormId()
  • buildForm()
  • menyerahkan formulir()

Untuk membuat formulir kustom generik dengan Form API, Anda harus menentukan fungsi yang mengembalikan larik elemen formulir di dalam buildForm() . Kunci dari setiap elemen adalah nama elemen bentuk, dan nilainya adalah larik properti yang menentukan elemen. Misalnya, untuk membuat kolom teks, Anda akan menentukan elemen seperti ini:

 $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ];

Menambahkan validasi

Form API juga menyediakan cara untuk memvalidasi input pengguna. Anda bisa menambahkan fungsi validasi ke definisi formulir Anda yang akan dipanggil saat formulir dikirimkan. Jika fungsi validasi mengembalikan pesan kesalahan, pengiriman formulir akan dicegah dan pesan kesalahan akan ditampilkan kepada pengguna.

Untuk menambahkan fungsi validasi, Anda perlu mengimplementasikan sebuah validateForm() .

Memproses pengiriman formulir

Saat formulir dikirimkan, Drupal memanggil fungsi pengiriman yang Anda tetapkan. Fungsi pengiriman dapat melakukan pemrosesan data formulir yang diperlukan, seperti menyimpannya ke database

Untuk menentukan fungsi pengiriman, Anda perlu mengimplementasikan submitForm()

Integrasikan formulir dalam permintaan

Untuk mengintegrasikan formulir ini ke dalam struktur URI situs Drupal, gunakan rute seperti berikut:

 example.form: path: '/example-form' defaults: _title: 'Example form' _form: '\Drupal\example\Form\ExampleForm' requirements: _permission: 'access content'

Kunci _form memberi tahu sistem perutean bahwa nama kelas yang disediakan adalah kelas formulir yang akan dipakai dan ditangani sebagai formulir.

Membuat formulir kustom dengan Drupal Form API

Ikuti langkah mudah ini untuk memulai proses pembuatan formulir kustom dengan Drupal's Form API:

  1. Buat .info.yml di dalam modul khusus. ( Karena kami membuat modul terpisah untuk formulir kustom, langkah ini tidak diperlukan untuk menambahkan formulir di modul yang sudah ada ).
  2. Buat kelas formulir untuk mengembalikan larik formulir. (custom_module/src/Form/Registration.php )
  3. Buat file .routing.yml
  4. Buat .module dan hook_form_alter() dan/atau hook_form_FORM_ID_alter() untuk mengubah bentuk ( Jika diperlukan ).

Berikut adalah contoh lengkap formulir pendaftaran karyawan:

Struktur folder:

pendaftaran pegawai

1. employee_registration.info.yml

 name: Employee Registration Form type: module description: Custom module for implementing custom employee registration form. core_version_requirement: ^9 || ^10 package: Custom

2. src/Formulir/Pendaftaran.php

 <?php namespace Drupal\employee_registration\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; /** * Implements a custom form. */ class Registration extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'employee_registration_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ]; $form['emp_no'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Employee Number'), '#required' => TRUE, ]; $form['emp_mail'] = [ '#type' => 'email', '#title' => $this->t('Enter Email ID'), '#required' => TRUE, ]; $form['emp_phone'] = [ '#type' => 'tel', '#title' => $this->t('Enter Contact Number'), ]; $form['emp_dob'] = [ '#type' => 'date', '#title' => $this->t('Enter DOB'), '#required' => TRUE, ]; $form['emp_gender'] = [ '#type' => 'select', '#title' => $this->t('Select Gender'), '#options' => [ 'Male' => $this->t('Male'), 'Female' => $this->t('Female'), 'Other' => $this->t('Other'), ], ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save'), '#button_type' => 'primary', ]; return $form; } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { if (strlen($form_state->getValue('emp_phone')) < 10) { $form_state->setErrorByName('emp_phone', $this->t('The phone number is too short. Please enter a full phone number.')); } } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { // Processing form data. $this->messenger()->addMessage($this->t("Employee Registration Done!!")); foreach ($form_state->getValues() as $key => $value) { $this->messenger()->addMessage($key . ': ' . $value); } } }

3. employee_registration.routing.yml

 employee_registration.form: path: '/registration-form' defaults: _title: 'Employee Registration' _form: '\Drupal\employee_registration\Form\Registration' requirements: _permission: 'access content'

Hasil:

formulir pendaftaran pegawai

halaman hasil reg emp

Pikiran Akhir

Form API memungkinkan Anda membuat formulir yang kompleks dan disesuaikan dengan fungsi validasi dan pemrosesan di Drupal. Saat Anda menggunakan Form API, Anda dapat yakin bahwa formulir Anda konsisten dan mudah digunakan untuk pengguna Anda. Mencari agensi Drupal untuk membantu Anda membangun pengalaman yang ramah pengguna bagi audiens Anda? Bicaralah dengan pakar Drupal kami hari ini!