Laravel ááᯠááẠFront-end áááºážááá¬áá²á·áááᯠááœá²áááºá¡áá¯á¶ážááŒá¯ááá¯á·ááá«áááºá á¡á²á·áá®ááᯠááœá²áááºá¡áá¯á¶ážááŒá¯ááá¯á·ááá²á· áááºážááá¬ááœá±áá²á Livewire á¡ááŒá±á¬ááºážááᯠáá áºáá«áá² áááºááœá±á·ááá¯ááºáá¯ááºááŒáá·áºááá¯á·áááá·áº Tutorial áá¯á¶á á¶áá²á· ááŒá®ážáá²á·áá²á· ááá¯á áºá·ááŸá¬ áá±á¬áºááŒáá²á·ááŒá®ážááŒá áºáá«áááºá
á¡á²á·áá® Tutorial ááŸá¬ Class Component ááœá±ááᯠá¡áá¯á¶ážááŒá¯ áá±á¬áºááŒáá²á·ááŒá®áž áá®áá áºáá«áá±á¬á·á áá¯á¶á á¶áá° Tutorial ááá¯áá² á¡áá áºááœááºáá¬ážáá²á· Livewire 3 ááŸá¬áá«áá²á· Functional Component ááœá±áá²á· á¡áááºážáááºááŒááºáááºááŒá®áž áááºáá¶áá±á¬áºááŒááá¯ááºáá«áááºá
á ááºážáááºááŒáá·áºááá¯ááºááá¯á·á¡ááœáẠááááá¯á¶áž Laravel ááá±á¬áá»áẠá¡áá áºáá áºáá¯ááᯠá¡áá¯ááᯠáááºáá±á¬ááºáá°ááá¯ááºáá«á
composer create-project laravel/laravel laravolt
ááá°áá¬á¡á laravolt ááá¯áá²á· ááá¯áá«á¡áááºáá²á· Laravel ááá±á¬áá»ááºáá
áºáá
áºáᯠáááŸáááœá¬ážáá«áááá·áºáááºá ááá±á¬áá»ááºááá¯áá«áá²ááᯠcd laravolt áá²á·áááºááŒá®áž Laravel Breeze ááᯠá¡áá¯ááᯠInstall áá¯ááºááá¯ááºáá«á
composer require laravel/breeze --dev
Laravel Breeze áᬠá¡ááá·áºáá¯á¶áž User Authentication System ááᯠTailwind ááá¯á· Livewire ááá¯á·áá²á· áá±ážáá±ážáá¬ážáá²á· Official Package áá áºáá¯ááŒá áºáá«áááºá áá® Package ááᯠInstall áá¯ááºááá¯ááºááŒááºážá¡á¬ážááŒáá·áº User Authentication á¡ááŒáẠTailwind ááá¯á· Livewire ááá¯á·áááºáž áá áºáá«áá² ááá·áºááœááºážáá«áááºááœá¬ážááŒá®áž ááŒá áºá á±áá«áááºá ááá¯áá·áºáá¬áᬠáá áºáá¯áá»ááºáž áááºááá·áºá áᬠáááá¯áá±á¬á·áá«áá°ážá
ááŒá®ážáá²á·áá²á·ááá¯á áºá·ááᯠáá±ážáá±á ááºá¡áá»áááºáá Laravel Breeze ááᯠLivewire Class Component ááœá±áá²á· áááºáá®ážáá¬ážááŒááºážááŒá áºááŒá®ážá ááááºáááŒá¬áá±ážáááºááá² Functional Component ááœá±áá²á· ááŒááºáá±ážáá±ážáá¬ážáá²á· Update ááᯠáá¯ááºáá±ážááá¯ááºáá«ááŒá®á áá«ááŒá±á¬áá·áº á¡áá¯áá± Install áá¯ááºááá¯ááºááẠáááŸáááá·áº Updated Laravel Breeze á Functional Component ááœá±áá²á· ááŒá áºáá±ááŒá®áž ááŒá áºáá«áááá·áºáááºá
ááŒá®ážáá²á·á¡áá« ááá¯á¡ááºáá²á· Setup ááœá± ááŒá¯áá¯ááºá á±ááá¯á·á¡ááœáẠáá® Command ááᯠRun áá±ážáá«á
php artisan breeze:install
áá¬áá±ážáá²á· áá±ážááœááºážááœá±áá²á Livewire (Volt Functional API) with Alpine ááᯠááœá±ážáá±ážáá«á áá«ááá¯ááẠLivewire Functional Component ááœá±ááᯠá¡áá¯á¶ážááŒá¯ááŒá®áž ááá¯á¡ááºáá²á· Setup ááœá±ááᯠáá°á áá¯ááºáá±ážááœá¬ážááŸá¬áá«á áá»ááºáá±ážááœááºážááœá±ááá¯áá±á¬á· á¡áá¯ááá·áºááŒáá·áºááá·áºáá²ááŸá¬ ááá«áá±ážááá¯á· ááŸá
áºáááºáá¬áᬠááœá±ážááá¯ááºáá«á ááá«áááºá
áááºáááºááŒá®áž á
ááºážááŒáá·áºá
áᬠData áá¡á±á¬áẠMigrate ááœá± Seed ááœá± áá¯ááºááŒáá«áááºá á¡áááºáá¯á¶áž .env ááá¯ááºááŸá¬ DB_DATABASE=laravel ááᯠDB_DATABASE=laravolt ááá¯á· ááŒááºáá±ážááŒá®áž migrate Run áá±ážááá¯ááºáá«á
php artisan migrate
Migration Run á
ááºááŸá¬ Database áááŸááá±ážááá¯á· áá±á¬ááºááŸá¬áá¬ážáá±ážááẠYes ááᯠááœá±ážáá±ážáá«á ááŒá®ážáá²á·á¡áá« Sample Data áá±ážáá
áºáá»áá¯á· ááá·áºááá¯á·á¡ááœáẠdatabase/seeders/DatabaseSeeder.php ááŸá¬ Comment ááááºáá¬ážáá²á· áá®ááá¯ááºážáá±ážááᯠááœáá·áºáá±ážááá¯ááºáá«á
\App\Models\User::factory(10)->create();Seed Run ááŒá®áž Sample Data ááá·áº ááá¯á·ááá«ááŒá®á
php artisan db:seed
Server ááœá± Run ááá¯á·áááºá ááá¯á¡ááºáá²á· Command Run ááá¯á·ááẠTerminal (á) áá¯ááá¯áá«áááºá Server ááœá±ááᯠBackground Service á¡áá±áá²á· Run ááŒá®áž Manage áá¯ááºáááºáááºáá±á¬á· áá áºáá¯áá²áááºáž ááá«áááºá áá«áá±ááá·áº áá®áá±áá¬ááŸá¬áá±á¬á· ááŸááºážááœá¬ážá¡á±á¬áẠ(á) áá¯ááœá²áá¯á¶ážáááºááá¯á·áᬠááá±á¬áá¬ážáá«á á¡áááºáá¯á¶áž Terminal áá áºáá¯ááŸá¬ Client-side Dev Server ááᯠá¡áá¯ááᯠRun ááá¯ááºáá«á
npm run dev
Run áááºá ááᯠááááºááá¯ááºááá¯á· áááá«áá°ážá áá®á¡ááá¯ááºáž Run áá¬ážáááŸá¬áá«á Terminal áá±á¬ááºáá áºáá¯áá²á· PHP Dev Server ááᯠá¡áá¯ááᯠRun ááá¯ááºáá«á
php artisan serve
áá°áááºáž Run áááºá ááᯠááááºááá¯ááºááá¯á· áááá«áá°ážá áá®á¡ááá¯ááºáž ááẠRun áá¬ážáááŸá¬áá«á Browser ááŸá¬ localhost:8000 áá²á· á ááºážááŒáá·áºááá¯á·ááá«ááŒá®á
áááºáááºááŒá®áž áá±á¬áẠTerminal áá áºáá¯ááŸá¬ á¡áá¯ááᯠRun ááŒá®áž ááá¯á¡ááºáá²á· Livewire Component ááœá± View ááœá±áááºáá®ážááá¯ááºáá«á
php artisan livewire:layout
php artisan make:volt users/user-list
php artisan make:volt users/user-detail
php artisan make:volt users/user-add
ááá Command á resources/views/components/layouts/app.blade.php á¡áááºáá²á· Main Layout View ááá¯ááºáá
áºáá¯ááᯠáááºáá±á¬ááºáá±ážááœá¬ážááŸá¬ááŒá
áºáá«áááºá Livewire Functional Component ááœá±á¡ááœáẠmake:livewire ááá¯ááºáá² make:volt ááá¯áá¯á¶ážáá¬ážáᬠáááááŒá¯áá«á Class ááá¯ááºááœá± áááá¯á¡ááºáá±á¬á·áá² View ááá¯ááºááœá±ááá¯áá±á¬á· resources/views/livewire áá²ááŸá¬ áááºáá±á¬ááºáá±ážááœá¬ážááŸá¬ ááŒá
áºáá«áááºá áá«ááŒá±á¬áá·áº make:volt Command (á) áá¯ááá± áááŸááá¬áááºá· ááá¯ááºááœá±á áá®ááá¯áá«
resources/views/livewire/users/user-list.blade.phpresources/views/livewire/users/user-detail.blade.phpresources/views/livewire/users/user-add.blade.php
resources/views/components/layouts/app.blade.php áá²á áá¯ááºááᯠá¡áá¯ááá¯ááŒááºáá±ážááá¯ááºáá«á
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Livewire</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="min-h-screen bg-gray-100">
<header class="bg-white shadow">
<div class="flex max-w-5xl mx-auto py-6 px-4">
<h2 class="font-semibold text-xl
text-gray-800 leading-tight">
Livewire
</h2>
<a class="text-green-600 ms-6"
href="/users/add" wire:navigate>+ Add User</a>
</div>
</header>
<main class="max-w-3xl mx-auto py-6 px-4">
{{ $slot }}
</main>
</div>
</body>
</html>áá®ááá¯ááºá Livewire Component ááœá±ááᯠFull Page Component á¡áá±áá²á· ááŒáá²á·á¡áá« Main Template á¡ááŒá
Ạá¡áá¯á¶ážááŒá¯áá±ážááá·áºááá¯áẠááŒá
áºáá«áááºá á¡ááááá°ážááŒá¬ážáá»áẠááŸá
áºáá»ááºáá²áá«áá«áááºá $slot áá±áá¬ááŸá¬ Component ááᯠáá¬ááŒááŸá¬ááŒá
áºááŒá®ážá <a> Element ááŸá¬ wire:navigate Attribute áá«ááœá¬ážáá«áááºá áá«ááŒá±á¬áá·áº áá® <a> Element ááᯠááŸáááºáá²á·á¡áá« áá±á¬ááºáá
áºáá»ááºááŸá¬á¡áá±áá²á· Page Reload áá²á· áááœá¬ážáá±á¬á·áá² áááºááá¯ááºáᬠComponent ááᯠáá±áá¬ááŸá¬ááẠSingle-page á¡áá±áá²á· ááŒá±á¬ááºážááŒá®áž ááŒáá±ážááœá¬ážááŸá¬áá«á JavaScript ááœá±áááá¯áá² PHP áá²á·áá² Single-page á¡áá¯ááºáá¯ááºá¡á±á¬áẠáá±ážááá¯á·áááœá¬ážááŒááºážáá² ááŒá
áºáá«áááºá
ááŒá®ážáá²á·á¡áá« resources/views/livewire/users/user-list.blade.php ááŸá¬ á¡áá¯ááᯠáá±ážáá±ážááá¯ááºáá«á
<?php
use App\Models\User;
use function Livewire\Volt\state;
state([ 'users' => fn () => User::all() ]);
$delete = function ($id) {
$user = User::find($id);
$user->delete();
$this->users = User::all();
}; ?>
<ul class="mt-4">
@foreach ($users as $user)
<li class="border-b py-2 mb-2 flex justify-between"
wire:key="{{ $user->id }}">
<a href="/users/view/{{ $user->id }}"
class="text-blue-700" wire:navigate>
{{ $user->name }}
</a>
<button wire:click="delete({{ $user->id }})"
class="text-red-500 text-xl font-bold">
×
</button>
</li>
@endforeach
</ul>Volt áá²á· state() Function ááᯠáá¯á¶ážááŒá®áž $users State ááŒá±áá¬áá¬ážáá«áááºá User Model áá²á·á¡áá°á¡áá®áá²á· áááºááŸáááá°áᬠUser Data ááœá± ááá·áºáá±ážáá¬ážáá«áááºá ááŒá®ážáá²á·á¡áá« $delete á¡ááœáẠAnonymous Function áá
áºáá¯áá±ážááá·áºáá±ážáá¬ážááŒá®áž áá±ážáá¬áá²á· $id áá²á·ááá¯ááºáá®áá²á· User ááᯠáá»ááºáá¬ážáá«áááºá áá»ááºááŒá®ážáá²á·á¡áá« $this->users áá²á· State ááᯠUpdate áá¯ááºáá±ážááá¯ááºáá«áááºá
áááºáááºáá±ážáá¬ážáá¬ážáá²á· Template ááá±á¬á· ááááºááŸá¯ááºááŸá¯ááºááŸááºááŸáẠááá¯ááºáá«áá°ážá $users State Data ááᯠLoop áá¯ááºááŒá®áž ááŒáá¬ážááá¯ááºáá¬áá«áá²á ááŒáá·áºáá±á¬ááºážá¡á±á¬áẠTailwind Class ááœá±áá¯á¶ážáá¬ážáá±ááá·áº á¡áááááá¯áá»áá¬á wire:key wire:navigate wire:click ááá¯áá²á· Attribute ááœá±áá«á
wire:key áá²á· ááá±á¬ááá¯áá±á¬á· React ááá¯á· Vue ááá¯á· áá±á·áá¬áá°ážáá°ááœá± ááááŒáá«áááá·áºáááºá Loop áá¯ááºáá¬ážáá²á· Item ááœá±ááŸá¬ Unique ááŒá
áºáá²á· Key Attribute ááŸáááŸáᬠáá±á¬ááºááá¯ááºáž á¡ááŒá±á¬ááºážá¡áá² ááŸááá²á·á¡áá« List áá
áºáá¯áá¯á¶ážááᯠá¡á
á¡áá¯á¶áž ááŒááºááŒá®áž Render áá¯ááºá
áá¬áááá¯áá² ááá¯áá²á·á¡ááá¯ááºážáá±ážáá² ááœá±ážááŒá®áž áá¯ááºááá¯á·áá
á±ááá¯á· ááŒá
áºáá«áááºá
wire:navigate áá²á·ááá±á¬ á¡áá»ááºážáá»á¯ááºááᯠá¡áá±á«áºááŸá¬ ááŒá±á¬áá²á·ááŒá®ážáá«ááŒá®á wire:click ááá±á¬á· Button ááᯠááŸáááºáá²á·á¡áá»áááºááŸá¬ Run á
á±áá»ááºáá²á· Function ááᯠáá±ážááá¬áá«á áá«ááŒá±á¬áá·áº delete ááᯠáá±ážáá¬ážáá«áááºá áá¯á¶ááŸááºá¡á¬ážááŒáá·áº Button Click ááŸá¬ PHP áá¯ááºááœá± Run ááá¯á·áááá«áá°ážá Client-side, Server-side áá°á០ááá°áá¬ááá¯ážá Run áá»ááºááẠJavaScript áá¯ááºááœá±áá² Run ááá¯á·áááŸá¬áá«á Livewire á wire:click áá²á· Button Click ááŸá¬ PHP áá¯ááºááœá± Run ááá¯á·áá¡á±á¬áẠáá¯ááºáá±ážááá¯ááºáá¬áá«á
áááºáááºááŒá®áž á
áááºá
ááºážáááºááá¯ááºááá¯á·á¡ááœáẠroutes/web.php ááŸá¬ á¡áá¯ááᯠVolt ááᯠImport áá¯ááºááŒá®áž Route áá
áºáá»áá¯á· áá±ážááá·áºáá±ážááá¯ááºáá«á
use Livewire\Volt\Volt;
Volt::route('/users', 'users.user-list');
Volt::route('/users/view/{id}','users.user-detail');
Volt::route('/users/add', 'users.user-add');áá¯á¶ááŸááºá¡á¬ážááŒáá·áº Route Facade ááá¯áá¯á¶ážááŒá®áž Controller ááœá± View ááœá±ááᯠááŸááºážáá»áááºááŸá¬áá«á á¡áá¯áá±á¬á· Route ááá¯ááá¯á¶ážáá±á¬á·áá² Volt ááᯠááŒá±á¬ááºážáá¯á¶ážáá¬ážáá«áááºá Volt áá²á· route() ááŸá¬ ááŸá±á·á URI ááááºá
á¬áá²á· áá±á¬ááºá áá±á¬áºááŒáááá·áº Component ááᯠáá±ážááá¯ááºáá¬áá«á áá«ááŒá±á¬áá·áº /users Route ááᯠááœá¬ážááá¯ááºááẠusers/user-list Component ááᯠLayout áá²ááŸá¬ ááá·áºááŒá®áž Full-page Component á¡áá±áá²á· ááŒáá±ážáá¬ááŸá¬ ááŒá
áºáá«áááºá
áá»ááºáá²á· user-detail ááœá± user-add ááœá± áááºááá±ážááẠáá®á¡ááá·áºááŸá¬ááẠá
áááºá
ááºážáááºááŒáá·áºááá¯á·ááá«ááŒá®á
localhost:8000/users ááá¯ááœá¬ážááŒáá·áºááá¯ááºááẠá¡áá¯ááá¯ááááºááᯠáááŸáááŸá¬ááŒá
áºáá«áááºá Database Table áá²á Users ááœá±ááᯠusers/user-list Component áá²á· áá¬ááŒáá±ážáá±ááŒááºážáá² ááŒá
áºáá«áááºá
Delete áá¯ááºáá±á¬ááºáá»ááºááᯠáá
áºáá«áá² á
ááºážááŒáá·áºááá¯á·ááá«áááºá React ááá¯á·áá¬ááá¯á·ááŸá¬ State ááŒá±á¬ááºážááẠComponent ááá¯ááºááŒá±á¬ááºážáá±ážááá¯ááºáááá¯áá² áááºááŸááá±ážáá¬ážáá²á· delete Function á¡á Server-side áááºááŸá¬ Data áá»ááºááœá¬ážáá¯á¶áá¬áá State ááá¯áááºáž áá
áºáá«áá² Update áá¯ááºáá±ážáá¬ážáá²á·á¡ááœáẠClient-side List ááááºáž Page Refresh ááœá±áá¬ááœá± áááá¯áá² á¡ááá¯á¡áá»áŸá±á¬áẠUpdate ááŒá
áºááœá¬ážááŸá¬ ááŒá
áºáá«áááºá
áááºáááºááŒá®áž resources/views/livewire/users/user-detail.blade.php ááŸá¬ á¡áá¯ááá¯áá±ážáá±ážáá«á
<?php
use App\Models\User;
use function Livewire\Volt\state;
use function Livewire\Volt\mount;
state([ 'user' => null ]);
mount(function($id) {
$this->user = User::find($id);
}); ?>
<div class="border rounded p-4">
<h3 class="text-2xl mb-2">{{ $user->name }}</h3>
<p class="text-gray-600 mb-2">{{ $user->email }}</p>
<div class="mb-4">
<small class="text-gray-400">
{{ $user->created_at->diffForHumans() }}
</small>
</div>
<a href="/users" class="text-blue-500"
wire:navigate>« Go back</a>
</div>ááááá¯á¶áž $user State ááŒá±áá¬áá¬ážáá«áááºá ááŒá®ážáá²á·á¡áá« mount() Function ááᯠáá¯á¶ážááŒá®áž User Model áá²á· á¡áá°á¡áá®áá²á· User Data ááœá±áá¯ááºáá°áá¬ážáá«áááºá ááá¬áá²á· Data ááœá±ááᯠ$user State áá²ááŸá¬ ááá·áºáá±ážááá¯ááºáá¬áá«á
áá®áá±áá¬ááŸá¬ mount() Function ááᯠá¡áá¯á¶ážááŒá¯ááá¬á $id URL Parameter ááᯠááá¯áá»ááºááá¯á·áá«á Route ááŸá¬ /users/view/{id} ááá¯á· áááºááŸááºáá¬ážáá²á·á¡ááœáẠController Method ááœá±ááŸá¬ $id ááᯠáá°áá¯á¶ážááá¯á·ááááá¯áá² mount() ááŸá¬áááºáž áá°áá¯á¶ážááá¯á·ááá«áááºá mount() Function áᬠLivewire áá²á· Lifecycle Function ááœá±áá²ááá
áºáá¯ááŒá
áºááŒá®áž Component ááᯠRender áá¯ááºáá²á·á¡áá»áááºááá¯ááºážááŸá¬ á¡ááá¯á¡áá»áŸá±á¬áẠá¡áá¯ááºáá¯ááºáá²á· Function áá
áºáá¯áá«á
áááºáá±ážáá¬ážáá²á· Template áá¯ááºááŸá¬ wire:navigate áá²á· Link áá
áºáá¯áá«áá±ááá·áº á¡ááŒá±áá¶á¡á¬ážááŒáá·áº $user Data ááœá±ááᯠBox áá±ážáá
áºáá¯áá²á· ááŒááá¯ááºáá¬áá«áá²á
áá®áá±á¬ááºááá¯ááẠUser View áááºážáááœá¬ážáá«ááŒá®á List áá²á User áá
áºáá±á¬ááºááᯠááŸáááºááá¯ááºááẠPage Reload áááá¯á¡ááºáá² user-detail Component ááᯠááŒáá±ážááœá¬ážááŸá¬ááŒá
áºáááá¯á user-detail á Go Back Link ááᯠááŸáááºááá¯ááºáááºáááºáž Page Reload áááá¯áá² user-list ááᯠááŒááºááŒáá±ážááœá¬ážáá«áááá·áºáááºá
User ááœá±á¡áá
áºáááºááá·áºááá¯á·á¡ááœáẠForm Template áá
áºáá¯ááá¯áá«áááºá resources/views/livewire/users/user-add.blade.php ááŸá¬ á¡áá¯ááá¯áá±ážáá±ážáá«á
<?php
use App\Models\User;
use function Livewire\Volt\state;
use function Livewire\Volt\rules;
state([ 'name' => '', 'email' => '' ]);
rules([
'name' => ['required'],
'email' => ['required', 'email'],
]);
$save = function () {
$this->validate();
User::factory()->create([
"name" => $this->name,
"email" => $this->email,
]);
$this->redirect("/users", navigate: true);
}; ?>
<form wire:submit="save">
<input type="text" wire:model="name"
class="w-full border rounded p-3"
placeholder="Name">
<div class="text-red-600 text-sm mb-3">
@error('name') {{ $message }} @enderror
</div>
<input type="text" wire:model="email"
class="w-full border rounded p-3"
placeholder="Email">
<div class="text-red-600 text-sm mb-3">
@error('email') {{ $message }} @enderror
</div>
<button type="submit"
class="rounded bg-blue-700 text-white py-2 px-6">
Add User
</button>
</form>$name áá²á· $email State ááŸá
áºáᯠááŒá±áá¬áá¬ážáá«áááºá ááŒá®ážáá²á·á¡áá« rules() Function áá²á· á¡áá°á¡áá®áá²á· Validation Rules ááœá±áááºááŸááºáá¬ážáá«áááºá áá«ááŒá±á¬áá·áº $save Function ááŸá¬ $this->validate() ááá¯áá±á«áºááá¯ááºáá²á·á¡áá« State Data ááœá±áᬠáááºááŸááºáá¬ážáá²á· Rule áá»á¬ážá¡ááá¯ááºáž ááá¯ááºáá®ááŸá¯ááŸááááŸá Validation á
á
áºááŒá®áž Fails ááŒá
áºáá²á·ááẠáááºááá¯ááºáá² Validation Error ááœá±áá²á· Component ááᯠááŒááºááŒáá±ážááŸá¬ ááŒá
áºáá«áááºá
á¡á±á¬ááºá Template áá¯ááºáá²ááŸá¬ Blade @error Directive áá²á· Validation Error ááŸááááŸáá
á
áºááŒá®áž ááŸáááẠáá
áºáá«áá² ááŒááá¯ááºážáá¬ážáá«áááºá State Data ááœá±ááŒá
áºááŒáá²á· name ááá¯á· email ááá¯á·ááᯠáááºáááºáá±ážáá¬ážáá¬ážáá²á· Template áá²á· Input ááœá±ááŸá¬ wire:model áá²á· áá»áááºáá±ážáá¬ážáá¬ááá¯áááºáž áááááŒá¯ááŒáá·áºáá«á
Validation Pass ááŒá
áºáá²á·áááºáá±á¬á· User Model áá²á· Factory á¡áá°á¡áá®áá²á· User á¡áá
ẠCreate áá¯ááºááá¯ááºáá«áááºá Factory ááá¯áá¯á¶ážááá¬á User á¡ááœáẠPassword á¡áá«á¡ááẠáá
áºááŒá¬ážááá¯á¡ááºáá¬ááœá± ááá·áºááá±ážááá¯áá²á·á¡ááœáẠáá±ážáá»ááºáá²á· Name áá²á· Email ááá¯áá² áá±ážááŒá®áž áá»áẠValue ááœá±ááᯠFactory ááŸá¬ áááºááŸááºáá¬ážáá²á·á¡ááá¯ááºáž ááá·áºáá±ážááá¯ááºá
á±áá»ááºááá¯á·áá«á
áá±á¬ááºáá¯á¶ážááŸá¬ áá¯ááºá
áá¬ááŸááá¬ááœá±áá¯ááºááŒá®ážááẠ$this->redirect() áá²á· /users Route ááᯠááŒááºááœá¬ážááá¯ááºážáá²á·á¡áá« navigate: true Parameter áááºá·áá±ážáá¬ážáá«áááºá áá«ááŒá±á¬áá·áº áá¯á¶ážá
á¶á¡ááá¯ááºáž Livewire á Page Reload ááŒááºááá¯ááºáá±á¬á·áá² /users Route áá²á· áá»áááºáá¬ážáá²á· user-list Component ááᯠááŒááºááŒáá±ážááœá¬ážááŸá¬áá² ááŒá
áºáá«áááºá
áááºáá±ážáá¬ážáá²á· Template ááá±á¬á· name áá²á· email ááᯠInput ááŸá
áºáá¯áá²á· áá±á¬ááºážáá¬ážáá²á· HTML Form áá
áºáá¯áá¬ááŒá
áºáá«áááºá á¡áá±ážá¡ááŒá®ážáá¯á¶áž áá°ážááŒá¬ážáá»ááºááá±á¬á· <form> ááŸá¬ wire:submit áá²á· save ááᯠáá±á«áºáá¬ážááŒááºážááŒá
áºáá«áááºá áá«ááŒá±á¬áá·áº áá® Form ááŸá¬ Submit ááŸáááºááá¯ááºááẠPage Reload áá²á· Server Submit ááá¯ááºáá±á¬á·áá² $save Function ááᯠáá±á«áºáá±ážááœá¬ážááŸá¬ááŒá
áºáá«áááºá
áá±á¬ááºáááºá¡áá±ážááŒá®ážáá¬ááá±á¬á· Input ááœá±ááŸá¬áá«áá²á· wire:model ááŒá
áºáá«áááºá ááá¯áááºážááá±á¬á· Input ááᯠState áá²á· áá»áááºáá±ážááá¯ááºáá¬áá«á áá«ááŒá±á¬áá·áº áá® Input ááœá±ááŸá¬ áá±ážááŒáá·áºááá¯ááºááá»áŸ áááºááá¯ááºáᬠname áá²á· email State ááœá±áá²ááᯠá¡ááá¯á¡áá»áŸá±á¬áẠáá±á¬ááºááœá¬ážááŸá¬áá«á
User á¡áá áºááœá± ááá·áºááŒá®áž á ááºážááŒáá·áºááá¯á·ááá«ááŒá®á
áá®áá±á¬ááºááá¯ááẠLivewire Functional Component ááœá±áá²á· á¡áá¯ááºáá¯ááºáá¯á¶ááᯠáá±á¬áºáá±á¬áºáá±áž ááá±á¬áá±á«ááºááœá¬ážáá±á¬ááºááŒá®ááá¯á· áá°ááá«áááºá á¡áá¬ážáá°áá¯ááºáá±á¬ááºáá»ááºáá»áá¯ážáááá¯á·á¡ááœáẠJavaScript Framework áá áºáá¯áá¯ááá¯áá¯á¶ážááŒá®áž áá±ážáááºáááºáž áááá¯ááºáá±ááá·áºá áá®áááºážááŒá±á¬áá·áº Back-end áááºááẠFront-end áááºááẠááœá²ááŒá®áž Maintain áá¯ááºá áá¬áááá¯áá±á¬á·áááᯠAPI Call ááœá±ááá¯áááºáž Management áá¯ááºá áá¬áááá¯áá±á¬á·áá«áá°ážá áá áºáá»áá¯á·á áááºáááºá á® ááœá²áá±ážááá¬ááᯠááŸá áºáááºááá¯ááºáá±ááá·áºá á¡áá¯ááᯠLanguage áá áºáá»áá¯ážáá²áá²á· Laravel Framework áá²ááá± ááœááºá áá¬áááá¯áá² á á®áá¶áá±ážáá¬ážááá¯ááºááŒááºážáá¬áááºáž á¡áá¯á¶ážáááºáá²á· áááºážááá¬áá áºáá¯áá² ááŒá áºáá«áááºá
áááá¯á¶ážáá»á¯ááºá¡áá±áá²á· áááááŒá¯á á±áá»ááºáá²á· á¡áá»ááºááá±á¬á· áááºááŸáááá°áá¬áá¯ááºááŸá¬ M-V-C áá²á· C (áá±á«áº) Controller áá¯á¶ážá ááŒá¯ááºááœá¬ážááŒááºážáá«áá²á Controller áá¯ááºááœá± áá±ážááá¯ážáá±ážá ááºá¡ááá¯ááºáž áááºáá±ážááá¯á·áááºáž ááá«áááºá API áá¯ááºááœá±áá«áááºááᯠáááŒá áºááá± ááá·áºáá±ážáááŸá¬áá«á áá«áá±ááá·áº M-V-C áᬠá¡á ááºá¡áᬠServer-side Request/Response Cycle ááœá±áá±á«áºá¡ááŒá±áá¶áá²á· App áá²á·áᬠá¡áá°ážááá·áºáá¬ááŒá áºááá¯á·á á¡áá¯ááᯠClient-side áááºááŸá¬ á¡áááá¡áá¯ááºáá¯ááºáá²á· App áá»áá¯ážááŸá¬áá±á¬á· Controller ááá¯á¶ážáá±á¬á·áá² Component áá»ááºáž ááá¯ááºááá¯ááºáá»áááºááẠáá±ážáá¬ážááœá¬ážááá¯ááºáá¬áá² ááŒá áºáá«áááºá
Well learned and thanks^^