ساختن فرم چند مرحله ای با Laravel ، LiveWire و MongoDB

از کد بالا ، طرح HTML را برای پرونده طرح اضافه کردیم. ما همچنین LiveWire را با استفاده از آن وارد کردیم @livewireStyles وت @livewireScriptsبشر این باعث می شود LiveWire در هر صفحه با این طرح در دسترس باشد.
قبل از ایجاد مؤلفه چند فرم LiveWire ، بیایید اطمینان حاصل کنیم که پیکربندی پایگاه داده به درستی کار می کند. برای انجام این کار ، ما باید مسیری را ایجاد کنیم routes/web.php برای پینگ کردن خوشه اطلس mongoDB ما و اطمینان از درست کردن کارها. به سمت routes/web.php و قطعه کد زیر را در زیر کد موجود در صفحه اضافه کنید:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

Route::get('/ping', function (Request $request) {
$connection = DB::connection('mongodb');
try {
$connection->command(['ping' => 1]);
$msg = 'MongoDB is accessible!';
} catch (Exception $e) {
$msg = 'You are not connected to MongoDB. Error: ' . $e->getMessage();
}
return ['msg' => $msg];
});

اکنون ، برنامه را با استفاده از:

php artisan serve

این برنامه را با آدرس IP شروع می کند 127.0.0.1:8000بشر اگر 8000 پورت در دسترس نیست ، Laravel به طور خودکار به یک درگاه موجود تغییر می کند.
در یک پنجره ترمینال متفاوت ، موارد زیر را برای نصب و ساخت وابستگی های Node.js در برنامه اجرا کنید.

Npm install && Npm run dev

بیایید آزمایش کنیم. از مرورگر خود ، به مسیر تازه ایجاد شده بروید ، 127.0.0.1:8000/pingبشر اگر همه چیز به درستی انجام شد ، صفحه شما باید دقیقاً مانند تصویر زیر باشد:

ساخت مؤلفه LiveWire

قبل از ساختن مؤلفه LiveWire ، بیایید کمی در مورد نحوه عملکرد فرم ما صحبت کنیم. ما در حال ساخت فرم چند مرحله ای با سه (3) هستیم. مرحله اول شامل اطلاعات اصلی کاربر مانند نام و ایمیل خواهد بود. مرحله دوم شامل جزئیات آدرس مانند خیابان ، شهر یا ایالت خواهد بود و سوم شامل اطلاعاتی مانند کادر چک و کشویی برای جنسیت و وضعیت تأهل خواهد بود.

این فرم برای اعتبارسنجی داده ها برای هر مرحله ، ذخیره داده های معتبر و دارای دکمه پشت ، بعدی و ارسال برنامه ریزی می شود. اطلاعات برای هر مرحله معتبر در پایگاه داده ما ذخیره می شود.

طرح MongoDB هنگام دستیابی به داده های پویا بسیار انعطاف پذیر است و اغلب ترجیح می دهد. رویکرد شماتیک آن برای ذخیره داده ها باعث می شود تا در اینجا رویکرد خوبی برای فرم ما باشد. با استفاده از MongoDB ، ما به راحتی می توانیم زمینه های جدید را به فرم اضافه کنیم و نیازی به اضافه کردن ستون های اضافی به یک پرونده مهاجرت نداریم. همچنین ، هنگام کار با MongoDB در لاراول ، نیازی به ایجاد پرونده های مهاجرت نداریم. زمینه های جدید را می توان در پرواز اضافه کرد.

با این گفته ، بیایید با استفاده از دستور زیر ، مؤلفه LiveWire خود را ایجاد کنیم:

php artisan livewire:make MultiStepForm

پس از اجرای دستور در بالا ، یک مؤلفه LiveWire با دو پرونده ایجاد می کند: app/Livewire/MultiStepForm.php وت resources/views/livewire/multi-step-form.blade.phpبشر app/Livewire/MultiStepForm.php شامل همه PHP کد برای مؤلفه در حالی که resources/views/livewire/multi-step-form.blade.php حاوی HTML سمت چیزها

بیایید مؤلفه LiveWire خود را به ما وارد کنیم resources/views/welcome.blade.php پرونده با به روزرسانی محتوای صفحه با کد زیر:

 />

در routes/web.phpبا افزودن کد زیر مسیری را برای مؤلفه LiveWire ما ایجاد کنید.

Route::get("https://dev.to/", function () {
    return view('welcome');
});

با این کار ، محتوای آن را جایگزین کنید resources/views/livewire/multi-step-form.blade.php با کد زیر:

    
 class="max-w-4xl mx-auto p-6 bg-white shadow-xl rounded-xl">
        @if (session('success'))
            
 class="mb-4 p-4 bg-green-100 text-green-700 rounded-lg">
                {{ session('success') }}
            
        @endif
        
        
 class="text-base font-semibold mb-4">Step {{ $currentStep }} of 3
        
    

بیایید کد بالا را تجزیه کنیم. حاوی آن است HTML وت TailwindCSS برای فرم چند مرحله ای ما. زمینه های فرم حاوی wire:model که آنها را به عناصری که در مؤلفه LiveWire اعلام می شوند ، متصل می کند. فرم در یک ظرف متمرکز پیچیده شده است div با کلاس های Tailwind برای فاصله ، رنگ پس زمینه و سایه ظریف.

در کد ، ما استفاده می کنیم ($currentStep) متغیر برای به روزرسانی مرحله فعلی فرم به عنوان کاربر فرم را پر می کند.

 @if (session('success'))
         <div class="mb-4 p-4 bg-green-100 text-green-700 rounded-lg">
              {{ session('success') }}
          div>
   @endif

بررسی کنید که آیا پیام موفقیت در جلسه وجود دارد یا خیر. اگر این واقعیت را برگرداند ، با یک پس زمینه سبز و متن سبز سبک تر نمایش داده می شود.

ما از یک بیانیه مشروط و ارزش استفاده کردیم $currentStep برای شناسایی مرحله فعلی و نمایش اطلاعات مربوطه برای آن مرحله:

@if ($currentStep == 1)
 @enderror

این هر مرحله را بر اساس مقدار نشان می دهد $currentStepبشر در مرحله اول ، زمینه هایی را برای جمع آوری نام و ایمیل نمایش می دهد. ورودی این فرم ها به آن محدود می شوند $name وت $email در app/Livewire/MultiStepForm.php با استفاده از wire:modelبشر ما این روند را برای مراحل دو و سه تکرار کردیم. ما همچنین با استفاده از خطاها در فرم انجام می دهیم @error() دستورالعمل تیغه.

ما از یک عبارت مشروط برای نمایش دکمه پشت برای مراحل دوم و سوم استفاده کردیم ، مانند کد زیر:

@if ($currentStep > 1)
                    <button wire:click="previousStep" class="px-4 py-2 bg-gray-500 text-white rounded">Backbutton>
                @endif

ما همین کار را برای دکمه بعدی انجام دادیم تا به مرحله بعدی برویم. ما اضافه کردیم save button در مرحله آخر برای ذخیره مقدار در مرحله سوم. برای ادویه آن ، اضافه کردیم wire:loading دکمه هایی برای نمایش یک نگهدارنده محل بارگذاری در هنگام بارگیری فرم.

رسیدگی به داده های فرم با MongoDB

MongoDB PHP راننده کار با MongoDB در لاراول را بسیار آسان می کند. این امکان را برای ما فراهم می کند تا با استفاده از فصیح به همان روشی که می خواهیم در یک وضعیت پایگاه داده رابطه ای (MySQL یا PostgreSQL) با MongoDB ارتباط برقرار کنیم. برای شروع ، بیایید یک model با استفاده از دستور زیر فرم کنید:

php artisan make:model MultiStepForm

دستور بالا ایجاد خواهد کرد app\Models\MultiStepForm.php پرونده پرونده را باز کرده و محتوای زیر را به روز کنید:

namespace App\Models;
use MongoDB\Laravel\Eloquent\Model;
class MultiStepForm extends Model
{
protected $connection = 'mongodb';
protected $table = 'multi_step_form';

protected $fillable = [
'name', 'email', 'address', 'city', 'gender',
];
}

این یک کلاس معمولی مدل Laravel است. ما با استفاده از فصیح MongoDB وارد کردیم use MongoDB\Laravel\Eloquent\Modeبشر ما مدل را با استفاده از MongoDB وصل کردیم protected $connection = 'mongodb' و یک جدول پایگاه داده به نام multi_step_form با استفاده از protected $table="multi_step_form"بشر

رسیدگی به فرم در کلاس LiveWire

بیایید با استفاده از LiveWire ، بقیه عملکردهای فرم خود را کنترل کنیم.

به سمت app/Livewire/MultiStepForm.php و محتوای صفحه را با کد زیر جایگزین کنید:

namespace App\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\DB;
use App\Models\MultiStepForm as MultiStepFormDB;
class MultiStepForm extends Component
{
    public $currentStep = 1;
    public $totalSteps = 3;
    public $name;
    public $email;
    public $address;
    public $city;
    public $gender;
    public function nextStep()
    {
        $this->validateStep();
        if($this->currentStep < $this->totalSteps){
            $this->currentStep++;
        }
    }
    public function previousStep()
    {
        $this->currentStep--;
    }
    public function validateStep()
    {
        if($this->currentStep === 1){
            $rules = [
                'name' => 'required|string',
                'email' => 'required|email',
            ];
            $this->validate($rules);
            $this->saveProgress($this->email, ['name' => $this->name], ['email' => $this->email]);
            session()->flash('success', 'Step '.$this->currentStep.' saved');
        }elseif($this->currentStep === 2){
            $rules = [
                'address' => 'required|string',
                'city' => 'required|string',
            ];
            $this->validate($rules);
            $this->saveProgress($this->email, ['address' => $this->address], ['city' => $this->city]);
            session()->flash('success', 'Step '.$this->currentStep.' saved');
        }elseif($this->currentStep === 3){
            $rules = [
                'gender' => 'required|string',
            ];
            $this->validate($rules);
            $this->saveProgress($this->email, ['gender' => $this->gender]);
            session()->flash('success', 'Step '.$this->currentStep.' saved');
        }
    }
    public function saveProgress($email, ...$formFields)
    {
        $data = [];
        foreach($formFields as $value){
            if (is_array($formFields)) {
                $data = array_merge($data, $value);
            }
        }
        try{
            MultiStepFormDB::updateOrCreate(['email' => $email], $data);
        }catch(\Exception $e){
            \Log::error('Error saving MultiStepForm: ' . $e->getMessage());
            session()->flash('error', 'There was an error saving your data. Please try again.');
        }
    }
    public function render()
    {
        return view('livewire.multi-step-form');
    }
}

منطق شکلی که در آن ایجاد کردیم resources/views/livewire/multi-step-form.blade.php انجام می شود app\Models\MultiStepForm.phpبشر برای درک آسانتر ، بیایید کد فوق را تجزیه کنیم.
برای پیگیری مراحل ، ما برای این منظور دو متغیر اعلام کردیم. در $currentStep مرحله فعلی کاربر را پیگیری می کند و مقدار پیش فرض 1 را دارد. $totalSteps متغیر چند مرحله را مشخص می کند. این مقدار پیش فرض 3 است ، نشان می دهد که فرم ما در کل سه مرحله دارد.
ما سایر خصوصیات عمومی را برای نگه داشتن داده های فرم اعلام کردیم ، مانند name وت emailبا address وت city، و سرانجام genderبشر
این خصوصیات LiveWire است. آنها به طور خودکار در زمان واقعی به عنوان نوع کاربر به روز می شوند و با استفاده از فرم به فرم وصل می شوند wire:model که قبلاً به آن اشاره کردیم

NextStep (): این روش با فراخوانی ورودی ، ورودی فرم را تأیید می کند $this->validateStep() روش اگر فیلدهای فرم به درستی فیلدی نشده باشند ، پیام خطا را نشان می دهد. اگر همه چیز به درستی انجام شود ، کاربر را به مرحله بعدی منتقل می کند. همچنین برای نشان دادن پیشرفت ، یک پیام موفقیت آمیز چشمک می زند.

پیش از این (): این روش با کاهش ارزش ، کاربر را یک قدم به عقب حرکت می دهد $this->currentStep کمتر توسط یک

$ this-> valityatestep (): این روش اعتبار سنجی فرم را انجام می دهد و پس از هر مرحله ، پایگاه داده را به روز می کند تا از دست دادن داده جلوگیری شود. این مرحله را بررسی می کند ، داده های مورد نیاز برای مرحله را تأیید می کند و پایگاه داده را به روز می کند – در مرحله اول ، برای اعتبار name وت email؛ در مرحله دوم ، معتبر برای address وت city؛ و سرانجام ، در مرحله سوم ، برای genderبشر اگر خطایی وجود داشته باشد ، ما آن را نمایش می دهیم. این خطا به عنوان یک پیام خطا در پرونده Blade.php نمایش داده می شود.
هر بار که کاربر به مرحله بعدی حرکت می کند ، داده های آنها با استفاده از $this->saveProgress()بشر

$ this-> saveProgress (): این یک روش سفارشی است که برای ایجاد یا به روزرسانی داده ها در پایگاه داده MongoDB ما ایجاد شده و از تکرار خودمان جلوگیری می کند.

 public function saveProgress($email, ...$formFields)
    {
        $data = [];
        foreach($formFields as $value){
            if (is_array($formFields)) {
                $data = array_merge($data, $value);
            }
        }
        try{
            MultiStepFormDB::updateOrCreate(['email' => $email], $data);
        }catch(\Exception $e){
            \Log::error('Error saving MultiStepForm: ' . $e->getMessage());
            session()->flash('error', 'There was an error saving your data. Please try again.');
        }
    }

آن را می پذیرد $email کاربر در $email به عنوان یک شناسه منحصر به فرد برای به روزرسانی رکوردی که از قبل وجود دارد یا ایجاد یک رکورد جدید که وجود ندارد ، استفاده می شود.
من همچنین یک بحث دیگر را می پذیرم ، ...$formFieldsبشر این امر ما را قادر می سازد تا تعداد نامحدودی از آرایه ها را به روش منتقل کنیم. ما از طریق حلقه حلقه کردیم و مقدار صحیح را به آن اختصاص دادیم $data که به ما منتقل می شود MultiStepFormDB::updateOrCreate() روش ایجاد رکورد.
در render() با LiveWire حمل می شود. این نمایش تیغه LiveWire.Multi-Step-Form را که شامل فرم است ، بارگیری می کند.

تست

در این مرحله می توانیم آزمایش کنیم. اطمینان حاصل کنید که هنوز برنامه Laravel شما ارائه شده است و NPM هنوز در حال اجرا است. اگر هنوز سرو نشده است ، می توانید آن را با استفاده از دستور زیر رزرو کنید:

php artisan serve

از یک پنجره متفاوت:

npm run dev

به URL میزبان محلی بروید. در مورد من ، این است http://127.0.0.1:8000/بشر شما باید یک صفحه را دقیقاً مانند من ببینید:

فرم را پر کنید و اطمینان حاصل کنید که همه چیز مطابق انتظار کار می کند.

پایان

کار خوب ، اگر تا به امروز دنبال کرده اید. ما به پایان آموزش رسیده ایم. بیایید یک دقیقه طول بکشد تا دوباره به دست بیاوریم. در این آموزش ، ما:

• یک فرم کاربردی و چند مرحله ای با استفاده از Laravel و LiveWire ساخته شده است.
• از انعطاف پذیری طرحواره MongoDB برای ذخیره داده های فرم تو در تو به طور مؤثر استفاده کرد.
• درایور PHP MongoDB را برای تعامل داده های یکپارچه اهرم کرد.

اگر کمی چالش را دوست دارید ، می توانید احراز هویت کاربر را به فرم خود اضافه کنید و اعلان های ایمیل را با استفاده از محرک های Laravel و MongoDB برای فرم های ناقص ادغام کنید.

پروژه را در GitHub پیدا کنید. احساس راحتی کنید که آن را کلون کنید ، در اطلس MongoDB ثبت نام کنید و آن را به نیازهای خاص خود سفارشی کنید. برای پشتیبانی بیشتر ، به جامعه توسعه دهنده MongoDB بپیوندید.