Tutorial Membuat Wizard Form dengan Laravel 8 Livewire

Admin・ 4 Juni 2021

12 min read ・ 4994 views

Laravel Livewire Wizard Form - Pada kesempatan kali ini saya akan menambah koleksi artikel yang membahas tentang contoh dan penggunaan laravel livewire. Di artikel ini saya akan membagikan bagaimana membuat wizard form atau multi step menggunakan laravel 8 dan livewire.

Pendahuluan

Form merupakan media yang difungsikan untuk pengumpulan data. Untuk pengumpulan data dalam jumlah banyak dan dalam beberapa kategori, bisa menggunakan form dengan style wizard form atau multi step. Pengumpulan data dalam jumlah banyak dengan menggunakan wizard form dapat membuat user yang melakukan penginputan tidak akan merasa bosan sehingga hal ini bisa menambah nilai user experience.

Mulai Koding

Baiklah mari kita langsung masuk ke koding diawali dengan install projek laravel terbaru, install livewire, membuat component livewire, membuat logic wizard form, sampai membuat tampilan wizard form atau multi step dengan bootstrap.

Install Laravel

composer create-project laravel/laravel laravel-livewire-wizard

Di langkah pertama, saya akan install projek laravel terbaru (saat ini versi 8.46.0) dengan nama projek laravel-livewire-wizard. Jalankan perintah di atas untuk installasi laravel via composer.

Buat Database

Setelah proses installasi selesai, selanjutnya kita perlu membuat database baru untuk menampung data users nantinya. Karena saya memakasi xampp sebagai local server, saya akan membuat database baru di phpMyAdmin dengan nama laravel-livewire-wizard. Jika sudah membuat database baru, jangan lupa untuk menyesuaikan DB_DATABASE di file .env.

Edit File User Migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('username');
            $table->string('birth_place');
            $table->date('birth_date');
            $table->enum('status', ['married','single']);
            $table->string('email')->unique();
            $table->bigInteger('phone');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Disini kita akan menggunakan file user migration yang sudah disediakan secara default oleh laravel. Kita hanya akan menyesuaikan field-field yang ada sesuai dengan kebutuhan kita pada latihan membuat wizard form dengan laravel 8 livewire ini. Disini saya akan menambahkan field-field di antaranya username, birth_place, birth_date, status dan phone number dan akan menghapus remember token dan password karena pada study kasus ini kita tidak akan menggunakannya.

Edit File User Model

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'username',
        'birth_place',
        'birth_date',
        'status',
        'email',
        'phone',
    ];
}

Kemudian pada file User Model, kita sesuaikan dengan menambah field pada properti protected $fillable seperti pada file user migration tadi.

Migrate

Jika sudah mengubah file user migration dan user model, sekarang kita jalankan php artisan migrate untuk memigrasi tabel-tabel ke database laravel-livewire-wizard.

Install Livewire Package

composer require livewire/livewire

Selanjutnya, kita akan install livewire package di projek laravel kita. Jalankan perintah composer require livewire/livewire atau copy perintah di atas untuk installasi livewire package.

Buat Livewire Component

php artisan make:livewire Registration

Setelah proses install livewire package selesai, selanjutnya kita akan membuat livewire component untuk Registration. Silahkan pergi ke terminal dan jalankan perintah seperti di atas.

CLASS: app/Http/Livewire//Registration.php
VIEW:  resources\views/livewire/registration.blade.php

Dengan menjalankan php artisan make:livewire Registration, kita sekarang sudah mempunyai komponen-komponen livewire untuk Registration yaitu Class yang terletak di direktori app/Http/Livewire/Registration.php dan View yang terletak di direktori resources/views/livewire/registration.blade.php.

Edit Livewire/Registration.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class Registration extends Component
{
    public $currentStep = 1;
    public $name, $username, $birth_place, $birth_date, $status, $email, $phone;
    public $successMessage = '';

    public function firstStepSubmit()
    {
        $validatedData = $this->validate([
            'name' => 'required',
            'username' => 'required',
            'birth_place' => 'required',
            'birth_date' => 'required',
            'status' => 'required'
        ]);
 
        $this->currentStep = 2;
    }
  
    public function secondStepSubmit()
    {
        $validatedData = $this->validate([
            'email' => 'required|unique:users,email',
            'phone' => 'required|numeric',
        ]);
  
        $this->currentStep = 3;
    }
  
    public function submitForm()
    {
        User::create([
            'name' => $this->name,
            'username' => $this->username,
            'birth_place' => $this->birth_place,
            'birth_date' => $this->birth_date,
            'status' => $this->status,
            'email' => $this->email,
            'phone' => $this->phone,
        ]);
  
        $this->successMessage = 'You\'ve successfully registered';
  
        $this->clearForm();
  
        $this->currentStep = 1;
    }
  
    public function back($step)
    {
        $this->currentStep = $step;    
    }
  
    public function clearForm()
    {
        $this->name = '';
        $this->username = '';
        $this->birth_place = '';
        $this->birth_date = '';
        $this->status = '';
        $this->email = '';
        $this->phone = '';
    }
    
    public function render()
    {
        return view('livewire.registration');
    }

}

Kemudian buka file Registration Class Livewire Component yang terletak di App/Http/Livewire/Registration.php, copy semua kode di atas dan paste di file Registration.php tersebut. Disini kita pertama kita membuat properti $curentStep untuk mendeklarasikan bahwa step 1 adalah step yang pertama kali terbuka. Kemudian kita buat lagi properti untuk menangkap inputan-inputan yang akan kita buat dengan wire:model nantinya di view. Lalu di step 1 kita membuat validasi untuk form input name, username, birth place, birth date dan status agar harus diisikan sebelum lanjut ke step 2. Di step 2 kita membuat validasi lagi untuk form input email dan phone. Dan di step 3 nantinya merupakan summary dari apa yang diinputkan pada step 1 dan step 2. Nah di step 3 nantinya juga akan ada proses submit form yang akan menginputkan dari apa yang diinputkan pada step 1 dan step 2 ke tabel users. Setelah submit form nanti akan ada success alert dengan message "You've successfully registered". Baru setelah itu seluruh form input akan dikosongkan lagi dengan memanggil property clearForm() dan halaman akan di direct ke step 1.

Edit Livewire/registration.blade.php

<div class="pt-5">
    @if(!empty($successMessage))
    <div class="alert alert-success">
        {{ $successMessage }}
    </div>
    @endif
    <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
            <a class="nav-link {{ $currentStep != 1 ? '' : 'active' }}" href="#step1">Step 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $currentStep != 2 ? '' : 'active' }}" href="#step2">Step 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $currentStep != 3 ? '' : 'active' }}" href="#step3">Step 3</a>
        </li>
    </ul>
    <div class="row pt-3">
        {{-- Step 1 --}}
        <div id="step1" class="needs-validation" style="display: {{ $currentStep != 1 ? 'none' : '' }}">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" wire:model="name" class="form-control {{$errors->first('name') ? "is-invalid" : "" }}" id="name" aria-describedby="name">
                @error('name')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" wire:model="username" class="form-control {{$errors->first('username') ? "is-invalid" : "" }}" id="username">
                @error('username')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="birth_place" class="form-label">Birth Place</label>
                <input type="text" wire:model="birth_place" class="form-control {{$errors->first('birth_place') ? "is-invalid" : "" }}" id="birth_place">
                @error('birth_place')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="birth_date" class="form-label">Birth Date</label>
                <input type="date" wire:model="birth_date" class="form-control {{$errors->first('birth_date') ? "is-invalid" : "" }}" id="birth_date">
                @error('birth_date')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="status" class="form-label">Status</label><br>
                <label class="radio-inline me-2"><input type="radio" wire:model="status" class="me-2" value="married"
                    {{{ $status == 'married' ? "checked" : "" }}}>Married</label>
                <label class="radio-inline"><input type="radio" wire:model="status" class="me-2" value="single"
                        {{{ $status == 'single' ? "checked" : "" }}}>Single</label>
                @error('status') <span class="error">{{ $message }}</span> @enderror
            </div>
            <button class="btn btn-primary" wire:click="firstStepSubmit"
                type="button">Next</button>
        </div>

        {{-- Step 2 --}}
        <div id="step2" style="display: {{ $currentStep != 2 ? 'none' : '' }}">
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" wire:model="email" class="form-control {{$errors->first('email') ? "is-invalid" : "" }}" id="email" aria-describedby="email">
                @error('email')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="phone" class="form-label">Phone Number</label>
                <input type="number" wire:model="phone" class="form-control {{$errors->first('phone') ? "is-invalid" : "" }}" id="phone">
                @error('phone')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <button class="btn btn-danger" type="button" wire:click="back(1)">Back</button>
            <button class="btn btn-primary" type="button" wire:click="secondStepSubmit">Next</button>
        </div>

        {{-- Step 3 --}}
        <div id="step3" style="display: {{ $currentStep != 3 ? 'none' : '' }}">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Name: {{$name}}</li>
                <li class="list-group-item">Username: {{ $username }}</li>
                <li class="list-group-item">Birth Place: {{ $birth_place }}</li>
                <li class="list-group-item">Birth Date: {{ $birth_date }}</li>
                <li class="list-group-item">Status: {{$status ? 'Married' : 'Single'}}</li>
                <li class="list-group-item">Email: {{ $email }}</li>
                <li class="list-group-item">Phone: {{ $phone }}</li>
            </ul>
            <button class="btn btn-danger" type="button" wire:click="back(2)">Back</button>
            <button class="btn btn-success" wire:click="submitForm" type="button">Finish</button>
        </div>
    </div>
</div>

Buka file livewire/registration.blade.php. Sekarang di file ini kita akan membuat tampilan wizard form dengan bootstrap 5. Copy seluruh kode di atas, lalu paste atau replace pada file livewire/registration.blade.php.

Edit welcome.blade.php

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <title>Membuat Wizard Form dengan Laravel 8 Livewire</title>
        @livewireStyles
    </head>
    <body class="py-5">
        <div class="container">
            <div class="row">
                <div class="text-center">
                    <h1>Membuat Wizard Form dengan Laravel 8 Livewire</h1>
                </div>
                <livewire:registration>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        @livewireScripts
    </body>
</html>

Sekarang kita akan menyesuaikan kode di welcome.blade.php. Copy semua kode dia atas lalu replace pada welcome.blade.php. Kode di atas saya hanya memakai starter template dari bootstrap 5 dengan menyertakan @livewireStyles, @livewireScripts dan tidak lupa juga livewire component untuk registration.

Pengujian Laravel Livewire Wizard Form

Oke, sekarang jika kita coba buka project pada browser maka projek form wizard yang kita buat dengan laravel livewire sudah berfungsi dengan baik. Silahkan uji coba dengan mengisikan data pada masing-masing form pada step 1 dan step 2 dan diakhiri dengan melihat summary dari apa yang telah diinputkan pada step 1 dan step 2 sebelum mengakhiri penginputan dengan menekan button finish.

Kesimpulan

Pada artikel ini kita telah sama-sama belajar bagaimana cara membuat wizard form yang mudah dan cepat menggunakan laravel livewire. Di artikel ini, kita memakai study kasus pendaftaran user dengan memakai wizard form atau multi step. Pemakaian wizard form atau multi step bisa membuat user tidak merasa bosan saat melakukan penginputan data dengan form input dalam jumlah banyak.

Sampai disini artikel kali ini, jika ada kritik, saran atau apapun itu yang ingin didiskusikan, silahkan tulis komentar pada form komentar yang tersedia di bawah ini. Dan jika teman-teman mempunyai cara lain untuk cara membuat wizard form atau multi step dengan laravel livewire, bisa juga teman-teman share di form komentar. See you

Web illustrations by Storyset