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.

Getting Started – Views in Laravel 5.3

In the last tutorial we have seen a way to get text output. You can also return whole HTML code in the output, but that will make the routes file little bit ugly and hard to read. Instead of using HTML code there, view method is called. So whenever view method is called upon, it search for the view file inside the resources/views folder. These files are called blade template file. So let’s get started with it.

First we will modify the ‘/’ (root) route from the routes file i.e. we will edit routes/web.php file. Delete all content from that file and add following lines to it.

In above code, we are returning view of index. The above code will call the index.blade.php file from resources/views folder. Since this file doesn’t exists right now, we will create one.  We will create file at resources/views/index.blade.php and add any HTML code which we would like to see.

Once done adding HTML code to the file, hit the php artisan serve command and visit our development site URL.

We can arrange views in folders. For example to access view file at resources/views/somefolder/somesubfolder/somefile.blade.php the return view will be like

In above example, each of the ‘.’ (dot or period character) denotes a folder.