Laravel Livewire is a powerful package that allows you to create dynamic user interfaces without writing any JavaScript code. With Laravel Livewire, you can build interactive web applications quickly and easily.
In this tutorial, we will build a CRUD application with Laravel 10 Livewire and Jetstream. Jetstream is a popular package that provides pre-built authentication scaffolding for Laravel applications. We will use it to authenticate users and secure our application.
Prerequisites To follow this tutorial, you will need:
Laravel 10.x installed on your system A basic understanding of Laravel and PHP Composer installed on your system Jetstream installed in your Laravel application Livewire installed in your Laravel application
Getting started Let’s start by creating a new Laravel project:
laravel new laravel-livewire-jetstream-crud
Next, we need to install Jetstream in our Laravel application. To do this, run the following command:
composer require laravel/jetstream
Once Jetstream is installed, run the following command to install it:
php artisan jetstream:install livewire
This command will install Jetstream with Livewire support in our Laravel application.
Creating the CRUD application Now that we have set up our Laravel application, let’s create a CRUD application with Livewire. We will create a simple application to manage books.
Creating the book model To get started, let’s create a model for our books:
php artisan make:model Book -m
This command will create a new model for our books and a migration file to create the books table in our database.
In the migration file, add the following code to create the books table:
public function up()
{
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('author');
$table->text('description');
$table->timestamps();
});
}
Next, run the following command to migrate the database:
php artisan migrate
Creating the Livewire component Now that we have created our model and database table, let’s create a Livewire component to manage our books.
Run the following command to create a new Livewire component:
php artisan make:livewire Books
This command will create a new Livewire component for our books.
In the app/Http/Livewire directory, you will find a new Books.php file. This file contains the Livewire component’s class definition.
Update the file with the following code:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Book;
class Books extends Component
{
public $books, $title, $author, $description, $book_id;
public $isOpen = 0;
public function render()
{
$this->books = Book::all();
return view('livewire.books');
}
public function create()
{
$this->resetInputFields();
$this->openModal();
}
public function openModal()
{
$this->isOpen = true;
}
public function closeModal()
{
$this->isOpen = false;
}
private function resetInputFields(){
$this->title = '';
$this->author = '';
$this->description = '';
$this->book_id = '';
}
public function store()
{
$this->validate([
'title' => 'required',
'author' => 'required',
'description' => 'required',
]);
Book::update
public function update()
{
$this->validate([
'title' => 'required',
'author' => 'required',
'description' => 'required',
]);
Book::find($this->book_id)->update([
'title' => $this->title,
'author' => $this->author,
'description' => $this->description
]);
session()->flash('message', 'Book updated successfully.');
$this->closeModal();
$this->resetInputFields();
}
public function delete($id)
{
Book::find($id)->delete();
session()->flash('message', 'Book deleted successfully.');
}
}
This Livewire component has several methods that correspond to different actions in our application:
- The render method loads all the books from the database and returns the view.
- The create method resets the input fields and opens the modal window to create a new book.
- The openModal method sets the isOpen property to true, which opens the modal window.
- The closeModal method sets the isOpen property to false, which closes the modal window.
- The resetInputFields method resets the input fields to their default values.
- The store method validates the input fields and saves the new book to the database.
- The update method updates an existing book in the database.
- The delete method deletes a book from the database.
Creating the Livewire view
Next, let’s create the view for our Livewire component.
Create a new file at resources/views/livewire/books.blade.php and add the following code:
<div>
@if(session()->has('message'))
<div class="alert alert-success">{{ session('message') }}</div>
@endif
<button wire:click="create()" class="btn btn-success mb-3">Create Book</button>
<table class="table table-bordered">
<tr>
<th>No.</th>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Action</th>
</tr>
@foreach($books as $key => $book)
<tr>
<td>{{ $key + 1 }}</td>
<td>{{ $book->title }}</td>
<td>{{ $book->author }}</td>
<td>{{ $book->description }}</td>
<td>
<button wire:click="edit({{ $book->id }})" class="btn btn-primary btn-sm">Edit</button>
<button wire:click="delete({{ $book->id }})" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
@endforeach
</table>
<x-jet-dialog-modal wire:model="isOpen">
<x-slot name="title">
{{ $book_id ? 'Edit Book' : 'Create Book' }}
</x-slot>
<x-slot name="content">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" wire:model="title">
@error('title') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mb-3">
<label for="author" class="form-label">Author</label>
<input type="text" class="form-control" id="author" wire:model="author">
@error('author') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mb
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" wire:model="description"></textarea>
@error('description') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</x-slot>
<x-slot name="footer">
<button wire:click="closeModal()" class="btn btn-secondary">Close</button>
@if($book_id)
<button wire:click="update()" class="btn btn-primary">Update</button>
@else
<button wire:click="store()" class="btn btn-primary">Create</button>
@endif
</x-slot>
</x-jet-dialog-modal>
</div>
```
This view contains a button to create a new book, a table to display all the books, and a modal window for creating and editing books.
The @if directive checks if there is a message in the session, and if there is, it displays an alert message. This is used to show a success message after creating, updating, or deleting a book.
The button to create a new book is wired to the create method, which opens the modal window.
The table displays all the books and has buttons to edit and delete each book. These buttons are wired to the edit and delete methods, respectively.
The modal window is a Jetstream dialog modal component. The wire:model directive is used to bind the isOpen property to the modal’s open and close state. The modal’s title and content are dynamically set depending on whether we are creating a new book or editing an existing one. The modal’s footer contains buttons to close the modal and either create or update the book.
Registering the Livewire component Finally, let’s register our Livewire component with Laravel. Open the routes/web.php file and add the following code:
use App\Http\Livewire\Books;
Route::get('/', Books::class);
This code imports the Books Livewire component and registers it to the root route of our application.
Testing the Livewire CRUD with Jetstream example We can now test our Livewire CRUD with Jetstream example by running our application and navigating to the root URL. You should see a table of books and a button to create a new book.
Clicking the Create Book button should open the modal window. Enter the details of a new book and click the Create button. You should see a success message and the new book should be added to the table.
Clicking the Edit button for a book should open the modal window with the book’s details pre-filled. Make any changes to the book and click the Update button. You should see a success message and the updated book should be displayed in the table.
Clicking the Delete button for a book should delete the book from the database and display a success message.
Conclusion : Conclusion In this article, we created a Laravel 10 Livewire CRUD with Jetstream example. We used Livewire to build a dynamic user interface for creating, reading, updating, and deleting books, and Jetstream to handle the authentication and authorization of our application. We also used Bootstrap to style our user interface.
Livewire makes it easy to build dynamic user interfaces in Laravel without having to write any JavaScript code. Jetstream provides a solid foundation for building modern, secure, and scalable Laravel applications.
This article ideas has been taken from the following websites; which are following:
https://www.nicesnippets.com/blog/laravel-livewire-fullcalendar-integration-tutorial
Laravel 10 Livewire CRUD with Jetstream Example
Laravel Livewire Fullcalendar Integration Example
How to Integrate FullCalendar In Laravel with
https://gist.github.com/nowendwell/42f68ee513728732c0fca7c58764c3a5
https://www.itsolutionstuff.com/post/laravel-10-fullcalendar-ajax-tutorial-exampleexample.html
Leave a Reply