Blade Template #3 | Extract partials + Paste a list of data

Extract Partial

• Open app.blade.php.
• Imagine you want to extract the below code into a navigational partial.

• Cut out that exact part of the code from app file and create a new file under views named nav.blade.php.
• Paste the code inside nav.
• How to bring navigation inside app? Use a keyword: @include.
• In app body part, write down @include('nav') :

• Refreshing your browser will get you the exact same thing.
• If you want to use the same navigation, simply include the keyword.

Paste a List of Data

• For the routes, make sure to use controller as such:

• Then in HelloController.php, make a fake variable (just to test):

• Don't forget to add compact as the second string.
• Then, in service.blade.php, we only need to use php:

• For this method, you need to make sure service (the variable) actually exist.
• If there is no content in function service (in controller), instead of using @foreach, we can use @forelse.
• forelse allows us to add a new section which is @empty:

• Whatever you put in between @empty and @endforelse will get output if there are no services.
• You can put list item or paragraph that says "No services available".

End

Blade Template #2 | Set Navigation

Simple Navigation (unordered)

• Type the following code inside the body in app.blade.php.

• These 2 routes don't exist yet. Head to web.php and type:

• In controller (prev HelloController.php), create 2 functions about() and service().
• In browser, you'll get something like this:

Now you have navigation, without any repetition.

Side Note

If you have a route that has a get method and hits controller, and inside of that controller, the only thing you are doing is returning a view with no any other actions, there is a shortcut for that.

• In the route, you can do this instead:

• Refresh your browser and everything works well. Except now you don't have to use a controller.

This is a shortcut to get a view in your page right away.

End

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

Note | Taskman (create tags)

1. Clone taskman (follow previous tutor) from GitLab.

2. Open folder taskman (cloned. in xampp htdocs).

3. Terminal > New Terminal > Install dependencies, type composer install.

4. Wait until finish.

5. Copy .env files. Type cp .env.example .env.

6. Serve the app. Type php artisan serve. Can copy http link and paste in the browser.

7. New terminal, type as below, to create model and controller:

8. Add route at web.php.

9. Create migration. ctrl+p search migrate. Create a new file. Set the name as the date when you created the file and what you want to do.

10. Under resources/views/tags, add form.blade.php and list.blade.php. Form for creating new tags and list for listing out all tags created.

Merge

1. Click branch (bottom left icon) > Create new branch > put initial (z). Check bottom left if branch is created.

2. Source Control menu > Stage changes (Click now new 'U' ones created or 'M' changes) that you made > add Message (same as branch name) > click Commit icon (right icon).

3. Open GitLab and create a new merge request (in the project GitLab). Assign to PIC. Uncheck delete branch and check whether the changes to commit are correct.

Correction (10/5)

• TagsController > add() to create() (standardized function name).
• TagsController > add_process() to store().
• form.blade.php > tags.add_process to tags.store.
• web.php > add_process to store.
• web.php > add to create.

End