Laravel Livewire: A Full-stack Framework for Laravel - KrishaWeb

CREATE COMMUNICATE CONNECT

Awesome Experiences Brand Stories Your Customers

Tuesday, Jul 28, 2020 / Laravel / KrishaWeb

Laravel Livewire: A Full-stack Framework for Laravel

Laravel Livewire

Livewire is a full-stack framework for 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.

Laravel Livewire release adds the following:

  • Turbolinks integration
  • Alpine JS integration
  • Support for wire:model listening for “input” events dispatched by AlpineJS: $dispatch(‘input’, ‘foo’)
  • Support for wire:custom-event=”foo” receiving params from an AlpineJS dispatch: $dispatch(‘custom-event’, ‘bar’).
  • Livewire custom-tag syntax

What does the Laravel Livewire do?

  • Livewire renders the initial component output with the page (like a Blade include), this way it is SEO friendly.
  • When an interaction occurs, Livewire makes an AJAX request to the server with the updated data.
  • The server re-renders the component and responds with the new HTML.
  • Livewire then intelligently mutates DOM according to the things that changed.

To get started please follow below link :

https://laravel-livewire.com/docs/quickstart/

  1. Install Laravel 7
    First of all, we need to create a Laravel 7 version application using bellow command:

    composer create-project --prefer-dist laravel/laravel idea
    
  2. Create Migration and Model
    Now we will create migration and model for it

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

    Now we will create Idea model by using the following command:

    php artisan make:model Idea
    
    <?php
    
    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
      
    class Idea extends Model
    {
         /**
         * The attributes that are mass assignable.
         *
         * @var array
         */
        protected $fillable = [
            'text', 'description',
        ];
    }
    
  3. Install Livewire
    Now install livewire to our application.

    composer require livewire/livewire
  4. Create Component
    Now create livewire form component using bellow command.php artisan make:livewire idea-form Now they created files on both path:
    app/Http/Livewire/IdeaForm.php
    resources/views/livewire/idea-form.blade.phpNow both file we will update as bellow for our idea us form.app/Http/Livewire/IdeaForm.php

    <?php
    
    namespace App\Http\Livewire;
      
    use Livewire\Component;
    use App\Idea;
      
    class IdeaForm extends Component
    {
        public $text;
        public $description;
      
        public function submit()
        {
            $validatedData = $this->validate([
                'text' => 'required|min:6',
                'description' => 'required',
            ]);
      
            Idea::create($validatedData);
      
            return redirect()->to('/form');
        }
      
        public function render()
        {
            return view('livewire.idea-form');
        }
    }
    
    resources/views/livewire/idea-form.blade.php
    
    <form wire:submit.prevent="submit">
    
    <div class="form-group">
            <label for="forText">Name</label>
            <input type="text" class="form-control" id="forText" placeholder="Enter name" wire:model="name">
            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
        </div>
      
        <div class="form-group">
            <label for="forDescription">Body</label>
            <textarea class="form-control" id="forDescription" 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 Idea</button>
    </form>
    
    
    
  5. Create Route
    Now create route for our form.

    routes/web.php
    
    Route::get('/form', function () {
        return view('form');
    });
    
  6. Create View File
    Now we will create blade file which is used in our route. In this file we will use @livewireStyles for styles, @livewireScripts for scripts and @livewire(‘idea-form’) for form tag.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”>
    My first Laravel Livewire Example
    </div>
    <div class=”card-body”>
    @livewire(‘idea-form’)
    </div>
    </div></div></body>
    <script src=”{{ asset(‘js/app.js’) }}”></script>
    @livewireScripts
    </html>

    Now we will start the server to see the magic.

    php artisan serve

    Please open your browser and paste below link in it.

    http://localhost:8000/form

As we have implemented an example of Form using Laravel Livewire and seen the magic of it simplifying the complex jquery ajax code using PHP. So, try it and if you still face any difficulties feel free to reach out our Laravel Experts.

divider
author
KrishaWeb
under Laravel
DOWNLOAD THIS FREE EBOOK OF

Website UI/UX guide for 2019

Download this free ebook of

A Detailed Explanation Of The WordPress Platform

Guide to Improve UIUX Design of Your Website to Boost Conversion

SEO Checklist for E-Commerce Website

Ecommerce SEO Checklist 2020

eCommerce Conversion Rate Optimization Techniques for 2020

Website Footer Design Guide

Website Footer Design Guide
DOWNLOAD THIS FREE EBOOK OF

Intermediate Guide For WordPress

Intermediate WordPress Guide
Landing Page Optimization Tips and Best Practices

Complete Guide to Landing Page Optimization

Landing Page Optimization Resource

Inbound Marketing Basics for Small Businesses

Inbound Marketing for small business - Cover page
line

You have a visionWe know the way to get you there.