Blade Template – Beginners level tips for Laravel 5.3

As we have seen in previous tutorial we have echoed date. In this tutorial we will learn some more advance stuffs in blade template engine

Now the above example can be further simplified using only following code :

{{  echo date('l jS \of F Y h:i:s A'); }}

The curly brackets used are template shortcut for echo function. But double curly brackets are used to prevent the code from XSS attacks by stripping HTML entities. To overcome this we can use

{!!  echo date(‘l jS \of F Y h:i:s A’);  !!}

 

Lets take an example to understand this. If you pass data from your controller to view with some styling like as
$var = "<b>Hello</b>";
and if it is accessed within blade with {{ $var }}

then the output’ll be
<b>Hello</b>
and if it is accessed within blade with {!! $var !!}

then the output’ll be

Hello

Now the question arises, what if I have to use {{ $var }} in my code, for eg. in angular js, variables are called that way only, how to do it. It is pretty simple: use:

@{!! $var !!}

In case you want to comment anything in your blade file, it can be done as following:

{{ -- This is comment, and will not be rendered in HTML output --}} 

In starting you might feel little bit awkward to use these new things, but in long run it not only makes code look more cleaner, but also very easy to understand. In next tutorial we will see how to use for loop

Getting Started – Using PHP functions in blade template files

There are many useful PHP functions which an developer might use from time to time in their application. To use PHP in a blade there are two methods:

  1. Traditional method
  2. Blade Template method

Traditional Method

You can simply insert your PHP code within php tags and it will work. For example:

The above will echo something like: Sunday 22nd of January 2017 09:25:00 PM

But it is good and easy to use Blade Template method.

Blade Template Method

above PHP code can be passed as following way:

So in above example, @php and @endphp is replaced as <?php and ?>

 

Getting Started – Where to store my CSS and JS in Laravel 5.3?

So now a nice HTML page can be designed, it is common practice to use CSS and JS externally in page. The question arises, where to store our CSS and JS files to be used with Laravel?

All CSS & JS should be placed under public directory under root of your project directory. It can be called in blade file as

{{ URL::asset('css/cssfile.css') }}

For example a css.css file from css folder under public directory ( public/css/css.css) can be called as :

<link href="{{ URL::asset('css.css') }}" rel="stylesheet">

Alternatively, if you don’t want to go this long, you can call it directly as:

<link href="css/css.css" rel="stylesheet">

The above example is also valid for JS files. Now the question arises, why there is JS and CSS folder inside resources folder?

The answer is those are file which are uncompiled and need to compiled using proper compiler. For example app related CSS can be there with SASS or LESS code and it will be compiled with required package and used within the app. We will cover that in upcoming tutorials.