Category Archives: Laravel

Laravel Tutorials

Laravel Clear Cache Using Artisan Command

Larave Clear Cache Using Artisan Command

In this laravel clear cache tutorial, I’ll show you various artisan commands to clear laravel cache of different types. You will also learn to clear cache on share hosting.

In Laravel, while developing a laravel application it is very often that changes we made are not reflecting. This is usually happens because of the laravel cache. Laravel provides various caching systems for developing fast loading laravel applications.

In this laravel clear cache example, we will learn to clear cache from command line (CLI), we will see how to clear cache from blade (views), routes,config etc using the command line and artisan command.

Useful Laravel Clear Cache commands

Here, we will discuss about various artisans commands used to clear different laravel cache in laravel applications.

Laravel Clear App Cache

To clear laravel application cache use the php artisan cache:clear artisan command as given below :

php artisan cache:clear

1	php artisan cache:clear

Laravel Clear route cache

To clear route cache in laravel use the php artisan route:clear artisan command as given below :

php artisan route:clear

1	php artisan route:clear

Laravel Clear config cache

To clear config cache in laravel use the php artisan config:cache artisan command as given below :

php artisan config:cache

1	php artisan config:cache

Laravel Clear View Cache

To clear compiled view files cache in laravel use the php artisan view:clear artisan command as given below :

php artisan view:clear

1	php artisan view:clear

Laravel Reoptimized Class

Use the following laravel command to Reoptimized Class In laravel :

php artisan optimize

1	php artisan optimize

Laravel Clear Cache On Shared Host

Most of the times in shared hosting servers we don’t have SSH access to the server. In that case, to clear laravel cache we have define routes in our application’s routes/web.php file that invoke the various laravel clear cache commands. This way we can clear Laravel cache by accessing specific routes in the browser.

Laravel Clear Route Cache from Browser

 Route::get('/route-cache', function() {
     $exitCode = Artisan::call('route:cache');
     return 'Routes cache cleared';
 });

Route::get('/route-cache', function() {

$exitCode = Artisan::call('route:cache');

return 'Routes cache cleared';

});

Laravel Clear Config Cache from Browser

 Route::get('/config-cache', function() {
     $exitCode = Artisan::call('config:cache');
     return 'Config cache cleared';
 });

Route::get('/config-cache', function() {

$exitCode = Artisan::call('config:cache');

return 'Config cache cleared';

});

Laravel Clear Application Cache from Browser

 Route::get('/clear-cache', function() {
     $exitCode = Artisan::call('cache:clear');
     return 'Application cache cleared';
 });

Route::get('/clear-cache', function() {

$exitCode = Artisan::call('cache:clear');

return 'Application cache cleared';

});

Laravel Clear View Cache from Browser

 Route::get('/view-clear', function() {
     $exitCode = Artisan::call('view:clear');
     return 'View cache cleared';
 });

Route::get('/view-clear', function() {

$exitCode = Artisan::call('view:clear');

return 'View cache cleared';

});

Laravel Simple Qr Code Generator Example

Leave a reply

Laravel Simple Qr Code Generator Example

In this article, I’ll show you how to generate qr codes with any text, size, color, background color, format like png, eps, svg. In this laravel 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. 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.

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

Install Laravel 5.8

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

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

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

Install 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
 ],

'providers' => [

….

SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class

'aliases' => [

….

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

Basic Usage Of simple-qrcode Package

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 5.8 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 5.8 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('http://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 5.8 Generate QR Code Tutorial with Example - W3Adda</title>

</head>

<body>

<h2>Laravel 5.8 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('http://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

Output:-

laravel-5-8-generate-qr-code-tutorial-1

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

Output:-

laravel-5-8-generate-simple-qr-code

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

Output:-

laravel-5-8-generate-color-qr-code

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

Output:-

laravel-5-8-generate-qr-code-with-image

Laravel Custom Datatables filter and Search

Leave a reply

Laravel Custom Datatables filter and Search

In this tutorial, I’ll show you how to add custom search or data filter to datatables. In this tutorial, we will be using yajra datatable package for listing of records with pagination, sorting and filter (search) feature. Laravel Yajra datatables package comes with many built-in features for searching and sorting functionality. In this article you will learn to add custom field for searching data without reloading or refreshing of page.

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

Install Laravel 5.8

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

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

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

Configure Database In .env file

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

.env

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

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

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Set Default String Length

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

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

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

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

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

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

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

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

Create Database Table

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

php artisan make:migration create_posts_table --create=posts

1	php artisan make:migration create_posts_table --create=posts

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

<?php

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

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

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->string('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Run Migration

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 along with migrations, password_resets and users table.

Create Model

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

php artisan make:model Post

1	php artisan make:model Post

Once, the above command is executed it will create a model file Post.php in app directory. Next, we have to assign fillable fields using fillable property inside Post.php file. Open app/Post.php file and put the following code in it –

app/Post.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
    protected $fillable = [
        'title', 'body'
    ];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = [

'title', 'body'

];

}

Install Yajra Datatable Package

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

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

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

config/app.php

'providers' => [
      // Other service providers…
  Yajra\DataTables\DataTablesServiceProvider::class,
 ],

'aliases' => [
 // Other aliases…
 'Datatables' => Yajra\Datatables\Facades\Datatables::class,
 ],

'providers' => [

// Other service providers…

Yajra\DataTables\DataTablesServiceProvider::class,

'aliases' => [

// Other aliases…

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

Create Controller

Next, we have to create a controller to handle Ajax CRUD Operations. Create a controller named AjaxCrudController using command given below –

php artisan make:controller dtable/AjaxCrudController

1	php artisan make:controller dtable/AjaxCrudController

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

app/Http/Controllers/dtable/AjaxCrudController.php

<?php

namespace App\Http\Controllers\dtable;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Post;
use Redirect,Response;

class AjaxCrudController extends Controller
{

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
         return view('dtable.custom_filter');
    }

    public function get_custom_posts(){
        $postsQuery = Post::query();

        $start_date = (!empty($_GET["start_date"])) ? ($_GET["start_date"]) : ('');
        $end_date = (!empty($_GET["end_date"])) ? ($_GET["end_date"]) : ('');

        if($start_date && $end_date){
    
         $start_date = date('Y-m-d', strtotime($start_date));
         $end_date = date('Y-m-d', strtotime($end_date));
         
         $postsQuery->whereRaw("date(posts.created_at) >= '" . $start_date . "' AND date(posts.created_at) <= '" . $end_date . "'");
        }
        $posts = $postsQuery->select('*');
        return datatables()->of($posts)
            ->make(true);
    }

}

<?php

namespace App\Http\Controllers\dtable;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Post;

use Redirect,Response;

class AjaxCrudController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

return view('dtable.custom_filter');

}

public function get_custom_posts(){

$postsQuery = Post::query();

$start_date = (!empty($_GET["start_date"])) ? ($_GET["start_date"]) : ('');

$end_date = (!empty($_GET["end_date"])) ? ($_GET["end_date"]) : ('');

if($start_date && $end_date){

$start_date = date('Y-m-d', strtotime($start_date));

$end_date = date('Y-m-d', strtotime($end_date));

$postsQuery->whereRaw("date(posts.created_at) >= '" . $start_date . "' AND date(posts.created_at) <= '" . $end_date . "'");

}

$posts = $postsQuery->select('*');

return datatables()->of($posts)

->make(true);

}

Create Blade / View Files

In this step, we will create view/blade file to perform CRUD Operations. Lets create a blade file “custom_filter.blade.php” in “resources/views/dtable/” directory and put the following code in it respectively.

resources/views/dtable/custom_filter.blade.php

<!DOCTYPE html>
 
<html lang="en">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 5.8 Custom Datatables filter and Search - W3Adda</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
<h2>Laravel 5.8 Custom Datatables filter and Search - W3Adda</h2>
    <div class="form-group col-md-6">
    <h5>Start Date <span class="text-danger"></span></h5>
    <div class="controls">
        <input type="date" name="start_date" id="start_date" class="form-control datepicker-autoclose" placeholder="Please select start date"> <div class="help-block"></div></div>
    </div>
    <div class="form-group col-md-6">
    <h5>End Date <span class="text-danger"></span></h5>
    <div class="controls">
        <input type="date" name="end_date" id="end_date" class="form-control datepicker-autoclose" placeholder="Please select end date"> <div class="help-block"></div></div>
    </div>
    <div class="text-left" style="
    margin-left: 15px;
    ">
    <button type="text" id="btnFiterSubmitSearch" class="btn btn-info">Submit</button>
    </div>
    
    <br>
 
    <table class="table table-bordered table-striped" id="laravel_datatable">
       <thead>
          <tr>
             <th>ID</th>
             <th>Title</th>
             <th>Body</th>
             <th>Created at</th>
          </tr>
       </thead>
    </table>
</div>
 

</body>
</html>
<script>
$(document).ready( function () {
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });

  $('#laravel_datatable').DataTable({
         processing: true,
         serverSide: true,
         ajax: {
          url: "{{ url('dtable-custom-posts') }}",
          type: 'GET',
          data: function (d) {
          d.start_date = $('#start_date').val();
          d.end_date = $('#end_date').val();
          }
         },
         columns: [
                  { data: 'id', name: 'id', 'visible': false},
                  { data: 'title', name: 'title' },
                  { data: 'body', name: 'body' },
                  { data: 'created_at', name: 'created_at' },
               ],
        order: [[0, 'desc']]
  });
  
});

$('#btnFiterSubmitSearch').click(function(){
     $('#laravel_datatable').DataTable().draw(true);
}); 

</script>

<!DOCTYPE html>

<head>

<title>Laravel 5.8 Custom Datatables filter and Search - W3Adda</title>

</head>

<body>

<h2>Laravel 5.8 Custom Datatables filter and Search - W3Adda</h2>

<h5>Start Date <span class="text-danger"></span></h5>

</div>

</div>

<div class="text-left" style="

margin-left: 15px;

<button type="text" id="btnFiterSubmitSearch" class="btn btn-info">Submit</button>

</div>

<br>

<thead>

<tr>

<th>Title</th>

<th>Created at</th>

</tr>

</thead>

</table>

</div>

</body>

</html>

$(document).ready( function () {

$.ajaxSetup({

headers: {

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

}

});

$('#laravel_datatable').DataTable({

processing: true,

serverSide: true,

ajax: {

url: "{{ url('dtable-custom-posts') }}",

type: 'GET',

data: function (d) {

d.start_date = $('#start_date').val();

d.end_date = $('#end_date').val();

}

columns: [

{ data: 'id', name: 'id', 'visible': false},

{ data: 'title', name: 'title' },

{ data: 'body', name: 'body' },

{ data: 'created_at', name: 'created_at' },

order: [[0, 'desc']]

});

$('#btnFiterSubmitSearch').click(function(){

$('#laravel_datatable').DataTable().draw(true);

});

</script>

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('dtable-posts-lists', 'dtable\AjaxCrudController@index');
Route::get('dtable-custom-posts', 'dtable\AjaxCrudController@get_custom_posts');

1 2	Route::get('dtable-posts-lists', 'dtable\AjaxCrudController@index'); Route::get('dtable-custom-posts', 'dtable\AjaxCrudController@get_custom_posts');

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/dtable-posts-lists

Output 1:-

Output 2:-

Select “Start Date” and “End Date” and hit Submit button to display corresponding posts.

How to Get Site URL In Laravel

Leave a reply

How to Get Site URL In Laravel

In this article, I’ll show you how to get site url in your laravel controller, blade file, model etc. Many times in laravel application development we need to get base url of our laravel application. There follwoing ways we can get site url in our laravel 5 application. In laravel 5 we can get site url or base url using url helper and url facade.

Get Site url Using URL Helper

Syntax:-

url('/')

url('/')

Example :-

echo url('/');

1	echo url('/');

{{ url('/') }}

1	{{ url('/') }}

Get Site url Using URL Facade

Syntax:-

URL::to("/")

1	URL::to("/")

Example:-

$url = URL::to("/");
print_r($url);

1 2	$url = URL::to("/"); print_r($url);

Laravel 5.8 Razorpay Payment Gateway Integration

Leave a reply

Laravel 5.8 Razorpay Payment Gateway Integration

In this tutorial, you will learn to integrate Razorpay payment gateway in your laravel 5.8 project. Before starting with this tutorial you would require a Razorpay developer account, from there you will get the api key and secret key require for the integration. After the successful integration 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. Follow this step by step tutorial to learn Razorpay payment gateway integration in laravel 5.8.

Install Laravel 5.8

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

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

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

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=razorpay

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

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

php artisan key:generate

1	php artisan key:generate

php artisan config:cache

1	php artisan config:cache

Set Default String Length

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

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

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

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

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

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

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

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register()

{

}

Create Model and Migration

Now, we require to create a Payment tables to keep the payment records. so let’s run the following command to generate Payment model along with a migration file to create Payment table in our database.

php artisan make:model Payment -m

1	php artisan make:model Payment -m

Once the above command is executed a migration file Payments.php file is created, open the database/migrations/Payments.php file and put the following code in it.

public function up()
{
Schema::create('payments', function (Blueprint $table) {
$table->increments('id');
$table->string('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('payment_id');

$table->string('user_id');

$table->string('amount');

$table->timestamps();

});

}

Now, use the command to run migration –

php artisan migrate

1	php artisan migrate

Create Routes

After this, we need to add following routes in “routes/web.php” to display product listing, to store payment form and to payment acknowledgement. Lets open “routes/web.php” file and add following route.

routes/web.php

Route::get('my-store', 'razorpay\PaymentController@show_products');
Route::post('pay-success', 'razorpay\PaymentController@pay_success');
Route::post('thank-you', 'razorpay\PaymentController@thank_you');

Route::get('my-store', 'razorpay\PaymentController@show_products');

Route::post('pay-success', 'razorpay\PaymentController@pay_success');

Route::post('thank-you', 'razorpay\PaymentController@thank_you');

Here, first route is for product listing, second is to store payments_id and users information provided by razorpay payment gateway.

Create Controller

Next, we have to create a controller to handle payments. Create a controller named RazorpayController using command given below –

php artisan make:controller razorpay/PaymentController

1	php artisan make:controller razorpay/PaymentController

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

app/Http/Controllers/razorpay/PaymentController.php

<?php

namespace App\Http\Controllers\razorpay;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Payment;
use Redirect,Response;

class PaymentController extends Controller
{
    //
	public function show_products()
	{
		return view('razorpay.payment');
	}

	public function pay_success(Request $Request){
		$data = [
		'user_id' => '1',
		'payment_id' => $request->payment_id,
		'amount' => $request->amount,
		];
		$getId = Payment::insertGetId($data);  
		$arr = array('msg' => 'Payment successful.', 'status' => true);
		return Response()->json($arr);    
	}

	public function thank_you()
	{
		return view('razorpay.thankyou');
	}
}

<?php

namespace App\Http\Controllers\razorpay;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Payment;

use Redirect,Response;

class PaymentController extends Controller

{

public function show_products()

{

return view('razorpay.payment');

}

public function pay_success(Request $Request){

$data = [

'user_id' => '1',

'payment_id' => $request->payment_id,

'amount' => $request->amount,

];

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

$arr = array('msg' => 'Payment successful.', 'status' => true);

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

}

public function thank_you()

{

return view('razorpay.thankyou');

}

In this controller, we have following methods –

show_products() :- It lists Store Items

pay_success() :- To handle payment

thank_you() :- Payment Acknowledgement

Create Blade / View Files

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

resources/views/razorpay/payment.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>W3Adda - Laravel 5.8 Razorpay Payment </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
      <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">
         <article class="bg-secondary mb-3">
         <div class="card-body text-center">
            <h4 class="text-white">Welcome to W3Adda.com<br>  </h4>
          
         </div>
      </article>  
         <hr>
         <div class="row">
            <div class="col-md-4">
               <figure class="card card-product">
                  <div class="img-wrap"><img src="http://w3adda.com/wp-content/uploads/2019/07/51TdkJSqeQL._AC_UL436_.jpg"></div>
                  <figcaption class="info-wrap">
                     <h4 class="title">MacBook Air</h4>
                     <p class="desc">some product description comes here</p>
                     <div class="rating-wrap">
                        <div class="label-rating">123 reviews</div>
                        <div class="label-rating">123 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="100000" data-id="1">Order Now</a> 
                     <div class="price-wrap h5">
                        <span class="price-new">₹100000</span> <del class="price-old">₹120000</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="http://w3adda.com/wp-content/uploads/2019/07/61TMYERLL._AC_UL436_.jpg"> </div>
                  <figcaption class="info-wrap">
                     <h4 class="title">Canon 1300d</h4>
                     <p class="desc">some product description comes here</p>
                     <div class="rating-wrap">
                        <div class="label-rating">123 reviews</div>
                        <div class="label-rating">123 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="22000" data-id="2">Order Now</a> 
                     <div class="price-wrap h5">
                        <span class="price-new">₹22000</span> <del class="price-old">₹24500</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="http://w3adda.com/wp-content/uploads/2019/07/31vga2yygfL._AC_US160_.jpg"> </div>
                  <figcaption class="info-wrap">
                     <h4 class="title">HeadPhone</h4>
                     <p class="desc">some product description comes here</p>
                     <div class="rating-wrap">
                        <div class="label-rating">123 reviews</div>
                        <div class="label-rating">123 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="1500" data-id="3">Order Now</a> 
                     <div class="price-wrap h5">
                        <span class="price-new">₹1500</span> <del class="price-old">₹1900</del>
                     </div>
                     <!-- price-wrap.// -->
                  </div>
                  <!-- bottom-wrap.// -->
               </figure>
            </div>

            <!-- col // -->
         </div>
         <!-- row.// -->
      </div>
      <!--container.//-->
      <br><br><br>
      
      <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": "your_razorpay_test_key",
           "amount": (totalAmount*100), // 2000 paise = INR 20
           "name": "W3Adda",
           "description": "Payment",
           "image": "http://w3adda.com/wp-content/uploads/2019/07/w3a-fb-dp.png",
           "handler": function (response){
                 $.ajax({
                   url: SITEURL + 'pay-success',
                   type: 'post',
                   dataType: 'json',
                   data: {
                    razorpay_payment_id: response.razorpay_payment_id , 
                     totalAmount : totalAmount ,product_id : product_id,
                   }, 
                   success: function (msg) {
          
                       window.location.href = SITEURL + 'thank-you';
                   }
               });
             
           },
          "prefill": {
               "contact": '1234567890',
               "email":   'xxxxxxxxx@gmail.com',
           },
           "theme": {
               "color": "#528FF0"
           }
         };
         var rzp1 = new Razorpay(options);
         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

170

171

172

173

174

175

<!doctype html>

<head>

<title>W3Adda - Laravel 5.8 Razorpay Payment </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="text-white">Welcome to W3Adda.com<br> </h4>

</div>

</article>

<hr>

<h4 class="title">MacBook Air</h4>

<p class="desc">some product description comes here</p>

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

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

</div>

</figcaption>

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

</div>

</div>

</figure>

</div>

<h4 class="title">Canon 1300d</h4>

<p class="desc">some product description comes here</p>

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

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

</div>

</figcaption>

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

</div>

</div>

</figure>

</div>

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

<p class="desc">some product description comes here</p>

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

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

</div>

</figcaption>

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

</div>

</div>

</figure>

</div>

</div>

</div>

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": "your_razorpay_test_key",

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

"name": "W3Adda",

"description": "Payment",

"image": "http://w3adda.com/wp-content/uploads/2019/07/w3a-fb-dp.png",

"handler": function (response){

$.ajax({

url: SITEURL + 'pay-success',

type: 'post',

dataType: 'json',

data: {

razorpay_payment_id: response.razorpay_payment_id ,

totalAmount : totalAmount ,product_id : product_id,

success: function (msg) {

window.location.href = SITEURL + 'thank-you';

}

});

"prefill": {

"contact": '1234567890',

"email": 'xxxxxxxxx@gmail.com',

"theme": {

"color": "#528FF0"

}

};

var rzp1 = new Razorpay(options);

rzp1.open();

e.preventDefault();

});

</script>

</body>

</html>

You must replace secret key that you get from razorpay payment gateway here –

"key": "your_razorpay_test_secret_key",

1	"key": "your_razorpay_test_secret_key",

resources/views/razorpay/thankyou.blade.php

<!DOCTYPE html>
<html>
<head>
<title>W3Adda - Thank You</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="http://w3adda.com/"> W3Adda.com  
 <i class="fa fa-window-restore "></i></a></p>
</div>
<br><br><br>
</article>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>W3Adda - Thank You</title>

</head>

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

<br>

<p><a class="btn btn-warning" target="_blank" href="http://w3adda.com/"> W3Adda.com

</div>

</article>

</body>

</html>

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/my-store

Output:-

laravel-5-8-razorpay-payment-gateway-integration-1

Click “Order Now” for any product of your choice

laravel-5-8-razorpay-payment-gateway-integration-2

laravel-5-8-razorpay-payment-gateway-integration-3

Use the following test card details to test the payment.

Test Credit Card Info :-

Card No :- 4242424242424242 / 4012888888881881
Month :- Any future month
Year :- Any future Year
CVV :- Any 3 digit Number

Laravel 5.8 Ajax Form Submit With Validation

Leave a reply

Laravel 5.8 Ajax Form Submit With Validation

In this tutorial you’ll learn to validate and submit form data without reloading or refreshing of page using ajax. In this tutorial I’ll show you step by step how to submit and validate form data without reloading or refreshing of page using ajax. Generally Form validation is performed at server side, but can be performed at both the server and client side. In this laravel form validation tutorial we will be learning about laravel server side validations. In this tutorial, I’ll show you how to define laravel validation rules, how to validate form input and to display validation errors using ajax. In Laravel, to submit form data using ajax we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.

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

Create Model and Migration

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

php artisan make:model Contact -m

1	php artisan make:model Contact -m

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

<?php

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

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

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

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

Create Laravel Controller

Next, we have to create a controller to display contact form and to handle form validation and submit operations. Lets Create a controller named ContactController using command given below –

php artisan make:controller ajaxFormSubmitWithValidation/ContactController

1	php artisan make:controller ajaxFormSubmitWithValidation/ContactController

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

Open the ajaxFormSubmitWithValidation/ContactController.php file and put the following code in it.

app/Http/Controllers/ajaxFormSubmitWithValidation/ContactController.php

<?php

namespace App\Http\Controllers\ajaxFormSubmitWithValidation;

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

class ContactController extends Controller
{
     public function index()
    {
        return view('ajaxFormSubmitWithValidation.contact_form');
    }       

    public function store(Request $request)
    {  
   		$validator = Validator::make($request->all(), [
			'name' => 'required',
			'email' => 'required|email',
			'phone' => 'required|numeric'
		]);

		$arr = array('msg' => 'Something went wrong. Please try again!', 'status' => false);
        if($validator->passes()){ 
        	$arr = array('msg' => 'Contact Added Successfully!', 'status' => true);
        }
        return Response()->json($arr);
    }
}

<?php

namespace App\Http\Controllers\ajaxFormSubmitWithValidation;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Contact;

use Validator,Redirect,Response;

class ContactController extends Controller

{

public function index()

{

return view('ajaxFormSubmitWithValidation.contact_form');

}

public function store(Request $request)

{

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

'name' => 'required',

'email' => 'required|email',

'phone' => 'required|numeric'

]);

$arr = array('msg' => 'Something went wrong. Please try again!', 'status' => false);

if($validator->passes()){

$arr = array('msg' => 'Contact Added Successfully!', 'status' => true);

}

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

}

In this controller, we have following methods –

index() :- To display form.

store() :- To validate and submit form data.

Create Laravel View Files

In this step, we will create laravel view/blade file to perform display form and to show errors if any. Lets create a blade file “contact_form.blade.php” in “resources/views/ajaxFormSubmitWithValidation/” directory and put the following code in it respectively.

resources/views/ajaxFormSubmitWithValidation/contact_form.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 5.8 Ajax Form Submit with Validation - W3Adda</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
   <style>
   .error{ color:red; } 
  </style>
</head>
 
<body>
 
<div class="container">
    <h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>
    <br>
    <br>
   
    <form id="contact_us" method="post" action="javascript:void(0)">
      <div class="alert" id="msg_div" style="display:none">
        <span id="res_message"></span>
      </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control" id="name" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
      <div class="form-group">
        <label for="email">Email Id</label>
        <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>      
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" name="phone" class="form-control" id="phone" placeholder="Please enter mobile number" maxlength="10">
        <span class="text-danger">{{ $errors->first('phone') }}</span>
      </div>
      <div class="form-group">
       <button type="submit" id="send_form" class="btn btn-success">Submit</button>
      </div>
    </form>
 
</div>
<script>
//-----------------
$(document).ready(function(){
$('#send_form').click(function(e){
   e.preventDefault();
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });
   $('#send_form').html('Sending..');
   $.ajax({
      url: "{{ url('ajax-form-submit-validation')}}",
      method: 'post',
      data: $('#contact_us').serialize(),
      success: function(result){
          $('#send_form').html('Submit');
          if(result.status){
              $('#res_message').html(result.msg);
              $('#msg_div').removeClass('alert-danger');
              $('#msg_div').addClass('alert-success');
              $('#msg_div').show();
              $('#res_message').show();
          }else{
              $('#res_message').html(result.msg);
              $('#msg_div').removeClass('alert-success');
              $('#msg_div').addClass('alert-danger');
              $('#msg_div').show();
              $('#res_message').show();
          }

          document.getElementById("contact_us").reset(); 
          setTimeout(function(){
          $('#res_message').hide();
          $('#msg_div').hide();
          },1500);
        
      }});
   });
});
//-----------------

   
</script>
</body>
</html>

<!doctype html>

<head>

<title>Laravel 5.8 Ajax Form Submit with Validation - W3Adda</title>

<style>

.error{ color:red; }

</style>

</head>

<body>

<h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>

<br>

</div>

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label for="email">Email Id</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label for="phone">Phone</label>

<span class="text-danger">{{ $errors->first('phone') }}</span>

</div>

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

</div>

</form>

</div>

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

$(document).ready(function(){

$('#send_form').click(function(e){

e.preventDefault();

$.ajaxSetup({

headers: {

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

}

});

$('#send_form').html('Sending..');

$.ajax({

url: "{{ url('ajax-form-submit-validation')}}",

method: 'post',

data: $('#contact_us').serialize(),

success: function(result){

$('#send_form').html('Submit');

if(result.status){

$('#res_message').html(result.msg);

$('#msg_div').removeClass('alert-danger');

$('#msg_div').addClass('alert-success');

$('#msg_div').show();

$('#res_message').show();

}else{

$('#res_message').html(result.msg);

$('#msg_div').removeClass('alert-success');

$('#msg_div').addClass('alert-danger');

$('#msg_div').show();

$('#res_message').show();

}

document.getElementById("contact_us").reset();

setTimeout(function(){

$('#res_message').hide();

$('#msg_div').hide();

},1500);

}});

});

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

</script>

</body>

</html>

Define Laravel Route

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

routes/web.php

Route::get('ajax-form-submit-validation', 'ajaxFormSubmitWithValidation\ContactController@index');
Route::post('ajax-form-submit-validation', 'ajaxFormSubmitWithValidation\ContactController@store');

1 2	Route::get('ajax-form-submit-validation', 'ajaxFormSubmitWithValidation\ContactController@index'); Route::post('ajax-form-submit-validation', 'ajaxFormSubmitWithValidation\ContactController@store');

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/ajax-form-submit-validation

Output 1:-

laravel-5-8-ajax-form-submit-with-validation-1

Output 2:-

Validate form data and display error messages.

laravel-5-8-ajax-form-submit-with-validation-2

Output 3:-

Form data submitted successfully.

laravel-5-8-ajax-form-submit-with-validation-3

Laravel 5.7 Form Validation Rules By Example

Leave a reply

Laravel 5.7 Form Validation Rules By Example

Form Input validation is a process where we check whether the input data provided by user or client is in correct format or not. Input validation is always a best practice to avoid potential errors.Generally Form validation is performed at server side, but can be performed at both the server and client side. In this laravel form validation tutorial we will be learning about laravel server side validations. In this tutorial, I’ll show you how to define laravel validation rules, how to validate form input and to display validation errors.

Laravel 5 comes many built-in validation rules that can be easily implemented. In this example, we have used some of following validation rules –

required:- It set input field is required.

min:- Validate minimum character length.

max:- Validate maximum character length.

email: It set input must be a valid email address.

unique: It checks for unique value against a database column.

numeric: Input value must numeric.

same:- It validates two input fields value must be same.

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

Create Laravel Controller

Next, we have to create a controller to display contact form and to handle form validation and submit operations. Lets Create a controller named FormValidationController using command given below –

php artisan make:controller formValidationExample/FormValidationController

1	php artisan make:controller formValidationExample/FormValidationController

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

Open the formValidationExample/FormValidationController.php file and put the following code in it.

app/Http/Controllers/formValidationExample/FormValidationController.php

<?php

namespace App\Http\Controllers\formValidationExample;

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

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

    public function store(Request $request)
    {  
   		$validator = Validator::make($request->all(), [
			    'firstname' => 'required|min:4|max:25',
    			'lastname' => 'required|min:4|max:25',
    			'email' => 'required|email|unique:users',
    			'phone' => 'required|numeric',
    			'password' => 'required|min:3|max:20',
    			'confirm_password' => 'required|min:3|max:20|same:password',
    		],[

    			'firstname.required' => ' The first name field is required.',
    			'firstname.min' => ' The first name must be at least 4 characters.',
    			'firstname.max' => ' The first name may not be greater than 25 characters.',
    			'lastname.required' => ' The last name field is required.',
    			'lastname.min' => ' The last name must be at least 4 characters.',
    			'lastname.max' => ' The last name may not be greater than 25 characters.',

    		]);
   		$validator->validate();
   		dd('Form submitted successfully.');
    }
}

<?php

namespace App\Http\Controllers\formValidationExample;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Validator,Redirect,Response;

class FormValidationController extends Controller

{

public function index()

{

return view('formValidationExample.index');

}

public function store(Request $request)

{

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

'firstname' => 'required|min:4|max:25',

'lastname' => 'required|min:4|max:25',

'email' => 'required|email|unique:users',

'phone' => 'required|numeric',

'password' => 'required|min:3|max:20',

'confirm_password' => 'required|min:3|max:20|same:password',

],[

'firstname.required' => ' The first name field is required.',

'firstname.min' => ' The first name must be at least 4 characters.',

'firstname.max' => ' The first name may not be greater than 25 characters.',

'lastname.required' => ' The last name field is required.',

'lastname.min' => ' The last name must be at least 4 characters.',

'lastname.max' => ' The last name may not be greater than 25 characters.',

]);

$validator->validate();

dd('Form submitted successfully.');

}

In this controller, we have following methods –

index() :- To display form.

store() :- To validate and submit form data.

Create Laravel View Files

In this step, we will create laravel view/blade file to perform display form and to show errors if any. Lets create a blade file “index.blade.php” in “resources/views/formValidationExample/” directory and put the following code in it respectively.

resources/views/formValidationExample/index.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 5.7 Form Validation Example - W3Adda</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
	<h2>Laravel 5.7 Form Validation Example - W3Adda</h2>
	<form method="POST" action="{{url('laravel-form-validation-example')}}" autocomplete="off">
		@if(count($errors))
			<div class="alert alert-danger">
				<strong>Whoops!</strong> Please correct errors and try again!.
				<br/>
				<ul>
					@foreach($errors->all() as $error)
					<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
		@endif

		<input type="hidden" name="_token" value="{{ csrf_token() }}">
		<div class="row">
			<div class="col-md-6">
				<div class="form-group {{ $errors->has('firstname') ? 'has-error' : '' }}">
					<label for="firstname">First Name:</label>
					<input type="text" id="firstname" name="firstname" class="form-control" placeholder="Enter First Name" value="{{ old('firstname') }}">
					<span class="text-danger">{{ $errors->first('firstname') }}</span>
				</div>
			</div>

			<div class="col-md-6">
				<div class="form-group {{ $errors->has('lastname') ? 'has-error' : '' }}">
					<label for="lastname">Last Name:</label>
					<input type="text" id="lastname" name="lastname" class="form-control" placeholder="Enter Last Name" value="{{ old('lastname') }}">
					<span class="text-danger">{{ $errors->first('lastname') }}</span>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-md-6">
				<div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
					<label for="email">Email:</label>
					<input type="text" id="email" name="email" class="form-control" placeholder="Enter Email" value="{{ old('email') }}">
					<span class="text-danger">{{ $errors->first('email') }}</span>
				</div>
			</div>

			<div class="col-md-6">
				<div class="form-group {{ $errors->has('phone') ? 'has-error' : '' }}">
					<label for="mobileno">Phone No:</label>
					<input type="text" id="phone" name="phone" class="form-control" placeholder="Enter Mobile No" value="{{ old('phone') }}">
					<span class="text-danger">{{ $errors->first('phone') }}</span>
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-md-6">
				<div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
					<label for="password">Password:</label>
					<input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" >
					<span class="text-danger">{{ $errors->first('password') }}</span>
				</div>
			</div>

			<div class="col-md-6">
				<div class="form-group {{ $errors->has('confirm_password') ? 'has-error' : '' }}">
					<label for="confirm_password">Confirm Password:</label>
					<input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Enter Confirm Passowrd">
					<span class="text-danger">{{ $errors->first('confirm_password') }}</span>
				</div>
			</div>
		</div>

		<div class="form-group">
			<button class="btn btn-success">Submit</button>
		</div>
	</form>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.7 Form Validation Example - W3Adda</title>

</head>

<body>

<h2>Laravel 5.7 Form Validation Example - W3Adda</h2>

@if(count($errors))

<strong>Whoops!</strong> Please correct errors and try again!.

<br/>

<ul>

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

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

@endforeach

</ul>

</div>

@endif

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

<label for="firstname">First Name:</label>

<span class="text-danger">{{ $errors->first('firstname') }}</span>

</div>

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

<span class="text-danger">{{ $errors->first('lastname') }}</span>

</div>

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

<label for="email">Email:</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

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

<label for="mobileno">Phone No:</label>

<span class="text-danger">{{ $errors->first('phone') }}</span>

</div>

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

<label for="password">Password:</label>

<span class="text-danger">{{ $errors->first('password') }}</span>

</div>

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

<label for="confirm_password">Confirm Password:</label>

<span class="text-danger">{{ $errors->first('confirm_password') }}</span>

</div>

<button class="btn btn-success">Submit</button>

</div>

</form>

</div>

</body>

</html>

Define Laravel Route

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

routes/web.php

Route::get('laravel-form-validation-example', 'formValidationExample\FormValidationController@index');
Route::post('laravel-form-validation-example', 'formValidationExample\FormValidationController@store');

1 2	Route::get('laravel-form-validation-example', 'formValidationExample\FormValidationController@index'); Route::post('laravel-form-validation-example', 'formValidationExample\FormValidationController@store');

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/laravel-form-validation-example

Output 1:-

laravel-5-7-form-validation-example-1

Output 2:-

Validate form data and display error messages.

laravel-5-7-form-validation-example-2

Output 3:-

Form data submitted successfully.

laravel-5-7-form-validation-example-3

Laravel 5.8 Form Validation Tutorial With Example

Leave a reply

Laravel 5.8 Form Validation Tutorial With Example

Laravel 5 comes many built-in validation rules that can be easily implemented. In this example, we have used some of following validation rules –

required:- It set input field is required.

min:- Validate minimum character length.

max:- Validate maximum character length.

email: It set input must be a valid email address.

unique: It checks for unique value against a database column.

numeric: Input value must numeric.

same:- It validates two input fields value must be same.

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

Create Laravel Controller

php artisan make:controller formValidationExample/FormValidationController

1	php artisan make:controller formValidationExample/FormValidationController

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

Open the formValidationExample/FormValidationController.php file and put the following code in it.

app/Http/Controllers/formValidationExample/FormValidationController.php

<?php

namespace App\Http\Controllers\formValidationExample;

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

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

    public function store(Request $request)
    {  
   		$validator = Validator::make($request->all(), [
			    'firstname' => 'required|min:4|max:25',
    			'lastname' => 'required|min:4|max:25',
    			'email' => 'required|email|unique:users',
    			'phone' => 'required|numeric',
    			'password' => 'required|min:3|max:20',
    			'confirm_password' => 'required|min:3|max:20|same:password',
    		],[

    			'firstname.required' => ' The first name field is required.',
    			'firstname.min' => ' The first name must be at least 4 characters.',
    			'firstname.max' => ' The first name may not be greater than 25 characters.',
    			'lastname.required' => ' The last name field is required.',
    			'lastname.min' => ' The last name must be at least 4 characters.',
    			'lastname.max' => ' The last name may not be greater than 25 characters.',

    		]);
   		$validator->validate();
   		dd('Form submitted successfully.');
    }
}

<?php

namespace App\Http\Controllers\formValidationExample;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Validator,Redirect,Response;

class FormValidationController extends Controller

{

public function index()

{

return view('formValidationExample.index');

}

public function store(Request $request)

{

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

'firstname' => 'required|min:4|max:25',

'lastname' => 'required|min:4|max:25',

'email' => 'required|email|unique:users',

'phone' => 'required|numeric',

'password' => 'required|min:3|max:20',

'confirm_password' => 'required|min:3|max:20|same:password',

],[

'firstname.required' => ' The first name field is required.',

'firstname.min' => ' The first name must be at least 4 characters.',

'firstname.max' => ' The first name may not be greater than 25 characters.',

'lastname.required' => ' The last name field is required.',

'lastname.min' => ' The last name must be at least 4 characters.',

'lastname.max' => ' The last name may not be greater than 25 characters.',

]);

$validator->validate();

dd('Form submitted successfully.');

}

In this controller, we have following methods –

index() :- To display form.

store() :- To validate and submit form data.

Create Laravel View Files

resources/views/formValidationExample/index.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 5.8 Form Validation Example - W3Adda</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
	<h2>Laravel 5.8 Form Validation Example - W3Adda</h2>
	<form method="POST" action="{{url('laravel-form-validation-example')}}" autocomplete="off">
		
		@if ($errors->any())
		    <div class="alert alert-danger">
		    	<strong>Whoops!</strong> Please correct errors and try again!.
						<br/>
		        <ul>
		            @foreach ($errors->all() as $error)
		                <li>{{ $error }}</li>
		            @endforeach
		        </ul>
		    </div>
		@endif

		<!-- CSRF Token -->
		@csrf
		<div class="row">
			<div class="col-md-6">
				<div class="form-group @error('firstname') has-error @enderror">
					<label for="firstname">First Name:</label>
					<input type="text" id="firstname" name="firstname" class="form-control" placeholder="Enter First Name" value="{{ old('firstname') }}">
					@error('firstname')
					<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>

			<div class="col-md-6">
				<div class="form-group @error('lastname') has-error @enderror">
					<label for="lastname">Last Name:</label>
					<input type="text" id="lastname" name="lastname" class="form-control" placeholder="Enter Last Name" value="{{ old('lastname') }}">
					@error('lastname')
					<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-md-6">
				<div class="form-group @error('email') has-error @enderror">
					<label for="email">Email:</label>
					<input type="text" id="email" name="email" class="form-control" placeholder="Enter Email" value="{{ old('email') }}">
					@error('email')
					<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>

			<div class="col-md-6">
				<div class="form-group @error('phone') has-error @enderror">
					<label for="mobileno">Phone No:</label>
					<input type="text" id="phone" name="phone" class="form-control" placeholder="Enter Mobile No" value="{{ old('phone') }}">
					@error('phone')
					<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>
		</div>


		<div class="row">
			<div class="col-md-6">
				<div class="form-group @error('password') has-error @enderror">
					<label for="password">Password:</label>
					<input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" >
					@error('password')
					<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>

			<div class="col-md-6">
				<div class="form-group @error('confirm_password') has-error @enderror">
					<label for="confirm_password">Confirm Password:</label>
					<input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Enter Confirm Passowrd">
					@error('confirm_password')
					<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>
		</div>

		<div class="form-group">
			<button class="btn btn-success">Submit</button>
		</div>
	</form>
</div>
</body>
</html>

100

101

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 Form Validation Example - W3Adda</title>

</head>

<body>

<h2>Laravel 5.8 Form Validation Example - W3Adda</h2>

@if ($errors->any())

<strong>Whoops!</strong> Please correct errors and try again!.

<br/>

<ul>

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

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

@endforeach

</ul>

</div>

@endif

@csrf

<label for="firstname">First Name:</label>

@error('firstname')

<span class="text-danger">{{ $message }}</span>

@enderror

</div>

@error('lastname')

<span class="text-danger">{{ $message }}</span>

@enderror

</div>

<label for="email">Email:</label>

@error('email')

<span class="text-danger">{{ $message }}</span>

@enderror

</div>

<label for="mobileno">Phone No:</label>

@error('phone')

<span class="text-danger">{{ $message }}</span>

@enderror

</div>

<label for="password">Password:</label>

@error('password')

<span class="text-danger">{{ $message }}</span>

@enderror

</div>

<label for="confirm_password">Confirm Password:</label>

@error('confirm_password')

<span class="text-danger">{{ $message }}</span>

@enderror

</div>

<button class="btn btn-success">Submit</button>

</div>

</form>

</div>

</body>

</html>

Define Laravel Route

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

routes/web.php

Route::get('laravel-form-validation-example', 'formValidationExample\FormValidationController@index');
Route::post('laravel-form-validation-example', 'formValidationExample\FormValidationController@store');

1 2	Route::get('laravel-form-validation-example', 'formValidationExample\FormValidationController@index'); Route::post('laravel-form-validation-example', 'formValidationExample\FormValidationController@store');

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/laravel-form-validation-example

Output 1:-

laravel-5-8-form-validation-example-1

Output 2:-

Validate form data and display error messages.

laravel-5-8-form-validation-example-2

Output 3:-

Form data submitted successfully.

laravel-5-8-form-validation-example-3

Laravel 5.8 jQuery Ajax Form Submit

Leave a reply

Laravel 5.8 jQuery Ajax Form Submit

In this Laravel jQuery Ajax Form Submit tutorial you’ll learn to submit form data without reloading or refreshing of page using ajax. In this tutorial I’ll show you step by step how to submit a form without reloading or refreshing of page using ajax. In this example we will be using jquery ajax submit handler for ajax form submission.

In Laravel, to submit form data using ajax we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.

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

Create Laravel 5.8 Application

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

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

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

Configure Database In .env file

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

.env

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

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

php artisan key:generate
php artisan config:cache

1 2	php artisan key:generate php artisan config:cache

Set Default String Length

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

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

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

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

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

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;
class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 Schema::defaultStringLength(191);
 }
 public function register(){
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register(){

}

Create Model and Migration

php artisan make:model Contact -m

1	php artisan make:model Contact -m

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

<?php

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

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

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

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

Create Laravel View Files

In this step, we will create laravel view/blade file to display contact form and submit it using jquery ajax. Lets create a blade file “contact_form.blade.php” in “resources/views/ajaxFormSubmit/” directory.

Create bootstrap form In View File

Go to “contact_form.blade.php” in “resources/views/ajaxFormSubmit/” directory and put the following code in it to create a bootstrap form.

resources/views/ajaxFormSubmit/contact_form.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">
  <title>Laravel 5.8 Ajax Form Submit with Validation - W3Adda</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
   <style>
   .error{ color:red; } 
  </style>
</head>
 
<body>
 
<div class="container">
    <h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>
    <br>
    <br>
   
    <form id="contact_us" method="post" action="javascript:void(0)">
        <div class="alert alert-success d-none" id="msg_div">
              <span id="res_message"></span>
         </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control" id="name" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
      <div class="form-group">
        <label for="email">Email Id</label>
        <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>      
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" name="phone" class="form-control" id="phone" placeholder="Please enter mobile number" maxlength="10">
        <span class="text-danger">{{ $errors->first('phone') }}</span>
      </div>
      <div class="form-group">
       <button type="submit" id="send_form" class="btn btn-success">Submit</button>
      </div>
    </form>
 
</div>

</body>
</html>

<!doctype html>

<head>

<title>Laravel 5.8 Ajax Form Submit with Validation - W3Adda</title>

<style>

.error{ color:red; }

</style>

</head>

<body>

<h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>

<br>

</div>

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label for="email">Email Id</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label for="phone">Phone</label>

<span class="text-danger">{{ $errors->first('phone') }}</span>

</div>

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

</div>

</form>

</div>

</body>

</html>

Add CSRF Meta Tag In View file

<meta name="csrf-token" content="{{ csrf_token() }}">

1	<meta name="csrf-token" content="{{ csrf_token() }}">

Add jQuery In View file

Now, we need to include jquery library into our view file. Add the following line of code inside the head section of view file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

Create a submit handler function

Lets create an empty function to be executed when submit button is clicked. Add the following javascript code in view file at the end of the view file.

<script>
//-----------------
$(document).ready(function(){
$('#send_form').click(function(e){
     e.preventDefault();

   });
});
//-----------------
</script>

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

$(document).ready(function(){

$('#send_form').click(function(e){

e.preventDefault();

});

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

</script>

Set CSRF Token In jQuery Ajax Header :-

In order to submit form data using ajax, we must have to set X-CSRF-TOKEN request header with ajax form submit request.

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

$.ajaxSetup({

headers: {

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

}

});

Create $.ajax() function to submit form data :-

Now, we will add following code to submit form data using ajax inside submit handler function. Our final submit handler function will look like this –

<script>
//-----------------
$(document).ready(function(){
$('#send_form').click(function(e){
   e.preventDefault();
   /*Ajax Request Header setup*/
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });

   $('#send_form').html('Sending..');
   
   /* Submit form data using ajax*/
   $.ajax({
      url: "{{ url('jquery-ajax-form-submit')}}",
      method: 'post',
      data: $('#contact_us').serialize(),
      success: function(response){
         //------------------------
            $('#send_form').html('Submit');
            $('#res_message').show();
            $('#res_message').html(response.msg);
            $('#msg_div').removeClass('d-none');

            document.getElementById("contact_us").reset(); 
            setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
            },10000);
         //--------------------------
      }});
   });
});
//-----------------
</script>

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

$(document).ready(function(){

$('#send_form').click(function(e){

e.preventDefault();

/*Ajax Request Header setup*/

$.ajaxSetup({

headers: {

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

}

});

$('#send_form').html('Sending..');

/* Submit form data using ajax*/

$.ajax({

url: "{{ url('jquery-ajax-form-submit')}}",

method: 'post',

data: $('#contact_us').serialize(),

success: function(response){

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

$('#send_form').html('Submit');

$('#res_message').show();

$('#res_message').html(response.msg);

$('#msg_div').removeClass('d-none');

document.getElementById("contact_us").reset();

setTimeout(function(){

$('#res_message').hide();

$('#msg_div').hide();

},10000);

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

}});

});

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

</script>

Now our final view file will look like this –

resources/views/ajaxFormSubmit/contact_form.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">
  <!-- CSRF Token Meta Added -->
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 5.8 Ajax Form Submit with Validation - W3Adda</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
   <style>
   .error{ color:red; } 
  </style>
</head>
 
<body>
 
<div class="container">
    <h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>
    <br>
    <br>
   
    <form id="contact_us" method="post" action="javascript:void(0)">
        <div class="alert alert-success d-none" id="msg_div">
              <span id="res_message"></span>
         </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control" id="name" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
      <div class="form-group">
        <label for="email">Email Id</label>
        <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>      
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" name="phone" class="form-control" id="phone" placeholder="Please enter mobile number" maxlength="10">
        <span class="text-danger">{{ $errors->first('phone') }}</span>
      </div>
      <div class="form-group">
       <button type="submit" id="send_form" class="btn btn-success">Submit</button>
      </div>
    </form>
 
</div>

</body>
</html>
<script>
//-----------------
$(document).ready(function(){
$('#send_form').click(function(e){
   e.preventDefault();
   /*Ajax Request Header setup*/
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });

   $('#send_form').html('Sending..');
   
   /* Submit form data using ajax*/
   $.ajax({
      url: "{{ url('jquery-ajax-form-submit')}}",
      method: 'post',
      data: $('#contact_us').serialize(),
      success: function(response){
         //------------------------
            $('#send_form').html('Submit');
            $('#res_message').show();
            $('#res_message').html(response.msg);
            $('#msg_div').removeClass('d-none');

            document.getElementById("contact_us").reset(); 
            setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
            },10000);
         //--------------------------
      }});
   });
});
//-----------------
</script>

<!doctype html>

<head>

<title>Laravel 5.8 Ajax Form Submit with Validation - W3Adda</title>

<style>

.error{ color:red; }

</style>

</head>

<body>

<h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>

<br>

</div>

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label for="email">Email Id</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label for="phone">Phone</label>

<span class="text-danger">{{ $errors->first('phone') }}</span>

</div>

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

</div>

</form>

</div>

</body>

</html>

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

$(document).ready(function(){

$('#send_form').click(function(e){

e.preventDefault();

/*Ajax Request Header setup*/

$.ajaxSetup({

headers: {

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

}

});

$('#send_form').html('Sending..');

/* Submit form data using ajax*/

$.ajax({

url: "{{ url('jquery-ajax-form-submit')}}",

method: 'post',

data: $('#contact_us').serialize(),

success: function(response){

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

$('#send_form').html('Submit');

$('#res_message').show();

$('#res_message').html(response.msg);

$('#msg_div').removeClass('d-none');

document.getElementById("contact_us").reset();

setTimeout(function(){

$('#res_message').hide();

$('#msg_div').hide();

},10000);

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

}});

});

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

</script>

Create Laravel Controller

Next, we have to create a controller to display contact form and to handle form validation and submit operations. Lets Create a controller named ContactController using command given below –

php artisan make:controller ajaxFormSubmit/ContactController

1	php artisan make:controller ajaxFormSubmit/ContactController

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

Open the ajaxFormSubmit/ContactController.php file and put the following code in it.

app/Http/Controllers/ajaxFormSubmit/ContactController.php

<?php

namespace App\Http\Controllers\ajaxFormSubmit;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Contact;
use Redirect,Response;

class ContactController extends Controller
{
    //
     public function index()
    {
        return view('ajaxFormSubmit.contact_form');
    }       

    public function store(Request $request)
    {  
              
        $data = $request->all();
        $result = Contact::insert($data);
        if($result){ 
        	$arr = array('msg' => 'Contact Added Successfully!', 'status' => true);
        }
        return Response()->json($arr);
    }
}

<?php

namespace App\Http\Controllers\ajaxFormSubmit;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Contact;

use Redirect,Response;

class ContactController extends Controller

{

public function index()

{

return view('ajaxFormSubmit.contact_form');

}

public function store(Request $request)

{

$data = $request->all();

$result = Contact::insert($data);

if($result){

$arr = array('msg' => 'Contact Added Successfully!', 'status' => true);

}

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

}

In this controller, we have following methods –

index() :- To display contact form.

store() :- To handle form submit request.

Define Laravel Route

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

routes/web.php

Route::get('jquery-ajax-form-submit', 'ajaxFormSubmit\ContactController@index');
Route::post('jquery-ajax-form-submit', 'ajaxFormSubmit\ContactController@store');

1 2	Route::get('jquery-ajax-form-submit', 'ajaxFormSubmit\ContactController@index'); Route::post('jquery-ajax-form-submit', 'ajaxFormSubmit\ContactController@store');

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/jquery-ajax-form-submit

Output 1:-

laravel-5-8-jquery-ajax-form-submit-1-1

Output 2:-

Form data submitted successfully

laravel-5-8-jquery-ajax-form-submit-2-2

Laravel 5.8 jQuery Form Validation

Leave a reply

Laravel 5.8 jQuery Form Validation

Input validation is a process where we check whether the input data provided by user or client is in correct format or not. If the input data fails to satisfy the validation rules then the user is responded with an error response code and the user is requested to resubmit the form with correct information. Generally Form validation is performed at server side, but can be performed at both the server and client side.

In this simple example, I’ll show you how to implement client side validation in laravel using Jquery Form Validation plugin. In this tutorial, you will learn to validate the form data in the client side before it is submitted to server. When the form data satisfies the validation it will submitted to server for further processing.

Create Laravel View Files

In this step, we will create laravel view/blade file to perform display form. Lets create a blade file “index.blade.php” in “resources/views/jqueryFormValidation/” directory and put the following code in it respectively.

resources/views/jqueryFormValidation/contact_form.blade.php

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>Laravel 5.8 JQuery Form Validation Example - W3Adda.com</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>  
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<style type="text/css">
.error{
	color: red;
}	

</style>
</head>

<body>

<div class="container">

  <h2>Laravel 5.8 JQuery Form Validation Example - W3Adda.com</h2><br/>

  <form method="post" action="{{url('validation')}}" id="form">
    @csrf
    <div class="row">
      <div class="col-md-4"></div>
      <div class="form-group col-md-4">
        <label for="Name">Name:</label>
        <input type="text" class="form-control" name="name">
      </div>
    </div>



    <div class="row">

      <div class="col-md-4"></div>

      <div class="form-group col-md-4">

          <label for="Email">Email:</label>

          <input type="text" class="form-control" name="email">

      </div>

    </div>



    <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Number">Phone:</label>

          <input type="text" class="form-control" name="number">

        </div>

    </div>



    <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Min Length">Min Length(minium 5):</label>

          <input type="text" class="form-control" name="minlength">

        </div>

    </div>



      <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Max Length">Max Length(maximum 8):</label>

          <input type="text" class="form-control" name="maxlength">

        </div>

      </div>



      <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Min Value">Min Value(minium 1):</label>

          <input type="text" class="form-control" name="minvalue">

        </div>

      </div>



      <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Max Value">Max Value(maximum value 100):</label>

          <input type="text" class="form-control" name="maxvalue">

        </div>

      </div>



      <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Range">Range(minium 20, maximum 40):</label>

          <input type="text" class="form-control" name="range">

        </div>

      </div>



      <div class="row">

        <div class="col-md-4"></div>

        <div class="form-group col-md-4">

          <label for="Range">URL:</label>

          <input type="text" class="form-control" name="url">

        </div>

      </div>



    <div class="row">

      <div class="col-md-4"></div>

      <div class="form-group col-md-4">

        <input type="file" name="filename">    

     </div>

    </div>



    <div class="row">

      <div class="col-md-4"></div>

      <div class="form-group col-md-4" style="margin-top:60px">

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

      </div>

    </div>



  </form>



</div>



<script>



$(document).ready(function () {



$('#form').validate({ // initialize the plugin

    rules: {

        name: {

            required: true

        },

        email: {

            required: true,

            email: true

        },

        number: {

            required: true,

            digits: true

        },

        minlength: {

            required: true,

            minlength: 5

        },

        maxlength: {

            required: true,

            maxlength: 8

        },

        minvalue: {

            required: true,

            min: 1

        },

        maxvalue: {

            required: true,

            max: 100

        },

        range: {

            required: true,

            range: [20, 40]

        },

        url: {

            required: true,

            url: true

        },

        filename: {

            required: true,

            extension: "jpeg|png"

        },

    }

});

});

</script>



</body>



</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 JQuery Form Validation Example - W3Adda.com</title>

.error{

color: red;

}

</style>

</head>

<body>

<h2>Laravel 5.8 JQuery Form Validation Example - W3Adda.com</h2><br/>

@csrf

</div>

<label for="Email">Email:</label>

</div>

<label for="Number">Phone:</label>

</div>

<label for="Min Length">Min Length(minium 5):</label>

</div>

<label for="Max Length">Max Length(maximum 8):</label>

</div>

<label for="Min Value">Min Value(minium 1):</label>

</div>

<label for="Max Value">Max Value(maximum value 100):</label>

</div>

<label for="Range">Range(minium 20, maximum 40):</label>

</div>

</div>

</div>

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

</div>

</form>

</div>

$(document).ready(function () {

$('#form').validate({ // initialize the plugin

rules: {

required: true

email: {

required: true,

email: true

number: {

required: true,

digits: true

minlength: {

required: true,

minlength: 5

maxlength: {

required: true,

maxlength: 8

minvalue: {

required: true,

min: 1

maxvalue: {

required: true,

max: 100

range: {

required: true,

range: [20, 40]

url: {

required: true,

url: true

filename: {

required: true,

extension: "jpeg|png"

}

});

</script>

</body>

</html>

Load JS and CSS file

For that first, we need to load jQuery Form validation plugin along with jQuery to validate input fields and also use bootstrap css file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>  
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Create Laravel Controller

Next, we have to create a controller to display contact form and to handle form validation and submit operations. Lets Create a controller named ContactController using command given below –

php artisan make:controller jqueryFormValidation/ContactController

1	php artisan make:controller jqueryFormValidation/ContactController

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

Open the jqueryFormValidation/ContactController.php file and put the following code in it.

app/Http/Controllers/jqueryFormValidation/ContactController.php

<?php

namespace App\Http\Controllers\jqueryFormValidation;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class ContactController extends Controller
{
    public function index()
    {
        return view('jqueryFormValidation.index');
    }       

    public function store(Request $request)
    {  
   		//
    }

}

<?php

namespace App\Http\Controllers\jqueryFormValidation;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class ContactController extends Controller

{

public function index()

{

return view('jqueryFormValidation.index');

}

public function store(Request $request)

{

}

Define Laravel Route

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

routes/web.php

Route::get('jquery-form-validation', 'jqueryFormValidation\ContactController@index');

1	Route::get('jquery-form-validation', 'jqueryFormValidation\ContactController@index');

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/jquery-form-validation

Output 1:-

laravel-5-8-jquery-form-validation-1

Output 2:-

Validate form data and display error messages.

laravel-5-8-jquery-form-validation-2

Laravel 5 Fix Ajax Post 500 Internal Server Error

Leave a reply

Laravel 5 Fix Ajax Post 500 Internal Server Error

Many times while trying to submit form data using ajax you encounter 500 internal server error, in most of the cases this happens due to not adding csrf_token with form data or not setting X-CSRF-TOKEN request header with ajax form submit request. In this tutorial, I’ll show you how to add CSRF Meta and Ajax Headers properly to avoid internal server error.

Add CSRF Meta and Set Ajax Headers

Laravel comes with a security mechanism called csrf token. In Laravel, each of the request is attached a csrf_token that is validated before can be processed. In order to submit form data using ajax, we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request. This CSRF Token can generated using csrf_token() helper of laravel 5.

Add CSRF Token In Meta tag :-

<meta name="csrf-token" content="{{ csrf_token() }}">

1	<meta name="csrf-token" content="{{ csrf_token() }}">

Set CSRF Token In jQuery Ajax Header :-

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

$.ajaxSetup({

headers: {

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

}

});

Laravel 5.8 jQuery Ajax Form Submit With Validation

Leave a reply

Laravel 5.8 jQuery Ajax Form Submit With Validation

What Is Input Validation?

We will be using Jquery Form Validation plugin to validate the form in the client side, then input data is submitted to server where it will be validated against the server side validation rules.When the form data satisfies the validation at both the client and server side it will be inserted into the database.

Laravel Ajax Form Submit

In this Laravel jQuery Ajax Form Submit tutorial you’ll learn to validate and submit form data without reloading or refreshing of page using ajax. In this tutorial I’ll show you step by step how to submit a form without reloading or refreshing of page using ajax. In this example we will be using jquery form validation along with the jquery ajax submit handler for ajax form submission.

In this Laravel jQuery Ajax Form Submit example, I’ll show you how easily we can implement laravel validation with jquery ajax form submit request and can display laravel validation errors messages. In order to submit form data using ajax, we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.

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

Create Laravel 5.8 Application

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

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

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

Configure Database In .env file

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

.env

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Generate Application Key

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

php artisan key:generate
php artisan config:cache

1 2	php artisan key:generate php artisan config:cache

Set Default String Length

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

use Illuminate\Support\Facades\Schema;

1	use Illuminate\Support\Facades\Schema;

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

Schema::defaultStringLength(191);

1	Schema::defaultStringLength(191);

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

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;
class AppServiceProvider extends ServiceProvider
{
 public function boot() {
 Schema::defaultStringLength(191);
 }
 public function register(){
 }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider

{

public function boot() {

Schema::defaultStringLength(191);

}

public function register(){

}

Create Model and Migration

php artisan make:model Contact -m

1	php artisan make:model Contact -m

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

<?php

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

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

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Run Laravel Migration

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

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

Create Laravel Controller

Next, we have to create a controller to display contact form and to handle form validation and submit operations. Lets Create a controller named ContactController using command given below –

php artisan make:controller ajaxFormSubmitValidation/ContactController

1	php artisan make:controller ajaxFormSubmitValidation/ContactController

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

Open the ajaxFormSubmitValidation/ContactController.php file and put the following code in it.

app/Http/Controllers/ajaxFormSubmitValidation/ContactController.php

<?php

namespace App\Http\Controllers\ajaxFormSubmitValidation;

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

class ContactController extends Controller
{
    //
     public function index()
    {
        return view('ajaxFormSubmitValidation.contact_form');
    }       

    public function store(Request $request)
    {  
        request()->validate([
        'name' => 'required',
        'email' => 'required|email',
        'phone' => 'required'
        ]);
        
        $data = $request->all();
        $result = Contact::insert($data);
        $arr = array('msg' => 'Something went wrong. Please try again!', 'status' => false);
        if($result){ 
        	$arr = array('msg' => 'Contact Added Successfully!', 'status' => true);
        }
        return Response()->json($arr);
      
    }
}

<?php

namespace App\Http\Controllers\ajaxFormSubmitValidation;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Contact;

use Validator,Redirect,Response;

class ContactController extends Controller

{

public function index()

{

return view('ajaxFormSubmitValidation.contact_form');

}

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'email' => 'required|email',

'phone' => 'required'

]);

$data = $request->all();

$result = Contact::insert($data);

$arr = array('msg' => 'Something went wrong. Please try again!', 'status' => false);

if($result){

$arr = array('msg' => 'Contact Added Successfully!', 'status' => true);

}

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

}

In this controller, we have following methods –

index() :- To display contact form.

store() :- To validate and submit form data,

Create Laravel View Files

In this step, we will create laravel view/blade file to perform display contact form. Lets create a blade file “contact_form.blade.php” in “resources/views/ajaxFormSubmitValidation/” directory and put the following code in it respectively.

resources/views/ajaxFormSubmitValidation/contact_form.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 5.8 Ajax Form Submit with Validation - W3Adda</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
  <style>
   .error{ color:red; } 
  </style>
</head>
 
<body>
 
<div class="container">
    <h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>
    <br>
    <br>
   
    <form id="contact_us" method="post" action="javascript:void(0)">
        <div class="alert alert-success d-none" id="msg_div">
              <span id="res_message"></span>
         </div>
      
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control" id="name" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
      <div class="form-group">
        <label for="email">Email Id</label>
        <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>      
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" name="phone" class="form-control" id="phone" placeholder="Please enter mobile number" maxlength="10">
        <span class="text-danger">{{ $errors->first('phone') }}</span>
      </div>
      <div class="form-group">
       <button type="submit" id="send_form" class="btn btn-success">Submit</button>
      </div>
    </form>
 
</div>
<script>
   if ($("#contact_us").length > 0) {
    $("#contact_us").validate({
     
    rules: {
      name: {
        required: true,
        maxlength: 50
      },
 
       phone: {
            required: true,
            digits:true,
            minlength: 10,
            maxlength:12,
        },
        email: {
                required: true,
                maxlength: 50,
                email: true,
            },    
    },
    messages: {
       
      name: {
        required: "Please enter name",
        maxlength: "Name should be 50 characters long."
      },
      phone: {
        required: "Please enter contact number",
        minlength: "The contact number should be 10 digits",
        digits: "Please enter only numbers",
        maxlength: "The contact number should be 12 digits",
      },
      email: {
          required: "Please enter valid email",
          email: "Please enter valid email",
          maxlength: "The email name should less than or equal to 50 characters",
        },
        
    },
    submitHandler: function(form) {
     $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $('#send_form').html('Sending..');
      $.ajax({
        url: "{{ url('jquery-ajax-form-submit-validation')}}" ,
        type: "POST",
        data: $('#contact_us').serialize(),
        success: function( response ) {
            $('#send_form').html('Submit');
            $('#res_message').show();
            $('#res_message').html(response.msg);
            $('#msg_div').removeClass('d-none');

            document.getElementById("contact_us").reset(); 
            setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
            },10000);
        }
      });
    }
  })
}
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!doctype html>

<head>

<title>Laravel 5.8 Ajax Form Submit with Validation - W3Adda</title>

<style>

.error{ color:red; }

</style>

</head>

<body>

<h2 style="margin-top: 10px;">Laravel 5.8 Ajax Form Submit with Validation - W3Adda</h2>

<br>

</div>

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label for="email">Email Id</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label for="phone">Phone</label>

<span class="text-danger">{{ $errors->first('phone') }}</span>

</div>

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

</div>

</form>

</div>

if ($("#contact_us").length > 0) {

$("#contact_us").validate({

rules: {

required: true,

maxlength: 50

phone: {

required: true,

digits:true,

minlength: 10,

maxlength:12,

email: {

required: true,

maxlength: 50,

email: true,

messages: {

required: "Please enter name",

maxlength: "Name should be 50 characters long."

phone: {

required: "Please enter contact number",

minlength: "The contact number should be 10 digits",

digits: "Please enter only numbers",

maxlength: "The contact number should be 12 digits",

email: {

required: "Please enter valid email",

email: "Please enter valid email",

maxlength: "The email name should less than or equal to 50 characters",

submitHandler: function(form) {

$.ajaxSetup({

headers: {

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

}

});

$('#send_form').html('Sending..');

$.ajax({

url: "{{ url('jquery-ajax-form-submit-validation')}}" ,

type: "POST",

data: $('#contact_us').serialize(),

success: function( response ) {

$('#send_form').html('Submit');

$('#res_message').show();

$('#res_message').html(response.msg);

$('#msg_div').removeClass('d-none');

document.getElementById("contact_us").reset();

setTimeout(function(){

$('#res_message').hide();

$('#msg_div').hide();

},10000);

}

});

}

})

}

</script>

</body>

</html>

Add CSRF Meta and Set Ajax Headers

Add CSRF Token In Meta tag :-

<meta name="csrf-token" content="{{ csrf_token() }}">

1	<meta name="csrf-token" content="{{ csrf_token() }}">

Set CSRF Token In jQuery Ajax Header :-

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

$.ajaxSetup({

headers: {

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

}

});

Define Laravel Route

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

routes/web.php

Route::get('jquery-ajax-form-submit-validation', 'ajaxFormSubmitValidation\ContactController@index');
Route::post('jquery-ajax-form-submit-validation', 'ajaxFormSubmitValidation\ContactController@store');

1 2	Route::get('jquery-ajax-form-submit-validation', 'ajaxFormSubmitValidation\ContactController@index'); Route::post('jquery-ajax-form-submit-validation', 'ajaxFormSubmitValidation\ContactController@store');

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/jquery-ajax-form-submit-validation

Output 1:-

laravel-5-8-jquery-ajax-form-submit-with-validation-1

Output 2:-

Validate form data and display error messages.

laravel-5-8-jquery-ajax-form-submit-with-validation-2

Output 3:-

Form data submitted successfully.

laravel-5-8-jquery-ajax-form-submit-with-validation-3