How to Create Components in laravel 10

How to Create Components in laravel 10

14-Sep-2024
| |
Image Carousel

Table of Contents

S.no Contents-topics
1 What are components
2 How to setup components
3 How to use components
4 Pass data to components 

1:What are Components

Components are the one of the best feature that comes with laravel , components are define as the reusable peice of code that is being used in laravel blde fiile or we may say that laravel views. As the name defines components means to be a component of a page  , for eg in a html file there are several different components like header , sidebar , footer and sometimes  our header and footers are same but  CSS and scripts file are different according to ech page so on that time we use component.

2:How to setup Components

With an example , we inializing some scripts by using component as component are the piece of code , you may use components in the form of google analytics , some kind of loading scripts ,
Taking an HTML example from Deveoper-Corner , starting from the artisan command for footer  as component
 
Copy for creating footerCopy

php artisan make:component footer

Inside resources/views/components/footer.blade.php  you can see footer.blade.php has been created and also in app/View/Component/footer.php

3:How to use components

That blade file reffers to views in blade and php file is used for binding up the objects and send them to the component in laravel you don't have to send data every time from backend. You have to just send data for the first time in app/View/Component/footer.php and then just inialiaze this component wherever you want.

Basic blade fiile code: Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
 
    <!-- Js -->
    <script src="https://vm-services.tech/developerCorner/js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container">
    <h4 class="mt-4">Welcome To Develpoer-Corner</h4>
       <div>
        <h6 class="mt-4">Using Footer as Component</h6>
 
       </div>
 
        <span id="showContent"></span>
    </div>
</body>
  <!-- Footer Component -->
    <x-footer></x-footer>
</html>

 

As you can see in the footer of this html file component is used as <x-footer></x-footer> in blade file and resources/views/components/footer.blade.php contains the basic footer code like this script code.
Footer code:
  Copy

<div>
    This is footer Component by {{$name}}
</div>
<script>
    $('#showContent').html('Showing footer');
</script>

4:Pass data to components

As shown {{$name}}  variable is call from app/view/Component/footer.php  to resources/views/components/footer.blade.php  to binding up the variables
app/view/Component/footer.php
.code: Copy

<?php
 
namespace App\View\Components;
 
use Illuminate\View\Component;
 
class footer extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
            $this->name = 'Developer-Corner';
    }
 
    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
         $name = $this->name;
        return view('components.footer',['name'=>$name]);
    }
}

Basically we use this footer.php to binding up the objects and call them separately in component because by using thhis this you don;t need to call the same variable in each controller and then in view file  So this the basic example of components in laravel ...

Tags: how to create components in laravel 10 , reusable codes laravel view , how to use piece of code in blade file in laravel 10,laravel , php ,laravel-php , mvc laravel, advance laravel , bugs in laravel , laravel advance level,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More

Newsletter