I am new to laravel framework, want to use laravel layout master pages, and used to include child pages in master page. here is my header and footer page and app.blade.php is my master page, where i am using #yield to show data. but it did not work for me. my output is showing blank.
app.blade.php (Layout master page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div>
#yield('header')
</div>
<div class="content">
#section('content')
<h1> Body </h1>
#endsection
</div>
<div>
#yield('footer')
</div>
</div>
</body>
</html>
Header.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.header
{
height:100px;
width:100%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="header">
#section('header')
<center> Layout Header Master page </center>
#show
</div>
</body>
</html>
footer.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.footer
{
height:100px;
width:100%;
background-color: aquamarine;
padding-top: 50px ;
}
</style>
</head>
<body>
<div class="footer">
#section('footer')
<center> Layout Footer Master page </center>
#show
</div>
</body>
</html>
web.php (Route)
Route::get('/masterpage','studentcontroller#viewmasterpage')->name('masterpage');
studentcontroller.php
public function viewmasterpage()
{
return view('layouts/app');
}
Problems:
There are some problems in your blades.
Every opening #section Tag needs a closing #endsection Tag.
The section Tags should everything that you want to display in between.
You don't need to add the whole <html> etc. you can simply add the necessary code
I think the content should be a yield because you might want to insert the content of other pages there..
I also think you are confusing #includeand #yield
If you want to outsource your header and footer you can simply #include('yourFolder/footer') and it inserts the code
Solution:
Change the #yield to #include
Change the #section to #yield('content')
Examples:
File named: header.blade.php
<div class="header">
<center> Layout Header Master page </center>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
#include('header')
<div class="content">
#yield('content')
</div>
#include('footer')
</div>
</body>
</html>
afterwards you can create a new view: example.blade.php
#extends('layout.app')
#section('content')
//put your content here
#endsection
You are misunderstanding the #extends, #yield and #section directives.
#extends uses another blade file, and fills in the #yield directives with the #sections it defines.
Say you have app.blade.php
<html>
<body>
#yield('header')
#yield('content')
#yield('footer')
</body>
</html>
You could then have say landing.blade.php
#extends('app')
#section('header')
<header>I am the header for the landing page!</header>
#endsection
#section('content')
<div>I am the content for the landing page!</div>
#endsection
#section('footer')
<header>I am the footer for the landing page!</footer>
#endsection
header.blade.php (Just use the code remove others)
#section('header')
<center> Layout Header Master page </center>
#endsection
footer.blade.php (Just use the code remove others)
#section('footer')
<center> Layout Footer Master page </center>
#endsection
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div class="header">
#include('header')
</div>
<div class="content">
#yield('content')
</div>
<div class="footer">
#include('footer')
</div>
</div>
</body>
</html>
studentcontroller.php
public function viewmasterpage()
{
return view('layouts.app');
}
Related
If you're not logged in and don't have the id, the header should include "Inloggen" en "Aanmelden", if one is logged in and has the id, it should show "Uitloggen" which means "Logout". I'm echoing the HTML code, but I also want to run a PHP if else statement in the HTML code.
Header.php:
<?php
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../Campingmaasvallei/images/logocamping2.png">
<link rel="stylesheet" href="../Campingmaasvallei/css/reset.css">
<link rel="stylesheet" href="../Campingmaasvallei/css/style.css">
<title>Camping Maasvallei</title>
</head>
<body class="body-login">
<header>
</div>
<div class="container-header">
<img id="logo" src="../Campingmaasvallei/images/logocamping2.png">
<nav>
<li>Home</li>
<li>Omgeving</li>
<?php if (!isset($_SESSION['id'])){
<li>Inloggen </li>
<li>Aanmelden </li>
}
else{
<li>Uitloggen </li>
?>
</nav>
</div>
</header>
<div class="container">';
?>
Insert this code in your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../Campingmaasvallei/images/logocamping2.png">
<link rel="stylesheet" href="../Campingmaasvallei/css/reset.css">
<link rel="stylesheet" href="../Campingmaasvallei/css/style.css">
<title>Camping Maasvallei</title>
</head>
<body class="body-login">
<header>
</div>
<div class="container-header">
<img id="logo" src="../Campingmaasvallei/images/logocamping2.png">
<nav>
<li>Home</li>
<li>Omgeving</li>
<?php if (!isset($_SESSION['id'])): ?>
<li>Inloggen </li>
<li>Aanmelden </li>
<?php else:?>
<li>Uitloggen </li>
<?php endif;?>
</nav>
</div>
</header>
<div class="container">'
Try this :
<?php if (!isset($_SESSION['id'])){ ?>
<li>Inloggen </li>
<li>Aanmelden </li>
<?php }else{ ?>
<li>Uitloggen </li>
<?php } ?>
Can not add OwlCarousel to laravel project properly and it doesn't work.
What should I do?
I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.
My code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
The right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>
The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />
You have to place owlcarousel folder in the laravel's app/public folder, not in views folder.
Hope this helps.
I built a Basic blade template inside
resources/views
,
Further I am using Vuetify.
it look like this:
//app.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', env('APP_NAME')) }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" dark>
<v-app dark v-if="loading">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-progress-circular :indeterminate="true" :size="80" color="primary"></v-progress-circular>
</v-flex>
</v-layout>
</v-app>
<v-app v-else v-cloak dark>
<v-navigation-drawer app right></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container grid-list-xl>
<v-layout>
#section('content')
</v-layout>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
#yield('javascript')
</body>
</html>
I create a section
#section('content') so that I can extend the layout and put Content to that area. Inside
resources/views/Event
i have a blade file which extends this and shall add data to the Content
// create.blade.php
#extends('layouts.app')
#section('content')
testests
#endsection
But Nothing gets shown, what am I missing?
In you Blade template, you want to use
#yield('content')
not:
#section('content')
I'm having issues when trying to load some properties of my main.css file, loading the file from /user_create.html loads the main.css just fine, but when I try to do it from url.dev/user/create, it doesn't load all the properties, and the code is copy/pasted from html to my blade.php file.
HTML
<div class="container-fluid band-user-creation">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 raleway-regular"><table >
<tbody>
...
<tr>
<td><input name="UserName" type="name" class="input-user-creation" placeholder="Ingresa tu Nombre"></td>
</tr>
<tr>
<td><input name="UserLastName" type="lastname" class="input-user-creation" placeholder="Ingresa tu Apellido"></td>
</tr>
...
CSS
.band-user-creation{
padding-top: 100px;
padding-bottom: 100px;
color: #212121;
text-align: center;
}
.input-user-creation{
background-color: #B2DD4C;
font-size: x-large;
border-radius: 10px;
padding-left: 10px;
border: transparent;
color: #F9F9F9;
margin-top: 5px;
min-width: 300px;
}
.HTML HEAD CONTENT
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400i,600,600i" rel="stylesheet">
...
...
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
EDIT
.BLADE HEAD CONTENT
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<link href="../../main.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400i,600,600i" rel="stylesheet">
...
...
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
you need a layout blade blank.blade.php (folder resources\views\layouts) with
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link href="{{ asset("css/style.css") }}" rel="stylesheet">
</head>
<body
#yield('main_container')
</body>
</html>
then you need your style .css with all the css on inside public folder
then on your .blade.php
#extends('layouts.blank')
#section('main_container')
<!-- ALL THE HTML -->
#endsection
Moving ../main.css to ../css/main.css did the trick, I don't why still kinda work before when It shouldn't...
the main idea about loading CSS/js use asset() helper
for example
<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-
free/css/all.min.css') }}">
I'm trying to yield in one of my blade files but it's not working.
This is my index.blade.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="token" content="{{ csrf_token() }}">
<title>Forum</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/css/bulma.css" rel='stylesheet' type='text/css'>
<link href="/css/all.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div id="app">
#include('shared.menu.menu')
#yield('content')
</div>
<script src="/js/app.js"></script>
</body>
</html>
This is my login.blade.php:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
So the navigation bar is showing at this point. But the bar is not! When I replace: #yield('shared.bar.bar') with test, test shows up. This is shared/bar/bar.blade.php:
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
test
</h1>
<h2 class="subtitle">
test
</h2>
</div>
</div>
</section>
#stop
What am I doing wrong? Is it also possible to pass variables to the bar? So I can show another title and subtitle on every page?
--EDIT--
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ $title }}
</h1>
<h2 class="subtitle">
{{ $subtitle }}
</h2>
</div>
</div>
</section>
#stop
If you are showing all of your code, looks like your yield is
#yield('shared.bar.bar')
And yout section
#section('bar')
When it should be
#section('shared.bar.bar')
Or you should change your yield to
#yield('bar')
Because #yield and #section are only strings, they are not related to files like #include.
And looks like this file is also wrong:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
#yield is something you should start using only in your main layout file, because it can get messy and hard and harder to undestand what's happening. So, unless you have a section 'shared.bar.bar' to fill this #yield, you should probably do something like
#extends('index')
#section('content')
<form>
.... your login form
</form>
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop
To have the title changed via section you can also do:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>#yield('title')</title>
</head>
or
<h1 class="title">
#yield('title')
</h1>
And your login blade file, you can do
#extends('index')
// This will tell the Blade Compiler to replace every
// occurence of #yield('title')
#section('title')
User Login
#stop
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop