【Laravel】CRUDアプリの実装【AdminLTE】

Laravel

2026/06/18

本記事は2ページにわたって解説しています。

はじめに

今回は、実践でも活かせるようなマスタメンテナンス機能を実装します。
デザインにつきましては、AdminLTE を使用し、一覧・新規登録・編集・削除機能（CRUD）を実装します。

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows

Laravel Sailで開発環境構築【Vite対応】

今回は、Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。

Mac

【M1 Mac】Laravel Sailで開発環境構築【Vite対応】

Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。

使用するバージョン

Windows 11 or macOS Monterey (M1)
Laravel Framework 9 or 10

WindowsでもMacでも同様に作成できます。
2022/10/01 最新バージョンで動作確認しました。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

余談ですが、Django向けに解説した記事もございますので参考にしてください。

【Django4】CRUDアプリを作ろう！

今回はDjangoでCRUDアプリを作成してみます。

ソースコードについて

ソースコードにつきましては、GitHub のリポジトリに公開しています。
本記事では作成手順の解説をメインにしております。

GitHub – chigusa-web/laravel9-app-crud: laravel9 CRUD アプリケーション

laravel9 CRUD アプリケーション. Contribute to chigusa-web/laravel9-app-crud development by creating an account on GitHub.

ソースの全文につきましては、リポジトリを参照してください。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

【VS Code】インストール手順を解説【Windows/M1 Mac対応】

今回はVS Codeのインストール手順を解説します。WindowsとMacのそれぞれ分けてまとめました。

設定方法は以下を参考にしてください。

【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】

私的に最初に行う設定や、拡張機能、よく使うショートカットや便利な機能をまとめてみました。

画面イメージ

登録されたデータの一覧と、新規登録、編集、削除ボタンを配置しています。
一覧件数が多い場合は、ページネーションを表示するようにしました。

プロジェクトの作成

Sail を使いプロジェクトを作成します。

$ curl -s https://laravel.build/laravel9-app-crud | bash

「laravel9-app-crud」の部分はプロジェクト名ですので、任意で指定してください。

VS Code でプロジェクトを開きましょう。
これ以降は、VS Code のターミナルでコマンドを実行します。
Sail を起動します。

$ sail up -d

最低限の設定を行います。
以下のファイルの該当の個所を修正します。

config\app.php

'timezone' => 'Asia/Tokyo',
..
'locale' => 'ja',

Laravel-AdminLTEを導入

Laravel-AdminLTEの詳細については、以下の記事をご覧ください。

【Laravel】AdminLTEを導入

出来合いのテンプレートを使って、サクッとアプリケーションを作成しましょう！オススメは「AdminLTE」です。 Laravel向けに最適化されたLaravel-AdminLTEの導入から実装まで、詳しく解説しています。

Composer を使用してLaravel-AdminLTEをインストールします。
Laravel のプロジェクト直下で、以下のコマンドを実行します。

$ sail composer require jeroennoten/laravel-adminlte
$ sail artisan adminlte:install

これでデザインが管理画面風になります。

テーブルの作成

今回は「商品マスタ」を想定したマスタメンテナンス画面を作成します。
以下のコマンドでテーブルを作成します。

$ sail artisan make:migration create_products_table

以下のファイルを開き修正します。（日付部分は作成日時）
項目としては「商品名」と「価格」を追加しました。

database\migrations\2022_01_30_143006_create_products_table.php

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('price');
    $table->timestamps();
});

テーブルを作成します。

$ sail artisan migrate

テーブルに対するモデルクラスを作成します。

$ sail artisan make:model Product

コントローラ作成

以下のコマンドでコントローラを作成します。
引数「-r」を指定することにより、CRUD に必要な関数が自動で作成されます。

$ sail artisan make:controller ProductsController -r

ルーティングの作成

CRUD に必要なルーティングを追加します。
以下の一行を追加します。

routes\web.php

use App\Http\Controllers\ProductsController;

// 商品マスタ ルーティング一覧(showは使わない)
Route::resource('product', ProductsController::class, ['except' => ['show']]);

コントローラには、CRUD に必要な関数が自動で追加されますが、今回は「show」を使わないため、上記のような指定になっています。

画面にアクセスするURLは以下になります。

http://localhost/product

一覧ページの作成

以下のコントローラを修正します。
商品テーブルからデータを取得し、ビュー（Blade）へデータを渡します。

app\Http\Controllers\ProductsController.php

use App\Models\Product;
...
  /**
   * Display a listing of the resource.
   *
   * @return \Illuminate\Http\Response
   */
  public function index()
  {
      // 商品一覧
      $products = Product::all();

      return view(
          'product.index',
          ['products' => $products]
      );
  }

テンプレートファイルを作成します。
今回は AdminLTE を使用していますので、余計な HTML を実装する必要はありません。
用意されているテンプレートを読み込むだけです。

一覧のデータをテーブルタグで表示し、新規登録、編集、削除ボタンなどを配置しています。

resources\views\product\index.blade.php

@extends('adminlte::page')

@section('title', '商品一覧')

@section('content_header')
    <h1>商品一覧</h1>
@stop

@section('content')
    {{-- 完了メッセージ --}}
    @if (session('message'))
        <div class="alert alert-info alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
            </button>
            {{ session('message') }}
        </div>
    @endif

    {{-- 新規登録画面へ --}}
    <a class="btn btn-primary mb-2" href="{{ route('product.create') }}" role="button">新規登録</a>

    <div class="card">
        <div class="card-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>商品名</th>
                        <th>価格</th>
                        <th style="width: 70px"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $product)
                        <tr>
                            <td>{{ $product->name }}</td>
                            {{-- 数字フォーマット --}}
                            <td>{{ number_format($product->price) }}</td>
                            <td>
                                <a class="btn btn-primary btn-sm mb-2" href="{{ route('product.edit', $product->id) }}"
                                    role="button">編集</a>
                                <form action="{{ route('product.destroy', $product->id) }}" method="post">
                                    @csrf
                                    @method('DELETE')
                                    {{-- 簡易的に確認メッセージを表示 --}}
                                    <button type="submit" class="btn btn-danger btn-sm"
                                        onclick="return confirm('削除してもよろしいですか?');">
                                        削除
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@stop

kan より:

2022年11月16日 12:20

テキストと本ページの手順通りに実装してみたのですが、作成物を確認するページが分かりません。
localhost/login ではないのでしょうか？

返信
- 千草より:
  
  2022年11月16日 23:01
  画面にアクセスするためのURLは、以下になります。
  (routes\web.phpに定義しています)
```
http://localhost/product
```
  URLは本記事にも追記しました。
  返信
くらくらより:

2023年1月12日 17:50
sail artisan migrateでエラーとなってしまいました。
```
SQLSTATE[HY000] [2002] Connection refused 
(SQL: select * from information_schema.tables 
where table_schema = schemaname and table_name = migrations and table_type = 'BASE TABLE')
```
mysqlにはrootでログインすることができ、そのパスワードを.envファイルに記述しています。
DB接続先は.envに記述してあるものを参照するものだろうと思っているのですが、もしかして別の設定が適用されるパターンとかありますか？
返信
- 千草より:
  
  2023年1月12日 21:36
  DB接続先は.envに記述しているものです。
  
  「Connection refused」となっておりますので、.envの「DB_HOST」が以下のようになっていないでしょうか。
```
DB_HOST=127.0.0.1
```
  Sailを使用しているのであれば、コンテナ名を指定する必要があります。
  初期状態では以下のようになっております。
```
DB_HOST=mysql
```
  こちらで改めて本記事の手順で試しましたが問題ありませんでした。
  解決しない場合は、本記事以外に行った手順、.envの接続情報など、詳細をお知らせ下さい。
  返信

コメントをどうぞコメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

投稿ルール

コメントは承認制となっており、管理人の判断で公開されます。
承認にはお時間をいただきます。(平日の日中は対応できません)
コメントを公開する際、内容を修正する場合があります。
ご質問の場合は、詳細な状況と内容を記載し、丁寧なコメントをお願い致します。
エラーメッセージだけではなく、各種バージョン、経緯、再現手順を記載ください。
記事とは無関係な内容やアバウトなど、その他の理由で承認されない場合があります。
必ずしも管理人が返信するわけではございませんのでご了承ください。

コメント ※

名前 ※

メール ※

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）