Laravel Shared Data

Programming
blog post

Pada kesempatan ini saya akan membagikan cara bagaimana berbagi data dari Backend ke Javascript. Kenapa saya sebut Backend , sebab kita dapat membagikan data apa pun yang inginkan dari bagian mana pun pada aplikasi kita ( middleware, controller, service provider, dll ).

Baiklah, pertama-tama kita harus menginstal paket melalui composer, silahkan ketik perintah berikut pada root projek rekan2 sekalian,

composer require coderello/laravel-shared-data

Setelah paket berhasil di instal, seperti biasa untuk memudahkan konfigurasi dan ingin merubah namespace nya, kita bisa publish paket tersebut dengan perintah berikut ini,

php artisan vendor:publish --provider="Coderello\SharedData\Providers\SharedDataServiceProvider" --tag="config"

Sekarang kita bisa membagikan data kita melalui Facade ataupun Helper. Sebagai contoh silahkan rekan2 sekalian perhatikan script di bawah ini, seperti yang saya sebutkan sebelumnya untuk penulisan script ini bisa di lakukan di Controller, Middleware , service provider, atau mungkin custom Helper dari aplikasi rekan2 sekalian .

use Coderello\SharedData\Facades\SharedData; 

// menggunakan  facade
SharedData::put([
  'user' => auth()->user(),
  'post' => Post::first(),
  'app' => [
        'name' => config('app.name'),
        'environment' => config('app.env'),
  ]
]);

// menggunakan helper
share([
  'user' => auth()->user(),
  'post' => Post::first(),
  'app' => [
        'name' => config('app.name'),
        'environment' => config('app.env'),
    ]
]);

Tahapan selanjutnya adalah kita akan memanggil script tersebut malalui Javascript di bagian frontend / view.

Tapi sebelum itu, silahkan buka file layout rekan2 sekalian ( Default Laravel ada di folder views/layouts/app.blade.php) dan tambahkan kode berikut ini @shared dibagian header sebelum semua asset atau script lainnya di load, kira2 seperti ini. 

Setelah itu, rekan2 sekalian bisa melakukan pemanggilan data yang telah di buat sebelumnya di Backend pada halaman manapun yang diinginkan,  cukup menuliskan kode singkat seperti ini window.sharedData.

// Contoh,
console.log(window.sharedData);

Sekian dulu artikel ini saya tulis, mudah2n bisa bermanfaat bagi kita semua. Jika ada yang kurang paham, untuk dokumentasi lengkapnya rekan2 dapat cek disini

Wassalmualaikum.wr.wb.

  • Share