I'm a beginner in Laravel and I'm getting practices converting a previous (simple) website to Laravel.
Basically, I created a template having HTML structure and I change the main content using #includes and #yield
The interesting parts in html template.blade.php are like
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Title -->
<title>#yield('title')</title>
....
....
<!-- CSS Customization -->
<link rel="stylesheet" href="/assets/css/custom.css">
#yield('css')
....
....
#include('include._header')
#include('include._test_script')
#include('include._footer')
....
....
<!-- JS Customization -->
<script src="/assets/js/custom.js"></script>
#yield('js')
The router calls the test.blade.php which include the template. This blade file has some custom php code having the $extra_script variable
<?php $extra_script = " alert(0); console.log(0);";?>
#extends('layouts.template')
#section('css')
....
#endsection
#section('js')
...
<script>
{!! $extra_script !!}
</script>
#endsection
Loading this page the script works fine and I see the alert message having the 0 content.
Now I'm trying to update the $extra_string into the /include/test_script.blade.php file but it doesn't work.
This include blade file is like:
#php
$extra_script = " alert(1); console.log(1);";
#endphp
or
<?php $extra_script = " alert(1); console.log(1);"; ?>
The result is no errors and still alert(0) shown.
I understand is not elegant to have PHP code in the blade template but in the controller but this is a quick and fast porting to have the website online in a few time.
How to fix it in view?
I would say the order is incorrect, first test.blade.php is extending from template.blade.php. It is template.blade.php the one setting the alert to 1 by #include('include._extra_script') but then as test.blade.php is extending from that template, it is overwriting $extra_script to the one that alerts a 0.
Related
I'm learning the laravel framework and trying to get to grips with using the blade template engine. However i cant for life of me get the #extends and #section functionality to work within my project.
I have already tried reinstalling the whole project multiple times, using different browsers and restarting my machine but i cant figure out why it doesn't display the #section content
Laravel Version: 5.7.28 |
IDE: PhpStorm
routes/web.php
Route::get('/', function () {
return view('layouts/index');
});
views/layouts/index.blade.php
<body>
<div class="container-fluid">
<h1>Site Index</h1>
#yield('header')
</div>
</body>
views/header.blade.php
#extends('layouts.index')
#section('header')
<p>Header</p>
#endsection
At the moment all that is being displayed is the tag in the views/layouts/index.blade.php file.
Thank you very much for any and all input on this.
That's not how the templating works. You have to reference the child template in your return statement. Because the #extends is in this child template, Laravel knows to use the mentioned master layout. So your return statement would be like so:
return view('header');
If you just want the header to be displayed on every page, you don't need to extend the master layout in your header, you should just include the header part in your master layout.
<body>
<div class="container-fluid">
<h1>Site Index</h1>
#include('header')
</div>
</body>
i have tested the view and layout they seems working. check your controller return statement. try return view('header');
Route::get('/', function () {
return view('header');
});
thanks all for your responses, now i understand how the blade template engine works a little better and how i was doing this wrong. Just for clarification for others that get confused like me and come across this thread:
When you are redirecting to a view through the web routes then it has to be a child that is extending from a layouts master.
routes/web.php
Route::get('/', function () {
return view('index');
});
The html from the master file will then be displayed by default and its the content that we are "viewing"
views/layouts/master.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#yield('title', 'default title if unspecified')</title>
</head>
<body>
<h1>Master Header</h1>
#yield('content')
</body>
</html>
To work with the content of the page then its the index view that is worked with using the #section('content') method.
views/index.blade.php
#extends('layouts.master')
#section('title', 'Changing the default title')
#section('content')
<p>content displayed</p>
#endsection
I hope this helps for anyone else.
If you want to show content of section('header') then you must return header view like
Route::get('/', function () {
return view('header');
});
this is because contents are in header view and you have been extending layout.index
so if you return layout.index view you will not see content of section('header')
I'm new to Laravel and want to learn how to use the Blade template system properly, but i cant wrap my head around the difference between #section and #yield.
I've been reading the docs : https://laravel.com/docs/5.7/blade.
But it's not explaining the differences and how to use them properly.
I've been reading posts in other forums too like this one :
https://laravel.io/forum/09-02-2014-using-section-and-yield
But still i'm a bit confused.
For example right now i'm creating an app that have multiple pages with commun pieces between them, so for now i get that i have to create a common layout for this pages, but when to use #section and when do i have to use #yield ?
for example if i have a page like so :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Name') }}</title>
//Common CSS between pages
<link href="{{ asset('css/style1.css') }}" rel="stylesheet">
//Changing CSS between pages
<link href="{{ asset('css/style2.css') }}" rel="stylesheet">
</head>
<body>
//the content stay the same !
<div id="app">
<span id="some_style">hello world !</span>
</div>
<script>
//common JS
<script src="{{ asset('script1.js') }}">
//Changing JS between pages
<script src="{{ asset('script2.js') }}">
</script>
</body>
</html>
How can i organise it using the blade templating?
Assuming you 2 templates. Lets call one Base.blade.php and the other one Posts.blade.php.
We'll #extends('base') in Posts.
Using #section in Posts and #yield in Base.
Something like this:
Base
#yield('posts') {# the section called "posts" #}
Posts
#extends('base')
#section('posts')
Here be posts
#endsection
Whatever is written in posts will be yielded in the base blade.
Think of it as inheritance.
You can imagine it as classes if you will. Where the child class calls a method in the base class.
class Base {
protected function printSomething($something) {
echo $something;
}
}
class Posts extends Base {
public function BaseWillPrint() {
$this->printSomething('POSTS');
}
}
Basically I haven't told you anything that doesn't already exist in the documentation.
Yes, assuming if you have a template you can make the base of template in layouts/app.blade/php and you can make the #yield('anything') and then in your views/main.blade.php you must give #extends('layouts.app') and
#section('anything')
*for dynamic page
#endsection
I am trying something really simple and can not get it to work.
I have 2 pages. admin.blade.php and left.blade.php
I am trying to use admin page as the master page. and include date from left.blade.php
The admin pages print only "test" as the result and includes nothing from left.admin.php.
I can`t see what is wrong. Thanks in advance
File structure is
-- resources
--views
*admin.blade.php
*left.blade.php
left.blade.php
#extends('admin')
#section('content')
baran
#stop
admin.blade.php
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title> #yield('title')</title>
</head>
<body>
<?php
// put your code here
?>
#yield('content')
test
<div id='footer'>
#yield('footer')
</div>
</body>
</html>
route command in web.php is
Route::get('/admin', function () {
return view('admin');
});
If you want to include date from left.blade.php you should use #include() directive in admin.blade.php:
#include('left')
If your main content is in left.blade.php and you're using admin.blade.php as layout only then change you route:
Route::get('/admin', function () {
return view('left');
});
You want to call the view for the inner page, not the master page, since the inner page extends the master page:
return view('left');
I am new to laravel and AngularJS . I am trying to render a view which is a php file. The .php file is being rendered but the AngularJS expression inside it is not being evaluated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<script src='public/AngularSorter.js'></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
<body ng-app = 'store'>
<div ng-controller ='SorterController as sorter'>
<p>
{{ 4+4 }}
</p>
</div>
</form>
</body>
</html>
the route is like this
Route::get('/', function () {
return view('Home');
});
Am I missing something? I tried renaming the php file to .html but it doesn't work. why can't the view render .html file??.
I get the output as {{4+4}} instead of 8.
Laravel Blade and AngularJS use the same syntax for processing variables, {}. To avoid this, you have to either change the syntax for blade or change the syntax for AngularJS. Details here.
Changing the AngularJS Syntax:
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
- or -
Changing the Laravel Blade Syntax:
// You may place this code anywhere it is executed each request. Some people have used routes.php
Blade::setContentTags('<%', '%>'); // for variables and all things Blade
Blade::setEscapedContentTags('<%%', '%%>'); // for escaped data
Also, the view will need to be .blade.php, not .html. This is the standard for all laravel blade (view) files. Documentation here: http://laravel.com/docs/master/blade
The issue was solved by reordering the script tags. the Angular script tag should be placed at the beginning and then the self written javascript files should be included.
I have a full html template, that I am trying to use with laravel.
The template has a big image slider (that should only be in homepage) and a couple of other codes like contact form, accordion, twitter widget... my goal is to place those parts in separate blade templates and call them when needed. For this, I have this folder scheme.
..
/views
/emails
/home
- slider.blade.php
- contact-form.blade.php
- twitterwidget.blade.php
/layouts
- master.blade.php
So, for example master.blade.php looks like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class='header'>
//header
#yield('slider')
</div>
<div class='content'>
//content
#yield('contact-form')
</div>
<div class='footer'>
//footer
</div>
</body>
</html>
Now that is a basic examples which yields a slider inside the headers tags, and this is the slider.blade.php:
#extends('layouts.master')
#section('details')
<div class='slider'> I am a slider </div>
#stop
but when I create a route, I am forced to create one point to one template. as:
Route::get('/', function(){
return View::make('home/slider');
});
This only renders the layout by pulling the slider. But I want to contact form to be rendered also.
In master.blade.php file instead of
#yield('contact-form')
you should use:
#include('home.contact-form')
or you can edit your slider.blade.php file and add at the end:
#section('contact-form')
#include('home.contact-form')
#stop