Laravel is a PHP web framework offering a comprehensive set of tools and resources useful for developing high-quality web applications. It follows the Model-View-Controller (MVC) architectural design pattern.
It is packed with built-in features and a wide variety of compatible packages and extensions, making it one of the most popular PHP web frameworks.
Here are some key advantages of using the Laravel framework.
You will have to follow the steps given below for installing Laravel onto your system −
Step 1
Visit the following URL and download composer to install it on your system.
https://getcomposer.org/download/
Step 2
After the Composer is installed, check the installation by typing the Composer command in the command prompt
STEP 3
composer global require laravel/installer
STEP 4
Create a new laravel project
laravel new example-app
STEP 5
After the project has been created, start Laravel's local development server using the Laravel's Artisan CLI serve command:
php artisan serve
https://learninglaravel.net/cheatsheet/
To get Livewire working on a page, you need to include the Livewire styles and scripts on each page that need them. Usually, these would go into your base template. You’d do that using @livewireStyles and @livewireScripts:
//app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
@livewireStyles
</head>
<body>
@yield('content')
@livewireScripts
</body>
</html>
You’d create a Laravel Blade component by running the following command:
php artisan make:component Alert
This will create a new Alert.php class file and place it in the App\Views\Components folder. Then, a corresponding view template is created and placed in resources/views/components. To display the component, you can then use this Blade syntax: <x-alert/>.
To create a Livewire component, run the following command:
php artisan make:livewire Alert
The command will also create two new files: app\Http\Livewire\Alert.php and a view template resources/views/livewire/alert.php.
As you can see, the commands look quite similar. The only major difference is that with Livewire components, there’s a real-time sync (no page refresh required) between the component class and its view template.
Public properties on your component classes are made available to the component template view. It doesn’t stop there — the value of the property is synchronized in real time to the view, such that when you update the value of the property in the view, it is automatically updated in the component class.
//App\Http\Livewire\Alert.php
<?php
class Alert extends Component{
public $message = "Our alert message";
}
// livewire/alert.blade.php
<div>
<input wire:model="message">
<br/>
{{ $message }}
</div>
Livewire makes data validation seamless. To validate data coming from a form template view, you’d write a $rules property that contains your validation rules, just as you would in Laravel. Thereafter, you call the $this→validate() in the method doing the validation.
Let’s look at a form for creating a blog post:
class CreatePost extends Component
{
public $title, $body;
public $success;
protected $rules = [
'title' => 'required|string|max:220',
'body' => 'required'
];
public function render()
{
return view('livewire.create-post')
->extends('layouts.app')
->section('content');
}
public function create(){
$this->validate();
Post::create([
'title' => $this->title,
'slug' => Str::slug($this->title),
'body' => $this->body,
'author_id' => auth()->id()
]);
$this->success = true;
}
}
// livewire/create-post
<div class="container">
@if ($success)
<div class="alert alert-success">
Post has been created successfully
</div>
@endif
<form wire:submit.prevent="create">
<div class="form-group">
<label for="Post title">Post title</label>
<input wire:model="title" type="text" name="title" id="title" class="form-control" placeholder="Title of the post">
@error('title') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="Post body">Post Body</label>
<textarea name="body" id="body" placeholder="Body of post here..." wire:model="body" class="form-control"></textarea>
@error('body') <span class="error">{{ $message }}</span> @enderror
</div>
<div>
<button class="btn btn-primary" type="submit">Publish</button>
</div>
</form>
</div>
In the form code above, when the user submits the post, and it doesn’t pass the validation, the validation errors are displayed, all without a page refresh.
These are directives added to elements within Livewire component templates.
<button wire:click="save">...</button>
Directive |
Description |
wire:key="foo" |
Acts as a reference point for Livewire's DOM diffing system. Useful for adding/removing elements, and keeping track of lists. |
wire:click="foo" |
Listens for a "click" event, and fires the "foo" method in the component. |
wire:click.prefetch="foo" |
Listens for a "mouseenter" event, and "prefetches" the result of the "foo" method in the component. Then, if it is clicked, will swap in the "prefetched" result (without an extra request), if it's not clicked, will throw away the cached result. |
wire:keydown.enter="foo" |
Listens for a keydown event on the enter key, which fires the "foo" method in the component. |
wire:foo="bar" |
Listens for a browser event called "foo". (You can listen for any browser DOM event - not just those fired by Livewire). |
wire:model="foo" |
Assuming $foo is a public property on the component class, every time an input element with this directive is updated, the property synchronizes with its value. |
wire:model.debounce.100ms="foo" |
Debounces the input events emitted by the element every 100 milliseconds. |
wire:model.lazy="foo" |
Lazily syncs the input with its corresponding component property at rest. |
wire:model.defer="foo" |
Defers syncing the input with the Livewire property until an "action" is performed. This saves drastically on server roundtrips. |
wire:poll.500ms="foo" |
Runs the "foo" method on the component class every 500 milliseconds. |
wire:init="foo" |
Runs the "foo" method on the component immediately after it renders on the page. |
wire:loading |
Hides the element by default, and makes it visible while network requests are in transit. |
wire:loading.class="foo" |
Adds the foo class to the element while network requests are in transit. |
wire:loading.class.remove="foo" |
Removes the foo class while network requests are in transit. |
wire:loading.attr="disabled" |
Adds the disabled="true" attribute while network requests are in transit. |
wire:dirty |
Hides the element by default, and makes it visible while the element's state is "dirty" (different from what exists on the backend). |
wire:dirty.class="foo" |
Adds the foo class to the element while it's dirty. |
wire:dirty.class.remove="foo" |
Removes the foo class while the element is dirty. |
wire:dirty.attr="disabled" |
Adds the disabled="true" attribute while the element's dirty. |
wire:target="foo" |
Scopes wire:loading and wire:dirty functionality to a specific action. |
wire:ignore |
Instructs Livewire to not update the element or its children when updating the DOM from a server request. Useful when using third-party JavaScript libraries within Livewire components. |
wire:ignore.self |
The "self" modifier restricts updates to the element itself, but allows modifications to its children. |
These are the artisan commands Livewire makes available to make frequent tasks like creating a component easier.
Name |
Params |
artisan make:livewire |
Create a new component |
artisan livewire:make |
Create a new component |
artisan livewire:copy |
Copy a component |
artisan livewire:move |
Move a component |
artisan livewire:delete |
Delete a component |
artisan livewire:touch |
Alias for livewire:make |
artisan livewire:cp |
Alias for livewire:copy |
artisan livewire:mv |
Alias for livewire:move |
artisan livewire:rm |
Alias for livewire:delete |
artisan livewire:stubs |
Publish Livewire stubs (used in the above commands) for local modification |
artisan livewire:publish |
Publish Livewire's config file to your project (config/livewire.php) |
artisan livewire:publish --assets |
Publish Livewire's config file AND its frontend assets to your project |
artisan livewire:configure-s3-upload-cleanup |
Configure your cloud disk driver's S3 bucket to clear temporary uploads after 24 hours |
Livewire bridges the gap between backend and frontend. You get the benefit of real-time interactivity without having to write a lot of JavaScript by yourself.
Github Link : https://github.com/fullstacksagarofficial/laravel-livewire-admin
There are 0 Comments on this post