conocode
このコード
How to

Laravel で AdminLTE を使う

Laravel で作るサイトにグラフを表示したいんですけど
グラフを表示するしくみはいくつかあるけど、AdminLTE というテンプレートを使うといろいろと管理画面的なサイトが作りやすい

まずは AdminLTE のデモサイト をみてみてください。

こんな感じのデザインが自分のサイトに組み込めます。

ここでは Laravel で AdminLTE を使う際の簡単な手順を紹介します。

まずは、Laravel のインストールを行ってアクセスできるようにします。

その後、こちら から最新のデータ(2020/5/3時点では3.0.4が最新)をダウンロードします。

ZIPファイルを展開して出てきた dist と plugins フォルダを、Laravel の public 以下にコピーして公開します。

AdminLTE のデータ中にある index.html の内容を、Laravel の view のテンプレートにコピペします。

テンプレート中の dist と plugins のパスを絶対パス(/dist/… と /plugins)に書き換えます。

この段階で Laravelサイトにアクセスすると AdminLTEデザインの画面がみられるようになっているかと思います。

テンプレート中の content-wrapper の中身はそれぞれのページの内容に合わせて書き換えられるようにcontent-wrapper部分のコードを以下のようにします。

ページ毎に view を作り content の中身を実装すれば出来上がりです。

試しに新型コロナウィルスの感染者数をグラフで表示するサイトを作ってみました。

グラフ表示の場合は chartjs の使い方なども知っていないと難しいかもしれませんが、ボタンやウィジェットなどは、AdminLTE のサンプルソースからコピペすれば大体は使えるので導入は比較的簡単かと思います。