Web Prepration

Web Concept Tutorials

Laravel

How to use Sanctum API Authentication in Laravel

by Leave a Comment

In this post, I am going to explain how to use sanctum api in laravel 8. Laravel 8 Sanctum provides a simple authentication system for SPAs (Single page applications), mobile applications token based APIs.

Sanctum API allows each user of your application to generate multiple API tokens for their account. You can create mobile based API using sanctum, its provide fully restful api and for use in laravel to follow basic steps which is given below.

Step 1: Install Laravel 8

In this step I am going to explain how to install fresh laravel 8, If you have already istalled then ignore installation steps, I am going to explain from scratch so, we need to get fresh Laravel 8 application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Install Sanctum

In this step we need to install sanctum via the Composer package manager, so open your terminal and fire bellow command:

1
2
3
 
composer require laravel/sanctum
 

After successfully installation of package, we need to publish configuration file for that just use below command.

1
2
3
 
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
 

we require to get default migration for create new sanctum tables in our database. so let’s run bellow command.

1
2
3
 
php artisan migrate
 

Next, we need to add middleware for sanctum api, so let’s add as like bellow:

app/Http/Kernel.php

1
2
3
4
5
6
7
8
9
 
....
  
'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],
 

Step 3: Sanctum Configuration

In this step, we need to configuration on three place model, service provider and auth config file.

In model we added HasApiTokens class of Sanctum,

In auth.php, we added api auth configuration.

app/Models/User.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<?php
  
namespace App\Models;
  
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
  
class User extends Authenticatable
{
    use HasFactory, Notifiable, HasApiTokens;
  
    /**
     * 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',
    ];
  
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}
 

Step 4: Add Post Table and Model

Now, we need to create migration for posts table using Laravel 8 php artisan command, so first fire bellow command:

1
2
3
 
php artisan make:migration create_posts_table
 

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create posts table.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<?php
 
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('detail');
            $table->timestamps();
        });
    }
 
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}
 

After create migration we need to migrate for creating database table for posts using migrate command.

1
2
3
 
php artisan migrate
 

app/Models/Post.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'detail'
    ];
}
 

Step 5: Create API Routes

In this step, we will create api routes. Laravel provide api.php file for write web services route. So, let’s add new route on that file.

routes/api.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<?php
  
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\API\RegisterController;
use App\Http\Controllers\API\PostController;
  
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
  
Route::post('register', [RegisterController::class, 'register']);
Route::post('login', [RegisterController::class, 'login']);
    
Route::middleware('auth:sanctum')->group( function () {
    Route::resource('posts', PostController::class);
});
 

Step 6: Create Post Controller Files

In this step, now we need to create new controller as BaseController, PostController and RegisterController, i created new folder “API” in Controllers folder because we will make alone APIs controller, So let’s create both controller:

app/Http/Controllers/API/BaseController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<?php
 
 
namespace App\Http\Controllers\API;
 
 
use Illuminate\Http\Request;
use App\Http\Controllers\Controller as Controller;
 
 
class BaseController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function sendResponse($result, $message)
    {
     $response = [
            'success' => true,
            'data'    => $result,
            'message' => $message,
        ];
 
 
        return response()->json($response, 200);
    }
 
 
    /**
     * return error response.
     *
     * @return \Illuminate\Http\Response
     */
    public function sendError($error, $errorMessages = [], $code = 404)
    {
     $response = [
            'success' => false,
            'message' => $error,
        ];
 
 
        if(!empty($errorMessages)){
            $response['data'] = $errorMessages;
        }
 
 
        return response()->json($response, $code);
    }
}
 

app/Http/Controllers/API/RegisterController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<?php
  
namespace App\Http\Controllers\API;
  
use Illuminate\Http\Request;
use App\Http\Controllers\API\BaseController as BaseController;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Validator;
  
class RegisterController extends BaseController
{
    /**
     * Register api
     *
     * @return \Illuminate\Http\Response
     */
    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 $this->sendError('Validation Error.', $validator->errors());      
        }
  
        $input = $request->all();
        $input['password'] = bcrypt($input['password']);
        $user = User::create($input);
        $success['token'] =  $user->createToken('MyApp')->plainTextToken;
        $success['name'] =  $user->name;
  
        return $this->sendResponse($success, 'User register successfully.');
    }
  
    /**
     * Login api
     *
     * @return \Illuminate\Http\Response
     */
    public function login(Request $request)
    {
        if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){
            $user = Auth::user();
            $success['token'] =  $user->createToken('MyApp')->plainTextToken;
            $success['name'] =  $user->name;
  
            return $this->sendResponse($success, 'User login successfully.');
        }
        else{
            return $this->sendError('Unauthorised.', ['error'=>'Unauthorised']);
        }
    }
}
 

app/Http/Controllers/API/PostController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<?php
  
namespace App\Http\Controllers\API;
  
use Illuminate\Http\Request;
use App\Http\Controllers\API\BaseController as BaseController;
use App\Models\Post;
use Validator;
use App\Http\Resources\Post as PostResource;
  
class PostController extends BaseController
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $posts = Post::all();
    
        return $this->sendResponse(PostResource::collection($posts), 'Posts retrieved successfully.');
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input = $request->all();
  
        $validator = Validator::make($input, [
            'title' => 'required',
            'detail' => 'required'
        ]);
  
        if($validator->fails()){
            return $this->sendError('Validation Error.', $validator->errors());      
        }
  
        $post = Post::create($input);
  
        return $this->sendResponse(new PostResource($post), 'Post created successfully.');
    }
  
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $post = Post::find($id);
  
        if (is_null($post)) {
            return $this->sendError('Post not found.');
        }
  
        return $this->sendResponse(new PostResource($post), 'Post retrieved successfully.');
    }
    
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        $input = $request->all();
  
        $validator = Validator::make($input, [
            'title' => 'required',
            'detail' => 'required'
        ]);
  
        if($validator->fails()){
            return $this->sendError('Validation Error.', $validator->errors());      
        }
  
        $post->title = $input['title'];
        $post->detail = $input['detail'];
        $post->save();
  
        return $this->sendResponse(new PostResource($post), 'Post updated successfully.');
    }
  
    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        $post->delete();
  
        return $this->sendResponse([], 'Post deleted successfully.');
    }
}
 

Step 7: Create Eloquent API Resources

This is a very important step of creating rest api in laravel 8. you can use eloquent api resources with api. it will helps you to make same response layout of your model object. we used in PostController file. now we have to create it using following command:

1
2
3
 
php artisan make:resource Post
 

app/Http/Resources/Post.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<?php
  
namespace App\Http\Resources;
  
use Illuminate\Http\Resources\Json\JsonResource;
  
class Post extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'title' => $this->title,
            'detail' => $this->detail,
            'created_at' => $this->created_at->format('d/m/Y'),
            'updated_at' => $this->updated_at->format('d/m/Y'),
        ];
    }
}
 

Now we are ready to to run full restful api and also passport api in laravel. so let’s run our example so run bellow command for quick run:

1
2
3
 
php artisan serve
 

I hope you found your best…

Send Email Using Queue In Laravel 7

by Leave a Comment

In this tutorial, you learn “how to send email using queue” with laravel 7. I will be explain how to use queue jobs in laravel 7 from scratch. we will simple create email send using queue in this article.

Sometime, need to send bulk email for all users then this process take time to send email to all users. If you don’t want to wait to user for send email or other process on loading server side process then you can use queue. because it’s very fast and visitor will happy to see loading time. Laravel 7 queues provide a unified API across a variety of different queue backends, such as Beanstalk, Amazon SQS, Redis, or even a relational database. Queues allow you to defer the processing of a time-consuming task, such as sending an email. Delaying these time-consuming tasks drastically speeds up web requests to your application.

Here, i am going to explain very simple example to create queue with database driver for test email sending. You can definitely understand how to work queue and how it’s easy. If you haven’t used before then don’t worry, here if from starch and very simple. This is for startup developer on queue task.

Following are the steps for integration:

Step 1 – Install Laravel 7 Application

1
2
3
 
composer create-project --prefer-dist laravel/laravel testQueueJob
 

Step 2: Create a Mail Setup

1
2
3
 
php artisan make:mail SendEmailTest
 

Now copy below code and paste “app/Mail/SendEmailTest.php”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<?php
  
namespace AppMail;
  
use IlluminateBusQueueable;
use IlluminateMailMailable;
use IlluminateQueueSerializesModels;
use IlluminateContractsQueueShouldQueue;
  
class SendEmailTest extends Mailable
{
    use Queueable, SerializesModels;
  
    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
          
    }
  
    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('emails.testQueue');
    }
}
 

No need to create a mail view file, create a view file in “resources/views/emails/testQueue.blade.php” and copy below code and paste.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html>
<html>
<head>
<title>How to send mail using queue in Laravel 6? - Webprepration.com</title>
</head>
<body>
  
<center>
<h2 style="padding: 23px;background: #b3deb8a1;border-bottom: 6px green solid;">
<a href="https://webprepration.com">Visit Our Website : Webprepration.com</a>
</h2>
</center>
  
<p>Hi, Sir</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
<strong>Thank you Sir. :)</strong>
  
</body>
</html>
 

Now we need to configure email & queue setting in .env file.

1
2
3
4
5
6
7
8
9
10
 
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=xyz@gmail.com
MAIL_PASSWORD=123456
MAIL_ENCRYPTION=tls
 
QUEUE_CONNECTION=database
 

Generate queue table migration using below command

1
2
3
4
 
php artisan queue:table
php artisan migrate
 

Step 3: Create Queue Job using a command

1
2
3
 
php artisan make:job SendEmailJob
 

Now, the send email function will reside in the job file. So that job file looks like this.

Read Also: Laravel 7 Email Verification

app/Jobs/SendEmailJob.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<?php
  
namespace AppJobs;
  
use IlluminateBusQueueable;
use IlluminateQueueSerializesModels;
use IlluminateQueueInteractsWithQueue;
use IlluminateContractsQueueShouldQueue;
use IlluminateFoundationBusDispatchable;
use AppMailSendEmailTest;
use Mail;
  
class SendEmailJob implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
  
    protected $details;
  
    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct($details)
    {
        $this->details = $details;
    }
  
    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        $email = new SendEmailTest();
        Mail::to($this->details['email'])->send($email);
    }
}
 

Now create route for test queue job

1
2
3
4
5
6
7
8
 
Route::get('testqueue', function(){
  
$details['email'] = 'abc@gmail.com';  
    dispatch(new AppJobsSendEmailJob($details));
 
});
 

Now you can watch your queue process using laravel queue command, so just run below command.

1
2
3
 
php artisan queue:listen
 

Now run your project and check it.

Laravel 7 Flash Message example

by Leave a Comment

In this article, I am going to explain the laravel 7 flash message example. This article goes in detailed on flash message in controller laravel 7. I would like to show you how to display flash message in laravel 7 after login or post data in database.

Flash notifications are required in laravel 7 application because that way we can give alter with what progress complete, error, warning etc. In this tutorial, I added several ways to give a flash message like redirect with success message, redirect with an error message, redirect with a warning message and redirect with info message. In this example, we use a bootstrap flash alert layout that way it becomes good layout.

Read Also: Laravel 7 Email Verification

Let’s get started with create flash message laravel 7.

There we will define many types of flash message notification like alert success, alert danger, alert info, alert warning messages in bootstrap laravel 7 projects and display these according to task like on success display success message when gettting any error then dispaly error message etc.

So let’s follow below step:

Step 1: Create Global File For Flash Message

we will create new blade file flash-message.blade.php and write code for messages like success,error,warning,info and validation errors etc.

resources/views/flash-message.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
@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
  
@if ($message = Session::get('error'))
<div class="alert alert-danger alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>    
    <strong>{{ $message }}</strong>
</div>
@endif
  
@if ($message = Session::get('warning'))
<div class="alert alert-warning alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>    
    <strong>{{ $message }}</strong>
</div>
@endif
  
@if ($message = Session::get('info'))
<div class="alert alert-info alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>    
    <strong>{{ $message }}</strong>
</div>
@endif
  
@if ($errors->any())
<div class="alert alert-danger">
    <button type="button" class="close" data-dismiss="alert">×</button>    
    Please check the form below for errors
</div>
@endif
 

Read Also: Integrate PayUmoney Payment Gateway

Step 2: Use Flash Message file in app.blade.php file like as bellow:

1
2
3
 
@include('flash-message')
 

Step 3: Use Flash Messages with Redirect

In this step I will be show you how to redirect with message like error, success etc.

1. Redirect with success message

We can redirect route or redirect URL or redirect back with success flash message, we can use in controller like this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
public function create(Request $request)
{
$this->validate($request,[
        'title' => 'required',
        'details' => 'required'
        ]);
 
$post = Post::create($request->all());
return back()->with('success','Post created successfully!');
 
}
 

2. Redirect with error message

We can redirect route or redirect URL or redirect back with error flash message, we can use in controller like this way:

1
2
3
4
5
6
7
 
public function create(Request $request)
{
    return redirect()->route('home')
        ->with('error','You have no permission for this page!');
}
 

Read Also: Log All SQL Queries In Laravel

3. Redirect with warning message

We can simple redirect route or redirect URL or redirect back with warning flash message, we can use in controller like this way:

1
2
3
4
5
6
7
 
public function create(Request $request)
{
    return redirect()->route('home')
            ->with('warning',"You can't Open this link");
}
 

4. Redirect with info message

We can redirect route or redirect URL or redirect back with info flash message, we can use in controller like this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public function create(Request $request)
{
    $this->validate($request,[
        'title' => 'required',
        'details' => 'required'
        ]);
 
 
    $post = Post::create($request->all());
    return back()->with('info','You have added new post!');
 
}
 

I hope you found your best…

Laravel 7 Email Verification

by Leave a Comment

In this post, I am going to explained email verification in laravel 7. How to use email varification in laravel 7, laravel 7 auth verify or email auth verify, you can understand a concept of laravel 7 auth verify email. I explained simply step by step laravel 7 auth verify email. Let’s see bellow example laravel 7 authentication email verification.

Laravel 7 provides email verification setup for new registered users to must have to verify his email verification before proceed. but in laravel old version if we need to email verification process then that we are doing email verification process manually.

You just need to make some basic setup with need to use middleware, routes and mail configuration.

Just follow steps and you will set up for email verification in laravel 7 project.

Step 1: Install Laravel 7

In first step, we need to install Laravel 7 version application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Database Configuration

In this step, we need to configure database configuration details on .env file. So let’s create username, password etc. So let’s add.

.env

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
APP_URL=http://localhost:8000
 
DB_CONNECTION=mysql
 
DB_HOST=127.0.0.1
 
DB_PORT=3306
 
DB_DATABASE=laravel7
 
DB_USERNAME=root
 
DB_PASSWORD=
 

After database configuration, you need to run default migration of laravel by following command:

1
2
3
 
php artisan migrate
 

Step 3: Email Configuration

Here, we need to add email configuration in .env file. We are sending email after user registration so we need to add email smtp details for send email.

.env

1
2
3
4
5
6
7
8
9
10
11
12
13
 
MAIL_DRIVER=smtp
 
MAIL_HOST=smtp.gmail.com
 
MAIL_PORT=587
 
MAIL_USERNAME=youremail@gmail.com
 
MAIL_PASSWORD=yourpass
 
MAIL_ENCRYPTION=tls
 

Step 4: Create Auth

You have to follow few step to make auth in your laravel 7 application.

First you need to install laravel/ui package as like bellow:

1
2
3
 
composer require laravel/ui
 

Now you can use to create registration, login and forgot password with routes by auth command, So simply run bellow command to create:

1
2
3
 
php artisan ui bootstrap --auth
 

Now you need to run npm command, otherwise you can not see better layout of login and register page.

Install NPM:

1
2
3
4
5
6
7
 
npm install
 
Run NPM:
 
npm run dev
 

Step 5: Email Verification Setup

In this step, we need to add email verification setup, so basically we have to add email verification class implement in user model, use middleware for protection. So you need to update like as bellow files one by one:

app/User.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<?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',
    ];
}
 

routes/web.php

1
2
3
4
5
6
7
8
9
 
Route::get('/', function () {
    return view('welcome');
});
  
Auth::routes(['verify' => true]);
  
Route::get('/home', 'HomeController@index')->name('home');
 

app/Http/Controllers/HomeController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<?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');
    }
}
 

Now you are ready to run your laravel 7 app. So let’s check by following command:

1
2
3
 
php artisan serve
 

I hope you found your best…

Install Laravel 6 with Vue JS

by Leave a Comment

If you are beginner with Laravel 6 and Vue then I am sure I can help you to install Vue in Laravel 6. It’s very simple way to install using Laravel UI composer package. Laravel ui provide way to install bootstrap, vue and react setup. they also provide auth scaffold for login and register. laravel 6 provide easy way to work with bootstrap, vue and react.

If you want to use Vue Js in application then before install you must need to install Node js and NPM (Node Package Manager). If your system is not ready with Node js and NPM then you need to install. You can download the Node Js from its official site. After a successful installation, you are ready to start with Vue Js tutorials.

You can use the following commands to check the current version of Node js and NPM.

1
2
3
4
5
6
7
 
// Node js Version
node -v
 
// NPM Version
npm -v
 

The laravel/ui is a separate package that provides the UI scaffoldings for bootstrap, vue and react. Alongside with the auth scaffold for login and registration.

Read Also: How to Integrate Stripe Payment Gateway in Laravel

If you already have a Laravel project setup. then open your terminal and run below command

1
2
3
 
composer require laravel/ui
 

After successfully installation of package, Now we can add Vue in our application

Copy below command and run your terminal

1
2
3
 
php artisan ui vue
 

Installing Node Modules

You can use the “npm” command to install the necessary node modules.

1
2
3
 
npm install
 

After successful installation of node modules, you can see the new directory named “node_modules” at the root of your application. This directory contains all the necessary modules.

Vue Js Folder Structure and Files

In the Laravel app, all the necessary Vue Js component found at the “resources/js/components”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
 

In the “resources/js/app.js” file, we will do the basic logic which is required for our application.

Read Also: Angular 8 interview questions and answer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
    el: '#app'
});
 

Blade Template
You can add the required component to your blade template. For example:

1
2
3
4
5
6
 
@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection
 

Compiling the Vue Js Component
You can use the following NPM command to track the changes in your application and compile the components and other required files.

1
2
3
4
 
// command
npm run watch