Tutorial ini menunjukkan kepada Anda contoh bentuk live livewire. Saya akan menunjukkan kepada Anda tentang membuat form dengan laravel livewire. mari kita bahas tentang tutorial livewire laravel. Anda akan belajar cara menginstal livewire ke laravel.

Dalam tutorial ini, kita akan membuat formulir sederhana menggunakan laravel livewire. Anda dapat menggunakan livewire laravel dengan versi laravel 6 dan laravel 7.

Livewire adalah full-stack framework untuk kerangka kerja Laravel yang membuat membangun antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel. jika Anda menggunakan livewire dengan laravel maka Anda tidak perlu khawatir tentang menulis kode jquery ajax, livewire akan membantu menulis cara jquery ajax kode yang sangat sederhana menggunakan php. tanpa validasi halaman refresh laravel akan berfungsi, formulir akan mengirimkan dll.

Di sini, saya akan memberikan Anda contoh yang sangat sederhana untuk membuat formulir kontak dengan nama dan email dan saya akan menyimpan data itu ke basis data tanpa halaman penyegaran dan terlalu banyak baris kode dalam file blade. kami hanya akan menggunakan paket livewire/livewire.

Jadi, mari ikuti langkah di bawah ini dan Anda akan mendapatkan tata letak di bawah:

Langkah 1: Instal Laravel 7

pertama-tama kita perlu mendapatkan aplikasi versi Laravel 7 baru menggunakan perintah di bawah ini, Jadi buka terminal ATAU command prompt Anda dan jalankan perintah di bawah ini:

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

Langkah 2 : Create Migration and Model

Di sini, kita perlu membuat migrasi database untuk tabel file dan juga kita akan membuat model untuk tabel file.

php artisan make:migration create_contacts_table

Migration:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateContactsUsForms extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

php artisan migrate

sekarang kita akan membuat model Kontak dengan menggunakan perintah berikut:

php artisan make:model Contact

App/Contact.php

<?php
  
namespace App;
  
use Illuminate\Database\Eloquent\Model;
  
class Contact extends Model
{
     /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'body',
    ];
}

Langkah 3: Install Livewire

sekarang pada langkah ini, kita cukup menginstal livewire ke aplikasi laravel 7 kita menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Create Component

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah ini untuk membuat contact us form komponen.

php artisan make:livewire contact-form

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php

app/Http/Livewire/ContactForm.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Contact;
  
class ContactForm extends Component
{
    public $name;
    public $email;
    public $body;
  
    public function submit()
    {
        $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'body' => 'required',
        ]);
  
        $attributes =[
           'name' => $this->name,
           'email' => $this->email,
           'body' => $this->body
        ]
        
        Contact::create($attributes);
  
        return redirect()->to('/form');
    }
  
    public function render()
    {
        return view('livewire.contact-form');
    }
}

resources/views/livewire/contact-form.blade.php

<form wire:submit.prevent="submit">
    <div class="form-group">
        <label for="exampleInputName">Name</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="Enter name" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <div class="form-group">
        <label for="exampleInputEmail">Email</label>
        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
        @error('email') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <div class="form-group">
        <label for="exampleInputbody">Body</label>
        <textarea class="form-control" id="exampleInputbody" placeholder="Enter Body" wire:model="body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <button type="submit" class="btn btn-primary">Save Contact</button>
</form>

Langkah 5: Create Route

sekarang kita akan membuat satu route untuk memanggil contoh kita, jadi mari kita tambahkan route baru ke file web.php seperti di bawah ini:

routes/web.php

Route::get('/form', function () {
    return view('form');
});

Langkah 6: Create View File

di sini, kita akan membuat file blade untuk route formulir panggilan. dalam file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire (''contact-form'). jadi mari kita tambahkan.

resources/views/form.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
  
<div class="container">
  
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example - Medikre.com
      </div>
      <div class="card-body">
        @livewire('contact-form')
      </div>
    </div>
      
</div>
  
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Buka URL di bawah:

http://localhost:8000/form

Saya harap ini dapat membantu Anda ...