i know traditionally we include files in blade view like @include(‘file.path.etc’)
or @extends(‘file.path.etc’) but here i am trying to include my dynamic view (which includes variables containing data from database) to be used as a section inside my static welcome page view(which is a default one which builds up when you create your project). when i tried to include it, it gave me errors because of the variables that could not be included inside the default welcome.blade.php
here is the error that i get error picture a already tried it with including the file in and yielding the section in it.
and here is the code that i tried to include
<section class="section swatch-red-white">
<div class="container">
@if($continents)
<header class="section-header underline">
<h1 class="headline hyper hairline">Meet the team</h1>
<p class="">Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
</header>
<div class="row">
<ul class="list-unstyled row box-list">
@foreach($continents as $continent)
<li class="col-md-4 os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".0s">
<div class="box-hex flat-shadow box-huge">
<div class="box-dummy"></div>
<figure class="box-inner">
<img class="svg-inject" src="{{$continent->photo ? asset($continent->photo->file) : asset('images/404.png')}}" alt="a man with a mustache">
<figcaption class="box-caption">
<h4>Likes</h4>
<p>Coffee and Beer</p>
</figcaption>
</figure>
</div>
<h3 class="text-center">
<a href="#">{{$continent->name}}</a>
</h3>
<ul class="list-inline text-center social-icons social-simple">
<li>
<a href="#" target="_self"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#" target="_self"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</li>
@endforeach
</ul>
</div>
@endif
</div>
</section>
here is the code of the controller
public function index()
{
$continents = Continent::all();
return view('admin.continent.continent',compact('continents'));
}
and here is the part of the welcome.blade.php where i am trying to invoke the data form.
<div id="content" role="main">
<section class="section swatch-red-white">
<div class="background-media" style="background-image: url({{asset('images/design/section-bg/bg-2.jpg')}}); background-repeat: ; background-size: ; background-attachment: ; background-position: ; background-size: cover" data-start="background-position: 50% 0px" data-top-bottom="background-position: 50% -200px"></div>
<div class="background-overlay" style="background-color:rgba(231,76,60,0.8)"></div>
<div class="container">
<header class="section-header underline">
<h1 class="headline hyper hairline">Welcome to One58 Travel & Tour</h1>
<p class="big">We make your dream vacations come true</p>
</header>
</div>
</section>
<section class="section swatch-white-red has-top">
<div class="decor-top">
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg></div><div class="container">
<header class="section-header underline">
<h1 class="headline super hairline">Features</h1>
<p class="">Angle is a uniquely designed wordpress theme. It's super easy to modify and uses advanced CSS techniques built on the latest Bootstrap Framework.</p>
</header>
<div class="row">
<ul class="list-unstyled row box-list">
<li class="col-md-3 text-center os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".0s">
<div class="box-round">
<div class="box-dummy">
</div>
<a class="box-inner" href="#">
<img class="svg-inject" src="{{asset('images/design/custom-icons/custom-icon-composer.png')}}" alt="a clock" data-animation="">
</a>
</div>
<h3 class="text-center">
<a href="#">Retina ready</a>
</h3>
<p class="text-center">Angle is build to look sharp ,cool and awesome on all displays. Images will look sharp and clear.</p>
</li>
<li class="col-md-3 text-center os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".3s">
<div class="box-round">
<div class="box-dummy">
</div>
<a class="box-inner" href="#">
<img class="svg-inject" src="{{asset('images/design/custom-icons/custom-icon-bag.png')}}" alt="a clock" data-animation="">
</a>
</div>
<h3 class="text-center">
<a href="#">Free updates</a>
</h3>
<p class="text-center">No need to worry on keeping your theme updated. With Angle you get free updates for life.</p>
</li>
<li class="col-md-3 text-center os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".6s">
<div class="box-round">
<div class="box-dummy">
</div>
<a class="box-inner" href="#">
<img class="svg-inject" src="{{asset('images/design/custom-icons/custom-icon-iphone-white.png')}}" alt="a clock" data-animation="">
</a>
</div>
<h3 class="text-center">
<a href="#">Responsive Design</a>
</h3>
<p class="text-center">We have designed this site mobile first so it looks great on mobile devices of all sizes.</p>
</li>
<li class="col-md-3 text-center os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".9s">
<div class="box-round">
<div class="box-dummy">
</div>
<a class="box-inner" href="#">
<img class="svg-inject" src="{{asset('images/design/custom-icons/custom-icon-clipboard.png')}}" alt="a clock" data-animation="">
</a>
</div>
<h3 class="text-center">
<a href="#">100% support</a>
</h3>
<p class="text-center">With Angle as with all our themes you will receive our 100% rock solid support.</p>
</li>
</ul>
</div>
</div>
</section>
{{--@include('admin.continent.continent')--}}
{{--@section('continent')--}}
{{--{{View::make('continents')->with('continents', $continents)}}--}}
{{--@endsection--}}
<section class="section swatch-white-red has-top">
<div class="decor-top">
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>
</div>
<div class="container">
<header class="section-header underline">
<h1 class="headline super hairline">Meet the team</h1>
</header>
<div class="row">
<ul class="list-unstyled row box-list">
<li class="col-md-4 os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".0s">
<div class="box-round flat-shadow box-big">
<div class="box-dummy">
</div>
<figure class="box-inner">
<img class="svg-inject" src="{{asset('images/design/people/man-1-800x800.png')}}" alt="a clock">
<figcaption class="box-caption">
<h4>Likes</h4>
<p>Coffee and Beer</p>
</figcaption>
</figure>
</div>
<h3 class="text-center">
<a href="#">John Langan</a>
<small class="block">Art Director</small>
</h3>
<p class="text-center">Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
<ul class="list-inline text-center social-icons social-simple">
<li>
<a href="#" target="_self">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-twitter"></i>
</a>
</li>
</ul>
</li>
<li class="col-md-4 text-center os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".3s">
<div class="box-round flat-shadow box-big">
<div class="box-dummy"></div>
<figure class="box-inner">
<img class="svg-inject" src="{{asset('images/design/people/woman-1-800x800.png')}}" alt="a clock">
<figcaption class="box-caption">
<h4>Says</h4>
<p>I like ancient stuff</p>
</figcaption>
</figure>
</div>
<h3 class="text-center">
<a href="#">Kate Ross</a>
<small class="block">Creative Director</small>
</h3>
<p class="text-center">Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
<ul class="list-inline text-center social-icons social-simple">
<li>
<a href="#" target="_self">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</li>
<li class="col-md-4 text-center os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".6s">
<div class="box-round flat-shadow box-big">
<div class="box-dummy"></div>
<figure class="box-inner">
<img class="svg-inject" src="{{asset('images/design/people/man-2-800x800.png')}}" alt="a clock">
<figcaption class="box-caption">
<h4>Moto</h4>
<p>Live and let die</p>
</figcaption>
</figure>
</div>
<h3 class="text-center">
<a href="#">Manos Jones</a>
<small class="block">IOS Developer</small>
</h3>
<p class="text-center">Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
<ul class="list-inline text-center social-icons social-simple">
<li>
<a href="#" target="_self">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-google-plus-square"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
<section class="section swatch-red-white has-top">
<div class="decor-top">
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 100 L100 0 L100 100" stroke-width="0">
</path>
</svg>
</div>
<div class="container">
<div class="row">
<div id="slider-flex3" class="flexslider text-left" data-flex-speed="7000" data-flex-animation="slide" data-flex-controls="hide" data-flex-directions="show" data-flex-controlsalign="center" data-flex-captionhorizontal="alternate" data-flex-captionvertical="bottom" data-flex-controlsposition="" data-flex-directions-type="">
<ul class="slides">
<li>
<figure>
<img style="height: 150px; width:150px " src="{{asset('images/design/vector/slide-1.png')}}" alt="some image">
<figcaption>
<h3>Colorful and clean</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, iure voluptatem dolore pariatur deleniti nihil cupiditate vel sunt consectetur.</p>
</figcaption>
</figure></li>
<li>
</ul>
</div>
</div>
</div>
</section>
<section class="section swatch-red-white has-top">
And here is the Model of Continent
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Continent extends Model
{
protected $fillable = [
'name','photo_id',
];
public function tour(){
return $this->belongsTo('AppTour');
}
public function photo(){
return $this->belongsTo('AppPhoto');
}
}
3
Answers
Execute this line of code from wherever you are generating the list of continents.
You should pass continents as params to included view
You can share data with views in three ways:
Pass data to a view
Pass an array of data to view:
or, using the
with
method:Sharing Data With All Views
Occasionally, you may need to share a piece of data with all views that are rendered by your application. You may do so using the view facade’s share method. Typically, you should place calls to share within a service provider’s boot method. You are free to add them to the AppServiceProvider or generate a separate service provider to house them.
View Composers
If you have data that you want to be bound to a view each time that view is rendered, a view composer can help you organize that logic into a single location.
You can also attach a view composer to multiple views at once by passing an array of views as the first argument to the composer method.
See https://laravel.com/docs/5.5/views#view-composers for example