Note | Laravel + Blade Template #1

What is routes?

• How we tell Laravel, how to respond to different addresses.
• In VS Code > Directories > routes > web.php (only interested in this).

The slash '/' meaning nothing or no route is returning the view 'welcome'.

What is views?

• This is a helper function.
• As shown in pic above, to know how 'welcome' translates to a whole html, go to resources > views. You'll see welcome.blade.php.
• Views need to labeled as so.
• Use bladder to make it simple.

What is controller?

• To pull all codes from web.php, into a dedicated file (controller).
• Like a conductor of an orchestra. Doesn't play any instrument, and conducts upfront, everybody follows him and does what needs to be done. Didn't play any part, but knows when it is someone's turn to play their part. He cues them.
• Type php artisan make:controller ExController to create new controller.
• The directory: app > Http > Controllers.
• Can use new naming for action in web.php (route), App\Http\Controllers\ExController@index (change function).

What is Blade?

• A templating engine that comes with Laravel.
• Can be used to compose all views.

Let's do an intro exercise to look at how it functions.

1. resources > views > delete all existing files and create a new one named app.blade.php.

2. In web.php (route), notice that we're still using HelloController.

3. app > Http > Controllers > HelloController.php. Change the contact of index() function as below:

4. Open app.blade.php, write a simple <h1> and run php artisan serve.

5. Open in browser. Sure enough, it's working.

Now, we'll focus in app.blade.php created earlier. In the file, type '!' and click enter. You'll get basic HTML coding. If you put <h1> or <p>, by right nothing changes and it still is just a basic HTML page. If you create another blade (eg: about.blade.php), you'll have to generate the HTML all over gain.

There's a way not to have us generate the same HTML over and over for every single page. We'll make one of the view page (app.blade.php) as a TEMPLATE.

Blade Template

• A way to tell Laravel that that view can be extended.
• Need to designate certain areas where the user would be able to customize the text. Eg, the title. We don't want the title to be hard-coded. To do that, we'll use the @yield keyword.

@yield

• Inside this, we need to pass a key to target where.
• In app.blade.php, try typing as below:

• To make about.blade.php look at app, we'll write @extends('app'). About page will contain everything in app.
• To change/customize the title, add @section('title', 'About Us').
• To test it out, in our controller, change the view to about.
• Go to browser, refresh, and you'll notice that the title is now changed but the content is the same as the one written in app page.
• To check, you can view page source.
• Another section that'd make sense is the body area. Inside body tag, place @yield('content') as so:

• Here is where the key @section in blade page will be different.

@section and @endsection

• It does not make sense to put html codes in the second string of @section. Hence why we can use @endsection.
• Here's an example of about page:

• app.blade.php is now simply our template file.
• Try refreshing your browser and see the result.

End