Це гостьовий пост від Bacancy
Tired of creating boring and tiring Interfaces using traditional methods? Bring in all your attention here as we come up with a tech tutorial on executing the Операції CRUD за допомогою Laravel Livewire. It is the simple things that matter; these steps to create, update, and delete records with the Livewire package make it a piece of cake to create Interfaces.
Знайомство з Laravel Livewire
Перш ніж ми почнемо з підручника Laravel Livewire CRUD, давайте розберемося з базовим уявленням про Livewire, а також про те, що і як він використовується.
Що таке Livewire?
Laravel Livewire дозволяє створювати інтерфейси зі зручністю Laravel. Livewire — це фреймворк із повним стеком, який спрощує складність, яку створюють Vue або React. Перша версія livewire була випущена в лютому 2020 року.
У цьому блозі ми збираємося представити CRUD operations using Laravel Livewire включаючи всі необхідні кроки, необхідні для впровадження livewire у Laravel 9. Перед цим ви можете захотіти оновити Laravel 8 до 9.
Передумови та налаштування для операцій Laravel Livewire CRUD
Composer, встановлений у вашій системі (просто натисніть команду «composer» у терміналі, щоб перевірити, чи правильно встановлено composer чи ні). Ви можете отримати Composer тут (https://getcomposer.org/), якщо у вас його ще немає.
Як виконувати операції CRUD за допомогою Laravel Livewire?
Тут ми зобразили, як можна реалізувати пакет Livewire з останньою версією Laravel (версія 9.19) і послідовно керувати функціями створення, оновлення та видалення за допомогою пакета.
1. Створіть програму laravel
Оскільки ви знайомі зі створенням програми laravel за допомогою терміналу, відкрийте термінал і виконайте наведену нижче команду, а потім створіть нову програму laravel у своєму каталозі.
composer create-project --prefer-dist laravel/laravel application_name_here
2. Налаштуйте відомості про базу даних
ВІДЧИНЕНО .env file which is located in the root folder, if .env is not existed then run the below command to make a copy from the .env-example
cp .env .env-example
Вам потрібно створити нову базу даних, ту саму назву бази даних, яку потрібно вказати в DB_DATABASE, а також замінити решту змінної .env на основі вашої системи
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
3. Тепер перейдіть до встановлення пакета Livewire
Перейдіть до кореневого каталогу програми та виконайте наведену нижче команду, щоб установити пакет livewire
composer require livewire/livewire
Нам потрібно включити стиль і сценарій livewire (на кожній сторінці, яка використовуватиме Livewire).
<head>
# other styles here
@livewireStyles
</head>
<body>
# other body parts here
@livewire(‘<component name here>’)/You can include component anywhere in your app
@livewireScripts
<script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/b810c1e775732c06a03141e7fcdf81a0.js" data-minify="1" defer></script></body>
4. Створіть міграцію та модель
We need to create migration for the "пости" table and also we will create a model for posts table.
Виконайте наведену нижче команду, щоб створити файл міграції. Після виконання наведеної нижче команди буде створено новий файл у папці бази даних/міграції
php artisan make:migration create_posts_table
Замініть наведений нижче код у create_posts_table файл міграції:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->text('description')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};Виконайте наведену нижче команду, щоб створити таблицю в базі даних із згаданими стовпцями під час міграції. Після виконання наведеної нижче команди ви зможете побачити нові “posts” таблиці в базі даних.
php artisan migrate
Тепер ми створимо модель посту за допомогою наведеної нижче команди. Виконавши наведені нижче дії, ви зможете переглянути новий файл моделі додаток/моделі папка:
php artisan make:model Post
ВІДЧИНЕНО app/Models/Post.php і замініть кодом нижче
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'description'
];
public $timestamps = true;
}5. Створіть компонент Post
Тепер ми збираємося створити компонент публікації за допомогою наведеної нижче команди
php artisan make:livewire post
Після виконання наведеної вище команди ви зможете побачити нову папку Livewire у папці app/Http і resources/views.
Результат наведеної вище команди:
COMPONENT CREATED
CLASS: app/Http/Livewire/Post.php
VIEW: resources/views/livewire/post.blade.phpТепер відкрийте app\Http\Livewire\Post.php і оновіть наступний код у цьому файлі:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post as Posts;
class Post extends Component
{
public $posts, $title, $description, $postId, $updatePost = false, $addPost = false;
/**
* delete action listener
*/
protected $listeners = [
'deletePostListner'=>'deletePost'
];
/**
* List of add/edit form rules
*/
protected $rules = [
'title' => 'required',
'description' => 'required'
];
/**
* Reseting all inputted fields
* @return void
*/
public function resetFields(){
$this->title = '';
$this->description = '';
}
/**
* render the post data
* @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
*/
public function render()
{
$this->posts = Posts::select('id', 'title', 'description')->get();
return view('livewire.post');
}
/**
* Open Add Post form
* @return void
*/
public function addPost()
{
$this->resetFields();
$this->addPost = true;
$this->updatePost = false;
}
/**
* store the user inputted post data in the posts table
* @return void
*/
public function storePost()
{
$this->validate();
try {
Posts::create([
'title' => $this->title,
'description' => $this->description
]);
session()->flash('success','Post Created Successfully!!');
$this->resetFields();
$this->addPost = false;
} catch (\Exception $ex) {
session()->flash('error','Something goes wrong!!');
}
}
/**
* show existing post data in edit post form
* @param mixed $id
* @return void
*/
public function editPost($id){
try {
$post = Posts::findOrFail($id);
if( !$post) {
session()->flash('error','Post not found');
} else {
$this->title = $post->title;
$this->description = $post->description;
$this->postId = $post->id;
$this->updatePost = true;
$this->addPost = false;
}
} catch (\Exception $ex) {
session()->flash('error','Something goes wrong!!');
}
}
/**
* update the post data
* @return void
*/
public function updatePost()
{
$this->validate();
try {
Posts::whereId($this->postId)->update([
'title' => $this->title,
'description' => $this->description
]);
session()->flash('success','Post Updated Successfully!!');
$this->resetFields();
$this->updatePost = false;
} catch (\Exception $ex) {
session()->flash('success','Something goes wrong!!');
}
}
/**
* Cancel Add/Edit form and redirect to post listing page
* @return void
*/
public function cancelPost()
{
$this->addPost = false;
$this->updatePost = false;
$this->resetFields();
}
/**
* delete specific post data from the posts table
* @param mixed $id
* @return void
*/
public function deletePost($id)
{
try{
Posts::find($id)->delete();
session()->flash('success',"Post Deleted Successfully!!");
}catch(\Exception $e){
session()->flash('error',"Something goes wrong!!");
}
}
}Тепер Створіть ресурси/перегляди/home.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>Livewire Crud</title>
<link data-minify="1" href="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/npm/[email protected]/dist/css/bootstrap.min.css?ver=1672663261" rel="stylesheet" crossorigin="anonymous">
@livewireStyles
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Livewire CRUD Blog</a>
</div>
</nav>
<div class="container">
<div class="row justify-content-center mt-3">
@livewire('post')
</div>
</div>
@livewireScripts
</body>
</html>
Тепер Відкрийте ресурси/перегляди/livewire/post.blade.php і оновіть наступний код у цьому файлі:
<div>
<div class="col-md-8 mb-2">
@if(session()->has('success'))
<div class="alert alert-success" role="alert">
{{ session()->get('success') }}
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger" role="alert">
{{ session()->get('error') }}
</div>
@endif
@if($addPost)
@include('livewire.create')
@endif
@if($updatePost)
@include('livewire.update')
@endif
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
@if(!$addPost)
<button wire:click="addPost()" class="btn btn-primary btn-sm float-right">Add New Post</button>
@endif
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@if (count($posts) > 0)
@foreach ($posts as $post)
<tr>
<td>
{{$post->title}}
</td>
<td>
{{$post->description}}
</td>
<td>
<button wire:click="editPost({{$post->id}})" class="btn btn-primary btn-sm">Edit</button>
<button onclick="deletePost({{$post->id}})" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
@endforeach
@else
<tr>
<td colspan="3" align="center">
No Posts Found.
</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Нам потрібно створити ще два файли під resources/views/livewire/ один – create.blade.php, а другий – update.blade.php.
Після створення create.blade.php ви можете замінити його вмістом нижче
<div class="card">
<div class="card-body">
<form>
<div class="form-group mb-3">
<label for="title">Title:</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title">
@error('title')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="form-group mb-3">
<label for="description">Description:</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button wire:click.prevent="storePost()" class="btn btn-success btn-block">Save</button>
<button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">Cancel</button>
</div>
</form>
</div>
</div>
Після створення update.blade.php ви можете замінити його вмістом нижче
<div class="card">
<div class="card-body">
<form>
<div class="form-group mb-3">
<label for="title">Title:</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title">
@error('title')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="form-group mb-3">
<label for="description">Description:</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button wire:click.prevent="updatePost()" class="btn btn-success btn-block">Update</button>
<button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">Cancel</button>
</div>
</form>
</div>
</div>
6. Визначте маршрути
Open routes/web.php і оновіть наступний код у цьому файлі:
Route::get('/',function(){
return view('home');
});7. Запустіть проект
Тепер настав час перевірити наведену вище демонстрацію у браузері, тож відкрийте свій термінал і виконайте наведену нижче команду з кореневого каталогу проекту.
php artisan serve
Результат наведеної вище команди буде таким:
Запуск сервера розробки Laravel: http://127.0.0.1:8000
Отже, тепер відкрийте свій браузер і перейдіть за згенерованим вище посиланням.
(Примітка: URL-адреса може залежати від доступного порту у вашій системі).
Ось посилання на репозиторій github https://github.com/kishanpatelbacancy/laravel-livewire-demo
Висновок
Коли ми підходимо до кінця цього блогу, поділіться своїми думками та відгуками про ці операції CRUD за допомогою підручника Laravel Livewire. Якщо ви розглядаєте Laravel Livewire для розробки інтерфейсів для ваших бізнес-ідей, найняти розробника Laravel від нас, оскільки ми маємо 1% найкращих технічних талантів у світі. Наші розробники вміють працювати з останніми оновленнями, функціями та реалізаціями Laravel, і ми дотримуємося процесів розробки Agile для вашого зручного успіху.
