So this is my code and my table
<li class="nav-item" role="presentation">
<a class="active show" data-bs-toggle="tab" data-bs-target="#menu-rice" aria-selected="false "role="tab">
<div>
<i class="fa-solid fa-bowl-rice"></i>
<h6>Rice</h6>
</div>
</a>
</li>
........
<div class="tab-pane fade active show" id="menu-rice" role="tabpanel">
<div class="tab-header text-center">
<h3>Rice</h3>
</div>
<div class="row">
#foreach ($ar_menu as $row)
<div class="col-lg-6 menu-item">
#empty($row->foto)
<img src="{{ url('/public/assets/img/menu/placeholder.jpg') }}"alt="Menu" class="menu-img">
#else
<img src="{{ url('/public/assets/img/menu')}}/{{$row->foto}}"alt="Menu" class="menu-img">
#endempty
<div class="menu-content">
{{ $row->nama }}<span>{{ $row->harga }}</span>
</div>
<div class="menu-ingredients ps-2">
{{ $row->ket }}
</div>
</div>
#endforeach
</div>
From Menu Table:
id
id_kategori
nama
harga
ket
foto
1
1
Fried Rice
40000
2
2
Chicken Buttermilk
40000
From Kategori Table:
id
nama
1
rice
2
chicken
So I want to filter a menu by it's category from menu table, so I want when id_kategori = 1 from menu tables it will show #menu-rice from code above, but I don't know how to make it :/ Any help will be appreciated
You can achieve this by multiple way. Here is one example
first add filter
<form action="{{url()->current()}}">
<select name="category_id" onchange="this.form.submit()">
#foreach($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
#endforeach
</select>
</form>
Then receive the category_id in controller and change the query like this
Menu::whereCategoryId($request->category_id)->get();
Return the result to view and show in loop.
Related
I would like to be able to select a vehicle type and use the price associated with that selection to add it to the base price of the services in the cards. I know there are many examples to change the options in a second drop-down menu, the classic country and state example, but I can't seem to find anything that uses the selected menu item in a way where I can add it to the service price. Here is the code I have so far:
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select vehicle type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($vehicles as $vehicle)
<a class="dropdown-item" href="#">{{ $vehicle->type }}</a>
#endforeach
</div>
</div>
</div>
#foreach($services as $service)
<div class="card mt-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="card-title">{{ $service->nom }}</h4>
{{--this is where I'd like to use the selected vehicle type to simply add it to
the service price. If i do: {{ $service->price + $vehicle->price }} it chooses
the last one that went through the foreach loop --}}
<h3>{{ $service->price }}$</h3>
</div>
<p class="card-text">{{ $service->description }}</p>
</div>
</div>
#endforeach
I'm aware this is not very fancy (or good) programming but I've been stuck on this for hours. I also know I'll need a script to make it actually dynamic and most probably use form to select the vehicle type.
<script>
function updateServicePrice(vehicle) {
const vehiclePrice = Number(vehicle.dataset.price);
const services = Array.from(document.getElementsByClassName('service-price'));
services.forEach(service => {
service.innerHTML = Number(service.dataset.price) + vehiclePrice;
});
}
</script>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select vehicle type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach($vehicles as $vehicle)
<a onclick="updateServicePrice(this)" data-price="{{ $vehicle->price }}" class="dropdown-item" href="#">{{ $vehicle->type }}</a>
#endforeach
</div>
</div>
</div>
#foreach($services as $service)
<div class="card mt-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="card-title">{{ $service->nom }}</h4>
{{--this is where I'd like to use the selected vehicle type to simply add it to
the service price. If i do: {{ $service->price + $vehicle->price }} it chooses
the last one that went through the foreach loop --}}
<h3 class="service-price" data-price="{{ $service->price }}">{{ $service->price }}$</h3>
</div>
<p class="card-text">{{ $service->description }}</p>
</div>
</div>
#endforeach
I'm developing a module that have multiple radio inputs and has numeric index,
I have 15 radio input groups and each group has 7 radio input members with the same index.
I want to check each input if empty.
HTML output
I have tried dynamic requests validation on laravel it failed to validate.
I tried to hard code the validation of 15 inputs = failed,
Then I tried to test it individually and adding next index on success and it only validates up to 12th item/index.
my valdation code
$rules = [];
foreach($this->request->get('ratingsd') as $key => $val)
{
$rules["ratings[$val]"] = 'required';
}
<div class="card mb-3 bg-info">
<ul class="list-group list-group-flush bg-light">
#foreach($items as $index=>$group)
<li class="list-inline">
<h5 class="card-header text-white bg-info">
{{$group->group_name}}
</h5>
</li>
#foreach($group->items as $items=>$item)
<li class="list-group-item">
<span class="font-weight-bold">
{{ $item->number }} {{ $item->entry }}
</span>
<div class="float-md-right form-inline mt-2">
#foreach($ratings as $rate_value=>$rate_text)
{!!Form::hidden("ratingsd[".$item->item_id."]", $item->item_id)!!}
{!!Form::radio("ratings[$item->item_id]", $rate_text, "$group->group_id*$item->item_id*$rate_value")->inline()!!}
#endforeach
{!!Form::textarea("remarks[".$item->item_id."]", '')->placeholder('Remarks')->inline()!!}
</div>
</li>
#endforeach
#endforeach
<li class="list-inline bg-info text-white">
<h5 class="card-header">
Overall Remarks
</h5>
</li>
<li class="list-inline-item p-1">
{!!Form::textarea("overall_remark", '')->placeholder('Remarks')->inline()!!}
</li>
<li class="list-inline-item text-center p-2">
<button class="btn btn-primary btn-block" type="submit">
Submit
</button>
</li>
</ul>
</div>
I expect to validate properly each "ratings" radio inputs
I want the items of my $favs object to be grouped in 4 columns for each row
<div class="row row justify-content-center">
<div class="col-9">
<div class="row">
#foreach ($favs->items as $fav)
<ul class="col-sm-3 list-unstyled">
<li class="subcat-li">{{ $fav->name }}</li>
</ul>
#endforeach
</div>
</div>
</div>
I want it to look like this:
<div class="row">
#foreach($favs->items as $fav)
<div class="col-md-3">
{{ $fav->name }}
</div>
#endforeach
</div>
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.
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
I am trying to display 3 results in each row. 1 result contains image,title and description. If description is a lengthy one, the 4th result in the second row will break. So I need to give after each row. I tried the following code, but didn't work.Thanks in advance.
<div class="row">
#if(count($reports['data']) > 0)
#foreach($reports['data'] as $reportsUser)
<div class="col-md-4 wow">
<article class="post post-2 post-2_mod-c clearfix">
<div class="entry-media">
#if($reportsUser['image'])
<img src="{{ asset(App\Http\Controllers\Controller::getThumbPath($reportsUser['image'])) }}"
alt="Foto" class="img-responsive" style="width:360px;height:192px;"/>
#else
<img src="{{asset('images/no_image.jpg')}}" alt="Foto" class="img-responsive"/>
#endif
</div>
<div class="entry-main">
<div class="entry-header">
<h2 class="entry-title ">{{$reportsUser['title']}}</h2>
</div>
<div class="entry-content">
<p>{!! str_limit($reportsUser['description'],127,"....") !!}</p>
</div>
<div class="entry-footer"><a href="{{ url('view-report/'.$reportsUser['id'])}}"
class="btn-link clsComClrRed">Continue Reading</a></div>
</div>
</article>
</div>
#endforeach
#endif
</div>
Change your #foreach statement to:
#foreach($reports['data'] as $i => $reportsUser)
Then, just before your first #endforeach (and after </div>), add:
#if ( $i % 3 == 2 )
<div class="clearfix"></div>
#endif