إعادة تنشيط النماذج الخاصة بك: تحسين تجربة المستخدم باستخدام واجهة برمجة تطبيقات نموذج دروبال

هل تعلم أن "إرهاق الشكل" شيء ؟! إنه شعور بالإرهاق عندما تضطر إلى ملء العديد من النماذج. لكن النماذج جزء لا يتجزأ من موقع الويب ولا يمكن (أو ينبغي) لمالك الموقع الاستغناء عنها. فكيف يمكنك التأكد من أن موقع الويب الخاص بك يساعد في تقليل إجهاد النموذج؟ سهل! اجعله بسيطًا وقصيرًا ، وقدم تعليمات واضحة وموجزة ، وافصل النماذج الطويلة ، واستخدم الملء التلقائي. الأهم من ذلك كله ، تأكد من أنك تقدم تجربة مستخدم رائعة لملئها.

توفر واجهة برمجة تطبيقات نموذج دروبال طريقة لإنشاء نماذج قابلة للتخصيص وقابلة للتخصيص بسهولة لتندمج جيدًا مع أي موقع ويب. يوفر للمطورين مجموعة من الوظائف وواجهات برمجة التطبيقات لإنشاء النماذج والتحقق منها ومعالجتها في دروبال. ألق نظرة أعمق على واجهة برمجة تطبيقات Drupal Form المذهلة واكتشف كيف يمكنك تنفيذها في مشروعك التالي.

لماذا Form API

كما تعلم ، تعد النماذج جزءًا مهمًا من كل موقع ويب لأنها تتيح للمستخدمين التفاعل معها من خلال إرسال البيانات. باستخدام Form API الخاص بـ Drupal ، يمكن للمطورين إنشاء نماذج فريدة لأغراض مختلفة ، بما في ذلك الاتصال وتسجيل الدخول والتسجيل. بعض الأسباب التي تجعلك تفكر في Form API:

1. إنه سهل الاستخدام ولا يتطلب الكثير من الخبرة في الترميز. يمكنك إنشاء نماذج باستخدام مجموعة من الوظائف البسيطة والبديهية.
2. يوفر وظائف التحقق المضمنة التي تسمح لك بالتحقق من صحة بيانات النموذج بسهولة.
3. يأتي مع ميزات أمان مدمجة تساعد في منع الهجمات مثل البرمجة النصية عبر المواقع (XSS) وتزوير الطلبات عبر المواقع (CSRF).
4. إنه قابل للتخصيص بدرجة كبيرة ويمكن استخدامه لإنشاء نماذج معقدة ذات حقول وأزرار وإجراءات متعددة.
5. واجهات برمجة التطبيقات للنماذج قابلة للتخصيص ، لذلك يمكن للمطورين تغيير CSS و HTML لجعل نماذجهم تبدو كما يريدون.
6. يمكن دمجه بسهولة مع واجهات برمجة تطبيقات دروبال الأخرى.

الأشياء التي تحتاج إلى معرفتها قبل إنشاء النماذج

هناك أنواع مختلفة من الأشكال التي غالبًا ما تستخدم في دروبال. يحتوي كل منها على فئة أساسية يمكنك توسيعها في وحدة نمطية فريدة من تصميمك الخاص.

أولاً ، حدد نوع النموذج الذي تريد بنائه:

• شكل عام. توسيع FormBase.
• نموذج تكوين يمكّن المسؤولين من تحديث إعدادات الوحدة. قم بتوسيع ConfigFormBase.

يجب أن يقوم أي نموذج يحتوي على FormBase في التسلسل الهرمي الخاص به بتنفيذ الطرق التالية نظرًا لأن FormBase يقوم بتنفيذ FormInterface.

• getFormId ()
• buildForm ()
• تقديم النموذج()

لإنشاء نموذج مخصص عام باستخدام Form API ، ستحتاج إلى تعريف دالة تقوم بإرجاع مصفوفة من عناصر النموذج داخل buildForm () . مفتاح كل عنصر هو اسم عنصر النموذج ، والقيمة هي مجموعة من الخصائص التي تحدد العنصر. على سبيل المثال ، لإنشاء حقل نصي ، يمكنك تحديد عنصر مثل هذا:

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

إضافة التحقق

يوفر Form API أيضًا طريقة للتحقق من صحة إدخال المستخدم. يمكنك إضافة وظائف التحقق من الصحة إلى تعريف النموذج الخاص بك والتي سيتم استدعاؤها عند إرسال النموذج. إذا قامت وظيفة التحقق من الصحة بإرجاع رسالة خطأ ، فسيتم منع إرسال النموذج وسيتم عرض رسالة الخطأ للمستخدم.

لإضافة دالة تحقق ، ستحتاج إلى تنفيذ validateForm () .

معالجة عمليات إرسال النماذج

عند إرسال النموذج ، يستدعي دروبال وظيفة الإرسال التي تحددها. يمكن لوظيفة الإرسال إجراء أي معالجة ضرورية لبيانات النموذج ، مثل حفظها في قاعدة البيانات

لتحديد وظيفة الإرسال ، ستحتاج إلى تنفيذ submitForm ()

دمج النموذج في طلب

لدمج هذا النموذج في بنية URI لموقع Drupal ، استخدم مسارًا مثل ما يلي:

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

يخبر مفتاح _form نظام التوجيه أن اسم الفئة المقدم هو فئة نموذج يتم إنشاء مثيل لها ومعالجتها كنموذج.

إنشاء نموذج مخصص باستخدام Drupal Form API

اتبع هذه الخطوة السهلة لبدء عملية إنشاء نموذج مخصص باستخدام نموذج API الخاص بـ Drupal:

1. قم بإنشاء ملف .info.yml داخل وحدة مخصصة. ( نظرًا لأننا نقوم بإنشاء وحدة منفصلة للنماذج المخصصة ، فإن هذه الخطوة ليست مطلوبة لإضافة نماذج في وحدة نمطية موجودة ).
2. إنشاء فئة نموذج لإرجاع مصفوفة النموذج. (custom_module / src / Form / Registration.php )
3. قم بإنشاء ملف routing.yml
4. قم بإنشاء .module و hook_form_alter () و / أو hook_form_FORM_ID_alter () لتغيير النموذج ( إذا لزم الأمر ).

فيما يلي مثال كامل لاستمارة تسجيل الموظف:

هيكل المجلد:

1. worker_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 / Form / Registration.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. worker_registration.routing.yml

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

نتيجة:

افكار اخيرة

يتيح لك Form API إنشاء نماذج معقدة ومخصصة مع وظائف التحقق والمعالجة في Drupal. عند استخدام Form API ، يمكنك التأكد من أن النماذج الخاصة بك متسقة وسهلة الاستخدام للمستخدمين. هل تبحث عن وكالة دروبال لمساعدتك في بناء تجربة سهلة الاستخدام لجمهورك؟ تحدث إلى خبرائنا في دروبال اليوم!