andriajah Tue Jun 2020 1 year ago

Contoh CRUD Laravel-Livewire | Laravel 7

Hari ini saya datang dengan tutorial baru tentang topik livewire laravel. Beberapa hari yang lalu saya membuat tutorial tentang topik cara kerja livewire laravel. Tetapi dalam hal ini saya akan menunjukkan kepada Anda konsep mendalam tentang livewire laravel.

Dalam tutorial baru ini saya akan membahas tentang contoh crud livewire laravel dari awal. Dalam tutorial contoh livewire laravel ini Anda akan belajar cara membuat operasi crud di laravel menggunakan livewire. Dalam tutorial livewire laravel ini Anda akan mempelajarinya dari langkah demi langkah.

Livewire adalah kerangka kerja full-stack untuk Laravel yang membuat membangun antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel. Ini adalah kerangka kerja frontend. Setelah mempelajarinya, Anda hanya akan mengatakan " Say hello to Livewire"

Saya akan melakukan tutorial crud livewire ini menggunakan versi laravel 7. Setelah menyelesaikan proyek ini Anda akan melihat bahwa itu akan bekerja seperti kerangka kerja javascript vue js atau javascript libraary react js. Menggunakan laravel livewire Anda dapat memasukkan, memperbarui, atau menghapus data tanpa penyegaran halaman. Betapa menakjubkannya itu. Bukan? Jadi mari kita mulai tutorial contoh livewire crud kami.

 

Jika Anda menghadapi kesalahan, silakan lihat dan periksa kode Anda.

Daftar Isi 

  • Unduh Aplikasi Laravel
  • Buat Route
  • Buat Model dan Migration
  • Instal Livewire
  • Buat Livewire Component dan View
  • Buat File Blade
  • Jalankan Proyek

Anda dapat memeriksa pratinjau proyek dari gambar di bawah ini. Coba lihat.

Langkah 1: Unduh Laravel 7

Dalam tutorial crud livewire laravel ini saya akan menjelaskannya dari langkah demi langkah. Jadi unduh aplikasi laravel terbaru dengan perintah berikut.

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

 

Langkah 2: Buat Route

Sekarang kita perlu membuat route kita. Jadi rekatkan kode di bawah ini dalam file web.php.

route/web.php

Route::view('contacts', 'users.contacts');
Di sini kami menggunakan route tampilan dan users.contacts menunjukkan direktori view blade. Jadi buat seperti gambar di bawah ini.
 
Sekarang kita render kode berikut ini ke contacts.blade.php.

resources/views/users/contacts.blade.php

@extends('layouts.app')
@section('content')
    <div class="flex justify-center">
        @livewire('contact')
    </div>
@endsection 

Langkah 3: Buat Model dan Migration

Sekarang kita harus membuat model dan migrasi untuk mengirimkan data formulir dalam basis data sehingga kita dapat memeriksa laravel livewire contoh tutorial crud. Jadi buatlah dengan perintah di bawah ini.

php artisan make:model Contact -m

sekarang buka Model contact dan tempel kode di bawah ini.

app/Contact.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    protected $guarded = [];
}

sekarang tambahkan dua bidang ini ke tabel contact Anda dan jalankan perintah migration untuk menyimpannya ke database.

database/migrations/create_contacts_table.php

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

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

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

dan kemudian jalankan

php artisan migrate

Langkah 4: Instal Livewire

Untuk mengatur livewire di proyek Anda, jalankan perintah di bawah ini

composer require livewire/livewire

Setelah menjalankan perintah ini, buka app.blade.php Anda dan copy/paste kode di bawah ini.

resources/views/layouts/app.blade.php


<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @livewireStyles
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @livewireScripts
</body>
</html>

Langkah 5: Buat Component dan View Livewire

Jalankan perintah di bawah ini untuk membuat view dan component livewire.

php artisan make:livewire contact

Setelah menjalankan perintah ini, Anda akan menemukan dua file di path berikut  app/Http/Livewire/Contact.php dan  resources/views/livewire/contact.blade.php

app/Http/Livewire/Contact.php

namespace App\Http\Livewire;
use App\Contact;
use Livewire\Component;
class Contact extends Component
{
    public $data, $name, $email, $selected_id;
    public $updateMode = false;

    public function render()
    {
        $this->data = Contact::all();
        return view('livewire.contact');
    }
    private function resetInput()
    {
        $this->name = null;
        $this->email = null;
    }
    public function store()
    {
        $this->validate([
            'name' => 'required|min:5',
            'email' => 'required|email:rfc,dns'
        ]);
        Contact::create([
            'name' => $this->name,
            'email' => $this->email
        ]);
        $this->resetInput();
    }
    public function edit($id)
    {
        $record = Contact::findOrFail($id);
        $this->selected_id = $id;
        $this->name = $record->name;
        $this->email = $record->email;
        $this->updateMode = true;
    }
    public function update()
    {
        $this->validate([
            'selected_id' => 'required|numeric',
            'name' => 'required|min:5',
            'email' => 'required|email:rfc,dns'
        ]);
        if ($this->selected_id) {
            $record = Contact::find($this->selected_id);
            $record->update([
                'name' => $this->name,
                'email' => $this->email
            ]);
            $this->resetInput();
            $this->updateMode = false;
        }
    }
    public function destroy($id)
    {
        if ($id) {
            $record = Contact::where('id', $id);
            $record->delete();
        }
    }
}

Langkah 6: Buat File Blade

Sekarang buat struktur folder seperti gambar di bawah ini. Kami berada di terakhir dari tutorial livewire kami.

Sekarang tempel kode di bawah ini ke file blade Anda. Di sini kita akan membuat contact, membuat dan memperbarui file untuk membuat contoh crud livewire laravel kami.

resources/views/livewire/contact.blade.php


<div>
    
    <div class="col-md-6">

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>Sorry!</strong> invalid input.<br><br>
            <ul style="list-style-type:none;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


    @if($updateMode)
        @include('livewire.update')
    @else
        @include('livewire.create')
    @endif


    <table class="table table-striped" style="margin-top:20px;">
        <tr>
            <td>NO</td>
            <td>NAME</td>
            <td>EMAIL</td>
            <td>ACTION</td>
        </tr>

        @foreach($data as $row)
            <tr>
                <td>{{$loop->index + 1}}</td>
                <td>{{$row->name}}</td>
                <td>{{$row->email}}</td>
                <td>
                    <button wire:click="edit({{$row->id}})" class="btn btn-sm btn-outline-danger py-0">Edit</button> | 
                    <button wire:click="destroy({{$row->id}})" class="btn btn-sm btn-outline-danger py-0">Delete</button>
                </td>
            </tr>
        @endforeach
    </table>
    </div>

</div> 

resources/views/livewire/create.blade.php


<div>
    <div class="form-group">
        <label for="exampleInputPassword1">Enter Name</label>
        <input type="text" wire:model="name" class="form-control input-sm"  placeholder="Name">
    </div>
    <div class="form-group">
        <label>Enter Email</label>
        <input type="email" class="form-control input-sm" placeholder="Enter email" wire:model="email">
    </div>
    <button wire:click="store()" class="btn btn-primary">Submit</button>
</div>

 

resources/views/livewire/update.blade.php


<div>
    <input type="hidden" wire:model="selected_id">
    <div class="form-group">
        <label for="exampleInputPassword1">Enter Name</label>
        <input type="text" wire:model="name" class="form-control input-sm"  placeholder="Name">
    </div>
    <div class="form-group">
        <label>Enter Email</label>
        <input type="email" class="form-control input-sm" placeholder="Enter email" wire:model="email">
    </div>
    <button wire:click="update()" class="btn btn-primary">Update</button>
</div> 

Sekarang semua sudah siap. Cukup kunjungi url di bawah ini untuk menguji proyek contoh crud livewire laravel kami.

http://127.0.0.1:8000/contacts

Semoga ini bisa membantu Anda. 

laravel crud laravel-livewire