Halo teman-teman semuanya, sekarang kita akan belajar membuat proses register dengan Laravel dan Livewire. Jika di Laravel untuk membuat logic application ada di dalam controller, maka di Livewire kita tidak akan menggunakan controller lagi melainkan component. Keuntungan menggunakan component salah satunya adalah reusable, yaitu bisa digunakan berulang kali tanpa harus menuliskannya lagi.
Langkah 1 - Membuat Component Register
Silahkan masuk di dalam folder project kemudian jalankan perintah di bawah ini untuk membuat component Register.
php artisan make:livewire auth.register
Di atas kita akan membuat sebuah component baru dengan nama register yang berada di dalam folder auth. Jika perintah di atas berhasil maka kita akan dibuatkan 2 file, yaitu class dan view.
app/Http/Livewire/Auth/Register.php
resources/views/livewire/auth/register.blade.php
Langkah 2 - Membuat Route Register
Sekarang kita lanjutkan untuk membuat route untuk component register, silahkan buka file routes/web.php kemudian tambahkan kode berikut ini :
Route::group(['middleware' => 'guest'], function(){
//register
Route::livewire('/register', 'auth.register')
->layout('layouts.app')->name('auth.register');
});
Di atas untuk route register kita taruh di dalam middleware guest dan jika kita perhatikan lagi untuk route register akan menggunakan layouts yang bernama app.blade.php yang berada di dalam folder resources/layouts.
->layout('layouts.app')
Langkah 3 - Membuat Fungsi Register
Pertama kita akan membuat fungsi register di dalam class Register, silahkan buka file app/Http/Livewire/Auth/Register.php kemudian ubah kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Livewire\Auth;
use App\User;
use Livewire\Component;
class Register extends Component
{
public $name;
public $email;
public $password;
public $password_confirmation;
/**
* store
*
* @return void
*/
public function store()
{
$this->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required|confirmed'
]);
$user = User::create([
'name' => $this->name,
'email' => $this->email,
'password' => bcrypt($this->password)
]);
if($user) {
session()->flash('success', 'Register Berhasil!.');
return redirect()->route('auth.login');
}
}
/**
* render
*
* @return void
*/
public function render()
{
return view('livewire.auth.register');
}
}
Pertama kita import Model User terlebih dahulu, karena kita akan menggunakan model ini untuk memasukkan data user ke dalam database.
use App\User;
Di atas kita juga membuat beberapa public properti untuk kebutuhan data register, yaitu :
public $name;
public $email;
public $password;
public $password_confirmation;
Kemudian kita membuat function store, fungsi ini akan digunakan untuk menyimpan data yang di inputkan dari form ke database. Dan di dalam function store kita juga membuat sebuah validasi, kurang lebih seperti berikut ini :
$this->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required|confirmed'
]);
Jika validasi di atas terpenuhi maka akan melakukan penambahan data user menggunakan sintaks eperti berikut ini :
$user = User::create([
'name' => $this->name,
'email' => $this->email,
'password' => bcrypt($this->password)
]);
Kemudian kita membuat sebuah kondisi, jika data user berhasil di simpan ke dalam database maka akan menampilkan pesan sukses dan di arahkan ke dalam route yang bernama auth.login
if($user) {
session()->flash('success', 'Register Berhasil!.');
return redirect()->route('auth.login');
}
Langkah 4 - Membuat View Register
Setelah kita berhasil membuat fungsi untuk register, sekarang kita lanjutkan untuk membuat halaman viewnya. Silahkan buka file resources/views/livewire/auth/register.blade.php dan ubah kodenya menjadi seperti berikut ini :
<div>
<div class="container" style="margin-top: 120px">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h5 class="text-center"> <i class="fa fa-user-plus"></i> REGISTER</h5>
<hr>
<form wire:submit.prevent="store">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">NAMA LENGKAP</label>
<input type="text" wire:model.lazy="name" class="form-control @error('name') is-invalid @enderror"
placeholder="Nama lengkap">
@error('name')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">ALAMAT EMAIL</label>
<input type="text" wire:model.lazy="email" class="form-control @error('email') is-invalid @enderror"
placeholder="Alamat Email">
@error('email')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">PASSWORD</label>
<input type="password" wire:model.lazy="password"
class="form-control @error('password') is-invalid @enderror" placeholder="Password">
@error('password')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">KONFIRMASI PASSWORD</label>
<input type="password" wire:model.lazy="password_confirmation"
class="form-control" placeholder="Konfirmasi Password">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">REGISTER</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Jika teman-teman perhatikan di atas untuk action dari form kita arahkan ke dalam function store yang berada di dalam component register menggunakan directive wire:submit.
<form wire:submit.prevent="store">
Sekarang teman-teman bisa mencoba menjalankan projectnya di http://localhost:8000/register maka kurang lebih hasilnya seperti berikut ini :
Sekarang kita bisa mencoba menambahkan data user baru ke dalam database, silahkan diisi untuk inputan nama, email, password dan konfirmasi password. Jika berhasil maka kurang lebih tampilannya sperti berikut ini :
Di atas sebenarnya kita sudah berhasil membuat fungsi register, error di atas muncul karena kita belum memiliki route yang bernama auth.login, di artikel selanjutnya kita akan membuat component untuk login.
EBOOK MEMBANGUN TOKO ONLINE DENGAN LARAVEL DAN LIVEWIRE : https://bit.ly/ebook-laravel-livewire