Category Archives: Laravel

Laravel Tutorials

Laravel 7 Load More Data On Infinite Page Scroll

In this Laravel 7 Load More Tutorial From Scratch tutorial I’ll show you how to implement infinity scroll or dynamix ajax load more on page scroll in laravel. In this tutorial you will learn to implement dynamic load more pagination in laravel. In this step by step guide I’ll share example of ajax load more or infinity scroll in laravel.

Laravel 7 Load More Data On Infinite Page Scroll

Download Laravel Fresh Setup
Configure .env file
Create One Model and Migration
Create Route
Generate Controller by Command
Create Blade View
Run Development Server

Step 1: Download Laravel Fresh Setup

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Configure .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model and Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Now, go to app/database/migrations and open posts migration file and put following fields

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Create Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

 Route::get('posts', 'PostController@index');

1	Route::get('posts', 'PostController@index');

Step 5: Generate Controller by Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Now, go to app/http/controller/PostController and open PostController. And put the following code into your PostController file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Post;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::paginate(8);
        $data = '';
        if ($request->ajax()) {
            foreach ($posts as $post) {
                $data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';
            }
            return $data;
        }
        return view('posts');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

use App\Post;

class PostController extends Controller

{

public function index(Request $request)

{

$posts = Post::paginate(8);

$data = '';

if ($request->ajax()) {

foreach ($posts as $post) {

$data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';

}

return $data;

}

return view('posts');

}

Step 6: Create a blade view

Now, we will create a blade file name posts.blade.php. And update the below HTML code into your posts.blade.php file:

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel load more page scroll</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
   .wrapper > ul#results li {
     margin-bottom: 2px;
     background: #e2e2e2;
     padding: 20px;
     width: 97%;
     list-style: none;
   }
   .ajax-loading{
     text-align: center;
   }
</style>
</head>
  
<body>
  
  <div class="container">
   <div class="wrapper">
    <ul id="results"><!-- results appear here --></ul>
     <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
   </div>
  </div>
</body>
</html>

<!doctype html>

<head>

<title>Laravel load more page scroll</title>

<style>

.wrapper > ul#results li {

margin-bottom: 2px;

background: #e2e2e2;

padding: 20px;

width: 97%;

list-style: none;

}

.ajax-loading{

text-align: center;

}

</style>

</head>

<body>

</div>

</body>

</html>

This blade view file displays your all blog posts when you scroll the page down. Now, update the following script into your blade view file:

<script>
   var SITEURL = "{{ url('/') }}";
   var page = 1; //track user scroll as page number, right now page number is 1
   load_more(page); //initial content load
   $(window).scroll(function() { //detect page scroll
      if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
      page++; //page number increment
      load_more(page); //load content   
      }
    });     
    function load_more(page){
        $.ajax({
           url: SITEURL + "posts?page=" + page,
           type: "get",
           datatype: "html",
           beforeSend: function()
           {
              $('.ajax-loading').show();
            }
        })
        .done(function(data)
        {
            if(data.length == 0){
            console.log(data.length);
            //notify user if nothing to load
            $('.ajax-loading').html("No more records!");
            return;
          }
          $('.ajax-loading').hide(); //hide loading animation once data is received
          $("#results").append(data); //append data into #results element          
           console.log('data.length');
       })
       .fail(function(jqXHR, ajaxOptions, thrownError)
       {
          alert('No response from server');
       });
    }
</script>

var SITEURL = "{{ url('/') }}";

var page = 1; //track user scroll as page number, right now page number is 1

load_more(page); //initial content load

$(window).scroll(function() { //detect page scroll

if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page

page++; //page number increment

load_more(page); //load content

}

});

function load_more(page){

$.ajax({

url: SITEURL + "posts?page=" + page,

type: "get",

datatype: "html",

beforeSend: function()

{

$('.ajax-loading').show();

}

})

.done(function(data)

{

if(data.length == 0){

console.log(data.length);

//notify user if nothing to load

$('.ajax-loading').html("No more records!");

return;

}

$('.ajax-loading').hide(); //hide loading animation once data is received

$("#results").append(data); //append data into #results element

console.log('data.length');

})

.fail(function(jqXHR, ajaxOptions, thrownError)

{

alert('No response from server');

});

}

</script>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/posts

1	http://127.0.0.1:8000/posts

Laravel 7 Livewire Crud Example

In this Laravel livewire crud example tutorial I will shoe you how to create simple crud application using livewire package in laravel. In this tutorial you will learn to create basic CRUD application using livewire package in laravel. In this article you will also learn how to validate laravel livewire forms, how to update livewire form data, and how to edit livewire form data in laravel.

Laravel 7 Livewire Crud Example

Step 1: Download Laravel Fresh App
Step 2: Setup Database Configuration
Step 3: Install Livewire
Step 4: Create Component
Step 5: Add Route
Step 6: Create Blade Views
Step 7: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Setup Database Configuration

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Install Livewire

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 4: Create Component

In this step we will create a component using following command:

php artisan make:livewire users

1	php artisan make:livewire users

The above command will create two files on the following location:

app/Http/Livewire/Users.php
resources/views/livewire/users.blade.php

1 2	app/Http/Livewire/Users.php resources/views/livewire/users.blade.php

app/Http/Livewire/Users.php

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\User;
class Users extends Component
{
    public $users, $name, $email, $user_id;
    public $updateMode = false;
    public function render()
    {
        $this->users = User::all();
        return view('livewire.users');
    }
    private function resetInputFields(){
        $this->name = '';
        $this->email = '';
    }
    public function store()
    {
        $validatedDate = $this->validate([
            'name' => 'required',
            'email' => 'required|email',
        ]);
        User::create($validatedDate);
        session()->flash('message', 'Users Created Successfully.');
        $this->resetInputFields();
    }
    public function edit($id)
    {
        $this->updateMode = true;
        $user = User::where('id',$id)->first();
        $this->user_id = $id;
        $this->name = $user->name;
        $this->email = $user->email;
         
    }
    public function cancel()
    {
        $this->updateMode = false;
        $this->resetInputFields();
    }
    public function update()
    {
        $validatedDate = $this->validate([
            'name' => 'required',
            'email' => 'required|email',
        ]);
        if ($this->user_id) {
            $user = User::find($this->user_id);
            $user->update([
                'name' => $this->name,
                'email' => $this->email,
            ]);
            $this->updateMode = false;
            session()->flash('message', 'Users Updated Successfully.');
            $this->resetInputFields();
        }
    }
    public function delete($id)
    {
        if($id){
            User::where('id',$id)->delete();
            session()->flash('message', 'Users Deleted Successfully.');
        }
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\User;

class Users extends Component

{

public $users, $name, $email, $user_id;

public $updateMode = false;

public function render()

{

$this->users = User::all();

return view('livewire.users');

}

private function resetInputFields(){

$this->name = '';

$this->email = '';

}

public function store()

{

$validatedDate = $this->validate([

'name' => 'required',

'email' => 'required|email',

]);

User::create($validatedDate);

session()->flash('message', 'Users Created Successfully.');

$this->resetInputFields();

}

public function edit($id)

{

$this->updateMode = true;

$user = User::where('id',$id)->first();

$this->user_id = $id;

$this->name = $user->name;

$this->email = $user->email;

}

public function cancel()

{

$this->updateMode = false;

$this->resetInputFields();

}

public function update()

{

$validatedDate = $this->validate([

'name' => 'required',

'email' => 'required|email',

]);

if ($this->user_id) {

$user = User::find($this->user_id);

$user->update([

'name' => $this->name,

'email' => $this->email,

]);

$this->updateMode = false;

session()->flash('message', 'Users Updated Successfully.');

$this->resetInputFields();

}

public function delete($id)

{

if($id){

User::where('id',$id)->delete();

session()->flash('message', 'Users Deleted Successfully.');

}

Step 5: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::view('users','livewire.home');

1	Route::view('users','livewire.home');

Step 6: Create Blade Views

In this step we will create following blade views file and update the following code into your files:

resources/views/livewire/users.blade.php

<div>
    @if($updateMode)
        @include('livewire.update')
    @else
        @include('livewire.create')
    @endif
    <table class="table table-bordered mt-5">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $value)
            <tr>
                <td>{{ $value->id }}</td>
                <td>{{ $value->name }}</td>
                <td>{{ $value->email }}</td>
                <td>
                <button wire:click="edit({{ $value->id }})" class="btn btn-primary btn-sm">Edit</button>
                <button wire:click="delete({{ $value->id }})" class="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div>

@if($updateMode)

@include('livewire.update')

@else

@include('livewire.create')

@endif

<thead>

<tr>

<th>Email</th>

<th>Action</th>

</tr>

</thead>

<tbody>

@foreach($users as $value)

<tr>

<td>{{ $value->id }}</td>

<td>{{ $value->name }}</td>

<td>{{ $value->email }}</td>

<td>

<button wire:click="edit({{ $value->id }})" class="btn btn-primary btn-sm">Edit</button>

<button wire:click="delete({{ $value->id }})" class="btn btn-danger btn-sm">Delete</button>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

resources/views/livewire/home.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">
<title>Laravel Livewire CRUD Operation Tutorial From Scratch</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Laravel Livewire Crud - tutmake.com</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('users')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire CRUD Operation Tutorial From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2>Laravel Livewire Crud - tutmake.com</h2>

</div>

@if (session()->has('message'))

</div>

@endif

@livewire('users')

</div>

@livewireScripts

</body>

</html>

resources/views/livewire/create.blade.php

<form>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput2" wire:model="email" placeholder="Enter Email">
@error('email') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<button wire:click.prevent="store()" class="btn btn-success">Save</button>
</form>

<form>

@error('name') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput2">Email address</label>

@error('email') <span class="text-danger">{{ $message }}</span>@enderror

</div>

</form>

resources/views/livewire/update.blade.php

<form>
<div class="form-group">
<input type="hidden" wire:model="user_id">
<label for="exampleFormControlInput1">Name</label>
<input type="text" class="form-control" wire:model="name" id="exampleFormControlInput1" placeholder="Enter Name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" wire:model="email" id="exampleFormControlInput2" placeholder="Enter Email">
@error('email') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<button wire:click.prevent="update()" class="btn btn-dark">Update</button>
<button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</button>
</form>

<form>

@error('name') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput2">Email address</label>

@error('email') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<button wire:click.prevent="update()" class="btn btn-dark">Update</button>

<button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</button>

</form>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/users

1	http://localhost:8000/users

Laravel 7 jwt Authentication Rest API Tutorial

In this Laravel 7 jwt Authentication Rest API Tutorial I’ll show you how to build the rest APIs with jwt (JSON web token) authentication in laravel 7. In this example I’ll also show you how to install jwt auth and configure jwt auth in laravel 7. In this article, we will learn to create fully functional restful API with JWT Authentication in Laravel 7. In this tutorial, we will be creating fully functional REST API along with JWT Authentication.

Laravel 7 jwt Authentication Rest API Tutorial

Step 1: Install Laravel 7/6/5 App
Step 2: Configure Database
Step 3: Install jwt laravel
Step 4: Configure jwt in laravel
Step 5: Generate jwt secret key
Step 6: Add jwt Class in Model
Step 7: Add Api Routes
Step 8: Create Api Controller
Step 9: Run Development Server

Step 1: Install Laravel 7/6/5 App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Configure Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Install jwt laravel

In this step, we will install tymon jwt auth package via the composer dependency manager. Use the following command to install laravel jwt authentication package.

composer require tymon/jwt-auth

1	composer require tymon/jwt-auth

Step 4: Configure jwt in laravel

After Installing tymon/jwt-auth package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
….
'Tymon\JWTAuth\Providers\JWTAuthServiceProvider',
],
'aliases' => [
….
'JWTAuth' => 'Tymon\JWTAuth\Facades\JWTAuth',
'JWTFactory' => 'Tymon\JWTAuth\Facades\JWTFactory',
],

'providers' => [

….

'Tymon\JWTAuth\Providers\JWTAuthServiceProvider',

'aliases' => [

….

'JWTAuth' => 'Tymon\JWTAuth\Facades\JWTAuth',

'JWTFactory' => 'Tymon\JWTAuth\Facades\JWTFactory',

After that, run the below given command to publish the configuration file in Laravel for jwt auth:

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"

1	php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"

Step 5: Generate jwt secret key

Now, you need to generate jwt encryption keys. Use the following command to generate encryption keys needed to generate secure access tokens:

php artisan jwt:generate

1	php artisan jwt:generate

Now, open JWTGenerateCommand.php file and put the following code,

vendor/tymon/src/Commands/JWTGenerateCommand.php

public function handle() { 
 $this->fire(); 
}

public function handle() {

$this->fire();

}

Step 6: Add jwt Class in Model

In this step, Navigate to App folder and open User.php file. Then update the following code into User.php:

<?php 
 
namespace App;
 
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable
{
    use Notifiable;
 
    protected $fillable = [
        'name', 'email', 'password',
    ];
 
    protected $hidden = [
        'password', 'remember_token',
    ];
 
}

<?php

namespace App;

use Illuminate\Notifications\Notifiable;

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable

{

use Notifiable;

protected $fillable = [

'name', 'email', 'password',

];

protected $hidden = [

'password', 'remember_token',

];

}

Step 7: Add Api Routes

Now, go to routes folder and open api.php. Then put the following routes into api.php file:

Route::post('login', 'JwtAuthController@login');
Route::post('register', 'JwtAuthController@register');
  
Route::group(['middleware' => 'auth.jwt'], function () {
 
    Route::get('logout', 'JwtAuthController@logout');
    Route::get('user-info', 'JwtAuthController@getUser');
});

Route::post('login', 'JwtAuthController@login');

Route::post('register', 'JwtAuthController@register');

Route::group(['middleware' => 'auth.jwt'], function () {

Route::get('logout', 'JwtAuthController@logout');

Route::get('user-info', 'JwtAuthController@getUser');

});

Step 8: Create Api Controller

php artisan make:controller JwtAuthController

1	php artisan make:controller JwtAuthController

After that, you need to create some methods in JwtAuthController.php. So go to app/http/controllers/ and open JwtAuthController.php file. Then put the following methods into your JwtAuthController.php file:

<?php
namespace App\Http\Controllers;
use JWTAuth;
use Validator;
use App\User;
use Illuminate\Http\Request;
use App\Http\Requests\RegisterAuthRequest;
use Tymon\JWTAuth\Exceptions\JWTException;
use Symfony\Component\HttpFoundation\Response;
class JwtAuthController extends Controller
{
public $token = true;
public function register(Request $request)
{
$validator = Validator::make($request->all(), 
[ 
'name' => 'required',
'email' => 'required|email',
'password' => 'required',  
'c_password' => 'required|same:password', 
]);  
if ($validator->fails()) {  
return response()->json(['error'=>$validator->errors()], 401); 
}   
$user = new User();
$user->name = $request->name;
$user->email = $request->email;
$user->password = bcrypt($request->password);
$user->save();
if ($this->token) {
return $this->login($request);
}
return response()->json([
'success' => true,
'data' => $user
], Response::HTTP_OK);
}
public function login(Request $request)
{
$input = $request->only('email', 'password');
$jwt_token = null;
if (!$jwt_token = JWTAuth::attempt($input)) {
return response()->json([
'success' => false,
'message' => 'Invalid Email or Password',
], Response::HTTP_UNAUTHORIZED);
}
return response()->json([
'success' => true,
'token' => $jwt_token,
]);
}
public function logout(Request $request)
{
$this->validate($request, [
'token' => 'required'
]);
try {
JWTAuth::invalidate($request->token);
return response()->json([
'success' => true,
'message' => 'User logged out successfully'
]);
} catch (JWTException $exception) {
return response()->json([
'success' => false,
'message' => 'Sorry, the user cannot be logged out'
], Response::HTTP_INTERNAL_SERVER_ERROR);
}
}
public function getUser(Request $request)
{
$this->validate($request, [
'token' => 'required'
]);
$user = JWTAuth::authenticate($request->token);
return response()->json(['user' => $user]);
}
}

<?php

namespace App\Http\Controllers;

use JWTAuth;

use Validator;

use App\User;

use Illuminate\Http\Request;

use App\Http\Requests\RegisterAuthRequest;

use Tymon\JWTAuth\Exceptions\JWTException;

use Symfony\Component\HttpFoundation\Response;

class JwtAuthController extends Controller

{

public $token = true;

public function register(Request $request)

{

$validator = Validator::make($request->all(),

[

'name' => 'required',

'email' => 'required|email',

'password' => 'required',

'c_password' => 'required|same:password',

]);

if ($validator->fails()) {

return response()->json(['error'=>$validator->errors()], 401);

}

$user = new User();

$user->name = $request->name;

$user->email = $request->email;

$user->password = bcrypt($request->password);

$user->save();

if ($this->token) {

return $this->login($request);

}

return response()->json([

'success' => true,

'data' => $user

], Response::HTTP_OK);

}

public function login(Request $request)

{

$input = $request->only('email', 'password');

$jwt_token = null;

if (!$jwt_token = JWTAuth::attempt($input)) {

return response()->json([

'success' => false,

'message' => 'Invalid Email or Password',

], Response::HTTP_UNAUTHORIZED);

}

return response()->json([

'success' => true,

'token' => $jwt_token,

]);

}

public function logout(Request $request)

{

$this->validate($request, [

'token' => 'required'

]);

try {

JWTAuth::invalidate($request->token);

return response()->json([

'success' => true,

'message' => 'User logged out successfully'

]);

} catch (JWTException $exception) {

return response()->json([

'success' => false,

'message' => 'Sorry, the user cannot be logged out'

], Response::HTTP_INTERNAL_SERVER_ERROR);

}

public function getUser(Request $request)

{

$this->validate($request, [

'token' => 'required'

]);

$user = JWTAuth::authenticate($request->token);

return response()->json(['user' => $user]);

}

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Laravel Ajax Image Crop and Upload using jQuery

In this Laravel Ajax Image Crop and Upload using jQuery tutorial I’ll show you how to upload in crop image using jquery ajax in laravel. In this tutorial you will learn to upload in crop image before upload using jquery ajax in laravel. In this step by step guide I will demonstrate you to upload and crop image in laravel using jquery ajax.

Laravel Ajax Image Crop and Upload using jQuery

Step 1: Download Laravel App
Step 2: Add Database Details
Step 3: Create Crop Image Migration & Model
Step 4: Add Routes For Crop Image Upload
Step 5: Create Crop Image Controller File Using Command
Step 6: Create Crop Image Upload Blade View
Step 7: Make Upload Folder
Step 8: Run Development Server

Step 1: Download Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

1	composer create-project --prefer-dist laravel/laravel Blog

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Crop Image Migration & Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Image -m

1	php artisan make:model Image -m

Now, go to database/migrations folder and open create_images_table.php. Then put the following code into create_images_table.php:

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateGalleriesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('images', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

Now run the following command to migrate the table into your select database:

php artisan migrate

1	php artisan migrate

Step 4: Add Routes For Crop Image Upload

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('image-crop', 'CropImageUploadController@index');
 
Route::post('save-crop-image', 'CropImageUploadController@store');

Route::get('image-crop', 'CropImageUploadController@index');

Route::post('save-crop-image', 'CropImageUploadController@store');

Step 5: Create Crop Image Controller File Using Command

Now, lets create a controller named CropImageUploadController using command given below –

php artisan make:controller CropImageUploadController

1	php artisan make:controller CropImageUploadController

Now go to app/http/controllers/ folder and open CropImageUploadController.php. Then put the following file uploading methods into your CropImageUploadController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Image;
 
class CropImageUploadController extends Controller
{
    public function index()
    {
     return view('image-crop');
    }
 
    public function store(Request $request)
    {
        $folderPath = public_path('upload/');
 
        $image_parts = explode(";base64,", $request->image);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
 
        $imageName = uniqid() . '.png';
 
        $imageFullPath = $folderPath.$imageName;
 
        file_put_contents($imageFullPath, $image_base64);
 
         $saveFile = new Image;
         $saveFile->title = $imageName;
         $saveFile->save();
    
        return response()->json(['success'=>'Crop Image Saved/Uploaded Successfully using jQuery and Ajax In Laravel']);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class CropImageUploadController extends Controller

{

public function index()

{

return view('image-crop');

}

public function store(Request $request)

{

$folderPath = public_path('upload/');

$image_parts = explode(";base64,", $request->image);

$image_type_aux = explode("image/", $image_parts[0]);

$image_type = $image_type_aux[1];

$image_base64 = base64_decode($image_parts[1]);

$imageName = uniqid() . '.png';

$imageFullPath = $folderPath.$imageName;

file_put_contents($imageFullPath, $image_base64);

$saveFile = new Image;

$saveFile->title = $imageName;

$saveFile->save();

return response()->json(['success'=>'Crop Image Saved/Uploaded Successfully using jQuery and Ajax In Laravel']);

}

Step 6: Create Crop Image Upload Blade View

In this step, create a blade view file named image-crop.blade.php. Go to /resources/views and create one file name image-crop.blade.php. Then put the following code into your image-crop.blade.php file:

<html>  
<head>  
<title>Crop Image Using jQuery Croppie with Ajax in Laravel</title>  
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script
>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
</head>  
<body>  
<div class="container mt-5">
<div class="card">
<div class="card-header">
Crop Image Using jQuery Croppie with Ajax in Laravel
</div>
<div class="card-body">
<input type="file" name="before_crop_image" id="before_crop_image" accept="image/*" />
</div>
</div>
</div>
</body>  
</html>
<div id="imageModel" class="modal fade bd-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Crop & Resize Upload Image in PHP with Ajax</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Save</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>  
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}    
});
$('#before_crop_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#imageModel').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"{{url('save-crop-image')}}",  
type:'POST',
data: {'_token': $('meta[name="csrf-token"]').attr('content'), 'image': response},
success:function(data){
$('#imageModel').modal('hide');
alert('Crop image has been uploaded');
}
})
});
});
});  
</script>

<html>

<head>

<title>Crop Image Using jQuery Croppie with Ajax in Laravel</title>

</head>

<body>

Crop Image Using jQuery Croppie with Ajax in Laravel

</div>

</div>

</body>

</html>

<h4 class="modal-title">Crop & Resize Upload Image in PHP with Ajax</h4>

</div>

</div>

<br />

<br/>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

$(document).ready(function(){

$image_crop = $('#image_demo').croppie({

enableExif: true,

viewport: {

width:200,

height:200,

type:'square' //circle

boundary:{

width:300,

height:300

}

});

$('#before_crop_image').on('change', function(){

var reader = new FileReader();

reader.onload = function (event) {

$image_crop.croppie('bind', {

url: event.target.result

}).then(function(){

console.log('jQuery bind complete');

});

}

reader.readAsDataURL(this.files[0]);

$('#imageModel').modal('show');

});

$('.crop_image').click(function(event){

$image_crop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function(response){

$.ajax({

url:"{{url('save-crop-image')}}",

type:'POST',

data: {'_token': $('meta[name="csrf-token"]').attr('content'), 'image': response},

success:function(data){

$('#imageModel').modal('hide');

alert('Crop image has been uploaded');

}

})

});

</script>

Step 7: Make Upload Folder

Now, create one folder name upload inside public directory.

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

 http://localhost:8000/image-crop
OR hit in browser
http://localhost/blog/public/image-crop

http://localhost:8000/image-crop

OR hit in browser

http://localhost/blog/public/image-crop

Multiple File Upload With Progress Bar in Laravel

In this Multiple File Upload With Progress Bar in Laravel tutorial I’ll show you how to upload multiple file with progress bar in laravel. In this tutorial you will learn to upload multiple file with a progress bar in laravel using ajax. In this example we will display progress bar while uploading multiple image file in laravel. In this step by step guide I’ll demonstrate you how to upload multiple file with progress bar using ajax in laravel.

Multiple File Upload With Progress Bar in Laravel

Step 1: Download Laravel App
Step 2: Add Database Details
Step 3: Create Migration & Model
Step 4: Add Multiple File Upload Routes
Step 5: Create Multiple File UploadController by Artisan
Step 6: Create Multiple File Upload with Progress Bar Blade View
Step 7: Run Development Server

Step 1: Download Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

1	composer create-project --prefer-dist laravel/laravel Blog

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Migration & Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Gallery -m

1	php artisan make:model Gallery -m

The above command will create a model name Gallery.php and a migration file for the Gallery table. Then go to database/migrations folder and open create_galleries_table.php. Then put the following code into create_galleries_table.php:

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateGalleriesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('galleries', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('galleries');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Add Multiple File Upload Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('multiple-file-upload-progress-bar', 'MultipleFileUploadController@index');
 
Route::post('multiple-file-upload', 'MultipleFileUploadController@uploadMultipleFile');

Route::get('multiple-file-upload-progress-bar', 'MultipleFileUploadController@index');

Route::post('multiple-file-upload', 'MultipleFileUploadController@uploadMultipleFile');

Step 5: Create Multiple File Upload Controller by Artisan

Now, lets create a controller named MultipleFileUploadController using command given below –

php artisan make:controller MultipleFileUploadController

1	php artisan make:controller MultipleFileUploadController

The above command will create a controller named MultipleFileUploadController.php file. Now, go to app/http/controllers/ folder and open MultipleFileUploadController.php. Then put the following file uploading methods into your MultipleFileUploadController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Gallery;
 
class MultipleFileUploadController extends Controller
{
    public function index()
    {
     return view('multiple-file-upload-progress-bar');
    }
 
    public function uploadMultipleFile(Request $request)
    {
 
         foreach($request->file('file') as $image)
         {
              $new_name = rand() . '.' . $image->getClientOriginalExtension();
              $image->move(public_path('images'), $new_name);
              Gallery::insert(['title' => $new_name]);
         }
 
         $res = array(
          'success'  => 'Multiple Image File Has Been uploaded Successfully'
         );
 
        return response()->json($res);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Gallery;

class MultipleFileUploadController extends Controller

{

public function index()

{

return view('multiple-file-upload-progress-bar');

}

public function uploadMultipleFile(Request $request)

{

foreach($request->file('file') as $image)

{

$new_name = rand() . '.' . $image->getClientOriginalExtension();

$image->move(public_path('images'), $new_name);

Gallery::insert(['title' => $new_name]);

}

$res = array(

'success' => 'Multiple Image File Has Been uploaded Successfully'

);

return response()->json($res);

}

Step 6: Create Multiple File Upload with Progress Bar Blade View

In this step, we will create a blade file named multiple-file-upload-progress-bar.blade.php. Now, go to /resources/views and create a file name multiple-file-upload-progress-bar.blade.php. Then put the following code into your multiple-file-upload-progress-bar.blade.php file:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 7 Multiple File Upload with Progress bar using Ajax jQuery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">    
<div class="card">
<div class="card-header">
<h3 class="card-title">Upload Multiple Images in Laravel 7</h3>
</div>
<div class="card-body">
<br />
<form method="post" action="{{url('multiple-file-upload')}}" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-3" align="right"><h4>Select Multiple Files</h4></div>
<div class="col-md-6">
<input type="file" name="file[]" id="file" accept="image/*" multiple />
</div>
<div class="col-md-3">
<input type="submit" name="upload" value="Upload" class="btn btn-success" />
</div>
</div>
</form>
<br />
<div class="progress">
<div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
<br />
<div id="success" class="row">
</div>
<br />
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('form').ajaxForm({
beforeSend:function(){
$('#success').empty();
$('.progress-bar').text('0%');
$('.progress-bar').css('width', '0%');
},
uploadProgress:function(event, position, total, percentComplete){
$('.progress-bar').text(percentComplete + '0%');
$('.progress-bar').css('width', percentComplete + '0%');
},
success:function(data)
{
if(data.success)
{
$('#success').html('<div class="text-success text-center"><b>'+data.success+'</b></div><br /><br />');
$('#success').append(data.image);
$('.progress-bar').text('Uploaded');
$('.progress-bar').css('width', '100%');
}
}
});
});
</script>
</body>
</html>

<html>

<head>

<title>Laravel 7 Multiple File Upload with Progress bar using Ajax jQuery</title>

</head>

<body>

<h3 class="card-title">Upload Multiple Images in Laravel 7</h3>

</div>

<br />

@csrf

<div class="col-md-3" align="right"><h4>Select Multiple Files</h4></div>

</div>

</div>

</form>

<br />

</div>

<br />

</div>

<br />

</div>

$(document).ready(function(){

$('form').ajaxForm({

beforeSend:function(){

$('#success').empty();

$('.progress-bar').text('0%');

$('.progress-bar').css('width', '0%');

uploadProgress:function(event, position, total, percentComplete){

$('.progress-bar').text(percentComplete + '0%');

$('.progress-bar').css('width', percentComplete + '0%');

success:function(data)

{

if(data.success)

{

$('#success').html('<div class="text-success text-center"><b>'+data.success+'</b></div><br /><br />');

$('#success').append(data.image);

$('.progress-bar').text('Uploaded');

$('.progress-bar').css('width', '100%');

}

});

</script>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/multiple-file-upload-progress-bar
OR hit in browser
http://localhost/blog/public/multiple-file-upload-progress-bar

http://localhost:8000/multiple-file-upload-progress-bar

OR hit in browser

http://localhost/blog/public/multiple-file-upload-progress-bar

Laravel 7 Firebase CRUD Example Tutorial

In this Laravel 7 Firebase CRUD Example Tutorial I’ll show you how to create realtime crud operation example using google firebase in laravel project. In this tutorial you will learn to create real time crud application using firebase in laravel. In this article I will share example of using firebase to create crud application in laravel. Firebase make is easy to perform real time operation for crud application. In this step by step guide we will be creating a simple real time CRUD example using firebase database in laravel.

Laravel 7 Firebase CRUD Example Tutorial

Step 1: Create Firebase Project
Step 2: Intsall Laravel Application
Step 3: Add Route
Step 4: Add Firebase Settings in Service.php
Step 5: Create Controller Using Artisan
Step 6: Create View Files
Step 7: Run Development Server

Step 1: Create Firebase Project

First of all, you need to create google firebase project. Follow the instructions given below to create google firebase project.

Go to https://firebase.google.com/ and create a google firebase project, as follows:
Fill your google firebase project name and click the “continue button.
Click “Continue” button
Click “Create Project” Button. And your google firebase project will successfully be created.

Then, You will see blogs on top menu, click it. And create web app with a blogs name or you want to keep name accordingly. Then copy google firebase configuration and database details.

Step 2: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 3: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('user','UserController@index');

1	Route::get('user','UserController@index');

Step 4: Add Firebase Settings in Service.php

Now, go to the config folder and open services.php file. Then put the following google firebase configuration details into services.php file:

'firebase' => [
    'api_key' => 'api_key',
    'auth_domain' => 'auth_domain',
    'database_url' => 'database_url',
    'project_id' => 'project_id',
    'storage_bucket' => 'storage_bucket',
    'messaging_sender_id' => 'messaging_sender_id',
    'app_id' => 'app_id',
    'measurement_id' => 'measurement_id',
],

'firebase' => [

'api_key' => 'api_key',

'auth_domain' => 'auth_domain',

'database_url' => 'database_url',

'project_id' => 'project_id',

'storage_bucket' => 'storage_bucket',

'messaging_sender_id' => 'messaging_sender_id',

'app_id' => 'app_id',

'measurement_id' => 'measurement_id',

Step 5: Create Controller By Artisan

Now, lets create a controller named UserController using command given below –

php artisan make:controller UserController

1	php artisan make:controller UserController

Then app/http/controller folder and open UserController.php file. And put the following code into your UserController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class UserController extends Controller
{
    public function index()
    {
        return view('users');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller

{

public function index()

{

return view('users');

}

Step 6: Create Blade View File

In this step, go to resources/view folder and create a blade file named users.blade.php. Then put the following code into your users.blade.php file:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Laravel RealTime Google Firebase CRUD Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h4 class="text-center">Laravel 7 RealTime Google Firebase CRUD Example</h4><br>
<h5># Add User</h5>
<div class="card card-default">
<div class="card-body">
<form id="addUser" class="form-inline" method="POST" action="">
<div class="form-group mb-2">
<label for="name" class="sr-only">Name</label>
<input id="name" type="text" class="form-control" name="name" placeholder="Name"
required autofocus>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="email" class="sr-only">Email</label>
<input id="email" type="email" class="form-control" name="email" placeholder="Email"
required autofocus>
</div>
<button id="submitUser" type="button" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
<br>
<h5># Users</h5>
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th width="180" class="text-center">Action</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</div>
<!-- Update Model -->
<form action="" method="POST" class="users-update-record-model form-horizontal">
<div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content" style="overflow: hidden;">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">Update</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
</div>
<div class="modal-body" id="updateBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-success updateUser">Update
</button>
</div>
</div>
</div>
</div>
</form>
<!-- Delete Model -->
<form action="" method="POST" class="users-remove-record-model">
<div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">Delete</h4>
<button type="button" class="close remove-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×
</button>
</div>
<div class="modal-body">
<p>Do you want to delete this record?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect remove-data-from-delete-form"
data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-danger waves-effect waves-light deleteRecord">Delete
</button>
</div>
</div>
</div>
</div>
</form>
{{--Firebase Tasks--}}
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "{{ config('services.firebase.api_key') }}",
authDomain: "{{ config('services.firebase.auth_domain') }}",
databaseURL: "{{ config('services.firebase.database_url') }}",
projectId: "{{ config('services.firebase.project_id') }}",
storageBucket: "{{ config('services.firebase.storage_bucket') }}",
messagingSenderId: "{{ config('services.firebase.messaging_sender_id') }}",
appId: "{{ config('services.firebase.app_id') }}",
measurementId: "{{ config('services.firebase.measurement_id') }}"
};
firebase.initializeApp(config);
firebase.analytics();
var database = firebase.database();
var lastIndex = 0;
// Get Data
firebase.database().ref('Users/').on('value', function (snapshot) {
var value = snapshot.val();
var htmls = [];
$.each(value, function (index, value) {
if (value) {
htmls.push('<tr>\
<td>' + value.name + '</td>\
<td>' + value.email + '</td>\
<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateData" data-id="' + index + '">Update</button>\
<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeData" data-id="' + index + '">Delete</button></td>\
</tr>');
}
lastIndex = index;
});
$('#tbody').html(htmls);
$("#submitUser").removeClass('desabled');
});
// Add Data
$('#submitUser').on('click', function () {
var values = $("#addUser").serializeArray();
var name = values[0].value;
var email = values[1].value;
var userID = lastIndex + 1;
console.log(values);
firebase.database().ref('Users/' + userID).set({
name: name,
email: email,
});
// Reassign lastID value
lastIndex = userID;
$("#addUser input").val("");
});
// Update Data
var updateID = 0;
$('body').on('click', '.updateData', function () {
updateID = $(this).attr('data-id');
firebase.database().ref('Users/' + updateID).on('value', function (snapshot) {
var values = snapshot.val();
var updateData = '<div class="form-group">\
<label for="first_name" class="col-md-12 col-form-label">Name</label>\
<div class="col-md-12">\
<input id="first_name" type="text" class="form-control" name="name" value="' + values.name + '" required autofocus>\
</div>\
</div>\
<div class="form-group">\
<label for="last_name" class="col-md-12 col-form-label">Email</label>\
<div class="col-md-12">\
<input id="last_name" type="text" class="form-control" name="email" value="' + values.email + '" required autofocus>\
</div>\
</div>';
$('#updateBody').html(updateData);
});
});
$('.updateUser').on('click', function () {
var values = $(".users-update-record-model").serializeArray();
var postData = {
name: values[0].value,
email: values[1].value,
};
var updates = {};
updates['/Users/' + updateID] = postData;
firebase.database().ref().update(updates);
$("#update-modal").modal('hide');
});
// Remove Data
$("body").on('click', '.removeData', function () {
var id = $(this).attr('data-id');
$('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="' + id + '">');
});
$('.deleteRecord').on('click', function () {
var values = $(".users-remove-record-model").serializeArray();
var id = values[0].value;
firebase.database().ref('Users/' + id).remove();
$('body').find('.users-remove-record-model').find("input").remove();
$("#remove-modal").modal('hide');
});
$('.remove-data-from-delete-form').click(function () {
$('body').find('.users-remove-record-model').find("input").remove();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

<!doctype html>

<head>

<title>Laravel RealTime Google Firebase CRUD Example</title>

</head>

<body>

<h4 class="text-center">Laravel 7 RealTime Google Firebase CRUD Example</h4><br>

<input id="name" type="text" class="form-control" name="name" placeholder="Name"

required autofocus>

</div>

<label for="email" class="sr-only">Email</label>

<input id="email" type="email" class="form-control" name="email" placeholder="Email"

required autofocus>

</div>

<button id="submitUser" type="button" class="btn btn-primary mb-2">Submit</button>

</form>

</div>

<br>

<h5># Users</h5>

<tr>

<th>Email</th>

<th width="180" class="text-center">Action</th>

</tr>

</tbody>

</table>

</div>

<div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"

aria-hidden="true">

<h4 class="modal-title" id="custom-width-modalLabel">Update</h4>

<button type="button" class="close" data-dismiss="modal"

aria-hidden="true">×

</button>

</div>

</div>

<button type="button" class="btn btn-light"

data-dismiss="modal">Close

</button>

<button type="button" class="btn btn-success updateUser">Update

</button>

</div>

</form>

<div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"

aria-hidden="true" style="display: none;">

<h4 class="modal-title" id="custom-width-modalLabel">Delete</h4>

<button type="button" class="close remove-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×

</button>

</div>

<p>Do you want to delete this record?</p>

</div>

<button type="button" class="btn btn-default waves-effect remove-data-from-delete-form"

data-dismiss="modal">Close

</button>

<button type="button" class="btn btn-danger waves-effect waves-light deleteRecord">Delete

</button>

</div>

</form>

<!-- TODO: Add SDKs for Firebase products that you want to use

https://firebase.google.com/docs/web/setup#available-libraries -->

// Initialize Firebase

var config = {

apiKey: "{{ config('services.firebase.api_key') }}",

authDomain: "{{ config('services.firebase.auth_domain') }}",

databaseURL: "{{ config('services.firebase.database_url') }}",

projectId: "{{ config('services.firebase.project_id') }}",

storageBucket: "{{ config('services.firebase.storage_bucket') }}",

messagingSenderId: "{{ config('services.firebase.messaging_sender_id') }}",

appId: "{{ config('services.firebase.app_id') }}",

measurementId: "{{ config('services.firebase.measurement_id') }}"

};

firebase.initializeApp(config);

firebase.analytics();

var database = firebase.database();

var lastIndex = 0;

// Get Data

firebase.database().ref('Users/').on('value', function (snapshot) {

var value = snapshot.val();

var htmls = [];

$.each(value, function (index, value) {

if (value) {

htmls.push('<tr>\

<td>' + value.name + '</td>\

<td>' + value.email + '</td>\

<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateData" data-id="' + index + '">Update</button>\

<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeData" data-id="' + index + '">Delete</button></td>\

</tr>');

}

lastIndex = index;

});

$('#tbody').html(htmls);

$("#submitUser").removeClass('desabled');

});

// Add Data

$('#submitUser').on('click', function () {

var values = $("#addUser").serializeArray();

var name = values[0].value;

var email = values[1].value;

var userID = lastIndex + 1;

console.log(values);

firebase.database().ref('Users/' + userID).set({

name: name,

email: email,

});

// Reassign lastID value

lastIndex = userID;

$("#addUser input").val("");

});

// Update Data

var updateID = 0;

$('body').on('click', '.updateData', function () {

updateID = $(this).attr('data-id');

firebase.database().ref('Users/' + updateID).on('value', function (snapshot) {

var values = snapshot.val();

var updateData = '<div class="form-group">\

<label for="first_name" class="col-md-12 col-form-label">Name</label>\

<div class="col-md-12">\

<input id="first_name" type="text" class="form-control" name="name" value="' + values.name + '" required autofocus>\

</div>\

<div class="form-group">\

<label for="last_name" class="col-md-12 col-form-label">Email</label>\

<div class="col-md-12">\

<input id="last_name" type="text" class="form-control" name="email" value="' + values.email + '" required autofocus>\

</div>\

</div>';

$('#updateBody').html(updateData);

});

$('.updateUser').on('click', function () {

var values = $(".users-update-record-model").serializeArray();

var postData = {

name: values[0].value,

email: values[1].value,

};

var updates = {};

updates['/Users/' + updateID] = postData;

firebase.database().ref().update(updates);

$("#update-modal").modal('hide');

});

// Remove Data

$("body").on('click', '.removeData', function () {

var id = $(this).attr('data-id');

$('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="' + id + '">');

});

$('.deleteRecord').on('click', function () {

var values = $(".users-remove-record-model").serializeArray();

var id = values[0].value;

firebase.database().ref('Users/' + id).remove();

$('body').find('.users-remove-record-model').find("input").remove();

$("#remove-modal").modal('hide');

});

$('.remove-data-from-delete-form').click(function () {

$('body').find('.users-remove-record-model').find("input").remove();

});

</script>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/users

1	http://localhost:8000/users

Laravel Livewire Pagination Example Tutorial

In this Laravel Livewire Pagination Example tutorial I’ll show you how to implement pagination in laravel application using laravel livewire pagination component. In this tutorial you will learn to create pagination using laravel livewire pagination.We will be using default laravel pagination method to create pagination using livewire in laravel. In this step by step tutorial I will demonstrate to implement laravel livewire pagination app.

Laravel Livewire Pagination Example Tutorial

Step 1: Install Laravel App
Step 2: Add Database Detail
Step 3: Create Model & Migration using Artisan
Step 4: Install Livewire Package
Step 5: Create Component using Artisan
Step 6: Add Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Migration

Now, in this step we will create model and migration file. Please run the following command:

 php artisan make:model Employee -fm

1	php artisan make:model Employee -fm

The above command will create a model name Employee.php,create a migration name create_employees_table.php and one faker file that name EmployeeFactory.php . Now, go to database/migrations folder and open create_ employees_table.php file. Then put the following code into create_ employees_table.php file

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

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateEmployeesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('employees', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('employees');

}

Now, go to app\Providers folder and open AppServiceProvider.php file. And put the following code into AppServiceProvider.php file:

use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Next, open your command prompt and run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Next, go to app/Employee.php and update the following code into your Employee.php model as follow:

<?php
  
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Employee extends Model
{
    protected $guarded = [];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model

{

protected $guarded = [];

}

Next, go to database/factories and open EmployeeFactory.php. Then update the following code into it as follow:

<?php
 
use Faker\Generator as Faker;
 
$factory->define(App\Employee::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->unique()->safeEmail
    ];
});

<?php

use Faker\Generator as Faker;

$factory->define(App\Employee::class, function (Faker $faker) {

return [

'name' => $faker->name,

'email' => $faker->unique()->safeEmail

];

});

After that, run the following command to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Employee::class,50)->create()
exit

php artisan tinker

//and then

factory(\App\Employee::class,50)->create()

exit

Step 4: Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create Component using Artisan

In this step we will create a component using following command:

php artisan make:livewire search-pagination

1	php artisan make:livewire search-pagination

app/Http/Livewire/SearchPagination.php
resources/views/livewire/search-pagination.blade.php

1 2	app/Http/Livewire/SearchPagination.php resources/views/livewire/search-pagination.blade.php

Now, go to app/Http/Livewire folder and open SearchPagination.php file. Then put the following code into your SearchPagination.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use Livewire\WithPagination;
use App\Employee;
 
class SearchPagination extends Component
{
    use WithPagination;
    public $searchTerm;
 
    public function render()
    {
        $searchTerm = '%'.$this->searchTerm.'%';
 
        return view('livewire.search-pagination',[
            'employees' => Employee::where('name','like', $searchTerm)->paginate(10)
        ]);
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use Livewire\WithPagination;

use App\Employee;

class SearchPagination extends Component

{

use WithPagination;

public $searchTerm;

public function render()

{

$searchTerm = '%'.$this->searchTerm.'%';

return view('livewire.search-pagination',[

'employees' => Employee::where('name','like', $searchTerm)->paginate(10)

]);

}

After that, go to resources/views/livewire folder and open search-pagination.blade.php file. Then put the following code into your search-pagination.blade.php file:

<div class="container">
    <div class="row">
        <div class="col-md-12">
             
            <input type="text"  class="form-control" placeholder="Search" wire:model="searchTerm" />
 
            <table class="table table-bordered" style="margin: 10px 0 10px 0;">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                @foreach($employees as $employee)
                <tr>
                    <td>
                        {{ $employee->name }}
                    </td>
                    <td>
                        {{ $employee->email }}
                    </td>
                </tr>
                @endforeach
            </table>
            {{ $employees->links() }}
        </div>
    </div>
</div>

<tr>

<th>Email</th>

</tr>

@foreach($employees as $employee)

<tr>

<td>

</td>

<td>

</td>

</tr>

@endforeach

</table>

</div>

Step 6: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('/search-with-pagination', function () {
    return view('livewire.home');
});

Route::get('/search-with-pagination', function () {

return view('livewire.home');

});

Step 7: Create View File

In this step, go to resources/views/livewire folder and create a blade file that name home.blade.php file. Then put the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Livewire Search with Pagination</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
 
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
 
            .full-height {
                height: 100vh;
            }
 
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
 
            .position-ref {
                position: relative;
            }
 
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
 
            .content {
                text-align: center;
            }
 
            .title {
                font-size: 84px;
            }
 
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
 
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                  <div class="card-header bg-primary">
                    <h2 class="text-white">Laravel Livewire Search with Pagination</h2>
                  </div>
 
                    <div class="card-body">
                      @livewire('search-pagination')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire Search with Pagination</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2 class="text-white">Laravel Livewire Search with Pagination</h2>

</div>

@livewire('search-pagination')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/search-with-pagination

1	http://localhost:8000/search-with-pagination

Laravel Livewire Image Upload From Scratch

In this Laravel Livewire Image Upload Example tutorial I’ll show you how to upload image file livewire package in laravel project. In this tutorial you will learn to upload image file livewire package in laravel. Laravel livewire package makes uploading and saving image files easy. With Laravel livewire package it is easy handle file upload.

Laravel Livewire Image Upload From Scratch

Step 1: Install Laravel App
Step 2: Add Database Detail
Step 3: Create Model & Migration using Artisan
Step 4: Install Livewire Package
Step 5: Create Component using Artisan
Step 6: Add Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model & Migration using Artisan

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Image -m

1	php artisan make:model Image -m

The above command will create a model name Image.php and also create a migration that name create_images_table.php. Now go to database/migrations folder and open create_images_table.php file. Then put the following code into create_images_table.php file

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

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('images', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

Then go to app\Providers folder and open AppServiceProvider.php file. And put the following code into AppServiceProvider.php file:

use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Now run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Now, Open App/Image.php file and put the fillable properties:

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model

{

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'title'

];

}

Step 4: Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create Component using Artisan

In this step we will create a component using following command:

php artisan make:livewire upload-image

1	php artisan make:livewire upload-image

The above command will create the following components on the following path:

app/Http/Livewire/UploadImage.php
resources/views/livewire/upload-image.blade.php

1 2	app/Http/Livewire/UploadImage.php resources/views/livewire/upload-image.blade.php

Now, go to app/Http/Livewire folder and open UploadImage.php file. Then add the following code into your UploadImage.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Image;
 
class UploadImage extends Component
{
    use WithFileUploads;
 
    public $image;
 
    public function render()
    {
        return view('livewire.upload-image');
    }
   
    public function submit()
    {
        $validatedData = $this->validate([
            'image' => 'required|image|mimes:jpeg,png,svg,jpg,gif|max:1024',
        ]);
 
        $imageName = $this->image->store("images",'public');
 
        $validatedData['title'] = $imageName;
 
        Image::create($validatedData);
   
        session()->flash('message', 'Image has been successfully Uploaded.');
 
        return redirect()->to('/laravel-livewire-upload-image');
    }
 
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use Livewire\WithFileUploads;

use App\Image;

class UploadImage extends Component

{

use WithFileUploads;

public $image;

public function render()

{

return view('livewire.upload-image');

}

public function submit()

{

$validatedData = $this->validate([

'image' => 'required|image|mimes:jpeg,png,svg,jpg,gif|max:1024',

]);

$imageName = $this->image->store("images",'public');

$validatedData['title'] = $imageName;

Image::create($validatedData);

session()->flash('message', 'Image has been successfully Uploaded.');

return redirect()->to('/laravel-livewire-upload-image');

}

Now, go to resources/views/livewire folder and open upload-image.blade.php file. Then put the following code into your upload-image.blade.php file:

@if (session()->has('message'))
    <div class="alert alert-success">
        {{ session('message') }}
    </div>
@endif
 
<form wire:submit.prevent="submit" enctype="multipart/form-data">
     
    <div class="form-group">
        <label for="exampleInputName">Image</label>
        <input type="file" class="form-control" id="exampleInputName" wire:model="image">
        @error('image') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
 
     <button type="submit" class="btn btn-primary">Save</button>
</form>

@if (session()->has('message'))

</div>

@endif

<label for="exampleInputName">Image</label>

@error('image') <span class="text-danger">{{ $message }}</span> @enderror

</div>

</form>

Step 6: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::view('laravel-livewire-upload-image','livewire.home');

1	Route::view('laravel-livewire-upload-image','livewire.home');

Step 7: Create View File

In this step, go to resources/views/livewire folder and create a blade files name home.blade.php file. Then put the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Livewire Upload Image Example From Scratch</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
 
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
 
            .full-height {
                height: 100vh;
            }
 
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
 
            .position-ref {
                position: relative;
            }
 
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
 
            .content {
                text-align: center;
            }
 
            .title {
                font-size: 84px;
            }
 
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
 
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                  <div class="card-header bg-success">
                    <h2 class="text-white">Laravel Livewire Upload Image Example From Scratch</h2>
                  </div>
                  <div class="card-body">
                    @livewire('upload-image')
                  </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire Upload Image Example From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2 class="text-white">Laravel Livewire Upload Image Example From Scratch</h2>

</div>

@livewire('upload-image')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/laravel-livewire-upload-image

1	http://localhost:8000/laravel-livewire-upload-image

Laravel Livewire File Upload From Scratch

In this Laravel Livewire file Upload Example tutorial I’ll show you how to upload file with livewire package in laravel project. In this tutorial you will learn to upload file using livewire package in laravel. Laravel livewire package makes uploading and saving image files easy. With Laravel livewire package it is easy handle file upload.

Laravel Livewire File Upload From Scratch

Step 1: Install Laravel App
Step 2: Add Database Detail
Step 3: Create Model & Migration For File using Artisan
Step 4: Install Livewire Package
Step 5: Create File Upload Component using Artisan
Step 6: Add Route For Livewire File Upload
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model & Migration For File using Artisan

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Document -m

1	php artisan make:model Document -m

The above command will create a model name Document.php and also create a migration that name create_documents_table.php. Now, go to database/migrations folder and open create_documents_table.php file. Then put the following code into create_documents_table.php file:

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

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateDocumentsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('documents', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('file_name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('documents');

}

Now, go to app\Providers folder and open AppServiceProvider.php file. And put the following code into AppServiceProvider.php file:

use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Now run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Now, Open App/Document.php file and add the fillable properties:

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Document extends Model

{

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'title', 'file_name'

];

}

Step 4: Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create File Upload Component using Artisan

In this step we will create a component using following command:

php artisan make:livewire lara-file-upload

1	php artisan make:livewire lara-file-upload

The above command will create the following components on the following path:

app/Http/Livewire/LaraFileUpload.php
resources/views/livewire/lara-file-upload.blade.php

1 2	app/Http/Livewire/LaraFileUpload.php resources/views/livewire/lara-file-upload.blade.php

Now, go to app/Http/Livewire folder and open LaraFileUpload.php file. Then put the following code into your LaraFileUpload.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Document;
 
class LaraFileUpload extends Component
{
    use WithFileUploads;
 
    public $title;
    public $file_name;
 
    public function submit()
    {
        $data = $this->validate([
            'title' => 'required',
            'file_name' => 'required',
        ]);
 
        $filename = $this->file_name->store('documents','public');
 
        $data['file_name'] = $filename;
 
        Document::create($data);
 
        session()->flash('message', 'File has been successfully Uploaded.');
 
        return redirect()->to('/lara-livewire-file-upload');
    }
 
    public function render()
    {
        return view('livewire.lara-file-upload');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use Livewire\WithFileUploads;

use App\Document;

class LaraFileUpload extends Component

{

use WithFileUploads;

public $title;

public $file_name;

public function submit()

{

$data = $this->validate([

'title' => 'required',

'file_name' => 'required',

]);

$filename = $this->file_name->store('documents','public');

$data['file_name'] = $filename;

Document::create($data);

session()->flash('message', 'File has been successfully Uploaded.');

return redirect()->to('/lara-livewire-file-upload');

}

public function render()

{

return view('livewire.lara-file-upload');

}

After that, go to resources/views/livewire folder and open lara-file-upload.blade.php file. Then put the following code into your lara-file-upload.blade.php file:

@if (session()->has('message'))
    <div class="alert alert-success">
        {{ session('message') }}
    </div>
@endif
<form wire:submit.prevent="submit" enctype="multipart/form-data">
     
    <div class="form-group">
        <label for="exampleInputName">Title</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="Enter title" wire:model="title">
        @error('title') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
 
    <div class="form-group">
        <label for="exampleInputName">File</label>
        <input type="file" class="form-control" id="exampleInputName" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
 
    <button type="submit">Save</button>
</form>

@if (session()->has('message'))

</div>

@endif

<label for="exampleInputName">Title</label>

@error('title') <span class="text-danger">{{ $message }}</span> @enderror

</div>

@error('name') <span class="text-danger">{{ $message }}</span> @enderror

</div>

</form>

Step 6: Add Route For Livewire File Upload

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::view('lara-livewire-file-upload','livewire.home');

1	Route::view('lara-livewire-file-upload','livewire.home');

Step 7: Create View File

In this step, go to resources/views/livewire folder and create one blade view files that name home.blade.php file. Then add the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Livewire File Upload Example From Scratch</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
 
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
 
            .full-height {
                height: 100vh;
            }
 
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
 
            .position-ref {
                position: relative;
            }
 
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
 
            .content {
                text-align: center;
            }
 
            .title {
                font-size: 84px;
            }
 
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
 
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                  <div class="card-header bg-success">
                    <h2 class="text-white">Laravel Livewire File Upload Example From Scratch</h2>
                  </div>
 
                    <div class="card-body">
                       @livewire('lara-file-upload')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire File Upload Example From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2 class="text-white">Laravel Livewire File Upload Example From Scratch</h2>

</div>

@livewire('lara-file-upload')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/lara-livewire-file-upload

1	http://localhost:8000/lara-livewire-file-upload

Laravel Livewire Multiple Image Upload Example

In this Laravel Livewire Multiple Image Upload Example tutorial I’ll show you how to upload multiple image file livewire package in laravel project. In this tutorial you will learn to upload multiple image file livewire package in laravel. Laravel livewire package makes uploading and saving multiple image files easy. With Laravel livewire package it is easy handle multiple file upload. It automatically detects multiple attributes on the <input> tag.

Laravel Livewire Multiple Image Upload Example

Step 1: Install Laravel
Step 2: Add Database Detail
Step 3: Generate Migration and Model by Command
Step 4: Install Livewire
Step 5: Create Component
Step 6: Create Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Generate Model and Migration By Command

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Image -m

1	php artisan make:model Image -m

The above command will create a model name Image.php and also create a migration name create_images_table.php. Now, go to database/migrations folder and open create_images_table.php file. Then put the following code into create_images_table.php file:

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

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('images', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

Then go to app\Providers folder and open AppServiceProvider.php file. And put the following code into AppServiceProvider.php file:

use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Now run the following command to create the table into your added database:

php artisan migrate

1	php artisan migrate

Now, Open App/Image.php file and add the fillable properties:

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model

{

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'title'

];

}

Step 4: Install Livewire

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create Component

In this step we will create a component using following command:

php artisan make:livewire upload-multiple-image

1	php artisan make:livewire upload-multiple-image

The above command will create the following components on the following path:

app/Http/Livewire/UploadMultipleImage.php
resources/views/livewire/upload-multiple-image.blade.php

1 2	app/Http/Livewire/UploadMultipleImage.php resources/views/livewire/upload-multiple-image.blade.php

Now, go to app/Http/Livewire folder and open UploadMultipleImage.php file. Then add the following code into your UploadMultipleImage.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Image;
 
class UploadMultipleImage extends Component
{
    use WithFileUploads;
 
    public $images = [];
 
    public function render()
    {
        return view('livewire.upload-multiple-image');
    }
 
    public function store()
    {
        $this->validate([
            'images.*' => 'image|max:1024', // 1MB Max
        ]);
 
        foreach ($this->images as $key => $image) {
            $this->images[$key] = $image->store('images','public');
        }
 
        $this->images = json_encode($this->images);
 
        Image::create(['title' => $this->images]);
 
        session()->flash('message', 'Images has been successfully Uploaded.');
 
        return redirect()->to('/upload-multiple-image');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use Livewire\WithFileUploads;

use App\Image;

class UploadMultipleImage extends Component

{

use WithFileUploads;

public $images = [];

public function render()

{

return view('livewire.upload-multiple-image');

}

public function store()

{

$this->validate([

'images.*' => 'image|max:1024', // 1MB Max

]);

foreach ($this->images as $key => $image) {

$this->images[$key] = $image->store('images','public');

}

$this->images = json_encode($this->images);

Image::create(['title' => $this->images]);

session()->flash('message', 'Images has been successfully Uploaded.');

return redirect()->to('/upload-multiple-image');

}

Now, go to resources/views/livewire folder and open upload-multiple-image.blade.php file. Then put the following code into your upload-multiple-image.blade.php file:

<div>
    <form>
        <div class=" add-input">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="file" class="form-control" wire:model="images" multiple>
                        @error('image.*') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn text-white btn-success" wire:click.prevent="store">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div>

<form>

@error('image.*') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

</div>

</form>

</div>

Step 6: Create Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::view('laravel-livewire-upload-multiple-image','livewire.home');

1	Route::view('laravel-livewire-upload-multiple-image','livewire.home');

Step 7: Create View File

In this step, go to resources/views/livewire folder and create a view files that name home.blade.php file. Then put the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Livewire Upload Multiple Images Example</title>
 
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
 
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
 
            .full-height {
                height: 100vh;
            }
 
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
 
            .position-ref {
                position: relative;
            }
 
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
 
            .content {
                text-align: center;
            }
 
            .title {
                font-size: 84px;
            }
 
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
 
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white"><h3>Laravel Livewire Upload Multiple Images Example</h3></div>
 
                    <div class="card-body">
                        @livewire('upload-multiple-image')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire Upload Multiple Images Example</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<div class="card-header bg-primary text-white"><h3>Laravel Livewire Upload Multiple Images Example</h3></div>

@livewire('upload-multiple-image')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/laravel-livewire-upload-multiple-image

1	http://localhost:8000/laravel-livewire-upload-multiple-image

Laravel Livewire Add or Remove Dynamically Input Fields

In this Laravel Livewire Add or Remove Dynamically Input Fields tutorial I’ll show you how to add or remove multiple input fields dynamically using livewire in laravel. In this tutorial you will learn to create add or remove multiple input fields dynamically using livewire in laravel.

Laravel Livewire Add or Remove Dynamically Input Fields

Step 1: Install Laravel App
Step 2: Add Database Detail
Step 3: Create Model & Migration using Artisan
Step 4: Install Livewire Package
Step 5: Create Component using Artisan
Step 6: Add Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Migration

Now, in this step we will create model and migration file. Please run the following command:

 php artisan make:model Employee -m

1	php artisan make:model Employee -m

The above command will create a model name Employee.php, and create a migration name create_employees_table.php. Now, go to database/migrations folder and open create_ employees_table.php file. Then put the following code into create_ employees_table.php file:

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

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateEmployeesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('employees', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('employees');

}

Now, you navigate to app\Providers folder and open AppServiceProvider.php file. And update the following code into AppServiceProvider.php file:

use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

Next, open your command prompt and run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Next, Navigate to app/Employee.php and update the following code into your Employee.php model as follow:

<?php
  
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Employee extends Model
{
    protected $guarded = [];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model

{

protected $guarded = [];

}

Step 4: Install Livewire Package

In this step, we will install Livewire Package via the composer dependency manager. Use the following command to install Livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Create Component using Artisan

In this step we will create a component using following artisan command:

php artisan make:livewire employees

1	php artisan make:livewire employees

The above command will create a components on the following path:

app/Http/Livewire/Employees.php
resources/views/livewire/employees.blade.php

1 2	app/Http/Livewire/Employees.php resources/views/livewire/employees.blade.php

Now, go to app/Http/Livewire folder and open Employees.php file. Then add the following code into your Employees.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use App\Employee;
use App\Http\Livewire\Field;
use Illuminate\Http\Request;
 
class Employees extends Component
{
    public $employees, $name, $email, $employee_id;
    public $updateMode = false;
    public $inputs = [];
    public $i = 1;
 
    public function add($i)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->inputs ,$i);
    }
 
    public function remove($i)
    {
        unset($this->inputs[$i]);
    }
 
    public function render()
    {
        $this->employees = Employee::all();
        return view('livewire.employees');
    }
 
    private function resetInputFields(){
        $this->name = '';
        $this->email = '';
    }
 
    public function store()
    {
        $validatedDate = $this->validate([
                'name.0' => 'required',
                'email.0' => 'required',
                'name.*' => 'required',
                'email.*' => 'required|email',
            ],
            [
                'name.0.required' => 'name field is required',
                'email.0.required' => 'email field is required',
            'email.0.email' => 'The email must be a valid email address.',
                'name.*.required' => 'name field is required',
                'email.*.required' => 'email field is required',
                'email.*.email' => 'The email must be a valid email address.',
            ]
        );
 
        foreach ($this->name as $key => $value) {
            Employee::create(['name' => $this->name[$key], 'email' => $this->email[$key]]);
        }
 
        $this->inputs = [];
 
        $this->resetInputFields();
 
        session()->flash('message', 'Employee Has Been Created Successfully.');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Employee;

use App\Http\Livewire\Field;

use Illuminate\Http\Request;

class Employees extends Component

{

public $employees, $name, $email, $employee_id;

public $updateMode = false;

public $inputs = [];

public $i = 1;

public function add($i)

{

$i = $i + 1;

$this->i = $i;

array_push($this->inputs ,$i);

}

public function remove($i)

{

unset($this->inputs[$i]);

}

public function render()

{

$this->employees = Employee::all();

return view('livewire.employees');

}

private function resetInputFields(){

$this->name = '';

$this->email = '';

}

public function store()

{

$validatedDate = $this->validate([

'name.0' => 'required',

'email.0' => 'required',

'name.*' => 'required',

'email.*' => 'required|email',

[

'name.0.required' => 'name field is required',

'email.0.required' => 'email field is required',

'email.0.email' => 'The email must be a valid email address.',

'name.*.required' => 'name field is required',

'email.*.required' => 'email field is required',

'email.*.email' => 'The email must be a valid email address.',

]

);

foreach ($this->name as $key => $value) {

Employee::create(['name' => $this->name[$key], 'email' => $this->email[$key]]);

}

$this->inputs = [];

$this->resetInputFields();

session()->flash('message', 'Employee Has Been Created Successfully.');

}

After that, Navigate to resources/views/livewire folder and open employees.blade.php file. Then add the following code into your employees.blade.php file:

<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<form>
<div class=" add-input">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Name" wire:model="name.0">
@error('name.0') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="email" class="form-control" wire:model="email.0" placeholder="Enter Email">
@error('email.0') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-2">
<button class="btn text-white btn-info btn-sm" wire:click.prevent="add({{$i}})">Add</button>
</div>
</div>
</div>
@foreach($inputs as $key => $value)
<div class=" add-input">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Name" wire:model="name.{{ $value }}">
@error('name.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="email" class="form-control" wire:model="email.{{ $value }}" placeholder="Enter Email">
@error('email.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm" wire:click.prevent="remove({{$key}})">remove</button>
</div>
</div>
</div>
@endforeach
<div class="row">
<div class="col-md-12">
<button type="button" wire:click.prevent="store()" class="btn btn-success btn-sm">Save</button>
</div>
</div>
</form>
</div>

<div>

@if (session()->has('message'))

</div>

@endif

<form>

@error('name.0') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

@error('email.0') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

</div>

@foreach($inputs as $key => $value)

@error('name.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror

</div>

@error('email.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<button class="btn btn-danger btn-sm" wire:click.prevent="remove({{$key}})">remove</button>

</div>

@endforeach

</div>

</form>

</div>

Step 6: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

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

Route::get('/employees', function () {

return view('home');

});

Step 7: Create View File

In this step we will create view file. Go to resources/views/ folder and create one blade view files that name home.blade.php file. Then add the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire 7 Dynamically Add/Remove Input Fields</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-success text-white"><h5 style="font-size: 19px;">Laravel Livewire 7 Dynamically Add/Remove Input Fields</h5></div>
<div class="card-body">
@livewire('employees')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Livewire 7 Dynamically Add/Remove Input Fields</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<div class="card-header bg-success text-white"><h5 style="font-size: 19px;">Laravel Livewire 7 Dynamically Add/Remove Input Fields</h5></div>

@livewire('employees')

</div>

@livewireScripts

</body>

</html>

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/employees

1	http://localhost:8000/employees

Laravel 7 Google Bar Chart Example From Scratch

In this Laravel Google Bar Chart Example Tutorial I’ll will show how to use google Bar chart in laravel application. In this tutorial you will learn to implement google Bar char in laravel project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google Bar chart in laravel.

Laravel 7 Google Bar Chart Example From Scratch

Step 1: Install Laravel App
Step 2: Add Database Details
Step 3: Generate Migration & Model File
Step 4: Add Route
Step 5: Create Controller
Step 6: Create Blade File
Step 7: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Configuration

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Generate Migration & Model File

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Order -fm

1	php artisan make:model Order -fm

Then go to app directory and open Order.php file. And put the following code into your Order.php file:

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Order extends Model
{
    protected $guarded = [];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Order extends Model

{

protected $guarded = [];

}

After that go to database/migrations/ and open create_orders_table.php file and update the following code:

Schema::create('orders', function (Blueprint $table) {
    $table->id();
    $table->string("product_name")->nullable();
    $table->string("product_id")->nullable();
    $table->string("price")->nullable();
    $table->timestamps();
});

Schema::create('orders', function (Blueprint $table) {

$table->id();

$table->string("product_name")->nullable();

$table->string("product_id")->nullable();

$table->string("price")->nullable();

$table->timestamps();

});

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

After that, go to database/factories folder and open OrderFactory.php file. And the following code into your OrderFactory.php file:

<?php
 
/** @var \Illuminate\Database\Eloquent\Factory $factory */
 
use App\Order;
use Faker\Generator as Faker;
 
$factory->define(Order::class, function (Faker $faker) {
    return [
        "product_name"          =>  $faker->word,
        "product_id"            =>   $faker->numberBetween(1,100),
        "price"                =>  $faker->numberBetween(1, 100),
    ];
});

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Order;

use Faker\Generator as Faker;

$factory->define(Order::class, function (Faker $faker) {

return [

"product_name" => $faker->word,

"product_id" => $faker->numberBetween(1,100),

"price" => $faker->numberBetween(1, 100),

];

});

Now run the following command to generate fake data into your database in laravel:

 php artisan tinker  //then  factory(\App\Order::class,100)->create()

1	php artisan tinker //then factory(\App\Order::class,100)->create()

Step 4: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get("google-bar-chart", "OrderController@index");

1	Route::get("google-bar-chart", "OrderController@index");

Step 5: Create Controller

Now, lets create a controller named OrderController using command given below –

php artisan make:controller OrderController

1	php artisan make:controller OrderController

Then go to app/http/controller folder and open OrderController.php. And put the following code into your OrderController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Order;
 
class OrderController extends Controller
{
    public function index()
    {
       $orders = Order::all();
       return view('google-bar-chart',['orders' => $orders]);   
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Order;

class OrderController extends Controller

{

public function index()

{

$orders = Order::all();

return view('google-bar-chart',['orders' => $orders]);

}

Step 6: Create Blade File

In this step, we will go to /resources/views/ folder and create a blade view file name google-bar-chart.blade.php. And put the following code into your google-bar-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel Google Bar Chart Example Tutorial</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
</head>
  <body>
    <h2 style="text-align: center;">Laravel Google Bar Charts Example Tutorial</h2>
    <div class="container-fluid p-5">
    <div id="barchart_material" style="width: 100%; height: 500px;"></div>
    </div>
 
    <script type="text/javascript">
 
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
 
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Order Id', 'Price', 'Product Name'],
 
            @php
              foreach($orders as $order) {
                  echo "['".$order->id."', ".$order->price.", ".$order->Product_name."],";
              }
            @endphp
        ]);
 
        var options = {
          chart: {
            title: 'Bar Graph | Price',
            subtitle: 'Price, and Product Name: @php echo $orders[0]->created_at @endphp',
          },
          bars: 'vertical'
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
 
</body>
</html>

<!doctype html>

<head>

<title>Laravel Google Bar Chart Example Tutorial</title>

</head>

<body>

<h2 style="text-align: center;">Laravel Google Bar Charts Example Tutorial</h2>

</div>

google.charts.load('current', {'packages':['bar']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Order Id', 'Price', 'Product Name'],

@php

foreach($orders as $order) {

echo "['".$order->id."', ".$order->price.", ".$order->Product_name."],";

}

@endphp

]);

var options = {

chart: {

title: 'Bar Graph | Price',

subtitle: 'Price, and Product Name: @php echo $orders[0]->created_at @endphp',

bars: 'vertical'

};

var chart = new google.charts.Bar(document.getElementById('barchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));

}

</script>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, open the following URL in browser to see the output –

http://localhost:8000/google-bar-chart

1	http://localhost:8000/google-bar-chart