It's not really a big problem, but it is mighty annoying.
When starting creating templates in laravel using blade, everything looks fine. The "master" template/layout gets it's "styling" correct. And by "styling" i mean like correct amount of whitespaces, newlines etc when viewing the source code.
The problem occurs when you know try to extend this master template.
for every #section('<something>') you do know, all newlines is removed from the code, making the source code look fuggly.
Have been searching this phenomenon for a while without finding anything interesting which explains why or maybe a solution to make the source code readable again.
Here is an example if the explanation wasn't good enough:
// master.blade.php
<html>
<head>
<title>Something here</title>
</head>
<body>
#yield('content')
</body>
</html
Alright, this will look exactly like this in the source code. Let's make a another template which extends this.
// home.blade.php
#extends('master')
#section('content')
<h1>Welcome</h1>
<p>This is my homepage</p>
#endsection
This will first of inherit the parent, and replace #yield('content') with:
<h1>Welcome</h1> <p>This is my homepage</p>
Is there any explanation at all why this happens?
For longer sub-templates reading the source code is a living hell. Best way to see the "source code" is to see the generated one in inspect element, which also is just the live code, and not the first generated.
- Sligthly annoyed developer
I believe this is up to Laravels way of handling views. Every blade-view you create in resources/views will be "translated" to PHP. This line in your code for example:
#yield('content')
will be translated to
<?php echo $__env->yieldContent('content'); ?>
you can easely check for yourself by checking all files at storage/framework/views/. This are the files Laravel will include to build the "real" HTML website. Note, that all tab-stops made in .blade.php views are replaced with 4 spaces. And there are this ugly intendations.
Related
Excuse me, i would like to ask about how to call another page blade in different subfolder inside views.
Example :
views
--home(subfolder)
--beranda(subfolder)
--refresh.blade.php
--layouts(subfolder)
--master.blade.php
in master.blade.php implements template page, when i click one link in this folder may have to go in refresh.blade.php.
Likely another web layout, they have a lot of link in header like 'Home', 'Paper', etc.
I'm still learned more about laravel as beginner practice.
May you can help me, i'll appreciate that.
Regard, Aga.
I think you can refer to some directives such as #include and #extends in the laravel blade.
For example, in the admin.common.header view (located at admin/common/header.blade.php), we have some basic page code (common to various pages such as navigation bar or layout). We use #yield such as #yield ("extra_js") or #yield ("extra_css") where we want to add code later.
header.blade.php
<html>
<head>
something maybe ...
#yield("extra_css")
</head>
<body>
something maybe ...
#yield("extra_js")
</body>
</html>
And in another view such as admin.feedback.feedback, you can use #extends('admin.common.header') at the top of the code to inheritance the template and you will get the layout of this template.
For different content in the feedback template, you can use #section to give you code to fill in the inheritance template such as #section('extra_js').
feedback.blade.php
#extends('admin.common.header')
#section('extra_js')
<script> something... </script>
#endsection
If you want to include one blade, just use #include.
<div>
#include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>
In laravel blade there are many instructions to complete the rendering of the template, if you want to know clearly, please refer to the corresponding version of the official document.
So when I initially put my hands on Laravel, I was transistioning off Yii1. In Yii, we'd use plain PHP templates; which I don't mind, since I actually like them that way.
However, when I learned about Blade and how Laravel documented Blade back and forth and barely even mentioned the use of bare PHP templates, I was...irked.
I threw together a project that would provide me with just a PHP view engine. But just a few minutes ago, I actually saw it: PhpEngine.php. Diggin deeper, I facepalmed; I can not just go and deprecated my project, but I can also go and dig deeper.
It is sooo confusing, so I am looking ot have a teeny tiny bit of questions answered:
When I use View::addNamespace(), I can just do view("foo::my.template") too, right?
How do I actually use a layout/template? As in, I have the document written, into which I want to rende rmy views. How do I do that with bare PHP views? IN blade, we get #extend or something, but I can not seem to find that for raw PHP templates.
Where can I see some proper view docs and examples instead of the laravel.com ones, which push Blade that much?
When I use view::addNamespace(), I can just do view("foo::my.template") too, right?
Yes. It does. Generally this format is applied third party packages. For example, if you have in mind using a package, you call the view namespace as:
$this->loadViewsFrom(__DIR__.'/path/to/views', 'foo');
Now you are able to call view as view('foo::whatever')
How do I actually use a layout/template? As in, I have the document written, into which I want to rende rmy views. How do I do that with bare PHP views? IN blade, we get #extend or something, but I can not seem to find that for raw PHP templates.
I do not understand what I can not seem to find that for raw PHP templates means. But let me show you an example using blade system:
Create a layout file:
// master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>#yield('title')</title>
<head>
<body>
#yield('body')
</body>
</html>
As you can notice above, there are two "sections" that their content can be changed according to each view that extends this layout: title and body.
Extending the layout for each view
//contact.blade.php
#extends('master')
#section('title')
Contact us
#stop
#section('body')
<h1>Thank you for contact us</h1>
#stop
Notice how title and body are set using #section tag. Inside of each one you define the content to be displayed. Finally, in your controller just call view('foo::contact') or view('contact') according to your needs.
Where can I see some proper view docs and examples instead of the laravel.com ones, which push Blade that much?
Well, blade system is not too much deep. I consider that laravel's docs is enough complementing your knowledge with this side.
I apologize of this question has been asked before. I tried searching around, but was unable to find a relevant answer (probably due to my relatively small "web-design vocabulary").
I've noticed that the majority of websites have at least one--if not more--standard "objects" (or whatever the actually name is for them) on almost all of their pages. For instance, Stack Overflow has the same logo and tabs (Questions, Tags, Users...) on every page. I'm assuming that there's a less painstaking way to set this up other than simply copying and pasting the same code over and over, especially when ease of modification becomes a factor. As far as I know, CSS can't do accomplish this level of style generalization, so I'm assuming a server-sided language like PHP is part of the equation.
I'm not really looking for a very specific answer. What language--or type or language--as well as a brief synopsis of at least one way to achieve some sort of "object pasting" will be sufficient.
Like others said, this is a major reason why people go from HTML to something like PHP, at first just to split up parts of your page.
Yes, you can do exactly that. What I usually do (if I'm not using a framework) is create a folder in my directory like this:
inc/header.php
inc/footer.php
inc/menu.php
index.php
Then in index.php you'd need an include like:
<? include('inc/header.php'); ?>
<h2>Welcome to my site</h2>
<p>We're happy to have you</p>
<? include('inc/footer.php'); ?>
And in inc/header.php:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
And in inc/footer.php:
<div id="footer">
<h2>Thanks for visiting</h2>
</div>
</body>
</html>
And so on for inc/menu.php
Then for other pages on your site, do the same includes for header, footer, and menu, and just write your page-specific content between the includes
Just an alternative to PHP:
Use Javascript or jQuery.
$( "#footer" ).load( "includes/footer.html" );
Another alternative is to use SHTML, which is basically HTML with inserts.
An easy way to do this is to create separate files for different sections of your page then instead of pasting the same code on each page use
include ('yourfilename.php');
to add the code in yourfilename.php at that point in the php file. This also makes it easy to modify that section and have your changes be reflected on all the pages that use yourfilename.php
For example, you can make one file called page_top.php and another called page_bottom.php. Then on each of your various php pages you can include('page_top.php'); near the top and include('page_bottom.php'); near the bottom. The code within these files will then be executed on each of your content pages.
There are of course other methods but this is a super easy way and you should look into this first.
An example of include would be:
header.php
<!DOCTYPE html>
<html>
<head>
<stuff><stuff>
</head>
<body>
<div id="mybanner">Design and logo that is common on all pages</div>
content/contact.php
<div id="bulk_of_the_html">
The rest of your stuff goes here
</div>
foot.php
<div id="footer_common_to_all">This is your footer content that is common to all pages</div>
</body>
</html>
To use would be something like:
contact.php
// This is your common to all pages header
include("header.php");
// This can be changed up as content switches
include("content/contact.php");
// This is your common to all pages footer
include("foot.php");
HTML imports or Webcomponents is a new way to do this completely at client side using HTML, JS and CSS. Write a component and reuse it in every page. But it uses ShadowDom, means not search indexable yet.
<link rel="import" href="header-banner.html">
<!-- use this in body -->
<header-banner></header-banner>
You have two solutions
Use include('....php') or require('....php') or include_once('....php') or require_once('....php') php functions to add external sections/modules into your web page(php).
You can call this functions at the position where you want the extremal module/part to be appeared.
include("Header.php"); // call to external module
// your body goes here
<h1>.......</h1>
<p>........</p>
.....................
include("Footer.php"); // again to another module
Or its better if you can go for a MVC framework where you can combine multiple modules and views into one output page...(ex Codeignitor/Cakephp...)
I'm working on a website, which I have temporarily hosted here.
You'll notice the mystery letter 'a' I'm getting at the start of every page. I've gone through all the php files (controllers, views, models) and cannot locate where this letter is coming from. Another curiosity is that all the head content is not residing in the head tags when inspected with Firebug. It appears in the body tags, however it still functions correctly. Are these two issues related?
The only thing I have found from searching the internet is that perhaps some files have been saved as ANSI instead of UTF-8. I've tried 'saving as' all my php files as UTF-8 using my editor, but it is a very slow process. Any help debugging this situation would be appreciated.
EDIT- thanks for your response, #erman-belegu. It doesn't seem to be in any controller. For instance, I've set up a 404 redirect, with its own controller and view. The view looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="No Page">
</head>
<body>
<h1>No page dude.</h1>
</body>
</html>
But when inspected with firebug, it looks like this:
<html>
<head></head>
<body>
a
<meta content="No Page" name="description">
<h1>No page dude.</h1>
</body>
</html>
I have encoded everything using UTFCast, and am still experiencing the same issue. Any help welcomed.
You see the head inside the body tag because the mysterious "a" is the first character of your output. It's put inside the body tag by the rendering engine of your browser, or by firebug.
If you find the cause of your "a" - almost certainly some content outside PHP tags - the head will return to normal in firebug.
Searching for the "a" is tricky.. I'm not sure how large your codebase is, but I'd say start by exiting the process right before output is sent. You should see only the "a". Then move the exit step by step untill your "a" disappears, and you'll find it.
Check your controllers at start or maybe any print somewhere. Check all your code on these pages because you print these "a ".
Also use UTF-8 without BOM. But, I think that you print it accidentally and dont think that this happens for any other reasons.
I really need your help with this.
I don't know what I've done to break the Symfony 2 toolbar. The debug tool bars stop showing and when I look at the source code of the page, I can see something like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>hello</h1>
<div id="sfwdt
and then the page terminates. This page I set up for debugging use the simplest HTML layout without using any variable and is not behind a firewall. I simply want to get the debugger toolbar showing. It looks like the debugger did try to load but for some reason it teminate at:
<div id="sfwdt
and breaks the entire page. If I turn the debugger off, the ending tag of the body and html come back.
I've searched for the occurrence of 'sfwdt' and it looks like it is from one of the twig templates of the profiler, however, when I modify that template to try things out, nothing change. Any one can point me to the right direction what's going wrong ?
And there's no error message found. I've comment out all services and keep it to the minimum, still no luck.
AppBundle/Resources/views/layout2.html.twig
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>hello</h1>
</body>
</html>
AppBundle/Resources/views/Default/index.html.twig
{% extends "AppBundle::layout2.html.twig" %}
Sorry, I finally found the issue.
One of the custom bundles registers the kernel.response event and try adding a content-length header to the response. The content-length does not take into account the extra code for the debugger bar and it trims out the extra content added for the debugger toolbar !! and it explains why the page always terminates at <div id="sfwdt, because it takes the same number characters as body and html end tags