Laravel5でAdminLTEを使用します。

Laravel5 での AdminLTE の使用*

Laravel5 での AdminLTE の使用*

AdminLTE は、HTML と CSS テンプレートのみから構築された優れたバックエンドです。この記事では、 AdminLTE と Laravel をエレガントに統合する方法について説明します。Bower を使用して、AdminLTE をタイムリーに更新および管理できます。

使用ツール

1. Laravel
   
2. AdminLTE 2.3.2
   
3. Bower
   
4. Composer

新しい Laravel をダウンロードします

よくわからない場合は、公式 Web サイトにアクセスしてドキュメントのリンクを参照してください
ここではコマンドラインを使用できます直接

<code>    composer create-project laravel/laravel myapp --prefer-dist</code>

このコマンドを使用して、myapp という名前の新しい Laravel プロジェクトを作成します。成功すると、下の図が表示されます。

Bower 経由で AdminLTE をダウンロードします

myapp/public フォルダーに移動します

<code>   cd myapp/public</code>

このフォルダーで次のコマンドを実行します

<code>    bower install admin-lte </code>

完了すると、追加の bower_componets ファイル フォルダーが見つかります。このフォルダーには AdminLTE が表示されます

AdminLTE の starter.html を Blade テンプレートに変換します

Laravel は、ここで優れたテンプレート エンジン Blade を使用しています。Blade を最大限に活用するには、以下を適用する必要があります。いくつかの一般的な HTML スタート ページを Blade テンプレートに変換します。まず、resources/views フォルダーにビューを作成し、admin_template.blade.php という名前を付けてから、このページに対応するビューを作成します。以下のように、

<code>    Route::get(&#39;admin&#39;, function () {        return view(&#39;admin_template&#39;);    });    </code>

を作成しました。次に、bower_components/admin-lte/starter.html のコンテンツをビュー テンプレートにコピーし、その中の関連リンクを AdminLTE
css の対応するディレクトリと、 js で対応するディレクトリを指定し、localhost:8000/admin を使用してページの変更を確認します。このとき、ページは次のようになります。 AdminLTE のすべてのリソースを追加して、メイン ビューに最後の仕上げを加えましょう。このテンプレートを
、、

の 3 つのファイルに分割します。これらは sidebar.blade.php ヘッダー部分です。 、サイド部分、フッター部分の3つの部分を切り出し、3つのファイルに順番に入れます。 header.blade.phpfooter.blade.php最後の仕上げ
admin_template.blade.php テンプレートを個別にパーソナライズしたので、次に示すように、コンテンツを動的にロードできるように最初の

テンプレートを設定する必要があります。 🎜>

上記のコードでは、メイン コンテンツを含む admin_template.blade.php を追加し、さまざまなページのページ タイトルを追加して、名前を
に変更しました。これで、このカスタム Blade レイアウトを使用する準備が整いました。

<code>@include(&#39;header&#39;)<!-- Sidebar -->@include(&#39;sidebar&#39;)<!-- Content Wrapper. Contains page content --><div class="content-wrapper">    <!-- Content Header (Page header) -->    <section class="content-header">        <h1 id="page-title-or-Page-Title-small-page-description-or-null-small">            {{ $page_title or "Page Title" }}            <small>{{ $page_description or null }}</small>        </h1>        <!-- You can dynamically generate breadcrumbs here -->        <ol class="breadcrumb">            <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>            <li class="active">Here</li>        </ol>    </section>    <!-- Main content -->    <section class="content">        <!-- Your Page Content Here -->        @yield(&#39;content&#39;)    </section><!-- /.content --></div><!-- /.content-wrapper --><!-- Footer -->@include(&#39;footer&#39;)</code>

テスト ページ

contetnこれまでに行ったことを確認するために、簡単なページ dashboard.blade.php

1 を作成します。

2

test.blade.php

<code>@extends(&#39;dashboard&#39;)@section(&#39;content&#39;)<div class=&#39;row&#39;>    <div class=&#39;col-md-6&#39;>        <!-- Box -->        <div class="box box-primary">            <div class="box-header with-border">                <h3 id="Randomly-Generated-Tasks">Randomly Generated Tasks</h3>                <div class="box-tools pull-right">                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>                    <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>                </div>            </div>            <div class="box-body">                @foreach($tasks as $task)                    <h5 id="task-name-small-class-label-label-task-color-pull-right-task-progress-small">                        {{ $task[&#39;name&#39;] }}                        <small class="label label-{{$task[&#39;color&#39;]}} pull-right">{{$task[&#39;progress&#39;]}}%</small>                    </h5>                    <div class="progress progress-xxs">                        <div class="progress-bar progress-bar-{{$task[&#39;color&#39;]}}"   style="max-width:90%"></div>                    </div>                @endforeach            </div><!-- /.box-body -->            <div class="box-footer">                <form action=&#39;#&#39;>                    <input type=&#39;text&#39; placeholder=&#39;New task&#39; class=&#39;form-control input-sm&#39; />                </form>            </div><!-- /.box-footer-->        </div><!-- /.box -->    </div><!-- /.col -->    <div class=&#39;col-md-6&#39;>        <!-- Box -->        <div class="box box-primary">            <div class="box-header with-border">                <h3 id="Second-Box">Second Box</h3>                <div class="box-tools pull-right">                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>                    <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>                </div>            </div>            <div class="box-body">                A separate section to add any kind of widget. Feel free                to explore all of AdminLTE widgets by visiting the demo page                on <a href="https://almsaeedstudio.com">Almsaeed Studio</a>.            </div><!-- /.box-body -->        </div><!-- /.box -->    </div><!-- /.col --></div><!-- /.row -->@endsection</code>

の作成 以下は、このコントローラーのコード部分です:

TestController.php

3. 対応するルート

<code>    php artisan make:controller TestController --plain</code>

を作成します。間違いがなければ、以下のようになります。

<code>        <?php            namespace App\Http\Controllers;            use Illuminate\Http\Request;            use App\Http\Requests;            use App\Http\Controllers\Controller;            class TestController extends Controller            {                public function index() {                $data[&#39;tasks&#39;] = [                        [                            &#39;name&#39; => &#39;Design New Dashboard&#39;,                            &#39;progress&#39; => &#39;87&#39;,                            &#39;color&#39; => &#39;danger&#39;                        ],                        [                            &#39;name&#39; => &#39;Create Home Page&#39;,                            &#39;progress&#39; => &#39;76&#39;,                            &#39;color&#39; => &#39;warning&#39;                        ],                        [                            &#39;name&#39; => &#39;Some Other Task&#39;,                            &#39;progress&#39; => &#39;32&#39;,                            &#39;color&#39; => &#39;success&#39;                        ],                        [                            &#39;name&#39; => &#39;Start Building Website&#39;,                            &#39;progress&#39; => &#39;56&#39;,                            &#39;color&#39; => &#39;info&#39;                        ],                        [                            &#39;name&#39; => &#39;Develop an Awesome Algorithm&#39;,                            &#39;progress&#39; => &#39;10&#39;,                            &#39;color&#39; => &#39;success&#39;                        ]                ];                return view(&#39;test&#39;)->with($data);            }        }        </code>

<code>    Route::get(&#39;test&#39;, &#39;[email&#160;protected]&#39;);</code>

これで、すべてのプロセスが完了します。以下にメッセージを残してください。