Category Archives: Laravel

Laravel Tutorials

Laravel 9 Generate Dummy Data Using Factory Tutorial

In this Laravel 9 Generate Dummy Data Using Factory Tutorial, I will show you how to generate dummy data using factory, faker, tinker and seeder in laravel 9 application. In this tutorial you will learn to generate fake or dummy data in a database table using factory in laravel 9. While working with any web application using laravel we come situations where we need some dummy or test data to available in database. Laravel factory makes this job much easier using laravel factory we can generate dummy data into the database table.

Laravel 9 Generate Dummy Data Using Factory Tutorial

In this tutorial, you will learn how to generate dummy data into the database tables using factory in laravel 9 application. Please follow the instruction give below:

Install Laravel 9
Setup Database Credential
Create a Model & Migration File
Create New Factory File
Generate Fake Data Using Tinker

Install Laravel 9

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

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

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

Configure Database

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

.env

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara9blog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

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

php artisan make:model Post -m

1	php artisan make:model Post -m

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\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
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('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

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('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Next, go to app/Models/Post.php file and add the $fillable property in the Post model as following.

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $fillable = [

'title', 'description'

];

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

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

Create New Factory File

In this step, we will create a factory file. Run the following command to create factory class named PostFactory by using the following command:

php artisan make:factory PostFactory --model=Post

1	php artisan make:factory PostFactory --model=Post

Go to app/database/factories and open PostFactory.php and put the below code into your file.

<?php
 
namespace Database\Factories;
 
use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
 
class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;
 
    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'title' => $this->faker->title,
            'description' => $this->faker->text,
        ];
    }
}

<?php

namespace Database\Factories;

use App\Models\Post;

use Illuminate\Database\Eloquent\Factories\Factory;

use Illuminate\Support\Str;

class PostFactory extends Factory

{

/**

* The name of the factory's corresponding model.

* @var string

protected $model = Post::class;

/**

* Define the model's default state.

* @return array

public function definition()

{

return [

'title' => $this->faker->title,

'description' => $this->faker->text,

];

}

Run the following command to auto load dependencies.

Generate Fake Data Using Tinker

Please use the following command to generate fake data using tinker:

php artisan tinker

1	php artisan tinker

Now, run following command to generate 100 rows of random Notes.

Post::factory()->count(100)->create()

1	Post::factory()->count(100)->create()

Laravel 9 Razorpay Payment Gateway Integration Tutorial with Example

In this Laravel 9 Razorpay Payment Gateway Integration Tutorial with Example tutorial, I’ll show you how to integrate Razorpay payment gateway in laravel 9. In this tutorial you will learn to integrate Razorpay in laravel 9. In this step by step tutorial I’ll share laravel 9 Razorpay integration example.

Razorpay Payment Gateway

Razorpay is one of the popular payment gateway, that allows us to accept payment from your customer. Razorpay is very simple, hassle free and easy to integrate payment gateway. Integrating Razorpay payment gateway in laravel 9 is a breeze.

Laravel 9 Razorpay Payment Gateway Integration Example

In this tutorial, you will learn to integrate Razorpay payment gateway in your laravel 9 application. Follow this step by step tutorial to learn Razorpay payment gateway integration in laravel 9.

Install Laravel 9
Connecting App to Database
Create Model & Migration
Make Routes
Create Controller & Methods
Create Blade View
Start Development Server
Run This App

Install Laravel 9

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

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

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara9blog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

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

php artisan make:model Payment -m

1	php artisan make:model Payment -m

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 –

public function up()
 {
 Schema::create('payments', function (Blueprint $table) {
 $table->increments('id');
 $table->string('r_payment_id');
 $table->string('product_id');
 $table->string('user_id');
 $table->string('amount');
 $table->timestamps();
 });
 }

public function up()

{

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

$table->increments('id');

$table->string('r_payment_id');

$table->string('product_id');

$table->string('user_id');

$table->string('amount');

$table->timestamps();

});

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

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

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

use App\Http\Controllers\RazorpayController;

Route::get('product', [RazorpayController::class, 'index']);
Route::get('paysuccess', [RazorpayController::class, 'razorPaySuccess']);
Route::get('razor-thank-you', [RazorpayController::class, 'RazorThankYou']);

use App\Http\Controllers\RazorpayController;

Route::get('product', [RazorpayController::class, 'index']);

Route::get('paysuccess', [RazorpayController::class, 'razorPaySuccess']);

Route::get('razor-thank-you', [RazorpayController::class, 'RazorThankYou']);

Create Controller By Artisan Command

Now, lets create a controller for Razorpay Payments. Create a controller named RazorpayController using command given below –

php artisan make:controller RazorpayController

1	php artisan make:controller RazorpayController

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

app/Http/Controllers/RazorpayController.php

<?php
 
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
 
 use App\Models\Payment;
 
 use Redirect,Response;
 
 class RazorpayController extends Controller
 {
     public function razorpayProduct()
     {
       return view('razorpay');
     }
 
     public function razorPaySuccess(Request $Request){
         $data = [
                   'user_id' => '1',
                   'product_id' => $request->product_id,
                   'r_payment_id' => $request->payment_id,
                   'amount' => $request->amount,
                ];
 
         $getId = Payment::insertGetId($data);  
 
         $arr = array('msg' => 'Payment successfully credited', 'status' => true);
 
         return Response()->json($arr);    
     }
 
     public function RazorThankYou()
     {
       return view('thankyou');
     }
 
 }

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Payment;

use Redirect,Response;

class RazorpayController extends Controller

{

public function razorpayProduct()

{

return view('razorpay');

}

public function razorPaySuccess(Request $Request){

$data = [

'user_id' => '1',

'product_id' => $request->product_id,

'r_payment_id' => $request->payment_id,

'amount' => $request->amount,

];

$getId = Payment::insertGetId($data);

$arr = array('msg' => 'Payment successfully credited', 'status' => true);

return Response()->json($arr);

}

public function RazorThankYou()

{

return view('thankyou');

}

Create Blade Views

In this step, we will create view/blade file razorpay payment processing. Lets create a blade file “razorpay.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/razorpay.blade.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 9 Razorpay Payment Gateway</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<style>
.card-product .img-wrap {
border-radius: 3px 3px 0 0;
overflow: hidden;
position: relative;
height: 220px;
text-align: center;
}
.card-product .img-wrap img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.card-product .info-wrap {
overflow: hidden;
padding: 15px;
border-top: 1px solid #eee;
}
.card-product .bottom-wrap {
padding: 15px;
border-top: 1px solid #eee;
}
.label-rating { margin-right:10px;
color: #333;
display: inline-block;
vertical-align: middle;
}
.card-product .price-old {
color: #999;
}
</style>
</head>
<body>
<div class="container">

<div class="row">
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.your-site.com/wp-content/uploads/2019/04/logo.png"></div>
<figcaption class="info-wrap">
<h4 class="title">Mouse</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div>
<!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1000" data-id="1">Order Now</a> 
<div class="price-wrap h5">
<span class="price-new">₹1000</span> <del class="price-old">₹1200</del>
</div>
<!-- price-wrap.// -->
</div>
<!-- bottom-wrap.// -->
</figure>
</div>
<!-- col // -->
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.your-site.com/wp-content/uploads/2019/03/vvjghg.png"> </div>
<figcaption class="info-wrap">
<h4 class="title">Sony Watch</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div>
<!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1280" data-id="2">Order Now</a> 
<div class="price-wrap h5">
<span class="price-new">₹1280</span> <del class="price-old">₹1400</del>
</div>
<!-- price-wrap.// -->
</div>
<!-- bottom-wrap.// -->
</figure>
</div>
<!-- col // -->
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.your-site.com/wp-content/uploads/2019/03/jhgjhgjg.jpg"></div>
<figcaption class="info-wrap">
<h4 class="title">Mobile</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div>
<!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right order_now" data-amount="1280" data-id="3">Order Now</a> 
<div class="price-wrap h5">
<span class="price-new">₹1500</span> <del class="price-old">₹1980</del>
</div>
<!-- price-wrap.// -->
</div>
<!-- bottom-wrap.// -->
</figure>
</div>
<!-- col // -->
</div>
<!-- row.// -->
</div>
<!--container.//-->
<br><br><br>
<article class="bg-secondary mb-3">
<div class="card-body text-center">
<h4 class="text-white">Welcome<br>  </h4>
<p class="h5 text-white">Thank you for being here </p>
<br>
<p><a class="btn btn-warning" target="_blank" href="//your-site.com/"> your-site.com  
<i class="fa fa-window-restore "></i></a>
</p>
</div>
<br><br><br>
</article>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var SITEURL = '{{URL::to('')}}';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}); 
$('body').on('click', '.buy_now', function(e){
var totalAmount = $(this).attr("data-amount");
var product_id =  $(this).attr("data-id");
var options = {
"key": "rzp_test_SYm5UF3bsPxKKR",
"amount": (totalAmount*100), // 2000 paise = INR 20
"name": "your-site",
"description": "Payment",
"image": "//www.your-site.com/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",
"handler": function (response){
window.location.href = SITEURL +'/'+ 'paysuccess?payment_id='+response.razorpay_payment_id+'&product_id='+product_id+'&amount='+totalAmount;
},
"prefill": {
"contact": '1234567890',
"email":   'your-site@gmail.com',
},
"theme": {
"color": "#528FF0"
}
};
var rzp1 = new Razorpay(options);
rzp1.open();
e.preventDefault();
});
/*document.getElementsClass('buy_plan1').onclick = function(e){
rzp1.open();
e.preventDefault();
}*/
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

<!doctype html>

<head>

<title>Laravel 9 Razorpay Payment Gateway</title>

<style>

.card-product .img-wrap {

border-radius: 3px 3px 0 0;

overflow: hidden;

position: relative;

height: 220px;

text-align: center;

}

.card-product .img-wrap img {

max-height: 100%;

max-width: 100%;

object-fit: cover;

}

.card-product .info-wrap {

overflow: hidden;

padding: 15px;

border-top: 1px solid #eee;

}

.card-product .bottom-wrap {

padding: 15px;

border-top: 1px solid #eee;

}

.label-rating { margin-right:10px;

color: #333;

display: inline-block;

vertical-align: middle;

}

.card-product .price-old {

color: #999;

}

</style>

</head>

<body>

<h4 class="title">Mouse</h4>

<p class="desc">Some small description goes here</p>

<div class="label-rating">132 reviews</div>

<div class="label-rating">154 orders </div>

</div>

</figcaption>

<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1000" data-id="1">Order Now</a>

</div>

</div>

</figure>

</div>

<h4 class="title">Sony Watch</h4>

<p class="desc">Some small description goes here</p>

<div class="label-rating">132 reviews</div>

<div class="label-rating">154 orders </div>

</div>

</figcaption>

<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1280" data-id="2">Order Now</a>

</div>

</div>

</figure>

</div>

<h4 class="title">Mobile</h4>

<p class="desc">Some small description goes here</p>

<div class="label-rating">132 reviews</div>

<div class="label-rating">154 orders </div>

</div>

</figcaption>

<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right order_now" data-amount="1280" data-id="3">Order Now</a>

</div>

</div>

</figure>

</div>

</div>

</div>

<h4 class="text-white">Welcome<br> </h4>

<p class="h5 text-white">Thank you for being here </p>

<br>

<p><a class="btn btn-warning" target="_blank" href="//your-site.com/"> your-site.com

</p>

</div>

</article>

var SITEURL = '{{URL::to('')}}';

$.ajaxSetup({

headers: {

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

}

});

$('body').on('click', '.buy_now', function(e){

var totalAmount = $(this).attr("data-amount");

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

var options = {

"key": "rzp_test_SYm5UF3bsPxKKR",

"amount": (totalAmount*100), // 2000 paise = INR 20

"name": "your-site",

"description": "Payment",

"image": "//www.your-site.com/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",

"handler": function (response){

window.location.href = SITEURL +'/'+ 'paysuccess?payment_id='+response.razorpay_payment_id+'&product_id='+product_id+'&amount='+totalAmount;

"prefill": {

"contact": '1234567890',

"email": 'your-site@gmail.com',

"theme": {

"color": "#528FF0"

}

};

var rzp1 = new Razorpay(options);

rzp1.open();

e.preventDefault();

});

/*document.getElementsClass('buy_plan1').onclick = function(e){

rzp1.open();

e.preventDefault();

}*/

</script>

</body>

</html>

Get your secret key from razorpay payment gateway dashboard and put the key in script tag section like this => “key”: “rzp_test_ddgdfgdfgdg”,

Then visit resources/views and Create a new blade view file name thankyou.blade.php. Then put the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Thank You - Yoursite</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body class="">
<br><br><br><br>
<article class="bg-secondary mb-3">  
<div class="card-body text-center">
<h4 class="text-white">Thank you for payment<br></h4>
<br>
<p><a class="btn btn-warning" target="_blank" href="https://www.your-site.com/"> Yoursite.com  
<i class="fa fa-window-restore "></i></a></p>
</div>
<br><br><br>
</article>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Thank You - Yoursite</title>

</head>

<h4 class="text-white">Thank you for payment<br></h4>

<br>

<p><a class="btn btn-warning" target="_blank" href="https://www.your-site.com/"> Yoursite.com

</div>

</article>

</body>

</html>

Run Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/product

1	http://localhost:8000/product

Laravel 9 Multiple Image Upload using jQuery Ajax Tutorial

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

Laravel 9 Multiple Image Upload using jQuery Ajax Tutorial

In this step by step Laravel 9 Multiple Image Upload using jquery ajax tutorial I’ll demonstrate how to upload multiple image using jquery ajax in laravel 8 with preview. I’ll also show you how to upload multiple image in laravel 8 with preview. Please follow the steps given below:

Install Laravel 9
Database Configuration
Build Photo Model & Migration
Create Routes
Generate Controller using Artisan Command
Create Blade View
Start Development Server
Start App on Browser

Install Laravel 9

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

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

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

Configure Database

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

.env

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara9blog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

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

php artisan make:model Photo -m

1	php artisan make:model Photo -m

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 –

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

public function up()

{

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

$table->id();

$table->string('title');

$table->string('path');

$table->timestamps();

});

}

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.

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

use App\Http\Controllers\UploadMultipleImageController;
 
Route::get('upload-multiple-image-preview', [UploadImagesController::class, 'index']);
 
Route::post('upload-multiple-image-preview', [UploadImagesController::class, 'store']);

use App\Http\Controllers\UploadMultipleImageController;

Route::get('upload-multiple-image-preview', [UploadImagesController::class, 'index']);

Route::post('upload-multiple-image-preview', [UploadImagesController::class, 'store']);

Create Controller By Artisan Command

Now, lets create a controller for simple image uploading. Create a controller named UploadMultipleImageController using command given below –

php artisan make:controller UploadMultipleImageController

1	php artisan make:controller UploadMultipleImageController

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

app/Http/Controllers/UploadMultipleImageController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Photo;
class UploadImagesController extends Controller
{
   public function index()
    {
        return view('images-upload-form');
    }
    public function store(Request $request)
    {
         
        $validateImageData = $request->validate([
        'images' => 'required',
            'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
        ]);
        if($request->hasfile('images'))
         {
            foreach($request->file('images') as $key => $file)
            {
                $path = $file->store('public/images');
                $name = $file->getClientOriginalName();
                $insert[$key]['title'] = $name;
                $insert[$key]['path'] = $path;
            }
         }
        Photo::insert($insert);
 
        return redirect('upload-multiple-image-preview')->with('status', 'All Images has been uploaded successfully');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Photo;

class UploadImagesController extends Controller

{

public function index()

{

return view('images-upload-form');

}

public function store(Request $request)

{

$validateImageData = $request->validate([

'images' => 'required',

'images.*' => 'mimes:jpg,png,jpeg,gif,svg'

]);

if($request->hasfile('images'))

{

foreach($request->file('images') as $key => $file)

{

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

$name = $file->getClientOriginalName();

$insert[$key]['title'] = $name;

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

}

Photo::insert($insert);

return redirect('upload-multiple-image-preview')->with('status', 'All Images has been uploaded successfully');

}

Create Blade View

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

resources/views/images-upload-form.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Upload Multiple Image using jQuery ajax</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<style>
.images-preview-div img
{
padding: 10px;
max-width: 100px;
}
</style>
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 9 Upload Multiple Image using jQuery Ajax</h2>
</div>
<div class="card-body">
<form name="images-upload-form" method="POST"  action="{{ url('upload-multiple-image-preview') }}" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="images[]" id="images" placeholder="Choose images" multiple >
</div>
@error('images')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="col-md-12">
<div class="mt-1 text-center">
<div class="images-preview-div"> </div>
</div>  
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script >
$(function() {
// Multiple images preview with JavaScript
var previewImages = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#images').on('change', function() {
previewImages(this, 'div.images-preview-div');
});
});
</script>
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Upload Multiple Image using jQuery ajax</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<style>

.images-preview-div img

{

padding: 10px;

max-width: 100px;

}

</style>

<h2>Laravel 9 Upload Multiple Image using jQuery Ajax</h2>

</div>

@csrf

</div>

@error('images')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

</div>

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

</div>

</form>

</div>

$(function() {

// Multiple images preview with JavaScript

var previewImages = function(input, imgPreviewPlaceholder) {

if (input.files) {

var filesAmount = input.files.length;

for (i = 0; i < filesAmount; i++) {

var reader = new FileReader();

reader.onload = function(event) {

$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);

}

reader.readAsDataURL(input.files[i]);

}

};

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

previewImages(this, 'div.images-preview-div');

});

</script>

</div>

</body>

</html>

Run Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/upload-multiple-image-preview

1	http://localhost:8000/upload-multiple-image-preview

Laravel 9 Generator QR Code Tutorial with Example

Laravel 9 Generate QR Code Example

In this Laravel 9 Generator QR Code Tutorial with Example tutorial, we will learn to generate QR Code in laravel 9. In this step by step tutorial I’ll show you how to generate qr codes with any text, size, color, background color, format like png, eps, svg. In this laravel 9 qr code example, we will be using simple-qrcode package to generate QR codes.The simple-qrcode package is used to generate qr code in your laravel application.

Laravel 9 simple qrcode package

The simple-qrcode package has many options for creating qr codes. You can also create qr code for geo, phone number, text message using simple qrcode package. The simple-qrcode package is very easy to install and use.

Generate QR Code In Laravel 9 Tutorial

In this step by step tutorial we generate qr codes using simple-qrcode package.

Install Laravel 9
Setup Database Credentials
Install simple-qrcode package
Define Route
Create Blade View
Start Development Server
Conclusion

Install Laravel 9

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

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

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

Install Laravel 9 Simple qrcode Package

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

composer require simplesoftwareio/simple-qrcode

1	composer require simplesoftwareio/simple-qrcode

Register Package

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

config/app.php

'providers' => [
 ….
 SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class
 ],

'aliases' => [
 ….
 'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class
 ],8

'providers' => [

….

SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class

'aliases' => [

….

'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class

],8

How to use simple-qrcode Package In Laravel 9

Qr code with specified string can be generated as follows –

Syntax:-

QrCode::generate("string")

1	QrCode::generate("string")

Simple QR Code

Simple Qr code with specified string can be generated using generate() method. Add a simple-qr-code route to your routes/web.php file to return simple QR code as follows –

Route::get('simple-qr-code', function () {
     return QrCode::size(200)->generate('W3Adda Laravel Tutorial');
});

Route::get('simple-qr-code', function () {

return QrCode::size(200)->generate('W3Adda Laravel Tutorial');

});

Here, size() function is used to specify the size of the QR Code. Visit (http://localhost:8000/simple-qr-code) to see the QR code. Scan the QR code and you will see the text. You can also display the QR code in Blade file as follows –

{!! QrCode::size(200)->generate('W3Adda Laravel Tutorial'); !!}

1	{!! QrCode::size(200)->generate('W3Adda Laravel Tutorial'); !!}

QR Code with Color

You can also set color for QR code pattern and the background using color(R, G, B) and backgroundColor(R, G, B) methods.

Add a color-qr-code route to your routes/web.php file to return colored QR code as follows –

Route::get('color-qr-code', function () {
     return QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial');
});

Route::get('color-qr-code', function () {

return QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial');

});

Visit (http://localhost:8000/color-qr-code) to see the colored QR code. Or you can simply display the colored QR code in Blade file as follows –

{!! QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial'); !!}

1	{!! QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial'); !!}

QR Code with Image

You can also place an image in QR code using the merge(“file_name.png”) method, this method only accept png files and you also need to format the response back to png.

Add a qr-code-with-image route to your routes/web.php file to return QR code with image as follows –

Route::get('qr-code-with-image', function () {
 $image = QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)
                ->size(200)->errorCorrection('H')
                ->generate('W3Adda Laravel Tutorial');
return response($image)->header('Content-type','image/png');
});

Route::get('qr-code-with-image', function () {

$image = QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)

->size(200)->errorCorrection('H')

->generate('W3Adda Laravel Tutorial');

return response($image)->header('Content-type','image/png');

});

Visit (http://localhost:8000/qr-code-with-image) to see the QR code with Image merged. Or you can simply display the QR code with Image in Blade file using <img> tag as follows –

<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)
                        ->size(200)->errorCorrection('H')
                        ->generate('W3Adda Laravel Tutorial')) !!} ">

<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)

->size(200)->errorCorrection('H')

->generate('W3Adda Laravel Tutorial')) !!} ">

Email QR code

You can encode QR codes that automatically fill-in email address, subject and body of the email.

Syntax:-

QrCode::email($to_address, $subject, $body);

1	QrCode::email($to_address, $subject, $body);

Example:-

//Specify just email address
QrCode::email('john@w3adda.com');

//Specify subject and the body, let user enter the to_address
QrCode::email(null, 'Test message subject', 'This is message body.');

//Specify email address, subject and the body
QrCode::email('john@w3adda.com', 'Thank you for visiting w3adda.com', 'Laravel Tutorial');

//Specify just email address

QrCode::email('john@w3adda.com');

//Specify subject and the body, let user enter the to_address

QrCode::email(null, 'Test message subject', 'This is message body.');

//Specify email address, subject and the body

QrCode::email('john@w3adda.com', 'Thank you for visiting w3adda.com', 'Laravel Tutorial');

QR Code Phone Number

You can encode QR codes such that it automatically open up the phone dialer and dial the phone number.

Syntax:-

QrCode::phoneNumber($number);

1	QrCode::phoneNumber($number);

Example:-

QrCode::phoneNumber('123-456-7890');

1	QrCode::phoneNumber('123-456-7890');

QR Code Text Message

You can encode QR codes such that it automatically open up the phone messenger and fill-in phone number or the message body.

Syntax:-

QrCode::SMS(<number>, <message>);

1	QrCode::SMS(<number>, <message>);

Example:-

//scan the phone number to send the message
QrCode::SMS('123-456-7890');
 
//scan phone number along with the message
QrCode::SMS('123-456-7890', 'Message Body');

//scan the phone number to send the message

QrCode::SMS('123-456-7890');

//scan phone number along with the message

QrCode::SMS('123-456-7890', 'Message Body');

QR Code Geo co-ordinates

You can encode QR codes such that it automatically open up map application with the specified location.

Syntax:-

QrCode::geo(<latitude>, <longitude>);

1	QrCode::geo(<latitude>, <longitude>);

Example:-

QrCode::geo(15.3544, 75.787980);

1	QrCode::geo(15.3544, 75.787980);

Create Blade / View Files

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

resources/views/qrcode/index.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Generate QR Code Tutorial with Example - W3Adda</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Laravel 9 Generate QR Code Tutorial with Example - W3Adda</h2>
<br>
<br>
    <div class="row">
			<div class="col-md-4">
				    <h5>Simple Qr Code With String</h5>
    {!! QrCode::size(200)->generate('W3Adda Laravel Tutorial'); !!}
			</div>

			<div class="col-md-4">
				<h5>Qr Code With Color</h5>
     {!! QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial'); !!}
				
			</div>
			<div class="col-md-4">
				<h5>Qr Code with Image</h5>
				<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->merge('https://www.w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)
                        ->size(200)->errorCorrection('H')
                        ->generate('W3Adda Laravel Tutorial')) !!} ">
				
			</div>
	</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Generate QR Code Tutorial with Example - W3Adda</title>

</head>

<body>

<h2>Laravel 9 Generate QR Code Tutorial with Example - W3Adda</h2>

<br>

<h5>Simple Qr Code With String</h5>

{!! QrCode::size(200)->generate('W3Adda Laravel Tutorial'); !!}

</div>

<h5>Qr Code With Color</h5>

{!! QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial'); !!}

</div>

<h5>Qr Code with Image</h5>

<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->merge('https://www.w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)

->size(200)->errorCorrection('H')

->generate('W3Adda Laravel Tutorial')) !!} ">

</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('generate-qr-code', function(){
	 return view('qrcode.index');
});

Route::get('qr-code-with-image', function () {
 $image = QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)
                ->size(200)->errorCorrection('H')
                ->generate('W3Adda Laravel Tutorial');
return response($image)->header('Content-type','image/png');
});

Route::get('color-qr-code', function () {
     return QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial');
});

Route::get('simple-qr-code', function () {
     return QrCode::size(200)->generate('W3Adda Laravel Tutorial');
});

Route::get('generate-qr-code', function(){

return view('qrcode.index');

});

Route::get('qr-code-with-image', function () {

$image = QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)

->size(200)->errorCorrection('H')

->generate('W3Adda Laravel Tutorial');

return response($image)->header('Content-type','image/png');

});

Route::get('color-qr-code', function () {

return QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial');

});

Route::get('simple-qr-code', function () {

return QrCode::size(200)->generate('W3Adda Laravel Tutorial');

});

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/generate-qr-code

1	http://localhost:8000/generate-qr-code

Output:-

Laravel 8 Generate QR Code Example

Laravel 9 Generate Simple QR Code

Below is an example of generating simple qr code in laravel 8 using simple qr code package. We have added following route in the web.php file to generate simple qr code in laravel.

Route::get('simple-qr-code', function () {
     return QrCode::size(200)->generate('W3Adda Laravel Tutorial');
});

Route::get('simple-qr-code', function () {

return QrCode::size(200)->generate('W3Adda Laravel Tutorial');

});

Now, visit the following url in browser to view the simple qr code generated laravel.

http://localhost:8000/simple-qr-code

1	http://localhost:8000/simple-qr-code

Output:-

How to Generate QR Code In Laravel 9

Laravel 9 Generate QR Code With Background Color

Below is an example of generating qr code with background color in laravel 8 using simple qr code package. We have added following route in the web.php file to generate qr code with background color.

Route::get('color-qr-code', function () {
     return QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial');
});

Route::get('color-qr-code', function () {

return QrCode::size(200)->backgroundColor(255,55,0)->generate('W3Adda Laravel Tutorial');

});

Now, visit the following url in browser to view the qr code with background color in laravel.

http://localhost:8000/color-qr-code

1	http://localhost:8000/color-qr-code

Output:-

Laravel 9 Generate QR Code with background color

Laravel 9 Generate QR Code With Image

Below is an example of generating qr code with image in laravel 8 using simple qr code package. We have added following route in the web.php file to generate qr code with image.

Route::get('qr-code-with-image', function () {
 $image = QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)
                ->size(200)->errorCorrection('H')
                ->generate('W3Adda Laravel Tutorial');
return response($image)->header('Content-type','image/png');
});

Route::get('qr-code-with-image', function () {

$image = QrCode::format('png')->merge('http://w3adda.com/wp-content/uploads/2019/07/laravel.png', 0.3, true)

->size(200)->errorCorrection('H')

->generate('W3Adda Laravel Tutorial');

return response($image)->header('Content-type','image/png');

});

Now, visit the following url in browser to view the qr code with image generated in laravel.

http://localhost:8000/qr-code-with-image

1	http://localhost:8000/qr-code-with-image

Output:-

laravel-9-generate-qr-code-with-image

In this tutorial we have learned how to generate qr code in laravel 9. I have also shown you how to implement a laravel 9 qr code example.

Laravel 9 Autocomplete Search using Typeahead JS Tutorial

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

Laravel jQuery 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 9.

Laravel 9 Autocomplete Search using Typeahead JS Tutorial

In this step by step tutorial I will demonstrate how to create a dynamic database driven ajax jquery autocomplete using typeahead js in Laravel 9. Please follow the instruction given below:

Install Laravel 9
Connecting App to Database
Generate Fake Records
Add Routes
Create Controller & Methods
Create Blade View
Start Development Server
Test This App

Install Laravel 9

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

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

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

Connecting App to Database

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Generate Fake Records

In this step we will insert dummy data into database

php artisan migrate

1	php artisan migrate

Now we will add fake records in our database. use the below command and add 100 fake records in database :

php artisan tinker 

factory(App\User::class, 100)->create();

php artisan tinker

factory(App\User::class, 100)->create();

Add Routes

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

routes/web.php

use App\Http\Controllers\AutoCompleteController;

Route::get('search', [AutoCompleteController::class, 'index']);
Route::get('autocomplete', [AutoCompleteController::class, 'search']);

use App\Http\Controllers\AutoCompleteController;

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

Route::get('autocomplete', [AutoCompleteController::class, 'search']);

Create Controller & Methods

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

php artisan make:controller AutoCompleteController

1	php artisan make:controller AutoCompleteController

After successfully create controller go to app/controllers/AutoCompleteController.php and put the below code :

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\User;
 
class AutoCompleteController extends Controller
{
 
    public function index()
    {
        return view('search');
    }
 
    public function search(Request $request)
    {
          $search = $request->get('term');
      
          $result = User::where('name', 'LIKE', '%'. $search. '%')->get();
 
          return response()->json($result);
            
    } 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

class AutoCompleteController extends Controller

{

public function index()

{

return view('search');

}

public function search(Request $request)

{

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

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

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

}

Create Blade View

In this step we need to create blade view file. Go to app/resources/views and create one file name search.blade.php . After create blade file put the below html code here with jquery ui and css library file :

<!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>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="//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 AutoComplete Search Using Typeahead JS</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>Autocomplete Search Using Typeahead JS</title>

<style>

.container{

padding: 10%;

text-align: center;

}

</style>

</head>

<body>

<div class="col-12"><h2>Laravel AutoComplete Search Using Typeahead JS</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>

Start Development Server

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

php artisan serve

1	php artisan serve

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

Http://localhost:8000/search

1	Http://localhost:8000/search

Laravel 9 CKeditor Image Upload Tutorial Example

In this Laravel 9 CKeditor Image Upload Tutorial I will show you how to install and use CKeditor with image upload in laravel 9. In this tutorial, you will learn to install CKeditor with image upload in laravel 9. In this step by step guide you how to integrate CKeditor editor with image upload in laravel 9. Integration of CKeditor editor in laravel form is simple process. I will also show you how to integrate or enable image upload in CKeditor editor.

While creating forms we come to situation where we may text editor field so that we can insert and save html and other text into database. The CKeditor editor is feature rich wysiwyg html editor allows us to integrate text editor fields in html form.

Laravel 9 CKeditor Image Upload Tutorial Example

In this laravel 9 CKeditor with image upload integration example I will guide you through step by step to install and use CKeditor editor with image upload in laravel 9 application. Please follow the instruction given below:

Install Laravel 9
Install CKEditor Package in Laravel
Register CKEditor package in Laravel
Publish the Ckeditor package by command
Add Route
Create Controller Using Artisan Command
Create Blade View
upload and Insert Image in laravel using CKEditor

Install Laravel 9

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

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

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

Install CKEditor In Laravel

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

composer require unisharp/laravel-ckeditor

1	composer require unisharp/laravel-ckeditor

Register CKEditor package in Laravel

Now, we will register the package in laravel. Go to config/app.php and put the following line to the providers array.

Unisharp\Ckeditor\ServiceProvider::class,

1	Unisharp\Ckeditor\ServiceProvider::class,

Publish the Ckeditor package by command

Now run following command to copy some of the files and folders from ‘vendor\unisharp\laravel-ckeditor’ to ‘public\vendor\unisharp\laravel-ckeditor’.

php artisan vendor:publish --tag=ckeditor

1	php artisan vendor:publish --tag=ckeditor

Add Route

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

routes/web.php

use App\Http\Controllers\CkeditorController;

Route::get('ckeditor', [CkeditorController::class, 'index']);

use App\Http\Controllers\CkeditorController;

Route::get('ckeditor', [CkeditorController::class, 'index']);

Create Controller Using Artisan Command

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

php artisan make:controller CkeditorController

1	php artisan make:controller CkeditorController

After successfully run the above command and create a controller file. Next open your controller and put the below code into your file.

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Validator,Redirect,Response;
  
class CkeditorController extends Controller
{
  
    public function index()
    {
        return view('ckeditor');
    }  
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

class CkeditorController extends Controller

{

public function index()

{

return view('ckeditor');

}

Create Blade View

Now we go resource/views and create a file name ckeditor.blade.php. After this we will create a blade file now put the following code in it:

<!DOCTYPE html>
<html>
<head>
<title>Install and Use CKEditor in Laravel with Image Upload</title>
  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
    <textarea class="form-control" id="description" name="description"></textarea>
</div>
 
<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
 
<script>
    CKEDITOR.replace( 'description' );
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Install and Use CKEditor in Laravel with Image Upload</title>

</head>

<body>

</div>

CKEDITOR.replace( 'description' );

</script>

</body>

</html>

<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>

1	<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>

Upload and Insert Image in laravel using CKEditor

Now we have to enable image upload option in ckeditor as following:

<script>
    CKEDITOR.replace( 'description', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>

CKEDITOR.replace( 'description', {

filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",

filebrowserUploadMethod: 'form'

});

</script>

Now we will create a route for upload the image in laravel using CKEditor. Open route/web.php file and add the following route into it:

Route::post('ckeditor/image_upload', [CkeditorController::class, 'upload'])->name('upload');

1	Route::post('ckeditor/image_upload', [CkeditorController::class, 'upload'])->name('upload');

Next, open your terminal and run the below command:

php artisan storage:link

1	php artisan storage:link

Next, we will put the below method in our controller. This method will store the image or files in the server and return the image URL.

public function upload(Request $request)
{
    if($request->hasFile('upload')) {
        //get filename with extension
        $filenamewithextension = $request->file('upload')->getClientOriginalName();
   
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
   
        //get file extension
        $extension = $request->file('upload')->getClientOriginalExtension();
   
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
   
        //Upload File
        $request->file('upload')->storeAs('public/uploads', $filenametostore);
 
        $CKEditorFuncNum = $request->input('CKEditorFuncNum');
        $url = asset('storage/uploads/'.$filenametostore); 
        $msg = 'Image successfully uploaded'; 
        $re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
          
        // Render HTML output 
        @header('Content-type: text/html; charset=utf-8'); 
        echo $re;
    }
}

public function upload(Request $request)

{

if($request->hasFile('upload')) {

//get filename with extension

$filenamewithextension = $request->file('upload')->getClientOriginalName();

//get filename without extension

$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);

//get file extension

$extension = $request->file('upload')->getClientOriginalExtension();

//filename to store

$filenametostore = $filename.'_'.time().'.'.$extension;

//Upload File

$request->file('upload')->storeAs('public/uploads', $filenametostore);

$CKEditorFuncNum = $request->input('CKEditorFuncNum');

$url = asset('storage/uploads/'.$filenametostore);

$msg = 'Image successfully uploaded';

$re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";

// Render HTML output

@header('Content-type: text/html; charset=utf-8');

echo $re;

}

Laravel 9 Import Export Excel & CSV File

In this Laravel 9 Import Export Excel & CSV File tutorial, I’ll show you how to import and export excel/csv file into and from database in laravel 9 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.

Laravel 9 Import Export Excel & CSV File

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.

Import and Export CSV and Excel File in Laravel 9

In this step by step Laravel 9 Import Export Excel & CSV File example I’ll demonstrate the import and export of csv file in laravel 9. Please follow the steps given below:

Install Laravel 9
Database Configuration
Install maatwebsite/excel Package
Configure maatwebsite/excel
Create Routes
Compose Import Export Class
Create ExcelCSV Controller By Artisan Command
Create Import Export Form
Run Development Server

Install Laravel 9

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

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

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara9blog

DB_USERNAME=root

DB_PASSWORD=

Install maatwebsite/excel Package

In this step we will install maatwebsite/excel Package. Use the following compose command to install maatwebsite/excel 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 --provider="Maatwebsite\Excel\ExcelServiceProvider"

1	php artisan vendor:publish --provider="Maatwebsite\Excel\ExcelServiceProvider"

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

use App\Http\Controllers\ExcelCSVController;
 
Route::get('excel-csv-file', [ExcelCSVController::class, 'index']);
Route::post('import-excel-csv-file', [ExcelCSVController::class, 'importExcelCSV']);
Route::get('export-excel-csv-file/{slug}', [ExcelCSVController::class, 'exportExcelCSV']);

use App\Http\Controllers\ExcelCSVController;

Route::get('excel-csv-file', [ExcelCSVController::class, 'index']);

Route::post('import-excel-csv-file', [ExcelCSVController::class, 'importExcelCSV']);

Route::get('export-excel-csv-file/{slug}', [ExcelCSVController::class, 'exportExcelCSV']);

Compose Import Export Class

Now, we need to create import and export excel csv class using the following commands:

Import class:-

php artisan make:import UsersImport --model=User

1	php artisan make:import UsersImport --model=User

Now, we have to update the UsersImport.php class file located at app/Imports directory. Let’s open UsersImport.php file and put the following code in it:

<?php
    
namespace App\Imports;
    
use App\Models\User;
use Maatwebsite\Excel\Concerns\ToModel;
use Maatwebsite\Excel\Concerns\WithHeadingRow;
     
class UsersImport implements ToModel, WithHeadingRow
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row)
    {
        return new User([
            'name'     => $row['name'],
            'email'    => $row['email'], 
            'password' => \Hash::make($row['password']),
        ]);
    }
}

<?php

namespace App\Imports;

use App\Models\User;

use Maatwebsite\Excel\Concerns\ToModel;

use Maatwebsite\Excel\Concerns\WithHeadingRow;

class UsersImport implements ToModel, WithHeadingRow

{

/**

* @param array $row

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

public function model(array $row)

{

return new User([

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

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

'password' => \Hash::make($row['password']),

]);

}

export class:-

php artisan make:export UsersExport --model=User

1	php artisan make:export UsersExport --model=User

Now, we have to update UsersExport.php class file located at app/Exports directory. Let’s open UsersExport.php file and put the following code in it:

<?php
   
namespace App\Exports;
   
use App\Models\User;
 
use Maatwebsite\Excel\Concerns\FromCollection;
   
class UsersExport implements FromCollection
{
    /**
    * @return \Illuminate\Support\Collection
    */
    public function collection()
    {
        return User::all();
    }
}

<?php

namespace App\Exports;

use App\Models\User;

use Maatwebsite\Excel\Concerns\FromCollection;

class UsersExport implements FromCollection

{

/**

* @return \Illuminate\Support\Collection

public function collection()

{

return User::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 ExcelCSVController using command given below –

php artisan make:controller ExcelCSVController

1	php artisan make:controller ExcelCSVController

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

app/Http/Controllers/ExcelCSVController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Exports\UsersExport;
 
use App\Imports\UsersImport;
 
use Maatwebsite\Excel\Facades\Excel;
 
use App\Models\User;
 
class ExcelCSVController extends Controller
{
    /**
    * @return \Illuminate\Support\Collection
    */
    public function index()
    {
       return view('excel-csv-import');
    }
    
    /**
    * @return \Illuminate\Support\Collection
    */
    public function importExcelCSV(Request $request) 
    {
        $validatedData = $request->validate([
 
           'file' => 'required',
 
        ]);
 
        Excel::import(new UsersImport,$request->file('file'));
 
            
        return redirect('excel-csv-file')->with('status', 'The file has been excel/csv imported to database in laravel 8');
    }
 
    /**
    * @return \Illuminate\Support\Collection
    */
    public function exportExcelCSV($slug) 
    {
        return Excel::download(new UsersExport, 'users.'.$slug);
    }
    
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Exports\UsersExport;

use App\Imports\UsersImport;

use Maatwebsite\Excel\Facades\Excel;

use App\Models\User;

class ExcelCSVController extends Controller

{

/**

* @return \Illuminate\Support\Collection

public function index()

{

return view('excel-csv-import');

}

/**

* @return \Illuminate\Support\Collection

public function importExcelCSV(Request $request)

{

$validatedData = $request->validate([

'file' => 'required',

]);

Excel::import(new UsersImport,$request->file('file'));

return redirect('excel-csv-file')->with('status', 'The file has been excel/csv imported to database in laravel 8');

}

/**

* @return \Illuminate\Support\Collection

public function exportExcelCSV($slug)

{

return Excel::download(new UsersExport, 'users.'.$slug);

}

Create Blade / View Files

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

resources/views/excel-csv-import.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 Import Export Excel and CSV File To Database Example Tutorial</title>
 
  <meta name="csrf-token" content="{{ csrf_token() }}">
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
</head>
<body>
 
<div class="container mt-5">
 
   
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif
 
  <div class="card">
 
    <div class="card-header font-weight-bold">
      <h2 class="float-left">Import Export Excel, CSV File In Laravel 8</h2>
      <h2 class="float-right"><a href="{{url('export-excel-csv-file/xlsx')}}" class="btn btn-success mr-1">Export Excel</a><a href="{{url('export-excel-csv-file/csv')}}" class="btn btn-success">Export CSV</a></h2>
    </div>
 
    <div class="card-body">
 
        <form id="excel-csv-import-form" method="POST"  action="{{ url('import-excel-csv-file') }}" accept-charset="utf-8" enctype="multipart/form-data">
 
          @csrf
                   
            <div class="row">
 
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="file" name="file" placeholder="Choose file">
                    </div>
                    @error('file')
                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                    @enderror
                </div>              
  
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
                </div>
            </div>     
        </form>
 
    </div>
 
  </div>
 
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Import Export Excel and CSV File To Database Example Tutorial</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<h2 class="float-left">Import Export Excel, CSV File In Laravel 8</h2>

<h2 class="float-right"><a href="{{url('export-excel-csv-file/xlsx')}}" class="btn btn-success mr-1">Export Excel</a><a href="{{url('export-excel-csv-file/csv')}}" class="btn btn-success">Export CSV</a></h2>

</div>

@csrf

</div>

@error('file')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

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

</div>

</form>

</div>

</body>

</html>

Run Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/excel-csv-file

1	http://localhost:8000/excel-csv-file

Laravel 9 Image Crop & Upload using jQuery and Ajax Example

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

Laravel 9 Image Crop & Upload using jQuery and Ajax Example

In this step by step tutorial I will demonstrate you how to upload and crop image using jQuery in laravel 9. Please follow the instruction given below:

Install Laravel 9
Connecting App to Database
Create Crop Image Migration & Model
Add Routes For Crop Image Upload
Create Crop Image Controller Using Command
Create Crop Image Upload Blade View
Make Upload Folder
Run Development Server
Test This App

Install Laravel 8 App

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

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

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

Connecting App to Database

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Create Crop Image Migration & Model

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

php artisan make:model Image -m

1	php artisan make:model Image -m

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

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateGalleriesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->increments('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

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

php artisan migrate

1	php artisan migrate

Add Routes For Crop Image Upload

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

routes/web.php

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

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

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

Create Crop Image Controller Using Command

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

php artisan make:controller CropImageUploadController

1	php artisan make:controller CropImageUploadController

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

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Image;

class CropImageUploadController extends Controller

{

public function index()

{

return view('image-crop');

}

public function store(Request $request)

{

$folderPath = public_path('upload/');

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

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

$image_type = $image_type_aux[1];

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

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

$imageFullPath = $folderPath.$imageName;

file_put_contents($imageFullPath, $image_base64);

$saveFile = new Image;

$saveFile->title = $imageName;

$saveFile->save();

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

}

Create Crop Image Upload Blade View

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

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

<html>

<head>

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

</head>

<body>

Crop Image Using jQuery Croppie with Ajax in Laravel

</div>

</div>

</body>

</html>

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

</div>

</div>

<br />

<br/>

</div>

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

</div>

$(document).ready(function(){

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

enableExif: true,

viewport: {

width:200,

height:200,

type:'square' //circle

boundary:{

width:300,

height:300

}

});

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

var reader = new FileReader();

reader.onload = function (event) {

$image_crop.croppie('bind', {

url: event.target.result

}).then(function(){

console.log('jQuery bind complete');

});

}

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

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

});

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

$image_crop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function(response){

$.ajax({

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

type:'POST',

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

success:function(data){

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

alert('Crop image has been uploaded');

}

})

});

</script>

Make Upload Folder

Now, create one folder name upload inside public directory.

Run Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/image-crop

1	http://localhost:8000/image-crop

Laravel 9 Stripe Payment Gateway Integration Example

In this Laravel 9 stripe payment gateway integration example tutorial, I’ll show you how to integrate stripe payment gateway in laravel 9. In this tutorial you will learn to integrate stripe in laravel 9. In this step by step tutorial I’ll share laravel 9 stripe integration example.

Stripe Payment Gateway

Stripe is one of the most popular payment gateway, that allows us to accept payment worldwide. Stripe is very simple, hassle free and easy to integrate payment gateway. Integrating stripe payment gateway with laravel is a breeze. After integrating stripe in laravel you will be able to collect payment via simple payment form which allow customer to provide card information like card number, expiry date and a CVC code.

Laravel 9 Stripe Payment Gateway Integration Example

In this tutorial, you will learn to integrate stripe payment gateway in your laravel 9. Follow this step by step tutorial to learn stripe payment gateway integration in laravel 9.

Install Laravel 9
Install stripe Package
Stripe Configuration
Make Route
Create Controller
Create Blade View file
Run Development Server

Install Laravel 9

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

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

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara9blog

DB_USERNAME=root

DB_PASSWORD=

Install Stripe package

Now, we need to install stripe-php package in our project. Open your terminal and switch to project directory and use the following composer command to install stripe-php package.

composer require stripe/stripe-php

1	composer require stripe/stripe-php

Stripe Configuration

Create Stripe account and generate key and secret key. Go to the official Stripe website and signup with basic details. Now, we need to set stripe key and secret key in our project’s .env file. In stripe dashboard switch to the test mode and get the stripe key and secret. Now, open .env file located in project’s root folder and set the stripe key and secret as following –

.env file

STRIPE_KEY=test_publishable_key
STRIPE_SECRET=test_secret_key

1 2	STRIPE_KEY=test_publishable_key STRIPE_SECRET=test_secret_key

You will also need to set up the Stripe API key, Let’s open or create the config/services.php file, and add or update the 'stripe' array as following:

'stripe' => [
     'secret' => env('STRIPE_SECRET'),
 ],

'stripe' => [

'secret' => env('STRIPE_SECRET'),

Create Route

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

routes/web.php

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

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\StripeController;

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

| Web Routes

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

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

| routes are loaded by the RouteServiceProvider within a group which

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

Route::get('stripe', [StripeController::class, 'stripe']);

Route::post('stripe', [StripeController::class, 'stripePost'])->name('stripe.post');

Create Controller and Methods

Now, lets create a payment controller using following command

php artisan make:controller StripeController

1	php artisan make:controller StripeController

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

Controllers/StripeController.php

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Session;
use Stripe;
    
class StripeController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function stripe()
    {
        return view('stripe');
    }
   
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function stripePost(Request $request)
    {
        Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
        Stripe\Charge::create ([
                "amount" => 100 * 100,
                "currency" => "usd",
                "source" => $request->stripeToken,
                "description" => "Test payment from tutsmake.com."
        ]);
   
        Session::flash('success', 'Payment successful!');
           
        return back();
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Session;

use Stripe;

class StripeController extends Controller

{

/**

* success response method.

* @return \Illuminate\Http\Response

public function stripe()

{

return view('stripe');

}

/**

* success response method.

* @return \Illuminate\Http\Response

public function stripePost(Request $request)

{

Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

Stripe\Charge::create ([

"amount" => 100 * 100,

"currency" => "usd",

"source" => $request->stripeToken,

"description" => "Test payment from tutsmake.com."

]);

Session::flash('success', 'Payment successful!');

return back();

}

Create View/Blade File

In this step, we will create view/blade file to accept stripe payment. Lets create a “stripe.blade.php” file in “resources/views/” directory and put the following code in it.

resources/views/stripe.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Stripe Payment Gateway Integration Tutorial Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.panel-title {
display: inline;
font-weight: bold;
}
.display-table {
display: table;
}
.display-tr {
display: table-row;
}
.display-td {
display: table-cell;
vertical-align: middle;
width: 61%;
}
</style>
</head>
<body>
<div class="container">
<h1>Laravel 9 Stripe Payment Gateway Integration Example</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default credit-card-box">
<div class="panel-heading display-table" >
<div class="row display-tr" >
<h3 class="panel-title display-td" >Payment Details</h3>
<div class="display-td" >                            
<img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
</div>
</div>                    
</div>
<div class="panel-body">
@if (Session::has('success'))
<div class="alert alert-success text-center">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>{{ Session::get('success') }}</p>
</div>
@endif
<form
role="form"
action="{{ route('stripe.post') }}"
method="post"
class="require-validation"
data-cc-on-file="false"
data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
id="payment-form">
@csrf
<div class='form-row row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label> <input
class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label> <input
autocomplete='off' class='form-control card-number' size='20'
type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 col-md-4 form-group cvc required'>
<label class='control-label'>CVC</label> <input autocomplete='off'
class='form-control card-cvc' placeholder='ex. 311' size='4'
type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Month</label> <input
class='form-control card-expiry-month' placeholder='MM' size='2'
type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Year</label> <input
class='form-control card-expiry-year' placeholder='YYYY' size='4'
type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>Please correct the errors and try
again.</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now ($100)</button>
</div>
</div>
</form>
</div>
</div>        
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
$(function() {
var $form         = $(".require-validation");
$('form.require-validation').bind('submit', function(e) {
var $form         = $(".require-validation"),
inputSelector = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'].join(', '),
$inputs       = $form.find('.required').find(inputSelector),
$errorMessage = $form.find('div.error'),
valid         = true;
$errorMessage.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorMessage.removeClass('hide');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
e.preventDefault();
Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
}
});
function stripeResponseHandler(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
/* token contains id, last4, and card type */
var token = response['id'];
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
$form.get(0).submit();
}
}
});
</script>
</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

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Stripe Payment Gateway Integration Tutorial Example</title>

.panel-title {

display: inline;

font-weight: bold;

}

.display-table {

display: table;

}

.display-tr {

display: table-row;

}

.display-td {

display: table-cell;

vertical-align: middle;

width: 61%;

}

</style>

</head>

<body>

<h1>Laravel 9 Stripe Payment Gateway Integration Example</h1>

<h3 class="panel-title display-td" >Payment Details</h3>

</div>

@if (Session::has('success'))

<p>{{ Session::get('success') }}</p>

</div>

@endif

<form

role="form"

action="{{ route('stripe.post') }}"

method="post"

class="require-validation"

data-cc-on-file="false"

data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"

id="payment-form">

@csrf

<label class='control-label'>Name on Card</label> <input

class='form-control' size='4' type='text'>

</div>

<label class='control-label'>Card Number</label> <input

autocomplete='off' class='form-control card-number' size='20'

type='text'>

</div>

<label class='control-label'>CVC</label> <input autocomplete='off'

class='form-control card-cvc' placeholder='ex. 311' size='4'

type='text'>

</div>

<label class='control-label'>Expiration Month</label> <input

class='form-control card-expiry-month' placeholder='MM' size='2'

type='text'>

</div>

<label class='control-label'>Expiration Year</label> <input

class='form-control card-expiry-year' placeholder='YYYY' size='4'

type='text'>

</div>

<div class='alert-danger alert'>Please correct the errors and try

again.</div>

</div>

</div>

</form>

</div>

</body>

$(function() {

var $form = $(".require-validation");

$('form.require-validation').bind('submit', function(e) {

var $form = $(".require-validation"),

inputSelector = ['input[type=email]', 'input[type=password]',

'input[type=text]', 'input[type=file]',

'textarea'].join(', '),

$inputs = $form.find('.required').find(inputSelector),

$errorMessage = $form.find('div.error'),

valid = true;

$errorMessage.addClass('hide');

$('.has-error').removeClass('has-error');

$inputs.each(function(i, el) {

var $input = $(el);

if ($input.val() === '') {

$input.parent().addClass('has-error');

$errorMessage.removeClass('hide');

e.preventDefault();

}

});

if (!$form.data('cc-on-file')) {

e.preventDefault();

Stripe.setPublishableKey($form.data('stripe-publishable-key'));

Stripe.createToken({

number: $('.card-number').val(),

cvc: $('.card-cvc').val(),

exp_month: $('.card-expiry-month').val(),

exp_year: $('.card-expiry-year').val()

}, stripeResponseHandler);

}

});

function stripeResponseHandler(status, response) {

if (response.error) {

$('.error')

.removeClass('hide')

.find('.alert')

.text(response.error.message);

} else {

/* token contains id, last4, and card type */

var token = response['id'];

$form.find('input[type=text]').empty();

$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");

$form.get(0).submit();

}

});

</script>

</html>

Start Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/stripe

1	http://localhost:8000/stripe

Laravel 9 Instamojo Payment Gateway Integration Example

In this Laravel 9 Instamojo Payment Gateway Integration Example tutorial I will show you How to Integrate Instamojo Payment Gateway in Laravel 9. In this tutorial, we will learn how to integrate the instamojo payment gateway in php laravel 9 application via the instamojo PHP package.

Instamojo Payment Gateway

Instamojo is one of the popular payment gateway, that allows us to accept payment from your customer. Instamojo is very simple, hassle free and easy to integrate payment gateway. Instamojo processes refund payments, collect a payment, create payment are very easy and simple.

Laravel 9 Instamojo Payment Gateway Integration Example

In this step by step tutorial I will demonstrate you to integrate instamojo payment gateway in the laravel 9 application without using curl APIs. We will simply install instamojo PHP package and integrate into our lastest laravel based application.

Install Laravel 9
Connecting App to Database
Install Instamojo PHP package
Configure Instamojo Package
Make Model and Migration
Create Controller
Make Routes
Create Blade View file
Start Development Server

Install Laravel 9

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

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

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

Connecting App to Database

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Install Instamojo PHP package

In this step, we will install Instamojo PHP package via the composer dependency manager. Use the following command to install Instamojo PHP package.

composer require instamojo/instamojo-php

1	composer require instamojo/instamojo-php

Configure Instamojo Package

Now, we will put following configuration detail in .env file:

IM_API_KEY=test_d883b3a8d2bc1adc7a535506713
 IM_AUTH_TOKEN=test_dc229039d2232a260a2df3f7502
 IM_URL=https://test.instamojo.com/api/1.1/

IM_API_KEY=test_d883b3a8d2bc1adc7a535506713

IM_AUTH_TOKEN=test_dc229039d2232a260a2df3f7502

IM_URL=https://test.instamojo.com/api/1.1/

Next, Go to the app/config/services.php and put the below code here.

'instamojo' => [

    'api_key'       => env('IM_API_KEY'),

    'auth_token'    => env('IM_AUTH_TOKEN'),

    'url'           => env('IM_URL'),

],

'instamojo' => [

'api_key' => env('IM_API_KEY'),

'auth_token' => env('IM_AUTH_TOKEN'),

'url' => env('IM_URL'),

Make Model & Migration

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

php artisan make:model Payment -m

1	php artisan make:model Payment -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open migration file and update the function up() method as following:

public function up()
 {
 Schema::create('payments', function (Blueprint $table) {
 $table->increments('id');
 $table->string('i_payment_id');
 $table->string('user_id');
 $table->string('amount');
 $table->timestamps();
 });
 }

public function up()

{

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

$table->increments('id');

$table->string('i_payment_id');

$table->string('user_id');

$table->string('amount');

$table->timestamps();

});

}

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

php artisan migrate

1	php artisan migrate

Create Controller

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

php artisan make:controller PayController

1	php artisan make:controller PayController

Go to app/Http/Controller/PayController.php and put the below code :

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class PayController extends Controller
{
   
   public function index()
   {
        return view('event');
   }
   public function pay(Request $request){
 
     $api = new \Instamojo\Instamojo(
            config('services.instamojo.api_key'),
            config('services.instamojo.auth_token'),
            config('services.instamojo.url')
        );
 
    try {
        $response = $api->paymentRequestCreate(array(
            "purpose" => "FIFA 16",
            "amount" => $request->amount,
            "buyer_name" => "$request->name",
            "send_email" => true,
            "email" => "$request->email",
            "phone" => "$request->mobile_number",
            "redirect_url" => "http://127.0.0.1:8000/pay-success"
            ));
             
            header('Location: ' . $response['longurl']);
            exit();
    }catch (Exception $e) {
        print('Error: ' . $e->getMessage());
    }
 }
 
 public function success(Request $request){
     try {
 
        $api = new \Instamojo\Instamojo(
            config('services.instamojo.api_key'),
            config('services.instamojo.auth_token'),
            config('services.instamojo.url')
        );
 
        $response = $api->paymentRequestStatus(request('payment_request_id'));
 
        if( !isset($response['payments'][0]['status']) ) {
           dd('payment failed');
        } else if($response['payments'][0]['status'] != 'Credit') {
             dd('payment failed');
        } 
      }catch (\Exception $e) {
         dd('payment failed');
     }
    dd($response);
  }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PayController extends Controller

{

public function index()

{

return view('event');

}

public function pay(Request $request){

$api = new \Instamojo\Instamojo(

config('services.instamojo.api_key'),

config('services.instamojo.auth_token'),

config('services.instamojo.url')

);

try {

$response = $api->paymentRequestCreate(array(

"purpose" => "FIFA 16",

"amount" => $request->amount,

"buyer_name" => "$request->name",

"send_email" => true,

"email" => "$request->email",

"phone" => "$request->mobile_number",

"redirect_url" => "http://127.0.0.1:8000/pay-success"

));

header('Location: ' . $response['longurl']);

exit();

}catch (Exception $e) {

print('Error: ' . $e->getMessage());

}

public function success(Request $request){

try {

$api = new \Instamojo\Instamojo(

config('services.instamojo.api_key'),

config('services.instamojo.auth_token'),

config('services.instamojo.url')

);

$response = $api->paymentRequestStatus(request('payment_request_id'));

if( !isset($response['payments'][0]['status']) ) {

dd('payment failed');

} else if($response['payments'][0]['status'] != 'Credit') {

dd('payment failed');

}

}catch (\Exception $e) {

dd('payment failed');

}

dd($response);

}

Make Routes

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

routes/web.php

use App\Http\Controllers\PayController;
 
 
Route::get('event', [PayController::class, 'index']);
Route::post('pay', [PayController::class, 'pay']);
Route::get('pay-success', [PayController::class, 'success']);

use App\Http\Controllers\PayController;

Route::get('event', [PayController::class, 'index']);

Route::post('pay', [PayController::class, 'pay']);

Route::get('pay-success', [PayController::class, 'success']);

Create Blade View file

In this step we will create blade file. Go to resources/views directory and create blade view file name event.blade.php. Then put the following code into event.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>Instamojo Payment Gateway Integrate</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<style>
.mt40{
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 mt40">
<div class="card-header" style="background: #0275D8;">
<h2>Register for Event</h2>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Opps!</strong> Something went wrong<br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ url('pay') }}" method="POST" name="laravel_instamojo">
{{ csrf_field() }}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<strong>Name</strong>
<input type="text" name="name" class="form-control" placeholder="Enter Name" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<strong>Mobile Number</strong>
<input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<strong>Email Id</strong>
<input type="text" name="email" class="form-control" placeholder="Enter Email id" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<strong>Event Fees</strong>
<input type="text" name="amount" class="form-control" placeholder="" value="100" readonly="">
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Instamojo Payment Gateway Integrate</title>

<style>

.mt40{

margin-top: 40px;

}

</style>

</head>

<body>

<h2>Register for Event</h2>

</div>

@if ($errors->any())

<strong>Opps!</strong> Something went wrong<br>

<ul>

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

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

@endforeach

</ul>

</div>

@endif

</div>

<strong>Mobile Number</strong>

</div>

<strong>Email Id</strong>

</div>

<strong>Event Fees</strong>

</div>

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

</div>

</form>

</div>

</body>

</html>

Start Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/event

1	http://localhost:8000/event

Laravel 9 Restrict User Access From IP Address

In this Laravel 9 Restrict User Access From IP Address tutorial, I’ll show you how to restrict an IP address from accessing the website using middleware in laravel 9. In this tutorial you will learn to restrict user to access website using IP Address in laravel 9. You will also learn to create custom middleware. With this you will be able to restrict user with specified IP address from accessing the website, In this example we will be creating a middleware to restrict user with IP Address in laravel 9.

Laravel 9 Restrict User Access From IP Address

In this step by step tutorial I will demonstrate you how to restrict from accessing website with IP address. Please follow instruction given below:

Install Laravel 9
Connecting App to Database
Create a Middleware
Register the Middleware

Install Laravel 9

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

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

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

Connecting App to Database

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Create a Middleware

Next step, Run the following artisan command to create a middleware named class BlockIpMiddleware:

php artisan make:middleware BlockIpMiddleware

1	php artisan make:middleware BlockIpMiddleware

Now, Go to app/Http/Middleware folder and open BlockIpMiddleware.php file. Then put the following code in BlockIpMiddleware.php file:

<?php
namespace App\Http\Middleware;
use Closure;
class BlockIpMiddleware
{
    // set IP addresses
    public $blockIps = ['ip-addr-1', 'ip-addr-2', '127.0.0.1'];
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (in_array($request->ip(), $this->blockIps)) {
            return response()->json(['message' => "You don't have permission to access this website."]);
        }
        return $next($request);
    }
}

<?php

namespace App\Http\Middleware;

use Closure;

class BlockIpMiddleware

{

// set IP addresses

public $blockIps = ['ip-addr-1', 'ip-addr-2', '127.0.0.1'];

/**

* Handle an incoming request.

* @param \Illuminate\Http\Request $request

* @param \Closure $next

* @return mixed

public function handle($request, Closure $next)

{

if (in_array($request->ip(), $this->blockIps)) {

return response()->json(['message' => "You don't have permission to access this website."]);

}

return $next($request);

}

Register the Middleware

Now, we need to register the middleware, so go to app/Http/ and open Kernel.php file. And register middleware as follow:

protected $middlewareGroups = [
    'web' => [
        //--------------
        \App\Http\Middleware\BlockIpMiddleware::class,
    ],
    'api' => [
        //--------------
    ],
];

protected $middlewareGroups = [

'web' => [

//--------------

\App\Http\Middleware\BlockIpMiddleware::class,

'api' => [

//--------------

];

Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax

In this Laravel 9 Dynamic Dependent Dropdown Using jQuery Ajax tutorial I’ll show you how to implement dependent categories and subcategories dropdown in laravel 9 using jQuery ajax. In this tutorial you will learn to create categories and subcategories dropdown using jquery ajax in laravel 9. In this article I will share example to create Dynamic Dependent Dropdown Using jQuery Ajax In Laravel 9. We will be creating an example of categories and subcategories dropdown using jquery ajax in laravel 9.

In this step by step tutorial I will demonstrate you creating a Dynamic Dependent Dropdown using jquery ajax in laravel 9. Please follow the instruction given below:

Install Laravel 9
Connecting App to Database
Create Model and Migration
Add Routes
Create Controllers By Artisan
Create Blade Views
Run Development Server
Test This App

Install Laravel 8 App

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

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

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

Connecting App to Database

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

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

php artisan make:model Category -m

1	php artisan make:model Category -m

Now go to database/migrations/ and open create_categorys_table.php file. Then put the following code into this file:

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->unsignedInteger('parent_id')->nullable();
        $table->timestamps();
    });
}

public function up()

{

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

$table->id();

$table->string('name');

$table->unsignedInteger('parent_id')->nullable();

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Now, open Category.php model file and put the following code into it:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Category extends Model
{
    use HasFactory;
 
    public function subcategories(){
        return $this->hasMany('App\Category', 'parent_id');
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Category extends Model

{

use HasFactory;

public function subcategories(){

return $this->hasMany('App\Category', 'parent_id');

}

Add Routes

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

routes/web.php

use App\Http\Controllers\CategoryController;

Route::get('cat', [CategoryController::class, 'index']);
Route::post('subcat', [CategoryController::class, 'subCat']);

use App\Http\Controllers\CategoryController;

Route::get('cat', [CategoryController::class, 'index']);

Route::post('subcat', [CategoryController::class, 'subCat']);

Create Controllers by Artisan

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

php artisan make:controller CategoryController

1	php artisan make:controller CategoryController

Go to app/http/controller and open CategoryController.php.Then put the following code into your controller file:

<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class CategoryController extends Controller
{
    public function index(Request $request)
    {
          
      $categoris = Category::where('parent_id',0)->get();
     
      return view('category',["categoris" => $categoris]);
    }    
    public function subCat(Request $request)
    {
         
        $parent_id = $request->cat_id;
         
        $subcategories = Category::where('id',$parent_id)
                              ->with('subcategories')
                              ->get();
        return response()->json([
            'subcategories' => $subcategories
        ]);
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Category;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

class CategoryController extends Controller

{

public function index(Request $request)

{

$categoris = Category::where('parent_id',0)->get();

return view('category',["categoris" => $categoris]);

}

public function subCat(Request $request)

{

$parent_id = $request->cat_id;

$subcategories = Category::where('id',$parent_id)

->with('subcategories')

->get();

return response()->json([

'subcategories' => $subcategories

]);

}

Create Blade Views

In this step we will create ablade view file. Go to resources/views folder and create the blade view as following.

category.blade.php

<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 jquery ajax categories and subcategories, select dropdown</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container" style="margin-top: 50px; margin-left: 300px">
<div class="row">
<div class="col-lg-6">
<form action="">
<h4>Category</h4>
<select class="browser-default custom-select" name="category" id="category">
<option selected>Select category</option>
@foreach ($categoris as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
<h4>Subcategory</h4>
<select class="browser-default custom-select" name="subcategory" id="subcategory">
</select>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function () {
$('#category').on('change',function(e) {
var cat_id = e.target.value;
$.ajax({
url:"{{ route('subcat') }}",
type:"POST",
data: {
cat_id: cat_id
},
success:function (data) {
$('#subcategory').empty();
$.each(data.subcategories[0].subcategories,function(index,subcategory){
$('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');
})
}
})
});
});
</script>
</body>
</html>

<html lang="{{ app()->getLocale() }}">

<head>

<title>Laravel 9 jquery ajax categories and subcategories, select dropdown</title>

</head>

<body>

<h4>Category</h4>

<option selected>Select category</option>

@foreach ($categoris as $item)

@endforeach

</select>

<h4>Subcategory</h4>

</select>

</form>

</div>

$.ajaxSetup({

headers: {

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

}

});

$(document).ready(function () {

$('#category').on('change',function(e) {

var cat_id = e.target.value;

$.ajax({

url:"{{ route('subcat') }}",

type:"POST",

data: {

cat_id: cat_id

success:function (data) {

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

$.each(data.subcategories[0].subcategories,function(index,subcategory){

$('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');

})

}

})

});

</script>

</body>

</html>

Run Development Server

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/cat

1	http://localhost:8000/cat