Ajax Pagination In Laravel 6

 Ajax Pagination In Laravel 6

laravel 6 ajax pagination with jquery, laravel 6 pagination json, jquery ajax pagination in laravel 6, laravel 6 ajax bootstrap pagination, pagination jquery ajax laravel 6, laravel 6 pagination ajax,laravel 6 pagination ajax example,ajax pagination in laravel 6

Hi guys

In this tutorial,I will explain you how to create jquery ajax pagination in laravel 6, we will create ajax pagination in laravel 6. i will show a step by step simple ajax pagination in laravel 6.

A pagination helps us to load few records every time, that way cannot broken web page due to lots of data. If you are making pagination and do it using ajax then it a better way. Ajax Pagination load only your table data instead of the whole page. So ajax pagination is very helpful.

we simply create "product" table using migration command and add some dummy records. After that, we will create one route for display view and write code jquery ajax on blade file. So, you have to just follow below step and you will get simply ajax pagination in laravel 6

Here i give you full example of ajax pagination example step by step like create laravel 6 project, migration, model, route, blade file etc. So you have to just follow few steps.

Link :- https://www.nicesnippets.com/blog/laravel-6-ajax-pagination-example

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Laravel 6 Ajax CRUD Tutorial

Laravel 6  Ajax CRUD Tutorial

laravel 6 yajra datatable crud example, ajax crud operations in laravel 6 with modal & pagination, laravel 6 ajax crud example, laravel 6 datatable ajax crud, laravel 6 c.r.u.d. with modals & ajax, insert update delete record with ajax in laravel 6

Hi Guys

In this tutorial,I will show the ajax crud in laravel 6.we will explain ajax crud in laravel 6 . we will simply write jquery ajax request for crud with yajra datatable laravel 6. i will guide you step by step ajax crud operations in laravel 6 with modal & pagination. we will create jquery ajax crud with modals using datatables js in laravel 6.

We will use bootstrap modal for create new records and update new records. we will use resource routes to create crud (create read update delete) application in laravel 6.We will use yajra datatable to list a records with pagination, sorting and filter.

Link ;- https://www.nicesnippets.com/blog/ajax-crud-laravel-6-tutorial

Laravel 6 Ajax Request Tutorial

Laravel 6 Ajax Request Tutorial

In this post, you'll learn how to write jquery ajax form submit in Laravel 6. We will write Jquery Ajax post request Laravel 6. We will protect csrf token with Ajax request in Laravel 6. I will give you very simple example of Laravel 6 Ajax post request tutorial.

You can easily use Ajax get request, Ajax post request, Ajax put request, Ajax delete request ect with Laravel 6.

Ajax request is a basic requirement of any PHP project, we are always looking for without page refresh data should store in database and it's possible only by Jquery Ajax request. same thing if you need to write ajax form submit in Laravel 6 then i will help you how you can pass data with ajax request and get on controller.

If you want to add ajax request with validation then you can follow this article: Laravel 6 Ajax Form Validation

You have to just do three things to understand how to use ajax request in Laravel 6, so just follow this three step and you will learn how to use Ajax request in your Laravel 6 application.

Step 1: Create Routes

First thing is we put two routes in one for displaying view and another for post Ajax. So simple add both routes in your route file.

routes/web.php

Route::get('ajaxRequest', '[email protected]');
Route::post('ajaxRequest', '[email protected]')->name('ajaxRequest.post');

Step 2: Create Controller

Same things as above for routes, here we will add two new method for routes. One will handle view layout and another for post ajax request method, so let's add bellow:

app/Http/Controllers/HomeController.php

<?php

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

class AjaxController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function ajaxRequest()
{
return view('ajaxRequest');
}

/**
 * Create a new controller instance.
 *
 * @return void
 */
public function ajaxRequestPost(Request $request)
{
    $input = $request-&gt;all();
    \Log::info($input);

    return response()-&gt;json(['success'=&gt;'Got Simple Ajax Request.']);
}

}

Read Also: Laravel 6 CRUD Application Tutorial

Step 3: Create Blade File

Finally we require to create ajaxRequest.blade.php file and here we will write code of jquery ajax and pass Laravel token. So blade file is very important in ajax request. So let's see bellow file:

resources/views/ajaxRequest.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 6 Ajax Request example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>

&lt;div class="container"&gt;
    &lt;h1&gt;Laravel 6 Ajax Request example&lt;/h1&gt;

    &lt;form &gt;

        &lt;div class="form-group"&gt;
            &lt;label&gt;Name:&lt;/label&gt;
            &lt;input type="text" name="name" class="form-control" placeholder="Name" required=""&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;label&gt;Password:&lt;/label&gt;
            &lt;input type="password" name="password" class="form-control" placeholder="Password" required=""&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;strong&gt;Email:&lt;/strong&gt;
            &lt;input type="email" name="email" class="form-control" placeholder="Email" required=""&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;button class="btn btn-success btn-submit"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;

    &lt;/form&gt;
&lt;/div&gt;

</body>
<script type="text/javascript">

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

$(".btn-submit").click(function(e){

    e.preventDefault();

    var name = $("input[name=name]").val();
    var password = $("input[name=password]").val();
    var email = $("input[name=email]").val();

    $.ajax({
       type:'POST',
       url:"{{ route('ajaxRequest.post') }}",
       data:{name:name, password:password, email:email},
       success:function(data){
          alert(data.success);
       }
    });

});

</script>

</html>

Now you can run your example and see.

You will get output like as bellow:

Output

[2019-09-17 03:54:19] local.INFO: array (
'name' => 'Hardik Savani',
'password' => '123456',
'email' => '[email protected]',
)

I hope it can help you

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Further reading

☞ Tutorial Laravel 6 with Docker and Docker-Compose

☞ Laravel 6 CRUD Application Tutorial

☞ What's New in Laravel 6.0?

Originally published https://itsolutionstuff.com


How to image upload using Ajax in Laravel 6

How to image upload using Ajax in Laravel 6

In this post, you will learn how to image upload using Ajax in Laravel 6 App. I write simple tutorial of Laravel 6 Ajax image upload with validation. We will use Jquery form js for Ajax image upload in Laravel 6.

Here I give you full example of Ajax image uploading step by step like create laravel project, migration, model, route, blade file etc. So you have to just follow few steps.

Not issue if you don't know laravel because it is from scratch. After complete this example you will find bellow as like preview, so let's start.

Step 1 : Install Laravel 6 Application

we are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2 : Database Configuration

In this step, we require to make database configuration, you have to add following details on your .env file.

1.Database Username

1.Database Password

1.Database Name

In .env file also available host and port details, you can configure all details as in your system, So you can put like as bellow:

.env

DB_HOST=localhost

DB_DATABASE=homestead

DB_USERNAME=homestead

DB_PASSWORD=secret

Read Also: Laravel 6 Ajax CRUD Operations Tutorial

Step 3: Create ajax_images Table and Model

In this step we have to create migration for ajax_images table using Laravel 5.3 php artisan command, so first fire bellow command:

php artisan make:migration create_ajax_image_tabel

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

<?php


use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;


class CreateAjaxImageTabel extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

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

            $table->bigIncrements('id');

            $table->string('title');

            $table->string('image');

            $table->timestamps();

        });

    }


    /**

     * Reverse the migrations.

     *

     * @return void

     */

    public function down()

    {

        Schema::drop("ajax_images");

    }

}

Now we require to run migration be bellow command:

php artisan migrate

After create "ajax_images" table you should create AjaxImage model for categories. So first we have to run bellow laravel artisan command for create AjaxImage model:

php artisan make:model AjaxImage

Now, you can see new file on this path app/AjaxImage.php and put bellow content in item.php file:

app/AjaxImage.php

<?php


namespace App;


use Illuminate\Database\Eloquent\Model;


class AjaxImage extends Model

{

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    protected $fillable = [

        'title', 'image'

    ];

}
Step 4: Create Route

In this is step we need to create route for ajax image upload layout file and another one for post request. so open your routes/web.php file and add following route.

routes/web.php

Route::get('ajaxImageUpload', '[email protected]');

Route::post('ajaxImageUpload', '[email protected]')->name('ajaxImageUpload');
Step 5: Create Controller

In this point, now we should create new controller as AjaxImageUploadController in this path app/Http/Controllers/AjaxImageUploadController.php. this controller will manage layout and image validation with post request, So run bellow command for generate new controller:

php artisan make:controller AjaxImageUploadController

Ok, now put bellow content in controller file:

app/Http/Controllers/AjaxImageUploadController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;

use Validator;

use App\AjaxImage;


class AjaxImageUploadController extends Controller

{

	/**

     * Show the application ajaxImageUpload.

     *

     * @return \Illuminate\Http\Response

     */

    public function ajaxImageUpload()

    {

    	return view('ajaxImageUpload');

    }


    /**

     * Show the application ajaxImageUploadPost.

     *

     * @return \Illuminate\Http\Response

     */

    public function ajaxImageUploadPost(Request $request)

    {

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

        'title' => 'required',

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

      ]);


      if ($validator->passes()) {


        $input = $request->all();

        $input['image'] = time().'.'.$request->image->extension();

        $request->image->move(public_path('images'), $input['image']);


        AjaxImage::create($input);


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

      }


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

    }

}
Step 6: Create View

In Last step, let's create ajaxImageUpload.blade.php(resources/views/ajaxImageUpload.blade.php) for layout and we will write design code here and also form for ajax image upload, So put following code:

resources/views/ajaxImageUpload.blade.php

<!DOCTYPE html>

<html>

<head>

	<title>Laravel 5 - Ajax Image Uploading Tutorial</title>

	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

	<script src="http://malsup.github.com/jquery.form.js"></script>

</head>

<body>


<div class="container">

  <h1>Laravel 5 - Ajax Image Uploading Tutorial</h1>


  <form action="{{ route('ajaxImageUpload') }}" enctype="multipart/form-data" method="POST">


  	<div class="alert alert-danger print-error-msg" style="display:none">

        <ul></ul>

    </div>


    <input type="hidden" name="_token" value="{{ csrf_token() }}">


    <div class="form-group">

      <label>Alt Title:</label>

      <input type="text" name="title" class="form-control" placeholder="Add Title">

    </div>


	<div class="form-group">

      <label>Image:</label>

      <input type="file" name="image" class="form-control">

    </div>


    <div class="form-group">

      <button class="btn btn-success upload-image" type="submit">Upload Image</button>

    </div>


  </form>


</div>


<script type="text/javascript">

  $("body").on("click",".upload-image",function(e){

    $(this).parents("form").ajaxForm(options);

  });


  var options = { 

    complete: function(response) 

    {

    	if($.isEmptyObject(response.responseJSON.error)){

    		$("input[name='title']").val('');

    		alert('Image Upload Successfully.');

    	}else{

    		printErrorMsg(response.responseJSON.error);

    	}

    }

  };


  function printErrorMsg (msg) {

	$(".print-error-msg").find("ul").html('');

	$(".print-error-msg").css('display','block');

	$.each( msg, function( key, value ) {

		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');

	});

  }

</script>


</body>

</html>

Make sure you have to create "images" folder in your public directory.

Now we are ready to run our example so run bellow command so quick run:

php artisan serve

Now you can open bellow URL on your browser:

Read Also: Laravel 6 Authentication Tutorial

http://localhost:8000/ajaxImageUpload

I hope it can help you...