Category Archives: Blog

Blog

How to Fix “Port 4200 is already in use” error

Sometimes when you running your node js application, you may “Port 4200 is already in use” error. This is mainly happens because of any other application running on the same port. In order to fix this error you can start your application on different port or you can terminate the existing application running on the same port. Instruction to terminate the running application are as below –

Open Command Prompt and type –

netstat -a -o -n

1	netstat -a -o -n

How to Fix "Port 4200 is already in use" error

Find the PID of the process that you want to terminate and then type –

taskkill -F -PID 1800

1	taskkill -F -PID 1800

This one 1800 is the PID for the process that I want to kill.

How to fix “module was compiled against different Node.js version” error

Leave a reply

How to fix “module was compiled against different Node.js version” error

How to fix "module was compiled against different Node.js version" error

You need to remove the respective module folder (bcrypt) from the node_modules folder and install it again, using following commands –

rm -rf node_modules/bcrypt
npm install

1 2	rm -rf node_modules/bcrypt npm install

Or you can simply rebuild the package and tell npm to update it’s binary too, use following single command to get it fixed –

npm rebuild bcrypt --update-binary

1	npm rebuild bcrypt --update-binary

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

Laravel 5.8 Simple Ajax CRUD Application

Leave a reply

Laravel 5.8 Simple Ajax CRUD Application

In this tutorial, you will learn to create a simple ajax based CRUD (Create, Read, Update and Delete) application. In this step by step guide, we will be creating a simple blog application with post table and implement ajax based CRUD operations.

Install Laravel 5.8 Using Command

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 and Migration

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'

];

}

Create Controller Using Command

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

php artisan make:controller ajaxcrud/AjaxPostController

1	php artisan make:controller ajaxcrud/AjaxPostController

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

app/Http/Controllers/dtable/AjaxPostController.php

<?php

namespace App\Http\Controllers\ajaxcrud;

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

class AjaxPostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $data['posts'] = Post::orderBy('id','desc')->paginate(8);
   
        return view('ajaxcrud.index',$data);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $postID = $request->post_id;
        $post   =   Post::updateOrCreate(['id' => $postID],
                    ['title' => $request->title, 'body' => $request->body]);
    
        return Response::json($post);
    }



    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
        $where = array('id' => $id);
        $post  = Post::where($where)->first();
 
        return Response::json($post);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
        $post = Post::where('id',$id)->delete();
   
        return Response::json($post);
    }
}

<?php

namespace App\Http\Controllers\ajaxcrud;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Post;

use Redirect,Response;

class AjaxPostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$data['posts'] = Post::orderBy('id','desc')->paginate(8);

return view('ajaxcrud.index',$data);

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$postID = $request->post_id;

$post = Post::updateOrCreate(['id' => $postID],

['title' => $request->title, 'body' => $request->body]);

return Response::json($post);

}

/**

* Show the form for editing the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function edit($id)

{

$where = array('id' => $id);

$post = Post::where($where)->first();

return Response::json($post);

}

/**

* Remove the specified resource from storage.

* @param int $id

* @return \Illuminate\Http\Response

public function destroy($id)

{

$post = Post::where('id',$id)->delete();

return Response::json($post);

}

Create Blade / View Files

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

resources/views/ajaxcrud/index.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 5.8 Ajax CRUD Application - W3Adda.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.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/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
 <style>
   .container{
    padding: 0.5%;
   } 
</style>
</head>
<body>
 
<div class="container">
    <h2 style="margin-top: 12px;" class="alert alert-success">Laravel 5.8 Ajax CRUD Application - W3Adda.com</h2><br>
    <div class="row">
        <div class="col-12">
          <a href="javascript:void(0)" class="btn btn-success mb-2" id="create-new-post">Add post</a> 
          
          <table class="table table-bordered" id="laravel_crud">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Email</th>
                 <td colspan="2">Action</td>
              </tr>
           </thead>
           <tbody id="posts-crud">
              @foreach($posts as $post)
              <tr id="post_id_{{ $post->id }}">
                 <td>{{ $post->id  }}</td>
                 <td>{{ $post->title }}</td>
                 <td>{{ $post->body }}</td>
                 <td><a href="javascript:void(0)" id="edit-post" data-id="{{ $post->id }}" class="btn btn-info">Edit</a></td>
                 <td>
                  <a href="javascript:void(0)" id="delete-post" data-id="{{ $post->id }}" class="btn btn-danger delete-post">Delete</a></td>
              </tr>
              @endforeach
           </tbody>
          </table>
          {{ $posts->links() }}
       </div> 
    </div>
</div>
<div class="modal fade" id="ajax-crud-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="postCrudModal"></h4>
    </div>
    <div class="modal-body">
        <form id="postForm" name="postForm" class="form-horizontal">
           <input type="hidden" name="post_id" id="post_id">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="title" name="title" value="" required="">
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-2 control-label">Body</label>
                <div class="col-sm-12">
                    <input class="form-control" id="body" name="body" value="" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save
             </button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        
    </div>
</div>
</div>
</div>
</body>
</html>
<script>
  $(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#create-new-post').click(function () {
        $('#btn-save').val("create-post");
        $('#postForm').trigger("reset");
        $('#postCrudModal').html("Add New post");
        $('#ajax-crud-modal').modal('show');
    });
 
    $('body').on('click', '#edit-post', function () {
      var post_id = $(this).data('id');
      $.get('ajax-posts/'+post_id+'/edit', function (data) {
         $('#postCrudModal').html("Edit post");
          $('#btn-save').val("edit-post");
          $('#ajax-crud-modal').modal('show');
          $('#post_id').val(data.id);
          $('#title').val(data.title);
          $('#body').val(data.body);  
      })
   });

    $('body').on('click', '.delete-post', function () {
        var post_id = $(this).data("id");
        confirm("Are You sure want to delete !");
 
        $.ajax({
            type: "DELETE",
            url: "{{ url('ajax-posts')}}"+'/'+post_id,
            success: function (data) {
                $("#post_id_" + post_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });   
  });
 
 if ($("#postForm").length > 0) {
      $("#postForm").validate({
 
     submitHandler: function(form) {

      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');

      
      $.ajax({
          data: $('#postForm').serialize(),
          url: "{{ route('ajax-posts.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
              var post = '<tr id="post_id_' + data.id + '"><td>' + data.id + '</td><td>' + data.title + '</td><td>' + data.body + '</td>';
              post += '<td><a href="javascript:void(0)" id="edit-post" data-id="' + data.id + '" class="btn btn-info">Edit</a></td>';
              post += '<td><a href="javascript:void(0)" id="delete-post" data-id="' + data.id + '" class="btn btn-danger delete-post">Delete</a></td></tr>';
               
              
              if (actionType == "create-post") {
                  $('#posts-crud').prepend(post);
              } else {
                  $("#post_id_" + data.id).replaceWith(post);
              }
 
              $('#postForm').trigger("reset");
              $('#ajax-crud-modal').modal('hide');
              $('#btn-save').html('Save Changes');
              
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
          }
      });
    }
  })
}
   
  
</script>

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

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5.8 Ajax CRUD Application - W3Adda.com</title>

<style>

.container{

padding: 0.5%;

}

</style>

</head>

<body>

<h2 style="margin-top: 12px;" class="alert alert-success">Laravel 5.8 Ajax CRUD Application - W3Adda.com</h2><br>

<thead>

<tr>

<th>Email</th>

<td colspan="2">Action</td>

</tr>

</thead>

@foreach($posts as $post)

<td>{{ $post->title }}</td>

<td><a href="javascript:void(0)" id="edit-post" data-id="{{ $post->id }}" class="btn btn-info">Edit</a></td>

<td>

<a href="javascript:void(0)" id="delete-post" data-id="{{ $post->id }}" class="btn btn-danger delete-post">Delete</a></td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

<label for="name" class="col-sm-2 control-label">Title</label>

</div>

</div>

<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save

</button>

</div>

</form>

</div>

</div>

</body>

</html>

$(document).ready(function () {

$.ajaxSetup({

headers: {

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

}

});

$('#create-new-post').click(function () {

$('#btn-save').val("create-post");

$('#postForm').trigger("reset");

$('#postCrudModal').html("Add New post");

$('#ajax-crud-modal').modal('show');

});

$('body').on('click', '#edit-post', function () {

var post_id = $(this).data('id');

$.get('ajax-posts/'+post_id+'/edit', function (data) {

$('#postCrudModal').html("Edit post");

$('#btn-save').val("edit-post");

$('#ajax-crud-modal').modal('show');

$('#post_id').val(data.id);

$('#title').val(data.title);

$('#body').val(data.body);

})

});

$('body').on('click', '.delete-post', function () {

var post_id = $(this).data("id");

confirm("Are You sure want to delete !");

$.ajax({

type: "DELETE",

url: "{{ url('ajax-posts')}}"+'/'+post_id,

success: function (data) {

$("#post_id_" + post_id).remove();

error: function (data) {

console.log('Error:', data);

}

});

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

$("#postForm").validate({

submitHandler: function(form) {

var actionType = $('#btn-save').val();

$('#btn-save').html('Sending..');

$.ajax({

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

url: "{{ route('ajax-posts.store') }}",

type: "POST",

dataType: 'json',

success: function (data) {

var post = '<tr id="post_id_' + data.id + '"><td>' + data.id + '</td><td>' + data.title + '</td><td>' + data.body + '</td>';

post += '<td><a href="javascript:void(0)" id="edit-post" data-id="' + data.id + '" class="btn btn-info">Edit</a></td>';

post += '<td><a href="javascript:void(0)" id="delete-post" data-id="' + data.id + '" class="btn btn-danger delete-post">Delete</a></td></tr>';

if (actionType == "create-post") {

$('#posts-crud').prepend(post);

} else {

$("#post_id_" + data.id).replaceWith(post);

}

$('#postForm').trigger("reset");

$('#ajax-crud-modal').modal('hide');

$('#btn-save').html('Save Changes');

error: function (data) {

console.log('Error:', data);

$('#btn-save').html('Save Changes');

}

});

}

})

}

</script>

Create Resource Routes

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

routes/web.php

Route::resource('ajax-posts', 'ajaxcrud\AjaxPostController');

1	Route::resource('ajax-posts', 'ajaxcrud\AjaxPostController');

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-posts

Output:-

laravel-5-8-ajax-crud-application-2

Click “Add New Post” to submit new post.

laravel-5-8-ajax-crud-application-1

Click “Edit” button to edit corresponding post.

laravel-5-8-ajax-crud-application-3

Click “Delete” button to delete corresponding post.

Laravel 5.8 Ajax CRUD Using Datatables

Leave a reply

Laravel 5.8 Ajax CRUD Using Datatables

In this tutorial, you will learn to implement ajax based CRUD (Create, Read, Update and Delete) operations using datatable js. In this tutorial, we will be using yajra datatable package for listing of records with pagination, sorting and filter (search) feature.

In this step by step guide, we will be creating a simple laravel 5.8 application to demonstrate you how to install yajra datatable package and implement ajax based CRUD operations with datatable js.

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

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()
    {
        if(request()->ajax())
            {
                return datatables()->of(Post::latest()->get())
                        ->addColumn('action', function($data){
                        $button = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$data->id.'" data-original-title="Edit" class="edit btn btn-success edit-post">Edit</a>';
                        $button .= '&nbsp;&nbsp;';
                        $button .= '<a href="javascript:void(0);" id="delete-post" data-toggle="tooltip" data-original-title="Delete" data-id="'.$data->id.'" class="delete btn btn-danger">   Delete</a>';
                        return $button;
                        })
                        ->rawColumns(['action'])
                        ->make(true);
            }
            return view('dtable.index');
    }
     
     
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {  
        $postId = $request->post_id;
        $post   =   Post::updateOrCreate(['id' => $postId],
                    ['title' => $request->title, 'body' => $request->body]);        
        return Response::json($post);
    }
     
    /**
     * Show the form for editing the specified resource.
     *
     */
    public function edit($id)
    {   
        $where = array('id' => $id);
        $post  = Post::where($where)->first();
     
        return Response::json($post);
    }
     
     
    /**
     * Remove the specified resource from storage.
     *
     */
    public function destroy($id)
    {
        $post = Post::where('id',$id)->delete();
     
        return Response::json($post);
    }
}

<?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()

{

if(request()->ajax())

{

return datatables()->of(Post::latest()->get())

->addColumn('action', function($data){

$button = '<a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$data->id.'" data-original-title="Edit" class="edit btn btn-success edit-post">Edit</a>';

$button .= '  ';

$button .= '<a href="javascript:void(0);" id="delete-post" data-toggle="tooltip" data-original-title="Delete" data-id="'.$data->id.'" class="delete btn btn-danger"> Delete</a>';

return $button;

})

->rawColumns(['action'])

->make(true);

}

return view('dtable.index');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$postId = $request->post_id;

$post = Post::updateOrCreate(['id' => $postId],

['title' => $request->title, 'body' => $request->body]);

return Response::json($post);

}

/**

* Show the form for editing the specified resource.

public function edit($id)

{

$where = array('id' => $id);

$post = Post::where($where)->first();

return Response::json($post);

}

/**

* Remove the specified resource from storage.

public function destroy($id)

{

$post = Post::where('id',$id)->delete();

return Response::json($post);

}

Create Blade / View Files

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

resources/views/dtable/index.blade.php

<!DOCTYPE html>
 
<html lang="en">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 5.8 Ajax CRUD Using Datatables - 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 Ajax CRUD Using Datatables - W3Adda</h2>
<br>
<a href="javascript:void(0)" class="btn btn-info ml-3" id="add-new-post">Add New Post</a>
<br><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>
         <th>Action</th>
      </tr>
   </thead>
</table>
</div>
 
<div class="modal fade" id="ajax-crud-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="postCrudModal"></h4>
    </div>
    <div class="modal-body">
        <form id="postForm" name="postForm" class="form-horizontal">
           <input type="hidden" name="post_id" id="post_id">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="title" name="title" value="" required="">
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-2 control-label">Body</label>
                <div class="col-sm-12">
                    <input class="form-control" id="body" name="body" value="" required="">
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary" id="btn-save" value="create">Save
             </button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        
    </div>
</div>
</div>
</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: "{{ route('dtable-posts.index') }}",
        type: 'GET',
       },
       columns: [
                { data: 'id', name: 'id', 'visible': false},
                { data: 'title', name: 'title' },
                { data: 'body', name: 'body' },
                { data: 'created_at', name: 'created_at' },
                {data: 'action', name: 'action', orderable: false},
             ],
      order: [[0, 'desc']]
});
 
$('#add-new-post').click(function () {
    $('#btn-save').val("create-post");
    $('#post_id').val('');
    $('#postForm').trigger("reset");
    $('#postCrudModal').html("Add New Post");
    $('#ajax-crud-modal').modal('show');
});
 
   
$('body').on('click', '.edit-post', function () {
  var post_id = $(this).data('id');
  $.get('dtable-posts/'+post_id+'/edit', function (data) {
     $('#name-error').hide();
     $('#email-error').hide();
     $('#postCrudModal').html("Edit Post");
      $('#btn-save').val("edit-post");
      $('#ajax-crud-modal').modal('show');
      $('#post_id').val(data.id);
      $('#title').val(data.title);
      $('#body').val(data.body);
  })
});
    
$('body').on('click', '#delete-post', function () {
  var post_id = $(this).data("id");
  confirm("Are You sure want to delete !");
  $.ajax({
      type: "get",
      url: "dtable-posts/destroy/"+post_id,
      success: function (data) {
      var oTable = $('#laravel_datatable').dataTable(); 
      oTable.fnDraw(false);
      },
      error: function (data) {
          console.log('Error:', data);
      }
  });
});   
});
 
if ($("#postForm").length > 0) {
  $("#postForm").validate({
      submitHandler: function(form) {
      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');
    
      $.ajax({
          data: $('#postForm').serialize(),
          url: "{{ route('dtable-posts.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
               $('#postForm').trigger("reset");
              $('#ajax-crud-modal').modal('hide');
              $('#btn-save').html('Save Changes');
              var oTable = $('#laravel_datatable').dataTable();
              oTable.fnDraw(false);
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
          }
      });
    }
  })
}
</script>

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

<!DOCTYPE html>

<head>

<title>Laravel 5.8 Ajax CRUD Using Datatables - W3Adda</title>

</head>

<body>

<h2>Laravel 5.8 Ajax CRUD Using Datatables - W3Adda</h2>

<br>

<thead>

<tr>

<th>Title</th>

<th>Created at</th>

<th>Action</th>

</tr>

</thead>

</table>

</div>

</div>

<label for="name" class="col-sm-2 control-label">Title</label>

</div>

</div>

<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save

</button>

</div>

</form>

</div>

</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: "{{ route('dtable-posts.index') }}",

type: 'GET',

columns: [

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

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

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

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

{data: 'action', name: 'action', orderable: false},

order: [[0, 'desc']]

});

$('#add-new-post').click(function () {

$('#btn-save').val("create-post");

$('#post_id').val('');

$('#postForm').trigger("reset");

$('#postCrudModal').html("Add New Post");

$('#ajax-crud-modal').modal('show');

});

$('body').on('click', '.edit-post', function () {

var post_id = $(this).data('id');

$.get('dtable-posts/'+post_id+'/edit', function (data) {

$('#name-error').hide();

$('#email-error').hide();

$('#postCrudModal').html("Edit Post");

$('#btn-save').val("edit-post");

$('#ajax-crud-modal').modal('show');

$('#post_id').val(data.id);

$('#title').val(data.title);

$('#body').val(data.body);

})

});

$('body').on('click', '#delete-post', function () {

var post_id = $(this).data("id");

confirm("Are You sure want to delete !");

$.ajax({

type: "get",

url: "dtable-posts/destroy/"+post_id,

success: function (data) {

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function (data) {

console.log('Error:', data);

}

});

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

$("#postForm").validate({

submitHandler: function(form) {

var actionType = $('#btn-save').val();

$('#btn-save').html('Sending..');

$.ajax({

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

url: "{{ route('dtable-posts.store') }}",

type: "POST",

dataType: 'json',

success: function (data) {

$('#postForm').trigger("reset");

$('#ajax-crud-modal').modal('hide');

$('#btn-save').html('Save Changes');

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function (data) {

console.log('Error:', data);

$('#btn-save').html('Save Changes');

}

});

}

})

}

</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::resource('dtable-posts', 'dtable\AjaxCrudController');
Route::get('dtable-posts/destroy/{id}', 'dtable\AjaxCrudController@destroy');

1 2	Route::resource('dtable-posts', 'dtable\AjaxCrudController'); Route::get('dtable-posts/destroy/{id}', 'dtable\AjaxCrudController@destroy');

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

php artisan serve

1	php artisan serve

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

http://localhost:8000/dtable-posts

Output:-

laravel-5-8-ajax-crud-using-datatanles-3 Click “Add New Post” to submit new post.

laravel-5-8-ajax-crud-using-datatanles-1 Click “Edit” button to edit corresponding post.

laravel-5-8-ajax-crud-using-datatanles-2

Click “Delete” button to delete corresponding post.

Laravel 5.8 Installation

Leave a reply

Laravel 5.8 Installation

Download and install Laravel 5.8 using the below command. Make sure you have composer installed.

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

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

Now, lets switch to the project directory and start the development server using following artisan command –

php artisan serve

1	php artisan serve

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

http://localhost:8000/

Output:-

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

In case if you get RuntimeException No application encryption key has been specified error, please follow instruction given below to generate application key –

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

Connecting Laravel with MySQL Database

In order to connect your laravel application to a MySQL database. Lets create a MySQL database set database credential in application’s .env file.

.env

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara58blog

DB_USERNAME=root

DB_PASSWORD=

Migrations

Before we run “php artisan migrate” command, location the file “app/Providers/AppServiceProvider” file, and add following line of code in 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 your “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()

{

}

After installing laravel, some default migration files are created inside “database/migrations” directory. Now, lets run the “php artisan migrate” command for creating default create users table and password reset table.

php artisan migrate

1	php artisan migrate

Restart Development Server

Restart the development server using following artisan command –

php artisan serve

1	php artisan serve

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

http://localhost:8000/

Output:-

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