Trending September 2023 # What Are The Components Of Laravel? # Suggested October 2023 # Top 10 Popular

You are reading the article What Are The Components Of Laravel? updated in September 2023 on the website Phuhoabeautyspa.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 What Are The Components Of Laravel?

Introduction to Laravel Components

Laravel Components are used to build reliable and extensible systems. They let us build large applications which are made up of reusable, independent and decoupled components. Laravel provides us so many tools to help building reliable web applications and cutting down the development time to significant levels. Laravel is magnificently composed of components that are reusable and are efficiently defined and compiled together to bring up the whole system.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

What are the Components of Laravel?

Let us make it more clear by taking an example. Suppose you wish to create some kind of button that will be used at various places within your application. So what you can do here is build the button as a component and then it can be called whenever you want a button in the application.

1. Building a Component

In order to understand the concept of building components more clearly, let’s learn it in small chunks. So we have divided the whole process into some easily understandable small steps which are as follows:

Step 1: Firstly, we will need to create our new directory. This new directory will be residing in the Resources directory. A structure like the one written below will be there on your side:

resources/views/layouts/components

Step 2: Now you have to create a new file that you have to save under the ‘components’ directory which was created in the previous step. We will call it ‘navbar.blade.php’.

Step 3: Now write the following code for Navbar to chúng tôi file. Any IDE can be used(like sublime).

Example #1

Code:

This code will yield a navigation bar as shown below:

Output:

Example #2

Let’s look into another navbar example as follows:

Code:

Dropdown link

Output:

2. Using a Component

So far we have created our directory ‘components’, created a new file ‘navbar’ and written code into chúng tôi Finally, we are going to use this component. Inside directory ‘views’, let’s suppose a page of your application like chúng tôi use the blade directive as shown below:

@endcomponent

You have used your very first component. But this is a hardcoded navbar. And it is not a good idea to use this while building a modern dynamic application project. Let’s do a bit of modification in navbar tags in file navbar.blade.php.

Now we will add brandName variable into the navbar code, keep an eye on the modifications done in the previous code we wrote for the navbar. We are just showing the part of the coding where modifications have been performed.

If you wish to pass values to your component, you can do so by injecting a variable with the help of blade-directive. Let’s see the coding showing the use of directive ‘@slot’ as follows:

@slot(‘brandName’) value and it could be anything @endslot @endcomponent

Example @component('alert') @slot('title') Forbidden @endslot You are not allowed to access this resource! @endcomponent

Here the content which is not in directive @slot will be passed through variable $slot to the component.

A better way to use components is described as follows:

For this to work, we have to add the below-mentioned code to ‘boot()’ function in file

app/providers/appServiceProvider.php.

Here in the code, the first parameter is the location of the component and the second parameter is the new name you want to give to it (navbar in our case). You might have heard about this process before which is known as aliasing. Now you just have to call @navbar in order to call your component.

You can exclude the parameters of the component if there are no added slots.

@alert You are not allowed to access this resource! @endalert

Note: You have to either add the following line of code before your class name or import Blade Facade in chúng tôi use IlluminateSupportFacadesBlade.

Your component has been renamed now and you are free to call your component from any point in your application project using just @navbar.

Let’s see how you will call your component as below:

@endnavbar

You have now successfully called the component navbar and passed data to it.

Now, this component can be reused whenever and wherever you want in your application development project.