Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Bagaimana cara menampilkan data by category di laravel livewire

Selamat siang, bagaimana ya cara menampilkan data post by category di laravel livewire ? disini saya ingin mencoba menampilkan data post by category dengan cara seperti di bawah ini namun masih belum berjalan:

web.php

Route::get('category/{category:slug}',[FrontController::class, 'category'])->name('category');

FrontController.php

public $search;
    public function category(Category $category)
    {
        $categories = Category::all();
        $general = General::find(1);
        $locale = App::currentLocale();

        $category_id = $category->id;
        $search = request("search");

        $posts = Post::where([
            ['lang',$locale],
            ['category_id',$category_id],
            ['status','PUBLISH'],
        ])->latest()->paginate(12);

        if ($this->search !== null) {
            $posts = Post::where([
                ['title','like', '%' . $this->search . '%'],
                ['lang',$locale],
                ['category_id',$category_id],
                ['status','PUBLISH'],
            ])->latest()->paginate(12);
        }

        // dd($category_id);
        $tags = Tag::all();
        $top        = Post::where('status','PUBLISH')->orderBy('views','desc')->limit(5)->get();
        return view ('front.category',compact('categories','category_id','general','locale','posts','tags','top'));
    }

category.blade.php

@extends('layouts.front')

@section('content')
<main id="main">
    <section class="post-category">
        <div class="container-fluid">
            <div class="row mt-3">
                <div class="col-lg-3 col-md-12 col-sm-12 d-none d-lg-block">
                    <div class="sticky-top" style="top: 90px;">
                        <div class="card mb-3 rounded-3">
                            <div class="card-body">
                                <a href="#" target="_blank" rel="noreferrer">
                                    <img src="{{ asset('front/img/ads.png') }}" alt="..." height="300" width="279" class="card-img-top" />
                                </a>
                            </div>
                        </div>
                        <div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded">
                            <div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
                                {{ __('sentence.category') }}
                            </div>
                            <ul class="list-group list-group-flush">
                                @foreach ($categories as $category)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <a href="{{ route('category', $category->slug) }}">{{ $category->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3">
                            <div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
                                Tags
                            </div>
                            <div class="p-3 overflow-auto" style="max-height: 42vh">
                                <div class="nav tag-cloud">
                                    @foreach ($tags as $tag)
                                        <a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="category_id" value="{{ $category_id }}">
                <livewire:category-index>

                <div class="col-lg-3 col-md-12 col-sm-12">
                    <div class="sticky-top" style="top: 90px;">
                        <div class="card rounded-3 shadow-lg mb-3">
                            <div class="card-body">
                                <img src="{{ asset('front/img/ads1.png') }}" height="117" width="279" class="card-img-top" alt="...">
                            </div>
                        </div>
                        <div class="bg-light shadow bg-body rounded-3 mb-3">
                            <div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
                                {{ __('sentence.top_article') }}
                            </div>
                            <ul class="list-group list-group-flush mb-2">
                                @foreach ($top as $top)
                                <li class="list-group-item">
                                    <a href="{{ route('blogShow', $top->slug) }}">{{ $top->title }}</a>
                                    <div class="d-flex justify-content-between mt-3">
                                        <small class="text-muted">{{ Carbon\Carbon::parse($top->created_at)->format("d F, Y") }}</small>
                                        <small class="text-muted">{{ $top->views }} views </small>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded d-lg-none d-xl-none">
                            <div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
                                {{ __('sentence.category') }}
                            </div>
                            <ul class="list-group list-group-flush">
                                @foreach ($categories as $category)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <a href="{{ route('category', $category->slug) }}">{{ $category->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3 d-lg-none d-xl-none">
                            <div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
                                {{ __('sentence.tag') }}
                            </div>
                            <div class="p-3 overflow-auto" style="max-height: 42vh">
                                <div class="nav tag-cloud">
                                    @foreach ($tags as $tag)
                                        <a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection

@push('scripts')
@livewireScripts
<script type="text/javascript">
    window.onscroll = function (ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            window.livewire.emit('category-index');
        }
    };

</script>

<script>
    document.getElementById('load-more').onclick = function() {
        window.livewire.emit('category-index');
    };
</script>
@endpush

livewire\CategoryIndex.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\{Category, Post};
use Illuminate\Support\Facades\App;

class CategoryIndex extends Component
{
    public $limitPerPage = 10;

    public $search;

    protected $listeners = [
        'category-index' => 'CategoryIndex'
    ];

    protected $updatesQueryString = [
        ['search' => ['except' => '']],
    ];

    public function CategoryIndex()
    {
        $this->limitPerPage = $this->limitPerPage + 6;
    }

    public function render()
    {
        $locale = App::currentLocale();

        $category_id = request('category_id');

        $posts = Post::where([
            ['lang',$locale],
            ['category_id',$category_id],
            ['status','PUBLISH'],
        ])->latest()->paginate($this->limitPerPage);

        if ($this->search !== null) {
            $posts = Post::where([
                ['title','like', '%' . $this->search . '%'],
                ['lang',$locale],
                ['category_id',$category_id],
                ['status','PUBLISH'],
            ])->latest()->paginate($this->limitPerPage);
        }

        $this->emit('postStore');

        dd($category_id);

        return view('livewire.category-index', ['posts' => $posts]);
    }
}

livewire\category-index.blade.php

<div class="col-lg-6 col-md-12 col-sm-12">
    <div id="section-title" class="section-title p-1 pt-3">
        <h2 class="text-center fw-bold">{{ trans('sentence.recent_posts')}}</h2>
    </div>
    <div class="form-group has-search mb-3">
        <span class="bi bi-search form-control-feedback"></span>
        <input type="text" wire:model="search" class="form-control" placeholder="{{ __('sentence.search_form') }}">
    </div>
    @foreach ($posts as $data)
    <div class="card bg-light shadow bg-body rounded-3 mb-2">
        <div class="card-header bg-primary text-white d-flex justify-content-between">
            <small>by {{$data->admin->name}}</small>
            <small>{{ Carbon\Carbon::parse($data->created_at)->format("d F, Y") }}</small>
        </div>
        <div class="card-body">
            <h2 class="card-title">
                <a href="{{ route('blogShow', $data->slug) }}">{{ $data->title }}</a>
            </h2>
            <div class="card-footer bg-body d-flex justify-content-between align-items-center pb-0 px-0">
                <div class="d-flex my-1">
                    @foreach ($data->tags as $tag)
                    <a href="{{ route('tag', $tag->slug) }}" class="badge {{ $tag->bg }} me-1 shadow-sm text-white">{{ $tag->name }}</a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endforeach
    @if ($posts->count() == 0)
    <div class="alert alert-danger" role="alert">
        Data not found!
    </div>
    @endif
    @if($posts->count() >= 10)
    <div class="text-center d-md-none d-lg-none d-xl-none">
        <button id="load-more" class="btn btn-primary my-3">
        Load More
        </button>
    </div>
    @endif
</div>

Kalau saya dd($category_id); di FrontController.php muncul id dari kategori tersebut, tapi kalau saya coba dd di livewire\CategoryIndex.php muncul null. gimana ya cara yang benar untuk menampilkan post by category ? terimakasih

laravel laravel-livewire

@hilmih3101

38 Kontribusi 23 Poin

Diperbarui 4 tahun yang lalu

2 Jawaban:

<div>Apakah kamu sudah mengoper parameter dari blade file ke component livewirenya?<br><br>//contoh oper variable post ke livewire dari blade</div><pre><livewire:show-post :post="$post"> </pre><div><br>//Contoh menerima variable post di component</div><pre>class ShowPost extends Component { public $title; public $content;

public function mount($post)
{
    $this-&amp;gt;title = $post-&amp;gt;title;
    $this-&amp;gt;content = $post-&amp;gt;content;
}

...

}</pre>

@hilmanski

2712 Kontribusi 2145 Poin

Dipost 4 tahun yang lalu

Tanggapan

solved mas, thx ya atas jawabannya

@hilmih3101

Jawaban Terpilih

<div>Solved. issue ini sudah teratasi dengan<br><br>di livewire\CategoryIndex.php</div><pre><?php

namespace App\Http\Livewire;

use Livewire\Component; use App\Models{Category, Post}; use Illuminate\Support\Facades\App;

<em>class</em> CategoryIndex <em>extends</em> <em>Component</em> { <em>public</em> $limitPerPage = 10;

&lt;em&gt;public&lt;/em&gt; $search;

&lt;em&gt;public&lt;/em&gt; $categoryId;

&lt;em&gt;protected&lt;/em&gt; $listeners = [
    &#039;category-index&#039; =&amp;gt; &#039;CategoryIndex&#039;
];

&lt;em&gt;protected&lt;/em&gt; $updatesQueryString = [
    [&#039;search&#039; =&amp;gt; [&#039;except&#039; =&amp;gt; &#039;&#039;]],
];

&lt;em&gt;public&lt;/em&gt; &lt;em&gt;function&lt;/em&gt; CategoryIndex()
{
    &lt;em&gt;$this&lt;/em&gt;-&amp;gt;limitPerPage = &lt;em&gt;$this&lt;/em&gt;-&amp;gt;limitPerPage + 6;
}

&lt;em&gt;public&lt;/em&gt; &lt;em&gt;function&lt;/em&gt; render()
{
    $locale = App::currentLocale();
    
    $posts = Post::where([
        [&#039;lang&#039;,$locale],
        [&#039;category_id&#039;,&lt;em&gt;$this&lt;/em&gt;-&amp;gt;categoryId],
        [&#039;status&#039;,&#039;PUBLISH&#039;],
    ])-&amp;gt;latest()-&amp;gt;paginate(&lt;em&gt;$this&lt;/em&gt;-&amp;gt;limitPerPage);

    if (&lt;em&gt;$this&lt;/em&gt;-&amp;gt;search !== null) {
        $posts = Post::where([
            [&#039;title&#039;,&#039;like&#039;, &#039;%&#039; . &lt;em&gt;$this&lt;/em&gt;-&amp;gt;search . &#039;%&#039;],
            [&#039;lang&#039;,$locale],
            [&#039;category_id&#039;,&lt;em&gt;$this&lt;/em&gt;-&amp;gt;categoryId],
            [&#039;status&#039;,&#039;PUBLISH&#039;],
        ])-&amp;gt;latest()-&amp;gt;paginate(&lt;em&gt;$this&lt;/em&gt;-&amp;gt;limitPerPage);
    }
    
    &lt;em&gt;$this&lt;/em&gt;-&amp;gt;emit(&#039;postStore&#039;);

    &lt;em&gt;// dd($this-&amp;gt;categoryId);&lt;/em&gt;

    return view(&#039;livewire.category-index&#039;, [&#039;posts&#039; =&amp;gt; $posts]);
}

} <br></pre><div><br>di category.blade.php melakukan perubahan</div><pre><input <em>type</em>="hidden" <em>name</em>="tag_id" <em>value</em>="{{ $tag_id }}">
<<em>livewire:tag-index</em> <em>:tagId</em>="$tag_id" /></pre><div><br><br><br><br></div>

@hilmih3101

38 Kontribusi 23 Poin

Dipost 4 tahun yang lalu

Tanggapan

tandai sebagai jawaban yang benar ya

@hilmanski