Laravel Livewire Blog Store

Hey, Real Programmer, I will brief you step by step livewire form in Laravel 7. I will guide you step by step. let’s follow the tutorial and implement it.

Livewire is a laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel. if you are using livewire with laravel then you don’t worry about writing jquery ajax code, livewire will help to write very simple way jquery ajax code using PHP. without page refresh laravel validation will work, the form will submit etc.

Here, I will give you a very simple example of creating a blog form with title and body. I will store that data to database without refresh page and too many lines of code in blade file. we will use only the livewire/livewire package.

So, let’s follow bellow step and you will get bellow layout:

Step 1: Download laravel 7

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

Go inside of blog folder

cd blog

Step 2: Run Migration Command

php artisan make:migration create_blogs_table

Migration

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

php artisan migrate

Step 3: now we will create Blog model by using the following command:

php artisan make:model Blog

Go Inside of

App/Blog.php

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

Step 4: Install Livewire

now in this step, install livewire to our laravel 7 application using bellow command:

composer require livewire/livewire

Step 5: Create Component

Now here we will create livewire component using their command. so run bellow command to create blog form component.

php artisan make:livewire blog-form

app/Http/Livewire/BlogForm.php

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

Now both file we will update as bellow for our blog form.
app/Http/Livewire/BlogForm.php

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

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

<form wire:submit.prevent="submit">
    <div class="form-group">
        <label for="exampleInputTitle">Title</label>
        <input type="text" class="form-control" id="exampleInputTitle" placeholder="Enter title" wire:model="title">
        @error('title') <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">Submit</button>
</form>

Step 6: Create Route

now we will create one route for calling our example, so let’s add new route to web.php file as bellow:

routes/web.php

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

Step 7: Create View File

here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire(‘blog-form’). so let’s add it.
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 Blog (Real Programmer)
      </div>
      <div class="card-body">
        @livewire('blog-form')
      </div>
    </div>
      
</div>
  
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>

Step 8:

Now you can run using bellow command:

php artisan serve

Open bellow URL:

http://127.0.0.1:8000/form