This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Laravel Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating a Blade

3:26 with Jonathan Barrios

Now that we’ve covered routes and Controllers, let’s start building our Views. Views, by design, are created using the blade templating engine that comes packaged with Laravel. Views contain the HTML, CSS, and JavaScript that are served by your application and helps separate concerns, or the controller logic from your presentation logic. Let’s navigate to the resources/views directory and take a closer look at how Views work.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Welcome back. 0:04
    Now that we've covered routes and 0:06
    controllers, let's start building our views. 0:07
    Views, by design, 0:11
    are created using the blade templating engine that comes packaged with Laravel. 0:12
    Views contain the HTML, CSS and 0:18
    JavaScript that are served by your application and help separate concerns. 0:21
    That is to say the controller logic is separated from your presentation logic. 0:26
    Let's navigate to the resources/views directory and 0:32
    take a closer look at how views work. 0:36
    So far, almost everything we've created has been through the Artisan CLI. 0:39
    Moving forward we'll take a break from using Artisan and 0:44
    build views using the blade templating engine manually. 0:47
    To illustrate this behavior, let's delete the welcome view and 0:51
    create a new view in the resources/views directory named treehouse.blade.php. 0:56
    Next, we need to add the head, body, nav, main, footer, and script tags. 1:04
    But instead of writing all of this code manually, download the project files for 1:12
    this video below. 1:16
    Next, navigate to the resources/views directory and 1:19
    add the treehouse.blade.php file like this. 1:23
    Next, we need to add our CSS, JavaScript and image folder to the public 1:35
    directory by copying and pasting them from the project files. 1:40
    This will give our blade templates the styling and logic they need to produce 1:46
    complete webpages that the user will see when they visit our application. 1:50
    Now that we've manually created a view using a blade template, we need 1:57
    to add a call to the AppController.php by adding Treehouse inside of 2:03
    the public index function located in the App\HTTP,\Controllers directory. 2:08
    Finally, open the app in the browser again by using 2:18
    that PHP Artisan serve --host = localhost command in the terminal. 2:23
    And you'll see the navigation bar, page links, and the Treehouse logo 2:31
    complete with a Treehouse favicon displayed on every page of our app. 2:35
    Later in this course we'll separate our treehouse.blade.php code from the nav and 2:41
    other files by creating a new file named NAV.blade.php. 2:46
    Separations of concerns can also apply to views, since it helps keep your code DRY. 2:52
    Short for don't repeat yourself. 2:58
    As you can see, creating a blade is pretty straightforward. 3:02
    And with a few blade components we're up and running. 3:06
    Components unleash the true potential of blades, allowing for 3:09
    minimal code reuse and adopting accurate templating. 3:13
    In the next video, we'll dive into include and 3:17
    how it can help your code stay DRY, organised and reusable. 3:20
    See you there. 3:25

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up