Category Archives: Laravel

Laravel Tutorials

Laravel 8 Auth Scaffolding using Jetstream Tutorial

In this Laravel 8 Auth Scaffolding using Jetstream Tutorial I will show how to create login, register, logout, forget password, profile and reset password page using laravel jetstream authentication scaffolding without using laravel 8 make:auth command. Jetstream auth with livewire is laravel package that enable us to generate default laravel authentication scaffolding. Laravel jetstream auth includes fully functional login, register, logout, reset password, forget password, email verification, two-factor authentication, session management.

In this laravel 8 jetstream auth scaffolding tutorial I will show you how to use jetstream and livewire package to create auth scaffolding in laravel 8. Jetstream auth will include login, register, reset the password, forget password, email verification, and two-factor authentication blade views and controller file.

Laravel 8 Auth Scaffolding using Jetstream Tutorial

In this step by step Laravel 8 Auth Scaffolding using Jetstream Tutorial I will demonstrate you to implement jetstream authentication scaffolding in laravel 8. Please follow the instruction given below:

Step 1 – Install Laravel 8 App
Step 2 – Database Configuration
Step 3 – Install Auth Scaffolding Jetstream
Step 4 – Install Livewire Package
Step 5 – Jetstream Configuration
Step 6 – Run PHP artisan Migrate
Step 7 – Install Npm Packages
Step 8 – Run Development Server

Step 1 – Install Laravel 8 App

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

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

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

Step 2 – 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=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db name

DB_USERNAME=db user name

DB_PASSWORD=db password

Step 3 – Install Auth Scaffolding Jetstream

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

composer require laravel/jetstream

1	composer require laravel/jetstream

Step 4 – Install Livewire Package

Now run following command to create basic authentication scaffolding login, register, logout and email verification views file:

php artisan jetstream:install livewire

OR

php artisan jetstream:install livewire --teams

php artisan jetstream:install livewire

php artisan jetstream:install livewire --teams

Step 5 – Jetstream Configuration

Next, we will open fortify.php file and will enable and disable option of jetstream package as per requirement, which is located inside config directory.

'features' => [
        Features::registration(),
        Features::resetPasswords(),
        //Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication(),
    ],

'features' => [

Features::registration(),

Features::resetPasswords(),

//Features::emailVerification(),

Features::updateProfileInformation(),

Features::updatePasswords(),

Features::twoFactorAuthentication(),

Step 6 – Run php artisan Migrate

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Step 7 – Install Npm Packages

npm install

1	npm install

Then type the following command on cmd to run npm:

npm run dev

1	npm run dev

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://127.0.0.1:8000/

1	http://127.0.0.1:8000/

Laravel 8 Socialite Google Login Example Tutorial

In this Laravel 8 Socialite Google Login Example Tutorial I’ll show you how to integrate google login in laravel 8 using socialite package. Integrating google login in Laravel 8 using socialite package is much easier. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.

In this step by step tutorial, you will learn to integrate google login with your laravel 8 application. Please follow the steps give below:

Step 1 – Install Laravel 8 App
Step 2 – Configure Database With App
Step 3 – Configure Google App
Step 4 – Install Socialite & Configure
Step 5 – Add Field In Table Using Migration
Step 6 – Install Jetstream Auth
Step 7 – Make Routes
Step 8 – Create Google Login Controller By Command
Step 9 – Integrate Google Login Button In Login Page
Step 10 – Start Development Server

Step 1 – Install Laravel 8 App

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

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

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

Step 2 – Configure Database With App

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 – Configure Google App

In this step, we will configure Google app with this laravel app. So, open your laravel Google social login project in any text editor. Then navigate the config directory and open service.php file and add the client id, secret and callback url:

'google' => [
    'client_id' => 'xxxx',
    'client_secret' => 'xxx',
    'redirect' => 'http://127.0.0.1:8000/callback/google',
  ],

'google' => [

'client_id' => 'xxxx',

'client_secret' => 'xxx',

'redirect' => 'http://127.0.0.1:8000/callback/google',

Step 4 – Install Socialite & Configure

In this step we will Install Socialite Package via Composer using following command:

composer require laravel/socialite

1	composer require laravel/socialite

Now, Navigate to config directory and open app.php file. Then add aliese and provider app.php:

'providers' => [
    /*
     * Package Service Providers...
     */
    Laravel\Socialite\SocialiteServiceProvider::class,
]

'providers' => [

* Package Service Providers...

Laravel\Socialite\SocialiteServiceProvider::class,

]

Then add the Facade in config/app.php:

'aliases' => [
    ...
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

'aliases' => [

...

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

]

Step 5 – Add Field In Table Using Migration

Now, we will create migration to add social login field using following command:

php artisan make:migration add_social_login_field

1	php artisan make:migration add_social_login_field

After that, open the add_social_login_field.php file, which is found inside database/migration directory and add the following code into it:

<?php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
    
class AddSoicalLoginField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('social_id')->nullable();
            $table->string('social_type')->nullable();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('social_id');
           $table->dropColumn('social_type');
         });
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class AddSoicalLoginField extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::table('users', function ($table) {

$table->string('social_id')->nullable();

$table->string('social_type')->nullable();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::table('users', function ($table) {

$table->dropColumn('social_id');

$table->dropColumn('social_type');

});

}

After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:

<?php
 
namespace App\Models;
 
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;
 
class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'social_id',
        'social_type'
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
 
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
 
    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Fortify\TwoFactorAuthenticatable;

use Laravel\Jetstream\HasProfilePhoto;

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens;

use HasFactory;

use HasProfilePhoto;

use Notifiable;

use TwoFactorAuthenticatable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name',

'email',

'password',

'social_id',

'social_type'

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password',

'remember_token',

'two_factor_recovery_codes',

'two_factor_secret',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

/**

* The accessors to append to the model's array form.

* @var array

protected $appends = [

'profile_photo_url',

];

}

After that, execute the following command on cmd to create tables into your selected database:

php artisan migrate

1	php artisan migrate

Step 6 – Install Jetstream Auth

In this step, install jetstream laravel auth scaffolding package with livewire. We have provided a complete guide in this Laravel 8 Auth Scaffolding using Jetstream Tutorial.

Step 7 – Make Routes

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

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\GoogleSocialiteController;
 
 
Route::get('auth/google', [GoogleSocialiteController::class, 'redirectToGoogle']);
Route::get('callback/google', [GoogleSocialiteController::class, 'handleCallback']);

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Auth\GoogleSocialiteController;

Route::get('auth/google', [GoogleSocialiteController::class, 'redirectToGoogle']);

Route::get('callback/google', [GoogleSocialiteController::class, 'handleCallback']);

In this step, run following command to create GoogleSocialiteController.php file:

php artisan make:controller GoogleSocialiteController

1	php artisan make:controller GoogleSocialiteController

Now, go to app/http/controllers directory and open GoogleSocialiteController.php file in any text editor. Then add the following code into GoogleSocialiteController.php file:

<?php
   
namespace App\Http\Controllers\Auth;
   
use App\Http\Controllers\Controller;
use Socialite;
use Auth;
use Exception;
use App\Models\User;
   
class GoogleSocialiteController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }
       
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleCallback()
    {
        try {
     
            $user = Socialite::driver('google')->user();
      
            $finduser = User::where('social_id', $user->id)->first();
      
            if($finduser){
      
                Auth::login($finduser);
     
                return redirect('/home');
      
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'google',
                    'password' => encrypt('my-google')
                ]);
     
                Auth::login($newUser);
      
                return redirect('/home');
            }
     
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Socialite;

use Auth;

use Exception;

use App\Models\User;

class GoogleSocialiteController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function redirectToGoogle()

{

return Socialite::driver('google')->redirect();

}

/**

* Create a new controller instance.

* @return void

public function handleCallback()

{

try {

$user = Socialite::driver('google')->user();

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

if($finduser){

Auth::login($finduser);

return redirect('/home');

}else{

$newUser = User::create([

'name' => $user->name,

'email' => $user->email,

'social_id'=> $user->id,

'social_type'=> 'google',

'password' => encrypt('my-google')

]);

Auth::login($newUser);

return redirect('/home');

}

} catch (Exception $e) {

dd($e->getMessage());

}

In this step, integrate google login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>
 
        <x-jet-validation-errors class="mb-4" />
 
        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif
 
        <form method="POST" action="{{ route('login') }}">
            @csrf
 
            <div>
                <x-jet-label value="{{ __('Email') }}" />
                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>
 
            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>
 
            <div class="block mt-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>
 
            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif
 
                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
 
                <a href="{{ url('auth/google') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2">
                  <strong>Google Login</strong>
                </a> 
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

<x-guest-layout>

<x-jet-authentication-card>

<x-slot name="logo">

<x-jet-authentication-card-logo />

</x-slot>

<x-jet-validation-errors class="mb-4" />

@if (session('status'))

</div>

@endif

@csrf

<div>

<x-jet-label value="{{ __('Email') }}" />

<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />

</div>

<x-jet-label value="{{ __('Password') }}" />

<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />

</div>

<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>

</label>

</div>

@if (Route::has('password.request'))

</a>

@endif

<x-jet-button class="ml-4">

</x-jet-button>

<strong>Google Login</strong>

</a>

</div>

</form>

</x-jet-authentication-card>

</x-guest-layout>

Step 10 – Start 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

1	http://127.0.0.1:8000

How to Use Helper Function in Laravel 8

In this How to Create Custom Helper In Laravel tutorial I will show you how to create custom helper in laravel. In this tutorial you will learn to create custom helper file in laravel. With custom helper file you can define functions that you can reuse in your laravel application.

What Laravel Custom Helper

In laravel, custom helper file helps you to reduce the re-writing the same code again and again. With custom helper file you can define the custom helper functions that you can use anywhere in your laravel project.

How to Create Custom Helper In Laravel 8

In this step by step tutorial I demonstrate you how to create custom helper file in laravel project. I will also show you how to define custom helper function and to call them in laravel application:

Create helpers.php File

In custom helper file you can define your own functions and call anywhere in your laravel project. Go to App directory and create a new file helpers.php like this app/helpers.php.

<?php
  
  function random_code(){
 
    return rand(1111, 9999);
  }
 
 
  function allUpper($str){
    return strtoupper($str);
  }

<?php

function random_code(){

return rand(1111, 9999);

}

function allUpper($str){

return strtoupper($str);

}

Add File Path In composer.json File

In this step, we will add helper file path in composer.json file. Go to root directory and open composer.json file and put the following code into the file:

composer.json

"autoload": {
    "psr-4": {
        "App\\": "app/",
        "Database\\Factories\\": "database/factories/",
        "Database\\Seeders\\": "database/seeders/"
    },
       "files": [
 
        "app/helpers.php"
 
    ]
},

"autoload": {

"psr-4": {

"App\\": "app/",

"Database\\Factories\\": "database/factories/",

"Database\\Seeders\\": "database/seeders/"

"files": [

"app/helpers.php"

]

Run Command for autoloading

Now, go to command prompt and type the given command:

composer dump-autoload

1	composer dump-autoload

How to use helper function in laravel 8

Now, you will learn how to call or use custom helper function in laravel 8:

1 – How to call helper function in laravel blade

<h2><?php echo allUpper('hello world') ?></h2>

1	<h2><?php echo allUpper('hello world') ?></h2>

2 – How to call helper function in laravel controller

public function index()
{   
    $data['title'] = allUpper('hello world');
    return view('view', $data);
}

public function index()

{

$data['title'] = allUpper('hello world');

return view('view', $data);

}

Laravel 8 Send Email Example

In this tutorial we will learn how to send email in laravel 8 using mailable and mailtrap. We will use Laravel 8 builtin mailable markdown class to send emails. In order to send email using mailtrap we will implement laravel 8 builtin mailable markdown class. In this post I’ll show you how to integrate mailtrap to send email in laravel 8 application.

Laravel 8 provides builtin mailable markdown class to send emails. In Laravel 8 you can use mailtrap, smtp, Mailgun, Postmark, Amazon SES, and sendmail for sending emails. You are required to configure driver details on the .env file.

Laravel 8 Send Email Example

In this step by step tutorial you will understand how to send emails in Laravel 8 with the help of Mailtrap. We will explain to you how to use Laravel 8 builtin mailable markdown class to send emails using Mailtrap.

Install Laravel Project

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

composer create-project laravel/laravel --prefer-dist laravel-markdown-demo

1	composer create-project laravel/laravel --prefer-dist laravel-markdown-demo

Adding Mail Configuration in ENV

In this step we will be setting smtp detail for mail configuration in Laravel, We will be using following Gmail SMTP details such as username, password inside the .env file.

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your_email@gmail.com
MAIL_PASSWORD=
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

MAIL_DRIVER=smtp

MAIL_HOST=smtp.gmail.com

MAIL_PORT=587

MAIL_USERNAME=your_email@gmail.com

MAIL_PASSWORD=

MAIL_ENCRYPTION=tls

MAIL_FROM_ADDRESS=null

MAIL_FROM_NAME="${APP_NAME}"

If we are sending email from localhost using Gmail SMTP, then it requires you to turn on the “Allow less secure apps” on?. Go to the link provided:

https://www.google.com/settings/security/lesssecureapps

1	https://www.google.com/settings/security/lesssecureapps

Now, You need to turn on the option “Allow less secure apps”

Define Markdown with Mailable Class

The mailable class in Laravel used for sending emails. Now, lets create a new laravel mailable class using following artisan command:

php artisan make:mail OfferMail --markdown=emails.offerSendMail

1	php artisan make:mail OfferMail --markdown=emails.offerSendMail

Once the above command executed, it will create a new laravel mailable class OfferMail.php in app/Mail/ directory. Open the OfferMail.php file and put the following code in it.

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class OfferMail extends Mailable
{
    use Queueable, SerializesModels;
    public $offer;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($offer)
    {
        $this->offer = $offer;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->markdown('emails.offerSendMail')
            ->with('offer', $this->offer);
    }
}

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;

use Illuminate\Contracts\Queue\ShouldQueue;

use Illuminate\Mail\Mailable;

use Illuminate\Queue\SerializesModels;

class OfferMail extends Mailable

{

use Queueable, SerializesModels;

public $offer;

/**

* Create a new message instance.

* @return void

public function __construct($offer)

{

$this->offer = $offer;

}

/**

* Build the message.

* @return $this

public function build()

{

return $this->markdown('emails.offerSendMail')

->with('offer', $this->offer);

}

Create and Organize Controller

Now, we will create a controller that will handle the logic to send email. Let’s create MailController Controller using following command:

php artisan make:controller MailController

1	php artisan make:controller MailController

Once the above command executed, it will create a controller file MailController.php in app/Http/Controllers/ directory. Open the MailController.php file and put the following code in it.

Controllers/MailController.php

Run Development Server

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

php artisan config:clear

1	php artisan config:clear

php artisan serve

1	php artisan serve

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

Multiple File Upload using Ajax in Laravel 8

In this Multiple File Upload using Ajax in Laravel 8 tutorial, I’ll show you how to upload multiple files using ajax in laravel 8. In this laravel 8 multiple file upload example, I’ll show you how to validate and upload multiple files into folder and then save it into database. In this tutorial before saving multiple image into database we will validate image and then save it into directory. Before uploading the image we will validate the image. After successfully uploading multiple images into the folder and saving it in database we will display success message on the screen.

Multiple File Upload using Ajax in Laravel 8

In this step by step tutorial I’ll demonstrate how to upload multiple files using ajax in laravel 8 with validation. I’ll also show you how to upload multiple pdf, txt, csv, excel, doc files in laravel 8 application. Please follow the steps to upload multiple files in laravel 8 given below:

Step 1 – Install Laravel 8 Application
Step 2 – Database Configuration
Step 3 – Build File Model & Migration
Step 4 – Create Ajax Multiple File Upload Routes
Step 5 – Make Controller using Artisan Command
Step 6 – Create an Ajax Form to Upload Multiple File
Step 7 – Ajax Code to Upload Multiple File
Step 8 – Start Development Server

Step 1 – Install Laravel 8 Application

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

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

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

Step 2 – 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=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db name

DB_USERNAME=db user name

DB_PASSWORD=db password

Step 3 – Build File Model & Migration

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

php artisan make:model File -m

1	php artisan make:model File -m

The above command will create two files:

blog/app/Models/File.php
blog/database/migrations/create_files_table.php

Open create_files_table.php file inside blog/database/migrations/ directory. Then open this file and add the following code into function up() on this file:

public function up()
{
    Schema::create('files', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

public function up()

{

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

$table->id();

$table->string('name');

$table->string('path');

$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

Step 4 – Create Ajax Multiple File Upload Routes

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

use App\Http\Controllers\MultiFileUploadAjaxController;
 
Route::get('multi-file-ajax-upload', [MultiFileUploadAjaxController::class, 'index']);
 
Route::post('store-multi-file-ajax', [MultiFileUploadAjaxController::class, 'storeMultiFile']);

use App\Http\Controllers\MultiFileUploadAjaxController;

Route::get('multi-file-ajax-upload', [MultiFileUploadAjaxController::class, 'index']);

Route::post('store-multi-file-ajax', [MultiFileUploadAjaxController::class, 'storeMultiFile']);

Step 5 – Make Controller using Artisan Command

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

php artisan make:controller AjaxUploadMultipleImageController

1	php artisan make:controller AjaxUploadMultipleImageController

The above command will create AjaxUploadMultipleImageController.php file, which is located inside blog/app/Http/Controllers/ directory. Now, open UploadImagesController.php file and add the following code into it:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\File;
 
class MultiFileUploadAjaxController extends Controller
{
    public function index()
    {
        return view('multi-file-ajax-upload');
    }
 
 
    public function storeMultiFile(Request $request)
    {
         
       $validatedData = $request->validate([
        'files' => 'required',
        'files.*' => 'mimes:csv,txt,xlx,xls,pdf'
        ]);
 
        if($request->TotalFiles > 0)
        {
                
           for ($x = 0; $x < $request->TotalFiles; $x++) 
           {
 
               if ($request->hasFile('files'.$x)) 
                {
                    $file      = $request->file('files'.$x);
 
                    $path = $file->store('public/files');
                    $name = $file->getClientOriginalName();
 
                    $insert[$x]['name'] = $name;
                    $insert[$x]['path'] = $path;
                }
           }
 
            File::insert($insert);
 
            return response()->json(['success'=>'Ajax Multiple fIle has been uploaded']);
 
          
        }
        else
        {
           return response()->json(["message" => "Please try again."]);
        }
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\File;

class MultiFileUploadAjaxController extends Controller

{

public function index()

{

return view('multi-file-ajax-upload');

}

public function storeMultiFile(Request $request)

{

$validatedData = $request->validate([

'files' => 'required',

'files.*' => 'mimes:csv,txt,xlx,xls,pdf'

]);

if($request->TotalFiles > 0)

{

for ($x = 0; $x < $request->TotalFiles; $x++)

{

if ($request->hasFile('files'.$x))

{

$file = $request->file('files'.$x);

$path = $file->store('public/files');

$name = $file->getClientOriginalName();

$insert[$x]['name'] = $name;

$insert[$x]['path'] = $path;

}

File::insert($insert);

return response()->json(['success'=>'Ajax Multiple fIle has been uploaded']);

}

else

{

return response()->json(["message" => "Please try again."]);

}

Step 6 – Create an Ajax Form to Upload Multiple File

In step this we will create blade file. Go to resources/views directory. And then create a new blade view file named multi-file-ajax-upload.blade.php inside this directory. Open multi-file-ajax-upload.blade.php file and put the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Ajax Multiple File Upload</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.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Multiple File Upload Using Ajax In Laravel 8</h2>
<div class="text-center">
<form id="multi-file-upload-ajax" method="POST"  action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="files[]" id="files" placeholder="Choose files" multiple >
</div>
</div>           
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
</div>  
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#multi-file-upload-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalFiles = $('#files')[0].files.length; //Total files
let files = $('#files')[0];
for (let i = 0; i < TotalFiles; i++) {
formData.append('files' + i, files.files[i]);
}
formData.append('TotalFiles', TotalFiles);
$.ajax({
type:'POST',
url: "{{ url('store-multi-file-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
dataType: 'json',
success: (data) => {
this.reset();
alert('Files has been uploaded using jQuery ajax');
},
error: function(data){
alert(data.responseJSON.errors.files[0]);
console.log(data.responseJSON.errors);
}
});
});
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Ajax Multiple File Upload</title>

</head>

<body>

<h2 class="text-center">Multiple File Upload Using Ajax In Laravel 8</h2>

@csrf

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</div>

</form>

</div>

$(document).ready(function (e) {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#multi-file-upload-ajax').submit(function(e) {

e.preventDefault();

var formData = new FormData(this);

let TotalFiles = $('#files')[0].files.length; //Total files

let files = $('#files')[0];

for (let i = 0; i < TotalFiles; i++) {

formData.append('files' + i, files.files[i]);

}

formData.append('TotalFiles', TotalFiles);

$.ajax({

type:'POST',

url: "{{ url('store-multi-file-ajax')}}",

data: formData,

cache:false,

contentType: false,

processData: false,

dataType: 'json',

success: (data) => {

this.reset();

alert('Files has been uploaded using jQuery ajax');

error: function(data){

alert(data.responseJSON.errors.files[0]);

console.log(data.responseJSON.errors);

}

});

</script>

</body>

</html>

Step 7 – Ajax Code to Upload Multiple File

<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#multi-file-upload-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalFiles = $('#files')[0].files.length; //Total files
let files = $('#files')[0];
for (let i = 0; i < TotalFiles; i++) {
formData.append('files' + i, files.files[i]);
}
formData.append('TotalFiles', TotalFiles);
$.ajax({
type:'POST',
url: "{{ url('store-multi-file-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
dataType: 'json',
success: (data) => {
this.reset();
alert('Files has been uploaded using jQuery ajax');
},
error: function(data){
alert(data.responseJSON.errors.files[0]);
console.log(data.responseJSON.errors);
}
});
});
});
</script>

$(document).ready(function (e) {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#multi-file-upload-ajax').submit(function(e) {

e.preventDefault();

var formData = new FormData(this);

let TotalFiles = $('#files')[0].files.length; //Total files

let files = $('#files')[0];

for (let i = 0; i < TotalFiles; i++) {

formData.append('files' + i, files.files[i]);

}

formData.append('TotalFiles', TotalFiles);

$.ajax({

type:'POST',

url: "{{ url('store-multi-file-ajax')}}",

data: formData,

cache:false,

contentType: false,

processData: false,

dataType: 'json',

success: (data) => {

this.reset();

alert('Files has been uploaded using jQuery ajax');

error: function(data){

alert(data.responseJSON.errors.files[0]);

console.log(data.responseJSON.errors);

}

});

</script>

Step 9 – Start 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/multi-file-ajax-upload

1	http://127.0.0.1:8000/multi-file-ajax-upload

Laravel 8 Multiple Image Upload Via API

In this Laravel 8 multiple image file upload via API tutorial I will show you how to upload multiple image file via api in laravel 8. In this tutorial we will learn to upload multiple images using api in laravel 8. We will also learn to create api to upload images in laravel 8.

While working with laravel application we come to situation when we want to upload multiple image file using rest api. We may also want to validate files or images before uploading to server via API or ajax in laravel 8. In this article we will learn to create rest api to upload multiple image in laravel 8.

Laravel 8 Multiple Image Upload Via API

In this step by step tutorial I will show you how to upload multiple image file via API using postman in laravel 8 application.

Step 1: Install Laravel 8 App
Step 2: Database Configuration with App
Step 3: Make Migration & Model
Step 4: Make Api Routes
Step 5: Generate API Controller by Artisan
Step 6: Run Development Server
Step 7: Laravel Multiple Image File Upload Via Api Using PostMan

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 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 Credentials

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: Make 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

The above command will create a model name file and a migration file for the Images table. 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 CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('path');
            $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 CreateImagesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->increments('id');

$table->string('title');

$table->string('path');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

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: Make API Route

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

routes/api.php

use App\Http\Controllers\API\MultipleUploadController;
 
Route::post('multiple-image-upload', [MultipleUploadController::class, 'upload']);

use App\Http\Controllers\API\MultipleUploadController;

Route::post('multiple-image-upload', [MultipleUploadController::class, 'upload']);

Step 5: Generate API Controller by Artisan

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

php artisan make:controller API\MultipleUploadController

1	php artisan make:controller API\MultipleUploadController

The above command will create a controller named MultipleUploadController.php file. Now app/http/controllers/API folder and open MultipleUploadController.php. Then update the following file uploading methods into your MultipleUploadController.php file:

<?php
 
namespace App\Http\Controllers\API;
 
use App\Http\Controllers\Controller;
 
use App\Models\Image;
 
use Validator;
 
use Illuminate\Http\Request;
 
class MultipleUploadController extends Controller
{
 
public function store(Request $request)
{
    if(!$request->hasFile('fileName')) {
        return response()->json(['upload_file_not_found'], 400);
    }
 
    $allowedfileExtension=['pdf','jpg','png'];
    $files = $request->file('fileName'); 
    $errors = [];
 
    foreach ($files as $file) {      
 
        $extension = $file->getClientOriginalExtension();
 
        $check = in_array($extension,$allowedfileExtension);
 
        if($check) {
            foreach($request->fileName as $mediaFiles) {
 
                $path = $mediaFiles->store('public/images');
                $name = $mediaFiles->getClientOriginalName();
      
                //store image file into directory and db
                $save = new Image();
                $save->title = $name;
                $save->path = $path;
                $save->save();
            }
        } else {
            return response()->json(['invalid_file_format'], 422);
        }
 
        return response()->json(['file_uploaded'], 200);
 
    }
}
 
}

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;

use App\Models\Image;

use Validator;

use Illuminate\Http\Request;

class MultipleUploadController extends Controller

{

public function store(Request $request)

{

if(!$request->hasFile('fileName')) {

return response()->json(['upload_file_not_found'], 400);

}

$allowedfileExtension=['pdf','jpg','png'];

$files = $request->file('fileName');

$errors = [];

foreach ($files as $file) {

$extension = $file->getClientOriginalExtension();

$check = in_array($extension,$allowedfileExtension);

if($check) {

foreach($request->fileName as $mediaFiles) {

$path = $mediaFiles->store('public/images');

$name = $mediaFiles->getClientOriginalName();

//store image file into directory and db

$save = new Image();

$save->title = $name;

$save->path = $path;

$save->save();

}

} else {

return response()->json(['invalid_file_format'], 422);

}

return response()->json(['file_uploaded'], 200);

}

Step 6: 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

Step 7: Laravel Multiple Image File Upload Via Api Using PostMan

Now start postman and use the following URL to upload multiple image files via api in laravel 8 app:

http://127.0.0.1:8000/multiple-image-upload

1	http://127.0.0.1:8000/multiple-image-upload

Laravel 8 Send Mail using Queue Tutorial

In this tutorial Laravel 8 Send Mail using Queue Tutorial I will show you how to send mail using queue in laravel 8. In this tutorial you will learn to send mails using queue job In laravel application. In Laravel 8 you can use mailtrap, smtp, Mailgun, Postmark, Amazon SES, and sendmail for sending emails.

When we want to send mails in bulk it takes enough time to send all mails. Sending mails in bulk result time consuming process and may not guarantee all mails being sent. In laravel we can use queue job for sending mail in bulk. In this example we will create a queue job with database driver for sending emails.

Laravel 8 Send Mail using Queue Tutorial

In this step by step tutorial I will demonstrate you how to send mail using queue job In laravel application. Please follow instructions given below:

Step 1 – Install Laravel 8 App
Step 2 – Configuration SMTP & Database
Step 3 – Create Mailable Class
Step 4 – Add Email Send Route
Step 5 – Create Directory And Mail Blade View
Step 6 – Configuration Mail Queue
Step 7 – Build Queue Job For Sending Mail
Step 8 – Run Development Server

Step 1 – Install Laravel 8 App

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

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

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

Step 2 – Configuration SMTP & Database

In this step we will be setting smtp detail for mail configuration in Laravel, We will be using following Gmail SMTP details such as username, password inside the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com 
MAIL_PORT=587 
MAIL_USERNAME=Add your user name here
MAIL_PASSWORD=Add your password here
MAIL_ENCRYPTION=tls

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db name

DB_USERNAME=db user name

DB_PASSWORD=db password

MAIL_DRIVER=smtp

MAIL_HOST=smtp.gmail.com

MAIL_PORT=587

MAIL_USERNAME=Add your user name here

MAIL_PASSWORD=Add your password here

MAIL_ENCRYPTION=tls

Step 3 – Create Mailable Class

The mailable class in Laravel used for sending emails. Now, lets create a new laravel mailable class using following artisan command:

php artisan make:mail NotifyMail

1	php artisan make:mail NotifyMail

Once the above command executed, it will create a new laravel mailable class NotifyMail.php in app/Mail/ directory. Open the NotifyMail.php file and put the following code in it.

<?php
 
namespace App\Mail;
 
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
 
class NotifyMail extends Mailable
{
    use Queueable, SerializesModels;
 
    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }
 
    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('view.name');
    }
}

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;

use Illuminate\Contracts\Queue\ShouldQueue;

use Illuminate\Mail\Mailable;

use Illuminate\Queue\SerializesModels;

class NotifyMail extends Mailable

{

use Queueable, SerializesModels;

/**

* Create a new message instance.

* @return void

public function __construct()

{

}

/**

* Build the message.

* @return $this

public function build()

{

return $this->view('view.name');

}

Now add email template name in build class of the above created notifymail class.

return $this->view('view.name');
to
return $this->view('emails.demoMail');

return $this->view('view.name');

return $this->view('emails.demoMail');

In next step, Create email template named demoMail.blade.php inside resources/views/emails directory. That’s why have added view name email.

Step 4 – Add Send Email 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('email-test', function(){

$details['email'] = 'your_email@gmail.com';

dispatch(new App\Jobs\SendEmailJob($details));

dd('done');
});

Route::get('email-test', function(){

$details['email'] = 'your_email@gmail.com';

dispatch(new App\Jobs\SendEmailJob($details));

dd('done');

});

Step 5 – Create Directory And Mail Blade View

In this step, create directory name emails inside resources/views directory. Then create an demoMail.blade.php blade view file inside resources/views/emails directory. And update the following code into it:

<!DOCTYPE html>
<html>
<head>
 <title>Laravel 8 Send Email Example</title>
</head>
<body>
 
 <h1>This is test mail</h1>
 <p>Laravel 8 send email example</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Send Email Example</title>

</head>

<body>

<p>Laravel 8 send email example</p>

</body>

</html>

Step 6 – Configuration Mail Queue

QUEUE_CONNECTION=database

1	QUEUE_CONNECTION=database

Then open the terminal and run following command for queue database tables:

php artisan queue:table

1	php artisan queue:table

Next, migrate tables into database:

php artisan migrate

1	php artisan migrate

Step 7 – Build Queue Job For Sending Mail

Now we will create a queue job to send emails using following artisan command:

php artisan make:job SendEmailJob

1	php artisan make:job SendEmailJob

Then open SendEmailJob.php file which is placed on “app/Jobs” directory. And update the following mail queue code into it:

<?php
   
namespace App\Jobs;
   
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use App\Mail\SendEmailTest;
use Mail;
   
class SendEmailJob implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
   
    protected $details;
   
    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct($details)
    {
        $this->details = $details;
    }
   
    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        $email = new SendEmailTest();
        Mail::to($this->details['email'])->send($email);
    }
}

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;

use Illuminate\Contracts\Queue\ShouldQueue;

use Illuminate\Foundation\Bus\Dispatchable;

use Illuminate\Queue\InteractsWithQueue;

use Illuminate\Queue\SerializesModels;

use App\Mail\SendEmailTest;

use Mail;

class SendEmailJob implements ShouldQueue

{

use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

protected $details;

/**

* Create a new job instance.

* @return void

public function __construct($details)

{

$this->details = $details;

}

/**

* Execute the job.

* @return void

public function handle()

{

$email = new SendEmailTest();

Mail::to($this->details['email'])->send($email);

}

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://127.0.0.1:8000/email-test

1	http://127.0.0.1:8000/email-test

Laravel 8 Telescope Example Tutorial

In this Laravel 8 Telescope Example Tutorial I will show you how to install and configure telescope in laravel 8. In this tutorial you will learn to install and use telescope in laravel 8. Laravel Telescope can be used to debug requests, exceptions, databases, cache, and much more in real-time by accessing a specific route in your local or production environment in laravel 8 project.

Laravel 8 Telescope Example Tutorial

In this step by step Laravel 8 Telescope Example Tutorial you will learn to install, configure and use telescope in laravel 8. Please follow instruction given below:

Step 1 – Install Telescope

In this step you are required to switch to project directory and then run the following command to install telescope in laravel 8 app:

composer require laravel/telescope

1	composer require laravel/telescope

If you want to use telescope in local environment, so you can use the below command:

composer require laravel/telescope --dev

1	composer require laravel/telescope --dev

Step 2 – Migrate Tables

Now, run following command to migrate database schema.

php artisan telescope:install

php artisan migrate

php artisan telescope:install

php artisan migrate

Step 3 – Configure Telescope

Now we need to configure Telescope, please follow instruction

App\Providers\TelescopeServiceProvider::class,

1	App\Providers\TelescopeServiceProvider::class,

After that, open AppServiceProvider.php file, which is located inside app/providers directory and add the following lines of code into register() method:

public function register()
{
    if ($this->app->isLocal()) {
        $this->app->register(\Laravel\Telescope\TelescopeServiceProvider::class);
        $this->app->register(TelescopeServiceProvider::class);
    }
}

public function register()

{

if ($this->app->isLocal()) {

$this->app->register(\Laravel\Telescope\TelescopeServiceProvider::class);

$this->app->register(TelescopeServiceProvider::class);

}

Step 4 – Configure Dashboard Authorization

Telescope exposes a dashboard at /telescope. You can access this dashboard in the local environment. Go to app/Providers/TelescopeServiceProvider.php file, there is a gate method. This authorization gate controls access to Telescope in non-local environments. From here you can modify this gate as needed to restrict access to your Telescope installation:

protected function gate()
{
    Gate::define('viewTelescope', function ($user) {
        return in_array($user->email, [
            'taylor@laravel.com',
        ]);
    });
}

protected function gate()

{

Gate::define('viewTelescope', function ($user) {

return in_array($user->email, [

'taylor@laravel.com',

]);

});

}

Step 5 – Start 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

Step 6 – Test Laravel Telescope

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

http://127.0.0.1:8000/telescope

1	http://127.0.0.1:8000/telescope

How to Create Controller Model in Laravel 8 using cmd

In this Create Controller And Model Laravel 8 Using Command tutorial I will show you how to Create Controller And Model Using Command In laravel. In this tutorial you will learn to create or generate controller and model using command in laravel. In this article we will learn about laravel artisan command to create controller and model. In this article I will demonstrate you with example to create controller and model using laravel command.

How to Create Controller Model in Laravel 8 using cmd

In this step by step tutorial I will show you how to create or generate controller and model using command in laravel. Please follow the instructions given below:

1 – Create model command
2 – Create Controller command
3 – Create a Resource Controller Command
4 – Laravel make:model with migration and controller
5 – Create Model and Migration
6 – Create API Controller using Artisan
7 – Laravel create model and controller in one command

1 – Create model command

Below is example command to create laravel model. Please Use the php artisan make model for creating a model using the command line (CLI) :

 php artisan make:model Product

1	php artisan make:model Product

2 – Create Controller command

Below is example command to create laravel controller. Please Use the php artisan make controller for creating a controller using the command line (CLI) :

 php artisan make:controller ProductController

1	php artisan make:controller ProductController

This command will create controller named ProductController, Which is placed on app/http/controllers directory.

3 – Create a Resource Controller Command

Below is example command to create a resource controller. Please Use the php artisan make controller with –resource option for creating a resource controller:

php artisan make:controller ProductController --resource

1	php artisan make:controller ProductController --resource

4 – Laravel make:model with migration and controller

The below command will create model, migration and controller in one command:

 php artisan make:model Product -mcr

1	php artisan make:model Product -mcr

5 – Create Model and Migration

The below command will create model and migration in one command:

php artisan make:model Product -m

1	php artisan make:model Product -m

6 – Create API Controller using Artisan

The below command will create API\controller:

php artisan make:controller API\ProductController

1	php artisan make:controller API\ProductController

7 – Laravel create model and controller in one command

The below command will create model and controller in one command:

php artisan make:model Product -c

1	php artisan make:model Product -c

Laravel 8 Autocomplete Search from Database Tutorial

In this Laravel 8 Autocomplete Search using Jquery UI tutorial I will show you how to create autocomplete input or search box using jquery ui in laravel 8. In this tutorial you will learn to create autocomplete input box using jquery ui in laravel 8. In this article we will be creating dynamic database driven ajax jquery autocomplete in Laravel.

In this example we will be using autocomplete jquery ui plugin. The jquery autocomplete plugin is used to create dynamic autocomplete input with several options. In this example you will learn how to implement jquery autocomplete in laravel.

Laravel 8 Autocomplete Search from Database Tutorial

In this article, I will show you to create a dynamic database driven ajax jquery autocomplete in Laravel 8. You will also learn to create a dynamic search dropdown autocomplete which will fetch options from database table using jquery autocomplete.

Step 1 – Install Laravel 8 App
Step 2 – Database Configuration Database
Step 3 – Make Model and Migration
Step 4 – Make Routes
Step 5 – Create Controller
Step 6 – Create Blade View
Step 7 – Implement jQuery Ajax Code
Step 8 – Run Development Server

Step 1 – Install Laravel 8 App

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

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

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

Step 2 – Database Configuration 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 – Make Model and Migration

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

php artisan make:model Product -m

1	php artisan make:model Product -m

Now, open product.php file and add the following code into it, which is placed on app/model directory:

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Product extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'name'

];

}

After that, open create_products_tables.php and add the following code into it, which is placed on database/migration directory:

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Step 4 – Create Routes

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

<?php
   
use Illuminate\Support\Facades\Route;
   
use App\Http\Controllers\AutoCompleteController;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::get('search', [AutoCompleteController::class, 'index'])->name('search');
Route::get('autocomplete', [AutoCompleteController::class, 'autocomplete'])->name('autocomplete');

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\AutoCompleteController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('search', [AutoCompleteController::class, 'index'])->name('search');

Route::get('autocomplete', [AutoCompleteController::class, 'autocomplete'])->name('autocomplete');

Step 5 – Create Controller

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

php artisan make:controller AutoCompleteController

1	php artisan make:controller AutoCompleteController

Then open AutoCompleteController.php and put the following code into this file, which is placed on app/http/controllers directory:

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Models\Product;
   
class AutoCompleteController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('autocomplete-search');
    }
   
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $res = Product::select("name")
                ->where("name","LIKE","%{$request->term}%")
                ->get();
    
        return response()->json($res);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Product;

class AutoCompleteController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

return view('autocomplete-search');

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function autocomplete(Request $request)

{

$res = Product::select("name")

->where("name","LIKE","%{$request->term}%")

->get();

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

}

Step 6 – Create Blade View

In this step we will create blade file, Go to resources/views directory and create blade view file name autocomplete-search.blade.php. Then put the following code into autocomplete-search.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Autocomplete Textbox From Database with jQuery Ajax</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
     var siteUrl = "{{url('/')}}";
  </script>
</head>
<body>
 
<div class="container mt-4">
 
  <div class="card">
    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 8 Autocomplete Textbox From Database using jQuery ajax</h2>
    </div>
 
    <div class="card-body">
      <form name="autocomplete-textbox" id="autocomplete-textbox" method="post" action="#">
       @csrf
 
        <div class="form-group">
          <label for="exampleInputEmail1">Search Product By Name</label>
          <input type="text" id="name" name="name" class="form-control">
        </div>
 
      </form>
    </div>
  </div>
   
</div>  
  <script src="{{ asset('auto.js') }}"></script>
</body>
 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Autocomplete Textbox From Database with jQuery Ajax</title>

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

</script>

</head>

<body>

<h2>Laravel 8 Autocomplete Textbox From Database using jQuery ajax</h2>

</div>

@csrf

<label for="exampleInputEmail1">Search Product By Name</label>

</div>

</form>

</div>

</body>

</html>

Step 7 – Implement jQuery Ajax Code

In this step, Navigate public directory and create one file name auto.js.

Then add the following code in auto.js file:

$(document).ready(function() {
    $( "#name" ).autocomplete({
  
        source: function(request, response) {
            $.ajax({
            url: siteUrl + '/' +"autocomplete",
            data: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.name;
               }); 
  
               response(resp);
            }
        });
    },
    minLength: 2
 });
});

$(document).ready(function() {

$( "#name" ).autocomplete({

source: function(request, response) {

$.ajax({

url: siteUrl + '/' +"autocomplete",

data: {

term : request.term

dataType: "json",

success: function(data){

var resp = $.map(data,function(obj){

return obj.name;

});

response(resp);

}

});

minLength: 2

});

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

1	http://localhost:8000/search

Laravel 8 Livewire CRUD with Jetstream Example

In this Laravel 8 Livewire CRUD with Jetstream Example tutorial I will show you how to create simple CRUD Application using jetstream auth with livewire in laravel 8. In this tutorial, you will learn to create a simple CRUD (Create, Read, Update and Delete) application with jetstream auth and livewire in Laravel 8. In this Laravel 8 CRUD operation example tutorial I’ll show you how to create a simple crud application with jetstream auth and livewire in laravel 8. In this example we will learn how to create a simple crud operation application in laravel 8. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) application with jetstream auth and livewire in laravel 8.

Laravel 8 Livewire CRUD with Jetstream Example

In this tutorial, you will learn step by step how to build simple crud operation app in laravel 8. You will also learn to create a simple CRUD application with jetstream auth and livewire in Laravel 8.

Step 1 – Download Laravel 8 App
Step 2 – Connect Laravel 8 App To Database
Step 3 – Make Model & Migration
Step 4 – Install Jetstream Auth with Livewire
Step 5 – Build Todos Livewire Components
Step 6 – Create Routes
Step 7 – Update Todo Component File
Step 8 – Create And Update Blade Files
Step 9 – Start Development Server

Step 1 – Download Laravel 8 App

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

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

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

Step 2 – Connect Laravel 8 App To 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=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database-name

DB_USERNAME=database-user-name

DB_PASSWORD=database-password

Step 3 – Make Model & Migration

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

php artisan make:model Todo -m

1	php artisan make:model Todo -m

Now, open create_todos_table.php file inside Laravel8CRUD/database/migrations/ directory. Then put the function up() with following code:

    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

public function up()

{

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

$table->id();

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

Then add the fillable property in Todo.php, which is placed on app/models direcotry:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Todo extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'title', 'description',
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model

{

use HasFactory;

protected $fillable = [

'title', 'description',

];

}

Step 4 – Install Jetstream Auth with Livewire

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

composer require laravel/jetstream

1	composer require laravel/jetstream

After that, execute the following command on terminal to install livewire package in laravel 8 app:

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

Then, execute the “npm install && npm run dev” command to build your assets:

npm install

1	npm install

To run npm:

npm run dev

1	npm run dev

Then, Execute the following command on the terminal to create tables into the database:

php artisan migrate

1	php artisan migrate

Step 5 – Build Todos Livewire Component

Now, we will create a livewire compoent using following command:

php artisan make:livewire todos

1	php artisan make:livewire todos

This command will create two files, which is located on following path:

app/Http/Livewire/Todos.php
resources/views/livewire/todos.blade.php

1 2	app/Http/Livewire/Todos.php resources/views/livewire/todos.blade.php

Step 6 – Create Routes

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

routes/web.php

use App\Http\Livewire\Todos;
 
Route::get('todos', Todos::class);

use App\Http\Livewire\Todos;

Route::get('todos', Todos::class);

Step 7 – Update Todo Component File

Now, update the Todo.php component file with the following code, which is placed on app/Http/Livewire directory:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use App\Models\Todo;
 
class Todos extends Component
{
   public $todos, $title, $description, $todo_id;
    public $isOpen = 0;
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function render()
    {
        $this->todos = Todo::all();
        return view('livewire.todos');
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function openModal()
    {
        $this->isOpen = true;
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function closeModal()
    {
        $this->isOpen = false;
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    private function resetInputFields(){
        $this->title = '';
        $this->description = '';
        $this->todo_id = '';
    }
      
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);
    
        Todo::updateOrCreate(['id' => $this->todo_id], [
            'title' => $this->title,
            'description' => $this->description
        ]);
   
        session()->flash('message', 
            $this->todo_id ? 'Todo Updated Successfully.' : 'Todo Created Successfully.');
   
        $this->closeModal();
        $this->resetInputFields();
    }
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function edit($id)
    {
        $Todo = Todo::findOrFail($id);
        $this->todo_id = $id;
        $this->title = $Todo->title;
        $this->description = $Todo->description;
     
        $this->openModal();
    }
      
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function delete($id)
    {
        Todo::find($id)->delete();
        session()->flash('message', 'Todo Deleted Successfully.');
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Todo;

class Todos extends Component

{

public $todos, $title, $description, $todo_id;

public $isOpen = 0;

/**

* The attributes that are mass assignable.

* @var array

public function render()

{

$this->todos = Todo::all();

return view('livewire.todos');

}

/**

* The attributes that are mass assignable.

* @var array

public function create()

{

$this->resetInputFields();

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function openModal()

{

$this->isOpen = true;

}

/**

* The attributes that are mass assignable.

* @var array

public function closeModal()

{

$this->isOpen = false;

}

/**

* The attributes that are mass assignable.

* @var array

private function resetInputFields(){

$this->title = '';

$this->description = '';

$this->todo_id = '';

}

/**

* The attributes that are mass assignable.

* @var array

public function store()

{

$this->validate([

'title' => 'required',

'description' => 'required',

]);

Todo::updateOrCreate(['id' => $this->todo_id], [

'title' => $this->title,

'description' => $this->description

]);

session()->flash('message',

$this->todo_id ? 'Todo Updated Successfully.' : 'Todo Created Successfully.');

$this->closeModal();

$this->resetInputFields();

}

/**

* The attributes that are mass assignable.

* @var array

public function edit($id)

{

$Todo = Todo::findOrFail($id);

$this->todo_id = $id;

$this->title = $Todo->title;

$this->description = $Todo->description;

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function delete($id)

{

Todo::find($id)->delete();

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

}

Step 8 – Create And Update Blade Files

In this step we will create blade view files for crud operations. Lets open todos.blade.php file and update the following code into it, which is placed on resources/views/livewire directory:

<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Manage todos (Laravel 8 Jetstream Livewire CRUD Example</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
@if (session()->has('message'))
<div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert">
<div class="flex">
<div>
<p class="text-sm">{{ session('message') }}</p>
</div>
</div>
</div>
@endif
<button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create Todo</button>
@if($isOpen)
@include('livewire.create')
@endif
<table class="table-fixed w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-4 py-2 w-20">No.</th>
<th class="px-4 py-2">Title</th>
<th class="px-4 py-2">Desc</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
@foreach($todos as $todo)
<tr>
<td class="border px-4 py-2">{{ $todo->id }}</td>
<td class="border px-4 py-2">{{ $todo->title }}</td>
<td class="border px-4 py-2">{{ $todo->description}}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $todo->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $todo->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>

<x-slot name="header">

Manage todos (Laravel 8 Jetstream Livewire CRUD Example</h2>

</x-slot>

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

<div>

<p class="text-sm">{{ session('message') }}</p>

</div>

@endif

<button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create Todo</button>

@if($isOpen)

@include('livewire.create')

@endif

<thead>

<th class="px-4 py-2">Title</th>

<th class="px-4 py-2">Action</th>

</tr>

</thead>

<tbody>

@foreach($todos as $todo)

<tr>

<td class="border px-4 py-2">{{ $todo->title }}</td>

<td class="border px-4 py-2">{{ $todo->description}}</td>

<button wire:click="edit({{ $todo->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>

<button wire:click="delete({{ $todo->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

Then create one new blade view file name create.blade.php inside resources/views/livewire directory. And update the following code into it::

<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<form>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="">
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Title" wire:model="title">
@error('title') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="description" placeholder="Enter Description"></textarea>
@error('description') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Save
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</div>
</form>
</div>
</div>
</div>

</div>

<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?

<form>

<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>

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

</div>

<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>

@error('description') <span class="text-red-500">{{ $message }}</span>@enderror

</div>

Save

</button>

</span>

Cancel

</button>

</span>

</div>

</form>

</div>

Step 9 – Start 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/todos

1	http://127.0.0.1:8000/todos

Laravel 8 Login with Linkedin Example Tutorial

In this Laravel 8 Login with Linkedin Example Tutorial I’ll show you how to integrate socialite LinkedIn social login in laravel 8 application. In this tutorial you will learn to integrate LinkedIn login in laravel. In this article we will integrate login with LinkedIn in laravel application.

As we all know that users are not much interested in filling up long registration form to register with any application. Allowing users to login with their social media accounts is quick and powerful way to get registered/verified users for your laravel application. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application. In this step by step tutorial, you will learn to integrate linkedin login with your laravel application.

This tutorial is step by step guide for you on how to integrate linkedin social login in laravel 8 using socialite package.

Step 1:- create linkedin app by click the following url :- https://www.linkedin.com/developers/apps/new . And create linkedin app.

Step 2:- After successfully create the app set the redirect URL for example :

Step 3:- Finally, you redirect to dashboard by linkedin.com. So you can copy client id and secret from linkedin app dashboard.

Step 1 – Install Laravel 8 App
Step 2 – Connecting App to Database
Step 3 – Configure the Linkedin App
Step 4 – Install Socialite & Configure
Step 5 – Add Field In Table Using Migration
Step 6 – Install Jetstream Auth
Step 7 – Make Routes
Step 8 – Create Linkedin Login Controller By Command
Step 9 – Integrate Linkedin Login Button In Login Page
Step 10 – Start Development Server

Step 1 – Install Laravel 8 App

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

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

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

Step 2 – Connecting App to 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 – Configure Linkedin App

In this step, we will create linkedin app for client and secret key, go to following link

https://www.linkedin.com/developers/apps/new

1	https://www.linkedin.com/developers/apps/new

Now create linkedin app filling the details and create your linkedin app. After creating the app set the redirect URL. Now, copy the client id and secret from linkedin app dashboard.Now, configure Linkedin app with this laravel app. So, open your laravel Linkedin social login project in any text editor. Then navigate the config directory and open service.php file and add the client id, secret and callback url:

 'linkedin' => [
    'client_id' => 'xxxx',
    'client_secret' => 'xxx',
    'redirect' => 'http://127.0.0.1:8000/callback/linkedin',
  ],

'linkedin' => [

'client_id' => 'xxxx',

'client_secret' => 'xxx',

'redirect' => 'http://127.0.0.1:8000/callback/linkedin',

Step 4 – Install Socialite & Configure

In this step we will Install Socialite Package via Composer using following command:

composer require laravel/socialite

1	composer require laravel/socialite

After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
    /*
     * Package Service Providers...
     */
    Laravel\Socialite\SocialiteServiceProvider::class,
]

'providers' => [

* Package Service Providers...

Laravel\Socialite\SocialiteServiceProvider::class,

]

Then add the Facade in config/app.php:

'aliases' => [
    ...
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

'aliases' => [

...

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

]

Step 5 – Add Field In Table Using Migration

Now, we will create a migration file to add social login fields using following command:

php artisan make:migration add_social_login_field

1	php artisan make:migration add_social_login_field

Now, open the add_social_login_field.php file, which is found inside database/migration directory and add the following code into it:

<?php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
    
class AddSoicalLoginField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('social_id')->nullable();
            $table->string('social_type')->nullable();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('social_id');
           $table->dropColumn('social_type');
         });
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class AddSoicalLoginField extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::table('users', function ($table) {

$table->string('social_id')->nullable();

$table->string('social_type')->nullable();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::table('users', function ($table) {

$table->dropColumn('social_id');

$table->dropColumn('social_type');

});

}

After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:

<?php
 
namespace App\Models;
 
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;
 
class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'social_id',
        'social_type'
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
 
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
 
    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Fortify\TwoFactorAuthenticatable;

use Laravel\Jetstream\HasProfilePhoto;

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens;

use HasFactory;

use HasProfilePhoto;

use Notifiable;

use TwoFactorAuthenticatable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name',

'email',

'password',

'social_id',

'social_type'

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password',

'remember_token',

'two_factor_recovery_codes',

'two_factor_secret',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

/**

* The accessors to append to the model's array form.

* @var array

protected $appends = [

'profile_photo_url',

];

}

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

php artisan migrate

1	php artisan migrate

Step 6 – Install Jetstream Auth

In this step, install jetstream laravel auth scaffolding package with livewire. We have provided a complete guide in this Laravel 8 Auth Scaffolding using Jetstream Tutorial.

Step 7 – Make Routes

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

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\LinkedinSocialiteController;
 
 
Route::get('auth/linkedin', [LinkedinSocialiteController::class, 'redirectToLinkedin']);
Route::get('callback/linkedin', [LinkedinSocialiteController::class, 'handleCallback']);

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Auth\LinkedinSocialiteController;

Route::get('auth/linkedin', [LinkedinSocialiteController::class, 'redirectToLinkedin']);

Route::get('callback/linkedin', [LinkedinSocialiteController::class, 'handleCallback']);

In this step, run the following command to create LinkedinSocialiteController.php file:

php artisan make:controller LinkedinSocialiteController

1	php artisan make:controller LinkedinSocialiteController

Now, go to app/http/controllers directory and open LinkedinSocialiteController.php file in any text editor. Then add the following code into LinkedinSocialiteController.php file:

<?php
   
namespace App\Http\Controllers\Auth;
   
use App\Http\Controllers\Controller;
use Socialite;
use Auth;
use Exception;
use App\Models\User;
   
class LinkedinSocialiteController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToLinkedin()
    {
        return Socialite::driver('linkedin')->redirect();
    }
       
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleCallback()
    {
        try {
     
            $user = Socialite::driver('linkedin')->user();
      
            $finduser = User::where('social_id', $user->id)->first();
      
            if($finduser){
      
                Auth::login($finduser);
     
                return redirect('/home');
      
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'linkedin',
                    'password' => encrypt('my-linkedin')
                ]);
     
                Auth::login($newUser);
      
                return redirect('/home');
            }
     
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Socialite;

use Auth;

use Exception;

use App\Models\User;

class LinkedinSocialiteController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function redirectToLinkedin()

{

return Socialite::driver('linkedin')->redirect();

}

/**

* Create a new controller instance.

* @return void

public function handleCallback()

{

try {

$user = Socialite::driver('linkedin')->user();

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

if($finduser){

Auth::login($finduser);

return redirect('/home');

}else{

$newUser = User::create([

'name' => $user->name,

'email' => $user->email,

'social_id'=> $user->id,

'social_type'=> 'linkedin',

'password' => encrypt('my-linkedin')

]);

Auth::login($newUser);

return redirect('/home');

}

} catch (Exception $e) {

dd($e->getMessage());

}

In this step, integrate linkedin login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>
 
        <x-jet-validation-errors class="mb-4" />
 
        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif
 
        <form method="POST" action="{{ route('login') }}">
            @csrf
 
            <div>
                <x-jet-label value="{{ __('Email') }}" />
                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>
 
            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>
 
            <div class="block mt-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>
 
            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif
 
                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
 
                <a href="{{ url('auth/linkedin') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2">
                  <strong>Linkedin Login</strong>
                </a> 
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

<x-guest-layout>

<x-jet-authentication-card>

<x-slot name="logo">

<x-jet-authentication-card-logo />

</x-slot>

<x-jet-validation-errors class="mb-4" />

@if (session('status'))

</div>

@endif

@csrf

<div>

<x-jet-label value="{{ __('Email') }}" />

<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />

</div>

<x-jet-label value="{{ __('Password') }}" />

<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />

</div>

<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>

</label>

</div>

@if (Route::has('password.request'))

</a>

@endif

<x-jet-button class="ml-4">

</x-jet-button>

<strong>Linkedin Login</strong>

</a>

</div>

</form>

</x-jet-authentication-card>

</x-guest-layout>

Step 10 – Start 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

1	http://127.0.0.1:8000

Laravel 8 Auth Scaffolding using Jetstream Tutorial

Step 1 – Install Laravel 8 App

Step 2 – Database Configuration

Step 3 – Install Auth Scaffolding Jetstream

Step 4 – Install Livewire Package

Step 5 – Jetstream Configuration

Step 6 – Run php artisan Migrate

Step 7 – Install Npm Packages

Step 8 – Run Development Server

Laravel 8 Socialite Google Login Example Tutorial

Step 1 – Install Laravel 8 App

Step 2 – Configure Database With App

Step 3 – Configure Google App

Step 4 – Install Socialite & Configure

Step 5 – Add Field In Table Using Migration

Step 6 – Install Jetstream Auth

Step 7 – Make Routes

Step 8 – Create Google Login Controller By Command

Step 9 – Integrate Google Login Button In Login Page

Step 10 – Start Development Server

What Laravel Custom Helper

How to Create Custom Helper In Laravel 8

Create helpers.php File

Add File Path In composer.json File

Run Command for autoloading

How to use helper function in laravel 8

1 – How to call helper function in laravel blade

2 – How to call helper function in laravel controller

Laravel 8 Send Email Example

Install Laravel Project

Adding Mail Configuration in ENV

Define Markdown with Mailable Class

Create and Organize Controller

Define Route

Create Email Template

Run Development Server

Multiple File Upload using Ajax in Laravel 8

Step 1 – Install Laravel 8 Application

Step 2 – Database Configuration

Step 3 – Build File Model & Migration

Step 4 – Create Ajax Multiple File Upload Routes

Step 5 – Make Controller using Artisan Command

Step 6 – Create an Ajax Form to Upload Multiple File

Step 7 – Ajax Code to Upload Multiple File

Step 9 – Start Development Server

Laravel 8 Multiple Image Upload Via API

Step 1: Install Laravel 8 App

Step 2: Add Database Credentials

Step 3: Make Migration & Model

Step 4: Make API Route

Step 5: Generate API Controller by Artisan

Step 6: Run Development Server

Step 7: Laravel Multiple Image File Upload Via Api Using PostMan

Laravel 8 Send Mail using Queue Tutorial

Step 1 – Install Laravel 8 App

Step 2 – Configuration SMTP & Database

Step 3 – Create Mailable Class

Step 4 – Add Send Email Route

Step 5 – Create Directory And Mail Blade View

Step 6 – Configuration Mail Queue

Step 7 – Build Queue Job For Sending Mail

Step 8 – Run Development Server

Laravel 8 Telescope Example Tutorial

Step 1 – Install Telescope

Step 2 – Migrate Tables

Step 3 – Configure Telescope

Step 4 – Configure Dashboard Authorization

Step 5 – Start Development Server

Step 6 – Test Laravel Telescope

How to Create Controller Model in Laravel 8 using cmd

1 – Create model command

2 – Create Controller command

3 – Create a Resource Controller Command

4 – Laravel make:model with migration and controller

5 – Create Model and Migration

6 – Create API Controller using Artisan

7 – Laravel create model and controller in one command

Laravel 8 Autocomplete Search from Database Tutorial

Step 1 – Install Laravel 8 App

Step 2 – Database Configuration Database