Construir o aplicativo Laravel 8 Livewire CRUD usando JetStream

 


Tutorial do Laravel 8 Livewire CRUD 

Este extenso tutorial explicará como criar facilmente uma operação CRUD essencial no aplicativo Laravel 8 usando os pacotes Livewire e Jetstream. Da mesma forma, também compartilharemos como adicionar a validação do lado do servidor no aplicativo crud e armazenar os dados no banco de dados SQL 2019.

CRUD significa Criar, Ler, Atualizar e Excluir. Os pacotes Laravel 8 Livewire fornecem as melhores e fáceis maneiras de criar um aplicativo Laravel 8 CRUD.

Ao longo deste tutorial, mostraremos como criar e integrar operações CRUD com a ajuda do Jetstream e Laravel e do Livewire. Então, este tutorial crud laravel livewire vai liberar melhores oportunidades para desenvolvedores novatos.

Usamos o banco de dados SQL 2019 para lidar com operações CRUD e mostrar como adicionar, ler, atualizar e excluir dados do servidor remoto usando a estrutura laravel. Vamos começar e compreender profundamente a funcionalidade do laravel livewire crud.

Operações Laravel 8 Livewire CRUD usando Jetstream Exemplo

  • Passo 1: Configure o Projeto Laravel
  • Etapa 2: adicionar detalhes do banco de dados em ENV
  • Etapa 3: Criar model e migration
  • Etapa 4: Instale Livewire e Jetstream
  • Etapa 5: criar componentes CRUD
  • Etapa 6: Componente Frame Up CRUD
  • Etapa 7: Criar Rotas
  • Etapa 8: preparar a visualização da BLADE
  • Etapa 9: iniciar o servidor de desenvolvimento

Configurar Projeto Laravel

Inicie o projeto instalando um novo aplicativo laravel, então vá para o terminal, digite o comando e crie um novo aplicativo laravel. 


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

Em seguida, vá para a pasta do projeto:

cd arms_crud

Adicionar detalhes do banco de dados em ENV

Em seguida, você deve conectar o aplicativo laravel ao banco de dados, portanto, abra o arquivo de configuração .env e adicione as credenciais do banco de dados conforme sugerido abaixo.

DB_CONNECTION=sqlsrv
DB_HOST=localhost\SQLEXPRESS
DB_PORT=
DB_DATABASE=crud
DB_USERNAME=
DB_PASSWORD=
Bash

Criar model e migration

Na tela do terminal, digite o comando recomendado e execute-o para gerar arquivos de model e migration.

php artisan make:model Student -m
Bash

Você precisa adicionar o array $fillable e adicionar os valores da tabela, como nome, e-mail e celular no arquivo app / Models / Student.php .


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    use HasFactory;
    
    protected $fillable = [
        'name', 
        'email', 
        'mobile'
    ];    
}                 

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    use HasFactory;
    
    protected $fillable = [
        'name', 
        'email', 
        'mobile'
    ];    
}
PHP

Posteriormente, precisamos configurar a tabela de migração para os alunos, portanto, adicione as propriedades da tabela no arquivo database / migrations / create_students_table.php .

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('name', 100);
            $table->string('email');
            $table->string('mobile');            
            $table->timestamps();
           });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}
PHP

Instale Livewire e Jetstream

Agora, você precisa executar o comando sugerido para instalar os pacotes jetstream e livewire no aplicativo laravel.

composer require laravel/jetstream
Bash
php artisan jetstream:install livewire
Bash

Além disso, você deve compilar os ativos, de acordo com isso, use os dois comandos npm simultaneamente para concluir a tarefa de compilação de build.

npm install && npm run dev
Bash

Vamos executar a migration usando o comando php artisan sugerido.

php artisan migrate
Bash

Criar componentes Livewire CRUD

Esta etapa informa como gerar o componente crud Livewire, então digite o comando no terminal e execute o comando.

php artisan make:livewire crud
Bash

A execução do comando acima gerou dois arquivos, um em Http e outro nos diretórios de recursos.

CLASS: app/Http/Livewire/Crud.php

VIEW:  resources/views/livewire/crud.blade.php
Bash

Componente Frame Up CRUD

Em seguida, você deve definir os métodos crud dentro do arquivo do componente livewire crud; portanto, abra e atualize o código fornecido no arquivo app / Http / Livewire / Crud.php .

<?php

namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Student;


class Crud extends Component
{
    public $students, $name, $email, $mobile, $student_id;
    public $isModalOpen = 0;

    public function render()
    {
        $this->students = Student::all();
        return view('livewire.crud');
    }

    public function create()
    {
        $this->resetCreateForm();
        $this->openModalPopover();
    }

    public function openModalPopover()
    {
        $this->isModalOpen = true;
    }

    public function closeModalPopover()
    {
        $this->isModalOpen = false;
    }

    private function resetCreateForm(){
        $this->name = '';
        $this->email = '';
        $this->mobile = '';
    }
    
    public function store()
    {
        $this->validate([
            'name' => 'required',
            'email' => 'required',
            'mobile' => 'required',
        ]);
    
        Student::updateOrCreate(['id' => $this->student_id], [
            'name' => $this->name,
            'email' => $this->email,
            'mobile' => $this->mobile,
        ]);

        session()->flash('message', $this->student_id ? 'Student updated.' : 'Student created.');

        $this->closeModalPopover();
        $this->resetCreateForm();
    }

    public function edit($id)
    {
        $student = Student::findOrFail($id);
        $this->id = $id;
        $this->name = $student->name;
        $this->email = $student->email;
        $this->mobile = $student->mobile;
    
        $this->openModalPopover();
    }
    
    public function delete($id)
    {
        Student::find($id)->delete();
        session()->flash('message', 'Studen deleted.');
    }
}
PHP

Criar Rotas

Para habilitar a navegação para o aplicativo livewire crud, defina as rotas. Importe a classe Crud e defina o método de rota, então abra o arquivo resources / web.php .

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Crud;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('students', Crud::class);
PHP

Prepare a visualização da blade

Por último, temos que criar as visualizações blade; nosso layout de operações cruas é simples. Inclui arquivos de visualização de duas blades. Em uma visualização, mostraremos os dados em formas tabulares onde os usuários podem realizar ações para atualizar ou editar os dados dos alunos. Ao mesmo tempo, outra visão contém o pop-up modal, que cria e atualiza os dados.

Abra e insira o código no arquivo resources / views / livewire / crud.blade.php .

<x-slot name="header">
    <h2 class="text-center">Laravel 8 Livewire CRUD Demo</h2>
</x-slot>
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
            @if (session()->has('message'))
            <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3"
                role="alert">
                <div class="flex">
                    <div>
                        <p class="text-sm">{{ session('message') }}</p>
                    </div>
                </div>
            </div>
            @endif
            <button wire:click="create()"
                class="bg-green-700 text-white font-bold py-2 px-4 rounded my-3">Create Student</button>
            @if($isModalOpen)
            @include('livewire.create')
            @endif
            <table class="table-fixed w-full">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-2 w-20">No.</th>
                        <th class="px-4 py-2">Name</th>
                        <th class="px-4 py-2">Email</th>
                        <th class="px-4 py-2">Mobile</th>
                        <th class="px-4 py-2">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($students as $student)
                    <tr>
                        <td class="border px-4 py-2">{{ $student->id }}</td>
                        <td class="border px-4 py-2">{{ $student->name }}</td>
                        <td class="border px-4 py-2">{{ $student->email}}</td>
                        <td class="border px-4 py-2">{{ $student->mobile}}</td>
                        <td class="border px-4 py-2">
                            <button wire:click="edit({{ $student->id }})"
                                class="bg-blue-500  text-white font-bold py-2 px-4 rounded">Edit</button>
                            <button wire:click="delete({{ $student->id }})"
                                class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
PHP

Por favor, crie um novo arquivo com o nome de arquivo create.blade.php dentro de resources / views / livewire / e então adicione o código abaixo no arquivo resources / views / livewire / create.blade.php .

<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
            role="dialog" aria-modal="true" aria-labelledby="modal-headline">
            <form>
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="">
                        <div class="mb-4">
                            <label for="exampleFormControlInput1"
                                class="block text-gray-700 text-sm font-bold mb-2">Name</label>
                            <input type="text"
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput1" placeholder="Enter Name" wire:model="name">
                            @error('name') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput2"
                                class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
                            <textarea
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput2" wire:model="email"
                                placeholder="Enter Email"></textarea>
                            @error('email') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput2"
                                class="block text-gray-700 text-sm font-bold mb-2">Mobile:</label>
                            <textarea
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput2" wire:model="mobile"
                                placeholder="Enter Mobile"></textarea>
                            @error('mobile') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>                        
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                        <button wire:click.prevent="store()" type="button"
                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-bold text-white shadow-sm hover:bg-red-700 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Store
                        </button>
                    </span>
                    <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
                        <button wire:click="closeModalPopover()" type="button"
                            class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-bold text-gray-700 shadow-sm hover:text-gray-700 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Close
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>
PHP

Iniciar servidor de desenvolvimento

Quase concluímos o desenvolvimento do aplicativo bruto e agora só faltamos verificar como ele funciona. Portanto, use o comando php artisan junto com a tag serve para chamar o servidor de desenvolvimento laravel.

php artisan serve
Bash

Tela inicia da aplicação:



Tela de Registro de autenticação do usuário:



Direcionamento para tela home após autenticação do usuário.

Apresentando a sessão de usuário no menu:




Eventualmente, você pode testar o aplicativo usando o url fornecido abaixo na barra de endereços do navegador após a autenticação de usuário.

http://127.0.0.1:8000/students
Bash


Conclusão

Concluímos o tutorial laravel 8 Jetstream; neste tutorial, descrevemos a criação de operações crud usando o pacote livewire. Também entendemos como lidar com a operação crud em conjunto com o banco de dados SQL 2019. Laravel Livewire é uma biblioteca poderosa que facilita a vida dos desenvolvedores quando se trata de criar interfaces modernas e dinâmicas usando o Laravel Blade. Você pode usar esta stack para seu próximo projeto dinâmico e interativo.

Assinar: Postagens (Atom)

Seguidores

Views