Laravel Ajax Kullanımı [VİDEOLU] | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

Laravel Ajax Kullanımı

Bu makalede sizlere, Laravel'in son sürümünde ajax kullanımıyla ilgili birkaç detay paylaşmak istiyorum. Bu makalede şunları öğrenmiş olacağız;

Npm kullanımı
Laravel Mix Asset Manager kullanımı
Artisan ile Laravel'i ayağa kaldırma
Artisan ile Controller oluşturma
Laravel CSRF tokenı

Adım 0 - Laraveli ayağa kaldırma

Her şeyden önce laravel'i ayağa kaldırmak için şu komutu kullanın;

php artisan serve

Artık http://127.0.0.1:8000 adresinden giriş yaparak testinizi yapıp başlayabilirsiniz.

Adım 1 - Gerekli NPM ayarlarının yapılması

Laraveli yeni kurduysanız ve daha önce npm ile paketleri yüklemediyseniz ilk olarak bununla paylaşaım. Aşağıdaki komut ile paketleri yükleyelim.

npm install

Daha sonra ajax işlemlerinde jquery kullanacağımız için jquery'de npm ile şu şekilde yükleyelim;

npm i jquery

Artık Laravel'in mix asset managerını kullanmaya hazırız. Özünde aslında yaptığı iş webpack'i kullanarak dosyalarımızı resource altından public altına belli işlemler yaparak atmak. Laravel kurulduğunda js ve sass dosyaları otomatik olarak yapılıyor ekstra bir ayar yapmanıza gerek yok. Tek yapmanız gereken şu komutu çalıştırarak değişiklikleri izlemek;

npm run watch

NPM ile ilgili yapacaklarımız bu kadar, artık resources/js ve resources/sass altındaki dosyalarımızda değişiklik yaptığımızda otomatik olarak bu algılanacak ve public altına çıkartılacak.

Adım 2 - Asset dosyalarının view'lara eklenmesi

Bunun içinde mix() fonksiyonunu kullanacağız. Oluşturduğunuz layout blade template'inizde <head> etiketinde uygun bir yere şunları ekleyin;

<head>
    ..
    <script src="{{ mix('js/app.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
    ..
</head>

Editörde Görüntüle

Adım 3 - Ajax controller dosyasının oluşturulması

Bunun için artisan komutunu çalıştırmamız yeterli.

php artisan make:controller AjaxController

Bu da bize app/Http/Controllers altında AjaxController.php adında bir php dosyası oluşturuyor. Bunu düzenlemek üzere açın ve public bir metod tanımlayın aşağıdaki gibi.

public function index()
{
        return response()->json([
            'name' => 'Tayfun',
            'surname' => 'Erbilen'
        ], 200);
}

Bu controllerı kullanmak üzere route'a eklememiz gerekiyor. routes/web.php dosyasını açın ve şunu ekleyin;

Route::post('/ajax', 'AjaxController@index')->name('ajax');

Artık ajax işlemleri için bir route'muz var ve kullanmaya hazırız.

Adım 4 - Ajax isteğini gerçekleştirelim

Evet artık resources/js/app.js dosyamızı açıyoruz ve jquery kütüphanemizi dahil edip bir istek atıyoruz. Ama ondan önce, istek atacağımız url'i yine layout sayfamızda head etiketleri içine yazmamız gerekiyor. Ayrıca isteklerde token göndermemiz gerekiyor, bu ikisini Adım 2 de uyguladığımız yere yerleştiriyoruz.

<script>
    let ajax_url = "{{ route('ajax') }}",
        token = "{{ csrf_token() }}";
</script>

Editörde Görüntüle

Ve artık app.js dosyamızı açalım ve şu kodları yazalım.

import $ from "jquery"

$(function () {
    
    $.post(ajax_url, {_token: token}, function(response){
        console.log(response);
    }, 'json');
    
});

Sonuç olarak bize controller dosyasında gönderdiğimiz ad-soyad bilgisini obje halinde geriye döndürecek. Yani evet, başarılı bir şekilde ajaxı kullanmayı başardık.

Adım 5 - Ajax isteğinde gönderilen datalara erişmek

Bunun için yine bir üst adımdaki kodumuzu şöyle değiştirelim;

let data = {
    _token: token,
    name: "Tayfun",
    surname: "Erbilen",
    web: "https://prototurk.com"
}
$.post(ajax_url, data, function(response){
    console.log(response);
}, 'json');

Ve AjaxController dosyamızda Request sınıfını kullanmamız gerekiyor. Yani şöyle değiştirelim;

public function index(Request $request)
{

    $datas = $request->all(); // Tüm gönderilenleri dizi halinde alır
    
    $web = $request->input('web'); // web ismiyle gönderilen datayı alır

    return response()->json([
        'name' => 'Tayfun',
        'surname' => 'Erbilen'
    ], 200);
}

Tabi Request sınıfını kullanmak için namespace in altına şunu belirtmemiz gerekiyor;

use IlluminateSupportFacadesDB;

Adım 6 - Veritabanından veri çekmek

Bu aslında zorunlu bir adım değil ancak, veritabanından veri çekip ajax isteğinde geri döndürmek isteseydik, o zaman önce .env dosyamızı açıp şuraları kendimize göre doldurmamız gerekiyordu.

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

Daha sonra artık AjaxController dosyamızda şu şekilde bir kullanım yapabiliriz;

public function index()
{
    $users = DB::table('uyeler')->limit(20)->get();
    return response()->json($users, 200);
}

Tabi yine bunun için de namespace den sonra şu tanımı eklemeniz gerekiyor.

use IlluminateSupportFacadesDB;

Hepsi bu kadar, daha fazlası için videoya gözatabilirsiniz :)