Laravel 5: How to get posts by specific categories and display in tabs - laravel

Question

I'm building a news site. I want to get 6 latest posts by 3 specific categories, lets say id 2, 3, 4, and display them in 3 tabs on homepage.
Each tab is divided in 2 column, col-6. one col-6 display the latest record, the other display a list of another 5 records after the latest one.
Here's my controller, I get 6 latest records from database
$post_tabs = Post::with('categories')->latest()->limit(6)->get();
this I get 3 categories that have id 2, 3, 4
$category_tabs = Category::with('posts')->whereIn('id', [2, 3, 4])->get();
In blade view, I managed to display that 3 category tabs, like so
<div class="collapse navbar-collapse justify-content-between" id="navbarToggler1">
<ul class="nav nav-sm navbar-nav mr-md-auto mr-lg-0 mt-2 mt-lg-0 align-self-end" role="tablist">
#foreach($category_tabs as $tab_category)
<li class="nav-item">
<a class="nav-link bg-color-tech active" id="nav-outdoor-tab-{{$tab_category->id}}" data-toggle="tab" href="#nav-outdoor-{{$tab_category->id}}" role="tab" aria-selected="true">
{{$tab_category->title}}
</a>
</li>
#endforeach
</ul></div>
Now I don't know how to display posts of those categories by tabs, this is what i 've got so far, which only display 6 latest post and I don't know how to make tabs work either
#foreach($post_tabs as $key => $post_tab)
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-outdoor-{{-- {{$tab_category->id}} --}}" role="tabpanel">
<div class="row clearfix">
<div class="col-lg-6">
#if ($loop->first)
<article>
<div class="entry-image mb-3">
<img src="{{asset($post_tab->thumbnail)}}" alt="{{$post_tab->title}}">
#foreach($post_tab->categories as $category)
<div class="entry-categories">{{$category->title}}</div>
#endforeach
</div>
<div class="entry-title">
<h3><a target="_blank" href="{{route('post.show',[$post_tab->slug])}}">{{$post_tab->title}}</a></h3>
</div>
<div class="entry-content clearfix">
<p>{{$post_tab->description}}</p>
</div>
</article>
</div>
<div class="col-lg-6">
#foreach($post_tabs as $key => $post_tab)
#if($key > 0)
<article>
<div class="entry-image">
<img src="{{asset($post_tab->thumbnail)}}" alt="">
</div>
<div class="entry-c">
<div class="entry-title">
<h4>{{$post_tab->title}}</h4>
</div>
</div>
</article>
#endif
#endforeach
#endif
</div>
</div>
</div>
</div>
#endforeach
Thank you so much.

Answer 1

You don't need to fetch category and post separately. You can fetch both using eager loading. For that you can define extra relationship in Category model like this
Category Model
public function latestPosts(){
return $this->hasMany('App/Post')->latest()->take(6);
}
public function beforeLatestPosts(){
return $this->hasMany('App/Post')->latest()->slice(6)->take(5);
}
Fetch in controller
$category_tabs = Category::with('latestPosts', 'beforeLatestPosts')->whereIn('id', [2, 3, 4])->get();
In view
Print Tab header
<div class="collapse navbar-collapse justify-content-between" id="navbarToggler1">
<ul class="nav nav-sm navbar-nav mr-md-auto mr-lg-0 mt-2 mt-lg-0 align-self-end" role="tablist">
#foreach($category_tabs as $tab_category)
<li class="nav-item">
<a class="nav-link bg-color-tech active" id="nav-outdoor-tab-{{$tab_category->id}}" data-toggle="tab" href="#nav-outdoor-{{$tab_category->id}}" role="tab" aria-selected="true">
{{$tab_category->title}}
</a>
</li>
#endforeach
</ul>
</div>
Print Tab Content
#foreach($category_tabs as $tab_category)
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-outdoor-{{$tab_category->id}}" role="tabpanel">
<div class="row clearfix">
<div class="col-lg-6">
#foreach($tab_category->latestPosts as $latestPost)
<article>
<div class="entry-image mb-3">
<img src="{{asset($latestPost->thumbnail)}}" alt="{{$latestPost->title}}">
</div>
<div class="entry-title">
<h3><a target="_blank" href="{{route('post.show',[$latestPost->slug])}}">{{$latestPost->title}}</a></h3>
</div>
<div class="entry-content clearfix">
<p>{{$latestPost->description}}</p>
</div>
</article>
#endforeach
</div>
<div class="col-lg-6">
#foreach($tab_category->beforeLatestPosts as $beforeLatestPost)
<article>
<div class="entry-image">
<img src="{{asset($beforeLatestPost->thumbnail)}}" alt="">
</div>
<div class="entry-c">
<div class="entry-title">
<h4>{{$beforeLatestPost->title}}</h4>
</div>
</div>
</article>
#endforeach
</div>
</div>
</div>
</div>
#endforeach