Learning Laravel: Eyeing Up Views
Tags: laravel, views, learning, php
Published: 2017-12-29 21:37:45

---
title: "Learning Laravel: Eyeing Up Views"
published: true
description: A website won't be of much use to your users if there's nothing for them to look at. That's where views come into play. Learn how to use the Blade templating language so you can create views and show off your site with this Learning Laravel article.
tags: laravel,views,learning,php
canonical_url: https://www.nathanheffley.com/blog/learning-laravel-eyeing-up-views
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pesawwwnq5ipwvb26kqk.png
---

*Originally posted on [nathanheffley.com](https://www.nathanheffley.com/blog/learning-laravel-eyeing-up-views)*

Now that we've started learned how to set up some basic routes (go check out [Really Radical Routing](/blog/learning-laravel-really-radical-routing) if you haven't created any routes yet), lets give our site visitors something to look at that's a bit nicer than some plain text

Views will allow you to use a templating engine called Blade to create HTML pages with ease. You can check out the default page that gets created when you first make a Laravel project inside `resources/views/welcome.blade.php`.

Within that file, you'll see a basic HTML page with some Blade-specific content. Here's the file with some of the extraneous content taken out:

```
<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <!-- HEAD CONTENT -->
  </head>
  <body>
    <div class="flex-center position-ref full-height">
      @if (Route::has('login'))
        <div class="top-right links">
          @auth
            <a href="{{ url('/home') }}">Home</a>
          @else
            <a href="{{ route('login') }}">Login</a>
            <a href="{{ route('register') }}">Register</a>
          @endauth
        </div>
      @endif
      <div class="content">
        <!-- PAGE CONTENT -->
      </div>
    </div>
  </body>
</html>
```

The first example of some blade templating is encountered within the first two lines. The most basic way to use Blade is to simply use it as a way to output the value of some PHP code to the page. The way that you let Blade know that you want to evaluate a snippet of PHP code and put the result directly into the HTML code is to use double curly braces.

```
<html lang="{{ app()->getLocale() }}">
```

Blade will encounter this line, evaluate the code within the curly braces (in this example it's a call to a function) and then output the result of that function into the `lang` attribute of the HTML tag. In this example, `app()->getLocale()` is a special Laravel function to get, of all things, the current locale.

Further down in the file, we encounter something a little more interesting.

```
@if (Route::has('login'))
  <!-- inner stuff -->
@endif
```

If you're an astute reader, you may have already guessed that is an `if` statement just like you would use in regular PHP code. This is simply checking to see if a `login` route exists. Anything that is within one of these `@if/@endif` sections will only be output/evaluated if the conditional is true. If you want to get technical, in Blade templating speak, this is called an "if directive". Any time you see an `@` symbol with a keyword in a Blade file, you're looking at a directive.

These directives are what make Blade really powerful. In a future post we may look into creating our own directives, but for right now we'll look at a special one that Laravel offers out of the box:

```
@auth
  <a href="{{ url('/home') }}">Home</a>
@else
  <a href="{{ route('login') }}">Login</a>
  <a href="{{ route('register') }}">Register</a>
@endauth
```

This directive checks to see if the current user is authenticated (logged in) to the site. Normally you would have to use an if statement to check if the user is authenticated, but this handy-dandy directive hides all that messy code behind and nice simple `@auth` keyword. Because this is basically an `if` statement in disguise, you can use `else` just like you normally would. These directives are what gives Blade some of the magic that makes it much nicer for templating than straight PHP code.

Now that you understand what curly braces and directives mean in templates, let's create our own view to use in place of that boring "Hello, World!" from the last article.

Create a new file in the `resources/views` directory called `layout.blade.php` and inside of it we'll setup the outline of any HTML document.

```
<!DOCTYPE html>
<html>
  <head>
    <title>Learning Laravel</title>
  </head>
  <body>
    @yield('content')
  </body>
</html>
```

This `@yield` directive is one of the more important directives that you'll be using when creating Blade templates. It allows you to _extend_ this template file and place more code right where the `@yield` is. The parameter that `yield` takes allows you to create multiple sections and place them in different places. You can have as many `yield` directives as you want as long as they have different names. Pretty nifty! Now let's create the actual view for our route. Make one more file in `resources/views` and name it `hello.blade.php`.

```
@extends('layout')

@section('content')
  <h1>Hello, World!</h1>
@endsection
```

Here we use the `@extends` directive to tell Blade which file we want to _extend_ and because Blade is so clever, it knows that all template files will end in `.blade.php` so we can leave that bit off and just give it the first part of the filename. Then we use the `@section` directive and pass it the same value that we gave to the `@yield` directive in the layout file. This is how Blade knows where this section belongs in the layout template.

Now that we have our very own view created, let's go back to the `routes/web.php` file and open it up again. Go to where we defined our `/hello` route in the previous lesson and change it so that we return a view instead.

```
<?php

Route::get('/hello', function () {
    return view('hello');
});
```

Just like Blade, Laravel knows that our file will end in `.blade.php` so we can leave that off. Now if you save that and check out your site's route (most likely at [localhost:8000/hello](http://localhost:8000/hello)) you should see an actual HTML page with an `h1` instead of just plain text.

You now how everything you need to create a site with Laravel! You can create routes, display actual HTML pages, and even do a little bit of programming logic if you want. But putting code in the route file isn't a great way to keep things organized, and just returning basic pages isn't very interesting. In the next lesson we'll look at a brief overview of the project we'll build together to learn how you can use Laravel to build real-world projects. Make sure to check back so you don't miss it!