Category Archives: Blog

Blog

Laravel 5.8 Autocomplete Search Using Typeahead JS

In this article, I will show you how to create a dynamic database driven ajax jquery autocomplete using typeahead js in Laravel. In this tutorial we will create a dynamic search dropdown autocomplete which will fetch options from database table using bootstrap typeahead js.

The Typeahead JS is a jquery plugin, it is used to create dynamic autocomplete input with several options. In this example you will learn how to implement typeahead autocomplete in laravel.

Before starting with example I assume that you already have fresh laravel 5.8 installation ready, if you have not installed it yet you can follow laravel 5 installation instruction here.

Install Laravel 5.8

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

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

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

Configure Database In .env file

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

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Create Model and Migration

Now, we have to define table schema for contact table. Open terminal and let’s run the following command to generate a Contact model along with a migration file to create contact table in our database.

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the contact table will be created in database.

Create AutoComplete Controller

Next, we have to create a controller for AutoComplete suggestion. Create a controller named AutoCompleteController using command given below –

php artisan make:controller AutoCompleteController

1	php artisan make:controller AutoCompleteController

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

app/Http/Controllers/AutoCompleteController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Contact;

class AutoCompleteController extends Controller
{
    //
    public function index()
    {
        return view('TypeaheadAutocomplete.search');
    }
 
    public function search(Request $request)
    {
          $search = $request->get('term');
      
          $result = Contact::where('name', 'LIKE', '%'. $search. '%')->get();
 
          return response()->json($result);
            
    } 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Contact;

class AutoCompleteController extends Controller

{

public function index()

{

return view('TypeaheadAutocomplete.search');

}

public function search(Request $request)

{

$search = $request->get('term');

$result = Contact::where('name', 'LIKE', '%'. $search. '%')->get();

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

}

Create Blade / View Files

In this step, we will create view/blade file to perform autocomplete Search Using Typeahead JS. Lets create a blade file “search.blade.php” in “resources/views/TypeaheadAutocomplete/” directory and put the following code in it respectively.

resources/views/TypeaheadAutocomplete/search.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 5.8 Autocomplete Search Using Typeahead JS</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>
 
<div class="container">
    <div class="row">
        <div class="col-12"><h2>Laravel 5.8 Autocomplete Search Using Typeahead JS - W3Adda</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    var route = "{{ url('autocomplete') }}";
    $('#search').typeahead({
        source:  function (term, process) {
        return $.get(route, { term: term }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 Autocomplete Search Using Typeahead JS</title>

<style>

.container{

padding: 10%;

text-align: center;

}

</style>

</head>

<body>

<div class="col-12"><h2>Laravel 5.8 Autocomplete Search Using Typeahead JS - W3Adda</h2></div>

</div>

var route = "{{ url('autocomplete') }}";

$('#search').typeahead({

source: function (term, process) {

return $.get(route, { term: term }, function (data) {

return process(data);

});

}

});

</script>

</body>

</html>

Create Routes

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

routes/web.php

Route::get('search', 'AutoCompleteController@index');
Route::get('autocomplete', 'AutoCompleteController@search');

1 2	Route::get('search', 'AutoCompleteController@index'); Route::get('autocomplete', 'AutoCompleteController@search');

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

Output 1:-

Output 2:-

Create REST API With Passport Authentication In Laravel 5.8

Leave a reply

Laravel 5.8 Create REST API With Passport Authentication

In this tutorial, i will show you how to create rest api in laravel 5.8 application with passport authentication. In this tutorial we will be using passport for api authentication. we will create register and login api with simple retrieve user details.

Laravel comes with default login authentication, but when we want to create APIs we have to use tokens instead of sessions for authenticating users, as APIs does not support session variables. After login via API, user must be assigned a token and sent back to the user which is further used for authenticating API requests. Laravel provides Passport authentication which makes it easy creating REST APIs in laravel.

Install Laravel 5.8

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

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

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

Configure Database In .env file

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

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Install Passport Package

In this step, we need to install Laravel Passport package via the composer dependency manager. Use the following command to install passport package.

composer require laravel/passport

1	composer require laravel/passport

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

config/app.php

'providers' => [
    ....
    Laravel\Passport\PassportServiceProvider::class,
]

'providers' => [

....

Laravel\Passport\PassportServiceProvider::class,

]

Run Migration and Install Laravel Passport

After successfully installing ‘laravel/passport’ package, we require to create default passport tables in our database. so let’s run the following command to migrate Laravel Passport tables to your database.

php artisan migrate

1	php artisan migrate

Now, it is mandatory to install passport using the command below. This command will generate encryption keys required to generate secret access tokens.

php artisan passport:install

1	php artisan passport:install

Laravel Passport Configuration

Now, we need to make following changes in our model, service provider and auth config file to complete passport configuration. Open App/User.php model file and add ‘Laravel\Passport\HasApiTokens’ trait in it.

<?php
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Laravel\Passport\HasApiTokens;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements MustVerifyEmail

{
    use HasApiTokens, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */

    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [

        'password', 'remember_token',

    ];

}

<?php

namespace App;

use Illuminate\Notifications\Notifiable;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Laravel\Passport\HasApiTokens;

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements MustVerifyEmail

{

use HasApiTokens, Notifiable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

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

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password', 'remember_token',

];

}

Next Register passport routes in App/Providers/AuthServiceProvider.php, open App/Providers/AuthServiceProvider.php and put “Passport::routes()” inside the boot method like below.

<?php
namespace App\Providers;
use Laravel\Passport\Passport; 
use Illuminate\Support\Facades\Gate; 
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
class AuthServiceProvider extends ServiceProvider 
{ 
    /** 
     * The policy mappings for the application. 
     * 
     * @var array 
     */
    protected $policies = [ 
        'App\Model' => 'App\Policies\ModelPolicy', 
    ];
/** 
     * Register any authentication / authorization services. 
     * 
     * @return void 
     */
    public function boot() 
    { 
        $this->registerPolicies(); 
        Passport::routes(); 
    } 
}

<?php

namespace App\Providers;

use Laravel\Passport\Passport;

use Illuminate\Support\Facades\Gate;

use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider

{

/**

* The policy mappings for the application.

* @var array

protected $policies = [

'App\Model' => 'App\Policies\ModelPolicy',

];

/**

* Register any authentication / authorization services.

* @return void

public function boot()

{

$this->registerPolicies();

Passport::routes();

}

Now open config/auth.php file and set api driver to passport instead of session.

<?php

return [
    .....
    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',

        ],
        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],
    .....
]

<?php

return [

.....

'guards' => [

'web' => [

'driver' => 'session',

'provider' => 'users',

'api' => [

'driver' => 'passport',

'provider' => 'users',

.....

]

Create API Routes

Let’s create API routes. Open routes/api.php file create api routes as below –

Route::prefix('v1')->group(function(){
 Route::post('login', 'Api\AuthController@login');
 Route::post('register', 'Api\AuthController@register');
 Route::group(['middleware' => 'auth:api'], function(){
 Route::post('getUser', 'Api\AuthController@getUser');
 });
});

Route::prefix('v1')->group(function(){

Route::post('login', 'Api\AuthController@login');

Route::post('register', 'Api\AuthController@register');

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

Route::post('getUser', 'Api\AuthController@getUser');

});

Create Authentication Controller

Now, create a Authentication Controller name AuthController. Use the below command to create controller.

php artisan make:controller Api\AuthController

1	php artisan make:controller Api\AuthController

Once the above command executed, it will create a resource controller file “AuthController.php” in “app/Http/Controllers/Api” directory. Go to “AuthController.php” and put the following code in it.

<?php
namespace App\Http\Controllers\Api;
use Illuminate\Http\Request; 
use App\Http\Controllers\Controller; 
use App\User; 
use Illuminate\Support\Facades\Auth; 
use Validator;
class AuthController extends Controller 
{
 public $successStatus = 200;
  
 public function register(Request $request) {    
 $validator = Validator::make($request->all(), [ 
              'name' => 'required',
              'email' => 'required|email',
              'password' => 'required',  
              'c_password' => 'required|same:password', 
    ]);   
 if ($validator->fails()) {          
       return response()->json(['error'=>$validator->errors()], 401);                        }    
 $input = $request->all();  
 $input['password'] = bcrypt($input['password']);
 $user = User::create($input); 
 $success['token'] =  $user->createToken('AppName')->accessToken;
 return response()->json(['success'=>$success], $this->successStatus); 
}
  
   
public function login(){ 
if(Auth::attempt(['email' => request('email'), 'password' => request('password')])){ 
   $user = Auth::user(); 
   $success['token'] =  $user->createToken('AppName')-> accessToken; 
    return response()->json(['success' => $success], $this-> successStatus); 
  } else{ 
   return response()->json(['error'=>'Unauthorised'], 401); 
   } 
}
  
public function getUser() {
 $user = Auth::user();
 return response()->json(['success' => $user], $this->successStatus); 
 }
}

<?php

namespace App\Http\Controllers\Api;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\User;

use Illuminate\Support\Facades\Auth;

use Validator;

class AuthController extends Controller

{

public $successStatus = 200;

public function register(Request $request) {

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

'name' => 'required',

'email' => 'required|email',

'password' => 'required',

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

]);

if ($validator->fails()) {

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

$input = $request->all();

$input['password'] = bcrypt($input['password']);

$user = User::create($input);

$success['token'] = $user->createToken('AppName')->accessToken;

return response()->json(['success'=>$success], $this->successStatus);

}

public function login(){

if(Auth::attempt(['email' => request('email'), 'password' => request('password')])){

$user = Auth::user();

$success['token'] = $user->createToken('AppName')-> accessToken;

return response()->json(['success' => $success], $this-> successStatus);

} else{

return response()->json(['error'=>'Unauthorised'], 401);

}

public function getUser() {

$user = Auth::user();

return response()->json(['success' => $user], $this->successStatus);

}

Start Application Server

Lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Testing the REST API

Our Authentication API is ready to test. I will use Postman to test the API.

Register Api :-
Verb: POST
URL :http://localhost:8000/Api/v1/register

Login Api :-
Verb: GET
URL :http://localhost:8000/Api/v1/login

getUser Api :-
Verb: GET
URL: http://localhost:8000/Api/v1/getUser

When testing getUser API it requires user to be authenticated, you need to specify headers. Make sure in getUser api we will use following headers as listed bellow.

'headers' => [
    'Accept' => 'application/json',
    'Authorization' => 'Bearer '.$accessToken,
]

'headers' => [

'Accept' => 'application/json',

'Authorization' => 'Bearer '.$accessToken,

]

Basically, you have to specify access token as a Bearer token in the Authorization header. The access token is what you received after login and registration.

Laravel 5 Intervention Image Upload and Resize Example

Leave a reply

Laravel 5 Intervention Image Upload and Resize Example

In this Laravel Intervention Image Upload example, we will learn how to upload and resize image using Intervention Image Packag. In this tutorial I have used Intervention Image Package to upload and resize the image and then save image into the database. This laravel image upload example is works with laravel version 5.7 & 5.8 .

Intervention Image Package :- Intervention Image Package is an open source laravel composer package used to upload and resize images. Intervention Image package allows you to easily upload and resize image. Intervention Image package make image uploading and resizing much easier. The advantage of using intervention/image package is that it maintain the image quality. It means you can easily upload and resize images without losing its quality. Laravel image intervention is compatible with laravel version 5.7 & 5.8 .

In this laravel image upload example, I’ll show you how to upload image into folder and then save it into database. In this tutorial before saving image into database we will resize the image and create it’s thumbnail image and then save it into thumbnail directory using the image intervention package.

Install Laravel 5.8

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

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

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

Configure Database In .env file

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

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larabIntervention
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larabIntervention

DB_USERNAME=root

DB_PASSWORD=

Install Image Intervention Package

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

composer require intervention/image

1	composer require intervention/image

Register Package

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

config/app.php

'providers' => [
Intervention\Image\ImageServiceProvider::class
],

'aliases' => [
'Image' => Intervention\Image\Facades\Image::class
]

'providers' => [

Intervention\Image\ImageServiceProvider::class

'aliases' => [

'Image' => Intervention\Image\Facades\Image::class

]

Generate Migration

Now, we have to define table schema for photos table. Open terminal and let’s run the following command to generate a migration file to create photos table in our database.

php artisan make:migration create_photos_table

1	php artisan make:migration create_photos_table

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('photo_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePhotosTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('photo_name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('photos');

}

Run Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the photos table will be created in database along with migrations, password_resets and users table.

Create Model

Next, we need to create a model called Photo using below command.

php artisan make:model Photo

1	php artisan make:model Photo

Once, the above command is executed it will create a model file Photo.php in app directory.

Create Controller

Next, we have to create a controller for image uploading and resizing. Create a controller named ImageController using command given below –

php artisan make:controller ImageController

1	php artisan make:controller ImageController

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

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Photo;
use Image;

class ImageController extends Controller
{
    //
    public function index()
    {
    $image = Photo::latest()->first();
    return view('ImageIntervention.index', compact('image'));
    }

    public function resizeStore(Request $request)
    {
	$this->validate($request, [
	'filename' => 'image|required|mimes:jpeg,png,jpg,gif,svg'
	]);
	$originalImage= $request->file('filename');
	$thumbnailImage = Image::make($originalImage);

	// Define upload path
	$thumbnailPath = public_path('/profile_images/thumbnail/');
	$originalPath = public_path('/profile_images/');

	// Save Orginal Image
	$thumbnailImage->save($originalPath.time().$originalImage->getClientOriginalName());

	// Resize and save image
	$thumbnailImage->resize(150,150);
	$thumbnailImage->save($thumbnailPath.time().$originalImage->getClientOriginalName()); 

	// Save In Database
	$imagemodel= new Photo();
	$imagemodel->photo_name=time().$originalImage->getClientOriginalName();
	$imagemodel->save();

	return back()->with('success', 'Image Upload successful');
		
    }

}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Photo;

use Image;

class ImageController extends Controller

{

public function index()

{

$image = Photo::latest()->first();

return view('ImageIntervention.index', compact('image'));

}

public function resizeStore(Request $request)

{

$this->validate($request, [

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

]);

$originalImage= $request->file('filename');

$thumbnailImage = Image::make($originalImage);

// Define upload path

$thumbnailPath = public_path('/profile_images/thumbnail/');

$originalPath = public_path('/profile_images/');

// Save Orginal Image

$thumbnailImage->save($originalPath.time().$originalImage->getClientOriginalName());

// Resize and save image

$thumbnailImage->resize(150,150);

$thumbnailImage->save($thumbnailPath.time().$originalImage->getClientOriginalName());

// Save In Database

$imagemodel= new Photo();

$imagemodel->photo_name=time().$originalImage->getClientOriginalName();

$imagemodel->save();

return back()->with('success', 'Image Upload successful');

}

Here In the controller, we have following methods –

index() :- It displays Image Upload Form along with Uploaded Image

resizeStore() :- To Upload and Resize Image with Intervention Package.

Note:- Before uploading any file make sure you have created following two directory in the public folder called profile_images and /profile_images/thumbnail.

Create Blade / View Files

In this step, we will create view/blade file to generate and display Image Upload Form. Lets create a blade file “index.blade.php” in “resources/views/ImageIntervention/” directory and put the following code in it respectively.

resources/views/ImageIntervention/index.blade.php

<html lang="en">
<head>
  <title>Laravel  Image Intervention</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  
  <div class="container">
  @if(session('success'))
        <div class="alert alert-success">
          {{ session('success') }}
        </div> 
        @endif
        @if (count($errors) > 0)
      <div class="alert alert-danger">
        <strong>Whoops!</strong> Some problems with your input.<br><br>
        <ul>
          @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
      @endif
    <h3 class="jumbotron">Laravel Image Intervention Upload - W3Adda </h3>
  <form method="post" action="{{url('intervention-image-upload')}}" enctype="multipart/form-data">
        @csrf
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
          <input type="file" name="filename" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
          <button type="submit" class="btn btn-success" style="margin-top:10px">Upload Image</button>
          </div>
        </div>
        @if(isset($image) && !empty($image))
   	    <div class="row">
         <div class="col-md-8">
              <strong>Original Image:</strong>
              <br/>
              <img src="/profile_images/{{$image->photo_name}}" />
        </div>
        <div class="col-md-4">
            <strong>Thumbnail Image:</strong>
            <br/>
            <img src="/profile_images/thumbnail/{{$image->photo_name}}"  />
       	 </div>
   		</div>
        @endif       
  </form>
  </div>
</body>
</html>

<head>

<title>Laravel Image Intervention</title>

</head>

<body>

@if(session('success'))

</div>

@endif

@if (count($errors) > 0)

<strong>Whoops!</strong> Some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

<h3 class="jumbotron">Laravel Image Intervention Upload - W3Adda </h3>

@csrf

</div>

<button type="submit" class="btn btn-success" style="margin-top:10px">Upload Image</button>

</div>

@if(isset($image) && !empty($image))

<strong>Original Image:</strong>

<br/>

<img src="/profile_images/{{$image->photo_name}}" />

</div>

<strong>Thumbnail Image:</strong>

<br/>

<img src="/profile_images/thumbnail/{{$image->photo_name}}" />

</div>

@endif

</form>

</div>

</body>

</html>

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('intervention-image-upload', 'ImageController@index');
Route::post('intervention-image-upload', 'ImageController@ResizeStore');

1 2	Route::get('intervention-image-upload', 'ImageController@index'); Route::post('intervention-image-upload', 'ImageController@ResizeStore');

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/intervention-image-upload

Output:-

laravel-5-intervention-image-upload-1

After Image Upload Screen Output:-

laravel-5-intervention-image-upload-2

Laravel 5.7 Google ReCAPTCHA Integration

Leave a reply

Laravel 5.7 Google ReCAPTCHA Integration

Google ReCaptcha is a one of the most popular captcha system that defends your site from bots to spam and abuse. The Google ReCaptcha is an open service that assures a computer user is a human. In order to integrate the reCaptcha, you must sign up for the Google API key & secret for your website.

In this tutorial, we will integrate google recaptcha in laravel 5.7application. I’ll guide you through step by step how to integrate google recaptcha in a laravel 5.7 application. We will be using ‘anhskohbo/no-captcha’ package for google recaptcha integration in laravel 5.7 application. In this tutorial, we will be creating a simple form with some basic fields along with the google recaptcha.

Install Laravel 5.7
Setup Database Credentials
Install Google Captcha Package
Set Google Site Key and Secret Key
Define Route
Create Controller
Create Blade View (form)
Start Development Server
Conclusion

Install Laravel 5.7

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

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

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

Make sure you have composer installed.

Setup 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=lara57blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara57blog

DB_USERNAME=root

DB_PASSWORD=

Install Google Captcha Package

We will be using ‘anhskohbo/no-captcha’ package for google recaptcha integration in laravel 5.7 application. In this step we will be installing “anhskohbo/no-captcha” via following composer command, lets open your terminal and switch to the project directory and enter the following command –

composer require anhskohbo/no-captcha

1	composer require anhskohbo/no-captcha

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

config/app.php

<?php
 

  return [

     
     'providers' => [

         Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

     ],

     'aliases' => [

         'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

     ]

  ]

<?php

return [

'providers' => [

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

'aliases' => [

'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

]

Set Google Site Key and Secret Key

Now, we need to set Google Site Key and Secret Key in .env file. Let’s start by getting Google key & secret required to make ReCaptcha authorize with the Google servers. Visit the following link to register your site –

https://www.google.com/recaptcha/admin/create

1	https://www.google.com/recaptcha/admin/create

Here, you need to provide label to identify the site. Now choose the type of reCAPTCHA as reCAPTCHA V2. Now you need to add the list of domains, this captcha would work on.

laravel_5_8_google_recaptcha_integration_2

Now accept the Terms of service and click Register. Now, you will be presented with your key and secret, add these to your application’s .env file.

Let’s open .env file and add this crendential as following –

.env

NOCAPTCHA_SITEKEY=secret_site_key
NOCAPTCHA_SECRET=secret_key

1 2	NOCAPTCHA_SITEKEY=secret_site_key NOCAPTCHA_SECRET=secret_key

Create Controller

Now, lets create Recaptcha Controller using following command

php artisan make:controller RecaptchaController

1	php artisan make:controller RecaptchaController

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

Controllers/RecaptchaController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RecaptchaController extends Controller
{
    //
    public function create()
    {
        return view('recaptcha/create');
    }
   
	public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|min:6',
            'g-recaptcha-response' => 'required|captcha'
        ]);

        return "success";
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RecaptchaController extends Controller

{

public function create()

{

return view('recaptcha/create');

}

public function store(Request $request)

{

$request->validate([

'name' => 'required',

'email' => 'required|email',

'password' => 'required|min:6',

'g-recaptcha-response' => 'required|captcha'

]);

return "success";

}

Create View/Blade File

In this step, we will create view/blade file to render a register form with recaptcha field. Lets create a “create.blade.php” file in “resources/views/recaptcha/” directory and put the following code in it.

resources/views/recaptcha/create.blade.php

<!DOCTYPE html>

<html>

<head>

	<title>W3Adda - Laravel 5.7 Google Recaptcha Integration</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	 {!! NoCaptcha::renderJs() !!}

</head>

<body>

  

<div class="container">

    <div class="row">
<div class="col-md-6 col-md-offset-3">

            <div class="panel panel-primary">

                <h3  style="text-align: center;">W3Adda - Laravel 5.7 Google Recaptcha Integration</h3>

                <div class="panel-body">

                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/store') }}">

                        {!! csrf_field() !!}

   

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Name</label>

                            <div class="col-md-6">

                                <input type="text" class="form-control" name="name" value="{{ old('name') }}">

                                @if ($errors->has('name'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('name') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">

                                <input type="email" class="form-control" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('email') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">

                                <input type="password" class="form-control" name="password">

                                @if ($errors->has('password'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('password') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Confirm Password</label>

                            <div class="col-md-6">

                                <input type="password" class="form-control" name="password_confirmation">

                                @if ($errors->has('password_confirmation'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('password_confirmation') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Captcha</label>

                            <div class="col-md-6">

                                {!! app('captcha')->display() !!}

                                @if ($errors->has('g-recaptcha-response'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group">

                            <div class="col-md-6 col-md-offset-4">

                                <br/>

                                <button type="submit" class="btn btn-primary">

                                    <i class="fa fa-btn fa-user"></i>Register

                                </button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

   

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

<!DOCTYPE html>

<html>

<head>

<title>W3Adda - Laravel 5.7 Google Recaptcha Integration</title>

{!! NoCaptcha::renderJs() !!}

</head>

<body>

<h3 style="text-align: center;">W3Adda - Laravel 5.7 Google Recaptcha Integration</h3>

{!! csrf_field() !!}

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">

@if ($errors->has('name'))

<strong>{{ $errors->first('name') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">E-Mail Address</label>

@if ($errors->has('email'))

<strong>{{ $errors->first('email') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">Password</label>

@if ($errors->has('password'))

<strong>{{ $errors->first('password') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">Confirm Password</label>

@if ($errors->has('password_confirmation'))

<strong>{{ $errors->first('password_confirmation') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">Captcha</label>

{!! app('captcha')->display() !!}

@if ($errors->has('g-recaptcha-response'))

<strong>{{ $errors->first('g-recaptcha-response') }}</strong>

</span>

@endif

</div>

<br/>

<i class="fa fa-btn fa-user"></i>Register

</button>

</div>

</form>

</div>

</body>

</html>

Set Routes

After this, we need to add following two routes in “routes/web.php” to display register form and to post the form data. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('recaptchacreate', 'RecaptchaController@create');
Route::post('store', 'RecaptchaController@store');

1 2	Route::get('recaptchacreate', 'RecaptchaController@create'); Route::post('store', 'RecaptchaController@store');

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/larablog/recaptchacreate

Output:-

laravel_5_7_google_recaptcha_integration_3

Laravel 5.8 Facebook Login with Socialite

Leave a reply

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 Facebook login with your laravel application.

Install Laravel 5.8

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

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

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

Configure Database In .env file

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

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraSocial
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laraSocial

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Set Default String Length

Locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

and inside the boot method set a default string length as given below –

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

So this is how “app/Providers/AppServiceProvider” file looks like –

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 //
 Schema::defaultStringLength(191);
}
 public function register()
 {
 //
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

Install Socialite Package via Composer

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' => [
      // Other service providers…
  Laravel\Socialite\SocialiteServiceProvider::class,
 ],

'aliases' => [
 // Other aliases…
 'Socialite' => Laravel\Socialite\Facades\Socialite::class,
 ],

'providers' => [

// Other service providers…

Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [

// Other aliases…

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

Go to Facebook’s developers site https://developers.facebook.com/ and log in with your Facebook account. There in Facebook developers Dashboard you have option to Create App. Lets create a Facebook Login App simply providing App Name and Contact Email.

Set Redirect URL

After creating the facebook app, go to setting->advanced and set redirect url like below –

Then, go to Facebook Login -> Settings and scroll down to “Valid OAuth Redirect URL” and set your callback URL like below –

Get Facebook App Id and Secret Key

After creating app, go to Settings -> Basic and get your newly created App ID and App Secret.

Configure Laravel Socialite

Open your application .env files and set FB_CLIENT_ID, FB_CLIENT_SECRET and FB_CALLBACK_URL like below –

.env

FB_CLIENT_ID=xxxxxxxxx
FB_CLIENT_SECRET=xxxxxxx
FB_CALLBACK_URL=http://localhost:8000/auth/facebook/callback

FB_CLIENT_ID=xxxxxxxxx

FB_CLIENT_SECRET=xxxxxxx

FB_CALLBACK_URL=http://localhost:8000/auth/facebook/callback

Here, Your App Secret becomes client_secret, and App ID becomes your client_id. Now, open config/service.php file and set client id and client secret with call back url like below –

config/service.php

return [
	....
    'facebook' => [
        'client_id' => env('FB_CLIENT_ID'),
        'client_secret' => env('FB_CLIENT_SECRET'),
        'redirect' => env('FB_CALLBACK_URL'),
    ],
]

return [

....

'facebook' => [

'client_id' => env('FB_CLIENT_ID'),

'client_secret' => env('FB_CLIENT_SECRET'),

'redirect' => env('FB_CALLBACK_URL'),

]

Migrations and User Model

After installing laravel, you will see the some migration files created inside database/migrations directory for creating default create users table and password reset table. Open app/database/create_users_table.php migration file and add provider and provider_id columns to user table and also set the email and password field to nullable like below –

app/database/xxxx_xx_xx_xxxxxx_create_users_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->nullable();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password', 60)->nullable();
            $table->string('provider');
            $table->string('provider_id');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

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

$table->timestamp('email_verified_at')->nullable();

$table->string('password', 60)->nullable();

$table->string('provider');

$table->string('provider_id');

$table->rememberToken();

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('users');

}

After you added columns provider and provider_id to user table set the email and password field to nullable, run the migration using following command.

php artisan migrate

1	php artisan migrate

After this, go to app/User.php and add provider and provider_id to fillable attribute in the User Model.

protected $fillable = [
'name', 'email', 'password', 'provider', 'provider_id'
];

protected $fillable = [

'name', 'email', 'password', 'provider', 'provider_id'

];

Authentication Scaffolding

Laravel comes with in-built basic authentication system, use the below command to generate default authentication scaffolding –

php artisan make:auth

1	php artisan make:auth

This command will generate required Controller files, views and add routes in our web.php routes file that are required for basic authentication system.

Set Authentication Routes

Now, open app/routes/web.php file and add following two routes for redirecting the user to the OAuth provider and to handle the callback from provider.

app/routes/web.php

Route::get('auth/{provider}', 'SocialController@redirect');
Route::get('auth/{provider}/callback', 'SocialController@callback');

1 2	Route::get('auth/{provider}', 'SocialController@redirect'); Route::get('auth/{provider}/callback', 'SocialController@callback');

Create Authentication Controllers

Next, we have to create a controller to handle facebook login. Create a controller named SocialController using command given below –

php artisan make:controller SocialController

1	php artisan make:controller SocialController

When controller is created successfully go to app/controllers/SocialController.php and put the below code.

app/controllers/SocialController.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response,File;
use Socialite;
use App\User;
class SocialController extends Controller
{
	public function redirect($provider)
	{
		return Socialite::driver($provider)->redirect();
	}

	public function callback($provider)
	{
		$uInfo = Socialite::driver($provider)->user(); 
		$user = $this->findOrCreate($uInfo,$provider); 
		auth()->login($user); 
		return redirect()->to('/home');
	}

	function findOrCreate($uInfo,$provider){
		$user = User::where('provider_id', $uInfo->id)->first();
		if (!$user) {
			$user = User::create([
			 'name'     => $uInfo->name,
			 'email'    => $uInfo->email,
			 'provider' => $provider,
			 'provider_id' => $uInfo->id
			]);
		}
		return $user;
	}
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response,File;

use Socialite;

use App\User;

class SocialController extends Controller

{

public function redirect($provider)

{

return Socialite::driver($provider)->redirect();

}

public function callback($provider)

{

$uInfo = Socialite::driver($provider)->user();

$user = $this->findOrCreate($uInfo,$provider);

auth()->login($user);

return redirect()->to('/home');

}

function findOrCreate($uInfo,$provider){

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

if (!$user) {

$user = User::create([

'name' => $uInfo->name,

'email' => $uInfo->email,

'provider' => $provider,

'provider_id' => $uInfo->id

]);

}

return $user;

}

In this controller, we have following two methods –

redirect() :- to redirect the user to Facebook

callback() :- to handle callback from Facebook

No, open resources/views/auth/login.blade.php file and add the following code below the closing tag for <div class=”form-group”>. This will append a facebook login button just below the default login form.

resources/views/auth/login.blade.php

<hr>
<div class="form-group row mb-0">
 <div class="col-md-8 offset-md-4">
    <a href="{{ url('/auth/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a>
</div>
</div>

<hr>

<a href="{{ url('/auth/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a>

</div>

Restart Development Server

Restart the development server using following artisan command –

php artisan serve

1	php artisan serve

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

http://localhost:8000/

Output:-

Now, visit the login page to test the facebook login –

http://localhost:8000/login

When you click “Facebook” button, you will be redirected/requested to login with facebook. After you successfully login you will be registered and logged in to your application and you will be redirected to user dashboard.

Laravel 5.8 User Registration And Login System

Leave a reply

Laravel comes with an built-in authentication system, that includes out of the box user registration, login, logout, forgot password and remember me functionality. It saves us a lot of time building a custom login and registration system starting from scratch. In this step by step tutorial, we will guide you through building user registration and login using laravel’s built-in authentication package.

Before starting with tutorial, we are assuming that you already have a fresh installation of a Laravel 5.8. If you have not installed it follow Laravel Installation Step.

Install Laravel 5.8

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

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

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

Make sure you have composer installed. Now, lets switch to the project directory and 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/

Output:-

laravel-5-7-crud-tutorial-with-example-2

Configure Database In .env file

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

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara58blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara58blog

DB_USERNAME=root

DB_PASSWORD=

Generate Laravel Application Key

Now, use the following command in terminal to generate laravel application key.

php artisan key:generate

1	php artisan key:generate

Create Database Migration

Before you run migration, open app/providers/AppServiceProvider.php file and put following two line of code in boot method as following –

Use Schema; 
public function boot(){ 
 Schema::defaultStringLength(191); 
}

Use Schema;

public function boot(){

Schema::defaultStringLength(191);

}

Now, use the below command to create required user authentication tables and model automatically.

php artisan migrate

1	php artisan migrate

Authentication Scaffolding

Now, use the below command to generate authentication scaffolding –

php artisan make:auth

1	php artisan make:auth

This command will generate required Controller files, views and add routes in our web.php routes file that are required for the authentication. If you open your route file (resources/routes/web.php) you can see the authentication route added as following –

Auth::routes();

1	Auth::routes();

The Auth::rutes() is a set of common authentication, registration and password reset routes.

$this->get('login', 'Auth\LoginController@showLoginForm')->name('login');
$this->post('login', 'Auth\LoginController@login');
$this->post('logout', 'Auth\LoginController@logout')->name('logout');

// Registration Routes
$this->get('register', 'Auth\RegisterController@showRegistrationForm')->name('register');
$this->post('register', 'Auth\RegisterController@register');
// Password Reset Routes

$this->get('password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');
$this->post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');
$this->get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');
$this->post('password/reset', 'Auth\ResetPasswordController@reset');

$this->get('login', 'Auth\LoginController@showLoginForm')->name('login');

$this->post('login', 'Auth\LoginController@login');

$this->post('logout', 'Auth\LoginController@logout')->name('logout');

// Registration Routes

$this->get('register', 'Auth\RegisterController@showRegistrationForm')->name('register');

$this->post('register', 'Auth\RegisterController@register');

// Password Reset Routes

$this->get('password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');

$this->post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');

$this->get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');

$this->post('password/reset', 'Auth\ResetPasswordController@reset');

Restart Development Server

Restart the development server using following artisan command –

php artisan serve

1	php artisan serve

Test Laravel 5.8 User Authentication

Now, you can see following authentication pages –

http://localhost:8000/register

laravel_user_registration_login_authentication_register

http://localhost:8000/login

laravel_user_registration_login_authentication_login

http://localhost:8000/password/reset

Laravel 5.8 Google ReCAPTCHA Integration

Leave a reply

Laravel 5.8 Google ReCAPTCHA Integration

In this tutorial, we will integrate google recaptcha in laravel 5.8 application. I’ll guide you through step by step how to integrate google recaptcha in a laravel 5.8 application. We will be using ‘anhskohbo/no-captcha’ package for google recaptcha integration in laravel 5.8 application. In this tutorial, we will be creating a simple form with some basic fields along with the google recaptcha.

Install Laravel 5.8
Setup Database Credentials
Install Google Captcha Package
Set Google Site Key and Secret Key
Define Route
Create Controller
Create Blade View (form)
Start Development Server
Conclusion

Install Laravel 5.8

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

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

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

Make sure you have composer installed.

Setup 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=lara58blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara58blog

DB_USERNAME=root

DB_PASSWORD=

Install Google Captcha Package

We will be using ‘anhskohbo/no-captcha’ package for google recaptcha integration in laravel 5.8 application. In this step we will be installing “anhskohbo/no-captcha” via following composer command, lets open your terminal and switch to the project directory and enter the following command –

composer require anhskohbo/no-captcha

1	composer require anhskohbo/no-captcha

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

config/app.php

<?php
 

  return [

     
     'providers' => [

         Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

     ],

     'aliases' => [

         'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

     ]

  ]

<?php

return [

'providers' => [

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class

'aliases' => [

'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

]

Set Google Site Key and Secret Key

https://www.google.com/recaptcha/admin/create

1	https://www.google.com/recaptcha/admin/create

Here, you need to provide label to identify the site. Now choose the type of reCAPTCHA as reCAPTCHA V2. Now you need to add the list of domains, this captcha would work on.

laravel_5_8_google_recaptcha_integration_2

Now accept the Terms of service and click Register. Now, you will be presented with your key and secret, add these to your application’s .env file.

Let’s open .env file and add this crendential as following –

.env

NOCAPTCHA_SITEKEY=secret_site_key
NOCAPTCHA_SECRET=secret_key

1 2	NOCAPTCHA_SITEKEY=secret_site_key NOCAPTCHA_SECRET=secret_key

Create Controller

Now, lets create Recaptcha Controller using following command

php artisan make:controller RecaptchaController

1	php artisan make:controller RecaptchaController

Controllers/RecaptchaController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RecaptchaController extends Controller
{
    //
    public function create()
    {
        return view('recaptcha/create');
    }
   
	public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|min:6',
            'g-recaptcha-response' => 'required|captcha'
        ]);

        return "success";
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RecaptchaController extends Controller

{

public function create()

{

return view('recaptcha/create');

}

public function store(Request $request)

{

$request->validate([

'name' => 'required',

'email' => 'required|email',

'password' => 'required|min:6',

'g-recaptcha-response' => 'required|captcha'

]);

return "success";

}

Create View/Blade File

resources/views/recaptcha/create.blade.php

<!DOCTYPE html>

<html>

<head>

	<title>W3Adda - Laravel 5.8 Google Recaptcha Integration</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	 {!! NoCaptcha::renderJs() !!}

</head>

<body>

  

<div class="container">

    <div class="row">
<div class="col-md-6 col-md-offset-3">

            <div class="panel panel-primary">

                <h3  style="text-align: center;">W3Adda - Laravel 5.8 Google Recaptcha Integration</h3>

                <div class="panel-body">

                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/store') }}">

                        {!! csrf_field() !!}

   

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Name</label>

                            <div class="col-md-6">

                                <input type="text" class="form-control" name="name" value="{{ old('name') }}">

                                @if ($errors->has('name'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('name') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">

                                <input type="email" class="form-control" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('email') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">

                                <input type="password" class="form-control" name="password">

                                @if ($errors->has('password'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('password') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Confirm Password</label>

                            <div class="col-md-6">

                                <input type="password" class="form-control" name="password_confirmation">

                                @if ($errors->has('password_confirmation'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('password_confirmation') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">

                            <label class="col-md-4 control-label">Captcha</label>

                            <div class="col-md-6">

                                {!! app('captcha')->display() !!}

                                @if ($errors->has('g-recaptcha-response'))

                                    <span class="help-block">

                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>

                                    </span>

                                @endif

                            </div>

                        </div>

   

                        <div class="form-group">

                            <div class="col-md-6 col-md-offset-4">

                                <br/>

                                <button type="submit" class="btn btn-primary">

                                    <i class="fa fa-btn fa-user"></i>Register

                                </button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

   

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

<!DOCTYPE html>

<html>

<head>

<title>W3Adda - Laravel 5.8 Google Recaptcha Integration</title>

{!! NoCaptcha::renderJs() !!}

</head>

<body>

<h3 style="text-align: center;">W3Adda - Laravel 5.8 Google Recaptcha Integration</h3>

{!! csrf_field() !!}

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">

@if ($errors->has('name'))

<strong>{{ $errors->first('name') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">E-Mail Address</label>

@if ($errors->has('email'))

<strong>{{ $errors->first('email') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">Password</label>

@if ($errors->has('password'))

<strong>{{ $errors->first('password') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">Confirm Password</label>

@if ($errors->has('password_confirmation'))

<strong>{{ $errors->first('password_confirmation') }}</strong>

</span>

@endif

</div>

<div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">

<label class="col-md-4 control-label">Captcha</label>

{!! app('captcha')->display() !!}

@if ($errors->has('g-recaptcha-response'))

<strong>{{ $errors->first('g-recaptcha-response') }}</strong>

</span>

@endif

</div>

<br/>

<i class="fa fa-btn fa-user"></i>Register

</button>

</div>

</form>

</div>

</body>

</html>

Set Routes

After this, we need to add following two routes in “routes/web.php” to display register form and to post the form data. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('recaptchacreate', 'RecaptchaController@create');
Route::post('store', 'RecaptchaController@store');

1 2	Route::get('recaptchacreate', 'RecaptchaController@create'); Route::post('store', 'RecaptchaController@store');

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/larablog/recaptchacreate

Output:-

laravel_5_8_google_recaptcha_integration_3

Laravel 5.8 New Email Verification

Leave a reply

Laravel 5.8 Email Verification

Laravel 5.8 provides built-in email verification system for newly registered user. Using this, newly registered user will get an email with an account activation link. This activation link is used for account verification. When activation link is clicked, this will make user account verified and active for the application. Once user account is activated then it will be allowed to access protected routes; which can be accessible only by verified accounts.

In this step by step tutorial, we’ll show you how to setup email verification system for newly registered user in laravel 5.8.

Install Laravel 5.8

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

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

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

Make sure you have composer installed. Now, lets switch to the project directory and 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/

Output:-

laravel-5-7-crud-tutorial-with-example-2

Configure Database In .env file

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

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara58blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara58blog

DB_USERNAME=root

DB_PASSWORD=

Now, use the below command to create default laravel tables automatically.

php artisan migrate

1	php artisan migrate

Email Configuration

Since, we will be sending an email with an account activation link. To send email, we need to add email configuration or smtp details in .env file.

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=youremail@gmail.com
MAIL_PASSWORD=yourpass
MAIL_ENCRYPTION=tls

MAIL_DRIVER=smtp

MAIL_HOST=smtp.gmail.com

MAIL_PORT=587

MAIL_USERNAME=youremail@gmail.com

MAIL_PASSWORD=yourpass

MAIL_ENCRYPTION=tls

Authentication Scaffolding

Now, use the below command to generate authentication scaffolding –

php artisan make:auth

1	php artisan make:auth

This command will generate required Controller files, views and add routes in our web.php routes file that are required for the authentication. If you open your route file (resources/routes/web.php) you will have a resource route added in it like below –

Auth::routes();

1	Auth::routes();

Email Verification Setup

To implement email verification we need to implement the MustVerifyEmail Contracts in our User model. Lets open the App/User.php file and add the “Implements MustVerifyEmail” to the class declaration as given below –

<?php
 
namespace App;
 
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
}

<?php

namespace App;

use Illuminate\Notifications\Notifiable;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements MustVerifyEmail

{

use Notifiable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

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

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password', 'remember_token',

];

}

Add Route

Last thing we need to do is add the verify middleware to the auth routes.

Route::get('/', function () {
    return view('welcome');
});
  
//This will enable email verification routes
Auth::routes(['verify' => true]);

Route::get('/home', 'HomeController@index')->name('home');

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

return view('welcome');

});

//This will enable email verification routes

Auth::routes(['verify' => true]);

Route::get('/home', 'HomeController@index')->name('home');

The “verified” middleware is used to protect routes from unverified users.

We can add the “verified” middleware to the route itself as given below –

Example:-

Route::get('/home', 'HomeController@index')->name('home')->middleware('verified');

1	Route::get('/home', 'HomeController@index')->name('home')->middleware('verified');

or we can also use it in controllers as following –

Example:-

<?php
public function __construct(){
  $this->middleware(['auth','verified']);
}

<?php

public function __construct(){

$this->middleware(['auth','verified']);

}

Add Middleware In Controller

In this example we will be adding Middleware in controller’s constructor to protect access. Lets open app/controllers/HomeController.php and put $this->middleware([‘auth’, ‘verified’]); inside of constructor.

app/controllers/HomeController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware(['auth', 'verified']);
    }
 
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function __construct()

{

$this->middleware(['auth', 'verified']);

}

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

public function index()

{

return view('home');

}

This will block unverified users to access laravel 5.8 dashboard, and only allow when users have verified their email. Now when you register a new user, it will send a verification email to that user and redirect to verify view (same will happen when a old user tries to access home route).

Start Development Server

Start the development server using following artisan command –

php artisan serve

1	php artisan serve

Test Laravel 5.8 Email Verification

At this stage, we are ready to test the user registration and login system with email verification system.

Now, you should able to see your registration page at –

http://localhost:8000/register

laravel-5-8-email-verification-example-2

When you fill the form and submit it; you will get an alert for email verification in your account as follows –

laravel-5-8-email-verification-example-3-1

You will also get an account verification link in your email account as follows –

laravel-5-8-email-verification-example-4

Go ahead and verify your account, on successful verification you will be allowed to access protected application routes.

laravel-5-8-email-verification-example-5

Laravel 6 Import Export Excel CSV File to Database

Leave a reply

Laravel 6 Import Export Excel CSV File to Database

In this tutorial, I’ll show you how to import and export excel/csv file into and from database in laravel 6 using maatwebsite version 3 package with example. I’ll guide you through step by step with example of importing and exporting a csv or excel file using maatwebsite/excel version 3 composer package.

When we are developing laravel applications, there may situations where we require to import or export large amount of data into and from the application database. Importing and exporting data through excel or csv files seems a good solution here.

In laravel, maatwebsite/excel composer package made it easy to import or export excel or csv files. The maatwebsite/excel is a composer package used to import and export excel or csv files. The maatwebsite/excel provide number of features for excel or csv file import and exort in laravel.

Create Laravel 5.8 Application

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

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

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

Configure Database In .env file

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

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraImportExportExcel
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laraImportExportExcel

DB_USERNAME=root

DB_PASSWORD=

Create Model and Migration

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the contact table will be created in database along with a model file Contact.php in app directory.

app/Contact.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
     protected $fillable = [
        'name', 'email', 'phone'
    ];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

protected $fillable = [

'name', 'email', 'phone'

];

}

Install Maatwebsite Package

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

composer require maatwebsite/excel

1	composer require maatwebsite/excel

Configure Maatwebsite Package

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

config/app.php

'providers' => [
  .......
  Maatwebsite\Excel\ExcelServiceProvider::class,
 
 ],  

'aliases' => [ 
  .......
  'Excel' => Maatwebsite\Excel\Facades\Excel::class,

],

'providers' => [

.......

Maatwebsite\Excel\ExcelServiceProvider::class,

'aliases' => [

.......

'Excel' => Maatwebsite\Excel\Facades\Excel::class,

Now, use following command to publish Maatwesite Package configuration file:

php artisan vendor:publish

1	php artisan vendor:publish

This will create Maatwesite Package configuration file named “config/excel.php”.

Create Import Class

Now we will create a import class for Contact model to use in our ImportExportExcelController. Use the following command to create import class.

php artisan make:import ImportContacts --model=Contact

1	php artisan make:import ImportContacts --model=Contact

After, the above command executed successfully it will create ImportContacts.php file in Imports directory.

Imports/ImportContacts.php

<?php

namespace App\Imports;

use App\Contact;
use Maatwebsite\Excel\Concerns\ToModel;

class ImportContacts implements ToModel
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row)
    {
        return new Contact([
            //
            'name'     => @$row[0],
            'email'    => @$row[1], 
            'phone'    => @$row[2]
        ]);
    }
}

<?php

namespace App\Imports;

use App\Contact;

use Maatwebsite\Excel\Concerns\ToModel;

class ImportContacts implements ToModel

{

/**

* @param array $row

* @return \Illuminate\Database\Eloquent\Model|null

public function model(array $row)

{

return new Contact([

'name' => @$row[0],

'email' => @$row[1],

'phone' => @$row[2]

]);

}

Create Export Class

Now we will create a export class for Contact model to use in our ImportExportExcelController. Use the following command to create import class.

php artisan make:export ExportContacts --model=Contact

1	php artisan make:export ExportContacts --model=Contact

After, the above command executed successfully it will create ExportContacts.php file in Exports directory.

Exports/ExportContacts.php

<?php

namespace App\Exports;

use App\Contact;
use Maatwebsite\Excel\Concerns\FromCollection;

class ExportContacts implements FromCollection
{
    /**
    * @return \Illuminate\Support\Collection
    */
    public function collection()
    {
        return Contact::all();
    }
}

<?php

namespace App\Exports;

use App\Contact;

use Maatwebsite\Excel\Concerns\FromCollection;

class ExportContacts implements FromCollection

{

/**

* @return \Illuminate\Support\Collection

public function collection()

{

return Contact::all();

}

Create Import Excel Controller

Next, we have to create a controller to display a form to upload excel file records. Lets Create a controller named ImportExportExcelController using command given below –

php artisan make:controller ImportExportExcel/ImportExportExcelController

1	php artisan make:controller ImportExportExcel/ImportExportExcelController

Once the above command executed, it will create a controller file ImportExportExcelController.php in app/Http/Controllers/ImportExportExcel directory.

Open the ImportExportExcel/ImportExportExcelController.php file and put the following code in it.

app/Http/Controllers/ImportExportExcel/ImportExportExcelController.php

<?php

namespace App\Http\Controllers\ImportExportExcel;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Imports\ImportContacts;
use App\Exports\ExportContacts;
use Maatwebsite\Excel\Facades\Excel;
use DB;
use App\Contact;

class ImportExportExcelController extends Controller

{

    public function index()
    {
        $contacts = Contact::orderBy('created_at','DESC')->get();
        return view('import_export_excel.index',compact('contacts'));
    }

    public function import(Request $request)
    {
        $request->validate([
            'import_file' => 'required'
        ]);
        Excel::import(new ImportContacts, request()->file('import_file'));
        return back()->with('success', 'Contacts imported successfully.');
    }

    public function export() 
    {
        return Excel::download(new ExportContacts, 'contacts.xlsx');
    }

}

<?php

namespace App\Http\Controllers\ImportExportExcel;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Imports\ImportContacts;

use App\Exports\ExportContacts;

use Maatwebsite\Excel\Facades\Excel;

use DB;

use App\Contact;

class ImportExportExcelController extends Controller

{

public function index()

{

$contacts = Contact::orderBy('created_at','DESC')->get();

return view('import_export_excel.index',compact('contacts'));

}

public function import(Request $request)

{

$request->validate([

'import_file' => 'required'

]);

Excel::import(new ImportContacts, request()->file('import_file'));

return back()->with('success', 'Contacts imported successfully.');

}

public function export()

{

return Excel::download(new ExportContacts, 'contacts.xlsx');

}

Here In the controller, we have following methods –

index() :- It displays File Upload Form and Contact data.

import() :- To Upload excel file and Save records in database .

export() :- To export and download excel file for records in database .

Create Blade / View Files

In this step, we will create view/blade file to upload excel file. Lets create a blade file “index.blade.php” in “resources/views/import_export_excel/” directory and put the following code in it respectively.

resources/views/import_export_excel/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 6 Export Import Excel to database - W3Adda</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>

<body>
    
<div class="container">
    <div class="card mt-4">
        <div class="card-header">
            Laravel 6 Import Export Excel to database - W3Adda
        </div>
            @if ($errors->any())
        <div class="alert alert-danger">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
   @if($message = Session::get('success'))
   <div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>
           <strong>{{ $message }}</strong>
   </div>
   @endif
        <div class="card-body">
            <form action="{{ url('import-excel') }}" method="POST" name="importform" enctype="multipart/form-data">
                @csrf
                <input type="file" name="import_file" class="form-control">
                <br>
                <button class="btn btn-success">Import File</button>
                <a class="btn btn-info" href="{{ url('export-excel') }}"> 
                 Export File</a>
            </form>
        </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Customer Data</h3>
    </div>
    <div class="panel-body">
     <div class="table-responsive">
      <table class="table table-bordered table-striped">
       <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
               </tr>
       @foreach($contacts as $c)
       <tr>
        <td>{{ $c->name }}</td>
        <td>{{ $c->email }}</td>
        <td>{{ $c->phone }}</td>
       </tr>
       @endforeach
      </table>
     </div>
    </div>
</div>

</div>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 6 Export Import Excel to database - W3Adda</title>

</head>

<body>

Laravel 6 Import Export Excel to database - W3Adda

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@if($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

@endif

@csrf

<br>

<button class="btn btn-success">Import File</button>

Export File</a>

</form>

</div>

<h3 class="panel-title">Customer Data</h3>

</div>

<tr>

<th>Email</th>

<th>Phone</th>

</tr>

@foreach($contacts as $c)

<tr>

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

<td>{{ $c->phone }}</td>

</tr>

@endforeach

</table>

</div>

</body>

</html>

Create Import Export Excel Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('import-export-excel', 'ImportExportExcel\ImportExportExcelController@index');
Route::post('import-export-excel', 'ImportExportExcel\ImportExportExcelController@import');
Route::get('export-excel', 'ImportExportExcel\ImportExportExcelController@export');

Route::get('import-export-excel', 'ImportExportExcel\ImportExportExcelController@index');

Route::post('import-export-excel', 'ImportExportExcel\ImportExportExcelController@import');

Route::get('export-excel', 'ImportExportExcel\ImportExportExcelController@export');

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/import-export-excel

Output:-

laravel-6-import-export-excel-file-in-database-1

Select excel file to upload, before uploading you must have created an excel file as following:

laravel-6-import-excel-csv-file-in-database-1

laravel-6-import-export-excel-file-in-database-2

Now, import file.

After Upload Screen Output:-

laravel-6-import-export-excel-file-in-database-3

Now, click “Export File” to export data into csv file.

laravel-6-import-export-excel-file-in-database-4

I hope you like this laravel 6 Import Export Excel CSV File to Database tutorial.

Laravel 5.8 Import Excel CSV File to Database Using Maatwebsite

Leave a reply

Laravel 5.8 Import Excel CSV File to Database

In this tutorial, I’ll show you how to import Excel spreadsheet or csv file into database in laravel 5.8 using maatwebsite version 3 package with example. I’ll guide you through step by step with example of importing a csv or excel file using maatwebsite/excel version 3 composer package.

When we are working with some large applications, there may situations where we require to import large amount of data into the application database. Importing data through excel or csv files seems a good solution here. In laravel, maatwebsite/excel composer package made it easy to import or export excel or csv files.

Maatwebsite version 3 package:-

The maatwebsite/excel is a composer package used to import and export excel or csv files. This package made it easy to import and export data using database model. We will be using maatwebsite/excel version 3, there are many new changes in version 3. It will work with laravel version like 5.8, 5.7 .

Before starting with example I assume that you already have fresh laravel 5.8 installation ready, if you have it installed then you can skip this step.

Create Laravel 5.8 Application

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

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

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

Configure Database In .env file

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

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraImportExcel
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laraImportExcel

DB_USERNAME=root

DB_PASSWORD=

Create Model and Migration

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the contact table will be created in database along with a model file Contact.php in app directory.

app/Contact.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
     protected $fillable = [
        'name', 'email', 'phone'
    ];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

protected $fillable = [

'name', 'email', 'phone'

];

}

Install Maatwebsite Package

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

composer require maatwebsite/excel

1	composer require maatwebsite/excel

Configure Maatwebsite Package

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

config/app.php

'providers' => [
  .......
  Maatwebsite\Excel\ExcelServiceProvider::class,
 
 ],  

'aliases' => [ 
  .......
  'Excel' => Maatwebsite\Excel\Facades\Excel::class,

],

'providers' => [

.......

Maatwebsite\Excel\ExcelServiceProvider::class,

'aliases' => [

.......

'Excel' => Maatwebsite\Excel\Facades\Excel::class,

Now, use following command to publish Maatwesite Package configuration file:

php artisan vendor:publish

1	php artisan vendor:publish

This will create Maatwesite Package configuration file named “config/excel.php”.

Create Import Class

Now we will create a import class for Contact model to use in our ImportExcelController. Use the following command to create import class.

php artisan make:import ImportContacts --model=Contact

1	php artisan make:import ImportContacts --model=Contact

After, the above command executed successfully it will create ImportContacts.php file in Imports directory.

Imports/ImportContacts.php

<?php

namespace App\Imports;

use App\Contact;
use Maatwebsite\Excel\Concerns\ToModel;

class ImportContacts implements ToModel
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row)
    {
        return new Contact([
            //
            'name'     => @$row[0],
            'email'    => @$row[1], 
            'phone'    => @$row[2]
        ]);
    }
}

<?php

namespace App\Imports;

use App\Contact;

use Maatwebsite\Excel\Concerns\ToModel;

class ImportContacts implements ToModel

{

/**

* @param array $row

* @return \Illuminate\Database\Eloquent\Model|null

public function model(array $row)

{

return new Contact([

'name' => @$row[0],

'email' => @$row[1],

'phone' => @$row[2]

]);

}

Create Import Excel Controller

Next, we have to create a controller to display a form to upload excel file records. Lets Create a controller named ImportExcelController using command given below –

php artisan make:controller ImportExcel/ImportExcelController

1	php artisan make:controller ImportExcel/ImportExcelController

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

app/Http/Controllers/ImportExcel/ImportExcelController.php

<?php

namespace App\Http\Controllers\ImportExcel;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Imports\ImportContacts;
use Maatwebsite\Excel\Facades\Excel;

class ImportExcelController extends Controller
{
    public function index()
    {
        return view('import_excel.index');
    }
    public function import(Request $request)
    {
        $request->validate([
            'import_file' => 'required'
        ]);
        Excel::import(new ImportContacts, request()->file('import_file'));
        return back()->with('success', 'Contacts imported successfully.');
    }
}

<?php

namespace App\Http\Controllers\ImportExcel;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Imports\ImportContacts;

use Maatwebsite\Excel\Facades\Excel;

class ImportExcelController extends Controller

{

public function index()

{

return view('import_excel.index');

}

public function import(Request $request)

{

$request->validate([

'import_file' => 'required'

]);

Excel::import(new ImportContacts, request()->file('import_file'));

return back()->with('success', 'Contacts imported successfully.');

}

Here In the controller, we have following methods –

index() :- It displays File Upload Form.

import() :- To Upload excel file and Save records in database .

Create Blade / View Files

In this step, we will create view/blade file to upload excel file. Lets create a blade file “index.blade.php” in “resources/views/import_excel/” directory and put the following code in it respectively.

resources/views/import_excel/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5.8 Import Excel to database - W3Adda</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>

<body>
    
<div class="container">
    <div class="card mt-4">
        <div class="card-header">
            Laravel 5.8 Import Excel to database - W3Adda
        </div>
            @if ($errors->any())
        <div class="alert alert-danger">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
   @if($message = Session::get('success'))
   <div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>
           <strong>{{ $message }}</strong>
   </div>
   @endif
        <div class="card-body">
            <form action="{{ url('import-excel') }}" method="POST" name="importform" enctype="multipart/form-data">
                @csrf
                <input type="file" name="import_file" class="form-control">
                <br>
                <button class="btn btn-success">Import File</button>
            </form>
        </div>
    </div>
    

</div>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 Import Excel to database - W3Adda</title>

</head>

<body>

Laravel 5.8 Import Excel to database - W3Adda

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@if($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

@endif

@csrf

<br>

<button class="btn btn-success">Import File</button>

</form>

</div>

</body>

</html>

Create Import Excel Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('import-excel', 'ImportExcel\ImportExcelController@index');
Route::post('import-excel', 'ImportExcel\ImportExcelController@import');

1 2	Route::get('import-excel', 'ImportExcel\ImportExcelController@index'); Route::post('import-excel', 'ImportExcel\ImportExcelController@import');

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/import-excel

Output:-

laravel-5-8-import-excel-1

Select excel file to upload, before uploading you must have created an excel file as following:

laravel-6-import-excel-csv-file-in-database-1

laravel-5-8-import-excel-2

Now, import file.

After Upload Screen Output:-

laravel-5-8-import-excel-3

Laravel 6 Import Excel CSV File to Database Using Maatwebsite

Leave a reply

Laravel 6 Import Excel CSV File to Database

In this tutorial, I’ll show you how to import Excel spreadsheet or csv file into database in laravel 6 using maatwebsite version 3 package with example. I’ll guide you through step by step with example of importing a csv or excel file using maatwebsite/excel version 3 composer package.

Maatwebsite version 3 package:-

In this laravel import excel example, we will display a form to upload csv file and to display uploaded customer data. When the excel file is imported into database we will display imported data into the screen along with the success message.

Before starting with example I assume that you already have fresh laravel 6 installation ready, if you have it installed then you can skip this step.

Create Laravel 6 Application

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

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

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

Configure Database In .env file

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

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraImportExcel
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laraImportExcel

DB_USERNAME=root

DB_PASSWORD=

Create Model and Migration

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the contact table will be created in database along with a model file Contact.php in app directory.

app/Contact.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
     protected $fillable = [
        'name', 'email', 'phone'
    ];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

protected $fillable = [

'name', 'email', 'phone'

];

}

Install Maatwebsite Package

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

composer require maatwebsite/excel

1	composer require maatwebsite/excel

Configure Maatwebsite Package

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

config/app.php

'providers' => [
  .......
  Maatwebsite\Excel\ExcelServiceProvider::class,
 
 ],  

'aliases' => [ 
  .......
  'Excel' => Maatwebsite\Excel\Facades\Excel::class,

],

'providers' => [

.......

Maatwebsite\Excel\ExcelServiceProvider::class,

'aliases' => [

.......

'Excel' => Maatwebsite\Excel\Facades\Excel::class,

Now, use following command to publish Maatwesite Package configuration file:

php artisan vendor:publish

1	php artisan vendor:publish

This will create Maatwesite Package configuration file named “config/excel.php”.

Create Import Class

Now we will create a import class for Contact model to use in our ImportExcelController. Use the following command to create import class.

php artisan make:import ImportContacts --model=Contact

1	php artisan make:import ImportContacts --model=Contact

After, the above command executed successfully it will create ImportContacts.php file in Imports directory.

Imports/ImportContacts.php

<?php

namespace App\Imports;

use App\Contact;
use Maatwebsite\Excel\Concerns\ToModel;

class ImportContacts implements ToModel
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row)
    {
        return new Contact([
            //
            'name'     => @$row[0],
            'email'    => @$row[1], 
            'phone'    => @$row[2]
        ]);
    }
}

<?php

namespace App\Imports;

use App\Contact;

use Maatwebsite\Excel\Concerns\ToModel;

class ImportContacts implements ToModel

{

/**

* @param array $row

* @return \Illuminate\Database\Eloquent\Model|null

public function model(array $row)

{

return new Contact([

'name' => @$row[0],

'email' => @$row[1],

'phone' => @$row[2]

]);

}

Create Import Excel Controller

Next, we have to create a controller to display a form to upload excel file records. Lets Create a controller named ImportExcelController using command given below –

php artisan make:controller ImportExcel/ImportExcelController

1	php artisan make:controller ImportExcel/ImportExcelController

app/Http/Controllers/ImportExcel/ImportExcelController.php

<?php

namespace App\Http\Controllers\ImportExcel;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Imports\ImportContacts;
use Maatwebsite\Excel\Facades\Excel;
use DB;
use App\Contact;

class ImportExcelController extends Controller

{

    public function index()
    {
        $contacts = Contact::orderBy('created_at','DESC')->get();
        return view('import_excel.index',compact('contacts'));
    }

    public function import(Request $request)
    {
        $request->validate([
            'import_file' => 'required'
        ]);
        Excel::import(new ImportContacts, request()->file('import_file'));
        return back()->with('success', 'Contacts imported successfully.');
    }

}

<?php

namespace App\Http\Controllers\ImportExcel;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Imports\ImportContacts;

use Maatwebsite\Excel\Facades\Excel;

use DB;

use App\Contact;

class ImportExcelController extends Controller

{

public function index()

{

$contacts = Contact::orderBy('created_at','DESC')->get();

return view('import_excel.index',compact('contacts'));

}

public function import(Request $request)

{

$request->validate([

'import_file' => 'required'

]);

Excel::import(new ImportContacts, request()->file('import_file'));

return back()->with('success', 'Contacts imported successfully.');

}

Here In the controller, we have following methods –

index() :- It displays File Upload Form.

import() :- To Upload excel file and Save records in database .

Create Blade / View Files

resources/views/import_excel/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 6 Import Excel to database - W3Adda</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>

<body>
    
<div class="container">
    <div class="card mt-4">
        <div class="card-header">
            Laravel 6 Import Excel to database - W3Adda
        </div>
            @if ($errors->any())
        <div class="alert alert-danger">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
   @if($message = Session::get('success'))
   <div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>
           <strong>{{ $message }}</strong>
   </div>
   @endif
        <div class="card-body">
            <form action="{{ url('import-excel') }}" method="POST" name="importform" enctype="multipart/form-data">
                @csrf
                <input type="file" name="import_file" class="form-control">
                <br>
                <button class="btn btn-success">Import File</button>
            </form>
        </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Customer Data</h3>
    </div>
    <div class="panel-body">
     <div class="table-responsive">
      <table class="table table-bordered table-striped">
       <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
               </tr>
       @foreach($contacts as $c)
       <tr>
        <td>{{ $c->name }}</td>
        <td>{{ $c->email }}</td>
        <td>{{ $c->phone }}</td>
       </tr>
       @endforeach
      </table>
     </div>
    </div>
</div>

</div>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 6 Import Excel to database - W3Adda</title>

</head>

<body>

Laravel 6 Import Excel to database - W3Adda

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@if($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

@endif

@csrf

<br>

<button class="btn btn-success">Import File</button>

</form>

</div>

<h3 class="panel-title">Customer Data</h3>

</div>

<tr>

<th>Email</th>

<th>Phone</th>

</tr>

@foreach($contacts as $c)

<tr>

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

<td>{{ $c->phone }}</td>

</tr>

@endforeach

</table>

</div>

</body>

</html>

Create Import Excel Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('import-excel', 'ImportExcel\ImportExcelController@index');
Route::post('import-excel', 'ImportExcel\ImportExcelController@import');

1 2	Route::get('import-excel', 'ImportExcel\ImportExcelController@index'); Route::post('import-excel', 'ImportExcel\ImportExcelController@import');

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/import-excel

Output:-

laravel-6-import-excel-csv-file-in-database-11

Select excel file to upload, before uploading you must have created an excel file as following:

laravel-6-import-excel-csv-file-in-database-1

laravel-6-import-excel-csv-file-in-database-12

Now, import file.

After Upload Screen Output:-

laravel-6-import-excel-csv-file-in-database-13

Laravel 5.8 Dropzone Multiple Image Upload with Remove Link

Leave a reply

Laravel 5.8 Dropzone Multiple Image Upload with Remove Link

In this Laravel 5.8 Dropzone Multiple Image Upload with Remove Link example, I will show you how to upload files with drag and drop interface using dropzone.js in your Laravel 5 applications. Dropzone is an open source light weight JavaScript library that provides drag and drop features to upload images with preview images. In this example before uploading the image we will display preview of the image along with a remove image link and then save it into directory. In order to use dropzone plugin we need to include the Dropzone javascript and CSS files in your laravel blade file. This tutorial we learn to :-

Uploading multiple images with dropzone
Saving images with unique file names to database
Removing images directly from dropzone preview box

Install Laravel 5.8

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

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

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

Configure Database In .env file

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

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DropzoneImageUpload
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=DropzoneImageUpload

DB_USERNAME=root

DB_PASSWORD=

Generate Migration

Now, we have to define table schema for photos table. Open terminal and let’s run the following command to generate a migration file to create photos table in our database.

php artisan make:migration create_photos_table

1	php artisan make:migration create_photos_table

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('photo_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePhotosTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('photo_name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('photos');

}

Run Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the photos table will be created in database along with migrations, password_resets and users table.

Create Model

Next, we need to create a model called Photo using below command.

php artisan make:model Photo

1	php artisan make:model Photo

Once, the above command is executed it will create a model file Photo.php in app directory.

Create Controller

Now, create a controller to upload image. Create a controller named ImageUploadController using command given below –

php artisan make:controller dropzone_image_upload/ImageUploadController

1	php artisan make:controller dropzone_image_upload/ImageUploadController

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

app/Http/Controllers/dropzone_image_upload/ImageUploadController.php

<?php

namespace App\Http\Controllers\dropzone_image_upload;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Validator,Redirect,Response,File;
use App\Photo;

class ImageUploadController extends Controller
{
    //
    public function index()
    {
        return view('dropzone_image_upload.index');
    }

    public function store(Request $request)
    {
        $image = $request->file('file');
        $profileImage = $image->getClientOriginalName();
        // Define upload path
        $destinationPath = public_path('/profile_images/'); // upload path
        $image->move($destinationPath,$profileImage);
        
        // Save In Database
		$imagemodel= new Photo();
		$imagemodel->photo_name="$profileImage";
		$imagemodel->save();
        return response()->json(['success'=>$profileImage]);
    }

    public function destroy(Request $request)
    {
        $filename =  $request->get('filename');
        Photo::where('photo_name',$filename)->delete();
        $path=public_path('/profile_images/').$filename;
        if (file_exists($path)) {
            unlink($path);
        }
        return $filename;  
    }
}

<?php

namespace App\Http\Controllers\dropzone_image_upload;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Validator,Redirect,Response,File;

use App\Photo;

class ImageUploadController extends Controller

{

public function index()

{

return view('dropzone_image_upload.index');

}

public function store(Request $request)

{

$image = $request->file('file');

$profileImage = $image->getClientOriginalName();

// Define upload path

$destinationPath = public_path('/profile_images/'); // upload path

$image->move($destinationPath,$profileImage);

// Save In Database

$imagemodel= new Photo();

$imagemodel->photo_name="$profileImage";

$imagemodel->save();

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

}

public function destroy(Request $request)

{

$filename = $request->get('filename');

Photo::where('photo_name',$filename)->delete();

$path=public_path('/profile_images/').$filename;

if (file_exists($path)) {

unlink($path);

}

return $filename;

}

Here In the controller, we have following methods –

index() :- It displays Drozone Multiple Image Upload Form

store() :- To Upload using Dropzone and Save Multiple Image in database.

destroy() :- To delete files from directory and database.

Note:- Before uploading any file make sure you have created following two directory in the public folder called profile_images.

Create Blade / View Files

In this step, we will create view/blade file to display Image Upload Form using Dropzone. Lets create a blade file “index.blade.php” in “resources/views/dropzone_image_upload/” directory.

Include Dropzone Javascript and CSS files

In order to use dropzone plugin we need to include following Dropzone javascript and CSS files in your laravel blade file.

Dropzone CSS :-

In this file we will be adding dropzone.min.css along with the our bootstrap.min.css as following –

Dropzone Javascript :-

Here we will add dropzone.js file along with the jquery.js as following –

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>

Configure Dropzone Plugin with Remove Image Link

Next, we will provide initial configurations for Dropzone plugin.We setup follwoing dropzone options –

maxFilesize:- Maximum Image size that can be uploaded.

renameFile:- It is used to rename the file before uploading.

acceptedFiles:- File types or extension that can be uploaded.

addRemoveLinks:- It is set to true to display Remove button to remove uploaded file.

removedfile:- It is a callback function invoked when image is removed from dropzone.

Now, our blade file will look something like this.

resources/views/dropzone_image_upload/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Dropzone Multiple Images Uploading - W3Adda</title>
    <meta name="_token" content="{{csrf_token()}}" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
</head>
<body>
<div class="container">
       
    <h3>Laravel Dropzone Multiple Images Uploading - W3Adda</h3>
    <form method="post" action="{{url('dropzone-image-upload')}}" enctype="multipart/form-data" 
                  class="dropzone" id="dropzone">
    @csrf
</form>   
<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            timeout: 5000,
            addRemoveLinks: true,
            removedfile: function(file) 
            {
                var name = file.upload.filename;
                $.ajax({
                    headers: {
                                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                            },
                    type: 'POST',
                    url: '{{ url("dropzone-image-delete") }}',
                    data: {filename: name},
                    success: function (data){
                        console.log("File deleted successfully!!");
                    },
                    error: function(e) {
                        console.log(e);
                    }});
                    var fileRef;
                    return (fileRef = file.previewElement) != null ? 
                    fileRef.parentNode.removeChild(file.previewElement) : void 0;
            },
            success: function(file, response) 
            {
                console.log(response);
            },
            error: function(file, response)
            {
               return false;
            }
};
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel Dropzone Multiple Images Uploading - W3Adda</title>

</head>

<body>

<h3>Laravel Dropzone Multiple Images Uploading - W3Adda</h3>

<form method="post" action="{{url('dropzone-image-upload')}}" enctype="multipart/form-data"

class="dropzone" id="dropzone">

@csrf

</form>

Dropzone.options.dropzone =

{

maxFilesize: 12,

renameFile: function(file) {

var dt = new Date();

var time = dt.getTime();

return time+file.name;

acceptedFiles: ".jpeg,.jpg,.png,.gif",

timeout: 5000,

addRemoveLinks: true,

removedfile: function(file)

{

var name = file.upload.filename;

$.ajax({

headers: {

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

type: 'POST',

url: '{{ url("dropzone-image-delete") }}',

data: {filename: name},

success: function (data){

console.log("File deleted successfully!!");

error: function(e) {

console.log(e);

}});

var fileRef;

return (fileRef = file.previewElement) != null ?

fileRef.parentNode.removeChild(file.previewElement) : void 0;

success: function(file, response)

{

console.log(response);

error: function(file, response)

{

return false;

}

};

</script>

</body>

</html>

Create Routes

After this, we need to add following dropzone image upload routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('dropzone-image-upload', 'dropzone_image_upload\ImageUploadController@index');
Route::post('dropzone-image-upload', 'dropzone_image_upload\ImageUploadController@store');
Route::post('dropzone-image-delete', 'dropzone_image_upload\ImageUploadController@destroy');

Route::get('dropzone-image-upload', 'dropzone_image_upload\ImageUploadController@index');

Route::post('dropzone-image-upload', 'dropzone_image_upload\ImageUploadController@store');

Route::post('dropzone-image-delete', 'dropzone_image_upload\ImageUploadController@destroy');

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/dropzone-image-upload

Output:-

laravel-5-8-dropzone-multiple-image-upload-1

After Image Upload Screen Output:-

Select and Drop Multiple Image files to upload using dropzone.

laravel-5-8-dropzone-multiple-image-upload-3

Laravel 5.8 Autocomplete Search Using Typeahead JS

Install Laravel 5.8

Configure Database In .env file

Create Model and Migration

Run Laravel Migration

Create AutoComplete Controller

Create Blade / View Files

Create Routes

Laravel 5.8 Create REST API With Passport Authentication

Install Laravel 5.8

Configure Database In .env file

Install Passport Package

Run Migration and Install Laravel Passport

Laravel Passport Configuration

Create API Routes

Create Authentication Controller

Start Application Server

Testing the REST API

Laravel 5 Intervention Image Upload and Resize Example

Install Laravel 5.8

Configure Database In .env file

Install Image Intervention Package

Register Package

Generate Migration

Run Migration

Create Model

Create Controller

Create Blade / View Files

Create Routes

Laravel 5.7 Google ReCAPTCHA Integration

Contents

Install Laravel 5.7

Setup Database Credentials

Install Google Captcha Package

Set Google Site Key and Secret Key

Create Controller

Create View/Blade File

Set Routes

Laravel 5.8 Facebook Login with Socialite

Install Laravel 5.8

Configure Database In .env file

Generate Application Key

Set Default String Length

Install Socialite Package via Composer

Crate Facebook Login App

Set Redirect URL

Get Facebook App Id and Secret Key

Configure Laravel Socialite

Migrations and User Model

Authentication Scaffolding

Set Authentication Routes

Create Authentication Controllers

Restart Development Server

Test Laravel 5.8 Facebook Login

Laravel 5.8 User Registration And Login System

Install Laravel 5.8

Configure Database In .env file

Generate Laravel Application Key

Create Database Migration

Authentication Scaffolding

Restart Development Server

Test Laravel 5.8 User Authentication

Laravel 5.8 Google ReCAPTCHA Integration

Contents

Install Laravel 5.8

Setup Database Credentials

Install Google Captcha Package

Set Google Site Key and Secret Key

Create Controller

Create View/Blade File

Set Routes

Laravel 5.8 Email Verification

Install Laravel 5.8

Configure Database In .env file

Email Configuration

Authentication Scaffolding

Email Verification Setup

Add Route

Add Middleware In Controller

Start Development Server