Halo teman-teman,

Di blog ini, saya akan mempelajari cara membuat login dan form registrasi user dinamis menggunakan paket laravel livewire. Kami akan menampilkan laravel livewire buat halaman login dan register. Pada artikel ini, saya akan menunjukkan tutorial auth dan regsiter laravel livewire. Saya akan menunjukkan kepada Anda cara membuat halaman login dan register user di laravel livewire.

Kita harus membuat halaman login dan register menggunakan livewire di laravel. Saya akan menunjukkan Anda membuat halaman login dan daftar di laravel, livewire.

Livewire adalah fullstack framework untuk Laravel yang membuat pembuatan antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel. Livewire hanya mengandalkan permintaan AJAX untuk melakukan semua komunikasi servernya.

Di sini saya akan memberikan contoh lengkap untuk login dan mendaftar user livewire di laravel, Jadi mari kita ikuti langkah di bawah ini.

Langkah 1: Instal Aplikasi Laravel

Pada langkah pertama, kita perlu mendapatkan aplikasi versi laravel menggunakan perintah di bawah ini. Jadi mari kita buka terminal dan jalankan perintah di bawah ini.

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Siapkan Konfigurasi Database

Setelah berhasil menginstal aplikasi laravel kemudian mengkonfigurasi pengaturan database. Kami akan membuka file ".env" dan mengubah nama database, nama userdan kata sandi di file env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Langkah 3: Instal Livewire

Pada langkah ini, Anda cukup menginstal livewire ke aplikasi laravel kami menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Buat Komponen

Sekarang, Anda dapat membuat komponen livewire menggunakan perintah di bawah, Jadi mari kita jalankan perintah di bawah ini untuk membuat komponen LoginRegister:

php artisan make:livewire LoginRegister

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/LoginRegister.php

resources/views/livewire/login-register.blade.php

Sekarang file pertama kita akan perbarui seperti di bawah ini untuk file LoginRegister.php.

app/Http/Livewire/LoginRegister.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Hash;
use App\User;

class LoginRegister extends Component
{
    public $users, $email, $password, $name;
    public $registerForm = false;

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

    private function resetInputFields(){
        $this->name = '';
        $this->email = '';
        $this->password = '';
    }

    public function login()
    {
        $validatedDate = $this->validate([
            'email' => 'required|email',
            'password' => 'required',
        ]);
        
        if(\Auth::attempt(array('email' => $this->email, 'password' => $this->password))){
                session()->flash('message', "You are Login successful.");
        }else{
            session()->flash('error', 'email and password are wrong.');
        }
    }

    public function register()
    {
        $this->registerForm = !$this->registerForm;
    }

    public function registerStore()
    {
        $validatedDate = $this->validate([
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required',
        ]);

        $this->password = Hash::make($this->password); 

        User::create(['name' => $this->name, 'email' => $this->email,'password' => $this->password]);

        session()->flash('message', 'Your register successfully Go to the login page.');

        $this->resetInputFields();

    }
}

Langkah 5: Tambahkan Route

Sekarang, kita perlu menambahkan route untuk login dan register user di aplikasi laravel. jadi buka file "routes/web.php" Anda dan tambahkan rute berikut.

route/web.php

Route::view('login','livewire.home');

Langkah 6: Buat View

Disini kita akan membuat file blade untuk menampilkan form login dan form register. di file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('login-register'). jadi mari tambahkan.

resources/views/livewire/login-register.blade.php

<div>
    <div class="row">
        <div class="col-md-12">
            @if (session()->has('message'))
                <div class="alert alert-success">
                    {{ session('message') }}
                </div>
            @endif
            @if (session()->has('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
        </div>
    </div>
    @if($registerForm)
        <form>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Name :</label>
                        <input type="text" wire:model="name" class="form-control">
                        @error('name') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Email :</label>
                        <input type="text" wire:model="email" class="form-control">
                        @error('email') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Password :</label>
                        <input type="password" wire:model="password" class="form-control">
                        @error('password') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn text-white btn-success" wire:click.prevent="registerStore">Register</button>
                </div>
                <div class="col-md-12">
                    <a class="text-primary" wire:click.prevent="register"><strong>Login</strong></a>
                </div>
            </div>
        </form>
    @else
        <form>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Email :</label>
                        <input type="text" wire:model="email" class="form-control">
                        @error('email') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Password :</label>
                        <input type="password" wire:model="password" class="form-control">
                        @error('password') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn text-white btn-success" wire:click.prevent="login">Login</button>
                </div>
                <div class="col-md-12">
                    Don't have account? <a class="btn btn-primary text-white" wire:click.prevent="register"><strong>Register Here</strong></a>
                </div>
            </div>
        </form>
    @endif
</div>

resources/views/livewire/home.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    @livewireStyles
</head>
<body>
    <div class="container">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                    <div class="card-header bg-danger text-white"><h5 style="font-size: 23px;">Laravel Livewire - Login Register Example - Medikre.com</h5></div>

                    <div class="card-body">
                        @livewire('login-register')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</script>
</body>
</html>

Sekarang kami siap untuk menjalankan contoh kami jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah di browser Anda:

http://localhost:8000/login

Semoga itu akan membantumu..