Drupal de Multistep Form ve Stepler arası veri taşıma nasıl yapılır?

Özge Aydın Front End Developer

Drupal Multistep Form

10 dakika okuma süresi

Adım 1: Modül Oluşturma

İlk olarak, çok adımlı formumuz için bir modül oluşturmalıyız. Drupal projenizin modules/custom dizinine gidin ve ardından yeni bir klasör oluşturun. Modül adınızı içeren bir klasör oluşturduktan sonra, içine bir src/Form klasörü ekleyin. İşte temel klasör yapısı:

/modules/custom/multistep_form
|-- multistep_form.info.yml
|-- src
    |-- Form
        |-- MultistepForm.php

Adım 2: Modül Bilgileri

Modül klasörünüzde, multistep_form.info.yml dosyasını oluşturun ve temel modül bilgilerinizi ekleyin:

name: 'Multistep Form'
type: module
description: 'Multistep Form ve Stepler arası veri taşıma'
core_version_requirement: ^8 || ^9 || ^10
package: Drupart

Bu YAML dosyası, Drupal'in modül sistemine modülünüzün temel bilgilerini sağlar. Bu bilgiler, modülün adı, tipi, açıklaması, desteklenen Drupal sürümleri, paket adı ve modülün versiyonu gibi temel bilgileri içerir. Bu dosya, Drupal'in modül yönetim sistemine modülünüzü tanıtmak için kullanılır.

Adım 3: Yol Tanımları

Şimdi, modülünüzün multistep_form.routing.yml dosyasında yolları tanımlayın. Bu dosya, hangi formun hangi yolda görüneceğini belirtir:

multistep_form.single_step:
 path: '/multistep-form'
  defaults:
  	_form: '\Drupal\multistep_form\Form\MultistepForm'
    _title: 'Multistep Form Örneği'
  requirements:
   	_permission: 'access content'

Bu YAML dosyası, multistep_form.single_step adında bir yol tanımlar. Bu yol, "/multistep-form" adresine karşılık gelir. defaults bölümünde, bu yolun bir formu temsil ettiği belirtilir ve _form parametresi ile ilgili form sınıfının adı verilir. Ayrıca, _title parametresi ile bu formun sayfa başlığı belirlenir. requirements bölümünde, bu yola erişim izinleri belirtilir ve _permission parametresi ile "access content" izni gerektiği belirtilir.

Adım 4: MultistepForm.php - Çok Adımlı Form Oluşturma

Şimdi en önemli bölüme geldik: çok adımlı formumuzu oluşturmak!
Birden fazla adımı olan tek sayfalı bir Ajax formu oluşturacağız.

MultistepForm.php dosyasına aşağıdaki sınıfları ve arayüzleri ekleyin.

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

FormBase sınıfı: Drupal formları oluştururken kullanmanız gereken temel yöntemleri içerir. Bu yöntemlerden en önemlisi buildForm() metodudur.
FormStateInterface Arayüzü: formunuzun geçerlilik durumu, gönderilen değerler ve diğer durum bilgileri gibi önemli form durum bilgilerini yöneten bir arayüzdür.

Başlangıçta multistepForm.php dosyamız aşağıdaki gibi olacaktır.

<?php
namespace Drupal\multistep_form\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class MultistepForm extends FormBase {
  public function getFormId() {
    return 'multistep_form';
  }
  public function buildForm(array $form, FormStateInterface $form_state) {
    // (Code….)
  }
  public function submitForm(array &$form, FormStateInterface $form_state) {
    //  (Code….)
  }
  public function previousSubmit(array &$form, FormStateInterface $form_state) {
    //  (Code….)
  }
}

Form Sınıfı Oluşturma:

Bu sınıf, çok adımlı formunuzu tanımlayan ve işleyen ana form sınıfıdır.

class MultistepForm extends FormBase {
   // (Code…)

Form Adını Belirleme:

getFormId fonksiyonu aracılığıyla formun benzersiz bir kimliğini belirlediniz.

public function getFormId() {
 return 'multistep_form';
}

Bu fonksiyon, formun Drupal üzerinde tanımlanmış bir benzersiz kimliğe sahip olmasını sağlar.

Formun Görüntülenme ve İşleyici Fonksiyonunu Oluşturma:

buildForm fonksiyonu, formun görüntülenme şeklini belirler ve formun hangi adımda olduğunu kontrol eder.

public function buildForm(array $form, FormStateInterface $form_state) {
 // (Code…)

Form Adımlarını Tanımlama:

buildForm fonksiyonu içinde, formun her adımındaki alanları ve düğmeleri tanımladınız.

switch ($step) {
  // (Code...)

Bu switch yapısı, formun her adımındaki özel alanları ve düğmeleri belirler.

Form Verilerini Geçici Olarak Saklama ve Yönlendirme:

submitForm fonksiyonu, kullanıcının girdiği verileri geçici olarak saklar ve bir sonraki adıma veya sonuç sayfasına yönlendirir.

public function submitForm(array &$form, FormStateInterface $form_state) {
 // (Code...)

Bu fonksiyon, formun hangi adımda olduğunu kontrol eder ve girilen bilgileri geçici olarak saklar.

Önceki Adıma Gitme İşlevselliği Eklenmesi:

previousSubmit fonksiyonu, bir önceki adıma gitmek için kullanılan bir alt form işleme fonksiyonudur.

Bu fonksiyon, bir önceki adıma gitmek için kullanılır ve gerekli güncellemeleri yapar.

Şimdi örnek olarak ilk stepte ad ve soyadın, ikinci stepte telefon ve mailin, sonuç kısmında da formda girilen verilerin ekrana yazdırıldığı multiStepForm.php dosyamızı detaylandıralım.

buildForm;

Adım Belirleme:

$step = $form_state->get('step') ?: 1;

Formun hangi adımda olduğunu belirleyen bir değişken oluşturulur. FormState nesnesinden step değeri alınır. Eğer bu değer mevcut değilse, varsayılan olarak 1 olarak atanır.

Adım Kontrolü ve Form Alanları Oluşturma:

switch ($step) {
 // ...
}

switch ifadesi ile hangi adımda olduğumuza göre ilgili form alanları oluşturulur. İlk adımda "Name" ve "Surname" alanları, ikinci adımda ise "Telephone" ve "Mail" alanları eklenir.

Sonuç Sayfası:

case 'result':
 // ...

Eğer formun sonucu sayfasındaysak, bir markup alanı eklenir. Bu alanda formun başarıyla gönderildiğine dair tebrik mesajı ve kullanıcının girdiği bilgiler görüntülenir.

İlerleme Düğmesi:

$form['actions']['next'] = [
 // ...
];

Her adımda bir "Next" düğmesi eklenir. İkinci adımda ise bu düğme "Save" olarak görüntülenir.

Önceki Adıma Gitme Düğmesi:

if ($step > 1) {
 $form['actions']['previous'] = [
   // ...
 ];
}

Eğer bir önceki adım varsa, bir önceki adıma gitmek için bir "Previous" düğmesi eklenir. Bu düğme sadece ikinci adımda görünür.

Formu Geri Döndürme:

return $form;

Fonksiyon, oluşturulan formu geri döndürür. Bu form, Drupal tarafından işlenip görüntülenir.

submitForm;

Adım Belirleme:

$step = $form_state->get('step') ?: 1;

Formun hangi adımda olduğunu belirleyen bir değişken oluşturulur. FormState nesnesinden step değeri alınır. Eğer bu değer mevcut değilse, varsayılan olarak 1 olarak atanır.

Adım Kontrolü ve Veri Saklama:

switch ($step) {
 case 1:
   // ...
   break;
 case 2:
   // ...
   break;
}

switch ifadesi ile hangi adımda olduğumuza göre ilgili form alanlarındaki veriler geçici olarak saklanır. İlk adımda "Name" ve "Surname" verileri, ikinci adımda ise "Telephone" ve "Mail" verileri geçici olarak saklanır.

Sonuç Sayfasına İlerleme:

$form_state->set('step', 'result');
$form_state->setRebuild();
return;

Eğer kullanıcı ikinci adımı tamamladıysa, verileri kaydetmek ve sonuç sayfasına ilerlemek için step değeri "result" olarak ayarlanır ve formun tekrar oluşturulması için setRebuild() çağrılır. Fonksiyon burada sona erer ve işlemin devamı sonraki form görüntüleme aşamasında gerçekleşir.

Bir Sonraki Adıma Geçme:

$step++;
$form_state->set('step', $step);
$form_state->setRebuild();

Fonksiyon, her adımdan sonra bir sonraki adıma geçiş kontrolü sağlar. step değeri arttırılır, setRebuild() çağrılır ve formun tekrar oluşturulması sağlanır.

previousSubmit;

Adım Belirleme:

$step = $form_state->get('step') ?: 1;

Formun hangi adımda olduğunu belirleyen bir değişken oluşturulur. FormState nesnesinden step değeri alınır. Eğer bu değer mevcut değilse, varsayılan olarak 1 olarak atanır.

Önceki Adıma Geçiş Kontrolü:

if ($step > 1) {
 // ...
}

Eğer kullanıcı birinci adımdan daha önce bir adımdaysa, bir önceki adıma geçiş yapılır.

Adım Azaltma ve Formun Yeniden Oluşturulması:

$step--;
$form_state->set('step', $step);
$form_state->setRebuild();

Eğer bir önceki adım varsa, step değeri azaltılır, setRebuild() çağrılır ve formun tekrar oluşturulması sağlanır. Bu, kullanıcının bir önceki adıma geri dönmesini sağlar.
Bu fonksiyon, kullanıcının bir önceki adıma geçmesini kontrol eden basit bir mantık içerir. Eğer kullanıcı birinci adımda ise, bir önceki adıma geçemeyeceği için fonksiyon herhangi bir işlem yapmaz. Ancak, kullanıcı ikinci adıma geçtiyse, bir önceki adıma geçiş yapılabilir ve formun tekrar oluşturulması ile görüntülenen formun içeriği güncellenir.

MultistepForm.php dosyasının son hali;

<?php
namespace Drupal\multistep_form\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class MultistepForm extends FormBase {
 public function getFormId() {
   return 'multistep_form';
 }
 public function buildForm(array $form, FormStateInterface $form_state) {
   $step = $form_state->get('step') ?: 1;
   switch ($step) {
     case 1:
       $form['name'] = [
         '#type' => 'textfield',
         '#title' => $this->t('Name'),
         '#required' => TRUE,
         '#default_value' => $form_state->get('name'),
       ];
       $form['surname'] = [
         '#type' => 'textfield',
         '#title' => $this->t('Surname'),
         '#required' => TRUE,
         '#default_value' => $form_state->get('surname'),
       ];
       break;
     case 2:
       $form['telephone'] = [
         '#type' => 'tel',
         '#title' => $this->t('Telephone'),
         '#required' => TRUE,
         '#default_value' => $form_state->get('telephone'),
       ];
       $form['mail'] = [
         '#type' => 'email',
         '#title' => $this->t('Mail'),
         '#required' => TRUE,
         '#default_value' => $form_state->get('mail'),
       ];
       break;
     case 'result':
       $form['result'] = [
         '#markup' => $this->t('Tebrikler! Formunuz başarıyla gönderildi. Form Sonuçları: <br> Ad: @name <br> Soyad: @surname <br> Telefon: @telephone <br> Mail: @mail <br>', [
           '@name' => $form_state->get('name'),
           '@surname' => $form_state->get('surname'),
           '@telephone' => $form_state->get('telephone'),
           '@mail' => $form_state->get('mail'),
         ]),
       ];
       break;
   }
   $form['actions']['next'] = [
     '#type' => 'submit',
     '#value' => $step == 2 ? $this->t('Save') : $this->t('Next'),
   ];
   if ($step > 1) {
     $form['actions']['previous'] = [
       '#type' => 'submit',
       '#value' => $this->t('Previous'),
       '#submit' => ['::previousSubmit'],
     ];
   }
   return $form;
 }
 public function submitForm(array &$form, FormStateInterface $form_state) {
   $step = $form_state->get('step') ?: 1;
   switch ($step) {
     case 1:
       $form_state->set('name', $form_state->getValue('name'));
       $form_state->set('surname', $form_state->getValue('surname'));
       break;
     case 2:
       $form_state->set('telephone', $form_state->getValue('telephone'));
       $form_state->set('mail', $form_state->getValue('mail'));
       
       // Save data and proceed to the result page.
       $form_state->set('step', 'result');
       $form_state->setRebuild();
       return;
   }
   $step++;
   $form_state->set('step', $step);
   $form_state->setRebuild();
 }
 public function previousSubmit(array &$form, FormStateInterface $form_state) {
   $step = $form_state->get('step') ?: 1;
   if ($step > 1) {
     $step--;
     $form_state->set('step', $step);
     $form_state->setRebuild();
   }
 }
}

Bu PHP kodu, kullanıcı dostu bir çoklu adımlı form oluşturmak için temel bir yapı sunar. Kullanıcılar adımlar arasında gezinebilir, verileri geçici olarak saklanabilir ve formun tamamlanması sonucunda bilgiler kalıcı olarak saklanabilir.

Step 1: