Bu yazıda size laravel 11 uygulamasında jquery ajax sayfalandırmasının nasıl ekleneceğini göstereceğim.

Bildiğiniz gibi sayfalandırma, herhangi bir yönetici panelinin, ERP'nin veya arka uç panelinin çok temel bir gereksinimidir. Sayfalandırma, her seferinde birkaç kayıt yüklememize yardımcı olur ve böylece çok fazla veri nedeniyle web sayfasının bozulmasının önüne geçer. Sayfalandırmayı uyguluyorsanız ve bunu jQuery AJAX kullanarak sayfalama yaparsanız, bu süreç daha verimli olur. Sadece tablo verilerini yükler, böylece sayfa yeniden yüklenmez.

 

Bu yazıda, bir Laravel uygulamasında çok basit bir AJAX sayfalandırma örneği sunuyorum. Bu örnekte bir öğeler tablosu oluşturacağız ve ona bazı veriler ekleyeceğiz. Daha sonra tüm kayıtları sayfalandırmayla listeleyeceğiz. Sayfalandırma verilerini almak için jQuery AJAX kodunu yazacağız.

İzlenecek adımlar:

Adım 1: Laravel 11 Kurulumu

Öncelikle sıfırdan başlayacağımız için aşağıdaki komutu kullanarak yeni bir Laravel 11 versiyon uygulaması almamız gerekiyor. Bunun için aşağıdaki komutu kullanarak terminal veya komut istemcisini açın ve çalıştırın:

composer create-project laravel/laravel example-app

Bu komut, "example-app" adlı yeni bir Laravel projesi oluşturacaktır. Bu adımdan sonra uygulamayı geliştirmeye başlayabilirsiniz.

Adım 2: MySQL Veritabanı Yapılandırması

Laravel 11'de varsayılan veritabanı bağlantısı SQLite kullanır, ancak MySQL kullanmak istiyorsak, .env dosyasına veritabanı adı, kullanıcı adı ve şifre ile birlikte bir MySQL bağlantısı eklememiz gerekir.

.env

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

Adım 3: Ürün Tablosu ve Model Oluşturma

Bu adımda, ürünler tablosu için bir migration oluşturmanız gerekiyor. Bunun için Laravel'in php artisan komutunu kullanacağız. İlk olarak, aşağıdaki komutu çalıştırın:

php artisan make:migration create_items_table

Bu komuttan sonra, database/migrations yolunda bir dosya bulacaksınız ve ürünler tablosunu oluşturmak için migration dosyanıza aşağıdaki kodu eklemeniz gerekiyor.

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

Şimdi, migration komutunu çalıştıralım:

php artisan migrate

"items" tablosunu oluşturduktan sonra, ürünler için bir Item modeli oluşturmanız gerekiyor. İlk olarak, app/Models/Item.php yolunda bir dosya oluşturun ve Item.php dosyasına aşağıdaki içeriği ekleyin:

app/Models/Item.php

 

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    use HasFactory;

    protected $fillable = [
        'title', 'description'
    ];
}

Adım 4: Rota Oluşturma

Bu adımda, ürün listeleme için rotalar oluşturmanız gerekiyor. Bu yüzden routes/web.php dosyanızı açın ve aşağıdaki rotayı ekleyin.

routes/web.php

 

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\PaginationController;
  
Route::get('ajax-pagination', [PaginationController::class, 'index'])->name('ajax.pagination');

Bu adımda, biri düzen için diğeri veri için olmak üzere iki görünüm dosyası oluşturmanız gerekiyor. Şimdi, app/Http/Controllers/PaginationController.php yolunda PaginationController adında yeni bir Controllers oluşturmalısınız. Bu Controllers, tüm listeleme öğelerini ve öğe AJAX isteklerini yönetecek ve yanıtları döndürecektir. Bu yüzden Controllers dosyasına aşağıdaki içeriği ekleyin:

app/Http/Controllers/PaginationController.php

 

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Item;
use Illuminate\View\View;
  
class PaginationController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(Request $request): View
    {
        $items = Item::paginate(5);
  
        if ($request->ajax()) {
            return view('data', compact('items'));
        }
  
        return view('items',compact('items'));
    }
}

Adım 6: Görünüm Oluşturma

Son adımda, resources/views/items.blade.php yolunda items.blade.php dosyasını oluşturun ve tüm öğeleri listelemek için aşağıdaki kodu ekleyin:

resources/views/items.blade.php

 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Ajax Pagination Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 Ajax Pagination Example</h3>
        <div class="card-body" id="item-lists"> 
            @include('data')
        </div>
    </div>
</div>
  
<script type="text/javascript">

$(document).ready(function(){

    $(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');
            if (page == Number.NaN || page <= 0) {
                return false;
            }else{
                getData(page);
            }
        }
    });

    $(document).on('click', '.pagination a',function(event)
    {
        $('li').removeClass('active');
        $(this).parent('li').addClass('active');
        event.preventDefault();
  
        var myurl = $(this).attr('href');
        var page=$(this).attr('href').split('page=')[1];
  
        getData(page);
    });
  
    function getData(page){
        $.ajax({
            url: '?page=' + page,
            type: "get",
            datatype: "html",
        })
        .done(function(data){
            $("#item-lists").empty().html(data);
            location.hash = page;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError){
              alert('No response from server');
        });
    }
});

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

resources/views/data.blade.php

 

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>          
        </tr>
    </thead>
    <tbody>
        @foreach ($items as $item)
        <tr>
            <td>{{ $item->title }}</td>
            <td>{{ $item->description }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

{!! $items->links('pagination::bootstrap-5') !!}

Gerekli adımlar tamamlandı, şimdi aşağıdaki komutu yazıp Enter tuşuna basarak Laravel uygulamanızı çalıştırın:

php artisan serve

Şimdi, web tarayıcınıza gidin, verilen URL'yi yazın ve uygulamanın çıktısını görüntüleyin:

http://localhost:8000/ajax-pagination