AdminLTEは素晴らしいダッシュボードテンプレートですが、純粋なHTMLとCSSで構築されています。 このチュートリアルでは、プロのようにLaravel 5にAdminLTEをインストールする方法を説明します。 Bowerを使用してAdminLTEを管理することで、いつでも最新バージョンに更新できるようにします。
Laravel 5を使い始めるのに適した場所を探していますか？ Laracasts は、Laravelでのプログラミングに関する優れたビデオチュートリアルのセットを提供しています。 このチュートリアルでは、無料の Laravel Fundamentals シリーズ、または少なくとも最初の2つのビデオを視聴したことを前提としています。 このチュートリアルでは、 Homestead とコマンドライン（DOS または ターミナル）の基本的な知識が必要です。
新しいプロジェクトを作成するには、 Laravelのインストーラー を使用します。 より快適な方法があれば、自由に他の方法で行ってください。
それでは、Laravelインストーラーを入手しましょう。 ターミナルで次のコマンドを入力します
composer global require "laravel/installer=~1.1"composerがインストールを完了するまで数分待つ必要がある場合があります。
次に、Laravelの新しいコピーを取得します
laravel new myappこのコマンドで、Laravelの新しいコピーを作成し、myappという名前を付けました。 このコマンドが機能しなかった場合は、Laravelインストーラーがマシンに正しくセットアップされていることを確認してください。
これで、サイトにアクセスすると、Laravelのウェルカムページが表示されるはずです。
laravelフォルダー内のpublicディレクトリに移動します。
cd myapp/publicディレクトリ内で、Bower経由でAdminLTEをインストールします
bower install admin-lte完了すると、bower_componetsというフォルダーがあり、その中にadmin-lteがあります。
Laravelは、 Blade と呼ばれる優れたテンプレートシステムをすぐに提供します。 Bladeを活用するには、スタートページの通常のHTMLをBladeに変換する必要があります。 まず、 resources/views に新しいビューを作成し、 admin_template.blade.php という名前を付けます。 次に、新しいビューへのルートを作成します。
使用しているルートは次のように設定されています
Route::get('admin', function () {
return view('admin_template');
});次に、 bower_components/admin-lte/starter.html の内容を新しいビューにコピーし、アセットリンクを変更してadmin-lteディレクトリを指すようにします。 これが私の予備的な設定です
ページに再度アクセスすると、スターターテンプレートが機能しているはずです。 結果は次のようになります
AdminLTEを使い始めるために必要なすべてのリソースが揃ったので、メインビューに最後の仕上げを追加しましょう。 テンプレートをsidebar.blade.php、header.blade.php、footer.blade.phpの3つのファイルに分割します。 viewsディレクトリにこれらのファイルを作成し、各ファイルに必要なコードを次のように追加します。
1. header.blade.php
2. sidebar.blade.php
3. footer.blade.php
テンプレートを簡単にカスタマイズできるように分割しました。 次に、元の admin_template.blade.php をカスタマイズして、これらのファイルを読み込み、動的なコンテンツの読み込みを可能にする必要があります。 admin_template.blade.phpの最終的なコードは次のとおりです
上記のコードでは、ページを含む content というセクションを追加し、ヘッダー、フッター、サイドバーを読み込み、 $page_title 変数を追加してページにタイトルを付けました。 テンプレートはLaravel 5で使用できるようになりました。
そこからどこへ行くかを示すために、動的に生成されたタスクを含むプログレスバー付きのボックスを表示する簡単なページを作成します。
1. test.blade.phpを作成します。 viewsフォルダー内に新しいファイルを作成し、次のコードを追加します。
2. コントローラーTestControler.phpを作成します。 次のコマンドを使用して新しいコントローラーを作成します
php artisan make:controller TestController --plain新しいコントローラーのコード
3. ルートを作成します。 コントローラーができたので、それを指す新しいルートが必要です。 routes.phpファイル内で、次のルートをコピーします
Route::get('test', 'TestController@index');すべてが正しく行われていれば、テストページにアクセスすると、次のような結果が表示されるはずです。
ダウンロード： AdminLTE-and-Laravel.zip
楽しんでいただければ幸いです
composer global require "laravel/installer=~1.1"composerがインストールを完了するまで数分待つ必要がある場合があります。
次に、Laravelの新しいコピーを取得します
laravel new myappこのコマンドで、Laravelの新しいコピーを作成し、myappという名前を付けました。 このコマンドが機能しなかった場合は、Laravelインストーラーがマシンに正しくセットアップされていることを確認してください。
これで、サイトにアクセスすると、Laravelのウェルカムページが表示されるはずです。
laravelフォルダー内のpublicディレクトリに移動します。
cd myapp/publicディレクトリ内で、Bower経由でAdminLTEをインストールします
bower install admin-lte完了すると、bower_componetsというフォルダーがあり、その中にadmin-lteがあります。
Laravelは、 Blade と呼ばれる優れたテンプレートシステムをすぐに提供します。 Bladeを活用するには、スタートページの通常のHTMLをBladeに変換する必要があります。 まず、 resources/views に新しいビューを作成し、 admin_template.blade.php という名前を付けます。 次に、新しいビューへのルートを作成します。
使用しているルートは次のように設定されています
Route::get('admin', function () {
return view('admin_template');
});次に、 bower_components/admin-lte/starter.html の内容を新しいビューにコピーし、アセットリンクを変更してadmin-lteディレクトリを指すようにします。 これが私の予備的な設定です
ページに再度アクセスすると、スターターテンプレートが機能しているはずです。 結果は次のようになります
AdminLTEを使い始めるために必要なすべてのリソースが揃ったので、メインビューに最後の仕上げを追加しましょう。 テンプレートをsidebar.blade.php、header.blade.php、footer.blade.phpの3つのファイルに分割します。 viewsディレクトリにこれらのファイルを作成し、各ファイルに必要なコードを次のように追加します。
1. header.blade.php
2. sidebar.blade.php
3. footer.blade.php
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2024 <a href="#">Company</a>.</strong> All rights reserved.
</footer>テンプレートを簡単にカスタマイズできるように分割しました。 次に、元の admin_template.blade.php をカスタマイズして、これらのファイルを読み込み、動的なコンテンツの読み込みを可能にする必要があります。 admin_template.blade.phpの最終的なコードは次のとおりです
上記のコードでは、ページを含む content というセクションを追加し、ヘッダー、フッター、サイドバーを読み込み、 $page_title 変数を追加してページにタイトルを付けました。 テンプレートはLaravel 5で使用できるようになりました。
そこからどこへ行くかを示すために、動的に生成されたタスクを含むプログレスバー付きのボックスを表示する簡単なページを作成します。
1. test.blade.phpを作成します。 viewsフォルダー内に新しいファイルを作成し、次のコードを追加します。
2. コントローラーTestControler.phpを作成します。 次のコマンドを使用して新しいコントローラーを作成します
php artisan make:controller TestController --plain新しいコントローラーのコード
3. ルートを作成します。 コントローラーができたので、それを指す新しいルートが必要です。 routes.phpファイル内で、次のルートをコピーします
Route::get('test', 'TestController@index');すべてが正しく行われていれば、テストページにアクセスすると、次のような結果が表示されるはずです。
ダウンロード： AdminLTE-and-Laravel.zip
このチュートリアルを楽しんでいただければ幸いです。 下にコメントや質問を遠慮なく記入してください。
このチュートリアルを楽しんでいただければ幸いです。 下にコメントや質問を遠慮なく記入してください。
コメント (コメントなし)