Membuat Kategori Tree berjenjang pada laravel 8

 Pada awalnya awalnya saya membutuhkan kategori berjenjang yang mudah. Akhirnya saya ketemu dengan laravel-nestedset yang menurut saya sangat membantu sekali. Jadi case-nya seperti ini misal saya membuat kategori seperti ini

HP

    - Samsung

    - Iphone

BUKU

    - Komik

        - Humor

        - Serem

        - Romansa

    - Tutorial

Nah misal saya membuat tabel produk, dan satu produk memiliki satu kategori, Maka akan sangat kesulitan apa bila saya ingin menampilkan semua produk yang ada dalam kategori BUKU,

Nah Package lazychaser/laravel-nestedset ini menjawab hal tersebut,, mungkin untuk pembuatannya temen - temen bisa menginstallnya sesuai github berikut

https://github.com/lazychaser/laravel-nestedset

Gak perlu lah saya menjelaskan cara install dan konfigurasinya karena didalam link diatas udah luengkaps bangetss penggunaanya. So disini saya akan membuat tutorial gimana kategori tersebut disajikan dengan apik menggunakan jstree, kira2 seperti ini penampakannya

Disini saya menggunakan component aja ya,, untuk apa itu component dalam laravel silahkan anda googling di tempat lain. Saya menggunakan component karena dengan mudah bisa di panggil di halaman yang lain.

Pertama untuk databasenya kita buat migrationnya seperti ini ya... 

 php artisan make:model Master/Category -m 

Misal file modelnya saya taruh di folder master,, 

Kedua isi migrationnya dengan ini, harus persis yaa.. soalnya ntar jstree nya gak jalan kalau gak persis

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

use Kalnoy\Nestedset\NestedSet;

class CreateCategoriesTable extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

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

            $table->bigIncrements('id');

            $table->string('text');

            NestedSet::columns($table);

            $table->timestamps();

        });

    }

    public function down()

    {

        Schema::dropIfExists('categories');

    }

}

Ketiga buat dulu component kategori dengan cara :

php artisan make:component Kategori

So tercipta controller component kategori di folder App\View\Component\Kategori.php

Kemudian isikan file tersebut seperti ini :

<?php

namespace App\View\Components;

use App\Models\Master\Category;

use Illuminate\View\Component;

class Kategori extends Component

{

    public function __construct()

    {

        //

    }

    public function render()

    {

        $tree = Category::get()->toTree();

        return view('components.kategori', compact('tree'));

    }

}

So disini saya udah bikin model yang bernama category ya,, agar bisa nyambung dengan js tree maka 

Category::get()->toTree(); ini lah jawabannya

Kemudian pada viewnya data tree tersebut kita tampilkan pada textarea yang saya hidden, kemudian dengan jQuery data dari textarea tersebut ditampilkan kedalam div dengan id jstree

Untuk viewnya ada pada resources/view/component/kategori.blade.php

Berikut isinya :

  

  @section('css')

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

  @endsection

  <div id="jstree"></div>

  <textarea id='txt_folderjsondata' style="display:none;"> {!! $tree !!}</textarea>

  

  @push('js')

  {{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --}}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

  <script type="text/javascript">

      $(document).ready(function(){

        var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

        // console.log(folder_jsondata);

        var $treeview = $("#jstree");

        var node = $("#node").val() + '_anchor';

        $treeview.jstree({ 

          'core' : {

            'data' : folder_jsondata,

            },

          })

          .on('loaded.jstree', function() {

              $treeview.jstree('open_all');

              $treeview

        .jstree(true)

        .select_node(node);

          })

          ;

      });

  </script>

  @endpush

 Tuh terlihat text areanya aku display none,, kemudian pada javascriptnya data pada textarea tersebut dijadikan jstree pada div. Untuk Jquery itu saya disable/komentar karena di template yang saya gunakan udah ada jquerynya,, kalau saya aktifkan ntar bentrok

Okkay sekarang kita panggil component tersebut pada halaman view,, tentunya karena ini component maka bisa dipanggil dimana aja dengan cara hanya menginputkan kode ini

<x-kategori/>

So pertanyaanya gimana ya,, saat kita klik kategori tersebut maka menampilkan data yang sesuai kategori tersebut ? jawabannya adalah dengan menggunakan javascript,, disini saya paka jquery karena simple banget scriptnya

@push('js')

<script type="text/javascript">

$(function () {

    $('#jstree').on("changed.jstree", function (e, data) {

      console.log(data.selected);

        var slug = data.selected;

        url = "{{ route('edit.category',":slug") }}";

        url = url.replace(':slug', slug);

        window.location.replace(url);

    });  

  });

</script>

  @endpush

Maka saat jstree di klik di jquery kan pakai onchanged dan kita redirect deh ke halaman yang kita butuhkan berdasarkan id kategori tersebut.

Kalau ada yg belum paham silahkan bertanya yaa,, Insya Allah akan saya jawab