My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Membuat Component Register

Pada materi kali ini kita semua akan membuat sebuah component berbasis livewire yang bernama register, dimana component ini nantinya akan digunakan untuk proses register data customer.

Langkah 1 - Membuat Component Button Back

Pertama, kita akan membuat component berbasis Laravel yang mana nanti akan sering digunakan di dalam semua view / component, component ini hanya berisi sebuah button untuk kembali ke halaman sebelumnya.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:component buttons.back --view

Jika perintah di atas berhasil, maka kita akan mendapatkan file baru yang berada di resources/views/components/buttons/back.blade.php.

Silahkan buka file tersebut, kemudian ubah kode-nya menjadi seperti berikut ini.


        
xml

        

            
        

     
<button onclick="history.back()" class="text-decoration-none btn-back mb-1 border-0">
    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-arrow-left"
        viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8" />
    </svg>
</button>

Di atas, kita menambahkan event onclick dan kita arahkan ke fungsi javascript yang bernama history.back.

Langkah 2 - Membuat Component Register

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:livewire Auth/Register

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:

  1. Class Component: app/Livewire/Auth/Register.php
  2. View Component: resources/views/livewire/auth/register.blade.php

Langkah 3 - Membuat Route Register

Agar component register di atas nanti bisa diakses, maka kita perlu memberikannya sebuah route, dimana saat route ini diakses maka akan memanggil class component register.

Silahkan buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire;

use Illuminate\Support\Facades\Route;

//route register
Route::get('/register', Auth\Register::class)->name('register');

Dari perubahan kode di atas, pertama kita set namespace ke dalam folder livewire.


        
cpp

        

            
        

     
namespace App\Livewire;

Kemudian kita buat route baru untuk halaman register.


        
php

        

            
        

     
//route register
Route::get('/register', Auth\Register::class)->name('register');

Langkah 4 - Membuat Fungsi Register

Sekarang kita akan membuat sebuah method di dalam class component register, dimana method ini akan berfungsi untuk menyimpan data customer yang melakukan proses register.

Silahkan teman-teman buka file app/Livewire/Auth/Register.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire\Auth;

use Livewire\Component;
use App\Models\Customer;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;
    
    /**
     * rules
     *
     * @return void
     */
    public function rules()
    {
        return [
            'name' => ['required'],
            'email' => ['required', 'email', 'unique:customers,email'],
            'password' => ['required', 'confirmed'],
        ];
    }
    
    /**
     * register
     *
     * @return void
     */
    public function register()
    {
        //validate
        $this->validate();

        //create customer
        Customer::create([
            'name'      => $this->name,
            'email'     => $this->email,
            'password'  => bcrypt($this->password),
        ]);

        //session flash
        session()->flash('success', 'Register Berhasil, silahkan login');

        //redirect
        return $this->redirect('/login', navigate: true);
    }

    public function render()
    {
        return view('livewire.auth.register');
    }
}

Dari perubahan kode di atas, pertama kita import Model Customer.


        
perl

        

            
        

     
use App\Models\Customer;

Kemudian kita membuat 4 public properti, yang mana digunakan untuk menyimpan nilai dari form.


        
php

        

            
        

     
public $name;
public $email;
public $password;
public $password_confirmation;

Kemudian kita membuat method rules, method ini digunakan untuk mendefinisikan sebuah validasi.


        
csharp

        

            
        

     
public function rules()
{

	//...
	
}

Di dalamnya, kita membuat ebebrapa validasi.


        
ini

        

            
        

     
'name' => ['required'],
'email' => ['required', 'email', 'unique:customers,email'],
'password' => ['required', 'confirmed'],

Kemudian kita buat method lagi dengan nama register. Method ini yang nanti di triger atau dipanggil saat form di dalam view / component di submit.


        
csharp

        

            
        

     
public function register()
{

	//...
	
}

Di dalam method di atas, tinggal panggil validasi dengan kode seperti berikut ini.


        
scss

        

            
        

     
//validate
$this->validate();

Jika data yang dikirimkan sudah sesuai dengan validasi di atas, maka kita akan melakukan proses create data customer ke dalam database menggunakan Model.


        
php

        

            
        

     
//create customer
Customer::create([
    'name'      => $this->name,
    'email'     => $this->email,
    'password'  => bcrypt($this->password),
]);

Kemudian kita membuat sebuah session flash, untuk menampilkan alert atau notifikasi bahwasanya register berhasil dilakukan. Dan kemudian kita redirect ke URL /login.


        
kotlin

        

            
        

     
//session flash
session()->flash('success', 'Register Berhasil, silahkan login');

//redirect
return $this->redirect('/login', navigate: true);

Langkah 5 - Membuat Form Register

Setelah kita berhasil menambahkan method register di dalam class component, maka sekarang kita akan lanjutkan untuk membuat form registrasinya.

Silahkan buka file resources/views/livewire/auth/register.blade.php kemudian masukkan kode berikut ini.


        
xml

        

            
        

     
<div class="container">

    <div class="row justify-content-center mt-0">
        <div class="col-md-6">
            <div class="bg-white rounded-bottom-custom shadow-sm p-3 sticky-top mb-5">
                <div class="d-flex justify-content-start">
                    <div>
                        <x-buttons.back />
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded mt-80">
                <div class="card-body p-5">
                    <h5 class="text-muted text-center mb-4">Register Account</h5>
                    <form wire:submit.prevent="register">

                        <div class="input-group mb-3">
                            <input type="text" wire:model.blur="name" value="{{ old('name') }}" class="form-control rounded @error('name') is-invalid @enderror" placeholder="Full Name">
                        </div>
                        @error('name')
                            <div class="alert alert-danger mt-2 rounded border-0">
                                {{ $message }}
                            </div>
                        @enderror

                        <div class="input-group mb-3">
                            <input type="email" wire:model.blur="email" value="{{ old('email') }}" class="form-control rounded @error('email') is-invalid @enderror" placeholder="Email Address">
                        </div>
                        @error('email')
                            <div class="alert alert-danger mt-2 rounded border-0">
                                {{ $message }}
                            </div>
                        @enderror

                        <div class="input-group mb-3">
                            <input type="password" wire:model.blur="password" class="form-control rounded @error('password') is-invalid @enderror" placeholder="Password">
                        </div>
                        @error('password')
                            <div class="alert alert-danger mt-2 rounded border-0">
                                {{ $message }}
                            </div>
                        @enderror

                        <div class="input-group mb-3">
                            <input type="password" wire:model.blur="password_confirmation" class="form-control rounded" placeholder="Password Confirmation">
                        </div>

                        <button class="btn btn-orange-2 w-100 rounded" type="submit">Register</button>
                    </form>
                </div>
            </div>

            <div class="mt-4">
                <div class="text-center">
                    <span>Already have an account?</span>
                    <a href="/login" class="text-decoration-none fw-bold text-orange ms-2" wire:navigate>Login</a>
                </div>
            </div>

        </div>
    </div>

</div>

Di atas, pada bagian form untuk action-nya kita arahkan ke method register menggunakan wire:submit.


        
bash

        

            
        

     
<form wire:submit.prevent="register">

	//...
	
</form>

Dan untuk menangkap input form, kita bisa menggunakan wire:model. Berikut ini contohnya


        
kotlin

        

            
        

     
<input type="text" wire:model.blur="name" value="{{ old('name') }}" class="form-control rounded @error('name') is-invalid @enderror" placeholder="Full Name">

Di atas, kita tambahkan .blur pada directive wire:model, karena kita membutuhkan sebuah validasi yang realtime / reactive.

Dan untuk menampilkan sebuah error validasi, sama seperti Laravel pada umumnya, yaitu kita bisa menggunakan directive dari blade @error.


        
kotlin

        

            
        

     
@error('name')
    <div class="alert alert-danger mt-2 rounded border-0">
        {{ $message }}
    </div>
@enderror

Langkah 6 - Uji Coba Proses Register

Silahkan teman-teman buka link berikut ini http://localhost:8000/register, jika berhasil maka hasilnya kurang lebih seperti berikut ini.

Silahkan klik button Register tanpa mengisi data apapun, maka akan menampilkan error validasi yang kurang lebih seperti berikut ini.

Sekarang silahkan masukkan data yang diinginkan, jika berhasil maka hasilnya kurang lebih seperti berikut ini.

Di atas muncul error 404 | NOT FOUND, karena memang kita belum membuat halaman login-nya dan jika teman-teman perhatikan di URL browser kita sudah diarahkan ke /login.

SELESAI & LANJUTKAN