---
tags: laravel,voyager
---
# Voyager實作
## 可用指令
安裝Voyager套件(針對Laravel5)
composer require tcg/voyager:"1.2.7"
安裝Voyager套件(針對Laravel6~8)
composer require tcg/voyager
賦予現有使用者admin@admin.com管理員權限
php artisan voyager:admin admin@admin.com
建立新使用者admin@admin.com並賦予管理員權限
php artisan voyager:admin admin@admin.com --create
安裝Voyager資料
php artisan voyager:install
## Helper Function
```
//從public資料夾取出1.jpg
asset('1.jpg');
//從storage/app/public資料夾取出1.jpg
Voyager::image('1.jpg');
```
### 開發自己的Widgets
Step 1.從vendor/tcg/voyager/src/Widgets複製Widget範本
Step 2.在App/Http/Widgets用範本新增一個Widget
Step 3.編輯Widget類別的run()與shouldBeDisplayed()，範例如下
```
public function run()
{
$count = Voyager::model('User')->count();
$string = "共計使用者{$count}位";
return view('voyager::dimmer', array_merge($this->config, [
'icon' => 'voyager-backpack',
'title' => "{$count} 個使用者",
'text' => $string,
'button' => [
'text' => "查詢使用者",
'link' => route('voyager.users.index'),
],
'image' => Voyager::image('people.png'),
]));
}
/**
* Determine if the widget should be displayed.
*
* @return bool
*/
public function shouldBeDisplayed()
{
//return Auth::user()->can('browse', Voyager::model('User'));
//不論登入者是誰，總是要顯示Widget
return true;
}
```
Step 4.編輯config/voyager.php，加入Widget設定
```
'widgets' => [
'App\Http\Widgets\UserWidget',
],
```
## 複寫users使用者的編輯視圖
Voyager的使用者編輯視圖所在路徑
vendor/tcg/voyager/resources/views/users/edit-add.blade.php
Step 1.將上面的檔案複製到resources/views/vendor/voyager/users
Step 2.編輯edit-add.blade.php，加入所需要新增的欄位，如下例:
```
<div class="form-group">
<label for="age">年紀</label>
<input type="number" class="form-control" id="age" name="age" value="{{ old('age', $dataTypeContent->age ?? '') }}">
</div>
<div class="form-group">
<label for="pic">圖片網址</label>
<input type="text" class="form-control" id="pic" name="pic" value="{{ old('pic', $dataTypeContent->pic ?? '') }}">
</div>
```
Step 3.確保該表格的BREAD有更新
## 媒體管理員
PS:如果出現上傳檔案過大的問題，你可以變更php.ini裏頭的max_file_upload和file_upload_size設定
## menu builder
### 取用menu資料語法
```
menu(菜單名稱)
menu(菜單名稱,樣式檔名)
menu(菜單名稱,"bootstrap") 以bootstrap作為樣式
menu(菜單名稱,"_json") 以JSON格式作為樣式
```
### menu菜單樣式範例
菜單樣式的視圖檔存放於 resources/views資料夾內
```
<ul class="myclass menuclass">
@foreach($items as $menu_item)
<li class="liclass"><a href="{{ $menu_item->link() }}">{{ $menu_item->title }}</a></li>
@if(count($menu_item->children)>0)
@foreach($menu_item->children as $menu_sub_item)
<li class="liclass"><a href="{{ $menu_sub_item->link() }}">{{ $menu_sub_item->title }}</a></li>
@endforeach
@endif
@endforeach
</ul>
```
### Database
當用資料庫頁面生成生成/變更結構，如何轉換成Migration檔案
Laravel 5版本 透過套件 [Migrations-generator](https://github.com/Xethron/migrations-generator)
Laravel 6以上版本 [透過網頁服務](https://laravelarticle.com/laravel-migration-generator-online)
### 指南針
提供Voyager教學資源.Icon類別.CLi呼叫面板.Log檢視
在正式環境開啟Compass指南針頁面
```
//config/voyager.php
// Activate compass when environment is NOT local
'compass_in_production' => true,
```
### BREAD
提供各表格的後台新增.刪除.修改與查詢功能，可說是Voyager套件的核心
BREAD基礎設定
顯示名稱單複數 作為頁面所呈現的文字
URL Slug 用於生成BREAD的路徑，一般與表格名稱相同
使用圖標 於後台選單項目所顯示的ICON
模型名稱 該表格的模型類別，包含命名空間
控制器名稱 BREAD所使用的功能，如無須複寫預設功能可留空白
Policy名稱 BREAD所使用的政策，一般用於資料層級的權限設計
權限生成 一併生成該表格相關的權限，必須有權限才能使用該表的BREAD，一般都設為"是"
伺服器端分頁 Browse頁面的分頁功能是否由後台提供，是的話功能較完整，建議選"是"
順序欄位 設定該表格用於儲存順序的數字欄位
顯示順序欄位 用於編輯順序功能頁面，各資料所顯示的欄位內容
order direction 排序方式
Default server-side search field Browse頁面的搜尋欄預設針對哪個欄位
欄位列表區域
欄位字段順序 會影響Browse.Read等所有BREAD頁面的欄位呈現的順序。設為必塡的欄位同樣會在表單被驗證必須填入
可見性 決定該欄位在各BREAD頁面是否出現，也會影響到能否儲存與更新
輸入類型 決定該欄位的輸入項類型
顯示名稱 決定該欄位的標頭名稱
可選細項 用以加入該欄位的參數，作為自定義的主要手段
#### 可選細項列表
> 重要事項
*輸入的最後一項不可以加逗號，會出錯
*不可以使用單引號，須改用雙引號
一般類
* description 輸入項下方問號提示
* default 預設內容
* validation 驗證
* rules 要驗證的規則
* validation 當驗證不過時要顯示的自定義文字
* null 空值的處理
* diplay 顯示
* id 在外圍的div標籤加入id屬性
* width 設定輸入項的寬度，最大為12，最小為1
Checkbox
* on 開啟的文字提示
* off 關閉的文字提示
* checked 預設的狀態
Select Dropdown
* options 選項
* default 預設選項
Media Picker
* min 最少圖片數
* max 最多圖片數
* resize 進行縮圖
* quality 壓縮品質
* upsize 是否支援放大
* thumbnais 縮圖定義
* watermark
* source 浮水印圖片所在位置，根目錄為storage/app/public
* position 浮水印的位置
* x X軸位移
* y Y軸位移
* size 相對於圖片的大小，預設為15
* base_path 預設開啟路徑，如不設定則為與表格名稱相同的資料夾
* allowed 可上傳的類型，例如:["image", "audio", "video"]
### Role 角色
用來設定使用者的權限
Name 寫英文，用於程式
Display Name 可寫中文，用於顯示
權限 要給該角色的權限就打勾
權限術語:
* browse 瀏覽多筆資料
* read 瀏覽單筆資料
* edit 編輯資料
* add 新增資料
* delete 刪除資料
權限關鍵字: 權限術語 + _ + slugs
如果某個菜單項目和BREAD有關，它將會檢查其Browse權限，需要有Browse權限該菜單項目才會顯示
### Settings 設定
管理可於專案內使用的設定常數，可支援多種欄位
新增設定欄位說明
* 命名 讓管理員能理解該設定的功用，可輸入中文
* 鍵 存取該設定時所用的關鍵字
* 類型 該設定於編輯時所使用的輸入項
* 組 該設定所屬群組，可選擇既有群組，也可輸入新的群組名來新增
* 選項 如類型為下拉選單，可在此編輯選單的項目，如下例
```
{
"options" : {
"key1" : "選項1",
"key2" : "選項2"
},
"default" : "key1"
}
```
### Helper Function
//取用設定
setting('群組名.鍵')
//生成storage/app/public裡頭圖片的完整網址
Voyager::image('圖片路徑')
### 縮圖使用
需有縮圖欄位的表格Model加入Resizable traits才能用此功能。
//app/Post.php
**use TCG\Voyager\Traits\Resizable;**
class Post extends Model{
**use Resizable;**
}
顯示單一圖片範例
```
@foreach($posts as $post)
//顯示image欄位的小圖
<img src="{{Voyager::image($post->thumbnail('small'))}}" />
//顯示photo欄位的小圖
<img src="{{Voyager::image($post->thumbnail('small', 'photo'))}}" />
@endforeach
```
顯示多張圖片範例
```
@foreach($posts as $post)
$images = json_decode($post->images);
@foreach($images as $image)
<img src="{{ Voyager::image($post->getThumbnail($image, 'small')) }}" />
@endforeach
@endforeach
```
### 取用Browse頁面所選擇的項目
Step 1.將連結或按鈕改成以下寫法
```
<form action="{{ route(路由名稱) }}" id="表單ID" method="POST" style="display:none">
{{ csrf_field() }}
<input type="hidden" name="ids" id="參數ID" value="">
</form>
<a onclick="event.preventDefault();document.getElementById('表單ID').submit();" class="btn btn-success">
<i class="voyager-polaroid"></i> <span>按鈕文字</span>
</a>
```
Step 2.加入以下的script
```
<script>
$('input[name="row_id"]').on('change', function () {
var ids = [];
$('input[name="row_id"]').each(function() {
if ($(this).is(':checked')) {
ids.push($(this).val());
}
});
$('#參數ID').val(ids);
});
</script>
```
Step 3.在Controller取用ids的作法
```
$ids = [];
if (empty($id)) {
// Bulk action, get IDs from POST
$ids = explode(',', $request->ids);
} else {
// Single item action, get ID from URL
$ids[] = $id;
}
```
Sign in with Wallet
Connect another wallet