𝙅𝙃𝙐𝙀𝙄
文章 標籤 分類 系列
𝙅𝙃𝙐𝙀𝙄

Laravel Backend Control Website - 12

Kerwin  收錄於  類別 CODE 和 系列 Laravel Backend Control Website
     約 1326 字   預計閱讀 3 分鐘 
系列 - Laravel Backend Control Website

選單管理 - Menu Manage

上一篇 新增了選單管理，這篇就是要將 導覽列、選單及 頁面 三者串連起來。

  • 選單名稱唯一(Unique)。
  • 如有設定連結，點擊選單則跳轉到該頁面。
  • 清單顯示意指所有 頁面設定 連接該選單的頁面以條列式一一顯示。
  • 非清單顯示意指顯示 更新時間 最新的頁面。
  • 連結設定請參照導覽列 一般頁面 設定。
  • 頁面網址唯一(Unique)。
  • 頁面網址用來定義該頁面位置，所以只須給名稱即可，ex:Page1。
  • 在選單的清單顯示中，頁面以 更新時間 新到舊進行排序。

之前有在 pages 資料表建立 menu_id 的欄位，現在要在 Page 的新增、修改及首頁加入 menu_id 的新增修改表單。

create.blade.php :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

...略...
@csrf
<div class="form-group row">
    <label for="menu_id" class="col-md-4 col-form-label text-md-right">{% raw %}{{ trans('Menu') }}{% endraw %}</label>
    <div class="col-md-6">
        <select class='form-control' name='menu_id' aria-describedby="menuHelp">
            <option value=''>{% raw %}{{ trans('Please choose').trans('Menu') }}{% endraw %}</option>
            @foreach($menus as $key => $value)
                <option value="{% raw %}{{ $value['id'] }}{% endraw %}">{% raw %}{{ $value['name'] }}{% endraw %}</option>
            @endforeach
        </select>
        <span id="menuHelp" class="help-block">
            選擇要加入的導覽列項目。
        </span>
    </div>
</div>
...略...

edit.blade.php :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

...略...
@csrf
@method('PUT')
<div class="form-group row">
    <label for="menu_id" class="col-md-4 col-form-label text-md-right">{% raw %}{{ trans('Menu') }}{% endraw %}</label>
    <div class="col-md-6">
        <select class='form-control' name='menu_id' aria-describedby="menuHelp">
            <option value='NULL' {% raw %}{{ ($page->menu_id) ? "selected" : "" }}{% endraw %}>{% raw %}{{ trans('Please choose').trans('Menu') }}{% endraw %}</option>
            @foreach($menus as $key => $value)
                @if ($value['id'] == $page->menu_id)
                    <option value="{% raw %}{{ $value['id'] }}{% endraw %}" selected>{% raw %}{{ $value['name'] }}{% endraw %}</option>
                @else
                    <option value="{% raw %}{{ $value['id'] }}{% endraw %}">{% raw %}{{ $value['name'] }}{% endraw %}</option>
                @endif
            @endforeach
        </select>
        <span id="menuHelp" class="help-block">
            選擇要加入的導覽列項目。
        </span>
    </div>
</div>
...略...

接下來根據重點 1~3 在 MenuController.php 建立以下 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/**
* [menus description]
* @param  [type] $nav  [選取的導覽列]
* @param  [type] $menu [選取的選單]
* @param  [type] $menus_nav [導覽列下所有的選單資料]
* @param  [type] $select_menu [選取的選單資料]
* @param  [type] $menu_pages [選取選單下所有頁面的資料]
* @return [type]       [description]
*/
public function menus($nav,$menu)
{
    $navbar = Navbar::where('name',$nav)->first();
    $menus_nav = Menu::where('navbar_id',$navbar->id)->where('is_open',1)->orderby('sort')->get();
    $select_menu = Menu::where('name',$menu)->first();
    if (empty($select_menu)) {
        abort(404);
    }

    if ($select_menu->is_list == '1') {
        $menu_pages = Page::where('is_open',1)->orderby('updated_at','desc')->paginate(10);
    }
    else {
        $menu_pages = Page::where('menu_id',$select_menu->id)->where('is_open',1)->orderby('updated_at','desc')->first();
    }

    return view('menu',compact('menus_nav','select_menu','navbar','menu_pages'));
}

路由新增 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

...略...
Route::get('/article/{nav}/{menu}?{page}', function () {return view('menu');})->name('page');
Route::get('/article/{nav}/{menu}', 'MenuController@menus')->name('menu');

View::composer(['*'], function ($view) {
    if (Request::getQueryString()) {
        $current_page = App\Page::where('url', $_SERVER['QUERY_STRING'])->first();
        $view->with('current_page', $current_page);
    }
  $pages = App\Page::where('is_open',1)->orderby('updated_at')->get();
  $view->with('pages',$pages);
    ...略...
});

解釋時間 :

  • $nav 和 $menu 分別是導覽列以及選單的 名稱。
  • 比如說點擊了名為 menu1 的選單且導覽列為 nav1，控制器14~17行判斷該選單是否存在。
  • 若選單存在則19行判斷是否為清單顯示。

視圖新增 :

menu.blade.php :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

@extends('_layouts.home.app')
@section('title',$select_menu->name)
@section('content')
{% raw %}{{-- 頁面顯示 --}}{% endraw %}
@if(Request::getQueryString())
    <div id="content" class="col-md-12">
        <div class="card border-light" style="border: none;">
            <div class="card-header bg-transparent">
                <h1><b>{% raw %}{{$current_page->title}}{% endraw %}</b></h1>
            </div>
            <div class="card-body">
                {!! clean($current_page->content) !!}
            </div>
            <div class="card-footer bg-transparent">
                <p><span class="badge badge-pill badge-primary">{% raw %}{{ trans('Editor').' : '.$current_page->editor }}{% endraw %}</span></p>
                <p><span class="badge badge-pill badge-primary">{% raw %}{{ trans('Created_at').' : '.$current_page->created_at }}{% endraw %}</span></p>
                <p><span class="badge badge-pill badge-primary">{% raw %}{{ trans('Updated_at').' : '.$current_page->updated_at }}{% endraw %}</span></p>
            </div>
        </div>
    </div>
{% raw %}{{-- 是否清單顯示 --}}{% endraw %}
@elseif($select_menu->is_list)
    <div id="content" class="col-md-12">
        <div class="card border-light" style="border: none;">
            <div class="card-header bg-transparent">
                <h1><b>{% raw %}{{$select_menu->name}}{% endraw %}</b></h1>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless">
                        <tbody>
                        @foreach($menu_pages as $page)
                            @if($page->menu_id == $select_menu->id)
                            <tr>
                                <td width=10%>{% raw %}{{ $page->updated_at->format('Y/m/d') }}{% endraw %}</td>
                                <td><a href="{% raw %}{{ route('page', [$navbar->name,$select_menu->name,$page->url]) }}{% endraw %}">{% raw %}{{ $page->title }}{% endraw %}</a></td>
                            </tr>
                            @endif
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer pagination justify-content-center bg-transparent">
                {!! $menu_pages->links("pagination::bootstrap-4") !!}
            </div>
        </div>
    </div>
@else
    <div id="content" class="col-md-12">
        <div class="card border-light" style="border: none;">
            <div class="card-header bg-transparent">
                <h1><b>{% raw %}{{$menu_pages->title}}{% endraw %}</b></h1>
            </div>
            <div class="card-body">
                {!! clean($menu_pages->content) !!}
            </div>
        </div>
    </div>
@endif
@endsection
  • 一開始先判斷是否有 QUERY ，有的畫直接判斷為頁面，若無則為選單。

總結，後台新增順序為 導覽列 » 選單 » 頁面

導覽列(導覽目錄)可以有很多選單，選單(清單顯示)可以有很多頁面

你可以照自己的想法去做修改🥱

更新於 2020-06-11
閱讀原始文檔
 laravel, php, html, javascript, menu, htmlpurifier, page, navbar
返回 | 主頁