라라벨9 widget 사용법 - skin에서 호출

 

라라벨9 widget 사용법 - skin에서 호출

 

 

#> php artisan make:component [위젯이름]

​

예시)

#> php artisan make:component WidgetMemoView

// 이상하게 복사해서 안된다면 직접 치자 에디터의 안보이는값 들어가나보다.

​

​

아래 2개 파일이 생성됨.

/app/View/Components/WidgetMemoView.php << 데이터 처리

/resources/views/components/widget-memo-view.blade.php << html 화면 출력

​

/resources/views/memo/memo_list.blade.php - 호출하는 html 

    // 위젯 사용법 - app/View/Components/WidgetMemoView.php 호출 - 값 전달 방법 
    <x-widget-memo-view :data="['title' => 'Widget Title', 'content' => $arr_return_data['url_go_list'] ]" />

// 전달 데이터 없을시
<x-widget-memo-view />

   // x-widget-memo-view 가 WidgetMemoView.php 파일 호출부분
   // *** 파일생성할때 중간에 대문자 사용시 대문자앞에 - 사용후 소문자 
   //  위젯에 데이터 전달 방법 
   //  :data="['title' => 'Widget Title', 'content' => $arr_return_data['url_go_list'] ]"

 

 

/app/View/Components/WidgetMemoView.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use function League\Flysystem\UnixVisibility\defaultForDirectories;
use function Psr\Log\debug;

class WidgetMemoView extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */

    public $data; 
   
    public function __construct($data)  
    { 
        // 전달받은 데이터
       //  :data="['title' => 'Widget Title', 'content' => $arr_return_data['url_go_list'] ]" /> 이부분 받아옴
        $this->data = $data;

// __construct 안에서 DB데이터 가져오거나 데이터 가공

      $this->data['widget_new_data'] = "widget_new_data"; // 신규 가공 데이터

        
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        /// 위젯 view에 전달
        return view('components.widget-memo-view',['data'=> $this->data ]); 
    }
}

 

 

/resources/views/components/widget-memo-view.blade.php // 여기는 그냥 출력  html


<div class="widget">
    <h1>전달받은 데이터1:{{ $data['title'] }}</h1>
    <p>전달받은 데이터2:{{ $data['content'] }}</p>
    <p>새로만든 데이터:{{ $data['widget_new_data'] }}</p>
</div>
​