Rivitalizza i tuoi moduli: migliora l'esperienza utente con l'API dei moduli di Drupal

Sapevi che la "fatica della forma" è una cosa ?! È una sensazione di sfinimento quando devi compilare troppi moduli. Ma i form sono parte integrante di un sito web e nessun proprietario di sito può (o dovrebbe) farne a meno. Quindi, come puoi assicurarti che il tuo sito web aiuti a ridurre l'affaticamento della forma? Facile! Mantienilo semplice e breve, offri istruzioni chiare e concise, suddividi moduli lunghi e usa il riempimento automatico. Soprattutto, assicurati di offrire un'esperienza utente ariosa per compilarli.

L'API dei moduli di Drupal offre un modo per creare moduli facilmente personalizzabili e tematizzati per integrarsi bene con qualsiasi sito web. Fornisce agli sviluppatori una serie di funzioni e API per creare, convalidare ed elaborare moduli in Drupal. Approfondisci l'incredibile Drupal Form API e scopri come implementarla nel tuo prossimo progetto.

Perché Form API

Come sai, i moduli sono una parte cruciale di ogni sito Web perché consentono agli utenti di interagire con essi inviando dati. Utilizzando l'API dei moduli di Drupal, gli sviluppatori possono creare moduli unici per vari scopi, tra cui contatto, accesso e registrazione. Alcuni motivi per cui dovresti prendere in considerazione Form API:

1. È facile da usare e non richiede molta esperienza di programmazione. Puoi creare form utilizzando un insieme di funzioni semplici ed intuitive.
2. Fornisce funzioni di convalida integrate che consentono di convalidare facilmente i dati del modulo.
3. Viene fornito con funzionalità di sicurezza integrate che aiutano a prevenire attacchi come cross-site scripting (XSS) e cross-site request forgery (CSRF).
4. È altamente personalizzabile e può essere utilizzato per creare moduli complessi con più campi, pulsanti e azioni.
5. Le API dei moduli sono tematizzabili, quindi gli sviluppatori possono modificare CSS e HTML per far apparire i loro moduli come preferiscono.
6. Può essere facilmente integrato con altre API Drupal.

Cose che devi sapere prima di costruire moduli

Esistono vari tipi di moduli che vengono spesso utilizzati in Drupal. Ognuno contiene una classe base che puoi estendere in un modulo univoco di tua progettazione.

Innanzitutto, identifica il tipo di modulo che devi creare:

• Una forma generica. Estendi FormBase.
• Un modulo di configurazione che consente agli amministratori di aggiornare le impostazioni di un modulo. Estendi ConfigFormBase.

Qualsiasi form che ha FormBase nella sua gerarchia deve implementare i seguenti metodi poiché FormBase implementa FormInterface.

• getFormId()
• buildForm()
• inviare il modulo()

Per creare un modulo personalizzato generico con l'API del modulo, dovrai definire una funzione che restituisca un array di elementi del modulo all'interno di buildForm() . La chiave di ogni elemento è il nome dell'elemento del modulo e il valore è un array di proprietà che definiscono l'elemento. Ad esempio, per creare un campo di testo, devi definire un elemento come questo:

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

Aggiunta di convalida

Form API fornisce anche un modo per convalidare l'input dell'utente. È possibile aggiungere funzioni di convalida alla definizione del modulo che verranno chiamate quando il modulo viene inviato. Se una funzione di convalida restituisce un messaggio di errore, l'invio del modulo verrà impedito e il messaggio di errore verrà visualizzato all'utente.

Per aggiungere una funzione di convalida, dovrai implementare un validateForm() .

Elaborazione degli invii di moduli

Quando viene inviato un modulo, Drupal chiama una funzione di invio che definisci. La funzione di invio può eseguire qualsiasi elaborazione necessaria dei dati del modulo, come il salvataggio nel database

Per definire una funzione di invio, dovrai implementare un submitForm()

Integra il modulo in una richiesta

Per integrare questo modulo nella struttura URI di un sito Drupal, utilizzare un percorso come il seguente:

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

La chiave _form indica al sistema di routing che il nome della classe fornito è una classe di form da istanziare e gestire come un form.

Creazione di un modulo personalizzato con Drupal Form API

Segui questi semplici passaggi per iniziare il processo di creazione di un modulo personalizzato con l'API dei moduli di Drupal:

1. Crea un .info.yml all'interno di un modulo personalizzato. ( Poiché stiamo creando un modulo separato per i moduli personalizzati, questo passaggio non è necessario per l'aggiunta di moduli in un modulo esistente ).
2. Crea una classe form per restituire l'array del form. (custom_module/src/Form/Registration.php )
3. Crea un file .routing.yml
4. Crea un .module e hook_form_alter() e/o hook_form_FORM_ID_alter() per modificare il form ( se necessario ).

Ecco un esempio completo di un modulo di registrazione dei dipendenti:

Struttura delle cartelle:

1. registrazione_impiegato.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/Form/Registrazione.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. registrazione_impiegato.routing.yml

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

Risultato:

Pensieri finali

Form API ti consente di creare moduli complessi e personalizzati con funzioni di convalida ed elaborazione in Drupal. Quando utilizzi Form API, puoi essere certo che i tuoi moduli siano coerenti e facili da usare per i tuoi utenti. Cerchi un'agenzia Drupal che ti aiuti a creare un'esperienza user-friendly per il tuo pubblico? Parla oggi stesso con i nostri esperti Drupal!